/* ============================================================
   MyLayover — Itinerary Page (SINGLE SOURCE OF TRUTH)
   - No duplicates / no conflicting blocks
   - Uses full real estate, premium spacing
   - Hero CTAs have breathing room
   - Experiences grid/cards polished (NO forced equal heights)
   - WPForms styling guaranteed via .mlw-itinerary-page scope
   ============================================================ */

html, body { overflow-x: hidden !important; }
/* Smooth scroll for in-page anchor buttons */
html{
  scroll-behavior: smooth;
}

/* Offset anchors so sections aren't hidden under sticky header */
:root{
  --mlw-scroll-offset: 110px; /* tweak if needed */
}

#mlw-timeline,
#mlw-experiences,
#mlw-services{
  scroll-margin-top: var(--mlw-scroll-offset);
}

.mlw-itinerary-page{
  background:#0b1220;
  color:#f9fafb;
  padding-bottom:48px;
}
.mlw-itinerary-page *{ box-sizing:border-box; }

/* ============================================================
   Layout containers (use more real estate on large screens)
   ============================================================ */
.mlw-itinerary-section__inner,
.mlw-itinerary-engine__inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

/* ✅ Widen on desktop so sections aren’t “smushed” */
@media (min-width: 1180px){
  .mlw-itinerary-section__inner,
  .mlw-itinerary-engine__inner{
    max-width: 1320px;
    padding: 0 28px;
  }
}

.mlw-itinerary-section{ padding: 34px 0; }
.mlw-itinerary-engine{ padding: 34px 0 10px; }

/* ============================================================
   Typography + legibility
   ============================================================ */
.mlw-itinerary-page h1,
.mlw-itinerary-page h2,
.mlw-itinerary-page h3{
  color: rgba(255,255,255,.94);
  text-shadow: 0 14px 45px rgba(0,0,0,.40);
}

.mlw-itinerary-page p,
.mlw-itinerary-page li{
  color: rgba(255,255,255,.86);
}

.mlw-muted{
  color: rgba(255,255,255,.82);
  opacity: .9;
}

.mlw-wysiwyg{ line-height:1.7; }
.mlw-wysiwyg p{ margin:0 0 14px; }
.mlw-wysiwyg ul,.mlw-wysiwyg ol{ margin:0 0 14px 18px; }

/* ============================================================
   HERO (full bleed)
   ============================================================ */
.mlw-itinerary-hero{
  position:relative;
  padding:78px 0 38px;
  color:#fff;
  background:#0b1220;
  background-image:var(--mlw-hero-url);
  background-size:cover;
  background-position:center;
}

.mlw-itinerary-hero__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 80% at 30% 20%, rgba(0,0,0,.20), rgba(0,0,0,.72));
}

.mlw-itinerary-hero__inner{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

/* ✅ widen hero inner on desktop too */
@media (min-width: 1180px){
  .mlw-itinerary-hero__inner{
    max-width: 1320px;
    padding: 0 28px;
  }
}

.mlw-hero-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.mlw-hero-copy{ max-width: 820px; }

.mlw-itinerary-title{
  margin:0;
  font-size:clamp(34px,5vw,56px);
  line-height:1.05;
  font-weight:900;
  letter-spacing:-0.02em;
}

/* you asked to remove bucket subheader — keep hard-hidden */
.mlw-itinerary-sub{ display:none !important; }

/* ✅ CTA spacing / breathing room */
.mlw-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:26px;
}

/* (optional sidecard, if you re-add later) */
.mlw-hero-side{ max-width: 460px; }
.mlw-hero-sidecard{
  border-radius: 22px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
}

/* ============================================================
   Section Head
   ============================================================ */
.mlw-section-head{ margin-bottom: 16px; }

.mlw-h2{
  margin:0;
  font-size:24px;
  font-weight:950;
  letter-spacing:-.02em;
}

/* ============================================================
   Buttons (global)
   ============================================================ */
.mlw-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 18px;
  border-radius:999px;
  font-weight: 900;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.06);
  color:#f9fafb;
  text-decoration:none;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease, background .12s ease;
}
.mlw-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: rgba(76,201,240,.45);
  background: rgba(255,255,255,.09);
}
.mlw-btn--secondary{
  background: linear-gradient(140deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border-color: rgba(148,163,184,.26);
}
/* =========================================
   Premium Ghost Pill Button (Unified Style)
   ========================================= */

.mlw-btn--primary,
.mlw-engine-card .mlw-btn,
.mlw-itinerary-page .mlw-form button[type="submit"]{
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  transition:
    transform .12s ease,
    background .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}
.mlw-btn--ghost{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.18);
}
.mlw-btn--wide{ width:100%; max-width: 360px; }

/* ============================================================
   Calculator wrapper (encapsulate as ONE tool)
   ============================================================ */
.mlw-calc-wrap{
  display: grid;
  gap: 14px;

  /* tool shell */
  padding: 18px;
  margin-top: 10px;
  border-radius: 28px;
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(76,201,240,.14), transparent 55%),
    radial-gradient(900px 420px at 88% 15%, rgba(255,138,92,.10), transparent 55%),
    rgba(8,12,20,.32);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ============================================================
   Airport Tabs (polished + matches timeline palette)
   ============================================================ */
.mlw-tabs{
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
  align-items:flex-end;
  margin-top: 6px;
}

/* Base tab matches timeline bar */
.mlw-tab{
  appearance:none;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(240px 90px at 20% 10%, rgba(255,255,255,.06), transparent 60%),
    rgba(8,12,20,.32);
  color: rgba(248,250,252,.92);

  padding: 16px 18px;
  border-radius: 18px;
  cursor:pointer;

  display:flex;
  gap: 12px;
  align-items:center;

  min-height: 56px;
  max-width: 560px;

  box-shadow: 0 14px 34px rgba(0,0,0,.26);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.mlw-tab:hover{
  transform: translateY(-1px);
  border-color: rgba(125,211,252,.28);
  background:
    radial-gradient(260px 100px at 20% 10%, rgba(125,211,252,.10), transparent 60%),
    rgba(8,12,20,.34);
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
}

/* Active tab uses the SAME “cool” family as the Security block */
.mlw-tab.is-active{
  border-color: rgba(59,130,246,.35);
  background:
    radial-gradient(280px 110px at 20% 10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(280px 110px at 85% 20%, rgba(76,201,240,.10), transparent 60%),
    rgba(8,12,20,.36);
}

/* IATA pill echoes your endpoint styling */
.mlw-iata{
  font-weight: 950;
  letter-spacing: .12em;
  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(226,232,240,.95);

  min-width: 56px;
  text-align:center;
}

.mlw-tab.is-active .mlw-iata{
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.28);
}

.mlw-airport-name{
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Verdict
   ============================================================ */
#mlw-verdict{ margin-top:10px; }

.mlw-verdict-top{
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:14px;
  align-items:center;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  box-shadow:0 18px 45px rgba(0,0,0,.25);
}

.mlw-pill{
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}

.mlw-verdict-top.is-yes .mlw-pill{
  border-color:rgba(34,197,94,.35);
  background:rgba(34,197,94,.12);
}
.mlw-verdict-top.is-no .mlw-pill{
  border-color:rgba(250,204,21,.32);
  background:rgba(250,204,21,.10);
}

.mlw-verdict-emoji{
  font-size:28px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.12);
}
.mlw-verdict-title{
  font-size:20px;
  font-weight:950;
  line-height:1.2;
  color: rgba(255,255,255,.95);
}
.mlw-verdict-sub{
  margin-top:6px;
  color:rgba(255,255,255,.80);
  font-size:14px;
}

/* ============================================================
   Timeline header + typical line
   ============================================================ */
#mlw-timeline{ margin-top: 6px; }
.mlw-timeline-wrap{ margin-top: 10px; }

.mlw-timeline-sub{
  margin-top:8px;
  font-size:14px;
  color: rgba(255,255,255,.82);
}

.mlw-timeline-typical{
  margin-top:10px;
  font-size:13px;
  line-height:1.45;
  color: rgba(255,255,255,.78);
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(148,163,184,.16);
}

/* ============================================================
   Timeline
   ============================================================ */
.mlw-timeline-bar{
  display:flex;
  gap:12px;
  padding:14px;
  margin-top:12px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(8,12,20,.35);
  overflow-x:auto;
}

.mlw-timeline-bar--tall{
  min-height:140px;
  align-items:stretch;
}

.mlw-tseg{
  min-width:160px;
  min-height:112px;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.mlw-tseg.is-endpoint{
  min-width:140px;
  background:rgba(255,255,255,.05);
}

.mlw-tseg__content{
  display:grid;
  gap:10px;
  justify-items:center;
  text-align:center;
}

.mlw-tseg__label{
  font-weight:950;
  font-size:18px;
  color:rgba(255,255,255,.95);
  line-height:1.15;
}

.mlw-tseg__mins{
  font-weight:950;
  font-size:18px;
  opacity:.92;
  white-space:nowrap;
}

.mlw-tseg__time{
  margin-top:10px;
  font-size:12px;
  color:rgba(255,255,255,.70);
  text-align:center;
}
/* Optional: make "notice" segments look intentionally disabled */
.mlw-tseg.is-notice{
  background: rgba(255,255,255,.04);
  border-style: dashed;
  border-color: rgba(255,255,255,.16);
}
.mlw-tseg.is-notice .mlw-tseg__label{
  opacity: .95;
}
.mlw-tseg.is-notice .mlw-tseg__time{
  opacity: .85;
}

/* Segment accents */
.mlw-tseg--enjoy{ background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.22); }
.mlw-tseg--sec{ background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.22); }
.mlw-tseg--imm{ background:rgba(250,204,21,.10); border-color:rgba(250,204,21,.24); }
.mlw-tseg--travel{ background:rgba(244,114,182,.10); border-color:rgba(244,114,182,.22); }
.mlw-tseg--bags{ background:rgba(148,163,184,.10); border-color:rgba(148,163,184,.22); }

/* ============================================================
   Toggles
   ============================================================ */
#mlw-toggles{ margin-top: 10px; }

.mlw-toggles-head{
  display:flex;
  gap:10px;
  align-items:center;
  color:rgba(255,255,255,.82);
  font-size:14px;
  margin:10px 0 12px;
}

.mlw-info-dot{
  width:22px; height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:950;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
}

.mlw-toggle-grid{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.mlw-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(16,24,40,.45);
  min-width:280px;
}

.mlw-toggle__label{
  font-weight:900;
  color:rgba(255,255,255,.94);
  display:flex;
  align-items:center;
  gap:10px;
}

/* switch */
.mlw-switch{
  position:relative;
  width:64px;
  height:34px;
  flex:0 0 auto;
  display:inline-block;
}
.mlw-switch input{ position:absolute; inset:0; opacity:0; }
.mlw-switch__slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  transition:all .22s ease;
}
.mlw-switch__slider:before{
  content:"";
  position:absolute;
  width:26px; height:26px;
  left:4px;
  top:50%;
  transform:translateY(-50%);
  border-radius:999px;
  background:rgba(255,255,255,.95);
  transition:all .22s ease;
}
.mlw-switch input:checked + .mlw-switch__slider{
  background:rgba(96,165,250,.35);
  border-color:rgba(96,165,250,.60);
}
.mlw-switch input:checked + .mlw-switch__slider:before{ left:34px; }

/* ============================================================
   Special Feature
   ============================================================ */
.mlw-special{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 24px 60px rgba(0,0,0,.30);
  overflow: hidden;
}

.mlw-special__grid{ display:grid; grid-template-columns: 1.1fr .9fr; }
@media (max-width: 860px){ .mlw-special__grid{ grid-template-columns: 1fr; } }

.mlw-special__media{
  min-height: 280px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.mlw-special__img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  opacity:0;
}
.mlw-special__media:not([style*="background-image"]) .mlw-special__img{ opacity:1; }

.mlw-special__body{ padding: 22px; }
.mlw-special__body h2{
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 950;
}
.mlw-special__body p{
  margin: 0 0 16px;
  color: rgba(255,255,255,.82);
  line-height: 1.55;
}

/* ============================================================
   Experiences (Tours + Lounge etc.)
   ============================================================ */
.mlw-experience-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 16px;
  align-items: start;
}
@media (max-width: 900px){
  .mlw-experience-grid{ grid-template-columns: 1fr; }
}

.mlw-exp-card{
  padding: 22px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 10%, rgba(76,201,240,0.10), transparent 55%),
    radial-gradient(circle at 90% 30%, rgba(255,138,92,0.10), transparent 55%),
    linear-gradient(140deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)),
    rgba(15,23,42,0.28);
  border: 1px solid rgba(148,163,184,0.18);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.14);
  height: auto;
  align-self: start;
}

.mlw-exp-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.mlw-exp-card__head h3{
  margin:0;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.01em;
}

/* Partner pill */
.mlw-partner-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(76,201,240,.14);
  border: 1px solid rgba(76,201,240,.34);
  color: rgba(255,255,255,.92);
}
.mlw-card__partnerline{
  margin: 10px 0 14px;
  color: rgba(255,255,255,.82);
  line-height: 1.5;
}

/* ============================================================
   Plugin box (Wegotrip etc.)
   ============================================================ */
.mlw-plugin-box{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
  padding: 14px; /* slightly tighter */
}

/* keep placeholder boxes from being absurdly tall */

/* ============================================================
   ✅ TOURS SIZE FIX (NO TRANSFORMS)
   - Keep horizontal: give it enough width
   - Stop billboard: cap + center
   ============================================================ */

/* Make Tours span both columns so it has room to stay horizontal */
@media (min-width: 901px){
  .mlw-itinerary-page #mlw-book-tours{
    grid-column: 1 / -1;
  }
}

/* Cap Tours to a normal "content" width and center it */
.mlw-itinerary-page #mlw-book-tours{
  max-width: 980px;      /* normal size */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Tighten padding so the widget doesn't feel enormous */
.mlw-itinerary-page #mlw-book-tours.mlw-exp-card{
  padding: 30px;
}

/* Tighten the widget frame a bit */
.mlw-itinerary-page #mlw-book-tours .mlw-plugin-box{
  padding: 12px;
  overflow: hidden; /* prevents random overflow */
}

/* Keep injected widget content from forcing layout weirdness */
.mlw-itinerary-page #mlw-book-tours .mlw-plugin-box img,
.mlw-itinerary-page #mlw-book-tours .mlw-plugin-box iframe,
.mlw-itinerary-page #mlw-book-tours .mlw-plugin-box video{
  max-width: 100% !important;
  height: auto !important;
}

/* ============================================================
   ✅ SERVICES TILES (same structure as layovers page)
   ============================================================ */
.mlw-itinerary-page .mlw-cards{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
  margin-top: 16px;
}

.mlw-itinerary-page .mlw-card{
  border-radius: 22px;
  padding: 22px;
  border: 1px solid rgba(148,163,184,0.18);
  background:
    linear-gradient(140deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)),
    rgba(15,23,42,0.28);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.14);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mlw-itinerary-page .mlw-card h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.mlw-itinerary-page .mlw-card .mlw-cta-row{
  margin-top: auto;
}

/* ============================================================
   WPForms (Guaranteed styling)
   ============================================================ */
.mlw-itinerary-page .mlw-form .wpforms-container{
  max-width: 880px;
  margin: 0 auto;
}

.mlw-itinerary-page .mlw-form .wpforms-form{
  padding: 24px;
  border-radius: 28px;
  background:
    radial-gradient(1200px 400px at 15% 0%, rgba(76,201,240,.20), transparent 55%),
    radial-gradient(900px 340px at 85% 15%, rgba(255,138,92,.16), transparent 55%),
    linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    rgba(12,18,34,.40);
  border: 1px solid rgba(148,163,184,.22);
  backdrop-filter: blur(18px);
  box-shadow:
    0 35px 110px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.mlw-itinerary-page .mlw-form .wpforms-field{
  margin: 0 !important;
  padding: 10px 0 !important;
}

.mlw-itinerary-page .mlw-form .wpforms-field-label{
  color: rgba(255,255,255,.92) !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em;
  margin-bottom: 8px !important;
}
.mlw-itinerary-page .mlw-form .wpforms-required-label{
  color: rgba(255,138,92,1) !important;
}

.mlw-itinerary-page .mlw-form .wpforms-field-container{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}

.mlw-itinerary-page .mlw-form .wpforms-field-textarea,
.mlw-itinerary-page .mlw-form .wpforms-field-checkbox,
.mlw-itinerary-page .mlw-form .wpforms-field-radio,
.mlw-itinerary-page .mlw-form .wpforms-field-divider{
  grid-column: 1 / -1 !important;
}

.mlw-itinerary-page .mlw-form input[type="text"],
.mlw-itinerary-page .mlw-form input[type="email"],
.mlw-itinerary-page .mlw-form input[type="tel"],
.mlw-itinerary-page .mlw-form input[type="url"],
.mlw-itinerary-page .mlw-form input[type="date"],
.mlw-itinerary-page .mlw-form input[type="time"],
.mlw-itinerary-page .mlw-form select,
.mlw-itinerary-page .mlw-form textarea{
  width: 100% !important;
  padding: 12px 14px !important;
  min-height: 44px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(10,16,28,.45) !important;
  color: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 60px rgba(0,0,0,.20) !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.mlw-itinerary-page .mlw-form textarea{
  min-height: 120px !important;
  resize: vertical;
}

.mlw-itinerary-page .mlw-form input::placeholder,
.mlw-itinerary-page .mlw-form textarea::placeholder{
  color: rgba(255,255,255,.65) !important;
  opacity: 1 !important;
}

.mlw-itinerary-page .mlw-form input:focus,
.mlw-itinerary-page .mlw-form textarea:focus,
.mlw-itinerary-page .mlw-form select:focus{
  outline: none !important;
  border-color: rgba(76,201,240,.62) !important;
  box-shadow:
    0 0 0 4px rgba(76,201,240,.18),
    0 0 0 8px rgba(255,138,92,.10),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 26px 80px rgba(0,0,0,.26) !important;
}

.mlw-itinerary-page .mlw-form .wpforms-submit-container{
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  padding-top: 6px !important;
}

.mlw-itinerary-page .mlw-form button[type="submit"]{
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
  color: #0b1220 !important;
  background:
    radial-gradient(80px 30px at 30% 25%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(120deg, rgba(76,201,240,1), rgba(255,138,92,1)) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.30);
  transition: transform .12s ease, filter .12s ease;
}
.mlw-itinerary-page .mlw-form button[type="submit"]:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
}

@media (max-width: 760px){
  .mlw-itinerary-page .mlw-form .wpforms-field-container{ grid-template-columns: 1fr; }
}

/* ============================================================
   Trip Engine card
   ============================================================ */
.mlw-engine-card{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(80% 130% at 20% 10%,
      rgba(86,182,255,.20),
      rgba(255,170,120,.10),
      rgba(255,255,255,.05));
  box-shadow: 0 26px 70px rgba(0,0,0,.30);
  padding: 22px;
  display: grid;
  gap: 10px;
}

.mlw-engine-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mlw-beta-pill{
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
}
/* =========================================
   Trip Engine CTA — Centered layout
   ========================================= */

.mlw-engine-card{
  text-align: center;
  justify-items: center;
}

.mlw-engine-card p{
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.mlw-engine-card .mlw-engine-head{
  justify-content: center;
}
/* ============================================================
   Tours widget (Wegotrip) — FIXED
   - Keep horizontal
   - Normal sized
   - No dead space
   ============================================================ */

.mlw-itinerary-page #mlw-book-tours.mlw-exp-card{
  padding: 18px !important;
}

/* Give the widget a nice “normal” frame */
.mlw-itinerary-page #mlw-book-tours .mlw-plugin-box{
  max-width: 980px !important;     /* normal width */
  margin: 0 auto !important;       /* center */
  padding: 14px !important;
  overflow: hidden !important;
  display: block !important;       /* IMPORTANT: don’t flex this */
}

/* Force whatever the script injects to actually use the available width */
.mlw-itinerary-page #mlw-book-tours .mlw-plugin-box > *{
  width: 100% !important;
  max-width: none !important;
}

/* If it’s an iframe embed, size it reasonably (no weird tall stretching) */
.mlw-itinerary-page #mlw-book-tours .mlw-plugin-box iframe{
  width: 100% !important;
  max-width: none !important;
  height: 500px !important;        /* “normal” height */
  min-height: 500px !important;
  display: block !important;
  border: 0 !important;
}

/* Desktop: slightly taller, still horizontal */
@media (min-width: 900px){
  .mlw-itinerary-page #mlw-book-tours .mlw-plugin-box iframe{
    height: 500px !important;
    min-height: 500px !important;
  }
}
/* ============================================================
   Timeline: endpoint sublines + meta
   (supports Arrive/Depart integrated ranges)
   ============================================================ */

.mlw-tseg__sub{
  font-size: 13px;
  font-weight: 850;
  color: rgba(255,255,255,.86);
  opacity: .95;
  line-height: 1.2;
  white-space: nowrap;
}

.mlw-tseg__meta{
  margin-top: -2px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  line-height: 1.2;
}

/* Make endpoint cards read cleaner (less “empty”) */
.mlw-tseg.is-endpoint .mlw-tseg__content{
  gap: 8px;
}

/* Give time range a little more presence on endpoints */
.mlw-tseg.is-endpoint .mlw-tseg__time{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.75);
}
/* =========================================
   Advice section = one docked half-bubble
   Moves heading + verdict together
   ========================================= */

/* Target the section that contains the verdict */
.mlw-itinerary-page #mlw-verdict{
  /* anchor for :has() fallback below if needed */
}

/* Modern browsers: style the parent section that contains the verdict */
@supports selector(:has(*)){
  .mlw-itinerary-page .mlw-itinerary-section:has(#mlw-verdict){
    /* pull the whole advice module upward */
    margin-top: -34px !important;
    padding-top: 0 !important;

    /* make the whole module the half-bubble */
    border-radius: 34px 34px 22px 22px;
    border: 1px solid rgba(255,255,255,.12);
    background:
      radial-gradient(900px 320px at 18% 0%, rgba(76,201,240,.14), transparent 58%),
      radial-gradient(900px 320px at 88% 10%, rgba(255,138,92,.10), transparent 58%),
      rgba(8,12,20,.34);
    box-shadow: 0 30px 90px rgba(0,0,0,.42);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    /* breathe */
    padding-bottom: 22px !important;
  }

  /* Ensure inner wrapper doesn’t “cap” the bubble */
  .mlw-itinerary-page .mlw-itinerary-section:has(#mlw-verdict) .mlw-itinerary-section__inner{
    padding-top: 22px !important;
  }

  /* give the heading less spacing since we’re docked */
  .mlw-itinerary-page .mlw-itinerary-section:has(#mlw-verdict) .mlw-section-head{
    margin-bottom: 12px !important;
  }

  /* Verdict card inside: make it flatter (so bubble is the container) */
  .mlw-itinerary-page .mlw-itinerary-section:has(#mlw-verdict) #mlw-verdict{
    margin-top: 10px !important;
  }

  .mlw-itinerary-page .mlw-itinerary-section:has(#mlw-verdict) #mlw-verdict .mlw-verdict-top{
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.26) !important;
    border-radius: 22px !important;
  }
}
/* =========================================
   Advice module polish (fix “off” look)
   Paste at VERY BOTTOM
   ========================================= */

@supports selector(:has(*)){
  .mlw-itinerary-page .mlw-itinerary-section:has(#mlw-verdict){
    /* Pull it up LESS so it doesn’t fight the hero */
    margin-top: -16px !important;

    /* More breathing room inside */
    padding-top: 26px !important;
    padding-bottom: 26px !important;

    /* Make it feel like a “half bubble” not a full panel */
    border-radius: 40px 40px 26px 26px !important;

    /* Slightly lighter so hero still feels dominant */
    background:
      radial-gradient(900px 340px at 18% 0%, rgba(76,201,240,.12), transparent 60%),
      radial-gradient(900px 340px at 88% 10%, rgba(255,138,92,.09), transparent 60%),
      rgba(8,12,20,.26) !important;

    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 26px 80px rgba(0,0,0,.40) !important;

    position: relative !important;
  }

  /* Add a top fade so it blends into the hero */
  .mlw-itinerary-page .mlw-itinerary-section:has(#mlw-verdict)::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height: 34px;
    border-radius: 40px 40px 0 0;
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.28),
      rgba(0,0,0,0)
    );
    pointer-events:none;
  }

  /* Reduce heading heaviness inside the bubble */
  .mlw-itinerary-page .mlw-itinerary-section:has(#mlw-verdict) .mlw-section-head{
    margin-bottom: 14px !important;
  }

  /* Give the title just a touch less size so it doesn’t feel jammed */
  .mlw-itinerary-page .mlw-itinerary-section:has(#mlw-verdict) .mlw-h2{
    font-size: 22px !important;
    letter-spacing: -0.01em !important;
  }

  /* Verdict card: make it feel nested */
  .mlw-itinerary-page .mlw-itinerary-section:has(#mlw-verdict) #mlw-verdict{
    margin-top: 6px !important;
  }

  .mlw-itinerary-page .mlw-itinerary-section:has(#mlw-verdict) #mlw-verdict .mlw-verdict-top{
    border-radius: 24px !important;
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow:
      0 18px 55px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
}
/* =========================================
   FIX: Checkbox text color (WPForms)
   ========================================= */

.mlw-itinerary-page .wpforms-form .wpforms-field-checkbox,
.mlw-itinerary-page .wpforms-form .wpforms-field-checkbox *{
  color: rgba(255,255,255,.94) !important;
}

/* Specifically target checkbox labels */
.mlw-itinerary-page .wpforms-form .wpforms-field-checkbox label{
  color: rgba(255,255,255,.94) !important;
  font-weight: 800;
}

/* Checkbox option text (covers different WPForms markup variants) */
.mlw-itinerary-page .wpforms-form .wpforms-field-checkbox li,
.mlw-itinerary-page .wpforms-form .wpforms-field-checkbox li span{
  color: rgba(255,255,255,.92) !important;
}

/* Optional: slightly dim secondary/help text if any */
.mlw-itinerary-page .wpforms-form .wpforms-field-checkbox .wpforms-field-description{
  color: rgba(255,255,255,.75) !important;
}
/* =========================================
   Form Submit — Premium Ghost Pill (Match CTA)
   ========================================= */

.mlw-itinerary-page .mlw-form button[type="submit"]{
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;

  padding: 14px 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 18px 40px rgba(0,0,0,.35);

  backdrop-filter: blur(10px);
  transition:
    transform .12s ease,
    background .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}
/* =========================================
   Wegotrip widget: stop “active/center” card dimming
   ========================================= */

.mlw-itinerary-page #mlw-book-tours .mlw-plugin-box *{
  /* prevent weird inherited opacity filters */
  filter: none !important;
}

/* Common carousel "active/center" classes */
.mlw-itinerary-page #mlw-book-tours .swiper-slide-active,
.mlw-itinerary-page #mlw-book-tours .swiper-slide-duplicate-active,
.mlw-itinerary-page #mlw-book-tours .slick-center,
.mlw-itinerary-page #mlw-book-tours .is-active,
.mlw-itinerary-page #mlw-book-tours .active,
.mlw-itinerary-page #mlw-book-tours .selected{
  opacity: 1 !important;
  filter: none !important;
}

/* Remove dark overlay pseudo-elements if they exist */
.mlw-itinerary-page #mlw-book-tours .swiper-slide-active::before,
.mlw-itinerary-page #mlw-book-tours .swiper-slide-active::after,
.mlw-itinerary-page #mlw-book-tours .slick-center::before,
.mlw-itinerary-page #mlw-book-tours .slick-center::after,
.mlw-itinerary-page #mlw-book-tours .active::before,
.mlw-itinerary-page #mlw-book-tours .active::after{
  opacity: 0 !important;
  background: transparent !important;
}
/* =========================================
   Wegotrip widget: “Show more” button restyle
   ========================================= */

.mlw-itinerary-page #mlw-book-tours .mlw-plugin-box button,
.mlw-itinerary-page #mlw-book-tours .mlw-plugin-box .btn,
.mlw-itinerary-page #mlw-book-tours .mlw-plugin-box a.btn{
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 900 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 18px 40px rgba(0,0,0,.35) !important;
  transition: transform .12s ease, background .12s ease, border-color .12s ease !important;
}

.mlw-itinerary-page #mlw-book-tours .mlw-plugin-box button:hover,
.mlw-itinerary-page #mlw-book-tours .mlw-plugin-box .btn:hover,
.mlw-itinerary-page #mlw-book-tours .mlw-plugin-box a.btn:hover{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.32) !important;
  transform: translateY(-1px);
}
/* ============================================================
   Timeline: keep ONE ROW (no wrap), compress to fit, mobile safe
   ============================================================ */

/* One-row timeline that can compress */
.mlw-timeline-bar{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;

  gap: 10px !important;            /* slightly tighter */
  padding: 14px !important;

  overflow: hidden !important;     /* no scroll, no wrap */
}

/* Make each segment shrinkable */
.mlw-tseg{
  flex: 1 1 0 !important;          /* critical: allows shrinking */
  min-width: 0 !important;         /* critical: allows text to compress */
  width: auto !important;

  padding: 14px !important;
  border-radius: 18px !important;
}

/* Endpoints should be smaller so they don't steal space */
.mlw-tseg.is-endpoint{
  flex: 0 0 140px !important;      /* fixed + compact */
  min-width: 140px !important;
}

/* Notice/warning blocks should be compact */
.mlw-tseg.is-notice{
  flex: 0 0 180px !important;      /* keep readable but not huge */
  min-width: 180px !important;
}

/* Keep labels from forcing overflow */
.mlw-tseg__label,
.mlw-tseg__sub{
  white-space: normal !important;
  word-break: break-word !important;
  hyphens: auto;
}

.mlw-tseg__label{
  font-size: 16px !important;
  line-height: 1.15 !important;
}

.mlw-tseg__mins{
  font-size: 17px !important;
}

/* If the container gets tighter, reduce padding/font slightly */
@media (max-width: 980px){
  .mlw-timeline-bar{ gap: 8px !important; padding: 12px !important; }
  .mlw-tseg{ padding: 12px !important; }
  .mlw-tseg__label{ font-size: 15px !important; }
  .mlw-tseg__mins{ font-size: 16px !important; }
  .mlw-tseg.is-endpoint{ flex-basis: 128px !important; min-width: 128px !important; }
  .mlw-tseg.is-notice{ flex-basis: 168px !important; min-width: 168px !important; }
}

/* Mobile: vertical stack (timeline still reads like a timeline) */
@media (max-width: 720px){
  .mlw-timeline-bar{
    flex-direction: column !important;
    overflow: visible !important;  /* no hidden content on mobile */
  }
  .mlw-tseg,
  .mlw-tseg.is-endpoint,
  .mlw-tseg.is-notice{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}