/* ============================================
   GLOBAL RESET (SAFE)
============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   BASE TYPOGRAPHY (SAFE)
============================================ */
html, body {
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
    background: #f5f5f5;
}

/* ============================================
   LINKS (SAFE)
============================================ */
a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: none;
}

/* ============================================
   BUTTONS (SAFE)
============================================ */
button {
    cursor: pointer;
    border: none;
    outline: none;
    font-family: inherit;
}

/* ============================================
   UNIVERSAL PILL TAB (SAFE COMPONENT)
============================================ */
.pill-tab {
    display: inline-block;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #f0ece7;
    font-size: 0.9rem;
    color: #5b5247;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.pill-tab:hover {
    background: #f2f2f2;
    border-color: #d8d2cc;
}


/* TEMP GRID LAYOUT (GLOBAL UNTIL CLEANUP PHASE 2) */
#deals-grid .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px 0;
}


/* UNIVERSAL CARD FIX — WORKS ON ALL TABS */
.deal-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Everything above the buttons grows */
.deal-card h3,
.deal-card p,
.deal-card .card-top {
    flex-grow: 1 !important;
}

/* Buttons stay at the bottom */
.deal-card .cta-container,
.deal-card a.deal-button,
.deal-card button.remind-me-btn {
    margin-top: auto !important;
}

/* Fix spacing between cards on all pages */
#deals-grid .grid {
    gap: 12px !important;
}

.card-actions {
    margin-top: auto !important;
}

/* Make Weekly cards behave like all other tabs */
body.weekly-page .deal-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Treat the button wrapper as the bottom anchor */
body.weekly-page .card-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px; /* matches the visual spacing you already have */
}

body.trending-page,
body.weekly-page {
    background: #BCB8B1 !important;
    color: #f5f4f2 !important;
}

/* Universal drawer behavior */
.ld-remind-panel {
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 16px !important;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

/* When opened */
.ld-remind-panel.open {
    max-height: 260px !important;
    padding: 16px !important;
}



/* FINAL OVERRIDE — FORCE CATEGORY BAR HORIZONTAL */
#billboard-categories {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    white-space: nowrap !important;
}

#billboard-categories .pill-tab {
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

.rts-view-btn,
.rts-add-to-cart {
    background: var(--rts-bg, #B8A99A) !important;
    color: var(--rts-text, #1A1A1A) !important;
    border: 1px solid var(--rts-border, #A8957F) !important;
}

/* =============================== */
/* READY-TO-SHIP BUTTON FIX        */
/* =============================== */

#readytoship-page .rts-view-btn,
#readytoship-page .rts-add-to-cart {
    background: var(--rts-bg) !important;
    color: var(--rts-text) !important;
    border: 1px solid var(--rts-border) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    padding: 10px 14px !important;
}

/* ============================================
   UNIFIED MEGA MENU — GLOBAL
   Works on ALL pages
============================================ */

/* Mega menu container */
.mega-menu {
    position: fixed;
    top: 140px; /* adjust if header height changes */
    left: 0;
    width: 100%;
    background: #ffffff;
    border-bottom: 2px solid #ddd;
    padding: 30px 50px;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease;
}

/* When opened */
.mega-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Close button */
.mega-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 20px;
    color: #333;
}

/* Main grid layout */
.mega-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns */
    gap: 50px;
    margin-top: 20px;
}

/* Column layout */
.mega-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Column titles */
.mega-col h3 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #162f7b;
}

/* Links */
.mega-col a {
    display: block;
    margin-bottom: 6px;
    color: #444;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.mega-col a:hover {
    color: #162f7b;
    text-decoration: underline;
}

/* Ensure the header category bar stays horizontal */
#billboard-categories {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    white-space: nowrap !important;
}

#billboard-categories .pill-tab {
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .mega-menu {
        top: 180px;
        padding: 20px;
    }

    .mega-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}


.back-btn {
    margin: 20px 0;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    font-weight: 600;
    color: #333;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: background 0.2s ease;
}

.back-btn:hover {
    background: #f2f2f2;
}
.policy-nav {
    display: flex;
    gap: 12px;
    margin: 20px 0 30px;
}

.policy-btn {
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: background 0.2s ease;
}

.policy-btn:hover {
    background: #f2f2f2;
}
.updated {
    font-size: 12px;
    color: #777;
    margin-bottom: 6px;
}
.travel-source {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.updated {
    font-size: 12px;
    color: #777;
}


.aff-toggle-btn {
  cursor: pointer;
  background: #d9ffe0;
  color: #0a7a1c;
  border: 1px solid #9ee8a8;
}

.aff-toggle-btn.off {
  background: #ffe5e5;
  color: #b80000;
  border: 1px solid #ffb3b3;
}

/* ============================================================
   ALL PRODUCTS PAGE — HEADER SPACING FIX
   ------------------------------------------------------------
   The All Products page does NOT use the same hero background
   structure as the Home page. Because the header is transparent,
   the product grid sits too close to the top.

   This margin pushes the entire grid downward so it visually
   aligns with the rest of the site and clears the floating header.
   ============================================================ */
body.allproducts-page main#home-layout {
    margin-top: 180px !important;
}
/* ============================================================
   BACKSPLASH ALIGNMENT FIX — ALL PRODUCTS PAGE
   ------------------------------------------------------------
   The header on this page is transparent, but the background
   image applied to #travel-section begins *below* the header.
   This creates a visible grey/white bar at the top.

   The negative margin pulls the background image upward so it
   sits behind the header, while the padding restores the normal
   spacing for the content inside the section.

   This mirrors the same fix used on the Home page.
   ============================================================ */
#travel-section {
    margin-top: -200px !important;
    padding-top: 200px !important;


/* GLOBAL HEADER NORMALIZATION */
#billboard-header {
    height: auto !important;
    min-height: 180px; /* stable height for all pages */
    overflow: visible;
}

/* Billboard stage stays consistent */
#billboard-stage {
    height: 120px;
    overflow: hidden;
}

.card img {
  position: relative; /* or remove absolute */
  z-index: 1;
}

.card-content {
  position: relative;
  z-index: 2;
}

.ld-remind-panel {
  position: relative;
  z-index: 20;
}

.remind-me-drawer {
  background: #ffffff !important;
  opacity: 1 !important;
}
.remind-me-drawer::before {
  background: none !important;
  opacity: 1 !important;
}
/* ============================================
   MOBILE FIRST BASELINE
============================================ */
@media (max-width: 768px) {

    body {
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    /* Make all grids collapse */
    .grid,
    #deals-grid .grid,
    .airport-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Mega menu spacing */
    .mega-menu {
        top: 120px !important;
        padding: 16px !important;
    }

    .mega-content {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Pill tabs wrap instead of overflowing */
    #billboard-categories {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    /* Checklist spacing */
    .travel-checklist {
        padding: 16px !important;
        margin: 0 !important;
    }

    /* Airport cards stack cleanly */
    .airport-card {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Spotlight box */
    .spot-card {
        padding: 16px !important;
        font-size: 16px !important;
    }
}
@media (max-width: 768px) {
    .mega-menu {
        position: absolute !important;
        width: 100% !important;
        left: 0 !important;
    }
}
@media (max-width: 768px) {
    #billboard-header {
        min-height: 120px !important;
    }
}


@media (max-width: 768px) {
    .airport-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
}
@media (max-width: 768px) {
    .checklist li {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
}
#deals-grid .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

body {background: #BCB8B1 !important;color: #f5f4f2 !important;}
#index-page .deal-card img {object-fit: contain !important;}
#index-page .deal-card .cta {background: var(--cta-bg) !important;}
.mega-col h3 {border-bottom: 2px solid #ff9900;}
#openMegaMenu {cursor: pointer;}
#index-layout {display: flex;gap: 20px;padding: 20px;}
#index-left,#index-right {flex: 1;}
#homeReminderPanel {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e7e3df;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    color: #333;
    margin-bottom: 24px;
}
#homeReminderPanel h3 {margin-bottom: 12px;font-size: 1.1rem;font-weight: 700;}
#homeReminderPanel h4 {margin-top: 18px;margin-bottom: 8px;font-size: 0.95rem;font-weight: 600;}
.home-mini-event,.home-mini-note,.home-mini-gift {
    background: #faf7f3;
    border: 1px solid #e8e2da;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 0.85rem;
}
.home-select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d8d2cc;
    background: #fff;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

#megaMenu {
    position: absolute;
    top: 60px;
    left: 0;
    background: white;
    z-index: 9999;
    display: none;
    padding: 20px 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    min-width: 260px;
    border-radius: 10px;
}
#megaMenu.open {display: block;}
#index-right {position: relative;z-index: 1;}

.gift-finder {
    background: #ffffff;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #e7e3df;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    color: #333;
    margin-bottom: 24px;
}
.gift-finder h3 {margin-bottom: 16px;font-size: 1.1rem;font-weight: 700;}
.gf-row {margin-bottom: 14px;}
.gf-row label {display: block;font-weight: 600;margin-bottom: 6px;}
.gf-row select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #d8d2cc;
    background: #fff;
}
.gf-btn {
    width: 100%;
    padding: 12px;
    background: #FF9900;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

/* MOBILE */
@media (max-width: 768px) {
    #index-layout {flex-direction: column;}
    #index-left, #index-right {width: 100%;}
}

#destinationCarousel {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e7e3df;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    color: #333;
}

.carousel-wrapper {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 12px;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
    height: 100%;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.7);
    border: none;
    font-size: 32px;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 6px;
    z-index: 10;
}

.carousel-arrow.left { left: 10px; }
.carousel-arrow.right { right: 10px; }

.carousel-caption {
    margin-top: 14px;
}

.carousel-caption h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.carousel-caption p {
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.carousel-viewmore {
    display: inline-block;
    padding: 8px 14px;
    background: #FF9900;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

#travelToolsPanel a,
#travelToolsPanel a:visited {
    color: #3b82f6 !important;
}


.signin,
.signout {
    display: none;
}

.mega-content {
    max-height: 80vh;   /* fits inside screen */
    overflow-y: auto;   /* enables scrolling */
    padding-right: 10px; /* avoids scrollbar overlap */
}