/* Kazo overrides. Loaded after the template CSS so the template files stay untouched
   and replaceable. Everything we change to the Carola theme belongs here. */

/* The template sized .language-switcher as a 24px flag circle for the jQuery polyglot
   plugin. It now holds a real <select>. */
.main_header_inner .language-switcher {
	width: auto;
	height: auto;
	border-radius: 0;
}

.language-switcher select {
	padding: 4px 6px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	background-color: transparent;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
}

/* Category filter on the car listing — plain links, no jQuery isotope. */
.car-filter-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 40px;
	padding: 0;
	list-style: none;
}

.car-filter-tabs a {
	display: inline-block;
	padding: 8px 20px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 30px;
	color: inherit;
	transition: all 300ms ease;
}

.car-filter-tabs a:hover,
.car-filter-tabs a.active {
	background-color: var(--theme-color);
	border-color: var(--theme-color);
	color: #fff;
}

/* Day/price schedule on the car cards and the car page. Every tier is visible at
   once rather than one "from" price — the client asked for the layout cars4rent.ge
   uses. The tiers come from the car's own data, which starts at the 2-day minimum. */
.rate-tiers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin: 18px 0;
}

.rate-tier {
	padding: 8px 4px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	background: var(--grey-bg);
	line-height: 1.3;
	text-align: center;
}

.rate-tier-days {
	display: block;
	font-size: 12px;
	color: var(--body-color);
	white-space: nowrap;
}

.rate-tier-price {
	display: block;
	font-family: var(--primary-font);
	font-size: 17px;
	color: var(--primary-color);
}

/* The cheapest tier is the one the card's corner badge quotes, so mark it as the
   same number rather than leaving the two looking like they disagree. */
.rate-tier.best {
	border-color: var(--theme-color);
	background: var(--theme-color);
}

.rate-tier.best .rate-tier-days,
.rate-tier.best .rate-tier-price {
	color: #fff;
}

/* Narrow phones: the tiers read as a schedule only while they stay on one row, so
   shrink the type rather than let the last tier wrap onto a line of its own.
   Georgian labels ("8-14 დღე") are the widest, and they fit at 320px. */
@media only screen and (max-width: 420px) {
	.rate-tiers {
		gap: 4px;
	}

	.rate-tier {
		padding: 7px 2px;
	}

	.rate-tier-days {
		font-size: 10px;
	}

	.rate-tier-price {
		font-size: 15px;
	}
}

.rate-note,
.quote-note {
	font-size: 14px;
	opacity: 0.75;
}

.tour-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 10px;
}

.tour-gallery img {
	width: 100%;
	height: 120px;
	object-fit: cover;
}

.ml_10 {
	margin-left: 10px;
}

/* The quote form uses native inputs where the template assumed jQuery widgets.
   They were transparent with a hairline under them, so an empty field read as no
   field at all and the only thing you could click was the text line itself. Same
   boxes as .booking-request below, so the home page and the car pages stop looking
   like two different sites. */
.searchbox-input select,
.searchbox-input input {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 6px;
	background: #fff;
	/* Under 16px iOS zooms the whole page in on focus. */
	font-size: 16px;
	font-family: inherit;
	color: #111827;
}

.searchbox-input select:focus-visible,
.searchbox-input input:focus-visible {
	outline: 2px solid var(--theme-color);
	outline-offset: 1px;
	border-color: var(--theme-color);
}

/* The template's label is 12px mid-grey, legible only once you already know what
   the field is. Its own selector is seven classes deep, so matching that depth is
   the only way to raise it. */
.booking-section .filter-wrapper .filter-group form .filter-area .single-search-box .searchbox-input label {
	font-size: 14px;
	color: #374151;
	margin-bottom: 6px;
}

/* The template drew a hairline between fields because they had no edges of their
   own. Now that every field is a box, the separator is just a line through the gap. */
.booking-section .filter-wrapper .filter-group form .filter-area .divider::after {
	content: none;
}

/* Country code + number, same flex trick .datetime-field uses: width:100% above
   would otherwise stack them. The code sizes to its own content so the number keeps
   the rest of the column. */
.phone-field {
	display: flex;
	gap: 8px;
}
.phone-field > select { flex: 0 0 auto; width: auto; }
.phone-field > input { flex: 1 1 0; min-width: 0; }

/* Some of the client's car photos are portrait phone shots. Without a fixed ratio they
   blow the card height out; cover-cropping to 4:3 keeps every card the same size. */
.single-popular-car-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.product-details-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Category tiles hold real car photos now, not the template's small PNG silhouettes. */
.car-type-item .car-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.car-type-item {
	display: block;
	color: inherit;
}

.search-summary {
	margin-bottom: 20px;
	opacity: 0.75;
}

/* The counters the original site showed under "Why Choose Kazo Travel?". */
.kazo-stat {
	margin-bottom: 30px;
}

.kazo-stat strong {
	display: block;
	font-size: 40px;
	line-height: 1.1;
	color: var(--theme-color);
}

.kazo-stat span {
	opacity: 0.8;
}

.kazo-benefits {
	margin-top: 50px;
}

/* Beside the "Why Choose" text the counters read as one line with the eyebrow
   above the heading, and keep their distance from that column's text. */
@media (min-width: 992px) {
	.kazo-stats {
		padding-top: 8px;
		padding-left: 40px;
	}
}

.wechat-qr {
	display: block;
	width: 160px;
	max-width: 100%;
	margin: 12px auto 0;
	border-radius: 6px;
}

/* Booking requests are now recorded rather than handed to WhatsApp, so the car and
   tour pages carry a real form. */
.booking-request .booking-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0 16px;
}

.booking-request label {
	display: block;
	margin-bottom: 14px;
	font-size: 14px;
	color: #6b7280;
}

.booking-request input,
.booking-request select,
.booking-request textarea {
	display: block;
	width: 100%;
	margin-top: 5px;
	padding: 10px 12px;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 6px;
	background: #fff;
	font: inherit;
	color: #111827;
}

.booking-request textarea { resize: vertical; }

/* Date and time are two pickers now, sharing one field's width. flex-basis 0 with
   min-width 0 keeps the pair inside the column the template gives them. */
.datetime-field {
	display: flex;
	gap: 8px;
}
.datetime-field > input[type="date"] { flex: 2 1 0; }
.datetime-field > select { flex: 1 1 0; }
.datetime-field > input,
.datetime-field > select { min-width: 0; }
.booking-error { color: #b42318; margin-bottom: 12px; }
.booking-note { font-size: 13px; opacity: 0.7; margin-top: 12px; }

.booking-done {
	padding: 22px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	background: #fbfaf7;
}
.booking-done h4 { margin: 0 0 6px; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.booking-request input[name="company"],
.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* --- Fixes for the template's assumptions that our content breaks --- */

/* global.css widens .row's gutter to 30px but leaves bootstrap's .container on
   24px, so every row hung 3px past the viewport on phones. */
.container {
	--bs-gutter-x: 30px;
}

/* Bootstrap columns already stretch to the tallest card in the row; the card
   itself did not, so shorter ones left their "View & Book" button floating
   mid-column. Fill the column and pin the button to the bottom. */
.single-popular-car-block {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.single-popular-car-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}
/* Push the whole divider + specs + button group down, not just the button, so
   a short description does not leave the specs floating mid-card. */
.car-card-meta {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}
.single-popular-car-content .border-divider {
	margin-top: auto;
}

/* The template never colours <a>, so a card title rendered browser-default blue:
   h5's own colour does not reach the link inside it. */
.single-popular-car-title a {
	color: inherit;
}

.single-popular-car-title a:hover {
	color: var(--theme-color);
}

/* The photo carries the car's class instead of a corner "from €35" badge, which
   said one number while the schedule below it said four. A pill rather than a
   full-width bar: it labels the photo without covering a strip of the car. */
.car-card-category {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 5px 14px;
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.94);
	font-family: var(--secondary-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 20px;
	color: var(--primary-color);
}

/* Car features carry an icon where one is mapped (lib/content.ts). Scoped to
   .car-features so the tour, service and homepage lists that share
   .product-feature-list keep their plain bullets. */
.car-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 10px 20px;
	margin: 22px 0;
	padding: 0;
	list-style: none;
}

.car-features li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
}

.car-features li i {
	flex: 0 0 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--grey-bg);
	font-size: 14px;
	color: var(--theme-color);
}

/* --- Car and tour listing -----------------------------------------------
   A list, one vehicle per row — on the fleet page and on the homepage alike.
   Each row splits into rails: photo, spec sheet, price schedule. The eye reads
   down a column instead of hunting across a band, and the rates line up all the
   way down the page. Premium here is restraint — hairline borders, one radius,
   the accent colour spent only on the cheapest tier — not more chrome. */
.car-rows {
	display: grid;
	gap: 22px;
}

/* The homepage runs the list above a "see all" button; the fleet page does not. */
.car-rows + .centred {
	margin-top: 50px;
}

/* The template's 80px drop shadow under every tile reads as a catalogue dump by
   the sixth row. A hairline and a radius hold the same shape for less ink. */
.car-rows .single-popular-car-block {
	margin-bottom: 0;
	padding: 14px;
	border: 1px solid rgba(17, 17, 17, 0.09);
	border-radius: 18px;
	background: #fff;
	box-shadow: none;
	transition: border-color 300ms ease, box-shadow 300ms ease;
}

.car-rows .single-popular-car-block:hover {
	border-color: rgba(17, 17, 17, 0.16);
	box-shadow: 0 22px 45px -30px rgba(17, 17, 17, 0.55);
}

.car-rows .single-popular-car-image {
	border-radius: 14px;
}

/* The template zooms the photo 15% on hover, which crops the car's own nose off
   at this size. */
.car-rows .single-popular-car-block:hover .single-popular-car-image img {
	transform: scale(1.05);
}

.car-rows .single-popular-car-content {
	padding: 18px 6px 4px;
}

.car-rows .single-popular-car-title {
	margin-bottom: 8px;
}

/* Two lines, so one wordy car cannot set the height of every row on the page. */
.car-rows .single-popular-car-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-bottom: 18px;
	padding-bottom: 0;
	color: var(--body-color);
}

/* The specs read as a spec sheet once they are boxed together, and the box gives
   the row its middle block of structure. */
.car-rows .single-popular-car-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
	gap: 4px 18px;
	margin: 0;
	padding: 14px 18px;
	border: 1px solid rgba(17, 17, 17, 0.08);
	border-radius: 12px;
	background: var(--grey-bg);
}

.car-rows .single-popular-car-info li {
	margin: 0;
	font-size: 15px;
}

.car-rows .single-popular-car-info li i {
	font-size: 19px;
}

/* The divider stood in for structure the boxed specs now provide. */
.car-rows .border-divider {
	display: none;
}

/* Equipment, as chips rather than a fourth list — a scannable extra, not part of
   the spec sheet the specs box carries. */
.car-card-features {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.car-card-features li {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 4px 12px;
	border: 1px solid rgba(17, 17, 17, 0.1);
	border-radius: 30px;
	font-size: 13px;
	line-height: 22px;
	color: var(--primary-color);
}

.car-card-features li i {
	font-size: 12px;
	color: var(--theme-color);
}

.car-card-price-label {
	display: block;
	margin-bottom: 10px;
	font-family: var(--secondary-font);
	font-size: 11px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--body-color);
}

.car-card-note {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 20px;
	text-align: center;
	color: var(--body-color);
}

/* Stacked, the rate block follows the equipment chips with nothing between. */
.car-rows .car-card-price {
	margin-top: 20px;
}

/* The schedule stacks into a price list: legible where four boxes squeezed side
   by side are not, and it holds at any rail width. */
.car-rows .rate-tiers {
	display: block;
	margin: 0;
	border: 1px solid rgba(17, 17, 17, 0.09);
	border-radius: 12px;
	overflow: hidden;
}

.car-rows .rate-tier {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 14px;
	border: 0;
	border-top: 1px solid rgba(17, 17, 17, 0.07);
	border-radius: 0;
	background: #fff;
	text-align: left;
}

.car-rows .rate-tier:first-child {
	border-top: 0;
}

.car-rows .rate-tier-days {
	font-size: 14px;
}

.car-rows .rate-tier-price {
	font-size: 19px;
}

/* The cheapest tier is the one worth pointing at, and a tinted row does it
   without turning a quarter of the row red. */
.car-rows .rate-tier.best {
	background: rgba(255, 44, 59, 0.05);
}

.car-rows .rate-tier.best .rate-tier-days {
	color: var(--primary-color);
}

.car-rows .rate-tier.best .rate-tier-price {
	color: var(--theme-color);
}

/* A tour has one price, so its rail carries the figure a car's rate table does. */
.tour-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0;
}

.tour-price strong {
	font-family: var(--primary-font);
	font-size: 28px;
	line-height: 1;
	color: var(--theme-color);
}

.tour-price span {
	font-size: 14px;
	color: var(--body-color);
}

/* Unscoped: .tour-price and .rate-tiers both sit flush, and the tours listing
   page uses the same card without .car-rows around it. */
.single-popular-car-book-btn {
	margin-top: 14px;
}

/* The button is the row's one call to action, so it is solid rather than
   outlined — an outline next to a boxed spec sheet and a boxed rate table is a
   third empty rectangle saying nothing. */
.car-rows .single-popular-car-book-btn .btn-style-three {
	display: block;
	width: 100%;
	padding: 11px 20px;
	border-radius: 10px;
	background: var(--primary-color);
	text-align: center;
	color: #fff;
}

.car-rows .single-popular-car-book-btn .btn-style-three:hover {
	background: var(--theme-color);
	border-color: var(--theme-color);
}

/* From phablet up the photo moves beside the text. Full width, a 4:3 photo is
   taller than everything it illustrates. */
@media only screen and (min-width: 600px) {
	.car-rows .single-popular-car-block {
		display: grid;
		grid-template-columns: minmax(220px, 38%) minmax(0, 1fr);
		gap: 0 26px;
		align-items: center;
	}

	.car-rows .car-card-meta {
		display: block;
	}

	.car-rows .single-popular-car-content {
		padding: 0;
	}
}

/* Desktop: a wide photo the car is actually legible in, and the schedule on its
   own rail so prices line up down the whole list. */
@media only screen and (min-width: 992px) {
	.car-rows .single-popular-car-block {
		grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
		gap: 0 34px;
		padding: 16px;
	}

	.car-rows .single-popular-car-content {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(250px, 290px);
		gap: 0 34px;
		align-items: center;
	}

	.car-rows .car-card-price {
		margin-top: 0;
	}

	.car-rows .single-popular-car-title {
		font-size: 26px;
	}

	/* Specs run across rather than down — three stacked rows were what made the
	   row taller than its own photo. */
	.car-rows .single-popular-car-info {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* The template's .car-image is a fixed 60px; our 4/3 tiles overflowed it and
   painted over the car-type name underneath. */
.car-type-item .car-image {
	height: auto;
}

/* Gallery photos are a mix of 4:3, 3:2 and panoramas, so the carousel row came
   out ragged. Crop them all to one ratio instead. Scoped to the figure so the
   lightbox arrow icon keeps its own size. */
.gallery-section .gallery-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* .breadcrumb-section prints a white 64px heading straight onto the photo. The
   template shipped dark images; ours are bright skies and snow. */
.breadcrumb-section {
	position: relative;
}
.breadcrumb-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(6, 7, 2, 0.66) 0%,
		rgba(6, 7, 2, 0.34) 45%,
		rgba(6, 7, 2, 0.52) 100%
	);
}
.breadcrumb-section .container {
	position: relative;
	z-index: 1;
}

/* Inner pages float the top bar over that same photo, in near-black text. */
.header.home-three .header-top-one .header-top-info p,
.header.home-three .header-top-one .header-top-contact-info ul li,
.header.home-three .header-top-one .header-top-contact-info ul li a,
.header.home-three .header-top-one .header-top-contact-info ul li i {
	color: #fff;
}

/* The quote form has six fields where the template had four, so it wraps to a
   second row that the template never spaced. */
.booking-section .filter-area .row {
	row-gap: 20px;
}
.booking-section .filter-area .quote-submit {
	display: flex;
	align-items: flex-end;
}
/* The one control that is not a field still has to be a 48px target, and on a phone
   there is no reason for it to be narrower than everything above it. */
.booking-section .filter-area .quote-submit button {
	min-height: 48px;
}
@media (max-width: 767px) {
	.booking-section .filter-area .quote-submit button {
		width: 100%;
	}
}

/* .language-switcher is a 24px circle in the template — it held a flag sprite,
   not a <select>. Inner pages put it on the dark nav bar, where the inherited
   near-black text disappeared. */
.language-switcher {
	width: auto;
	height: auto;
	border-radius: 0;
	margin-right: 0;
}
.language-switcher select {
	border: 0;
	background: transparent;
	font-family: var(--secondary-font);
	font-size: 15px;
	font-weight: 500;
	color: #111;
	cursor: pointer;
}
.home-three .language-switcher select {
	color: #fff;
}
/* The dropdown panel itself stays light in both cases. */
.language-switcher select option {
	color: #111;
}

/* Same equal-height problem as the car cards: the column stretches, the white
   card inside does not, so the three contact cards ended at different depths.
   80px is the item's own 50px top + 30px bottom margin. */
.contact-details-section .contact-info-item {
	height: calc(100% - 80px);
}

/* The hero prints near-black copy and grey body text straight onto the slide
   photo — the template shipped a plain studio shot, ours are mountains and
   clouds whose ridge lines cut right through the text. Scrim sits above
   .image-layer and below .slider_content (z-index 11). */
.slider.style_one .slide-item-content::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.9) 0%,
		rgba(255, 255, 255, 0.7) 42%,
		rgba(255, 255, 255, 0) 78%
	);
}
/* Narrow screens: the copy runs the full width, so a directional fade leaves
   the line ends exposed. */
@media only screen and (max-width: 991px) {
	.slider.style_one .slide-item-content::after {
		background: rgba(255, 255, 255, 0.8);
	}
}

/* Georgian is the site's main language, but the template's two faces are
   Latin-only. Appending a Georgian face lets the browser fall through per
   glyph: Latin still renders in Outfit/Inter, Georgian in Noto Sans Georgian,
   instead of whatever the visitor's OS picks. */
:root {
	--primary-font: "Outfit", "Noto Sans Georgian", sans-serif;
	--secondary-font: "Inter", "Noto Sans Georgian", sans-serif;
}

/* A phone number should never break across lines, in any locale. */
.link-btn .btn-style-one {
	white-space: nowrap;
}

/* Georgian words run longer than the template's English, and the six-item nav
   ran out of room at 1440px. Scoped to :lang(ka) so the other locales keep the
   template's spacing. */
:lang(ka) .main-menu .navigation > li > a {
	font-size: 16px;
}
:lang(ka) .main-menu .navigation > li,
:lang(ka) .home-three .main-menu .navigation > li,
:lang(ka) .home-three .sticky_header .main-menu .navigation > li {
	padding: 5px 10px;
}
:lang(ka) .header_right_content {
	gap: 14px;
}

/* Homepage location strip. The map itself reuses .google-map-section, so it
   gets the same 520px height as the contact page's. */
.location-section .location-address {
	margin-top: 14px;
}
.location-section .location-address a {
	color: var(--body-color);
}
.location-section .location-address a:hover {
	color: var(--theme-color);
}
.location-section .google-map-section iframe {
	border-radius: 10px;
}

/* Titles are uppercased in the markup, not with CSS: browsers deliberately skip
   the Mkhedruli -> Mtavruli case mapping for `text-transform: uppercase`, so it
   is a no-op on the site's main language. String.toUpperCase() does map it. */

/* The template's leading is Latin-tuned (56px/60px in the hero, 64px/74px for
   h1) and clipped Georgian ascenders and descenders against the next line. */
:lang(ka) h1,
:lang(ka) h2,
:lang(ka) h3,
:lang(ka) h4,
:lang(ka) .section-title h2.title,
:lang(ka) .slider.style_one .slide-item-content .slider_content h1 {
	line-height: 1.3;
}