/* ==========================================================================
   done EXPRESS — Car Rental Amman  |  Stylesheet
   Brand: green + navy blue. octane.rent-style layout. Multi-page. EN/AR.
   ========================================================================== */

:root {
  --bg:#ffffff; --ink:#141824; --ink-2:#2b2f3a; --muted:#6a7180; --muted-2:#9aa0ad;
  --line:#eceef2; --line-2:#dfe2e9; --soft:#f5f7f9; --soft-2:#eef1f5;

  --green:#1aa34a; --green-d:#158a3e; --green-soft:#e8f6ed; --lime:#7ac943;
  --grad:linear-gradient(150deg,#7ac943 0%, #17a046 100%);
  --navy:#16215c; --navy-2:#1d2a6e; --navy-d:#0f1740;
  --wa:#25d366; --wa-d:#1eb256;

  --radius:16px; --radius-sm:12px;
  --shadow:0 18px 44px -20px rgba(20,24,40,.30);
  --shadow-sm:0 8px 24px -14px rgba(20,24,40,.25);

  --ff-en:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ff-ar:'Tajawal', system-ui, sans-serif;
  --ff:var(--ff-en);
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1200px;
}
html[lang="ar"] { --ff:var(--ff-ar); }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--ff); background:var(--bg); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font-family:inherit; color:inherit; }
button { cursor:pointer; border:none; background:none; }
ul { list-style:none; }
.ic { width:1em; height:1em; fill:currentColor; flex:none; }
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px; }
::selection { background:var(--green); color:#fff; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border-radius:10px; font-weight:700; font-size:15px; line-height:1; transition:transform .2s var(--ease), box-shadow .2s, background .2s, color .2s; white-space:nowrap; }
.btn:hover { transform:translateY(-1px); }
.btn--primary { background:var(--green); color:#fff; box-shadow:0 10px 24px -12px rgba(26,163,74,.75); }
.btn--primary:hover { background:var(--green-d); }
.btn--navy { background:var(--navy); color:#fff; }
.btn--navy:hover { background:var(--navy-2); }
.btn--wa { background:var(--wa); color:#fff; }
.btn--wa:hover { background:var(--wa-d); }
.btn--ghost { background:transparent; border:1.5px solid var(--line-2); color:var(--ink); }
.btn--ghost:hover { border-color:var(--green); color:var(--green); }
.btn--lg { padding:14px 26px; font-size:16px; }
.btn--block { width:100%; }

.switch { display:inline-flex; background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:3px; }
.switch__btn { padding:5px 11px; border-radius:999px; font-size:13px; font-weight:700; color:var(--muted); transition:.2s; }
.switch__btn.is-active { background:var(--green); color:#fff; }

/* ==========================================================================
   Logo
   ========================================================================== */
.logo { display:inline-flex; align-items:center; gap:11px; }
.logo__mark { width:42px; height:42px; display:grid; place-items:center; flex:none; }
.logo__mark svg, .logo__mark img { width:42px; height:42px; object-fit:contain; }
.logo__text { display:flex; flex-direction:column; line-height:.98; font-family:var(--ff-en); font-weight:800; font-size:23px; color:var(--navy); letter-spacing:.01em; text-transform:uppercase; }
.logo__tag { font-size:10px; font-weight:700; color:var(--green); letter-spacing:.34em; font-style:normal; margin-top:3px; }
.logo--footer .logo__text { color:#fff; }
.logo--footer .logo__tag { color:var(--lime); }
.logo--img .logo__img { height:52px; width:auto; display:block; object-fit:contain; }
.logo--footer.logo--img { background:#fff; padding:7px 12px; border-radius:12px; }
.logo--footer.logo--img .logo__img { height:42px; }
@media (max-width:620px){ .logo--img .logo__img { height:44px; } }

/* ==========================================================================
   Header
   ========================================================================== */
.head { position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--line); }
.head.is-stuck { box-shadow:0 6px 20px -14px rgba(0,0,0,.3); }
.head__row { display:flex; align-items:center; gap:18px; min-height:70px; }
.head__search { flex:1; max-width:440px; margin-inline:auto; display:flex; align-items:center; gap:8px; height:42px; padding:0 16px; background:var(--soft); border:1px solid var(--line); border-radius:999px; }
.head__search .ic { font-size:18px; color:var(--muted-2); }
.head__search input { flex:1; background:transparent; border:none; outline:none; font-size:14.5px; }
.head__right { display:flex; align-items:center; gap:12px; margin-inline-start:auto; }
.head__phone { font-weight:700; font-size:15px; white-space:nowrap; color:var(--navy); }
.head__icons { display:flex; gap:7px; }
.hic { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-2); transition:.2s; }
.hic svg { width:17px; height:17px; fill:var(--navy); }
.hic:hover { transform:translateY(-2px); }
.hic--wa svg { fill:var(--wa); } .hic--ig svg { fill:#d62976; } .hic--call svg { fill:var(--green); }

.burger { display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line-2); flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burger span { width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; }
.burger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity:0; }
.burger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.nav { border-top:1px solid var(--line); background:#fff; }
.nav__row { display:flex; align-items:center; justify-content:center; gap:30px; min-height:46px; }
.nav__item { position:relative; }
.nav__link { display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:15px; color:var(--ink); padding:12px 0; transition:.2s; }
.nav__link:hover, .nav__link.is-active { color:var(--green); }
.has-drop > .nav__link::after { content:"▾"; font-size:11px; color:var(--muted-2); }
.drop { position:absolute; top:100%; inset-inline-start:50%; transform:translateX(-50%) translateY(8px); min-width:200px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:8px; opacity:0; visibility:hidden; transition:.22s var(--ease); z-index:20; }
html[dir="rtl"] .drop { transform:translateX(50%) translateY(8px); }
.nav__item:hover .drop { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
html[dir="rtl"] .nav__item:hover .drop { transform:translateX(50%) translateY(0); }
.drop a { display:block; padding:9px 12px; border-radius:8px; font-size:14.5px; font-weight:600; color:var(--ink-2); }
.drop a:hover { background:var(--green-soft); color:var(--green); }
/* Cars mega-dropdown (octane style: categories with thumbnails + brand grid) */
.drop--mega { min-width:700px; max-width:calc(100vw - 40px); inset-inline-start:0; transform:translateY(8px); display:grid; grid-template-columns:236px 1fr; gap:0 24px; padding:22px 26px; }
html[dir="rtl"] .drop--mega { inset-inline-start:auto; inset-inline-end:0; transform:translateY(8px); }
.nav__item:hover .drop--mega { transform:translateY(0); }
.drop--mega h5 { font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted-2); margin-bottom:12px; font-weight:700; }
.mega__cats { border-inline-end:1px solid var(--line); padding-inline-end:22px; }
.megacat { display:flex; align-items:center; gap:12px; padding:6px 8px; border-radius:9px; transition:.18s; }
.megacat:hover { background:var(--green-soft); }
.megacat:hover > span { color:var(--green); }
.megacat__img { width:54px; height:36px; border-radius:7px; overflow:hidden; background:var(--soft); display:grid; place-items:center; flex:none; }
.megacat__img img { width:100%; height:100%; object-fit:cover; }
.megacat > span { font-size:14px; font-weight:600; color:var(--ink-2); }
.mega__brandgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.megabrand { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:56px; padding:10px 6px; border:1px solid var(--line); border-radius:10px; text-align:center; transition:.18s var(--ease); }
.megabrand:hover { border-color:var(--green); background:var(--green-soft); transform:translateY(-2px); }
.megabrand__logo:has(img[style*="display: none"]) { display:none; }
.megabrand__logo img { height:26px; width:auto; max-width:64px; object-fit:contain; }
.megabrand__name { font-size:13px; font-weight:700; color:var(--ink-2); }

.drawer { position:fixed; top:0; inset-inline-end:0; z-index:90; width:min(320px,85vw); height:100dvh; background:#fff; box-shadow:var(--shadow); padding:80px 24px 30px; display:flex; flex-direction:column; gap:4px; transform:translateX(var(--off,110%)); transition:transform .35s var(--ease); }
html[dir="rtl"] .drawer { --off:-110%; }
.drawer.is-open { transform:translateX(0); }
.drawer__link { padding:14px 10px; border-bottom:1px solid var(--line); font-weight:700; font-size:17px; }
.drawer__link:hover { color:var(--green); }
.drawer__wa { margin-top:18px; }
.overlay { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.4); opacity:0; visibility:hidden; transition:.3s; }
.overlay.is-open { opacity:1; visibility:visible; }

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero { position:relative; min-height:500px; display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero__bg { position:absolute; inset:0; z-index:0; background:#1a2033 var(--hero-img, url("https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1700&q=80")) center/cover no-repeat; }
.hero__scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(15,20,45,.62), rgba(15,20,45,.42) 40%, rgba(15,20,45,.78)); }
.hero__inner { position:relative; z-index:2; text-align:center; max-width:880px; margin-inline:auto; padding:80px 0 88px; }
.hero__title { font-weight:800; font-size:clamp(30px,5vw,52px); line-height:1.1; letter-spacing:-.02em; text-wrap:balance; text-shadow:0 2px 20px rgba(0,0,0,.35); }
.hero__sub { font-size:clamp(15px,2vw,18px); margin-top:16px; color:rgba(255,255,255,.9); max-width:640px; margin-inline:auto; }
.hbar { margin:26px auto 0; max-width:920px; background:#fff; border-radius:14px; padding:10px; display:grid; grid-template-columns:1.5fr 1fr 1fr auto; gap:10px; box-shadow:var(--shadow); }
.hbar__field { display:flex; align-items:center; gap:8px; padding:6px 14px; border-radius:10px; background:var(--soft); }
.hbar__field .ic { font-size:20px; color:var(--muted-2); } .hbar__field .ic--pin { color:var(--green); }
.hbar__field input, .hbar__field select { border:none; background:transparent; outline:none; font-size:15px; font-weight:500; color:var(--ink); width:100%; min-width:120px; }
.hbar__field--grow { min-width:0; }
.hbar__date { flex-direction:column; align-items:flex-start; gap:1px; }
.hbar__date label { font-size:11px; font-weight:700; color:var(--muted-2); }
.hbar__date input { font-size:14px; font-weight:600; min-width:0; }
.hbar__btn { padding-inline:30px; }
.hero__tags { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:18px; font-size:14px; }
.hero__tags > span { color:rgba(255,255,255,.75); }
.tagchip { padding:7px 15px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); color:#fff; font-weight:600; font-size:13.5px; transition:.2s; }
.tagchip:hover { background:var(--green); border-color:var(--green); }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding:46px 0; }
.soft { background:var(--soft); }
.sec-head { margin-bottom:30px; }
.sec-head--center { text-align:center; }
.sec-title { font-weight:800; font-size:clamp(23px,3.4vw,34px); letter-spacing:-.02em; }
.sec-lead { color:var(--muted); margin-top:8px; font-size:15.5px; }

/* Brands */
.brands-sec { padding:30px 0 8px; }
.brands { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.brands::-webkit-scrollbar { display:none; }
.brand { position:relative; flex:0 0 auto; min-width:152px; height:94px; border-radius:14px; overflow:hidden; display:grid; place-items:center; border:1px solid var(--line); background:#141a3a; transition:.25s var(--ease); }
.brand__bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.5; transition:.3s var(--ease); }
.brand::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,20,45,.3), rgba(16,20,45,.85)); }
.brand__name { position:relative; z-index:1; color:#fff; font-weight:800; font-size:16px; letter-spacing:.01em; }
.brand:hover { transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.brand:hover .brand__bg { opacity:.78; transform:scale(1.06); }
.brand:hover .brand__name { color:var(--lime); }

/* Categories */
.cats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cat { display:flex; align-items:center; gap:16px; padding:14px 18px; background:#fff; border:1px solid var(--line); border-radius:14px; transition:.22s var(--ease); }
.cat:hover { border-color:var(--green); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.cat__img { width:98px; height:62px; border-radius:10px; background:var(--soft); display:grid; place-items:center; overflow:hidden; flex:none; }
.cat__img img { width:100%; height:100%; object-fit:cover; }
.cat__name { font-weight:700; font-size:17px; }

/* Review band */
.band-sec { padding-top:20px; }
.band { background:var(--navy); border-radius:20px; padding:34px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; color:#fff; flex-wrap:wrap; }
.band__text h2 { font-size:clamp(20px,3vw,28px); font-weight:800; }
.band__text p { color:rgba(255,255,255,.72); margin-top:6px; }
.band__card { background:#fff; color:var(--ink); border-radius:14px; padding:16px 22px; display:flex; align-items:center; gap:16px; }
.band__stars { color:#ffb400; font-size:18px; letter-spacing:2px; }
.band__rate { display:flex; flex-direction:column; line-height:1.1; }
.band__rate b { font-size:26px; font-weight:800; font-family:var(--ff-en); }
.band__rate span { font-size:12.5px; color:var(--muted); }
.band__count { font-size:12px; color:var(--muted); }

/* ==========================================================================
   Car rows + cards
   ========================================================================== */
.rowsec { padding:30px 0; }
.row__head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; }
.row__title { font-weight:800; font-size:clamp(21px,3vw,30px); letter-spacing:-.02em; }
.row__see { color:var(--green); font-weight:700; font-size:15px; }
.row__see:hover { text-decoration:underline; }
.row__wrap { position:relative; }
.row__track { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 10px; scrollbar-width:none; }
.row__track::-webkit-scrollbar { display:none; }
.row__track > .car { flex:0 0 300px; scroll-snap-align:start; }
.row__arrow { position:absolute; top:38%; width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--line-2); box-shadow:var(--shadow-sm); display:grid; place-items:center; font-size:22px; color:var(--ink); z-index:3; transition:.2s; }
.row__arrow:hover { background:var(--green); color:#fff; border-color:var(--green); }
.row__arrow.prev { inset-inline-start:-14px; } .row__arrow.next { inset-inline-end:-14px; }
html[dir="rtl"] .row__arrow.prev, html[dir="rtl"] .row__arrow.next { transform:scaleX(-1); }

.car { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; cursor:pointer; transition:.25s var(--ease); display:flex; flex-direction:column; color:inherit; }
.car:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2); }
.car__media { position:relative; aspect-ratio:16/11; background:linear-gradient(135deg,#eef0f3,#e3e6ea); overflow:hidden; }
.car__ph { position:absolute; inset:0; display:grid; place-items:center; color:#c3c8d0; z-index:0; }
.car__ph svg { width:74px; height:74px; }
.car__media img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.car:hover .car__media img { transform:scale(1.05); }
.car__badge { position:absolute; top:10px; inset-inline-start:10px; z-index:2; background:var(--green); color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; }
.car__pill { position:absolute; bottom:10px; inset-inline-start:10px; z-index:2; background:rgba(16,20,45,.78); color:#fff; font-size:11.5px; font-weight:600; padding:5px 12px; border-radius:999px; backdrop-filter:blur(4px); }
.car__info { padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; }
.car__name { font-weight:700; font-size:17px; letter-spacing:-.01em; color:var(--ink); }
.mini { display:inline-flex; align-items:center; gap:4px; }
.mini svg { width:14px; height:14px; fill:var(--muted-2); }
.car__price { display:flex; align-items:baseline; gap:6px; }
.car__price b { color:var(--green); font-weight:800; font-size:18px; font-family:var(--ff-en); }
.car__price span { font-size:12px; color:var(--muted); }

/* ==========================================================================
   Page header (sub-pages) + breadcrumbs
   ========================================================================== */
.page-head { background:var(--navy); color:#fff; padding:34px 0; }
.page-head h1 { font-size:clamp(26px,4vw,38px); font-weight:800; letter-spacing:-.02em; }
.page-head p { color:rgba(255,255,255,.8); margin-top:8px; max-width:620px; }
.crumbs { font-size:13.5px; color:var(--muted); margin-bottom:16px; }
.crumbs a { color:var(--green); font-weight:600; }
.page-head .crumbs { color:rgba(255,255,255,.7); margin-bottom:10px; }
.page-head .crumbs a { color:var(--lime); }

/* ==========================================================================
   Catalog (cars.html)
   ========================================================================== */
.toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between; margin-bottom:18px; }
.toolbar__search { display:flex; align-items:center; gap:8px; height:42px; padding:0 14px; background:var(--soft); border:1px solid var(--line); border-radius:10px; min-width:220px; flex:1; max-width:340px; }
.toolbar__search .ic { color:var(--muted-2); font-size:18px; }
.toolbar__search input { flex:1; background:transparent; border:none; outline:none; font-size:14.5px; }
.toolbar__controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.select { height:42px; padding:0 14px; border:1px solid var(--line-2); border-radius:10px; background:#fff; font-size:14.5px; font-weight:600; color:var(--ink); outline:none; }
.select:focus { border-color:var(--green); }
.chips { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:22px; }
.chip { padding:9px 16px; border-radius:999px; border:1px solid var(--line-2); background:#fff; color:var(--ink-2); font-weight:600; font-size:14px; transition:.2s; }
.chip:hover { border-color:var(--green); color:var(--green); }
.chip.is-active { background:var(--green); border-color:var(--green); color:#fff; }
.catalog-count { color:var(--muted); font-size:14px; margin-bottom:16px; }
.fleet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.fleet-empty { text-align:center; padding:50px; color:var(--muted); }

/* ==========================================================================
   Car detail (car.html)
   ========================================================================== */
.detail { display:grid; grid-template-columns:1fr 380px; gap:28px; align-items:start; margin-bottom:34px; }
.detail__media { position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden; background:linear-gradient(135deg,#eef0f3,#e3e6ea); border:1px solid var(--line); }
.detail__media .car__ph { position:absolute; inset:0; display:grid; place-items:center; color:#c3c8d0; }
.detail__media .car__ph svg { width:96px; height:96px; }
.detail__media img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; }
.detail__media .car__badge { position:absolute; top:14px; inset-inline-start:14px; z-index:2; }
.detail__book { background:#fff; border:1px solid var(--line-2); border-radius:18px; padding:24px; box-shadow:var(--shadow-sm); position:sticky; top:90px; }
.detail__cat { display:inline-block; background:var(--green-soft); color:var(--green); font-weight:700; font-size:12.5px; padding:4px 12px; border-radius:999px; }
.detail__name { font-size:26px; font-weight:800; letter-spacing:-.02em; margin:12px 0 8px; }
.detail__price { display:flex; align-items:baseline; gap:8px; margin-bottom:14px; }
.detail__price b { color:var(--green); font-size:30px; font-weight:800; font-family:var(--ff-en); }
.detail__price span { color:var(--muted); font-size:14px; }
.detail__specs { display:flex; flex-wrap:wrap; gap:12px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font-size:13.5px; }
.detail__specs .mini svg { fill:var(--green); }
.detail__choose { font-weight:700; font-size:14px; margin:16px 0 10px; }
.detail__cols { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:20px; }
.detail__block { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; }
.detail__block h3 { font-size:18px; font-weight:800; margin-bottom:16px; }
.dspecs { display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.dspec { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:14.5px; }
.dspec span { color:var(--muted); } .dspec b { font-weight:700; }
.inclist { display:grid; gap:12px; }
.inclist li { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:500; }

/* Booking widget bits (used on detail page) */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label { font-size:13px; font-weight:700; color:var(--ink-2); }
.field input, .field textarea { background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:15px; outline:none; transition:.2s; resize:vertical; }
.field input:focus, .field textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); background:#fff; }
.bk__grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bk__summary { background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:6px 0 16px; }
.bk__row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:14.5px; color:var(--muted); }
.bk__row.center { justify-content:center; }
.bk__row .free { color:var(--wa-d); font-weight:700; }
.bk__row.total { border-top:1px dashed var(--line-2); margin-top:8px; padding-top:12px; font-size:19px; font-weight:800; color:var(--ink); }
.bk__row.total b { color:var(--green); font-family:var(--ff-en); }
.bk__actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bk__note { display:flex; gap:8px; align-items:flex-start; margin-top:14px; font-size:12px; color:var(--muted); background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:11px 13px; }
.bk__note b { color:var(--ink); }

/* ==========================================================================
   About / periods / steps / features / reviews / contact / cta
   ========================================================================== */
.about-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:34px; align-items:start; }
.about-grid p { color:var(--ink-2); font-size:16px; margin-bottom:16px; }
.about-mission { background:var(--navy); color:#fff; border-radius:18px; padding:28px; }
.about-mission h3 { font-size:19px; margin-bottom:10px; }
.about-mission p { color:rgba(255,255,255,.82); }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 18px; text-align:center; }
.stat b { display:block; font-family:var(--ff-en); font-size:32px; font-weight:800; color:var(--green); line-height:1; }
.stat span { display:block; margin-top:8px; font-size:13.5px; color:var(--muted); font-weight:600; }

.offers { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.offer { position:relative; border-radius:16px; padding:26px 22px; color:#fff; overflow:hidden; min-height:158px; display:flex; flex-direction:column; justify-content:flex-end; transition:.22s var(--ease); }
.offer:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.offer__ic { font-size:30px; margin-bottom:10px; }
.offer h3 { font-size:18px; font-weight:800; margin-bottom:5px; }
.offer p { font-size:13.5px; opacity:.92; }
.offer__badge { position:absolute; top:16px; inset-inline-end:16px; background:#fff; color:var(--navy); font-weight:800; font-size:13px; padding:3px 11px; border-radius:999px; }
.offer--a, .offer--c { background:linear-gradient(150deg,#1d2a6e,#111a45); }
.offer--b, .offer--d { background:linear-gradient(150deg,#17a046,#0f7a33); }

.periods { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.period { position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 24px; text-align:center; transition:.22s var(--ease); }
.period:hover { transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.period--hot { border-color:var(--green); }
.period__tag { position:absolute; top:14px; inset-inline-end:16px; background:var(--green); color:#fff; font-weight:800; font-size:13px; padding:4px 10px; border-radius:999px; }
.period__ic { font-size:34px; margin-bottom:10px; }
.period h3 { font-size:20px; font-weight:800; margin-bottom:6px; }
.period p { color:var(--muted); font-size:14.5px; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step { position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 24px; text-align:center; }
.step__num { position:absolute; top:16px; inset-inline-end:20px; font-family:var(--ff-en); font-size:40px; font-weight:800; color:var(--soft-2); line-height:1; }
.step__ic { font-size:38px; margin-bottom:12px; }
.step h3 { font-size:18px; font-weight:800; margin-bottom:6px; }
.step p { color:var(--muted); font-size:14.5px; }

.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature { background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; transition:.22s var(--ease); }
.feature:hover { transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--line-2); }
.feature__ic { width:50px; height:50px; border-radius:13px; background:var(--green-soft); display:grid; place-items:center; font-size:24px; margin-bottom:14px; }
.feature h3 { font-size:17px; font-weight:800; margin-bottom:6px; }
.feature p { color:var(--muted); font-size:14.5px; }

.cta { background:var(--grad); border-radius:22px; padding:40px 46px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; color:#fff; }
.cta h2 { font-size:clamp(21px,3vw,30px); font-weight:800; max-width:560px; text-wrap:balance; text-shadow:0 1px 10px rgba(0,0,0,.15); }
.cta__actions { display:flex; gap:12px; flex-wrap:wrap; }
.cta .btn--wa { background:#fff; color:var(--wa-d); } .cta .btn--wa:hover { background:#f2f2f2; }
.cta .btn--ghost { border-color:rgba(255,255,255,.6); color:#fff; } .cta .btn--ghost:hover { background:rgba(255,255,255,.15); border-color:#fff; color:#fff; }

.reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.review { background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; }
.review__stars { color:#ffb400; letter-spacing:2px; margin-bottom:12px; }
.review__text { font-size:15px; margin-bottom:18px; color:var(--ink-2); }
.review__who { display:flex; align-items:center; gap:12px; }
.review__av { width:42px; height:42px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-weight:800; font-family:var(--ff-en); }
.review__who b { font-size:14.5px; display:block; } .review__who em { font-size:12.5px; color:var(--muted); font-style:normal; }

.contact { display:grid; grid-template-columns:1fr 440px; gap:40px; align-items:start; }
.contact__list { display:grid; gap:14px; margin-top:24px; }
.contact__list li { display:flex; gap:14px; align-items:flex-start; }
.contact__ic { width:44px; height:44px; border-radius:12px; background:var(--green-soft); display:grid; place-items:center; font-size:19px; flex:none; }
.contact__list b { font-size:15px; } .contact__list p { color:var(--muted); font-size:14.5px; }
.contact__form { background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:var(--shadow-sm); }
.contact__form h3 { font-size:19px; font-weight:800; margin-bottom:18px; }
.contact__note { text-align:center; font-size:12.5px; color:var(--muted); margin-top:12px; }
.map-embed { border:0; width:100%; height:300px; border-radius:16px; margin-top:26px; filter:grayscale(.15); }

/* Footer */
.footer { background:#101736; color:#c9cdd6; padding-top:50px; }
.footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; padding-bottom:36px; }
.footer__brand p { font-size:14px; margin:14px 0 16px; max-width:300px; color:#9aa0ad; }
.footer__social { display:flex; gap:10px; }
.footer__social a { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.06); transition:.2s; }
.footer__social svg { width:17px; height:17px; fill:#c9cdd6; }
.footer__social a:hover { background:var(--green); } .footer__social a:hover svg { fill:#fff; }
.footer__col h4 { color:#fff; font-size:15px; font-weight:700; margin-bottom:14px; }
.footer__col a, .footer__col span { display:block; color:#9aa0ad; font-size:14px; padding:5px 0; transition:.2s; }
.footer__col a:hover { color:var(--lime); }
.footer__pay { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:14px 0; border-top:1px solid rgba(255,255,255,.08); }
.footer__pay span { font-size:11px; font-weight:700; color:#9aa0ad; background:rgba(255,255,255,.06); padding:5px 12px; border-radius:6px; }
.footer__bottom { display:flex; align-items:center; justify-content:center; padding:20px; border-top:1px solid rgba(255,255,255,.08); font-size:13.5px; color:#7c818c; }

.fab { position:fixed; bottom:22px; inset-inline-end:22px; z-index:50; width:56px; height:56px; border-radius:50%; background:var(--wa); display:grid; place-items:center; box-shadow:0 12px 28px -8px rgba(37,211,102,.6); animation:pulse 2.4s infinite; }
.fab svg { width:30px; height:30px; fill:#fff; }
@keyframes pulse { 0%,100% { box-shadow:0 12px 28px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.4); } 50% { box-shadow:0 12px 28px -8px rgba(37,211,102,.6), 0 0 0 14px rgba(37,211,102,0); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px) {
  .head__search { max-width:280px; }
  .cats { grid-template-columns:repeat(2,1fr); }
  .features { grid-template-columns:repeat(2,1fr); }
  .offers { grid-template-columns:repeat(2,1fr); }
  .detail { grid-template-columns:1fr; }
  .detail__book { position:static; }
  .stats { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px) {
  .nav { display:none; } .burger { display:flex; }
  .head__search, .head__phone { display:none; }
  .contact, .about-grid { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns:1fr 1fr; }
  .detail__cols { grid-template-columns:1fr; }
  .band { padding:26px; }
}
@media (max-width:620px) {
  .section { padding:34px 0; }
  .hbar { grid-template-columns:1fr; }
  .periods, .steps, .reviews { grid-template-columns:1fr; }
  .features, .cats, .dspecs, .bk__grid, .bk__actions { grid-template-columns:1fr; }
  .head__icons { display:none; }
  .row__arrow { display:none; }
  .footer__grid { grid-template-columns:1fr; gap:24px; }
  .cta { padding:30px 26px; }
  .toolbar { flex-direction:column; align-items:stretch; }
  .toolbar__search { max-width:none; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }