/* =========================================================
Carex.ge — Design System (Light + Orange)
Plain CSS, no framework. Mobile-first.
========================================================= */
/* ---------- Design tokens ---------- */
:root {
/* Brand */
--orange: #E8602C;
--orange-dark: #cf4f1f;
--orange-soft: #fdeee7;
/* Ink / neutrals */
--ink: #2e2f2f; /* darkest text — a touch lighter than the header, so it reads the same on white */
--dark: #2e2f2f; /* dark surfaces: footer, CTA band, dark buttons/tooltips */
--header-bg: #1f1f1f; /* the header only (and its currency list) */
--ink-2: #3c434c;
--ink-3: #69727c;
--ink-4: #98a1ab;
/* Surfaces */
--bg: #ffffff;
--bg-soft: #f5f6f8;
--bg-soft-2: #eef0f3;
--line: #e4e7eb;
--line-2: #d7dbe0;
/* Status */
--green: #1f9d6b;
--green-soft: #e7f6ef;
--red: #d8453a;
--amber: #e6a700;
/* Effects */
--shadow-sm: 0 1px 2px rgba(16,25,40,.06), 0 1px 3px rgba(16,25,40,.04);
--shadow-md: 0 4px 14px rgba(16,25,40,.08), 0 2px 6px rgba(16,25,40,.05);
--shadow-lg: 0 18px 50px rgba(16,25,40,.14), 0 6px 18px rgba(16,25,40,.07);
--shadow-orange: 0 10px 24px rgba(232,96,44,.30);
/* Radius */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
--r-pill: 999px;
/* Layout */
--maxw: 1240px;
--gutter: 22px;
--header-h: 123px;
/* Type */
--font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font);
color: var(--ink);
background: var(--bg);
line-height: 1.6;
font-size: 16px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
ul { list-style: none; }
/* ---------- Helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(48px, 7vw, 96px); }
.section--soft { background: var(--bg-soft); }
/* Home page only: tighter space between the blocks (two paddings meet at every join, so each is cut further). */
.page-home .section { padding-block: clamp(30px, 4.2vw, 58px); }
.page-home .section-head { margin-bottom: 32px; }
.text-center { text-align: center; }
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--orange);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--orange); border-radius: 2px; }
.eyebrow--center::after { content: ""; width: 22px; height: 2px; background: var(--orange); border-radius: 2px; }
.section-head { max-width: 620px; margin-bottom: 40px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 {
font-size: clamp(1.7rem, 3.6vw, 2.6rem);
line-height: 1.12; font-weight: 700; letter-spacing: -.02em;
margin-top: 14px;
}
.section-head p { color: var(--ink-3); font-size: 1.05rem; margin-top: 14px; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-weight: 700; font-size: .95rem; line-height: 1;
padding: 14px 24px; border-radius: var(--r-pill);
transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--orange); color: #fff; box-shadow: var(--shadow-orange); }
.btn--primary:hover { background: var(--orange-dark); transform: translateY(-2px); }
.btn--ghost { background: var(--bg); color: var(--ink); border: 1.5px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--light:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn--block { width: 100%; }
.btn--lg { padding: 17px 30px; font-size: 1rem; }
.btn--sm { padding: 10px 18px; font-size: .85rem; }
/* ---------- Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: var(--header-bg);
border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Two-tier header */
.header-top-inner { height: 72px; display: flex; align-items: center; gap: 24px; }
.header-top-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.header-bottom { display: none; border-top: 1px solid rgba(255,255,255,.08); }
.header-bottom-inner { height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header-bottom .main-nav ul { margin-left: -15px; }
.header-book { white-space: nowrap; }
.logo { display: inline-flex; align-items: baseline; font-weight: 700; font-size: 2rem; letter-spacing: -.04em; }
.logo b { color: var(--ink); font-weight: 700; }
.logo span { color: var(--orange); }
/* Header brand: logo image + tagline below */
.logo--brand { flex-direction: column; align-items: flex-start; gap: 3px; }
/* Fixed height, natural width: never squeezed by the header column (the old
max-width:100% narrowed it and the logo looked stretched in height). */
.logo-img { height: 28px; width: auto; max-width: none; flex-shrink: 0; object-fit: contain; display: block; }
.logo--brand .logo-tag {
font-size: .56rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em;
color: rgba(255,255,255,.55); white-space: nowrap;
}
/* Slogan right of the logo (from the old site) — wide screens only */
.header-slogan {
display: none; margin: 0; padding-left: 22px; border-left: 1px solid rgba(255,255,255,.14);
flex-direction: column; gap: 3px; line-height: 1.3; white-space: nowrap;
}
.header-slogan .hs-main { font-size: .84rem; font-weight: 600; color: #fff; letter-spacing: .005em; }
.header-slogan .hs-sub { font-size: .76rem; font-weight: 500; color: rgba(255,255,255,.55); }
.header-slogan .hs-sub::before { content: ""; display: inline-block; width: 14px; height: 2px; margin: 0 7px 3px 0; vertical-align: middle; background: var(--orange); border-radius: 2px; }
@media (min-width: 1080px) { .header-slogan { display: flex; } }
/* Dark header — light text */
.site-header .main-nav a { color: #fff; }
.site-header .main-nav a:hover { color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); }
.site-header .main-nav a.is-active { color: var(--orange); }
.site-header .hc-label { color: rgba(255,255,255,.55); }
.site-header .hc-nums a { color: #fff; }
.site-header .hc-nums a:hover { color: var(--orange); }
.site-header .hc-sep { color: rgba(255,255,255,.3); }
/* Currency and flags on one line: $ USD ▾ | flags (the list opens below).
Deliberately low-key — the currency must not compete with the flags or the menu. */
.site-header .lang-cur { display: flex; align-items: center; gap: 12px; }
.site-header .cur-menu { padding-right: 12px; border-right: 1px solid rgba(255,255,255,.35); line-height: 18px; }
.cur-menu { position: relative; }
.site-header .cur-current {
display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; white-space: nowrap;
font-size: .68rem; font-weight: 600; letter-spacing: .02em; line-height: 1;
color: rgba(255,255,255,.85); transition: color .15s;
}
.site-header .cur-current i { font-size: .5rem; opacity: .8; transition: transform .15s; }
.site-header .cur-current:hover, .cur-menu.is-open .cur-current { color: #fff; }
.cur-menu.is-open .cur-current i { transform: rotate(180deg); }
.site-header .cur-opts {
position: absolute; top: calc(100% + 8px); left: 0; z-index: 120;
display: none; flex-direction: column; align-items: stretch; gap: 0; min-width: 96px; padding: 4px;
background: var(--header-bg); border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.cur-menu.is-open .cur-opts { display: flex; }
.site-header .cur-opts button {
display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px;
font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.72); text-align: left;
}
.site-header .cur-opts button:hover { color: #fff; background: rgba(255,255,255,.07); }
.site-header .cur-opts button.is-active { color: #fff; background: rgba(255,255,255,.1); }
.site-header .cur-opts .cur-sym { width: 12px; text-align: center; opacity: .6; }
.site-header .flag { box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.site-header .burger { border-color: rgba(255,255,255,.22); color: #fff; background: transparent; }
.main-nav { display: none; }
.main-nav ul { display: flex; align-items: center; gap: 4px; }
.main-nav a {
display: inline-block; padding: 9px 15px; border-radius: var(--r-pill);
font-weight: 600; font-size: .95rem; color: var(--ink-2);
transition: color .15s ease, background .15s ease;
}
.main-nav a:hover { color: var(--ink); background: var(--bg-soft); }
.main-nav a.is-active { color: var(--orange); }
/* Header contact + lang/currency share one 2-row rhythm so their rows line up */
.header-contact, .lang-cur { grid-template-rows: 20px 20px; align-items: center; justify-items: end; }
/* Header contact block (label on top, two numbers on one line) */
.header-contact { display: none; line-height: 1.2; }
.hc-label { font-size: .58rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); }
.hc-nums { display: flex; align-items: center; gap: 9px; }
.hc-nums a { font-size: .84rem; font-weight: 600; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hc-nums a:hover { color: var(--orange); }
.hc-sep { color: var(--line); font-weight: 400; }
/* Language flags + currency switcher (header) */
.lang-cur { display: grid; }
.lang-flags { display: flex; gap: 6px; }
.flag {
width: 26px; height: 18px; border-radius: 3px; overflow: hidden; display: block;
opacity: .6; box-shadow: 0 0 0 1px rgba(0,0,0,.08); transition: opacity .15s, box-shadow .15s;
}
.flag svg { width: 100%; height: 100%; display: block; }
.flag:hover { opacity: .85; }
.flag.is-active { opacity: 1; box-shadow: none; }
.cur-opts { display: flex; align-items: center; gap: 9px; }
.cur-opts button { font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-4); transition: color .15s; }
.cur-opts button:hover { color: var(--ink-2); }
.cur-opts button.is-active { color: var(--orange); }
/* Drawer contact (mobile) */
.drawer-contact { display: flex; flex-direction: column; gap: 10px; }
.drawer-contact .dc-label { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--ink-3); margin-bottom: 2px; }
.burger {
display: inline-grid; place-items: center; width: 44px; height: 44px;
border-radius: var(--r-sm); border: 1.5px solid var(--line); background: #fff;
}
.burger svg { width: 22px; height: 22px; }
/* Mobile drawer */
.drawer-backdrop {
position: fixed; inset: 0; background: rgba(16,25,40,.5); z-index: 200;
opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.drawer-backdrop.open { opacity: 1; visibility: visible; }
.drawer {
position: fixed; top: 0; right: 0; height: 100%; width: min(86vw, 340px);
background: #fff; z-index: 201; box-shadow: var(--shadow-lg);
transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
display: flex; flex-direction: column; padding: 20px;
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.drawer-close { width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--bg-soft); }
.drawer-close svg { width: 22px; height: 22px; }
.drawer nav a {
display: block; padding: 14px 12px; border-radius: var(--r-md);
font-weight: 700; font-size: 1.05rem; color: var(--ink); border-bottom: 1px solid var(--line);
}
.drawer nav a:hover { color: var(--orange); }
.drawer-foot { margin-top: auto; padding-top: 18px; }
/* =========================================================
HERO
========================================================= */
.hero { position: relative; overflow: hidden; background: var(--bg-soft); }
.hero::before {
content: ""; position: absolute; top: -30%; right: -10%; width: 60%; height: 130%;
background: radial-gradient(closest-side, rgba(232,96,44,.10), transparent 70%);
pointer-events: none;
}
.hero-inner { position: relative; padding-block: clamp(28px, 4vw, 56px); }
.hero-grid { display: grid; gap: 40px; align-items: stretch; }
.hero-copy { max-width: 600px; }
.hero-text { margin-top: 28px; }
.hero h1 {
font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.06; font-weight: 700;
letter-spacing: -.03em; margin: 14px 0 0;
}
.hero h1 .accent { color: var(--orange); }
.hero-lead { font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--ink-3); margin-top: 18px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 26px; }
.hero-points li { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem; color: var(--ink-2); }
.hero-points .tick {
width: 24px; height: 24px; flex: none; border-radius: 50%;
background: var(--green-soft); color: var(--green); display: grid; place-items: center;
}
.hero-points .tick svg { width: 14px; height: 14px; }
/* Phones: the same three points are listed in the trust strip right below
the hero, so they are not repeated here — it saves a lot of height. */
@media (max-width: 767px) {
.hero-points { display: none; }
}
/* Right column: the photo in a fixed 4:3 frame (the shape of the car photos
everywhere else) and, under it, the featured-car panel that fills whatever
height the left column leaves. */
.hero-media { position: relative; display: flex; flex-direction: column; gap: 14px; }
.hero-photo { position: relative; }
.hero-slideshow {
position: relative; width: 100%; aspect-ratio: 4/3;
border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg);
background: var(--bg-soft);
}
.hero-slide {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
opacity: 0; transition: opacity 1.1s ease; transform: scale(1.02);
}
.hero-slide.is-active { opacity: 1; }
.hero-media-overlay {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, transparent 60%, rgba(16,21,31,.22) 100%);
}
/* Featured car — follows the slideshow (initHeroSlideshow in main.js). */
.hero-pick {
flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
box-shadow: var(--shadow-md); padding: 18px 22px;
}
.hp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hp-eyebrow {
font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.hp-dots { display: flex; gap: 6px; }
.hp-dot {
width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--r-pill);
background: var(--line); cursor: pointer; transition: width .25s ease, background .25s ease;
}
.hp-dot:hover { background: var(--ink-4); }
.hp-dot.is-active { width: 24px; background: var(--ink); }
.hp-main {
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
transition: opacity .25s ease;
}
.hero-pick.is-changing .hp-main { opacity: 0; }
.hp-info { min-width: 0; }
.hp-name { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.hp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--ink-4); font-size: .85rem; }
.hp-type {
background: var(--bg-soft); color: var(--ink-2); border-radius: var(--r-pill);
padding: 3px 9px; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.hp-type:empty { display: none; }
.hp-price { flex: none; text-align: right; white-space: nowrap; }
.hp-price small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.hp-price strong { font-size: 1.75rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.hp-price span { font-size: .85rem; color: var(--ink-3); }
/* No Deposit under the price, right-aligned with it. */
.hp-price .hp-nodep { margin-top: 8px; display: flex; justify-content: flex-end; }
.hp-price .hp-nodep .car-nodep { font-size: .72rem; color: var(--green); }
.hp-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hp-actions .btn i { font-size: .85em; margin-left: 4px; }
.hp-all { font-size: .9rem; font-weight: 700; color: var(--ink-2); }
.hp-all:hover { color: var(--orange); }
/* Rating: a small one-line pill in the photo's top-left corner (sky or
trees there, not the car). Same on every screen size. */
/* "Read our Google reviews" — a small pill on the hero photo, top-left. */
.google-reviews-btn {
position: absolute; left: 14px; top: 14px; max-width: calc(100% - 28px);
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
border-radius: var(--r-pill); box-shadow: 0 4px 14px rgba(16,25,40,.14);
padding: 7px 13px 7px 11px;
color: var(--ink); font-size: .8rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
transition: transform .15s ease, box-shadow .15s ease;
}
.google-reviews-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16,25,40,.2); color: var(--ink); }
.google-reviews-btn { gap: 7px; padding: 7px 14px 7px 11px; }
.google-reviews-btn .gr-g { width: 16px; height: 16px; flex-shrink: 0; display: block; }
.google-reviews-btn .gr-score { font-size: .92rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
/* Five stars: a grey row with an amber row on top, clipped to the score
(4.8 → 96%), so a partial star reads at a glance. */
.gr-stars { position: relative; display: inline-flex; line-height: 1; }
.gr-stars i { font-size: .74rem; margin-right: 1px; }
.gr-stars-bg { display: inline-flex; color: #d9dbe0; }
.gr-stars-fill { position: absolute; inset: 0 auto 0 0; display: inline-flex; overflow: hidden; white-space: nowrap; color: var(--amber); }
.google-reviews-btn .gr-label {
padding-left: 8px; margin-left: 1px; border-left: 1px solid rgba(16,25,40,.14);
color: var(--ink-2); font-weight: 600;
}
/* =========================================================
SEARCH WIDGET (booking)
========================================================= */
.search-card {
background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
padding: 10px; border: 1px solid var(--line);
}
.hero .search-card { margin-top: 0; }
/* Why a searched period can't be booked (minimum 2 days, car taken, …) —
sits under the fields of whichever search card it belongs to. */
.search-card .form-alert {
display: flex; align-items: flex-start; gap: 9px;
margin: 8px 4px 2px; padding: 10px 13px; border-radius: var(--r-sm);
background: #fdecea; color: var(--red);
font-size: .86rem; font-weight: 600; line-height: 1.4;
}
.search-card .form-alert[hidden] { display: none; }
.search-card .form-alert i { font-size: 15px; margin-top: 1px; flex: none; }
.search-title {
display: flex; align-items: center; gap: 9px;
padding: 8px 14px 4px; font-size: .95rem; font-weight: 700; color: var(--ink);
}
.search-title svg { width: 18px; height: 18px; flex: none; color: var(--orange); }
.search-submit .btn svg { width: 18px; height: 18px; flex: none; }
.hero .search-grid { grid-template-columns: 1fr; }
@media (min-width: 560px) {
.hero .search-grid { grid-template-columns: 1fr 1fr; }
.hero .search-submit { grid-column: 1 / -1; }
}
.search-grid {
display: grid; grid-template-columns: 1fr; gap: 6px;
}
.field {
position: relative; padding: 12px 14px; border-radius: var(--r-md);
transition: background .15s ease;
}
.field:hover { background: var(--bg-soft); }
.field > label {
display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: var(--ink-4); margin-bottom: 4px;
}
.field-inner { display: flex; align-items: center; gap: 9px; position: relative; }
.field-inner .fi-icon { color: var(--orange); flex: none; }
.field-inner .fi-icon svg { width: 18px; height: 18px; }
.field input, .field select {
width: 100%; border: none; background: none; font-size: .98rem; font-weight: 600;
color: var(--ink); outline: none; padding: 2px 0;
}
.field select { cursor: pointer; }
/* Custom date field (cross-browser): the native is made fully
transparent and overlaid on the field, so NO native picker icon shows in any
browser (Chrome/Firefox/Safari). We render the value ourselves in .date-display
and open the picker via JS (showPicker) on click. */
.date-native {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; margin: 0; padding: 0; border: 0; cursor: pointer; z-index: 1;
}
.date-display { font-size: .98rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.date-display:empty::before { content: "Select date"; color: var(--ink-4); font-weight: 600; }
/* With the flatpickr range calendar in charge the native input is only a value
holder: no overlay, no native picker — the whole .field is the click target. */
.date-native.is-managed { display: none; }
.field--date { cursor: pointer; }
.field--date:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
/* flatpickr focuses its own input when a range is completed. That input is this
hidden anchor, so it must sit inside the viewport — an absolutely positioned
one further down the page made the browser scroll there on every pick. Fixed
at the top-left corner, focusing it moves nothing. */
.cx-cal-anchor {
position: fixed; top: 0; left: 0; width: 1px; height: 1px;
opacity: 0; pointer-events: none; border: 0; padding: 0;
}
/* =========================================================
DATE RANGE CALENDAR (flatpickr, Carex theme)
One calendar drives both date fields: click one, click the other, the nights
between stay banded. Only .cx-cal is themed, so flatpickr elsewhere keeps its
own look.
========================================================= */
/* flatpickr sets the calendar width inline from the day-grid size, and the box
is border-box — so side padding here would clip the last column and push the
arrows out. Vertical padding only; the day rows centre themselves and provide
the side gutters. */
.cx-cal.flatpickr-calendar {
padding: 6px 0 8px;
border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--shadow-lg); background: #fff;
font-family: var(--font);
}
.cx-cal.flatpickr-calendar.arrowTop::before, .cx-cal.flatpickr-calendar.arrowTop::after,
.cx-cal.flatpickr-calendar.arrowBottom::before, .cx-cal.flatpickr-calendar.arrowBottom::after { display: none; }
.cx-cal .flatpickr-months { padding: 6px 0 2px; align-items: center; }
.cx-cal .flatpickr-month { height: 40px; color: var(--ink); }
.cx-cal .flatpickr-current-month {
font-size: 1rem; font-weight: 700; color: var(--ink);
padding: 0; height: 40px; display: flex; align-items: center; justify-content: center;
}
.cx-cal .flatpickr-current-month .cur-month { font-weight: 700; margin: 0 4px 0 0; }
.cx-cal .flatpickr-current-month input.cur-year { font-weight: 700; padding: 0; }
.cx-cal .numInputWrapper:hover { background: transparent; }
.cx-cal .flatpickr-prev-month, .cx-cal .flatpickr-next-month {
top: 8px; padding: 0; width: 34px; height: 34px;
display: grid; place-items: center; border-radius: 50%;
color: var(--ink-3); fill: var(--ink-3);
transition: background .15s ease, color .15s ease;
}
.cx-cal .flatpickr-prev-month { left: 8px; right: auto; }
.cx-cal .flatpickr-next-month { right: 8px; left: auto; }
/* flatpickr hides an arrow when there is no month to go to (e.g. the past). */
.cx-cal .flatpickr-prev-month.flatpickr-disabled,
.cx-cal .flatpickr-next-month.flatpickr-disabled { display: none; }
.cx-cal .flatpickr-prev-month:hover, .cx-cal .flatpickr-next-month:hover {
background: var(--bg-soft); color: var(--orange);
}
.cx-cal .flatpickr-prev-month:hover svg, .cx-cal .flatpickr-next-month:hover svg { fill: var(--orange); }
.cx-cal .flatpickr-prev-month svg, .cx-cal .flatpickr-next-month svg { width: 12px; height: 12px; }
.cx-cal .flatpickr-weekdays { height: 32px; background: transparent; }
.cx-cal span.flatpickr-weekday {
background: transparent; color: var(--ink-4);
font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.cx-cal .dayContainer { padding: 0; justify-content: center; }
.cx-cal .flatpickr-days { padding: 2px 0 4px; }
.cx-cal .flatpickr-day {
max-width: 40px; height: 38px; line-height: 38px; margin: 1px 0;
border: 0; border-radius: 50%;
font-size: .9rem; font-weight: 600; color: var(--ink-2);
transition: background .12s ease, color .12s ease;
}
.cx-cal .flatpickr-day:hover { background: var(--bg-soft); color: var(--ink); }
.cx-cal .flatpickr-day.today { box-shadow: inset 0 0 0 1.5px var(--orange); color: var(--orange); }
.cx-cal .flatpickr-day.today:hover { background: var(--orange-soft); }
.cx-cal .flatpickr-day.selected,
.cx-cal .flatpickr-day.startRange,
.cx-cal .flatpickr-day.endRange,
.cx-cal .flatpickr-day.selected:hover,
.cx-cal .flatpickr-day.startRange:hover,
.cx-cal .flatpickr-day.endRange:hover {
background: var(--orange); border-color: var(--orange); color: #fff;
box-shadow: none; font-weight: 700;
}
/* The band between the two ends: a soft fill that squares off inside the range
so the nights read as one continuous stay. */
.cx-cal .flatpickr-day.inRange,
.cx-cal .flatpickr-day.inRange:hover {
background: var(--orange-soft); color: var(--orange-dark);
border-radius: 0; box-shadow: -5px 0 0 var(--orange-soft), 5px 0 0 var(--orange-soft);
}
.cx-cal .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: none; }
.cx-cal .flatpickr-day.startRange:not(.endRange) { border-radius: 50% 0 0 50%; }
.cx-cal .flatpickr-day.endRange:not(.startRange) { border-radius: 0 50% 50% 0; }
.cx-cal .flatpickr-day.startRange.endRange { border-radius: 50%; }
/* One date per calendar: the rental days are lightly shaded and the other
end of the period (the pick-up when choosing the drop-off, and the other
way round) is picked out, so the period stays in view. */
.cx-cal .flatpickr-day.cx-span:not(.selected) { background: var(--orange-soft); color: var(--orange-dark); }
.cx-cal .flatpickr-day.cx-other:not(.selected) { box-shadow: inset 0 0 0 1.5px var(--orange); font-weight: 700; }
/* In the drop-off calendar the pick-up day can't be chosen, but it is the start
of the rental, not an unavailable day — so no strike-through or fading. */
.cx-cal .flatpickr-day.cx-other.flatpickr-disabled {
text-decoration: none; opacity: 1; color: var(--orange-dark); background: var(--orange-soft);
}
.cx-cal .flatpickr-day.flatpickr-disabled,
.cx-cal .flatpickr-day.flatpickr-disabled:hover,
.cx-cal .flatpickr-day.prevMonthDay,
.cx-cal .flatpickr-day.nextMonthDay { color: var(--ink-4); opacity: .5; background: transparent; }
.cx-cal .flatpickr-day.flatpickr-disabled { cursor: not-allowed; text-decoration: line-through; }
/* Two months side by side on desktop, one on phones. */
.cx-cal.hasWeeks .flatpickr-days, .cx-cal .flatpickr-months .flatpickr-month { overflow: visible; }
.cx-cal .flatpickr-days + .flatpickr-days { border-left: 1px solid var(--line); }
@media (max-width: 480px) {
.cx-cal .flatpickr-day { height: 40px; line-height: 40px; }
}
/* Search forms: make the field LABEL prominent (dark) and the chosen VALUE lighter
— the label reads more clearly as "what you're choosing". */
.search-card .field > label { color: var(--ink); }
.search-card .field input,
.search-card .field select,
.search-card .date-display { color: var(--ink-3); font-weight: 600; }
.field-split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; }
/* the wrapper carries .field too — don't let it take the hover background; only the
inner date / time leaf field that the cursor is actually over should highlight */
.field-split:hover { background: transparent; }
.field-split .field:first-child { padding-right: 22px; }
.field-split .field + .field { border-left: 1px solid var(--line); padding-left: 18px; }
/* Compact search-bar (cars page): tighter so the Time value isn't clipped */
.search-bar .field-split { grid-template-columns: 1.35fr 1fr; }
.search-bar .field-split .field:first-child { padding-right: 10px; }
.search-bar .field-split .field + .field { padding-left: 10px; }
.search-bar .field-split .field { padding-top: 12px; padding-bottom: 12px; }
.search-divider { height: 1px; background: var(--line); margin: 2px 6px; }
.search-submit { padding: 6px; }
.search-submit .btn { height: 56px; }
/* =========================================================
TRUST STRIP
========================================================= */
.trust { border-bottom: 1px solid var(--line); }
/* Fleet sits right under the trust strip — tighten the top gap */
#fleet { padding-top: clamp(34px, 4vw, 52px); }
.trust-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
padding-block: 30px;
}
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-item .ti-icon {
width: 46px; height: 46px; border-radius: var(--r-md); flex: none;
background: var(--orange-soft); color: var(--orange); display: grid; place-items: center;
}
.trust-item .ti-icon svg { width: 22px; height: 22px; }
.trust-item h4 { font-size: .98rem; font-weight: 700; }
.trust-item p { font-size: .82rem; color: var(--ink-3); }
/* =========================================================
CAR CARD
========================================================= */
.cars-grid {
display: grid; grid-template-columns: 1fr; gap: 22px;
}
.car-card {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
overflow: hidden; display: flex; flex-direction: column;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.car-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
/* The photo runs the full width of the card's text (same 16px sides as
.car-body) in 4:3 — the shape of the phone photos the fleet uses — so it
fills edge to edge and every card keeps the same height. Photos of another
ratio (e.g. 3:2) are filled with "cover" — a sliver off the sides — so
every card shows the same rounded corners. */
.car-media {
display: block; position: relative; overflow: hidden;
background: #fff; padding: 16px 16px 0;
}
/* The photos sit side by side in a snap-scroller (swipe on phones; on
desktop main.js scrolls it to follow the pointer). */
.car-slides {
display: flex; aspect-ratio: 4/3; border-radius: 12px; overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
scrollbar-width: none; background: var(--bg-soft);
}
.car-slides::-webkit-scrollbar { display: none; }
/* Touch screens: no sliding strip — a swipe crossfades the photo instead
(main.js initCardGalleries), the same effect as on desktop. Vertical page
scrolling over the photo keeps working. */
@media (hover: none), (pointer: coarse) {
.car-media.has-gallery .car-slides { overflow-x: hidden; scroll-snap-type: none; touch-action: pan-y; }
}
.car-slides img {
flex: 0 0 100%; width: 100%; height: 100%; display: block;
object-fit: cover; scroll-snap-align: start; user-select: none;
transition: transform .4s ease;
}
/* Desktop photo change: a copy of the next photo fades in over the slides
(main.js crossfade), laid exactly on the photo area. */
.car-fade {
position: absolute; top: 16px; left: 16px; right: 16px; width: calc(100% - 32px);
aspect-ratio: 4/3; object-fit: cover; border-radius: 12px;
opacity: 0; pointer-events: none; z-index: 1;
}
.car-media .car-type-badge, .car-media .car-disc-badge { z-index: 2; }
/* A single photo keeps the gentle zoom; a gallery shows its photos instead. */
.car-card:hover .car-media:not(.has-gallery) .car-slides img { transform: scale(1.04); }
/* Which photo is showing: segments under the photo, across its full width,
always visible — they tell at a glance that a car has several photos.
A single-photo card keeps the same space, so all cards line up. */
.car-dots {
display: flex; gap: 4px; height: 4px; margin-top: 8px; pointer-events: none;
}
.car-dots i {
flex: 1 1 0; height: 4px; border-radius: 4px;
background: var(--line); transition: background .2s ease;
}
.car-dots i.is-on { background: var(--ink-3); }
.car-media:not(.has-gallery)::after { content: ""; display: block; height: 12px; }
/* Dark glass, so it reads on a bright photo (sky, a white car) as well as on
a white cut-out. */
.car-type-badge {
position: absolute; top: 26px; left: 26px;
background: rgba(18,21,26,.72); backdrop-filter: blur(6px);
box-shadow: 0 2px 8px rgba(0,0,0,.18);
color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
padding: 6px 11px; border-radius: var(--r-pill);
}
.car-body { padding: 14px 16px; display: flex; flex-direction: column; flex: 1; }
.car-title { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }
/* Fuel policy, mileage, cancellation, minimum age — 2 × 2 icon chips. */
.car-facts { margin: 12px 0 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.car-fact {
display: flex; align-items: center; gap: 7px; min-width: 0;
padding: 7px 10px; border-radius: 10px; background: var(--bg-soft);
font-size: .78rem; font-weight: 600; color: var(--ink-2); line-height: 1.2;
}
.car-fact .cf-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-fact i { flex: none; width: 14px; text-align: center; font-size: .8rem; color: #949698; }
/* Phones: a little tighter, so the longest label ("Безлимитный пробег") fits. */
@media (max-width: 480px) {
.car-facts { gap: 5px; }
.car-fact { gap: 5px; padding: 7px 7px; font-size: .74rem; }
.car-fact i { width: 12px; font-size: .74rem; }
}
/* The "+" in "21+" sits low in this font — lift it to the middle of the digits. */
.cf-plus { display: inline-block; transform: translateY(-.1em); margin-left: 1px; }
.car-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.car-price .from { display: block; font-size: .68rem; color: var(--ink-4); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1px; }
.car-price .amt { display: inline-flex; align-items: baseline; gap: 3px; font-weight: 700; letter-spacing: -.02em; }
.car-price .amt [data-usd] { font-size: 1.65rem; color: var(--ink); line-height: 1; }
.car-price .amt span:not([data-usd]) { font-size: .8rem; font-weight: 600; color: var(--ink-3); }
/* Searched period: the day rate, and under it what the whole booking costs. */
.car-price--quote { display: grid; gap: 5px; min-width: 0; }
/* Discounted: the old day rate struck out above the new one. */
.car-was { display: flex; align-items: center; gap: 8px; line-height: 1; }
.car-was s { font-size: .9rem; font-weight: 600; color: var(--ink-4); text-decoration-thickness: 1.5px; }
.car-total { font-size: .82rem; font-weight: 600; color: var(--ink-3); line-height: 1.3; }
.car-total b { color: var(--ink); font-weight: 700; font-size: .95rem; }
.car-fees { margin: 8px 0 0; font-size: .72rem; font-weight: 500; color: var(--ink-4); line-height: 1.4; }
.cars-cta { margin-top: 40px; text-align: center; }
/* =========================================================
STEPS (how it works)
========================================================= */
.steps-grid { display: grid; grid-template-columns: 1fr; gap: 22px; counter-reset: step; }
.step {
position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 30px 26px; transition: box-shadow .2s, transform .2s;
}
.step:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.step-num {
counter-increment: step; width: 52px; height: 52px; border-radius: var(--r-md);
background: var(--orange-soft); color: var(--orange); display: grid; place-items: center;
font-size: 1.35rem; font-weight: 700; margin-bottom: 18px;
}
.step-num::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.step p { color: var(--ink-3); font-size: .95rem; }
.step-connector { display: none; }
/* =========================================================
FEATURE SPLIT (why choose)
========================================================= */
.split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.split-media img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); aspect-ratio: 5/4; object-fit: cover; }
.feature-list { display: grid; gap: 22px; margin-top: 28px; }
.feature { display: flex; gap: 16px; }
.feature .f-icon {
width: 48px; height: 48px; border-radius: var(--r-md); flex: none;
background: var(--orange-soft); color: var(--orange); display: grid; place-items: center;
}
.feature .f-icon svg { width: 22px; height: 22px; }
.feature h4 { font-size: 1.05rem; font-weight: 700; }
.feature p { color: var(--ink-3); font-size: .92rem; margin-top: 3px; }
/* =========================================================
EXTRAS / ADD-ONS
========================================================= */
.extras-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.extra-chip {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
padding: 18px; display: flex; align-items: center; gap: 14px; transition: border-color .2s, box-shadow .2s;
}
.extra-chip:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.extra-chip .e-icon { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--bg-soft); color: var(--orange); display: grid; place-items: center; flex: none; }
.extra-chip .e-icon svg { width: 20px; height: 20px; }
.extra-chip h4 { font-size: .95rem; font-weight: 700; }
.extra-chip .price { font-size: .82rem; color: var(--ink-3); font-weight: 600; }
.extra-chip .price b { color: var(--orange); }
/* =========================================================
CAR ACCESSORIES (catalog page)
========================================================= */
.accessories { padding-block: clamp(34px, 5vw, 64px); }
.acc-intro { max-width: 760px; margin-bottom: 34px; }
.acc-intro p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.75; }
.acc-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.acc-card {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
overflow: hidden; display: flex; flex-direction: column;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.acc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.acc-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-soft); }
.acc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.acc-card:hover .acc-media img { transform: scale(1.05); }
.acc-cap {
position: absolute; top: 12px; right: 12px;
background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
color: var(--ink-2); font-size: .72rem; font-weight: 700; letter-spacing: .02em;
padding: 6px 11px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}
.acc-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.acc-name { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }
.acc-desc { font-size: .9rem; color: var(--ink-3); margin-top: 7px; line-height: 1.55; }
.acc-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acc-price .from { display: block; font-size: .7rem; color: var(--ink-4); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.acc-price .amt { font-size: 1.5rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.acc-price .amt span { font-size: .8rem; font-weight: 600; color: var(--ink-3); }
.acc-tag { font-size: .72rem; font-weight: 700; color: var(--orange); background: var(--orange-soft); padding: 5px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.acc-note {
display: flex; gap: 15px; align-items: flex-start;
background: var(--orange-soft); border: 1px solid #f6d8c9; border-radius: var(--r-lg);
padding: 20px 22px; margin-top: 40px;
}
.acc-note .ic { width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--orange); display: grid; place-items: center; flex: none; }
.acc-note .ic i { font-size: 18px; }
.acc-note h4 { font-size: 1.02rem; font-weight: 700; }
.acc-note p { font-size: .92rem; color: var(--ink-2); margin-top: 4px; line-height: 1.6; }
/* =========================================================
ABOUT GEORGIA
========================================================= */
.geo { padding-block: clamp(34px, 5vw, 64px); }
.geo-top { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.geo-photo img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); aspect-ratio: 500 / 266; object-fit: contain; background: var(--bg-soft); }
.geo-photo figcaption { margin-top: 12px; font-size: .82rem; color: var(--ink-4); text-align: center; font-weight: 600; }
.geo-facts { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px 22px 14px; box-shadow: var(--shadow-sm); }
.geo-facts h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; padding: 18px 0 6px; }
.geo-fact { display: grid; grid-template-columns: 140px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.geo-fact:last-child { border-bottom: none; }
.geo-fact .k { color: var(--ink-3); font-weight: 700; display: flex; align-items: flex-start; gap: 9px; }
.geo-fact .k i { color: var(--orange); width: 16px; text-align: center; margin-top: 3px; flex: none; }
.geo-fact .v { color: var(--ink-2); font-weight: 600; }
.geo-lead { padding-block: clamp(28px, 4vw, 44px); }
.geo-lead-inner { max-width: 880px; }
.geo-lead p { color: var(--ink-2); line-height: 1.85; margin-bottom: 18px; font-size: 1.04rem; }
.geo-lead p:last-child { margin-bottom: 0; }
.geo-lead p strong { color: var(--ink); font-weight: 700; }
.geo-why-head { max-width: 680px; margin: 0 auto 38px; text-align: center; }
.geo-why-head h2 { font-size: clamp(1.55rem, 3.2vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; margin-top: 12px; }
.geo-why-head p { color: var(--ink-3); margin-top: 12px; font-size: 1.04rem; }
.geo-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.geo-block { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 26px; transition: box-shadow .2s, transform .2s, border-color .2s; }
.geo-block:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: transparent; }
.geo-block .ic { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; margin-bottom: 16px; }
.geo-block .ic i { font-size: 20px; }
.geo-block h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 10px; }
.geo-block p { color: var(--ink-3); line-height: 1.72; font-size: .95rem; margin-bottom: 12px; }
.geo-block p:last-child { margin-bottom: 0; }
.geo-block ul { margin: 2px 0 0; display: grid; gap: 8px; }
.geo-block li { position: relative; padding-left: 18px; color: var(--ink-3); font-size: .95rem; line-height: 1.6; }
.geo-block li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
/* =========================================================
LOCATIONS
========================================================= */
.loc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.loc-item {
display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line);
border-radius: var(--r-md); padding: 16px 18px;
}
.loc-item .l-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; flex: none; }
.loc-item .l-icon svg { width: 20px; height: 20px; }
.loc-item h4 { font-size: .98rem; font-weight: 700; }
.loc-item .fee { margin-left: auto; font-weight: 700; color: var(--ink); white-space: nowrap; }
.loc-item .fee.free { color: var(--green); }
/* =========================================================
CTA BAND
========================================================= */
.cta-band { background: var(--dark); color: #fff; border-radius: var(--r-xl); padding: clamp(34px, 5vw, 60px); position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; right: -8%; top: -40%; width: 50%; height: 180%; background: radial-gradient(closest-side, rgba(232,96,44,.32), transparent 70%); pointer-events: none; }
.cta-band-inner { position: relative; z-index: 1; display: grid; gap: 24px; align-items: center; }
.cta-band h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.cta-band p { color: rgba(255,255,255,.72); margin-top: 12px; font-size: 1.05rem; }
/* On the dark band the orange glow under the button reads as a blurry edge — flat here. */
.cta-band .btn--primary { box-shadow: none; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-phones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; }
.cta-phone { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.2rem; color: #fff; }
.cta-phone:hover { color: var(--orange); }
.cta-phone .icn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; }
.cta-phone .icn svg { width: 20px; height: 20px; }
/* =========================================================
FOOTER
========================================================= */
.site-footer { background: var(--dark); color: rgba(255,255,255,.7); padding-block: 60px 28px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
.footer-brand .logo b { color: #fff; }
.footer-brand p { margin-top: 16px; font-size: .92rem; max-width: 300px; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #fff; transition: background .2s; }
.footer-social a:hover { background: var(--orange); }
.footer-social i { font-size: 18px; }
.footer-col h5 { color: #fff; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { font-size: .93rem; transition: color .15s; }
.footer-col a:hover { color: var(--orange); }
.footer-contact li { display: flex; gap: 11px; font-size: .93rem; margin-bottom: 13px; }
.footer-contact svg { width: 18px; height: 18px; color: var(--orange); flex: none; margin-top: 2px; }
.footer-contact .fc-phone { align-items: flex-start; }
.fc-nums { display: flex; flex-direction: column; gap: 4px; }
.fc-nums a { font-weight: 700; }
.fc-apps { display: block; margin: 0 0 5px; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.42); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 44px; padding-top: 22px; display: flex; flex-direction: column; gap: 12px; font-size: .85rem; }
.footer-bottom a:hover { color: var(--orange); }
/* =========================================================
PAGE HEADER (listing)
========================================================= */
.page-hero { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding-block: 34px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-4); font-weight: 600; }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb svg { width: 14px; height: 14px; }
.page-hero h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; margin-top: 10px; }
.page-hero p { color: var(--ink-3); margin-top: 8px; }
/* =========================================================
LEGAL / TERMS PAGE
========================================================= */
.legal { padding-block: clamp(34px, 5vw, 64px); }
.legal-wrap { max-width: none; margin: 0 auto; }
.legal-intro { padding-bottom: 22px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.legal-intro h2 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); font-weight: 700; letter-spacing: -.01em; margin-bottom: 12px; }
.legal-block { padding-top: 26px; }
.legal-block h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 12px; }
.legal p { color: var(--ink-2); line-height: 1.75; margin-bottom: 14px; }
/* Text links only — a button inside (e.g. the blog .post-cta) keeps its own colours. */
.legal a:not(.btn) { color: var(--orange); font-weight: 600; }
.legal a:not(.btn):hover { text-decoration: underline; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 4px; list-style: none; }
.legal li { position: relative; color: var(--ink-2); line-height: 1.7; margin-bottom: 9px; padding-left: 28px; }
.legal ul li::before {
content: ""; position: absolute; left: 6px; top: .62em;
width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
}
.legal ol { counter-reset: legal; }
.legal ol li { counter-increment: legal; }
.legal ol li::before {
content: counter(legal); position: absolute; left: 0; top: .12em;
width: 20px; height: 20px; border-radius: 50%;
background: var(--orange-soft); color: var(--orange);
font-size: .74rem; font-weight: 700; display: grid; place-items: center;
}
/* contact callout at the end */
.legal-contact {
display: flex; gap: 16px; align-items: flex-start;
margin-top: 38px; padding: 22px 24px;
background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.legal-contact .lc-icon { width: 44px; height: 44px; flex: none; border-radius: var(--r-md); background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; }
.legal-contact .lc-icon svg { width: 22px; height: 22px; }
.legal-contact h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.legal-contact p { margin: 0; }
/* About: "why choose" checkmark list */
.why-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 11px; }
.why-list li { display: flex; gap: 12px; align-items: flex-start; padding: 0; color: var(--ink-2); line-height: 1.6; font-weight: 600; }
.legal .why-list li::before { content: none; }
@media (min-width: 640px) { .why-list { grid-template-columns: 1fr 1fr; gap: 11px 26px; } }
.why-list i { font-size: 20px; color: var(--green); margin-top: 1px; flex: none; }
.why-list .ck { width: 20px; height: 20px; color: var(--green); margin-top: 1px; }
.legal-contact .lc-icon i { font-size: 18px; }
/* =========================================================
FAQ — grouped accordion (used on faq.html)
========================================================= */
.faq-wrap { max-width: none; }
.faq-group { padding-top: 34px; }
.faq-group:first-child { padding-top: 6px; }
.faq-group > h2 {
display: flex; align-items: center; gap: 11px;
font-size: clamp(1.15rem, 2.2vw, 1.42rem); font-weight: 700;
letter-spacing: -.01em; margin-bottom: 14px;
}
.faq-group > h2 .fg-ic {
width: 36px; height: 36px; flex: none; border-radius: 11px;
background: var(--orange-soft); color: var(--orange);
display: grid; place-items: center; font-size: 15px;
}
.faq-list { display: grid; gap: 10px; }
.faq-item {
border: 1px solid var(--line); border-radius: var(--r-md);
background: var(--bg); overflow: hidden;
transition: border-color .2s, box-shadow .2s;
}
.faq-item.is-open { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.faq-q {
width: 100%; display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 16px 18px; background: none; border: 0; cursor: pointer;
text-align: left; font: inherit; font-weight: 700; color: var(--ink); line-height: 1.5;
transition: color .15s;
}
.faq-q:hover { color: var(--orange); }
.faq-chev { font-size: 13px; color: var(--ink-4); flex: none; transition: transform .25s ease, color .2s; }
.faq-item.is-open .faq-q { color: var(--orange); }
.faq-item.is-open .faq-chev { transform: rotate(180deg); color: var(--orange); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faq-a-inner { padding: 0 18px 16px; }
.faq-a p { color: var(--ink-2); line-height: 1.75; margin: 0 0 10px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong { color: var(--ink); font-weight: 700; }
/* =========================================================
BLOG — listing cards + article page
========================================================= */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 720px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
overflow: hidden; display: flex; flex-direction: column;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.post-media { display: block; position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-soft); }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .post-media img { transform: scale(1.05); }
.post-cat {
position: absolute; top: 12px; left: 12px;
background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
color: var(--orange); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
padding: 6px 11px; border-radius: var(--r-pill);
}
.post-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.post-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--ink-4); font-size: .82rem; font-weight: 600; }
.post-meta i { margin-right: 5px; }
.post-title { font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; margin-top: 12px; }
.post-title a { color: var(--ink); transition: color .15s; }
.post-title a:hover { color: var(--orange); }
/* Trimmed to a fixed length in PHP; the clamp is the backstop, so one long
unbroken word cannot still push a card taller than its neighbours. */
.post-excerpt {
color: var(--ink-3); line-height: 1.65; font-size: .94rem; margin-top: 10px;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
overflow: hidden;
}
.post-more {
margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px;
color: var(--orange); font-weight: 700; font-size: .92rem;
}
.post-more i { transition: transform .15s ease; }
.post-card:hover .post-more i { transform: translateX(4px); }
/* Article page */
.post-cat--hero {
position: static; display: inline-block; margin-top: 12px;
background: var(--orange-soft); backdrop-filter: none;
}
.page-hero .post-cat--hero + h1 { margin-top: 12px; }
.page-hero .post-meta { margin-top: 14px; }
.post-article { max-width: 820px; margin: 0 auto; }
.post-figure { margin: 0 0 30px; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-soft); }
.post-figure img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; }
.post-content > * + * { margin-top: 16px; }
.post-content h2 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); font-weight: 700; letter-spacing: -.01em; margin-top: 36px; }
.post-content h3 { font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em; margin-top: 26px; }
.post-content p { color: var(--ink-2); line-height: 1.8; }
/* Article links only — buttons inside the article (e.g. the .post-cta) keep their own colours. */
.post-content a:not(.btn) { color: var(--orange); font-weight: 600; }
.post-content a:not(.btn):hover { text-decoration: underline; }
.post-content strong { color: var(--ink); font-weight: 700; }
/* Photos inside an article body (imported posts carry several). */
.post-content img {
width: 100%; height: auto; margin-block: 26px;
border-radius: var(--r-lg); background: var(--bg-soft);
}
.post-content h2 + img, .post-content h3 + img { margin-top: 18px; }
.post-content ul { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 10px; }
.post-content ul li { position: relative; padding-left: 28px; color: var(--ink-2); line-height: 1.7; }
.post-content ul li::before {
content: ""; position: absolute; left: 4px; top: .55em; width: 7px; height: 7px;
border-radius: 50%; background: var(--orange);
}
.post-cta {
margin-top: 40px; padding: 26px 28px; border-radius: var(--r-lg);
background: var(--bg-soft); border: 1px solid var(--line);
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
}
.post-cta h3 { font-size: 1.18rem; font-weight: 700; margin-bottom: 4px; }
.post-cta p { color: var(--ink-3); margin: 0; max-width: 460px; }
.post-cta .btn { flex: none; }
.post-back {
display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
color: var(--ink-3); font-weight: 700; font-size: .92rem;
}
.post-back:hover { color: var(--orange); }
/* Route guides: the "at a glance" strip and tip / warning boxes in the post body. */
.post-content .route-facts {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
margin-block: 26px;
}
.route-facts > div {
background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 14px 16px;
}
.post-content .route-facts span { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.post-content .route-facts b { display: block; margin-top: 4px; font-size: 1.02rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.post-content .post-note {
margin-block: 26px; padding: 18px 20px; border-radius: var(--r-md);
background: var(--orange-soft); border-left: 4px solid var(--orange);
}
.post-content .post-note--info { background: var(--green-soft); border-left-color: var(--green); }
.post-content .post-note > * + * { margin-top: 8px; }
.post-content .post-note p, .post-content .post-note li { color: var(--ink); }
/* Blog: "Cars for this trip" — [cars ids="…"] in a post body (App\Support\BlogCars). */
.post-content .trip-cars {
margin-block: 34px; padding: 22px; border-radius: var(--r-lg);
border: 1px solid var(--line);
background: linear-gradient(180deg, var(--orange-soft) 0, #fff 130px);
}
.trip-cars__head { margin-bottom: 18px; }
.post-content .trip-cars__head h3 { margin: 0; font-size: 1.15rem; }
.post-content .trip-cars__head p { margin: 2px 0 0; font-size: .9rem; line-height: 1.5; color: var(--ink-3); }
.trip-cars__list { display: grid; gap: 12px; }
.post-content a.trip-car {
display: grid; grid-template-columns: 172px 1fr auto; gap: 18px; align-items: center;
padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
color: var(--ink); font-weight: inherit; text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.post-content a.trip-car:hover { text-decoration: none; border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.trip-car__img { display: block; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: var(--bg-soft); }
.post-content .trip-car__img img { width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; display: block; transition: transform .4s ease; }
.post-content a.trip-car:hover .trip-car__img img { transform: scale(1.05); }
.trip-car__body { display: block; min-width: 0; }
.trip-car__type { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
.trip-car__name { display: block; margin-top: 2px; font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }
.trip-car__specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.trip-car__specs span {
display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill);
background: var(--bg-soft); font-size: .78rem; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.trip-car__specs i { font-size: .85em; color: var(--ink-3); }
.trip-car__price { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; white-space: nowrap; padding-right: 4px; }
.trip-car__from { color: var(--ink-3); font-size: .85rem; }
.trip-car__from b { font-size: 1.4rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.post-content .trip-car .btn { pointer-events: none; }
.post-content a.trip-cars__all {
display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
font-size: .92rem; font-weight: 700;
}
@media (max-width: 640px) {
.post-content .trip-cars { padding: 16px; }
.post-content a.trip-car { grid-template-columns: 1fr; gap: 12px; }
.trip-car__img { aspect-ratio: 16/10; }
.trip-car__body { padding-inline: 2px; }
.trip-car__price {
flex-direction: row; align-items: center; justify-content: space-between;
padding: 10px 2px 0; border-top: 1px solid var(--line);
}
}
/* =========================================================
CONTACT — info panel, message form, map
========================================================= */
/* Primary row: contact details + prominent map */
.contact-top { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: stretch; }
@media (min-width: 880px) { .contact-top { grid-template-columns: 0.85fr 1.5fr; gap: 40px; } }
.contact-map-card {
position: relative; border-radius: var(--r-lg); overflow: hidden;
border: 1px solid var(--line); box-shadow: var(--shadow-md);
min-height: 380px; background: var(--bg-soft);
}
.contact-map-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(1.05); }
@media (max-width: 879px) { .contact-map-card { min-height: 360px; } }
.map-directions {
position: absolute; left: 16px; bottom: 16px; z-index: 2;
display: inline-flex; align-items: center; gap: 8px;
background: #fff; color: var(--ink); font-weight: 700; font-size: .9rem;
padding: 11px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-md);
transition: color .15s, transform .15s;
}
.map-directions i { color: var(--orange); }
.map-directions:hover { color: var(--orange); transform: translateY(-2px); }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; }
.contact-list .ci-icon {
width: 46px; height: 46px; flex: none; border-radius: var(--r-md);
background: var(--orange-soft); color: var(--orange);
display: grid; place-items: center; font-size: 18px;
}
.contact-list h3 { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); margin-bottom: 4px; }
.contact-list .ci-body p { color: var(--ink-2); line-height: 1.7; margin: 0; }
.contact-list a { color: var(--ink-2); font-weight: 600; }
.contact-list a:hover { color: var(--orange); }
.contact-list strong { color: var(--orange); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.contact-actions .btn i { margin-right: 8px; }
/* Secondary feedback form */
.contact-feedback { padding-block: clamp(40px, 6vw, 72px); }
.feedback-wrap { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 860px) { .feedback-wrap { grid-template-columns: 0.85fr 1.15fr; gap: 48px; } }
.feedback-intro h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 700; letter-spacing: -.02em; margin-top: 12px; }
.feedback-intro p { color: var(--ink-3); line-height: 1.7; margin-top: 12px; max-width: 420px; }
.contact-form {
display: grid; gap: 16px;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
padding: clamp(20px, 3vw, 28px); box-shadow: var(--shadow-sm);
}
.cf-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .cf-row { grid-template-columns: 1fr 1fr; } }
.cf-field { display: grid; gap: 7px; }
.cf-field > span { font-size: .82rem; font-weight: 700; color: var(--ink-2); }
.cf-field input, .cf-field textarea {
width: 100%; border: 1.5px solid var(--line-2); border-radius: var(--r-md);
padding: 12px 14px; background: var(--bg); color: var(--ink); outline: none;
transition: border-color .15s, box-shadow .15s;
}
.cf-field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: var(--ink-4); }
.cf-field input:focus, .cf-field textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.cf-field textarea { min-height: 110px; }
/* =========================================================
ICONS — Font Awesome (free: solid + brands).
Icon boxes keep their own dimensions; we size the glyph
to match the inline SVG it replaced. Colour inherits via the
container's `color`, exactly like the old SVGs (currentColor).
New markup convention going forward:
========================================================= */
.trust-item .ti-icon i { font-size: 20px; }
.feature .f-icon i { font-size: 20px; }
.badge i { font-size: 12px; }
.car-fav i { font-size: 17px; }
/* Checkmark — rendered as inline SVG (.ck), NOT a font glyph.
Font Awesome's check codepoints (fa-check U+F00C and fa-circle-check U+F058)
get hijacked by the Windows colour-emoji font, which ignores CSS `color`
and paints an orange mark. An inline SVG has no font dependency, so it is
reliable on every OS. The disc takes the container's colour (currentColor),
the tick is knocked out in white. Sized via font-size (svg is 1em). */
.ck { width: 1em; height: 1em; flex: none; vertical-align: -0.14em; }
.hero-points .tick { background: none; }
.hero-points .tick .ck { width: 19px; height: 19px; color: var(--green); }
.incl-item .ic:not([style]) { background: none; }
.incl-item .ic:not([style]) .ck { width: 24px; height: 24px; color: var(--green); }
.feature .f-icon .ck { width: 22px; height: 22px; }
.badge .ck { width: 14px; height: 14px; }
.car-tag .ck { width: 13px; height: 13px; }
.book-foot .reassure .ck { width: 15px; height: 15px; color: var(--green); }
/* search bar compact (listing) */
.search-bar { margin-top: 22px; }
.search-bar .search-grid { grid-template-columns: 1fr; }
/* =========================================================
LISTING LAYOUT
========================================================= */
.listing { padding-block: 40px 80px; }
.listing-layout { display: grid; grid-template-columns: 1fr; gap: 28px; }
/* Filters */
.filters-toggle {
display: flex; align-items: center; justify-content: center; gap: 9px;
width: 100%; padding: 14px; border-radius: var(--r-md); border: 1.5px solid var(--line-2);
background: #fff; font-weight: 700; margin-bottom: 18px;
}
.filters-toggle svg { width: 18px; height: 18px; }
.filters {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px;
align-self: start;
}
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.filters-head h3 { font-size: 1.1rem; font-weight: 700; }
.filters-head #clearFilters { font-size: .82rem; font-weight: 700; color: var(--orange); }
#closeFilters { display: none; }
.filter-group { padding-block: 20px; border-bottom: 1px solid var(--line); }
.filter-group:last-child { border-bottom: none; padding-bottom: 0; }
.filter-group > h4 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); margin-bottom: 14px; }
.check { display: flex; align-items: center; gap: 11px; padding: 7px 0; cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--ink-2); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; transition: all .15s; }
.check .box svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.6); transition: all .15s; }
.check input:checked + .box { background: var(--orange); border-color: var(--orange); }
.check input:checked + .box svg { opacity: 1; transform: scale(1); }
.check .count { margin-left: auto; font-size: .8rem; color: var(--ink-4); font-weight: 600; }
.check:hover .box { border-color: var(--orange); }
/* price range */
.range-vals { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 700; margin-bottom: 12px; }
.range-vals span { color: var(--orange); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: var(--line-2); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--orange); cursor: pointer; box-shadow: var(--shadow-sm); border: 3px solid #fff; }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--orange); cursor: pointer; border: 3px solid #fff; }
/* Results */
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.results-bar .count { font-weight: 700; }
.results-bar .count span { color: var(--ink-4); font-weight: 600; }
.sort-select { display: flex; align-items: center; gap: 8px; }
.sort-select label { font-size: .85rem; color: var(--ink-3); font-weight: 600; }
.sort-select select {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
padding: 10px 38px 10px 16px;
border: 1.5px solid var(--line); border-radius: var(--r-pill);
font-weight: 700; font-size: .88rem; color: var(--ink); cursor: pointer;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369727c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
background-size: 14px;
}
/* listing card variant: horizontal-capable */
.results-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
/* car card sub-row: spec line + No-Deposit badge */
/* Card title with the No Deposit badge beside it. */
.car-headrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.car-headrow .car-title { min-width: 0; }
.car-nodep {
flex: none; font-size: .72rem; font-weight: 700; color: var(--green); background: var(--green-soft);
padding: 4px 10px; border-radius: var(--r-pill);
display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.car-nodep .ck { width: 13px; height: 13px; }
/* pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 44px; }
.pagination a, .pagination span { min-width: 42px; height: 42px; padding: 0 10px; border-radius: var(--r-md); display: grid; place-items: center; font-weight: 700; font-size: .9rem; border: 1px solid var(--line); background: #fff; color: var(--ink-2); }
.pagination a:hover { border-color: var(--ink); }
.pagination .is-active { background: var(--orange); border-color: var(--orange); color: #fff; }
.pagination .nav-arrow svg { width: 18px; height: 18px; }
.pagination .disabled { opacity: .4; pointer-events: none; }
/* =========================================================
CAR DETAIL
========================================================= */
.detail { padding-block: 30px 80px; }
.detail-top { margin-bottom: 22px; }
.detail-title-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 12px; }
.detail-title-row h1 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; }
.detail-title-row .sub { color: var(--ink-3); font-weight: 600; margin-top: 4px; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: var(--r-pill); }
.badge svg { width: 14px; height: 14px; }
.badge--orange { background: var(--orange-soft); color: var(--orange); }
.badge--green { background: var(--green-soft); color: var(--green); }
.badge--soft { background: var(--bg-soft); color: var(--ink-2); }
.detail-layout { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
/* Gallery — 3-photo mosaic (1 big + 2 stacked) */
/* Every tile is 4:3 — the shape of a phone photo — so the whole car (roof to
wheels) shows without cropping. The two small tiles are 4:3; with the 2:1
columns the big one, spanning both rows, comes out at about 4:3 too. */
.gallery {
display: grid; gap: 10px; width: 100%;
grid-template-columns: 2fr 1fr; grid-template-rows: auto auto;
}
.g-tile {
position: relative; overflow: hidden; border-radius: var(--r-lg);
background: var(--bg-soft); cursor: zoom-in; display: block;
}
.g-tile--main { grid-row: 1 / 3; }
.g-tile:not(.g-tile--main) { aspect-ratio: 4/3; }
/* Out of the flow, so the photo never sets the tile size — the 16:10 tiles do. */
.g-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; display: block; }
.g-tile:hover img { transform: scale(1.05); }
.g-tile .g-expand {
position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px;
border-radius: 50%; background: rgba(36,37,37,.6); color: #fff;
display: grid; place-items: center; opacity: 0; transition: opacity .15s; backdrop-filter: blur(2px);
}
.g-tile .g-expand svg { width: 18px; height: 18px; }
.g-tile:hover .g-expand { opacity: 1; }
/* "No Deposit" pinned to the main photo's top-right corner. */
@media (max-width: 700px) {
.gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; aspect-ratio: auto; }
.g-tile--main { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 4/3; }
.g-tile:not(.g-tile--main) { aspect-ratio: 4/3; }
}
/* Lightbox */
.lightbox {
position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
background: rgba(12,15,20,.9); padding: 4vh 4vw;
}
.lightbox[hidden] { display: none; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.lb-close, .lb-nav {
position: absolute; width: 48px; height: 48px; border-radius: 50%;
background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center;
transition: background .15s;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.28); }
.lb-close { top: 20px; right: 20px; }
.lb-close svg { width: 22px; height: 22px; }
.lb-nav svg { width: 24px; height: 24px; }
.lb-nav.prev { left: 20px; }
.lb-nav.next { right: 20px; }
.lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-size: .85rem; font-weight: 600; background: rgba(255,255,255,.14); padding: 5px 13px; border-radius: var(--r-pill); }
/* Compact car spec strip */
.car-specifications.cspecs { margin: 16px 0 8px; }
.cspecs-title {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cspecs-list {
display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none;
background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.cspec {
flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0;
padding: 10px 14px;
box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line);
}
.cspec-icon {
flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px;
background: var(--orange-soft); color: #e8602c;
display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.cspec-icon .transmission-icon,
.cspec-icon .chassis-icon {
width: 16px;
height: 16px;
background: currentColor;
}
.cspec-icon .transmission-icon {
-webkit-mask: url("/design/assets/images/transmission.svg") center / contain no-repeat;
mask: url("/design/assets/images/transmission.svg") center / contain no-repeat;
}
.cspec-icon .chassis-icon {
-webkit-mask: url("/design/assets/images/chassis.svg") center / contain no-repeat;
mask: url("/design/assets/images/chassis.svg") center / contain no-repeat;
}
.cspec-text { display: flex; flex-direction: column; min-width: 0; }
.cspec-value {
font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cspec-label { font-size: 11px; color: var(--ink-3); line-height: 1.3; }
@media (max-width: 767px) {
/* Phones: one row of icons; tapping an icon opens a bubble with its value.
overflow stays visible so the bubble can rise above the strip. */
.cspecs-list { flex-wrap: nowrap; overflow: visible; }
.cspec {
flex: 1 1 0; justify-content: center; padding: 8px 0;
position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent;
box-shadow: -1px 0 0 var(--line);
}
.cspec:first-child { box-shadow: none; }
.cspec:focus { outline: none; }
.cspec:focus-visible .cspec-icon { box-shadow: 0 0 0 2px #e8602c; }
.cspec-icon { flex-basis: auto; transition: background .15s, color .15s; }
.cspec.is-open .cspec-icon { background: #e8602c; color: #fff; }
/* Kept in the accessibility tree (opacity, not display/visibility), so
screen readers still hear every spec without tapping. */
.cspec-text {
position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 6;
transform: translate(-50%, 4px);
padding: 7px 11px; border-radius: 9px; background: var(--dark);
box-shadow: 0 6px 18px rgba(0,0,0,.18);
white-space: nowrap; opacity: 0; pointer-events: none;
transition: opacity .15s, transform .15s;
}
/* Edge bubbles anchor to the strip edge so they never run off-screen. */
.cspec:first-child .cspec-text { left: 0; transform: translate(0, 4px); }
.cspec:last-child .cspec-text { left: auto; right: 0; transform: translate(0, 4px); }
.cspec.is-open .cspec-text { opacity: 1; transform: translate(-50%, 0); }
.cspec.is-open:first-child .cspec-text,
.cspec.is-open:last-child .cspec-text { transform: translate(0, 0); }
.cspec-value { color: #fff; font-size: 13px; }
.cspec-label { color: rgba(255,255,255,.7); }
}
/* Booking consent checkbox (personal-details) */
/* Optional paid add-on on the "Your details" step (notarised licence
translation). Same family as .book-terms, but it reads as a product:
icon, copy, price, and a checkbox that turns the whole card orange. */
.svc-option {
position: relative;
display: flex; align-items: center; gap: 14px;
margin-top: 20px; padding: 16px 18px;
background: #fff; border: 1.5px dashed var(--line-2); border-radius: var(--r-md);
cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.svc-option:hover { border-color: var(--orange); }
.svc-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.svc-option .svc-icon {
width: 44px; height: 44px; flex: none; border-radius: var(--r-sm);
background: var(--orange-soft); color: var(--orange);
display: grid; place-items: center; font-size: 1.15rem;
}
.svc-option .svc-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.svc-option .svc-title { font-size: .92rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.svc-option .svc-text { font-size: .8rem; color: var(--ink-3); line-height: 1.55; }
.svc-option .svc-price { flex: none; text-align: right; display: grid; line-height: 1.2; }
.svc-option .svc-price b { font-size: 1.15rem; font-weight: 700; color: var(--orange); }
.svc-option .svc-price small { font-size: .7rem; color: var(--ink-4); font-weight: 600; white-space: nowrap; }
.svc-option .svc-check {
width: 24px; height: 24px; flex: none; border-radius: 7px;
border: 1.5px solid var(--line-2); background: #fff;
display: grid; place-items: center; transition: background .15s, border-color .15s;
}
.svc-option .svc-check svg { width: 14px; height: 14px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.svc-option input:checked ~ .svc-check { background: var(--orange); border-color: var(--orange); }
.svc-option input:checked ~ .svc-check svg { opacity: 1; transform: scale(1); }
.svc-option input:focus-visible ~ .svc-check { box-shadow: 0 0 0 3px var(--orange-soft); }
.svc-option.is-on { border-style: solid; border-color: var(--orange); background: var(--orange-soft); box-shadow: 0 6px 18px rgba(232,96,44,.12); }
.svc-option.is-on .svc-icon { background: #fff; }
@media (max-width: 560px) {
.svc-option { flex-wrap: wrap; align-items: flex-start; }
.svc-option .svc-main { flex-basis: calc(100% - 58px); }
.svc-option .svc-price { order: 3; text-align: left; margin-left: 58px; flex: 1; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 6px; }
.svc-option .svc-check { order: 4; }
}
.book-terms {
display: flex; align-items: flex-start; gap: 11px;
margin-top: 16px; padding: 13px 15px;
background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: var(--r-md);
font-size: .85rem; line-height: 1.55; color: var(--ink-2); cursor: pointer;
transition: border-color .15s, background .15s;
}
.book-terms:hover { border-color: var(--line-2); }
.book-terms input { position: absolute; opacity: 0; width: 0; height: 0; }
.book-terms .bt-box {
width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-2);
background: #fff; flex: none; display: grid; place-items: center; margin-top: 1px;
transition: background .15s, border-color .15s;
}
.book-terms .bt-box svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.book-terms input:checked ~ .bt-box { background: var(--orange); border-color: var(--orange); }
.book-terms input:checked ~ .bt-box svg { opacity: 1; transform: scale(1); }
.book-terms input:focus-visible ~ .bt-box { box-shadow: 0 0 0 3px var(--orange-soft); }
.book-terms a { color: var(--orange); font-weight: 700; white-space: nowrap; }
.book-terms strong { color: var(--ink-2); font-weight: 700; }
.book-terms.error { border-color: var(--red); background: #fdecea; }
.book-terms.error .bt-box { border-color: var(--red); }
.book-terms-err { display: none; color: var(--red); font-size: .8rem; font-weight: 600; margin-top: 7px; padding-left: 2px; }
.book-terms-err.show { display: block; }
/* Detail sections */
.detail-section { padding-block: 26px; border-top: 1px solid var(--line); }
.detail-section h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 14px; }
.detail-section p { color: var(--ink-2); margin-bottom: 12px; }
/* Discount policy table */
.discount-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.discount-table table { width: 100%; border-collapse: collapse; text-align: center; }
.discount-table th, .discount-table td { padding: 13px 12px; font-size: .98rem; border-bottom: 1px solid var(--line); }
.discount-table tr:last-child th, .discount-table tr:last-child td { border-bottom: none; }
.discount-table td + td, .discount-table th + td { border-left: 1px solid var(--line); }
.discount-table .dp-label { text-align: left; background: var(--bg-soft); font-weight: 700; color: var(--ink-3); white-space: nowrap; width: 1%; }
.discount-table .dp-head td { font-weight: 700; color: var(--ink); }
.discount-table .dp-price { font-weight: 700; color: var(--orange); }
.discount-table .dp-suffix { font-size: .78rem; font-weight: 600; color: var(--ink-4); }
/* Detail page: trip picker (list-style) above the layout */
.detail-search { margin: 22px 0 30px; }
/* Detail page: discount policy as a side card above the booking panel */
.aside-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 18px 20px; margin-bottom: 22px; }
.aside-card-title { font-size: 1.05rem; font-weight: 700; }
.aside-card-note { font-size: .85rem; color: var(--ink-3); margin: 6px 0 14px; }
.aside-card .discount-table th, .aside-card .discount-table td { padding: 11px 10px; font-size: .9rem; }
.incl-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.incl-item { display: flex; gap: 12px; align-items: flex-start; }
.incl-item .ic { width: 34px; height: 34px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; flex: none; }
.incl-item .ic svg { width: 17px; height: 17px; }
.incl-item h4 { font-size: .98rem; font-weight: 700; }
.incl-item p { font-size: .88rem; color: var(--ink-3); margin: 0; }
/* =========================================================
BOOKING PANEL (sticky)
========================================================= */
.book-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; }
/* Total and per-day side by side, their amounts on one line. */
.book-panel-head { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.book-panel-head .bp-from { font-size: .78rem; color: var(--ink-4); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.book-panel-head .bp-price { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; margin-top: 6px; }
#bpPerDay { line-height: 1; margin-top: 6px; height: 1.6rem; display: flex; align-items: flex-end; justify-content: flex-end; }
.car-disc-badge {
position: absolute; top: 26px; right: 26px;
background: var(--orange); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18);
font-size: .78rem; font-weight: 700; padding: 6px 11px; border-radius: var(--r-pill);
}
.book-panel-head .bp-disc { display: block; margin-top: 3px; font-size: .8rem; font-weight: 700; color: var(--orange); }
.book-panel-head .bp-disc[hidden] { display: none; }
#bpPerDay .bp-was { font-size: .82rem; font-weight: 600; color: var(--ink-4); margin-right: 4px; }
.bd-row.is-discount { color: var(--green); font-weight: 700; }
.book-panel-head .bp-nodep { display: block; margin-top: 6px; font-size: .8rem; font-weight: 600; color: var(--green); }
.book-panel-head .bp-price span:not(#bpTotal) { font-size: .9rem; font-weight: 600; color: var(--ink-3); }
.book-body { padding: 18px 22px; }
.book-sub { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); margin: 6px 0 12px; }
.book-sub:first-child { margin-top: 0; }
/* Price breakdown under the (scrolling) extras list: a little air between them. */
#extrasList + .book-sub { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
/* mini fields inside panel */
.bp-field { border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 13px; margin-bottom: 10px; transition: border-color .15s; }
.bp-field:focus-within { border-color: var(--orange); }
.bp-field label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); margin-bottom: 2px; }
.bp-field .bp-inner { display: flex; align-items: center; gap: 8px; position: relative; }
.bp-field .bp-inner svg { width: 16px; height: 16px; color: var(--orange); flex: none; }
.bp-field select, .bp-field input { width: 100%; border: none; background: none; font-size: .92rem; font-weight: 600; outline: none; color: var(--ink); }
.bp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bp-note { display: flex; gap: 8px; align-items: center; font-size: .82rem; font-weight: 600; color: var(--ink-3); background: var(--bg-soft); border-radius: var(--r-sm); padding: 9px 12px; margin-bottom: 6px; }
.bp-note svg { width: 16px; height: 16px; color: var(--orange); flex: none; }
.bp-note.warn { color: var(--red); background: #fdecea; }
.bp-note.warn svg { color: var(--red); }
/* coverage radio cards */
.cover-opt { display: flex; gap: 12px; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); margin-bottom: 9px; cursor: pointer; transition: border-color .15s, background .15s; }
.cover-opt:hover { border-color: var(--line-2); }
.cover-opt input { position: absolute; opacity: 0; }
.cover-opt .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; margin-top: 0; display: grid; place-items: center; transition: border-color .15s; }
.cover-opt .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); transform: scale(0); transition: transform .15s; }
.cover-opt input:checked ~ .radio { border-color: var(--orange); }
.cover-opt input:checked ~ .radio::after { transform: scale(1); }
.cover-opt input:checked + .radio { border-color: var(--orange); }
.cover-opt:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); }
.cover-opt .co-body { flex: 1; }
.cover-opt .co-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; line-height: 1.3; }
.cover-opt h5 { font-size: .92rem; font-weight: 700; }
.cover-opt .co-price { font-size: .88rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.cover-need {
margin: 0 0 8px;
font-size: .82rem;
font-weight: 700;
color: #96261C;
}
#coverList.is-needed .cover-opt { border-color: #E8A39C; }
.cover-opt p { font-size: .8rem; color: var(--ink-3); margin: 4px 0 0; }
/* extras list */
.extra-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.extra-row:last-child { border-bottom: none; }
.extra-row .ex-icon { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--bg-soft); color: var(--orange); display: grid; place-items: center; flex: none; }
.extra-row .ex-icon svg { width: 19px; height: 19px; }
.extra-row .ex-main { flex: 1; min-width: 0; }
.extra-row h5 { font-size: .9rem; font-weight: 700; }
.extra-row .ex-price { font-size: .8rem; color: var(--ink-3); font-weight: 600; }
.extra-row .ex-price b { color: var(--orange); }
/* Long extras list: fixed height + inner scroll */
#extrasList { max-height: 322px; overflow-y: auto; padding-right: 8px; }
#extrasList::-webkit-scrollbar { width: 6px; }
#extrasList::-webkit-scrollbar-track { background: transparent; }
#extrasList::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
#extrasList::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
/* qty stepper */
.stepper { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); }
.stepper button { width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink-2); font-weight: 700; font-size: 1.1rem; }
.stepper button:disabled { opacity: .35; }
.stepper .qv { min-width: 26px; text-align: center; font-weight: 700; font-size: .9rem; }
/* checkbox toggle for extras */
.ex-check { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; cursor: pointer; transition: all .15s; }
.ex-check svg { width: 14px; height: 14px; color: #fff; opacity: 0; transform: scale(.6); transition: all .15s; }
.ex-check.on { background: var(--orange); border-color: var(--orange); }
.ex-check.on svg { opacity: 1; transform: scale(1); }
/* price breakdown */
.breakdown { margin-top: 6px; }
.bd-row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; padding: 7px 0; color: var(--ink-2); }
.bd-row .bd-label { color: var(--ink-3); }
.bd-row.muted { color: var(--ink-4); font-size: .84rem; }
.bd-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin-top: 8px; border-top: 2px solid var(--line); }
.bd-total .t-label { font-weight: 700; font-size: 1.05rem; }
.bd-total .t-amt { font-weight: 700; font-size: 1.6rem; letter-spacing: -.02em; }
.bd-deposit { display: flex; justify-content: space-between; font-size: .84rem; color: var(--ink-3); font-weight: 600; margin-top: 6px; }
.book-foot { padding: 18px 22px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.book-foot .btn { height: 54px; }
.book-foot .reassure { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: .8rem; color: var(--ink-3); font-weight: 600; margin-top: 12px; }
.book-foot .reassure svg { width: 15px; height: 15px; color: var(--green); }
/* similar cars */
.similar { margin-top: 60px; }
/* =========================================================
BOOKING WIZARD (personal details)
========================================================= */
.wizard { padding-block: 28px 80px; }
/* progress steps */
.wizard-steps { display: flex; align-items: center; gap: 0; margin-bottom: 30px; overflow-x: auto; }
.wstep { display: flex; align-items: center; gap: 10px; flex: none; }
.wstep .wnum { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--bg-soft); color: var(--ink-4); border: 1.5px solid var(--line); flex: none; }
.wstep .wlabel { font-size: .88rem; font-weight: 700; color: var(--ink-4); white-space: nowrap; }
.wstep.done .wnum { background: var(--green-soft); color: var(--green); border-color: transparent; }
.wstep.active .wnum { background: var(--orange); color: #fff; border-color: var(--orange); box-shadow: var(--shadow-orange); }
.wstep.active .wlabel { color: var(--ink); }
.wline { flex: 1; min-width: 18px; height: 2px; background: var(--line); margin: 0 12px; }
.wline.done { background: var(--green); }
.booking-layout { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
/* form cards */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; margin-bottom: 22px; }
.form-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.form-card-head .fh-num { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; font-weight: 700; flex: none; }
.form-card-head h2 { font-size: 1.2rem; font-weight: 700; }
.form-card-head .opt { margin-left: auto; font-size: .76rem; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .05em; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-group.full { grid-column: 1 / -1; }
.input-group label { font-size: .82rem; font-weight: 700; color: var(--ink-2); }
.input-group label .req { color: var(--orange); }
.input-group .hint { font-size: .76rem; color: var(--ink-4); }
.input-control {
width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--r-md);
font-size: .95rem; font-weight: 500; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.input-control::placeholder { color: var(--ink-4); font-weight: 400; }
.input-control:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
select.input-control { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369727c' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
textarea.input-control { resize: vertical; min-height: 92px; font-family: inherit; }
.input-control.error { border-color: var(--red); }
.err-msg { font-size: .76rem; color: var(--red); font-weight: 600; display: none; }
.err-msg.show { display: block; }
/* phone split */
.phone-split { display: grid; grid-template-columns: 116px 1fr; gap: 8px; }
/* file upload */
.file-drop { position: relative; border: 1.5px dashed var(--line-2); border-radius: var(--r-md); padding: 20px; text-align: center; transition: border-color .15s, background .15s; cursor: pointer; }
.file-drop:hover { border-color: var(--orange); background: var(--orange-soft); }
.file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop .fd-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-soft); color: var(--orange); display: grid; place-items: center; margin: 0 auto 10px; }
.file-drop .fd-icon svg { width: 20px; height: 20px; }
.file-drop p { font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.file-drop small { font-size: .76rem; color: var(--ink-4); }
.file-drop.has-file { border-color: var(--green); background: var(--green-soft); }
.file-drop.has-file .fd-icon { background: #fff; color: var(--green); }
/* terms checkbox */
.terms-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 4px 0; }
.terms-check input { position: absolute; opacity: 0; }
.terms-check .box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; margin-top: 1px; transition: all .15s; }
.terms-check .box svg { width: 14px; height: 14px; color: #fff; opacity: 0; transform: scale(.6); transition: all .15s; }
.terms-check input:checked + .box { background: var(--orange); border-color: var(--orange); }
.terms-check input:checked + .box svg { opacity: 1; transform: scale(1); }
.terms-check span { font-size: .9rem; color: var(--ink-2); }
.terms-check a { color: var(--orange); font-weight: 700; }
/* =========================================================
ORDER SUMMARY (sidebar)
========================================================= */
.summary-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.summary-car { display: flex; gap: 14px; padding: 18px; border-bottom: 1px solid var(--line); }
.summary-car img { width: 92px; height: 68px; border-radius: var(--r-md); object-fit: cover; flex: none; }
.summary-car h3 { font-size: 1.05rem; font-weight: 700; }
.summary-car .sc-sub { font-size: .82rem; color: var(--ink-4); }
.summary-car .sc-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: var(--green); margin-top: 6px; }
.summary-car .sc-badge svg { width: 13px; height: 13px; }
.summary-body { padding: 18px; }
.summary-trip { display: grid; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.trip-line { display: flex; gap: 11px; }
.trip-line .tl-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; flex: none; }
.trip-line .tl-icon svg { width: 15px; height: 15px; }
.trip-line small { display: block; font-size: .72rem; color: var(--ink-4); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.trip-line strong { display: block; font-size: .9rem; font-weight: 700; }
.trip-line .tl-when { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-3); margin-top: 2px; }
.summary-sub { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); margin-bottom: 10px; }
/* promo */
.promo-field { display: flex; gap: 8px; margin-bottom: 16px; }
.promo-field input { flex: 1; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); font-weight: 600; text-transform: uppercase; font-size: .88rem; }
.promo-field input:focus { outline: none; border-color: var(--orange); }
.promo-field button { padding: 0 18px; border-radius: var(--r-md); background: var(--dark); color: #fff; font-weight: 700; font-size: .85rem; }
.promo-field button:hover { background: var(--orange); }
.promo-msg { font-size: .8rem; font-weight: 600; margin: -8px 0 14px; display: none; }
.promo-msg.ok { color: var(--green); display: block; }
.promo-msg.bad { color: var(--red); display: block; }
.summary-foot { padding: 18px; background: var(--bg-soft); border-top: 1px solid var(--line); }
.summary-foot .btn { height: 54px; }
.summary-reassure { font-size: .8rem; color: var(--ink-3); font-weight: 600; text-align: center; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.summary-reassure svg { width: 15px; height: 15px; color: var(--green); }
/* =========================================================
ORDER CONFIRMATION
========================================================= */
.confirm { padding-block: 50px 80px; }
.confirm-hero { text-align: center; max-width: 620px; margin: 0 auto 36px; }
.confirm-icon { width: 84px; height: 84px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; margin: 0 auto 22px; animation: pop .4s cubic-bezier(.2,.8,.3,1.2); }
.confirm-icon svg { width: 42px; height: 42px; }
@keyframes pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.confirm-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; }
.confirm-hero p { color: var(--ink-3); font-size: 1.08rem; margin-top: 12px; }
.confirm-hero .email { color: var(--ink); font-weight: 700; }
.order-box { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; background: #fff; border: 1.5px dashed var(--orange); border-radius: var(--r-md); padding: 14px 28px; margin-top: 22px; }
.order-box small { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); }
.order-box strong { font-size: 1.5rem; font-weight: 700; letter-spacing: .12em; color: var(--orange); }
.confirm-grid { display: grid; grid-template-columns: 1fr; gap: 22px; max-width: 920px; margin: 0 auto; }
.confirm-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.confirm-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.confirm-card h3 svg { width: 19px; height: 19px; color: var(--orange); }
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: .9rem; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--ink-3); }
.kv .v { font-weight: 700; text-align: right; }
.kv-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin-top: 6px; border-top: 2px solid var(--line); }
.kv-total .k { font-weight: 700; font-size: 1.05rem; }
.kv-total .v { font-weight: 700; font-size: 1.5rem; color: var(--orange); }
.next-steps { display: grid; gap: 16px; margin-top: 6px; }
.next-step { display: flex; gap: 14px; }
.next-step .ns-num { width: 34px; height: 34px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; font-weight: 700; flex: none; font-size: .9rem; }
.next-step h4 { font-size: .98rem; font-weight: 700; }
.next-step p { font-size: .86rem; color: var(--ink-3); }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 36px; }
.empty-state { text-align: center; max-width: 460px; margin: 60px auto; }
.empty-state .es-icon { width: 70px; height: 70px; border-radius: 50%; background: var(--bg-soft); color: var(--ink-4); display: grid; place-items: center; margin: 0 auto 20px; }
.empty-state .es-icon svg { width: 32px; height: 32px; }
.empty-state h2 { font-size: 1.4rem; font-weight: 700; }
.empty-state p { color: var(--ink-3); margin: 10px 0 22px; }
/* =========================================================
FLOATING SOCIAL / CONTACT BUTTONS (sticky, all pages)
========================================================= */
.social-buttons {
position: fixed; right: 18px; bottom: 18px; z-index: 95;
display: flex; flex-direction: column; gap: 12px;
}
.social-button {
width: 54px; height: 54px; border-radius: 50%;
display: grid; place-items: center; color: #fff;
box-shadow: 0 6px 18px rgba(16,25,40,.22);
transition: transform .18s ease, box-shadow .18s ease;
}
.social-button i { font-size: 28px; line-height: 1; }
.social-button:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 26px rgba(16,25,40,.30); color: #fff; }
.telegram-button { background: #229ed9; }
.whatsapp-button { background: #25d366; }
@media (max-width: 560px) {
.social-buttons { right: 14px; bottom: 14px; gap: 10px; }
.social-button { width: 48px; height: 48px; }
.social-button i { font-size: 25px; }
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (min-width: 560px) {
.extras-grid { grid-template-columns: repeat(2, 1fr); }
.acc-grid { grid-template-columns: repeat(2, 1fr); }
.search-grid { grid-template-columns: 1fr 1fr; }
.incl-grid { grid-template-columns: repeat(2, 1fr); }
.form-grid { grid-template-columns: 1fr 1fr; }
.confirm-grid.two { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
.trust-grid { grid-template-columns: repeat(4, 1fr); padding-block: 34px; }
.cars-grid, .results-grid { grid-template-columns: repeat(2, 1fr); }
.steps-grid { grid-template-columns: repeat(3, 1fr); }
.loc-grid { grid-template-columns: repeat(2, 1fr); }
.extras-grid { grid-template-columns: repeat(4, 1fr); }
.footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; }
.cta-band-inner { grid-template-columns: 1.6fr 1fr; }
.split { grid-template-columns: 1fr 1fr; }
.geo-top { grid-template-columns: 0.92fr 1.08fr; gap: 40px; }
.geo-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
.search-grid { grid-template-columns: 2fr 2fr 2fr 2fr auto; align-items: end; }
.search-bar .search-grid { grid-template-columns: 1.5fr 1.5fr 1.8fr 1.8fr auto; }
.detail-search .search-grid { grid-template-columns: 1.6fr 1.6fr 1.7fr 1.7fr; }
}
@media (min-width: 900px) {
.main-nav { display: block; }
.header-bottom { display: block; }
.header-contact { display: grid; }
.burger { display: none; }
.hero-grid { grid-template-columns: 1.05fr .95fr; }
.cars-grid { grid-template-columns: repeat(3, 1fr); }
.acc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.listing-layout { grid-template-columns: 290px 1fr; }
.filters-toggle { display: none; }
.results-grid { grid-template-columns: repeat(2, 1fr); }
.detail-layout { grid-template-columns: 1fr 400px; }
.book-panel { position: sticky; top: calc(var(--header-h) + 16px); }
.booking-layout { grid-template-columns: 1fr 380px; }
.summary-card { position: sticky; top: calc(var(--header-h) + 16px); }
}
/* Fleet without the filters panel ($showFilters = false in fleet.php): the
results take the full width — three cards a row, like the home page. */
@media (min-width: 900px) {
.listing-layout.no-filters .results-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.listing-layout.no-filters { grid-template-columns: 1fr; }
}
@media (min-width: 1180px) {
.results-grid { grid-template-columns: repeat(3, 1fr); }
.acc-grid { grid-template-columns: repeat(4, 1fr); }
}
/* desktop: filters always visible */
@media (max-width: 1023px) {
.filters { display: none; }
.filters.open { display: block; position: fixed; inset: 0; z-index: 210; border-radius: 0; overflow-y: auto; box-shadow: var(--shadow-lg); }
.filters.open #closeFilters { display: grid; }
/* Rearrange blocks on mobile for better UX/conversions */
.detail-layout {
display: flex;
flex-direction: column;
gap: 20px;
}
.detail-main, .detail-layout aside {
display: contents;
}
/* align-self: the desktop align-items: start would shrink it to nothing here. */
.gallery { order: 1; align-self: stretch; }
/* The desktop grid's align-items: start would shrink it to its content here. */
.cspecs { order: 2; align-self: stretch; }
.aside-card { order: 3; margin-bottom: 0; }
.book-panel { order: 4; }
.detail-main > .detail-section { order: 5; }
}
/* =========================================================
MOBILE OPTIMISATIONS
Targeted polish for phones — where ~80% of bookings happen.
========================================================= */
/* 1) Stop iOS Safari auto-zooming when a form field is focused.
Any control with a computed font-size < 16px triggers the zoom,
which is disorienting mid-booking. Bump every interactive control
to 16px on small screens (no visible change on desktop). */
@media (max-width: 768px) {
.input-control,
.field input, .field select, .date-native,
.bp-field input, .bp-field select,
.promo-field input,
.sort-select select,
.cf-field input, .cf-field textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], textarea, select {
font-size: 16px;
}
}
/* 2) Compact detail badges on phones. (The hero rating pill is the same
size on every screen — see .google-reviews-btn.) */
@media (max-width: 560px) {
.detail-badges { margin-top: 8px; }
.badge { font-size: .7rem; padding: 4px 8px; gap: 4px; }
.badge svg { width: 11px; height: 11px; }
}
/* 2b) Results "Sort by" control: the desktop pill is bulky on phones. Keep the
count + sort on a single compact row and shrink the select (selects don't
trigger iOS focus-zoom like text inputs, so a smaller font is safe here). */
@media (max-width: 600px) {
.results-bar { flex-wrap: nowrap; gap: 10px; margin-bottom: 16px; }
.results-bar .count { font-size: .9rem; white-space: nowrap; }
.sort-select { gap: 7px; min-width: 0; }
.sort-select label { font-size: .74rem; white-space: nowrap; }
.sort-select select {
font-size: .85rem; padding: 8px 30px 8px 12px;
background-position: right 11px center; background-size: 12px;
}
}
/* 3) Smoother, scrollbar-free horizontal scroll for the wizard steps. */
.wizard-steps { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.wizard-steps::-webkit-scrollbar { display: none; }
/* 4) Sticky mobile "Book" bar (car-detail). The full booking panel lives
far down a long page on phones; this keeps the price + CTA in reach.
It mirrors the live total via [data-live-total] and submits #bookPanel. */
.mbook {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
display: flex; align-items: center; gap: 14px;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
background: #fff; border-top: 1px solid var(--line);
box-shadow: 0 -6px 20px rgba(16,25,40,.10);
}
.mbook[hidden] { display: none; }
.mbook-price { display: flex; flex-direction: column; line-height: 1.15; }
.mbook-price small {
font-size: .66rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--ink-4);
}
.mbook-price strong { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.mbook-btn { margin-left: auto; flex: none; }
/* keep page content clear of the bar, and lift the floating chat buttons */
body.has-mbook { padding-bottom: 74px; }
body.has-mbook .social-buttons { bottom: 86px; }
@media (min-width: 1024px) {
.mbook { display: none !important; }
body.has-mbook { padding-bottom: 0; }
body.has-mbook .social-buttons { bottom: 18px; }
}
/* =========================================================
MOBILE TYPE SCALE & DENSITY (phones)
Phones read better at slightly smaller type. We shrink the
root proportionally so every rem-based size follows, and trim
the largest display headings a touch more. The 16px form-input
rule above is px-based and stays put — keeps iOS from zooming
on focus during booking.
========================================================= */
@media (max-width: 600px) {
html { font-size: 15px; }
/* trim large display headings beyond the proportional shrink */
.hero h1 { font-size: clamp(1.6rem, 7.2vw, 2rem); }
.section-head h2 { font-size: clamp(1.45rem, 6vw, 1.8rem); }
.page-hero h1 { font-size: clamp(1.4rem, 6vw, 1.75rem); }
.cta-band h2 { font-size: clamp(1.45rem, 6vw, 1.8rem); }
.confirm-hero h1 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }
.detail-title-row h1 { font-size: clamp(1.45rem, 6vw, 1.9rem); }
.geo-why-head h2 { font-size: clamp(1.4rem, 5.6vw, 1.8rem); }
/* calmer lead / intro copy */
.hero-lead { font-size: 1rem; }
.section-head p { font-size: .96rem; }
.page-hero p { font-size: .94rem; }
.confirm-hero p { font-size: 1rem; }
/* tighten vertical rhythm so sections don't feel oversized */
.section { padding-block: clamp(34px, 8vw, 56px); }
.page-home .section { padding-block: clamp(24px, 5.5vw, 38px); }
}
@media (max-width: 360px) {
html { font-size: 14.5px; }
}
/* Small-phone layout tidy-ups */
@media (max-width: 480px) {
/* stack the Georgia fact rows — a fixed 140px label column is too
wide next to the value on narrow screens */
.geo-fact { grid-template-columns: 1fr; gap: 3px; }
.geo-fact .k { margin-bottom: 1px; }
}
/* Body copy follows the mobile scale too (the base rule pins 16px, which
would otherwise keep inherited prose large on phones). Form inputs stay
16px via the px-based rule above, so focus never triggers iOS zoom. */
@media (max-width: 600px) { body { font-size: 15px; } }
@media (max-width: 360px) { body { font-size: 14.5px; } }