/* ==========================================================================
   TripGuidely — home.css
   Next Level UX / Premium OTA-style homepage
   Updated with Trip.com-inspired flight calendar + micro interactions
   ========================================================================== */

body[data-page="home"]{
  --home-bg: #f4fbfc;
  --home-surface: #ffffff;
  --home-surface-2: #f8fcfd;
  --home-surface-3: #eef9fa;

  --home-text: #0f172a;
  --home-text-2: #334155;
  --home-text-3: #64748b;

  --home-line: rgba(15, 23, 42, 0.08);
  --home-line-2: rgba(15, 23, 42, 0.12);
  --home-line-3: rgba(18, 207, 208, 0.18);

  --home-brand: #12cfd0;
  --home-brand-2: #0fbfc0;
  --home-brand-3: #0ca9aa;
  --home-brand-dark: #0b7f88;
  --home-brand-soft: rgba(18, 207, 208, 0.12);
  --home-brand-soft-2: rgba(18, 207, 208, 0.18);
  --home-brand-ring: rgba(18, 207, 208, 0.22);

  --home-shadow-xs: 0 4px 12px rgba(2, 6, 23, 0.04);
  --home-shadow-sm: 0 10px 24px rgba(2, 6, 23, 0.07);
  --home-shadow-md: 0 18px 44px rgba(2, 6, 23, 0.10);
  --home-shadow-lg: 0 28px 80px rgba(2, 6, 23, 0.16);

  --home-radius-sm: 14px;
  --home-radius: 18px;
  --home-radius-lg: 24px;
  --home-radius-xl: 28px;

  --tg-water: #12cfd0;
  --tg-water-2: #0fbfc0;
  --tg-water-3: #0ca9aa;
  --tg-water-dark: #0b7f88;
  --tg-water-soft: rgba(18, 207, 208, 0.14);
  --tg-water-ultra: rgba(18, 207, 208, 0.08);

  --tg-sand: #f4a261;
  --tg-sand-2: #e98e45;
  --tg-sand-soft: rgba(244, 162, 97, 0.16);

  --tg-ink: #0f172a;
  --tg-muted: #5f6f85;
  --tg-line: #dbe4ea;
  --tg-line-2: rgba(15, 23, 42, 0.10);
  --tg-panel: #ffffff;
  --tg-panel-2: #f8fbfc;

  --tg-flight-shadow: 0 20px 50px rgba(2, 6, 23, 0.10);
  --tg-flight-shadow-2: 0 10px 24px rgba(2, 6, 23, 0.08);
  --tg-flight-ring: 0 0 0 4px rgba(18, 207, 208, 0.12);

  --flight-cal-bg: #ffffff;
  --flight-cal-border: #e7edf3;
  --flight-cal-border-2: #edf2f6;
  --flight-cal-text: #0f172a;
  --flight-cal-text-soft: #667085;
  --flight-cal-text-muted: #98a2b3;
  --flight-cal-shadow:
    0 24px 70px rgba(16, 24, 40, 0.16),
    0 8px 24px rgba(16, 24, 40, 0.08);
  --flight-cal-accent: #12cfd0;
  --flight-cal-accent-strong: #0db8ba;
  --flight-cal-accent-soft: rgba(18, 207, 208, 0.14);
  --flight-cal-accent-softer: rgba(18, 207, 208, 0.08);
  --flight-cal-pill: #f5f7fa;
  --flight-cal-day-size: 42px;
  --flight-cal-radius: 22px;
  --flight-cal-radius-sm: 12px;
  --flight-cal-ease: cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   PAGE BACKGROUND
   ========================================================================== */

body[data-page="home"]{
  background:
    radial-gradient(860px 480px at 10% 0%, rgba(18,207,208,.10), transparent 56%),
    radial-gradient(840px 460px at 100% 8%, rgba(18,207,208,.06), transparent 58%),
    linear-gradient(180deg, #f9fcfd 0%, var(--home-bg) 100%);
}

/* ==========================================================================
   HERO
   ========================================================================== */

body[data-page="home"] .hero.hero-full{
  min-height: 760px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body[data-page="home"] .hero-bg img{
  object-position: 50% 34%;
  transform: scale(1.01);
}

body[data-page="home"] .hero-overlay{
  background:
    radial-gradient(900px 540px at 12% 0%, rgba(18,207,208,.14), transparent 58%),
    radial-gradient(980px 560px at 88% 6%, rgba(18,207,208,.08), transparent 62%),
    linear-gradient(180deg, rgba(2,6,23,.42) 0%, rgba(2,6,23,.34) 28%, rgba(2,6,23,.22) 58%, rgba(2,6,23,.44) 100%);
  opacity: 1;
}

body[data-page="home"] .hero-inner{
  display: flex;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 68px;
}

body[data-page="home"] .hero-tool-wrap{
  max-width: 1120px;
}

body[data-page="home"] .hero-tool-title{
  margin: 0 0 10px;
  font-size: .95rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255,255,255,.94);
  text-shadow: 0 14px 32px rgba(0,0,0,.36);
}

body[data-page="home"] .hero h1{
  margin: 0;
  max-width: 820px;
  font-size: clamp(2.5rem, 1.9rem + 2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #ffffff;
  text-shadow: 0 18px 40px rgba(0,0,0,.34);
}

body[data-page="home"] .hero-tool-sub{
  margin: 14px 0 22px;
  max-width: 680px;
  font-size: 1.06rem;
  line-height: 1.65;
  color: rgba(241,245,249,.90);
  text-shadow: 0 14px 30px rgba(0,0,0,.30);
}

/* ==========================================================================
   HERO TOOL SHELL
   ========================================================================== */

body[data-page="home"] .hero-tool-shell{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.96));
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 26px;
  box-shadow:
    0 36px 100px rgba(2,6,23,.30),
    0 10px 30px rgba(2,6,23,.12),
    inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(12px);
  overflow: visible;
}

body[data-page="home"] .hero-tool-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 24%),
    radial-gradient(420px 140px at 10% 0%, rgba(18,207,208,.08), transparent 72%);
}

body[data-page="home"] .hero-tool-pad{
  position: relative;
  padding: 16px;
}

/* ==========================================================================
   HERO TABS
   ========================================================================== */

body[data-page="home"] .hero-tabs{
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding: 8px;
  margin: 0 0 16px;
  background: linear-gradient(180deg, #eef4f6, #e8f0f2);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

body[data-page="home"] .hero-tab{
  appearance: none;
  border: 0;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 14px;
  background: transparent;
  color: #54657a;
  font-weight: 900;
  font-size: .98rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

body[data-page="home"] .hero-tab:hover{
  color: #1e293b;
  background: rgba(255,255,255,.55);
}

body[data-page="home"] .hero-tab.active,
body[data-page="home"] .hero-tab[aria-selected="true"]{
  color: var(--home-brand-dark);
  background: linear-gradient(180deg, #ffffff, #fbfeff);
  box-shadow:
    0 8px 20px rgba(2,6,23,.07),
    inset 0 1px 0 rgba(255,255,255,.9);
  transform: translateY(-1px);
}

/* ==========================================================================
   PANELS
   ========================================================================== */

body[data-page="home"] .hero-tab-panel{
  animation: homeFadeIn .18s ease;
}

@keyframes homeFadeIn{
  from{ opacity:0; transform: translateY(4px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ==========================================================================
   HOTEL / ESIM FORM LAYOUT
   ========================================================================== */

body[data-page="home"] .hotel-search-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

body[data-page="home"] .hotel-field{
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

body[data-page="home"] .hotel-label{
  font-size: .86rem;
  font-weight: 800;
  color: var(--home-text-2);
  letter-spacing: -.01em;
}

body[data-page="home"] .hotel-control{
  width: 100%;
  min-height: 60px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid #dce6ec;
  background: linear-gradient(180deg, #ffffff, #fbfdfe);
  color: var(--home-text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 6px rgba(2,6,23,.02);
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background-color .16s ease,
    transform .16s ease;
}

body[data-page="home"] .hotel-control::placeholder{
  color: #8b99ab;
}

body[data-page="home"] .hotel-control:hover{
  border-color: rgba(18,207,208,.24);
  background: #ffffff;
}

body[data-page="home"] .hotel-control:focus{
  outline: none;
  border-color: rgba(18,207,208,.48);
  box-shadow:
    0 0 0 4px rgba(18,207,208,.12),
    0 10px 24px rgba(2,6,23,.08);
  background: #ffffff;
}

body[data-page="home"] select.hotel-control{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #5b6b7d 50%),
    linear-gradient(135deg, #5b6b7d 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* ==========================================================================
   PRIMARY BUTTONS
   ========================================================================== */

body[data-page="home"] .btn.primary,
body[data-page="home"] #home-hotel-search-submit.hotel-submit,
body[data-page="home"] #home-esim-search-submit.hotel-submit,
body[data-page="home"] #home-flight-search-submit.hotel-submit,
body[data-page="home"] .map-explorer__cta{
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, var(--home-brand), var(--home-brand-2));
  color: #073338;
  font-weight: 900;
  letter-spacing: -0.01em;
  box-shadow:
    0 16px 34px rgba(18,207,208,.24),
    0 8px 18px rgba(2,6,23,.10);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background-color .16s ease,
    filter .16s ease;
}

body[data-page="home"] .btn.primary:hover,
body[data-page="home"] #home-hotel-search-submit.hotel-submit:hover,
body[data-page="home"] #home-esim-search-submit.hotel-submit:hover,
body[data-page="home"] #home-flight-search-submit.hotel-submit:hover,
body[data-page="home"] .map-explorer__cta:hover{
  transform: translateY(-2px);
  background: linear-gradient(180deg, #19d9da, var(--home-brand));
  box-shadow:
    0 22px 40px rgba(18,207,208,.30),
    0 10px 20px rgba(2,6,23,.12);
  filter: saturate(1.02);
}

body[data-page="home"] .btn.primary:active,
body[data-page="home"] #home-hotel-search-submit.hotel-submit:active,
body[data-page="home"] #home-esim-search-submit.hotel-submit:active,
body[data-page="home"] #home-flight-search-submit.hotel-submit:active,
body[data-page="home"] .map-explorer__cta:active{
  transform: translateY(0);
  box-shadow:
    0 10px 22px rgba(18,207,208,.20),
    0 4px 10px rgba(2,6,23,.08);
}

body[data-page="home"] .btn.primary:focus-visible,
body[data-page="home"] #home-hotel-search-submit.hotel-submit:focus-visible,
body[data-page="home"] #home-esim-search-submit.hotel-submit:focus-visible,
body[data-page="home"] #home-flight-search-submit.hotel-submit:focus-visible,
body[data-page="home"] .map-explorer__cta:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px var(--home-brand-ring),
    0 16px 34px rgba(18,207,208,.24),
    0 8px 18px rgba(2,6,23,.10);
}

body[data-page="home"] #home-hotel-search-submit.hotel-submit,
body[data-page="home"] #home-esim-search-submit.hotel-submit{
  min-height: 60px;
  border-radius: 16px;
  padding: 0 24px;
  white-space: nowrap;
}

/* ==========================================================================
   INLINE COPY UNDER FORMS
   ========================================================================== */

body[data-page="home"] #home-hotel-search-form,
body[data-page="home"] #home-flight-search-form,
body[data-page="home"] #home-esim-search-form{
  display: grid;
  gap: 12px;
}

body[data-page="home"] #home-hotel-search-form > p,
body[data-page="home"] #home-flight-search-form > p,
body[data-page="home"] #home-esim-search-form > p{
  margin: 0;
  color: var(--home-text-3) !important;
  font-size: .93rem !important;
  line-height: 1.55;
}

body[data-page="home"] #home-hotel-search-form > p a,
body[data-page="home"] #home-flight-search-form > p a,
body[data-page="home"] #home-esim-search-form > p a{
  color: var(--home-brand-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(18,207,208,.28);
  transition: border-color .15s ease, color .15s ease;
}

body[data-page="home"] #home-hotel-search-form > p a:hover,
body[data-page="home"] #home-flight-search-form > p a:hover,
body[data-page="home"] #home-esim-search-form > p a:hover{
  color: #07535a;
  border-bottom-color: rgba(18,207,208,.62);
}

/* ==========================================================================
   FLIGHTS PANEL
   ========================================================================== */

body[data-page="home"] #hero-panel-flights{
  padding-top: 2px;
}

body[data-page="home"] #home-flight-search-form{
  display: grid;
  gap: 14px;
  overflow: visible;
}

/* topline */

body[data-page="home"] .flight-topline{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 4px 4px 0;
}

body[data-page="home"] .flight-choice,
body[data-page="home"] .flight-check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  font-weight: 800;
  font-size: 1rem;
  color: var(--tg-ink);
  cursor: pointer;
  user-select: none;
}

body[data-page="home"] .flight-choice input,
body[data-page="home"] .flight-check input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body[data-page="home"] .flight-choice .dot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #232f45;
  background: #fff;
  position: relative;
  flex: 0 0 18px;
}

body[data-page="home"] .flight-choice .dot::after{
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: transparent;
}

body[data-page="home"] .flight-choice input:checked + .dot{
  border-color: var(--tg-water);
}

body[data-page="home"] .flight-choice input:checked + .dot::after{
  background: var(--tg-water);
}

body[data-page="home"] .flight-check .box{
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 2px solid #232f45;
  background: #fff;
  position: relative;
  flex: 0 0 18px;
}

body[data-page="home"] .flight-check .box::after{
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 10px;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(40deg);
}

body[data-page="home"] .flight-check input:checked + .box{
  border-color: var(--tg-water);
  background: linear-gradient(180deg, var(--tg-water), var(--tg-water-2));
}

body[data-page="home"] .flight-check input:checked + .box::after{
  border-color: #063339;
}

body[data-page="home"] .flight-divider{
  width: 1px;
  height: 24px;
  background: #d6dde6;
}

/* main grid */

body[data-page="home"] #home-flight-search-form .hotel-search-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 340px 340px;
  gap: 10px;
  align-items: stretch;
  padding-top: 4px;
  overflow: visible;
}

body[data-page="home"] #home-flight-search-form .hotel-field{
  position: relative;
  min-width: 0;
  overflow: visible;
}

body[data-page="home"] #home-flight-search-form .hotel-field:nth-of-type(1){
  padding-right: 26px;
}

body[data-page="home"] #home-flight-search-form .hotel-field:nth-of-type(2){
  padding-left: 26px;
}

/* swap */

body[data-page="home"] #home-flight-search-form .flight-swap{
  position: absolute;
  left: calc(50% - 374px);
  top: 43px;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid #d6dde6;
  background: linear-gradient(180deg, #ffffff, #f7fafb);
  color: var(--tg-water-3);
  box-shadow: 0 4px 14px rgba(2,6,23,.08);
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 0;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    transform .2s ease;
}

body[data-page="home"] #home-flight-search-form .flight-swap:hover{
  border-color: rgba(18,207,208,.42);
  box-shadow:
    0 10px 22px rgba(18,207,208,.14),
    0 6px 14px rgba(2,6,23,.08);
}

body[data-page="home"] #home-flight-search-form .flight-swap:active{
  transform: translateY(-50%) rotate(180deg);
}

body[data-page="home"] #home-flight-search-form .flight-swap::before,
body[data-page="home"] #home-flight-search-form .flight-swap::after{
  content: none !important;
}

body[data-page="home"] #home-flight-search-form .flight-swap svg{
  width: 22px;
  height: 22px;
}

/* boxes */

body[data-page="home"] #home-flight-search-form .flight-box{
  min-height: 72px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-radius: 6px;
  border: 1px solid var(--tg-line);
  background: #fff;
  color: var(--tg-ink);
  box-shadow: none;
  transition:
    border-color .14s ease,
    box-shadow .14s ease,
    background-color .14s ease;
}

body[data-page="home"] #home-flight-search-form .flight-box:hover{
  border-color: #becad5;
}

body[data-page="home"] #home-flight-search-form .flight-box:focus-within,
body[data-page="home"] #home-flight-search-form .flight-box.is-open,
body[data-page="home"] #home-flight-search-form .flight-date-trigger:focus-visible,
body[data-page="home"] #home-flight-search-form .flight-travelers-trigger:focus-visible{
  outline: none;
  border-color: rgba(18,207,208,.46);
  box-shadow: var(--tg-flight-ring);
}

body[data-page="home"] #home-flight-search-form .flight-copy{
  min-width: 0;
  display: grid;
  gap: 4px;
}

body[data-page="home"] #home-flight-search-form .flight-title{
  font-size: .95rem;
  font-weight: 800;
  color: #66758b;
  line-height: 1.1;
}

body[data-page="home"] #home-flight-search-form .hotel-control{
  font-size: 1rem;
  font-weight: 900;
  color: var(--tg-ink);
}

body[data-page="home"] #home-flight-search-form .hotel-control::placeholder{
  color: #233552;
  opacity: .72;
}

body[data-page="home"] #home-flight-search-form .flight-value{
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  color: #10213b;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="home"] #home-flight-search-form .flight-date-trigger,
body[data-page="home"] #home-flight-search-form .flight-travelers-trigger{
  appearance: none;
  cursor: pointer;
  text-align: left;
  border: 0;
  background: transparent;
}

body[data-page="home"] #home-flight-search-form .flight-date-split{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  width: 100%;
}

body[data-page="home"] #home-flight-search-form .flight-date-divider{
  width: 32px;
  height: 1px;
  background: #92a0b1;
}

body[data-page="home"] #home-flight-search-form .flight-date-col{
  min-width: 0;
  display: grid;
  gap: 4px;
}

body[data-page="home"] #home-flight-search-form .flight-icon{
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #0f1f35;
  margin-right: 10px;
}

body[data-page="home"] #home-flight-search-form .flight-caret{
  margin-left: auto;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-right: 2px solid #1c2a3f;
  border-bottom: 2px solid #1c2a3f;
  transform: rotate(45deg);
}

/* actions */

body[data-page="home"] .flight-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body[data-page="home"] #home-flight-search-form .flight-plus-hotel{
  appearance: none;
  min-width: 220px;
  min-height: 68px;
  padding: 0 24px;
  border-radius: 4px;
  border: 1px solid #d9e1e8;
  background: #ffffff;
  color: #103144;
  font-weight: 900;
  font-size: 1rem;
  box-shadow: none;
  cursor: pointer;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background-color .16s ease;
}

body[data-page="home"] #home-flight-search-form .flight-plus-hotel:hover{
  transform: translateY(-1px);
  border-color: rgba(18,207,208,.42);
  box-shadow:
    0 14px 28px rgba(18,207,208,.10),
    0 6px 14px rgba(2,6,23,.08);
  background: linear-gradient(180deg, rgba(18,207,208,.05), rgba(18,207,208,.02));
}

body[data-page="home"] #home-flight-search-form #home-flight-search-submit.hotel-submit{
  min-width: 180px;
  min-height: 68px;
  padding: 0 26px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, var(--tg-water), var(--tg-water-2));
  color: #ffffff;
  font-size: 1rem;
  font-weight: 900;
  box-shadow:
    0 14px 28px rgba(18,207,208,.22),
    0 6px 14px rgba(2,6,23,.10);
}

body[data-page="home"] #home-flight-search-form #home-flight-search-submit.hotel-submit:hover{
  background: linear-gradient(180deg, #1ad8d9, var(--tg-water));
  box-shadow:
    0 18px 32px rgba(18,207,208,.28),
    0 8px 16px rgba(2,6,23,.12);
  transform: translateY(-1px);
}

/* ==========================================================================
   DATE POPOVER — TRIP.COM INSPIRED
   ========================================================================== */

body[data-page="home"] .flight-date-trigger.is-open,
body[data-page="home"] [data-flight-date-trigger].is-open{
  z-index: 32;
}

body[data-page="home"] .flight-date-popover,
body[data-page="home"] [data-flight-date-popover]{
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 60;
  width: 980px;
  max-width: min(980px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 80px));
  background: var(--flight-cal-bg);
  border: 1px solid var(--flight-cal-border);
  border-radius: var(--flight-cal-radius);
  box-shadow: var(--flight-cal-shadow);
  padding: 0;
  overflow: auto;
  transform: translateX(-50%);
  transform-origin: top center;
  animation: tgFlightCalendarIn .26s var(--flight-cal-ease);
  isolation: isolate;
}

body[data-page="home"] .flight-date-popover[hidden]{
  display: none !important;
}

@keyframes tgFlightCalendarIn{
  from{
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(.985);
  }
  to{
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

body[data-page="home"] .flight-date-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px 16px;
  background: #fff;
  border-bottom: 1px solid var(--flight-cal-border-2);
}

body[data-page="home"] .flight-date-title{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--flight-cal-text);
}

body[data-page="home"] .flight-date-head-right{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  flex-wrap: nowrap;
}

/* depart / return */

body[data-page="home"] .flight-date-mode{
  appearance: none;
  border: 0;
  background: transparent;
  color: #667085;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 0 6px 12px;
  min-height: auto;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

body[data-page="home"] .flight-date-mode:hover{
  color: var(--flight-cal-text);
}

body[data-page="home"] .flight-date-mode.active{
  color: var(--flight-cal-accent-strong);
  border-bottom-color: var(--flight-cal-accent);
}

/* month chips */

body[data-page="home"] .flight-date-monthchips{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

body[data-page="home"] .flight-date-monthchips button{
  appearance: none;
  border: 1px solid var(--flight-cal-border);
  background: var(--flight-cal-pill);
  color: #475467;
  border-radius: 10px;
  min-width: 64px;
  height: 42px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: default;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

body[data-page="home"] .flight-date-body{
  padding: 0;
  background: #fff;
}

body[data-page="home"] .flight-cal-wrap,
body[data-page="home"] [data-flight-cal-wrap]{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 28px;
  padding: 20px 24px 22px;
  background: #fff;
}

body[data-page="home"] .flight-cal{
  min-width: 0;
  width: 100%;
}

body[data-page="home"] .flight-cal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  min-height: 32px;
}

body[data-page="home"] .flight-cal-title{
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--flight-cal-text);
}

body[data-page="home"] .flight-cal-head > div:last-child{
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-page="home"] .flight-cal-nav{
  appearance: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--flight-cal-border);
  border-radius: 10px;
  background: #fff;
  color: #344054;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

body[data-page="home"] .flight-cal-nav:hover{
  background: #f8fafc;
  border-color: #d5dde6;
  color: #101828;
  transform: translateY(-1px);
}

body[data-page="home"] .flight-weekdays{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 8px;
}

body[data-page="home"] .flight-weekdays span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: #98a2b3;
  user-select: none;
}

body[data-page="home"] .flight-days{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

/* day cells */

body[data-page="home"] .flight-day{
  appearance: none;
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--flight-cal-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

body[data-page="home"] .flight-day > span{
  position: relative;
  z-index: 2;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
}

body[data-page="home"] .flight-day.muted{
  opacity: 0;
  pointer-events: none;
}

body[data-page="home"] .flight-day:hover:not(.disabled):not(.start):not(.end):not(.single){
  background: var(--flight-cal-accent-softer);
  border-color: rgba(18,207,208,.16);
  transform: translateY(-1px);
}

body[data-page="home"] .flight-day.weekend:not(.disabled):not(.start):not(.end):not(.single){
  color: #0f7f80;
}

body[data-page="home"] .flight-day.disabled{
  color: #c2c9d3;
  background: transparent;
  cursor: not-allowed;
  opacity: .65;
}

body[data-page="home"] .flight-day.range{
  background: rgba(18,207,208,.12);
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

body[data-page="home"] .flight-day.start{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

body[data-page="home"] .flight-day.end{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

body[data-page="home"] .flight-day.single{
  border-radius: 10px;
}

body[data-page="home"] .flight-day.start,
body[data-page="home"] .flight-day.end,
body[data-page="home"] .flight-day.single{
  background: linear-gradient(180deg, var(--flight-cal-accent), var(--flight-cal-accent-strong));
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 8px 18px rgba(18,207,208,.18),
    inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="home"] .flight-day.start:hover,
body[data-page="home"] .flight-day.end:hover,
body[data-page="home"] .flight-day.single:hover{
  transform: translateY(-1px);
}

/* footer */

body[data-page="home"] .flight-date-footer{
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px 18px;
  border-top: 1px solid #edf2f6;
  background: #fff;
}

body[data-page="home"] .flight-date-note{
  margin: 0;
  color: #98a2b3;
  font-size: 13px;
  font-weight: 600;
}

body[data-page="home"] .flight-date-summary{
  display: grid;
  gap: 3px;
  margin-left: auto;
  padding-right: 2px;
  color: var(--flight-cal-text-soft);
  font-size: 14px;
  line-height: 1.35;
  text-align: right;
}

body[data-page="home"] .flight-date-summary strong{
  color: var(--flight-cal-text);
  font-size: 15px;
  font-weight: 800;
}

body[data-page="home"] .flight-date-confirm{
  appearance: none;
  min-width: 220px;
  height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--tg-water), var(--tg-water-2));
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    0 12px 24px rgba(18,207,208,.20),
    0 4px 10px rgba(2,6,23,.08);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

body[data-page="home"] .flight-date-confirm:hover{
  transform: translateY(-1px);
  filter: saturate(1.03);
  box-shadow:
    0 16px 28px rgba(18,207,208,.24),
    0 6px 12px rgba(2,6,23,.10);
}

/* ==========================================================================
   TRAVELERS POPOVER
   ========================================================================== */

body[data-page="home"] .flight-travelers-popover{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 40;
  width: min(100%, 360px);
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(2,6,23,.18);
  overflow: hidden;
}

body[data-page="home"] .flight-travelers-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(15,23,42,.06);
}

body[data-page="home"] .flight-travelers-row:last-of-type{
  border-bottom: 0;
}

body[data-page="home"] .flight-travelers-copy{
  display: grid;
  gap: 2px;
  color: var(--home-text-3);
  font-size: .9rem;
}

body[data-page="home"] .flight-travelers-copy strong{
  color: var(--home-text);
  font-size: .96rem;
}

body[data-page="home"] .flight-counter{
  display: inline-grid;
  grid-template-columns: 36px auto 36px;
  align-items: center;
  gap: 8px;
}

body[data-page="home"] .flight-counter button{
  appearance: none;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  background: #fff;
  color: var(--home-text);
  font-weight: 900;
  cursor: pointer;
}

body[data-page="home"] .flight-counter output{
  min-width: 18px;
  text-align: center;
  font-weight: 900;
  color: var(--home-text);
}

body[data-page="home"] .flight-cabin{
  display: grid;
  gap: 8px;
  padding: 14px 8px 8px;
}

body[data-page="home"] .flight-cabin label{
  font-size: .88rem;
  font-weight: 800;
  color: var(--home-text-2);
}

body[data-page="home"] .flight-cabin select{
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
}

body[data-page="home"] .flight-travelers-actions{
  display: flex;
  justify-content: flex-end;
  padding: 8px 4px 2px;
}

body[data-page="home"] .flight-travelers-apply{
  appearance: none;
  min-width: 118px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--tg-water), var(--tg-water-2));
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(18,207,208,.18);
}

body[data-page="home"] .flight-travelers-apply:hover{
  background: linear-gradient(180deg, #1ad8d9, var(--tg-water));
}

/* ==========================================================================
   TRANSPORT PANEL
   ========================================================================== */

body[data-page="home"] .transport-quick-panel .cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="home"] #hero-panel-transport .cat{
  min-height: 100%;
}

body[data-page="home"] #hero-panel-transport .actions{
  gap: 10px;
  margin-top: 12px;
}

body[data-page="home"] #hero-panel-transport .actions .btn{
  min-height: 48px;
  border-radius: 999px;
}

/* ==========================================================================
   HERO SECONDARY ACTIONS
   ========================================================================== */

body[data-page="home"] .hero-tool-pad > .actions[aria-label="Secondary actions"]{
  margin-top: 14px !important;
  gap: 10px;
}

body[data-page="home"] .hero-tool-pad > .actions[aria-label="Secondary actions"] .btn{
  min-height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(18,207,208,.16);
  background: rgba(255,255,255,.92);
  color: #113642;
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
}

body[data-page="home"] .hero-tool-pad > .actions[aria-label="Secondary actions"] .btn:hover{
  border-color: rgba(18,207,208,.34);
  background: linear-gradient(180deg, rgba(18,207,208,.08), rgba(18,207,208,.04));
  color: #0c5158;
}

body[data-page="home"] .hero-tool-pad > .actions[aria-label="Secondary actions"] .btn .pill{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border-color: rgba(18,207,208,.14);
  background: rgba(18,207,208,.07);
  color: #0f5f66;
}

/* ==========================================================================
   CONTENT AREA
   ========================================================================== */

body[data-page="home"] .wrap > .grid{
  align-items: start;
  gap: 22px;
  margin-top: 26px;
}

body[data-page="home"] .card{
  border: 1px solid rgba(15,23,42,.06);
  background: linear-gradient(180deg, #ffffff, #fdfeff);
  border-radius: 22px;
  box-shadow: var(--home-shadow-sm);
}

body[data-page="home"] .content.card{
  box-shadow: 0 16px 44px rgba(2,6,23,.08);
}

body[data-page="home"] .pad{
  padding: 24px;
}

body[data-page="home"] .section-title{
  gap: 14px;
  margin-bottom: 14px;
}

body[data-page="home"] .section-title h2,
body[data-page="home"] .content h2{
  color: var(--home-text);
  letter-spacing: -0.02em;
}

body[data-page="home"] .content h2{
  margin-top: 28px;
  margin-bottom: 10px;
  font-size: 1.34rem;
}

body[data-page="home"] .section-title p,
body[data-page="home"] .content p{
  color: var(--home-text-3);
}

body[data-page="home"] .content p strong{
  color: var(--home-text);
}

body[data-page="home"] .content > .pad > section + section{
  margin-top: 26px;
  padding-top: 2px;
}

/* ==========================================================================
   GRID CARDS / CATEGORY CARDS
   ========================================================================== */

body[data-page="home"] .cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body[data-page="home"] .cat{
  position: relative;
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.06);
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(2,6,23,.04);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background-color .16s ease;
}

body[data-page="home"] .cat::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(240px 60px at 0% 0%, rgba(18,207,208,.05), transparent 72%);
}

body[data-page="home"] .cat:hover{
  transform: translateY(-3px);
  border-color: rgba(18,207,208,.24);
  box-shadow: 0 18px 34px rgba(2,6,23,.08);
  background: #ffffff;
}

body[data-page="home"] .cat strong{
  display: block;
  font-size: 1.02rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--home-text);
}

body[data-page="home"] .cat > span{
  color: var(--home-text-3);
  line-height: 1.58;
}

body[data-page="home"] .cat .tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(18,207,208,.08);
  color: #0d626a;
  font-size: .84rem;
  font-weight: 900;
  line-height: 1.2;
  border: 1px solid rgba(18,207,208,.12);
}

body[data-page="home"] .cat .tag i{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--home-brand);
  box-shadow: 0 0 0 4px rgba(18,207,208,.14);
}

/* ==========================================================================
   CITY GRID
   ========================================================================== */

body[data-page="home"] .cities-grid{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  margin: 0;
}

body[data-page="home"] .city-card{
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 108px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.06);
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  box-shadow: 0 6px 18px rgba(2,6,23,.04);
  text-decoration: none;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

body[data-page="home"] .city-card:hover{
  transform: translateY(-3px);
  border-color: rgba(18,207,208,.24);
  box-shadow: 0 18px 34px rgba(2,6,23,.08);
}

body[data-page="home"] .city-ico{
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(2,6,23,.10));
}

body[data-page="home"] .city-meta{
  min-width: 0;
  display: grid;
  gap: 4px;
}

body[data-page="home"] .city-meta strong{
  font-size: 1rem;
  color: var(--home-text);
  letter-spacing: -0.01em;
}

body[data-page="home"] .city-meta span{
  color: var(--home-text-3);
  line-height: 1.5;
}

body[data-page="home"] .city-arrow{
  margin-left: auto;
  color: #7c8b9a;
  font-size: 1rem;
  transition: transform .16s ease, color .16s ease;
}

body[data-page="home"] .city-card:hover .city-arrow{
  transform: translate(2px, -2px);
  color: var(--home-brand-dark);
}

/* ==========================================================================
   LINK CARDS
   ========================================================================== */

body[data-page="home"] .links{
  display: grid;
  gap: 12px;
}

body[data-page="home"] .link-card{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.06);
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  box-shadow: 0 6px 18px rgba(2,6,23,.04);
  text-decoration: none;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

body[data-page="home"] .link-card:hover{
  transform: translateY(-2px);
  border-color: rgba(18,207,208,.24);
  box-shadow: 0 16px 30px rgba(2,6,23,.08);
}

body[data-page="home"] .link-card strong{
  color: var(--home-text);
  letter-spacing: -0.01em;
}

body[data-page="home"] .link-card span{
  color: var(--home-text-3);
  line-height: 1.5;
}

body[data-page="home"] .link-card .arrow{
  color: #7c8b9a;
  transition: transform .16s ease, color .16s ease;
}

body[data-page="home"] .link-card:hover .arrow{
  transform: translate(2px, -2px);
  color: var(--home-brand-dark);
}

/* ==========================================================================
   MINI GRID / PILL LINKS / STEPS
   ========================================================================== */

body[data-page="home"] .mini-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="home"] .pill-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(18,207,208,.16);
  background: #ffffff;
  color: #103846;
  text-decoration: none;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 6px 16px rgba(2,6,23,.04);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background-color .16s ease;
}

body[data-page="home"] .pill-link:hover{
  transform: translateY(-2px);
  border-color: rgba(18,207,208,.30);
  background: linear-gradient(180deg, rgba(18,207,208,.08), rgba(18,207,208,.04));
  box-shadow: 0 14px 24px rgba(2,6,23,.07);
}

body[data-page="home"] .mini{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.06);
  background: linear-gradient(180deg, #ffffff, #fbfdfe);
  box-shadow: 0 6px 18px rgba(2,6,23,.04);
}

body[data-page="home"] .mini-icon{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(18,207,208,.16), rgba(18,207,208,.10));
  color: #0c6067;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

body[data-page="home"] .mini b{
  display: block;
  color: var(--home-text);
  line-height: 1.3;
}

body[data-page="home"] .mini span{
  display: block;
  margin-top: 3px;
  color: var(--home-text-3);
  font-size: .92rem;
  line-height: 1.45;
}

/* ==========================================================================
   DETAILS / FAQ
   ========================================================================== */

body[data-page="home"] details{
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, #ffffff, #fbfdfe);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(2,6,23,.04);
  overflow: hidden;
}

body[data-page="home"] details + details{
  margin-top: 12px;
}

body[data-page="home"] summary{
  list-style: none;
  position: relative;
  padding: 18px 54px 18px 18px;
  cursor: pointer;
  font-weight: 900;
  color: var(--home-text);
}

body[data-page="home"] summary::-webkit-details-marker{
  display: none;
}

body[data-page="home"] summary::after{
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(18,207,208,.10);
  color: #0b6168;
  font-weight: 900;
  font-size: 1.05rem;
}

body[data-page="home"] details[open] summary::after{
  content: "–";
}

body[data-page="home"] details p{
  margin: 0;
  padding: 0 18px 18px;
  color: var(--home-text-3);
}

/* ==========================================================================
   DISCLOSURE
   ========================================================================== */

body[data-page="home"] .disclosure{
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18,207,208,.08), rgba(18,207,208,.04));
  border: 1px solid rgba(18,207,208,.12);
}

body[data-page="home"] .disclosure p{
  margin: 0;
}

/* ==========================================================================
   ASIDE
   ========================================================================== */

body[data-page="home"] aside.card{
  background: linear-gradient(180deg, #ffffff, #fcfeff);
}

body[data-page="home"] aside .section-title + .links{
  margin-top: 2px;
}

body[data-page="home"] aside .section-title{
  margin-bottom: 14px;
}

body[data-page="home"] aside .section-title p{
  font-size: .94rem;
}

/* ==========================================================================
   MAP BAND
   ========================================================================== */

body[data-page="home"] .home-map-band{
  position: relative;
  margin-top: 34px;
  padding: 30px 0 8px;
  background:
    radial-gradient(800px 260px at 10% 0%, rgba(18,207,208,.10), transparent 65%),
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.20) 100%);
}

body[data-page="home"] .home-map-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ==========================================================================
   MAP EXPLORER
   ========================================================================== */

body[data-page="home"] .map-explorer{
  position: relative;
}

body[data-page="home"] .map-explorer__shell{
  background: linear-gradient(180deg, #ffffff 0%, #fbfeff 100%);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(2,6,23,.10);
  overflow: hidden;
}

body[data-page="home"] .map-explorer__head{
  padding: 26px 26px 18px;
  background:
    radial-gradient(340px 120px at 0% 0%, rgba(18,207,208,.06), transparent 72%),
    linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
}

body[data-page="home"] .map-explorer__eyebrow{
  margin: 0 0 8px;
  color: var(--home-brand-dark);
  font-size: .86rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-page="home"] .map-explorer__title{
  margin: 0;
  font-size: clamp(1.7rem, 1.3rem + 1vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--home-text);
}

body[data-page="home"] .map-explorer__desc{
  margin: 12px 0 0;
  max-width: 760px;
  color: var(--home-text-3);
  font-size: 1rem;
  line-height: 1.65;
}

body[data-page="home"] .map-explorer__stage{
  padding: 0 18px 18px;
}

body[data-page="home"] .map-explorer__toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 8px 14px;
  background: transparent;
  border: 0;
}

body[data-page="home"] .map-explorer__legend{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

body[data-page="home"] .map-explorer__legend-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--home-text-3);
  font-size: .9rem;
  font-weight: 700;
}

body[data-page="home"] .map-explorer__swatch{
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

body[data-page="home"] .map-explorer__swatch--active{
  background: var(--home-brand);
  box-shadow: 0 0 0 6px rgba(18,207,208,.14);
}

body[data-page="home"] .map-explorer__swatch--inactive{
  background: #b3c1cd;
}

body[data-page="home"] .map-explorer__hint{
  color: var(--home-text-3);
  font-size: .9rem;
  font-weight: 700;
}

body[data-page="home"] .map-explorer__canvas{
  position: relative;
  min-height: 520px;
  border-radius: 24px;
  background:
    radial-gradient(620px 160px at 50% 0%, rgba(255,255,255,.50), transparent 70%),
    linear-gradient(180deg, #eef8fb 0%, #e8f5f8 100%);
  border: 1px solid rgba(18,207,208,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 10px 30px rgba(2,6,23,.06);
  overflow: hidden;
}

body[data-page="home"] .map-explorer__canvas svg{
  background: transparent !important;
}

body[data-page="home"] .map-explorer__canvas path{
  fill: #f6fbfc;
  stroke: #9eb2c0;
  stroke-width: 1.15;
  transition: fill .16s ease, stroke .16s ease, opacity .16s ease;
}

body[data-page="home"] .map-explorer__canvas path:hover{
  fill: #e4fbfc;
  stroke: #4ebec5;
}

body[data-page="home"] .map-explorer__canvas .is-active,
body[data-page="home"] .map-explorer__canvas [data-active="true"]{
  fill: #daf8f9 !important;
  stroke: #1bb7be !important;
  stroke-width: 1.3 !important;
}

body[data-page="home"] .map-explorer__canvas circle,
body[data-page="home"] .map-explorer__canvas .map-point,
body[data-page="home"] .map-explorer__canvas .city-point{
  fill: var(--home-brand) !important;
  stroke: #ffffff !important;
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 0 10px rgba(18,207,208,.32));
}

body[data-page="home"] .map-explorer__canvas text,
body[data-page="home"] .map-explorer__canvas .map-label{
  fill: #12303d !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.90);
}

body[data-page="home"] .map-explorer__loading{
  position: absolute;
  inset: auto 18px 18px auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #55677c;
  font-size: .88rem;
  font-weight: 800;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 10px 20px rgba(2,6,23,.06);
}

body[data-page="home"] .map-explorer__tooltip{
  position: absolute;
  z-index: 4;
  max-width: 260px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  color: var(--home-text);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 34px rgba(2,6,23,.12);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

body[data-page="home"] .map-explorer__body{
  padding: 0 18px 18px;
}

body[data-page="home"] .map-explorer__groups{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body[data-page="home"] .map-explorer__group{
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.06);
  background: linear-gradient(180deg, #ffffff, #fbfdfe);
  box-shadow: 0 6px 18px rgba(2,6,23,.04);
}

body[data-page="home"] .map-explorer__group-title{
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--home-text);
  letter-spacing: -0.01em;
}

body[data-page="home"] .map-explorer__links{
  display: grid;
  gap: 9px;
}

body[data-page="home"] .map-explorer__links a{
  color: var(--home-text-3);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.45;
  transition: color .16s ease, transform .16s ease;
}

body[data-page="home"] .map-explorer__links a:hover{
  color: var(--home-brand-dark);
  transform: translateX(2px);
}

body[data-page="home"] .map-explorer__footer{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 24px 24px;
  border-top: 1px solid rgba(15,23,42,.06);
  background: linear-gradient(180deg, #fbfdfe 0%, #ffffff 100%);
}

body[data-page="home"] .map-explorer__cta{
  min-height: 54px;
  padding: 0 22px;
  border-radius: 16px;
  text-decoration: none;
}

body[data-page="home"] .map-explorer__note{
  margin: 0;
  color: var(--home-text-3);
  font-size: .94rem;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px){
  body[data-page="home"] .flight-date-popover,
  body[data-page="home"] [data-flight-date-popover]{
    width: min(920px, calc(100vw - 32px));
  }
}

@media (max-width: 1100px){
  body[data-page="home"] .hotel-search-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="home"] #home-hotel-search-submit.hotel-submit,
  body[data-page="home"] #home-esim-search-submit.hotel-submit{
    grid-column: 1 / -1;
  }

  body[data-page="home"] .mini-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="home"] .map-explorer__groups{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  body[data-page="home"] .cards,
  body[data-page="home"] .cities-grid{
    grid-template-columns: 1fr;
  }

  body[data-page="home"] #home-flight-search-form .hotel-search-grid{
    grid-template-columns: 1fr 1fr;
  }

  body[data-page="home"] #home-flight-search-form .hotel-field:nth-of-type(1),
  body[data-page="home"] #home-flight-search-form .hotel-field:nth-of-type(2){
    padding-left: 0;
    padding-right: 0;
  }

  body[data-page="home"] #home-flight-search-form .flight-swap{
    left: 50%;
    top: 36px;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
  }

  body[data-page="home"] #home-flight-search-form .hotel-field:nth-of-type(1),
  body[data-page="home"] #home-flight-search-form .hotel-field:nth-of-type(2){
    margin-top: 14px;
  }

  body[data-page="home"] #home-flight-search-form .hotel-field:nth-of-type(1){
    padding-right: 26px;
  }

  body[data-page="home"] #home-flight-search-form .hotel-field:nth-of-type(2){
    padding-left: 26px;
  }

  body[data-page="home"] .flight-date-popover,
  body[data-page="home"] [data-flight-date-popover]{
    left: 0;
    transform: none;
    width: min(760px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }

  @keyframes tgFlightCalendarIn{
    from{
      opacity: 0;
      transform: translateY(8px) scale(.985);
    }
    to{
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  body[data-page="home"] .flight-cal-wrap,
  body[data-page="home"] [data-flight-cal-wrap]{
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 760px){
  body[data-page="home"] .hero.hero-full{
    min-height: 640px;
  }

  body[data-page="home"] .hero-inner{
    align-items: flex-end;
    padding-top: 36px;
    padding-bottom: 28px;
  }

  body[data-page="home"] .hero h1{
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height: 1.06;
  }

  body[data-page="home"] .hero-tool-sub{
    font-size: .98rem;
    line-height: 1.58;
    margin-bottom: 16px;
  }

  body[data-page="home"] .hero-tool-shell{
    border-radius: 20px;
    box-shadow:
      0 22px 56px rgba(2,6,23,.24),
      0 10px 24px rgba(2,6,23,.10);
  }

  body[data-page="home"] .hero-tool-pad{
    padding: 12px;
  }

  body[data-page="home"] .hero-tabs{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 16px;
  }

  body[data-page="home"] .hero-tab{
    min-height: 48px;
    font-size: .95rem;
  }

  body[data-page="home"] .hotel-search-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-page="home"] .hotel-control{
    min-height: 56px;
    border-radius: 14px;
  }

  body[data-page="home"] #home-hotel-search-submit.hotel-submit,
  body[data-page="home"] #home-esim-search-submit.hotel-submit,
  body[data-page="home"] #home-flight-search-submit.hotel-submit,
  body[data-page="home"] .flight-plus-hotel{
    width: 100%;
    min-width: 0;
    min-height: 56px;
    border-radius: 14px;
  }

  body[data-page="home"] #home-flight-search-form .flight-topline{
    gap: 14px;
  }

  body[data-page="home"] .flight-divider{
    display: none;
  }

  body[data-page="home"] #home-flight-search-form .hotel-search-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-page="home"] #home-flight-search-form .flight-swap{
    left: 50%;
    top: 76px;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
  }

  body[data-page="home"] #home-flight-search-form .hotel-field:nth-of-type(1),
  body[data-page="home"] #home-flight-search-form .hotel-field:nth-of-type(2){
    padding-left: 0;
    padding-right: 0;
  }

  body[data-page="home"] #home-flight-search-form .hotel-field:nth-of-type(1){
    margin-bottom: 18px;
  }

  body[data-page="home"] #home-flight-search-form .flight-box{
    min-height: 64px;
  }

  body[data-page="home"] #home-flight-search-form .flight-actions{
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-page="home"] #home-flight-search-form .flight-plus-hotel,
  body[data-page="home"] #home-flight-search-form #home-flight-search-submit.hotel-submit{
    width: 100%;
    min-width: 0;
    min-height: 60px;
  }

  body[data-page="home"] .transport-quick-panel .cards{
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .hero-tool-pad > .actions[aria-label="Secondary actions"] .btn,
  body[data-page="home"] #hero-panel-transport .actions .btn{
    width: 100%;
    justify-content: flex-start;
    border-radius: 16px;
  }

  body[data-page="home"] .pad{
    padding: 18px;
  }

  body[data-page="home"] .mini-grid{
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .map-explorer__head{
    padding: 20px 18px 14px;
  }

  body[data-page="home"] .map-explorer__stage{
    padding: 0 12px 12px;
  }

  body[data-page="home"] .map-explorer__canvas{
    min-height: 340px;
    border-radius: 18px;
  }

  body[data-page="home"] .map-explorer__groups{
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .map-explorer__body{
    padding: 0 12px 12px;
  }

  body[data-page="home"] .map-explorer__footer{
    padding: 16px 18px 18px;
    align-items: stretch;
  }

  body[data-page="home"] .map-explorer__cta{
    width: 100%;
    justify-content: center;
  }

  body[data-page="home"] .flight-date-popover,
  body[data-page="home"] [data-flight-date-popover]{
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: none;
    max-height: min(78vh, 720px);
    border-radius: 18px;
  }

  body[data-page="home"] .flight-date-head{
    padding: 16px 14px 14px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  body[data-page="home"] .flight-date-head-right{
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  body[data-page="home"] .flight-date-body{
    padding: 0;
  }

  body[data-page="home"] .flight-cal-wrap,
  body[data-page="home"] [data-flight-cal-wrap]{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 16px 14px 18px;
  }

  body[data-page="home"] .flight-date-footer{
    padding: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  body[data-page="home"] .flight-date-summary{
    width: 100%;
    margin-left: 0;
    text-align: left;
  }

  body[data-page="home"] .flight-date-confirm{
    width: 100%;
  }

  body[data-page="home"] .flight-travelers-popover{
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 560px){
  body[data-page="home"] .hero-tool-title{
    font-size: .9rem;
  }

  body[data-page="home"] .hero h1{
    letter-spacing: -0.03em;
  }

  body[data-page="home"] .hero-tabs{
    grid-template-columns: 1fr 1fr;
  }

  body[data-page="home"] .map-explorer__toolbar{
    padding-left: 4px;
    padding-right: 4px;
  }

  body[data-page="home"] .map-explorer__legend{
    gap: 10px 12px;
  }

  body[data-page="home"] .flight-day{
    min-height: 38px;
  }

  body[data-page="home"] .flight-weekdays{
    gap: 6px;
  }

  body[data-page="home"] .flight-days{
    gap: 6px;
  }
}