
/* ==========================================================================
   VARIANT A — "თბილი და პირადი"
   Palette is taken from the landscape: paper + clay + saffron + vine.
   Single action colour (clay terracotta). Arch = the one signature shape.
   Radii: 8 controls / 12 cards / 16 search + panels.  One soft warm shadow.
   ========================================================================== */
/* Typeface taken from variant C: Noto Sans Georgian (variable 400-900) for everything; headings are weight 800. Metric-matched local fallback so the font swap does not reflow text */
@font-face{font-family:"Noto Sans Georgian Fallback";src:local("Segoe UI"),local("Roboto"),local("Arial");size-adjust:104%;ascent-override:102.8%;descent-override:28.2%;line-gap-override:0%}

:root{
  --paper:#FFFFFF;      /* page: white */
  --sand:#EEF1FF;       /* cool tint: alt band, tinted strips */
  --surface:#FFFFFF;
  --ink:#12100E;        /* C ink */
  --ink-2:#525873;      /* cool muted: 7.0:1 on white, 6.2:1 on tint */
  --ink-3:#646A84;      /* cool placeholder: 5.3:1 on white */
  --line:#E1E4F0;
  --line-2:#CBD0E3;
  --accent:#2233D6;     /* C cobalt: 7.3:1 on white */
  --accent-deep:#1824A0;
  --accent-tint:#E4E7FF;
  --sun:#FFD23F;
  --gold:#FFD23F;
  --vine:#0B6B4A;
  --vine-tint:#D8EFE6;
  --night:#0F1230;

  --serif:var(--sans); /* headings use the same family (variant C), weight 800 */
  --sans:'Noto Sans Georgian','Noto Sans Georgian Fallback','Segoe UI',system-ui,sans-serif;
  --field-line:#7A809B; /* cool input boundary: 3.9:1 on white */
  --err:#B3261E;        /* 6.5:1 on white */

  --r-ctl:8px; --r-card:12px; --r-lg:16px;
  --shadow-1:0 1px 2px rgba(14,16,48,.06),0 8px 20px -8px rgba(14,16,48,.18);
  --shadow-2:0 2px 4px rgba(14,16,48,.05),0 24px 48px -18px rgba(14,16,48,.32);
  --gutter:24px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.container{width:min(100% - var(--gutter)*2,1200px);margin-inline:auto}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-ctl);text-decoration:none;font-weight:800}
.skip:focus{top:12px}

.i{width:20px;height:20px;flex:none}
.i-sm{width:16px;height:16px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r-ctl);border:1px solid transparent;font:800 16px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-deep)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000}
.btn-ghost{background:transparent;color:var(--ink);border-color:transparent}
.btn-ghost:hover{background:var(--sand)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-line:hover{background:var(--sand)}

.link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:800;color:var(--accent);text-decoration:none;white-space:nowrap}
.link-arrow .i{transition:transform .15s var(--ease)}
.link-arrow:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:4px}
.link-arrow:hover .i{transform:translateX(3px)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;gap:16px;min-height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:800 21px/1 var(--serif);text-decoration:none;color:var(--ink);letter-spacing:-.01em}
.logo-mark{width:30px;height:34px;flex:none}
.logo-img{width:auto;max-width:72px;object-fit:contain}
.nav{display:flex;gap:2px;margin-inline:auto}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--r-ctl);font-weight:600;font-size:15px;text-decoration:none;color:var(--ink);transition:background-color .15s}
.nav a:hover{background:var(--sand)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:5px;height:2px;border-radius:2px;background:var(--accent)}
.hdr-right{display:flex;align-items:center;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 12px;justify-content:center;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:transparent;font:700 14px/1 var(--sans);cursor:pointer;transition:background-color .15s,border-color .15s}
.chip:hover{background:var(--sand);border-color:var(--ink-3)}
.hdr-right .sep{width:1px;height:24px;background:var(--line-2);margin:0 4px}
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:transparent;cursor:pointer}
.burger:hover{background:var(--sand)}
.burger .i-close{display:none}
.burger[aria-expanded="true"] .i-open{display:none}
.burger[aria-expanded="true"] .i-close{display:block}

.mnav{display:none;border-top:1px solid var(--line);background:var(--paper);max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow:auto;overscroll-behavior:contain}
.mnav-in{padding:8px 0 24px}
.mnav a.m-link{display:flex;align-items:center;justify-content:space-between;min-height:56px;font:800 19px/1.2 var(--serif);letter-spacing:-.015em;text-decoration:none;border-bottom:1px solid var(--line)}
.mnav a.m-link[aria-current="page"]{color:var(--accent)}
.mnav-auth{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mnav-auth .btn{min-height:52px}

/* ==========================================================================
   HERO + SEARCH  (the search is the primary object on the page)
   ========================================================================== */
.hero{padding:24px 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:1fr auto auto auto minmax(64px,1fr);column-gap:64px}
.eyebrow{grid-column:1;grid-row:2;display:flex;align-items:center;gap:10px;margin-bottom:16px;font:800 15px/1.4 var(--serif);color:var(--accent);letter-spacing:-.015em}
.eyebrow svg{width:14px;height:16px;flex:none}
.hero h1{grid-column:1;grid-row:3;font:800 clamp(2.125rem,1rem + 3.6vw,3.75rem)/1.16 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.hero h1 .mark{background:linear-gradient(transparent 64%,rgba(255,210,63,.95) 64%,rgba(255,210,63,.95) 90%,transparent 90%);padding:0 .06em;margin:0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero h1 .h1a{display:block}                       /* the first part of the heading is a line of its own, the yellow part starts the next one (any language, any text) */
.hero-lead{grid-column:1;grid-row:4;margin-top:20px;max-width:34em;font-size:18px;line-height:1.7;color:var(--ink-2)}
.arch{--ar:34px;grid-column:2;grid-row:1/6;justify-self:end;position:relative;width:100%;max-width:380px;aspect-ratio:440/500;align-self:start}
/* the soft tile: a rounded picture with a yellow tile peeking out at its top-left; the lower part of the picture is under the search card */
.arch::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border-radius:var(--ar);background:var(--sun);opacity:.95}
.arch-clip{position:absolute;inset:0;border-radius:var(--ar);overflow:hidden;background:#C9CEFF;box-shadow:0 26px 46px -26px rgba(14,16,48,.55)}
.arch-clip svg{width:100%;height:100%}
.arch-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arch-pic.is-hotels{opacity:0;transition:opacity .4s}
.hero[data-mode="hotels"] .arch-pic.is-hotels{opacity:1}
.hero [data-ht]{transition:opacity .17s}
.hero [data-ht].is-fade{opacity:0}

.search{position:relative;z-index:3;margin-top:-64px}
.search-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
.search-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:24px}
.tab{display:inline-flex;align-items:center;gap:10px;min-height:60px;padding:0 4px;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:none;font:800 16px/1 var(--sans);color:var(--ink-2);cursor:pointer;transition:color .15s,border-color .15s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tab[aria-selected="true"] .i{color:var(--accent)}
.tab:focus-visible{outline-offset:-3px}

.seg{display:inline-flex;gap:2px;margin:0;padding:3px;border:0;background:var(--sand);border-radius:10px}
.seg label{position:relative;display:block}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:7px;font:700 14px/1 var(--sans);color:var(--ink-2);white-space:nowrap;transition:background-color .15s,color .15s,box-shadow .15s}
.seg input:checked + span{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(14,16,48,.18)}
.seg input:focus-visible + span{outline:3px solid var(--accent);outline-offset:1px}
.seg label:hover input:not(:checked) + span{color:var(--ink)}

.panel-body{padding:20px}
.bar{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.25fr) minmax(0,1fr) auto;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r-card);overflow:hidden}
.bar-hotels{grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr) minmax(0,.95fr) minmax(0,1.5fr) auto}
.field{position:relative;display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:68px;padding:10px 16px 10px 50px;background:#fff;border-radius:0;transition:background-color .15s}
.field:hover{background:#F4F5FF}
.field:focus-within{outline:2px solid var(--accent);outline-offset:-2px;background:#fff;z-index:1}
.field > .i{position:absolute;left:18px;top:50%;margin-top:-10px;color:var(--accent)}
.field label{font:700 13px/1.3 var(--sans);color:var(--ink-2);letter-spacing:.02em}
.field input,.field select{width:100%;min-width:0;padding:0;border:0;background:transparent;font:700 17px/1.4 var(--sans);color:var(--ink);text-overflow:ellipsis;outline:none}
.field input::placeholder{color:var(--ink-3);opacity:1;font-weight:500}
.field input[readonly]{cursor:pointer}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:24px}
.field .chev{position:absolute;right:16px;top:50%;margin-top:-8px;pointer-events:none;color:var(--ink-2)}
.field-from{padding-right:64px}
.swap{position:absolute;right:10px;top:50%;margin-top:-22px;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--ink-2);cursor:pointer;border-radius:50%}
.swap > span{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line-2);border-radius:50%;background:#fff;transition:background-color .15s,border-color .15s,color .15s,transform .2s var(--ease)}
.swap:hover > span{background:var(--accent-tint);border-color:var(--accent);color:var(--accent)}
.swap:active > span{transform:rotate(180deg)}

.submit-cell{display:flex;background:#fff;padding:6px}
.submit{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:168px;width:100%;min-height:56px;padding:0 24px;border:0;border-radius:var(--r-ctl);background:var(--accent);color:#fff;font:900 18px/1 var(--sans);cursor:pointer;transition:background-color .15s,transform .1s,box-shadow .15s}
.submit:hover{background:var(--accent-deep);box-shadow:0 8px 18px -8px rgba(24,36,160,.6)}
.submit:active{transform:translateY(1px)}
.submit .i{width:21px;height:21px}
.submit:focus-visible{outline-offset:2px}

/* extra stops live inside the bar, between from and to */
.bar-transfer > .field-from{grid-area:1/1}
.bar-transfer > .field-to{grid-area:1/2}
.bar-transfer > .field-date{grid-area:1/3}
.bar-transfer > .submit-cell{grid-area:1/4}
.bar-transfer > .stops{grid-area:2/1/3/-1}
.stops{display:grid;gap:1px;background:var(--line-2)}
.stops:empty{display:none}
.stop{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 6px 0 18px;background:#fff}
.stop:focus-within{outline:2px solid var(--accent);outline-offset:-2px;z-index:1}
.stop > .i{color:var(--vine)}
.stop input{flex:1;min-width:0;min-height:44px;border:0;background:transparent;font:700 17px/1.4 var(--sans);outline:none}
.stop input::placeholder{color:var(--ink-3);font-weight:500}
.stop-x{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:var(--r-ctl);color:var(--ink-2);cursor:pointer}
.stop-x:hover{background:var(--sand);color:var(--ink)}

.search-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 28px;padding:4px 20px;background:#F4F6FF;border-top:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg)}
.add-stop{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 4px;border:0;background:none;color:var(--accent);font:800 15px/1 var(--sans);cursor:pointer}
.add-stop .plus{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid currentColor;transition:background-color .15s,color .15s}
.add-stop:hover{color:var(--accent-deep)}
.add-stop:hover .plus{background:var(--accent);border-color:var(--accent);color:#fff}
.add-stop[aria-disabled="true"]{color:var(--ink-3);cursor:not-allowed}
.add-stop[aria-disabled="true"]:hover .plus{background:none;color:inherit;border-color:currentColor}
.foot-hint{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-size:14px;color:var(--ink-2)}
.assure{display:flex;flex-wrap:wrap;gap:0 22px;font-family:var(--serif);font-weight:800;font-size:14px;letter-spacing:-.015em;color:var(--ink-2)}
.assure li{display:inline-flex;align-items:center;gap:7px;min-height:32px}
.assure .i{color:var(--vine);width:16px;height:16px}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{padding:80px 0 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.sec-head h2,.h2{font:800 clamp(1.625rem,1.1rem + 1.6vw,2.25rem)/1.22 var(--serif);letter-spacing:-.015em}
#h-drivers{font-family:var(--serif);font-weight:800;letter-spacing:-.015em;line-height:1.16}   /* same face as #hero-title; size unchanged */
.sec-head p{margin-top:8px;max-width:58ch;color:var(--ink-2)}
.head-tools{display:flex;align-items:center;gap:8px}
.arrow-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,opacity .15s}
.arrow-btn:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff}
.arrow-btn:disabled{opacity:.35;cursor:default}

/* ---------- top drivers ---------- */
.track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 4px 28px;margin:-4px -4px -28px;overscroll-behavior-x:contain;scroll-padding-inline:4px}
.track::-webkit-scrollbar{display:none}
.d-card{position:relative;flex:0 0 calc((100% - 60px)/4);min-width:250px;scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.d-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-1);border-color:var(--line-2)}
.d-card:focus-visible{outline-offset:2px;border-radius:var(--r-card)}
.d-art{position:relative;height:150px;overflow:visible}
.d-art svg{width:100%;height:100%}
.d-avatar{position:absolute;left:16px;bottom:-24px;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--paper);border:3px solid #fff;font:800 15px/1 var(--serif);color:var(--accent);letter-spacing:.02em;box-shadow:0 1px 3px rgba(14,16,48,.20)}
.d-body{display:flex;flex-direction:column;gap:2px;padding:36px 16px 16px;flex:1}
.d-name{display:flex;align-items:center;justify-content:space-between;gap:8px}
.d-name h3{font:800 19px/1.3 var(--serif);letter-spacing:-.015em}
.d-verified{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 6px;border-radius:99px;background:var(--vine-tint);color:var(--vine);font:700 12px/1.5 var(--sans);white-space:nowrap}
.d-meta{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-size:15px}
.d-meta .star{width:16px;height:16px;color:var(--sun)}
.d-meta b{color:var(--ink);font-weight:800}
.d-meta .dot{color:var(--ink-3)}
.d-price{display:flex;align-items:baseline;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.d-price b{font:800 20px/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.d-price b small{font:700 14px var(--sans);letter-spacing:0;color:var(--ink-2)}

/* ---------- popular tours ---------- */
.tours{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tours-lg,.tours-sm{display:grid;gap:16px}
.tours-lg{grid-template-rows:1fr 1fr}
.tours-sm{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.tour{position:relative;display:block;min-height:clamp(230px,19vw,284px);border-radius:var(--r-card);overflow:hidden;isolation:isolate;color:#fff;text-decoration:none;background:#28317F}
.tour .art{position:absolute;inset:0;width:100%;height:100%;z-index:-2;transition:transform .2s var(--ease)}
.tour::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,12,40,.84) 0%,rgba(10,12,40,.74) 12%,rgba(10,12,40,.57) 24%,rgba(10,12,40,.37) 37%,rgba(10,12,40,.19) 50%,rgba(10,12,40,.07) 63%,rgba(10,12,40,0) 76%)}
.tour:hover .art{transform:scale(1.04)}
.tour:focus-visible{outline-offset:3px;border-radius:var(--r-card)}
.tour-body{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:18px 20px}
.tour h3{font:800 19px/1.25 var(--serif);letter-spacing:-.015em;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.tour-lg h3{font-size:clamp(1.5rem,1.1rem + 1vw,1.875rem)}
.tour p{margin-top:2px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.92)}
.tour .go{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;transition:background-color .15s,color .15s,transform .15s var(--ease)}
.tour:hover .go{background:#fff;color:var(--ink);transform:translateX(2px)}

/* ---------- how it works + trust (one sand band) ---------- */
.band{margin-top:96px;padding:80px 0;background:var(--sand);border-block:1px solid var(--line)}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;counter-reset:s}
.steps::before{content:"";position:absolute;left:66px;right:calc(33.333% - 30px);top:29px;border-top:2px dashed var(--line-2);z-index:0}
.step{position:relative;z-index:1}
.num{display:grid;place-items:center;width:58px;height:58px;margin-bottom:22px;border-radius:18px;background:var(--surface);border:2px solid var(--accent);font:800 25px/1 var(--serif);color:var(--accent);box-shadow:-6px -6px 0 var(--sun)}
.step h3{font:800 24px/1.3 var(--serif);letter-spacing:-.015em;margin-bottom:8px}
.step p{max-width:32ch;color:var(--ink-2);font-size:17px}
.trust{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;margin-top:80px;padding-top:72px;border-top:1px solid var(--line-2)}
.trust-intro p{margin-top:14px;max-width:38ch;color:var(--ink-2);font-size:17px}
.trust-list li{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line-2)}
.trust-list li:first-child{padding-top:0}
.trust-list li:last-child{border-bottom:0;padding-bottom:0}
.t-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--vine-tint);color:var(--vine)}
.t-ico .i{width:24px;height:24px}
.trust-list h3{font:800 18px/1.35 var(--sans);letter-spacing:-.015em;margin-bottom:2px}
.trust-list p{color:var(--ink-2)}

/* ---------- blog ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.post{display:block;text-decoration:none;color:inherit}
.post-thumb{position:relative;aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;background:var(--sand)}
.post-thumb svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .2s var(--ease)}
.post:hover .post-thumb svg{transform:scale(1.04)}
.post-tag{display:inline-block;margin:18px 0 6px;font:700 13px/1.4 var(--sans);letter-spacing:.02em;color:var(--accent)}
.post h3{font:800 20px/1.4 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.post:hover h3{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.post p{margin-top:8px;color:var(--ink-2);font-size:15px;line-height:1.65}
.post:focus-visible{outline-offset:6px}

/* ---------- driver CTA ---------- */
.cta{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);overflow:hidden;border-radius:var(--r-lg);background:var(--gold)}
.cta-copy{padding:56px 56px 56px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px}
.cta-copy p{max-width:36ch;color:#2E2C28;font-size:17px;margin-bottom:12px}
.cta-art{position:relative;min-height:240px}
.cta-art svg{position:absolute;inset:0;width:100%;height:100%}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{margin-top:96px;background:var(--night);color:#E8EAF6}
.footer :focus-visible{outline-color:var(--sun)}
.f-grid{display:grid;grid-template-columns:1.35fr .9fr 1.35fr 1.1fr;gap:48px;padding:64px 0 48px}
.f-brand .logo{color:#fff;margin-bottom:12px}
.f-brand p{max-width:32ch;color:#B9BDD8;font-size:15px}
.f-social{display:flex;gap:8px;margin-top:20px}
.f-social a{display:grid;place-items:center;width:44px;height:44px;border:1px solid #4B5189;border-radius:var(--r-ctl);color:#E8EAF6;transition:background-color .15s,border-color .15s,color .15s}
.f-social a:hover{background:var(--sun);border-color:var(--sun);color:var(--night)}
.f-col h3{font:700 14px/1.4 var(--sans);color:#fff;margin-bottom:10px;letter-spacing:.04em}
.f-col a,.f-col .f-line{display:flex;align-items:center;gap:10px;min-height:36px;color:#D3D6EA;text-decoration:none;font-size:15px}
.f-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.f-col .i{color:var(--sun);width:18px;height:18px}
.f-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding:10px 0 20px;border-top:1px solid #262B58;font-size:14px;color:#A5AAC9}
.f-legal{display:flex;flex-wrap:wrap;gap:0 20px}
.f-legal a{display:inline-flex;align-items:center;min-height:44px;color:#D3D6EA;text-decoration:none}
.f-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* ---------- RC-02 additions (override earlier base rules) ---------- */
.hero h1{min-height:2.32em}                       /* reserve text block: no reflow on font swap */
.hero-lead{min-height:3.4em}
.bar{background:var(--field-line);border-color:var(--field-line)}
.swap > span{border-color:var(--field-line)}
.stops{display:contents}                           /* stop rows become cells of the bar, in DOM order from -> stops -> to */
.stop{min-height:68px}
.assure{margin-left:auto}
.f-col a,.f-col .f-line{min-height:44px}
.d-li{flex:0 0 calc((100% - 60px)/4);min-width:250px;scroll-snap-align:start;display:flex}
.d-card{flex:1 1 auto;min-width:0}
.sec-badge{margin-top:12px}
.arrow-btn[aria-disabled="true"]{opacity:.35;cursor:default}
.arrow-btn[aria-disabled="true"]:hover{background:#fff;border-color:var(--line-2);color:var(--ink)}
.field.is-invalid{background:#FFF6F3;box-shadow:inset 0 0 0 2px var(--err)}
.f-err{margin:3px 0 0;font:700 12.5px/1.35 var(--sans);color:var(--err)}
.form-error{margin:0 0 12px;padding:10px 14px;border-radius:var(--r-ctl);background:#FDECE8;color:var(--err);font:700 14px/1.5 var(--sans)}

/* ---------- RC-03 ---------- */
.bar{background:#fff;gap:0}                         /* no gap colour: dividers are hairlines drawn on the cells */
.bar > .field,.bar > .submit-cell,.bar .stop{box-shadow:-1px 0 0 var(--field-line),0 -1px 0 var(--field-line)}
.field.is-invalid{box-shadow:inset 0 0 0 2px var(--err),-1px 0 0 var(--field-line),0 -1px 0 var(--field-line)}
.bar > *,.bar .stop{min-width:0}                    /* grid items may shrink: nothing gets clipped by the bar */
.stop input{width:100%;min-width:0}
.tour::after{background:linear-gradient(to top,rgba(10,12,40,.9) 0%,rgba(10,12,40,.84) 12%,rgba(10,12,40,.7) 26%,rgba(10,12,40,.46) 40%,rgba(10,12,40,.22) 54%,rgba(10,12,40,.07) 66%,rgba(10,12,40,0) 78%)}
.tour h3{text-shadow:0 1px 3px rgba(0,0,0,.5)}
.pop-wrap{position:relative;display:inline-flex}
.pop{position:absolute;top:calc(100% + 6px);right:0;z-index:80;min-width:170px;padding:6px;background:#fff;border:1px solid var(--field-line);border-radius:var(--r-card);box-shadow:var(--shadow-1)}
.pop button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-ctl);background:none;font:700 15px/1 var(--sans);text-align:left;cursor:pointer}
.pop button:hover{background:var(--sand)}
.pop button[aria-checked="true"]{font-weight:800}
.pop button[aria-checked="true"]::after{content:"✓";color:var(--accent)}
@media (min-width:1024px) and (max-width:1199px){
  /* hotels: 2 deliberate rows, no empty cells: [destination 2][in][out] / [guests 2][search 2] */
  .bar-hotels{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bar-hotels > .field-dest,.bar-hotels > .field:nth-child(4){grid-column:1/3}
  .bar-hotels > .submit-cell{grid-column:3/5}
}

/* ---------- RC-04 ---------- */
/* every cell is positioned, so cells paint in tree order and a neighbour's white background no longer hides the hairline divider */
.bar > .field,.bar > .submit-cell,.bar .stop{position:relative}
/* in the mobile menu the chip list opens in flow (never clipped by the scrolling menu, never covers "შესვლა") */
@media (max-width:359px){
  .tour::after{background:linear-gradient(to top,rgba(10,12,40,.93) 0%,rgba(10,12,40,.89) 20%,rgba(10,12,40,.8) 38%,rgba(10,12,40,.62) 54%,rgba(10,12,40,.3) 70%,rgba(10,12,40,0) 88%)}
  .tour h3{text-shadow:0 1px 4px rgba(0,0,0,.7)}
  .tour p{font-size:14px}
}
@media (min-width:1024px){
  /* with stops: row 1 = from + stops, row 2 = to + date + search (reads left-to-right, top-to-bottom = DOM order) */
  .bar-transfer:not([data-stops="0"]){grid-template-columns:repeat(12,minmax(0,1fr))}
  .bar-transfer:not([data-stops="0"]) > .field-to{grid-area:2/1/3/6}
  .bar-transfer:not([data-stops="0"]) > .field-date{grid-area:2/6/3/10}
  .bar-transfer:not([data-stops="0"]) > .submit-cell{grid-area:2/10/3/13}
  .bar-transfer[data-stops="1"] > .field-from{grid-area:1/1/2/7}
  .bar-transfer[data-stops="2"] > .field-from{grid-area:1/1/2/5}
  .bar-transfer[data-stops="3"] > .field-from{grid-area:1/1/2/4}
  .bar-transfer[data-stops="1"] .stop{grid-row:1;grid-column:span 6}
  .bar-transfer[data-stops="2"] .stop{grid-row:1;grid-column:span 4}
  .bar-transfer[data-stops="3"] .stop{grid-row:1;grid-column:span 3}
}

@media (max-width:1279px){
  .nav,.hdr-right .hide-md{display:none}
  .burger{display:inline-flex}
  .hdr{min-height:64px}
  .hdr-right{margin-left:auto}
  /* the menu is an overlay under the header bar: it covers the page instead of pushing it down, opens at once and slides up (0.5 s) when it closes */
  .site-header::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:var(--paper);z-index:1}
  .hdr{position:relative;z-index:2}
  .mnav{display:block;position:absolute;left:0;right:0;top:100%;z-index:0;visibility:hidden;opacity:0;transform:translateY(-100%);pointer-events:none;box-shadow:0 18px 28px -18px rgba(15,18,48,.28);transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .3s linear .2s,visibility 0s linear .5s}
  .mnav.open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:none}
}


@media (max-width:1199px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 380px;column-gap:48px}
  .arch{max-width:380px}
  .d-li{flex-basis:calc((100% - 40px)/3)}
  .bar-transfer{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr) auto}
}

@media (max-width:1023px){
  :root{--gutter:28px}
  .hero{padding-top:28px}
  .hero-grid{grid-template-columns:minmax(0,1fr) 260px;column-gap:32px;grid-template-rows:1fr auto auto auto minmax(72px,1fr)}
  .arch{max-width:260px;--ar:28px}
  .hero-lead{font-size:17px}
  .search{margin-top:-48px}
  .bar,.bar-hotels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bar-transfer > .field-date{grid-area:2/1}
  .bar-transfer > .submit-cell{grid-area:2/2}
  /* with stops the route stacks full-width: from, stops, to, then date + search */
  .bar-transfer:not([data-stops="0"]) > *{grid-area:auto}
  .bar-transfer:not([data-stops="0"]) > .field-from,
  .bar-transfer:not([data-stops="0"]) > .field-to,
  .bar-transfer:not([data-stops="0"]) .stop{grid-column:1/-1}
  .bar-transfer:not([data-stops="0"]) > .field-date{grid-column:1}
  .bar-transfer:not([data-stops="0"]) > .submit-cell{grid-column:2}
  .bar-hotels > .field-dest{grid-column:1/3}
  .bar-hotels > .submit-cell{grid-column:2/3}
  .sec{padding-top:64px}
  .d-li{flex-basis:calc((100% - 20px)/2.4)}
  .tours{grid-template-columns:1fr;gap:16px}
  .tours-lg{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .tours-sm{grid-template-columns:repeat(4,1fr);grid-template-rows:auto}
  .tours-lg .tour{min-height:260px}
  .tours-sm .tour{min-height:210px}
  .tours-sm .tour h3{font-size:17px}
  .tours-sm .tour-body{padding:14px 14px}
  .tours-sm .go{display:none}
  .band{margin-top:72px;padding:64px 0}
  .steps{gap:28px}
  .steps::before{left:48px;right:calc(33.333% - 20px)}
  .trust{grid-template-columns:1fr;gap:32px;margin-top:64px;padding-top:56px}
  .posts{gap:24px}
  .post h3{font-size:18px}
  .cta-copy{padding:44px 36px}
  .f-grid{grid-template-columns:.9fr 1.4fr 1.1fr;gap:36px 28px;padding:56px 0 32px}
  .f-brand{grid-column:1/-1}
}

/* search header stacks (tabs full width, mode switch below) before it can overflow the card */
@media (max-width:859px){
  .search-head{flex-direction:column;align-items:stretch;gap:0;padding:0;border-bottom:0}
  .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;box-shadow:inset 0 -1px 0 var(--line)}
  .tab{justify-content:center;gap:8px;min-height:56px;padding:0 4px;font-size:15px;min-width:0}
  .seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:14px 16px 0}
  .seg span{justify-content:center;text-align:center;white-space:normal;line-height:1.25;padding:0 8px;font-size:14px}
}

@media (max-width:699px){
  :root{--gutter:20px}
  .hero h1{min-height:3.6em}
  .hero-lead{min-height:0}
  body{font-size:16px}
  .hdr{gap:8px}
  .hdr-right{gap:6px}
  .hdr-right .chip{padding:0 8px;gap:0}
  .hdr-right .chip .i{display:none}
  .hdr > .logo{font-size:clamp(15px,4.7vw,21px)}
  .hero{padding-top:20px}
  .hero-grid{grid-template-columns:minmax(0,1fr) 108px;grid-template-rows:auto auto;column-gap:16px;align-items:start}
  .eyebrow{display:none}
  .hero h1{grid-row:1;align-self:center;font-size:clamp(1.75rem,7.6vw,2.25rem);line-height:1.2}
  .arch{grid-column:2;grid-row:1;max-width:108px;--ar:18px}
  .arch::before{inset:-7px 7px 7px -7px}
  .hero-lead{grid-column:1/-1;grid-row:2;margin-top:14px;font-size:16px;line-height:1.6}
  .hero-lead .hide-sm{display:none}
  .search{margin-top:20px}
  .search-card{border-radius:14px}
  .assure .opt{display:none}
  .panel-body{padding:14px 16px 16px}
  .bar,.bar-hotels{grid-template-columns:minmax(0,1fr)}
  .bar > *{grid-column:auto!important}
  .bar-transfer > .field-from,.bar-transfer > .field-to,.bar-transfer > .field-date,.bar-transfer > .submit-cell,.bar-transfer .stop{grid-area:auto}
  .field{min-height:64px}
  .field-from{padding-right:64px}
  .swap > span{transform:rotate(90deg)}
  .swap:active > span{transform:rotate(270deg)}
  .submit-cell{padding:8px}
  .submit{min-height:56px}
  .search-foot{padding:2px 16px 8px;flex-direction:column;align-items:flex-start;gap:0}
  .assure{gap:0 14px;font-size:13.5px;margin-left:0}
  .assure li{min-height:28px}
  .sec{padding-top:56px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:0;margin-bottom:22px}
  .sec-head p{font-size:15px}
  .sec-head .link-arrow{margin-top:2px}
  .head-tools.arrows{display:none}
  .track{margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .d-li{flex-basis:76%;min-width:0}
  .tours-lg{grid-template-columns:1fr}
  .tours-lg .tour{min-height:208px}
  .tour .go{display:none}
  .tours-sm{grid-template-columns:1fr 1fr;gap:12px}
  .tours-sm .tour{min-height:164px}
  .tours-sm .tour h3{font-size:16px}
  .tours{gap:12px}
  .band{margin-top:56px;padding:52px 0}
  .steps{grid-template-columns:1fr;gap:0}
  .steps::before{left:25px;right:auto;top:26px;bottom:64px;width:0;border-top:0;border-left:2px dashed var(--line-2)}
  .step{display:grid;grid-template-columns:52px 1fr;column-gap:18px;padding-bottom:28px}
  .step:last-child{padding-bottom:0}
  .num{grid-row:1/3;margin:0;width:52px;height:52px;border-radius:16px;box-shadow:-5px -5px 0 var(--sun)}
  .step h3{font-size:20px;margin:2px 0 4px}
  .step p{max-width:none}
  .trust{margin-top:52px;padding-top:44px;gap:24px}
  .trust-list li{grid-template-columns:44px 1fr;gap:14px}
  .t-ico{width:44px;height:44px}
  .posts{grid-template-columns:1fr;gap:0}
  .post{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
  .post:first-child{padding-top:0}
  .post:last-child{border-bottom:0;padding-bottom:0}
  .post-thumb{grid-column:1;grid-row:1/3;aspect-ratio:4/3;border-radius:10px}
  .post-tag{grid-column:2;grid-row:1;margin:0 0 2px;font-size:12.5px}
  .post h3{grid-column:2;grid-row:2;font-size:17px;line-height:1.4}
  .post p{display:none}
  .cta{grid-template-columns:1fr}
  .cta-art{order:-1;min-height:132px}
  .cta-copy{padding:28px 18px 24px}
  .cta-copy .btn{width:100%;padding:0 12px;gap:8px;font-size:15px}
  .footer{margin-top:64px}
  .f-grid{grid-template-columns:1fr;gap:28px;padding:44px 0 20px}
  .f-brand{grid-column:auto}
  .f-col a,.f-col .f-line{min-height:44px}
  .f-links{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .f-links h3{grid-column:1/-1}
  .f-bottom{flex-direction:column;align-items:flex-start;gap:0;padding-bottom:16px}
  .f-bottom > span:first-child{padding:10px 0 0}
}

@media (max-width:389px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 92px}
  .arch{max-width:92px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .d-card:hover,.tour:hover .art,.post:hover .post-thumb svg{transform:none}
  .mnav{transition:none!important}
}

/* ---------- white page; the search card itself is cobalt inside, fields stay white, action is yellow ---------- */
.d-avatar{background:var(--accent-tint)}           /* white-on-white would vanish now that the page is white */
.search-card{background:#4a74e0;border-color:transparent}
.search-head{border-bottom-color:rgba(255,255,255,.22)}
.tab{color:#E4E7FF}
.tab:hover{color:#fff}
.tab[aria-selected="true"]{color:#fff;border-bottom-color:var(--sun)}
.tab[aria-selected="true"] .i{color:var(--sun)}
.search-head :focus-visible,.search-foot :focus-visible{outline-color:var(--sun)}   /* cobalt rings would vanish on the cobalt card */
.seg{background:rgba(255,255,255,.16)}
.seg span{color:#fff}
.seg label:hover input:not(:checked) + span{color:#fff;background:rgba(255,255,255,.12)}
.seg input:focus-visible + span{outline-color:var(--sun)}
.submit-cell{background:#FFC349;padding:0}      /* the whole end of the bar is the yellow action */
.submit{border-radius:0;background:transparent;color:#3d3d3d;box-shadow:none}
.submit:hover{background:#FFCE6B;box-shadow:none}
.submit:focus-visible{outline:3px solid var(--ink);outline-offset:-6px}
.search-foot{background:#3a5db9;border-top-color:rgba(255,255,255,.18)}
.foot-hint,.assure{color:#E4E7FF}
.assure .i,.foot-hint .i{color:var(--sun)!important}   /* !important: the hotels hint carries an inline colour */
.add-stop{color:var(--sun)}
.add-stop:hover{color:#fff}
.add-stop:hover .plus{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.add-stop[aria-disabled="true"],.add-stop[aria-disabled="true"]:hover{color:#B8BEF3}
.add-stop[aria-disabled="true"]:hover .plus{background:none;border-color:currentColor;color:inherit}
@media (max-width:859px){
  .tabs{box-shadow:inset 0 -1px 0 rgba(255,255,255,.22)}
}

/* ---------- route order: from, to, then the extra stops (like the live site) ---------- */
/* with stops: row 1 = from + to, row 2 = the stops (equal columns), row 3 = date + search */
@media (min-width:1024px){
  .bar-transfer:not([data-stops="0"]) > .field-from{grid-area:1/1/2/7}
  .bar-transfer:not([data-stops="0"]) > .field-to{grid-area:1/7/2/13}
  .bar-transfer:not([data-stops="0"]) > .field-date{grid-area:3/1/4/9}
  .bar-transfer:not([data-stops="0"]) > .submit-cell{grid-area:3/9/4/13}
  .bar-transfer[data-stops="1"] .stop{grid-row:2;grid-column:span 12}
  .bar-transfer[data-stops="2"] .stop{grid-row:2;grid-column:span 6}
  .bar-transfer[data-stops="3"] .stop{grid-row:2;grid-column:span 4}
}
@keyframes route-flash{0%,35%{background:#FFE9A3}100%{background:var(--surface)}}
.is-pulse{animation:route-flash .7s ease-out}        /* "fill the earlier fields first": the empty one flashes */

/* ---------- city suggestions (opens under the field; lives on the card because the bar clips overflow) ---------- */
.search-card{position:relative}
.ac-panel{position:absolute;z-index:90;max-height:300px;overflow-y:auto;padding:6px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-card);box-shadow:var(--shadow-1);color:var(--ink)}
.ac-panel[hidden]{display:none}
.ac-option{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:var(--r-ctl);font:700 16px/1.3 var(--sans);cursor:pointer}
.ac-option .i{color:var(--accent);flex:none}
.ac-option:hover,.ac-option.is-active{background:var(--accent-tint)}
.ac-option.is-active{box-shadow:inset 3px 0 0 var(--accent)}

/* ---------- calendar: our own picker (popover under the field; bottom sheet on phones) ---------- */
.cal-panel{position:absolute;z-index:50;width:max-content;max-width:calc(100vw - 16px);padding:16px;background:#fff;color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-2);outline:0;animation:cal-in .16s var(--ease)}
.cal-panel[hidden],.cal-backdrop[hidden]{display:none}
@keyframes cal-in{from{opacity:0;transform:translateY(-6px)}}
@keyframes cal-up{from{transform:translateY(100%)}}
@keyframes cal-fade{from{opacity:0}}
html.cal-lock{overflow:hidden}
.cal-backdrop{position:fixed;inset:0;z-index:94;background:rgba(15,18,48,.55);animation:cal-fade .2s ease-out}
.cal-sheet-head{display:none}

.cal-months{display:flex;gap:32px}
.cal-month{width:336px}
.cal-mh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;margin-bottom:8px}
.cal-title{flex:1;min-width:0;font:800 17px/1.3 var(--sans);letter-spacing:-.015em;text-align:center}
.cal-sp{width:40px;height:40px;flex:none}
.cal-nav{display:grid;place-items:center;width:40px;height:40px;flex:none;padding:0;border:1px solid var(--line-2);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.cal-nav:hover{background:var(--accent-tint);border-color:var(--accent);color:var(--accent)}
.cal-nav[aria-disabled="true"]{opacity:.35;cursor:default}
.cal-nav[aria-disabled="true"]:hover{background:#fff;border-color:var(--line-2);color:var(--ink)}
.cal-nav:focus-visible,.cal-day:focus-visible,.cal-chip:focus-visible,.cal-clear:focus-visible,.cal-pill:focus-visible,.cal-x:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.cal-grid{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.cal-grid th{height:32px;padding:0;font:800 12px/1 var(--sans);color:var(--ink-2);text-align:center}
.cal-grid td{height:44px;padding:0;text-align:center}
.cal-day{position:relative;display:block;width:44px;height:44px;margin:0 auto;padding:0;border:0;border-radius:50%;background:transparent;font:700 15px/44px var(--sans);color:var(--ink);cursor:pointer;transition:background-color .12s,color .12s}
.cal-day:hover:not(:disabled){background:var(--accent-tint)}
.cal-day:disabled{color:#8A90AB;font-weight:500;cursor:default}
.cal-day[aria-current="date"]{font-weight:900}
.cal-day[aria-current="date"]::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent)}
.is-sel .cal-day,.is-sel .cal-day:hover{background:var(--accent);color:#fff;font-weight:800}
.is-sel .cal-day[aria-current="date"]::after{background:var(--sun)}
.is-preview .cal-day{box-shadow:inset 0 0 0 2px var(--accent);background:#fff}

/* stay range: a continuous light band between check-in and check-out */
.cal-grid td.is-in{background:var(--accent-tint)}
.cal-grid td.is-start{background:linear-gradient(90deg,transparent 50%,var(--accent-tint) 50%)}
.cal-grid td.is-end{background:linear-gradient(270deg,transparent 50%,var(--accent-tint) 50%)}
.cal-grid td.is-in:first-child,.cal-grid td.is-in.is-mfirst,.cal-grid td.is-end:first-child,.cal-grid td.is-end.is-mfirst{border-radius:22px 0 0 22px}
.cal-grid td.is-in:last-child,.cal-grid td.is-in.is-mlast,.cal-grid td.is-start:last-child,.cal-grid td.is-start.is-mlast{border-radius:0 22px 22px 0}
.cal-grid td.is-in:first-child.is-mlast,.cal-grid td.is-in.is-mfirst:last-child{border-radius:22px}

.cal-pills{display:flex;gap:8px;margin-bottom:12px}
.cal-pill{flex:1;min-width:0;display:grid;gap:2px;padding:8px 12px;text-align:left;border:1.5px solid var(--line-2);border-radius:var(--r-card);background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.cal-pill span{font:700 12px/1.2 var(--sans);color:var(--ink-2)}
.cal-pill b{overflow:hidden;font:800 15px/1.3 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.cal-pill.is-empty b{font-weight:500;color:var(--ink-3)}
.cal-pill.is-active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}

.cal-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.cal-chips{display:flex;flex-wrap:wrap;gap:6px}
.cal-chip{min-height:40px;padding:0 12px;border:1.5px solid var(--line-2);border-radius:999px;background:#fff;font:800 14px/1 var(--sans);color:var(--ink);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.field.is-open{outline:2px solid var(--accent);outline-offset:-2px;background:#fff;z-index:1}
.cal-chip:hover{background:var(--accent-tint);border-color:var(--accent)}
.cal-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.cal-clear{min-height:40px;margin-left:auto;padding:0 6px;border:0;border-radius:var(--r-ctl);background:none;font:800 14px/1 var(--sans);color:var(--accent);cursor:pointer}
.cal-clear:hover{text-decoration:underline}
.cal-clear[aria-disabled="true"],.cal-clear[aria-disabled="true"]:hover{color:var(--ink-3);cursor:default;text-decoration:none}
.cal-status{font:700 14px/1.4 var(--sans);color:var(--ink-2)}
.cal-status.is-done{font-weight:900;color:var(--accent)}

/* time of day (intracity transfer): hour + minute columns next to the calendar; on phones a second step */
.cal-wrap{display:flex;align-items:stretch;gap:20px}
.cal-left{min-width:0}
.cal-time,.cal-next{display:none}
.cal-panel.is-timed .cal-time{display:flex;flex-direction:column;width:168px;flex:none;padding-left:20px;border-left:1px solid var(--line)}
.cal-time-cols{display:flex;flex:1 1 0;min-height:0;gap:8px}
.cal-col{display:flex;flex:1;flex-direction:column;min-width:0}
.cal-col-h{display:flex;align-items:center;justify-content:center;height:32px;font:800 12px/1 var(--sans);color:var(--ink-2)}
.cal-list{position:relative;flex:1 1 0;min-height:0;padding:4px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.cal-opt{display:block;width:100%;height:40px;margin:0 0 2px;padding:0;border:0;border-radius:var(--r-ctl);background:transparent;font:700 16px/40px var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);text-align:center;cursor:pointer;transition:background-color .12s,color .12s}
.cal-opt:hover:not([aria-disabled="true"]){background:var(--accent-tint)}
.cal-opt[aria-selected="true"],.cal-opt[aria-selected="true"]:hover{background:var(--accent);color:#fff;font-weight:800}
.cal-opt[aria-disabled="true"]{color:#8A90AB;font-weight:500;cursor:default}
.cal-opt:focus-visible{position:relative;z-index:1;outline:3px solid var(--accent);outline-offset:1px}
.cal-confirm,.cal-next{min-height:44px;margin-top:12px;padding:0 12px;border:0;border-radius:var(--r-ctl);background:var(--accent);color:#fff;font:800 14px/1 var(--sans);cursor:pointer;transition:background-color .15s}
.cal-confirm:hover,.cal-next:hover{background:var(--accent-deep)}
.cal-confirm[aria-disabled="true"],.cal-next[aria-disabled="true"],.cal-confirm[aria-disabled="true"]:hover,.cal-next[aria-disabled="true"]:hover{background:var(--line);color:var(--ink-2);cursor:default}
.cal-confirm:focus-visible,.cal-next:focus-visible,.cal-back:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cal-chip[aria-disabled="true"],.cal-chip[aria-disabled="true"]:hover{opacity:.45;cursor:default;background:#fff;border-color:var(--line-2)}
.cal-back{display:grid;place-items:center;width:44px;height:44px;margin-left:-8px;padding:0;border:0;border-radius:50%;background:var(--sand);color:var(--ink);cursor:pointer}
.cal-back[hidden]{display:none}

@media (max-width:699px){
  .cal-wrap{display:block}
  .cal-panel.is-timed .cal-time{width:auto;padding-left:0;border-left:0}
  .cal-panel.is-timed[data-stage="time"] .cal-left,.cal-panel.is-timed[data-stage="date"] .cal-time{display:none}
  .cal-panel.is-timed[data-stage="date"] .cal-next{display:block;width:100%}
  .cal-time-cols{flex:none;height:354px}
  .cal-opt{height:44px;font-size:17px;line-height:44px}
  .cal-sheet-title{flex:1;min-width:0}
  .cal-panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;max-height:92vh;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;padding:8px 16px calc(16px + env(safe-area-inset-bottom));border:0;border-radius:20px 20px 0 0;z-index:95;animation:cal-up .26s var(--ease)}
  .cal-sheet-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 4px}
  .cal-sheet-head::before{content:"";position:absolute;left:50%;top:2px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line-2)}
  .cal-sheet-title{font:800 18px/1.3 var(--sans);letter-spacing:-.015em}
  .cal-x{display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;padding:0;border:0;border-radius:50%;background:var(--sand);color:var(--ink);cursor:pointer}
  .cal-months{display:block}
  .cal-month{width:100%}
  .cal-day{font-size:16px}
  .cal-chip,.cal-clear{min-height:44px}
}

/* intracity: the date field also carries the time of day, so on mid-size screens it gets a little more room */
@media (min-width:1024px) and (max-width:1279px){
  .bar-transfer[data-mode="local"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr) auto}
}

/* The guests picker of the Hotels tab (home and /hotels search card) (adults, children, rooms). The panel looks like the date panel: white, a 1px line, the site's radius and deep shadow;
   on a phone it is a sheet from the bottom. Needs a3-guests.js. */
.gp{position:absolute;z-index:60;width:352px;max-width:calc(100vw - 16px);padding:4px 18px 18px;background:#fff;color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-2);outline:0;animation:gp-in .16s var(--ease)}
.gp[hidden],.gp-back[hidden]{display:none}
@keyframes gp-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes gp-up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.gp-head{display:none}
.gp-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.gp-l{min-width:0}
.gp-l b{display:block;font:800 16px/1.3 var(--sans);letter-spacing:-.01em}
.gp-l small{display:block;margin-top:2px;color:var(--ink-2);font:600 13px/1.3 var(--sans)}
.gp-step{display:flex;align-items:center;gap:4px;flex:none}
.gp-b{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line-2);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.gp-b .i{width:18px;height:18px}
.gp-b:hover:not(:disabled){background:var(--accent-tint);border-color:var(--accent);color:var(--accent)}
.gp-b:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gp-b:disabled{opacity:.35;cursor:default}
.gp-n{min-width:38px;text-align:center;font:800 19px/1 var(--sans);font-variant-numeric:tabular-nums}
.gp-done{display:block;width:100%;min-height:50px;margin-top:16px;border:0;border-radius:12px;background:var(--accent);color:#fff;font:800 16px/1 var(--sans);cursor:pointer;transition:background-color .15s}
.gp-done:hover{background:var(--accent-deep)}
.gp-done:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.gp-back{position:fixed;inset:0;z-index:59;background:rgba(15,18,48,.55);animation:cal-fade .2s ease-out}
@media (max-width:699px){
  .gp{position:fixed;left:0;right:0;bottom:0;top:auto!important;width:auto;max-width:none;max-height:88vh;overflow-y:auto;padding:0 18px calc(18px + env(safe-area-inset-bottom,0px));border:0;border-radius:22px 22px 0 0;animation:gp-up .22s var(--ease);z-index:95}
  .gp-back{z-index:94}
  .gp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
  .gp-head b{font:800 18px/1.3 var(--sans);letter-spacing:-.015em}
  .gp-x{display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
  .gp-x:hover{background:var(--sand)}
}
@media (prefers-reduced-motion:reduce){.gp,.gp-back{animation:none}}
