/*
Theme Name: MyLayover Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: Astra child theme for MyLayover.
Version: 4.11.17.1765399582
*/

/* ------------------------------------------------------------
   Design tokens (safe globally)
   ------------------------------------------------------------ */
:root {
  --color-bg: #0b1220;
  --color-primary: #ff8a5c;
  --color-secondary: #4cc9f0;
  --color-accent: #ffeecf;
  --color-text: #f9fafb;
  --color-muted: #9ca3af;
  --radius-lg: 1.4rem;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 45px rgba(0,0,0,0.35);
  --shadow-chip: 0 8px 18px rgba(0,0,0,0.3);
}

/* ------------------------------------------------------------
   HOME ONLY base look
   (Do NOT globally reset Astra sitewide)
   ------------------------------------------------------------ */
body.home {
  background:
    radial-gradient(circle at top left, rgba(76, 201, 240, 0.25), transparent 55%),
    radial-gradient(circle at bottom right, rgba(255, 138, 92, 0.25), transparent 55%),
    var(--color-bg);
  color: var(--color-text);
}

/* Keep box sizing sane on home without killing margins everywhere */
body.home * { box-sizing: border-box; }

/* ------------------------------------------------------------
   FRONT PAGE header styles — ONLY apply to the old <header>
   (So they DON'T conflict with the new shared header .mlw-app-header)
   ------------------------------------------------------------ */
body.home header:not(.mlw-app-header) {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  background: linear-gradient(
    to bottom,
    rgba(11, 18, 32, 0.92),
    rgba(11, 18, 32, 0.72),
    rgba(11, 18, 32, 0)
  );
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

body.home header:not(.mlw-app-header) .nav-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
}

body.home header:not(.mlw-app-header) .logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.home header:not(.mlw-app-header) .mlw-top-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* IMPORTANT:
   Do NOT style generic nav ul/li here.
   That was breaking the featured cities output. */

body.home header:not(.mlw-app-header) .nav-extra {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.82rem;
  color: var(--color-muted);
  white-space: nowrap;
}

body.home header:not(.mlw-app-header) .nav-pill {
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: rgba(15, 23, 42, 0.9);
  cursor: pointer;
  color: var(--color-text);
}

body.home header:not(.mlw-app-header) .nav-pill:hover {
  border-color: rgba(76, 201, 240, 0.65);
}

/* Featured cities component compatibility (home header only) */
body.home header:not(.mlw-app-header) .mlw-featured-cities {
  display: inline-flex;
  align-items: center;
}

body.home header:not(.mlw-app-header) .mlw-featured-cities__link {
  background: rgba(15, 23, 42, 0.75);
  border-color: rgba(148, 163, 184, 0.35);
  color: var(--color-text);
}

body.home header:not(.mlw-app-header) .mlw-featured-cities__link:hover {
  border-color: rgba(76, 201, 240, 0.65);
  background: rgba(76, 201, 240, 0.12);
}

/* Footer (home only) */
body.home footer:not(.mlw-app-footer) {
  font-size: 0.78rem;
  color: var(--color-muted);
  text-align: center;
  padding: 0 1.25rem 1.3rem;
}

/* Mobile header tweaks (home-only old header) */
@media (max-width: 900px) {
  body.home header:not(.mlw-app-header) .nav-extra { display: none; }
  body.home header:not(.mlw-app-header) .nav-container { gap: 0.75rem; }
  body.home header:not(.mlw-app-header) .mlw-top-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* ------------------------------------------------------------
   APP HEADER (shared across pages)
   Brand left | Featured cities centered | Actions right
   ------------------------------------------------------------ */
.mlw-app-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(11,18,32,0.70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* 3-column layout: left brand / center cities / right actions */
.mlw-app-header .nav-container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 240px 1fr 260px;
  gap: 16px;
  align-items: center;
}

/* Brand (logo + text) */
.mlw-app-header .logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
}

.mlw-app-header .mlw-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}

/* Logo size */
.mlw-app-header .mlw-brand-logo img,
.mlw-app-header .custom-logo{
  height: 28px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain;
  display:block;
}

/* Wordmark text should come from real HTML, not pseudo-content */
.mlw-app-header .mlw-brand::after{
  content: none !important;
}

/* Center ONLY the city pills */
.mlw-app-header .mlw-top-nav{
  display:flex;
  justify-content:center;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0;
  scrollbar-width: none;
}
.mlw-app-header .mlw-top-nav::-webkit-scrollbar{ display:none; }

/* Featured city pills */
.mlw-app-header .mlw-top-nav a{
  display:inline-flex;
  align-items:center;
  padding: 9px 14px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
  color: rgba(226,232,240,0.96);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.mlw-app-header .mlw-top-nav a:hover{
  transform: translateY(-1px);
  border-color: rgba(125,211,252,0.35);
  background: rgba(125,211,252,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* Right-side action buttons live RIGHT */
.mlw-app-header .nav-extra{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
}

/* Base action pill */
.mlw-app-header .nav-pill{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  font-size: 13px;
  color: rgba(248,250,252,0.95);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.mlw-app-header .nav-pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.35);
  opacity: .98;
}

/* Beta badge (visible) */
.mlw-app-header .mlw-beta{
  font-size: 11px;
  font-weight: 950;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.95);
  line-height: 1.2;
}
/* Trip Engine button — NO gradient fill, keep luxe effects */
.mlw-app-header .nav-pill-primary{
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(248,250,252,0.96);
  background: rgba(15,23,42,0.92);      /* solid */
  background-image: none !important;     /* force-remove gradient */
  box-shadow:
    0 18px 55px rgba(56,189,248,0.22),
    0 0 0 1px rgba(125,211,252,0.10);
}

/* Halo */
.mlw-app-header .nav-pill-primary::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 40%, rgba(125,211,252,0.40), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(251,191,36,0.28), transparent 60%);
  filter: blur(6px);
  opacity: 0.9;
  animation: mlwHaloPulse 2.8s ease-in-out infinite;
  pointer-events:none;
}

/* Shimmer + twinkles */
.mlw-app-header .nav-pill-primary::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 35%,
      rgba(255,255,255,0.55) 45%,
      rgba(255,255,255,0) 55%,
      rgba(255,255,255,0) 100%
    ),
    radial-gradient(circle at 22% 30%, rgba(255,255,255,0.70), transparent 18%),
    radial-gradient(circle at 60% 22%, rgba(255,255,255,0.55), transparent 20%),
    radial-gradient(circle at 82% 65%, rgba(255,255,255,0.60), transparent 18%),
    radial-gradient(circle at 38% 76%, rgba(255,255,255,0.50), transparent 20%);
  background-size: 220% 100%, 100% 100%;
  background-position: -120% 0, 0 0;
  mix-blend-mode: overlay;
  opacity: 0.20;
  animation: mlwShimmerSweep 2.2s ease-in-out infinite;
}

@keyframes mlwHaloPulse{
  0%,100%{ transform: scale(1); opacity: .85; }
  50%{ transform: scale(1.04); opacity: 1; }
}
@keyframes mlwShimmerSweep{
  0%   { background-position: -140% 0, 0 0; opacity: .35; }
  40%  { opacity: .70; }
  100% { background-position: 140% 0, 0 0; opacity: .35; }
}

@media (prefers-reduced-motion: reduce){
  .mlw-app-header .nav-pill,
  .mlw-app-header .mlw-top-nav a{
    transition: none !important;
  }
  .mlw-app-header .nav-pill-primary::before,
  .mlw-app-header .nav-pill-primary::after{
    animation: none !important;
  }
}

/* Mobile: stack nicely */
@media (max-width: 900px){
  .mlw-app-header .nav-container{
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .mlw-app-header .nav-extra{ justify-content:center; }
}

/* ------------------------------------------------------------
   APP FOOTER
   ------------------------------------------------------------ */
.mlw-app-footer{
  background: #0b1220;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.mlw-footer-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px;
  display:flex;
  justify-content:space-between;
  gap: 12px;
  color: rgba(148,163,184,0.95);
  font-size: 13px;
}

.mlw-app-footer a{
  color: rgba(125,211,252,0.95);
  text-decoration:none;
}
.mlw-footer-dot{ opacity: .55; margin: 0 8px; }

@media (max-width: 900px){
  .mlw-footer-inner{
    flex-direction: column;
    align-items: center;
    text-align:center;
  }
}

/* ------------------------------------------------------------
   FIX: "extra space at bottom" + any forced viewport heights
   ------------------------------------------------------------ */
main{ padding-bottom: 0 !important; }
.hero{
  min-height: unset !important;
  height: auto !important;
  padding-bottom: 40px !important;
}
section{ min-height: unset; }

/* ------------------------------------------------------------
   Make these links real buttons
   ------------------------------------------------------------ */

/* Read the full guide -> button */
.mlw-teaser-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(248,250,252,0.95) !important;
  text-decoration:none !important;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.mlw-teaser-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.35);
  opacity: .98;
}

/* How it works under Find layover ideas -> button */
.mlw-hero-mini-links a{
  display:inline-flex;
  align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(226,232,240,0.95) !important;
  text-decoration:none !important;
  font-weight: 900;
  margin-top: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.20);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.mlw-hero-mini-links a:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.35);
  opacity: .98;
}
/* ===============================
   FIX HEADER ALIGNMENT (FINAL)
   Paste at very bottom of style.css
   =============================== */

/* Full-bleed header (DESKTOP/TABLET) */
@media (min-width: 721px){
  .mlw-app-header{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* Mobile: DO NOT use 100vw breakout (prevents right overflow) */
@media (max-width: 720px){
  .mlw-app-header{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Give the header inner full width + real left padding */
.mlw-app-header .nav-container{
  max-width: none !important;
  width: 100% !important;
  padding-left: 28px !important;
  padding-right: 28px !important;

  /* left | center | right */
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: 18px !important;
}

/* Brand: left aligned and slightly larger */
.mlw-app-header .logo{
  justify-content: flex-start !important;
}

.mlw-app-header .mlw-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}

.mlw-app-header .mlw-brand-logo img,
.mlw-app-header .custom-logo{
  height: 32px !important;
  width: auto !important;
  display:block;
}

.mlw-app-header .mlw-brand-text{
  font-weight: 900;
  letter-spacing: 0.6px;
  font-size: 15px;
  color: rgba(248,250,252,0.95);
  text-transform: uppercase;
}

/* Keep CITY pills centered (don’t touch their styling) */
.mlw-app-header .mlw-top-nav{
  justify-content:center !important;
}

/* Keep right-side actions on the right */
.mlw-app-header .nav-extra{
  justify-content:flex-end !important;
}
/* ===============================
   SLIM RIGHT-SIDE BUTTONS ONLY
   (Does NOT affect city pills)
   =============================== */

.mlw-app-header .nav-extra .nav-pill{
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important;
}

.mlw-app-header .nav-extra .mlw-beta{
  font-size: 10.5px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
}
/* HOME ONLY: prevent extra scroll space below footer */
body.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.home > header,
body.home > footer {
  flex: 0 0 auto;
}

body.home > main {
  flex: 1 0 auto;
}

/* if anything is forcing height, this neutralizes it */
body.home main,
body.home .hero {
  min-height: 0 !important;
}
/* =========================================
   MOBILE HEADER FIX (keeps desktop unchanged)
   ========================================= */
@media (max-width: 720px){

  /* 2-row grid: brand+actions on top, cities below */
  .mlw-app-header .nav-container{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand actions"
      "cities cities" !important;
    row-gap: 10px !important;
    column-gap: 12px !important;
    align-items: center !important;
  }

  .mlw-app-header .logo{
    grid-area: brand !important;
    justify-self: start !important;
  }

  .mlw-app-header .nav-extra{
    grid-area: actions !important;
    justify-self: end !important;
    gap: 8px !important;
  }

  .mlw-app-header .mlw-top-nav{
    grid-area: cities !important;
    width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 2px !important;
  }

  /* Make sure the city pills stay in ONE horizontal row */
  .mlw-app-header .mlw-top-nav .mlw-featured-cities{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  .mlw-app-header .mlw-top-nav a{
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* Slightly slim the right-side buttons on small screens */
  .mlw-app-header .nav-extra .nav-pill{
    padding: 8px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .mlw-app-header .nav-extra .mlw-beta{
    font-size: 10px !important;
    padding: 2px 7px !important;
  }
}
/* =========================================
   MOBILE OVERFLOW + HERO FIT (keep desktop)
   ========================================= */
@media (max-width: 720px){
  html, body{ overflow-x: hidden !important; }

  /* prevent any wide elements from forcing horizontal scroll */
  body.home, body.home #page, body.home .site, body.home .site-content{
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Trip Engine glow: stop it spilling outside viewport */
  .mlw-app-header .nav-pill-primary::before{
    inset: -6px !important;
    filter: blur(5px) !important;
  }
}
/* =========================================
   MOBILE OVERFLOW FIX — Trip Engine CTA
   (desktop untouched)
   ========================================= */
@media (max-width: 720px){

  /* Allow header to render outside bounds */
  .mlw-app-header,
  .mlw-app-header .nav-container{
    overflow: visible !important;
  }

  /* Prevent right-side clipping */
  body{
    overflow-x: hidden;
  }

  /* Ensure action area can fully show CTA */
  .mlw-app-header .nav-extra{
    max-width: 100%;
    overflow: visible !important;
  }

  /* Slightly tighten Trip Engine button ONLY on small screens */
  .mlw-app-header .nav-pill-primary{
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* Reduce glow spread so it doesn’t clip */
  .mlw-app-header .nav-pill-primary::before{
    inset: -6px !important;
  }
}
/* =========================================================
   GLOBAL APP BACKGROUND (fix Astra gray on itinerary pages)
   ========================================================= */

/* Give all pages a dark base (home already has its own) */
body:not(.home){
  background:
    radial-gradient(circle at top left, rgba(76, 201, 240, 0.18), transparent 55%),
    radial-gradient(circle at bottom right, rgba(255, 138, 92, 0.18), transparent 55%),
    var(--color-bg) !important;
  color: var(--color-text);
}

/* Astra containers often paint a default gray/white background */
body:not(.home) #page,
body:not(.home) .site,
body:not(.home) .site-content,
body:not(.home) .content-area,
body:not(.home) .ast-container{
  background: transparent !important;
}
/* ============================
   MyLayover – Legal Pages
   ============================ */

.mlw-legal,
.page-privacy-policy,
.page-terms,
.page-terms-of-use {
  color: rgba(255, 255, 255, 0.85);
}

/* Headings */
.mlw-legal h1,
.mlw-legal h2,
.mlw-legal h3,
.mlw-legal h4,
.page-privacy-policy h1,
.page-privacy-policy h2,
.page-privacy-policy h3,
.page-terms h1,
.page-terms h2,
.page-terms h3,
.page-terms-of-use h1,
.page-terms-of-use h2,
.page-terms-of-use h3 {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Section numbers (e.g. "1. OUR SERVICES") */
.mlw-legal h2 strong,
.mlw-legal h3 strong {
  color: #7dd3fc; /* soft premium blue */
}

/* Paragraph spacing */
.mlw-legal p {
  line-height: 1.7;
  margin-bottom: 1.1em;
}

/* Lists */
.mlw-legal ul li {
  margin-bottom: 0.6em;
}

/* Links */
.mlw-legal a {
  color: #7dd3fc;
  text-decoration: underline;
}
.mlw-legal a:hover {
  color: #bae6fd;
}