/*
 * TRAVWAP Landing V3 Overlay — CORRECTED v2
 * Based on recon: landing_new.blade.php uses CSS custom properties
 *   --color-primary: #0EA5E9;        (sky blue)
 *   --color-primary-dark: #0284C7;
 *   --color-primary-light: #38BDF8;
 *   --color-whatsapp: #25D366;
 *   --color-bg-start: #F0F9FF;
 *   --color-bg-mid: #E0F2FE;
 *   --color-text-primary: #0F172A;
 *
 * Strategy: override at :root so every inline style var(--color-primary)
 * flips to green without touching the blade. Footer keeps its existing
 * #1E293B dark-navy tone (already close to client's requested "blue light").
 */

/* ============================================================
   A2 — Theme: swap token palette to green (logo-matched)
   Override CSS custom properties at root so ALL references cascade.
   ============================================================ */
:root {
  /* Brand greens (from logo) */
  --color-primary: #22c55e !important;
  --color-primary-dark: #16a34a !important;
  --color-primary-light: #4ade80 !important;

  /* Background tints tied to primary: shift from sky-blue-50 -> green-50 */
  --color-bg-start: #f0fdf4 !important;
  --color-bg-mid: #dcfce7 !important;

  /* Text stays the same charcoal */
  --color-text-primary: #2d2d2d !important;

  /* Footer — client wanted blue-light retained */
  --twap-footer-bg: #1e3a5f;
  --twap-footer-accent: #3b82f6;
}

/* Safety net: catch any hard-coded hex values the blade didn't tokenize.
   These selectors were common in the V2 design pass. */
.btn-primary,
a.btn-primary,
button.btn-primary,
.cta-primary,
.cta.btn,
.hero-cta-primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.cta-primary:hover,
.cta.btn:hover,
.hero-cta-primary:hover {
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
}

.btn-outline,
.btn-outline-primary,
a.btn-outline {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background: transparent !important;
}
.btn-outline:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}

.text-primary, .hero-highlight, .section-tag, .section-label { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }

/* Any remaining inline sky-blue hex values */
[style*="#0EA5E9"], [style*="#0ea5e9"] { background-color: var(--color-primary) !important; }
[style*="#0284C7"], [style*="#0284c7"] { background-color: var(--color-primary-dark) !important; }
[style*="#38BDF8"], [style*="#38bdf8"] { background-color: var(--color-primary-light) !important; }

/* Star rating icons (amber #FBBF24 per recon) — leave as-is (brand accent) */

/* Footer background per brief (blue-light) */
footer, .site-footer, .main-footer {
  background: var(--twap-footer-bg) !important;
}
footer a, .site-footer a, .main-footer a { color: #cbd5e1; }
footer a:hover, .site-footer a:hover, .main-footer a:hover { color: #fff; }

/* ============================================================
   A3 — Mobile logo top-left: give it room, shrink auth buttons
   ============================================================ */
@media (max-width: 768px) {
  .navbar-brand, .logo-wrap, .site-logo, .header-logo {
    max-width: 62% !important;
    flex: 0 0 auto !important;
  }
  .navbar-brand img, .logo-wrap img, .site-logo img, .header-logo img {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
  }
  /* Auth CTA shrink on mobile */
  .nav-auth .btn,
  .nav-auth a.btn,
  .top-nav .btn-login,
  .top-nav .btn-register,
  .navbar .btn-sm-mobile,
  .header-actions .btn {
    font-size: 12px !important;
    padding: 6px 10px !important;
    line-height: 1.1 !important;
    min-width: 0 !important;
  }
  .nav-auth .label-desktop { display: none; }
}

/* ============================================================
   A4 — Mobile menu drawer (paired with landing_v3.js)
   ============================================================ */
@media (max-width: 992px) {
  .main-nav,
  .navbar-collapse,
  .nav-links,
  .mobile-nav,
  .header-nav ul {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 85vw);
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 20px rgba(0,0,0,0.08);
    z-index: 9999;
    padding: 80px 24px 24px;
    overflow-y: auto;
    transition: right 0.28s ease;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
  }
  .main-nav.is-open,
  .navbar-collapse.is-open,
  .nav-links.is-open,
  .mobile-nav.is-open,
  .header-nav ul.is-open { right: 0; }

  .main-nav a,
  .navbar-collapse a,
  .nav-links a,
  .mobile-nav a,
  .header-nav ul a {
    display: block;
    width: 100%;
    padding: 12px 8px;
    border-bottom: 1px solid #f1f5f9;
    color: var(--color-text-primary, #2d2d2d);
    font-weight: 500;
  }

  .nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
    opacity: 0; pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

  .nav-close {
    position: absolute; top: 18px; right: 18px;
    background: transparent; border: 0;
    font-size: 26px; line-height: 1;
    color: var(--color-text-primary, #2d2d2d);
    cursor: pointer;
  }

  body.nav-locked { overflow: hidden; }
}

/* ============================================================
   A1 — Flying booking photo on desktop
   ============================================================ */
@media (min-width: 992px) {
  .hero-float-booking,
  .hero-floating-img,
  .booking-float,
  .hero-side-image img {
    position: absolute !important;
    right: -12px !important;
    bottom: 40px !important;
    transform: none !important;
    max-width: 260px !important;
    z-index: 3;
    box-shadow: 0 18px 60px rgba(34, 197, 94, 0.22);
    border-radius: 16px;
    overflow: hidden;
    animation: twap-float 5s ease-in-out infinite;
  }
  @keyframes twap-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
  }
  .hero-container, .hero-wrap, .hero-section {
    position: relative;
    overflow: visible;
  }
}
@media (max-width: 991px) {
  .hero-float-booking, .hero-floating-img, .booking-float { display: none !important; }
}

/* ============================================================
   A8 — "+500 tour operators" counter section hide
   ============================================================ */
.stats-counter,
.counter-section,
.tour-operator-count,
section.counters,
.hero-stats,
.stats-row--counters,
.counter-wrap,
.brand-stats {
  display: none !important;
}


/* C3 v5: Product detail section order
   Description → Notes → Includes/Excludes → Items (items kept near includes_wrap)
   Implementation via flex/order without HTML changes. */
.product-view-body { display: flex; flex-direction: column; }
/* .desc block comes from {!! description !!} inside a .desc div */
.product-view-body > .desc { order: 1; margin-bottom: 1.5rem; }
/* notes: rendered after description in source, we want it second */
.product-view-body > ul.includes_lists:not(:has(img)) { order: 2; }
/* includes_wrap pairs (included/excluded) come earlier in source - push last */
.product-view-body.includes_wrap,
.product-view-body .includes_wrap-group { order: 3; }
/* fallback: any includes_lists in an includes wrapper go to end */
.includes_wrap .includes_lists { order: 4; }


/* v7.4 menu fix + icons */
.nav-links a {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-links a > i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: var(--twap-primary, #22c55e);
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .mobile-menu-btn,
    button.mobile-menu-btn,
    #mobileMenuBtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 10px;
        color: var(--twap-primary, #22c55e);
        font-size: 18px;
        cursor: pointer;
        z-index: 10000;
        position: relative;
    }
    .mobile-menu-btn:hover { background: rgba(34,197,94,0.08); }
    .nav-actions .btn-outline,
    .nav-actions .btn-dark { display: none !important; }
    .nav-links a > span { font-weight: 500; }
}

@media (min-width: 993px) {
    .mobile-menu-btn,
    button.mobile-menu-btn,
    #mobileMenuBtn { display: none !important; }
}


/* v7.5 X-hide + premium black footer */

body .nav-close { display: none !important; }

@media (max-width: 992px) {
    body .nav-links.is-open .nav-close {
        display: flex !important;
        align-items: center; justify-content: center;
        position: absolute; top: 16px; right: 16px;
        width: 36px; height: 36px;
        background: rgba(0,0,0,0.06); border: 0; border-radius: 50%;
        font-size: 24px; line-height: 1; color: #2d2d2d;
        cursor: pointer; z-index: 10;
    }
    body .nav-links.is-open .nav-close:hover { background: rgba(34,197,94,0.15); color: #22c55e; }

    body .nav-links {
        position: fixed !important; top: 0 !important; right: -100% !important;
        width: min(320px, 85vw) !important; height: 100vh !important;
        background: #fff !important; box-shadow: -2px 0 30px rgba(0,0,0,0.15) !important;
        z-index: 10000 !important; padding: 72px 20px 24px !important; margin: 0 !important;
        overflow-y: auto; display: flex !important; flex-direction: column !important;
        align-items: stretch !important; gap: 4px !important; list-style: none !important;
        transition: right 0.3s ease !important;
    }
    body .nav-links.is-open { right: 0 !important; }
    body .nav-links li { width: 100% !important; list-style: none !important; }
    body .nav-links a {
        display: flex !important; align-items: center; gap: 12px;
        padding: 14px 8px !important; border-bottom: 1px solid #f1f5f9;
        color: #2d2d2d !important; font-weight: 500; text-decoration: none !important;
    }
    body .nav-links a > i { color: #22c55e !important; width: 20px; text-align: center; }
    body .nav-backdrop {
        position: fixed !important; inset: 0 !important;
        background: rgba(0,0,0,0.5) !important; z-index: 9999 !important;
        opacity: 0 !important; pointer-events: none;
        transition: opacity 0.3s ease !important;
    }
    body .nav-backdrop.is-open { opacity: 1 !important; pointer-events: auto !important; }
    body.nav-locked { overflow: hidden !important; }
}

/* Premium black footer */
html body footer,
html body .footer,
html body section.footer,
html body [class*="footer-section"],
html body [class*="site-footer"] {
    background: #0a0a0a !important;
    color: #cbd5e1 !important;
    padding: 56px 0 28px !important;
    position: relative;
    border-top: 2px solid #22c55e;
}
html body footer::before, html body .footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34,197,94,0.6), transparent);
}
html body footer a, html body .footer a, html body section.footer a {
    color: #cbd5e1 !important; text-decoration: none !important;
    transition: color 0.2s ease !important;
}
html body footer a:hover, html body .footer a:hover, html body section.footer a:hover {
    color: #22c55e !important;
}
html body footer h1, html body footer h2, html body footer h3,
html body footer h4, html body footer h5, html body footer h6,
html body .footer h1, html body .footer h2, html body .footer h3,
html body .footer h4, html body .footer h5 {
    color: #f1f5f9 !important; font-weight: 600;
}
html body footer span, html body footer small, html body footer p,
html body .footer span, html body .footer small, html body .footer p {
    color: #94a3b8 !important;
}
html body footer i.fab, html body footer i.fas,
html body .footer i.fab, html body .footer i.fas {
    color: #cbd5e1 !important; transition: color 0.2s ease;
}
html body footer i.fab:hover, html body footer i.fas:hover,
html body .footer i.fab:hover, html body .footer i.fas:hover {
    color: #22c55e !important;
}


/* v7.6 MAX z-index + pointer-events force */

@media (max-width: 992px) {
    html body .nav-links {
        z-index: 2147483647 !important;
        background: #ffffff !important;
        opacity: 1 !important;
        filter: none !important;
        pointer-events: auto !important;
    }
    html body .nav-links * {
        pointer-events: auto !important;
        opacity: 1 !important;
    }
    html body .nav-links a {
        color: #1f2937 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        padding: 16px 12px !important;
        background: transparent !important;
    }
    html body .nav-links a:active {
        background: rgba(34,197,94,0.1) !important;
    }
    html body .nav-links a > i,
    html body .nav-links a > i.fas,
    html body .nav-links a > i.fa-bolt,
    html body .nav-links a > i.fa-compass,
    html body .nav-links a > i.fa-tag,
    html body .nav-links a > i.fa-circle-question {
        color: #22c55e !important;
        font-size: 18px !important;
        width: 24px !important;
        text-align: center !important;
    }
    html body .nav-backdrop {
        z-index: 2147483646 !important;
        pointer-events: none !important;
    }
    html body .nav-backdrop.is-open {
        pointer-events: auto !important;
    }
    html body .nav-links.is-open {
        right: 0 !important;
        pointer-events: auto !important;
    }
}


/* v7.7 fresh body-child drawer */

.nav-backdrop { display: none !important; }
.nav-links .nav-close { display: none !important; }

body > .twap-mobile-drawer {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: min(320px, 85vw) !important;
    height: 100vh !important;
    background: #ffffff !important;
    box-shadow: -4px 0 30px rgba(0,0,0,0.25) !important;
    z-index: 2147483647 !important;
    padding: 72px 20px 24px !important;
    margin: 0 !important;
    list-style: none !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    transition: right 0.3s ease !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body > .twap-mobile-drawer.is-open {
    right: 0 !important;
}
body > .twap-mobile-drawer li {
    list-style: none !important;
    width: 100% !important;
    margin: 0 !important;
}
body > .twap-mobile-drawer a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 8px !important;
    color: #1f2937 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: transparent !important;
    pointer-events: auto !important;
}
body > .twap-mobile-drawer a:active {
    background: rgba(34, 197, 94, 0.1) !important;
}
body > .twap-mobile-drawer a > i {
    color: #22c55e !important;
    font-size: 18px !important;
    width: 24px !important;
    text-align: center !important;
}
body > .twap-mobile-drawer .twap-drawer-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    background: #f3f4f6 !important;
    border: 0 !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
}
body > .twap-mobile-drawer .twap-drawer-close:active {
    background: rgba(34, 197, 94, 0.2) !important;
}
body.twap-nav-locked { overflow: hidden !important; }

@media (min-width: 993px) {
    body > .twap-mobile-drawer { display: none !important; }
}


/* v8.1 hero-proof hide + anchor scroll + mobile nav-actions */

/* A8 v8.1: hide hero v7 proof counters (50+/500+/4.9) */
.hero-v7__proof,
.hero-v7 .hero-v7__proof,
.hero-v7__proof-item { display: none !important; }

/* v8.1: restore login/register on mobile */
@media (max-width: 992px) {
    html body .nav-actions .btn-outline,
    html body .nav-actions .btn-dark {
        display: inline-flex !important;
        padding: 6px 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        margin: 0 4px !important;
        height: 36px !important;
        align-items: center;
        white-space: nowrap;
    }
    html body .nav-actions .btn-outline span,
    html body .nav-actions .btn-dark span { display: inline !important; }
    html body .nav-actions {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    html body .mobile-menu-btn { margin-left: 4px !important; }
}
@media (max-width: 480px) {
    html body .nav-actions .btn-outline,
    html body .nav-actions .btn-dark {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}