/* Courtesywide — Tour card action fix + tablet layout pass + premium utility top bar.
   Loaded last so these are deliberate public-facing overrides. */

/* ---------------------------------------------------------------
   PREMIUM TOP BAR
   --------------------------------------------------------------- */
.site-topbar{
    position:relative;
    z-index:1001;
    width:100%;
    border-bottom:1px solid rgba(255,255,255,.1);
    background:var(--navy,#0f2742);
    color:#fff;
}
.site-topbar-inner{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
}
.site-topbar-contact,
.site-topbar-meta{
    min-width:0;
    display:flex;
    align-items:center;
    gap:20px;
}
.site-topbar a,
.site-topbar span{
    min-width:0;
}
.site-topbar a,
.site-topbar-contact>span,
.site-topbar-meta>span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:rgba(255,255,255,.9);
    font-size:11px;
    font-weight:650;
    line-height:1.2;
    white-space:nowrap;
}
.site-topbar a{transition:color .18s ease,opacity .18s ease}
.site-topbar a:hover{color:#fff}
.site-topbar svg{
    width:14px;
    height:14px;
    flex:0 0 14px;
    color:var(--primary);
    stroke-width:2;
}
.site-topbar .topbar-whatsapp{
    padding:6px 10px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.06);
    font-weight:800;
}
.site-topbar .topbar-whatsapp:hover{background:rgba(255,255,255,.12)}
.site-topbar .topbar-whatsapp svg{color:#fff}
.site-topbar .topbar-hours{color:rgba(255,255,255,.72)}

/* Toasts should sit below the utility bar + main header on first load. */
.site-toast{top:132px}

/* ---------------------------------------------------------------
   TOUR / RELATED CARD ACTIONS
   Keep action wording on one line and give prices the flexible area.
   --------------------------------------------------------------- */
.multi-price-footer,
.related-price-footer{
    gap:12px;
}
.multi-price-footer>.price-block,
.related-price-footer>div:first-child{
    min-width:0;
    flex:1 1 auto;
}
.multi-price-footer .btn,
.related-price-footer .btn{
    flex:0 0 auto;
    min-width:112px;
    padding:11px 14px;
    white-space:nowrap;
    word-break:normal;
    overflow-wrap:normal;
    line-height:1.15;
}
.multi-price-footer .btn svg,
.related-price-footer .btn svg{
    flex:0 0 16px;
}

/* Keep cards balanced even when titles/pricing contain different amounts of text. */
.card-grid>.product-card,
.catalog-grid>.catalog-card{
    min-width:0;
    height:100%;
    display:flex;
    flex-direction:column;
}
.card-grid>.product-card>.card-body,
.catalog-grid>.catalog-card>.catalog-card-body{
    min-width:0;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
}
.related-price-footer,
.multi-price-footer{
    margin-top:auto;
}

/* ---------------------------------------------------------------
   TABLET LAYOUT
   Two readable cards instead of squeezing desktop card widths.
   --------------------------------------------------------------- */
@media (max-width:1180px){
    .site-topbar-inner{min-height:36px}
    .site-topbar-contact,.site-topbar-meta{gap:14px}
    .topbar-office{display:none!important}
    .site-toast{top:116px}

    .card-grid,
    .catalog-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:20px;
    }

    .card-grid>.product-card,
    .catalog-grid>.catalog-card{
        width:100%;
    }

    .section-heading,
    .catalog-toolbar{
        gap:22px;
    }

    .journey-link-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:980px){
    .experience-type-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    .experience-type-card{
        min-height:0;
    }

    .experience-type-card p{
        min-height:0;
    }

    .solid-feature-grid.five-col{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    .catalog-toolbar,
    .section-heading{
        align-items:flex-start;
    }

    .catalog-filter{
        max-width:100%;
        justify-content:flex-start;
    }
}

@media (max-width:860px){
    .topbar-email,
    .topbar-tagline,
    .topbar-hours:not(.topbar-tagline){
        display:none!important;
    }

    .site-topbar-inner{
        justify-content:space-between;
    }

    .site-topbar-contact,
    .site-topbar-meta{
        flex:0 1 auto;
    }
}

/* ---------------------------------------------------------------
   PHONE
   Preserve the existing one-card flow and make actions full-width.
   --------------------------------------------------------------- */
@media (max-width:700px){
    .site-topbar-inner{
        min-height:34px;
        gap:10px;
    }

    .site-topbar-contact,
    .site-topbar-meta{
        gap:8px;
    }

    .site-topbar a,
    .site-topbar-contact>span,
    .site-topbar-meta>span{
        font-size:10px;
    }

    .site-topbar .topbar-whatsapp{
        padding:5px 8px;
    }

    .site-toast{top:104px}

    .card-grid,
    .catalog-grid,
    .experience-type-grid,
    .journey-link-grid,
    .solid-feature-grid.five-col{
        grid-template-columns:1fr!important;
    }

    .related-price-footer,
    .multi-price-footer{
        width:100%;
        align-items:stretch!important;
        flex-direction:column;
        gap:12px;
    }

    .related-price-footer .btn,
    .multi-price-footer .btn{
        width:100%;
        min-width:0;
    }
}

@media (max-width:430px){
    .site-topbar .topbar-phone span{
        max-width:145px;
        overflow:hidden;
        text-overflow:ellipsis;
    }
}

/* Final catalogue breakpoint rules: three columns at the desktop-menu break,
   two on tablets, and one on phones. */
@media (min-width:901px) and (max-width:1180px){
    .card-grid,
    .catalog-grid,
    .service-catalog-grid,
    .blog-grid,
    .editorial-grid,
    .destination-catalog-grid,
    .park-related-grid,
    .car-service-grid,
    .car-hire-fleet .service-catalog-grid{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
}
@media (min-width:621px) and (max-width:900px){
    .card-grid,
    .catalog-grid,
    .service-catalog-grid,
    .blog-grid,
    .editorial-grid,
    .destination-catalog-grid,
    .park-related-grid,
    .car-service-grid,
    .car-hire-fleet .service-catalog-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}
@media (max-width:620px){
    .card-grid,
    .catalog-grid,
    .service-catalog-grid,
    .blog-grid,
    .editorial-grid,
    .destination-catalog-grid,
    .park-related-grid,
    .car-service-grid,
    .car-hire-fleet .service-catalog-grid{
        grid-template-columns:1fr!important;
    }
}

/* ---------------------------------------------------------------
   FINAL HEADER DROPDOWN + BUTTON + WHATSAPP CORRECTIONS
   Dropdown labels are controls, not destination links. The actual
   collection links remain inside each mega menu (Browse all / All...).
   --------------------------------------------------------------- */
.desktop-nav button.nav-mega-trigger{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    color:#435267;
    font-family:inherit;
    font-weight:600;
    text-align:left;
    cursor:pointer;
    margin:0;
}
.desktop-nav button.nav-mega-trigger:hover,
.desktop-nav button.nav-mega-trigger:focus-visible,
.nav-mega.active>button.nav-mega-trigger{
    color:var(--primary);
}

/* Tour and hotel catalogue action labels/icons always remain white. */
.catalog-grid .btn.btn-primary,
.catalog-empty .btn.btn-primary,
.related-price-footer .btn.btn-primary,
.multi-price-footer .btn.btn-primary{
    color:#fff!important;
}
.catalog-grid .btn.btn-primary svg,
.catalog-empty .btn.btn-primary svg,
.related-price-footer .btn.btn-primary svg,
.multi-price-footer .btn.btn-primary svg{
    color:#fff!important;
    stroke:#fff!important;
}

/* Official WhatsApp brand glyph used consistently on public WhatsApp actions. */
.whatsapp-brand-icon{
    display:inline-block;
    width:1em;
    height:1em;
    flex:0 0 auto;
    fill:currentColor;
    stroke:none!important;
}
.site-topbar .topbar-whatsapp .whatsapp-brand-icon{
    width:14px;
    height:14px;
    color:#fff;
}
.floating-whatsapp .whatsapp-brand-icon{
    width:21px;
    height:21px;
    color:#fff;
}
.booking-whatsapp .whatsapp-brand-icon,
.contact-hero-card .btn .whatsapp-brand-icon{
    width:17px;
    height:17px;
}
.nav-mega.is-open>.mega-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
}
.nav-mega.is-open>.nav-mega-trigger{
    color:var(--primary);
}
.nav-mega.is-open>.nav-mega-trigger svg{
    transform:rotate(180deg);
}
.desktop-nav button.nav-mega-trigger{
    padding-top:0;
    padding-bottom:0;
}

/* Mega-menu feature CTAs: keep label and icon legible on secondary/brown buttons. */
.desktop-nav .mega-menu-feature .btn.btn-secondary,
.desktop-nav .mega-menu-feature .btn.btn-secondary:visited,
.desktop-nav .mega-menu-feature .btn.btn-secondary:hover,
.desktop-nav .mega-menu-feature .btn.btn-secondary:focus,
.desktop-nav .mega-menu-feature .btn.btn-secondary *,
.desktop-nav .mega-menu-feature .btn.btn-secondary svg {
    color:#fff !important;
}
.desktop-nav .mega-menu-feature .btn.btn-secondary svg {
    stroke:currentColor !important;
}