/* Dynamic Font Import - Only import if custom fonts are specified */
    
    /* ============================================================
       BRAND TOKENS — emitted on every page; override luxury-bridge.css
       and any hardcoded gold/cream/navy in component CSS.
       Each rule below is intentionally !important so that admin
       choices win over the static CSS bundles loaded earlier.
       ============================================================ */
    :root {
        /* Primary brand */
        --brand-primary:            #31964a;
        --brand-primary-rgb:        49, 150, 74;
                --brand-primary-dark:       color-mix(in srgb, #31964a 78%, #000);
                        --brand-primary-light:      color-mix(in srgb, #31964a 60%, #fff);
                /* Tinted-white "soft" surface — used for info/non-resident
           backgrounds that previously appeared as warm yellow. */
        --brand-primary-soft:       color-mix(in srgb, #31964a 12%, #fff);
        --brand-accent:             #31964a;
        --brand-accent-rgb:         49, 150, 74;

        /* Surfaces */
        --brand-body-bg:            #ffffff;
        --brand-card-bg:            #ffffff;
        --brand-surface-alt:        #f8fafc;
        --brand-border:             #e2e8f0;

        /* Text */
        --brand-text:               #1f2937;
        --brand-heading:            #0a0f1e;
        --brand-heading-rgb:        10, 15, 30;
        --brand-muted:              #64748b;

        /* Links */
        --brand-link:               #31964a;
        --brand-link-hover:         color-mix(in srgb, #31964a 78%, #000);

        /* Buttons */
        --brand-button-bg:          #31964a;
        --brand-button-bg-rgb:      49, 150, 74;
        --brand-button-text:        #ffffff;
        --brand-button-hover-bg:    color-mix(in srgb, #31964a 78%, #000);
        --brand-button-hover-text:  #ffffff;

        /* Header */
        --brand-header-bg:          #ffffff;
        --brand-header-text:        #0a0f1e;
        --brand-header-sticky-bg:   #ffffff;
        --brand-header-sticky-text: #0a0f1e;

        /* Footer */
        --brand-footer-bg:          #0a0f1e;
        --brand-footer-text:        rgba(255,255,255,0.75);
        --brand-footer-heading:     #ffffff;

        /* Accents */
        --brand-star:               #31964a;
        --brand-price:              #31964a;
        --brand-badge-bg:           #31964a;
        --brand-badge-text:         #ffffff;

        /* ── Legacy aliases ─────────────────────────────────────
           Older CSS still references these names. Aliasing them to
           the new brand tokens means a single admin change updates
           every component file at once.
           ───────────────────────────────────────────────────── */
        --color-blue-1:             var(--brand-primary);
        --color-blue-2:             var(--brand-primary-dark);
        --color-dark-1:             var(--brand-heading);
        --lux-primary:              var(--brand-primary);
        --lux-primary-rgb:          var(--brand-primary-rgb);
        --primary-color:            var(--brand-primary);
        --primary-rgb:              var(--brand-primary-rgb);
        --main-color:               var(--brand-primary);
        --secondary-color:          var(--brand-primary-dark);

        /* Neutralise GoTrip's gold/brown utility palette (used by
           tour cards' "Featured" badge, star ratings, etc.). The
           original values are #F8D448 / #E1C03F / #FFC700 / #FFF8DD
           / #923E01 — all gold/brown. We retint them to brand green
           so utility classes like .bg-yellow-1, .text-yellow-2,
           .bg-brown-1 follow the admin colour scheme. */
        --color-yellow-1:           var(--brand-primary);
        --color-yellow-2:           var(--brand-primary);
        --color-yellow-3:           var(--brand-primary-dark);
        --color-yellow-4:           var(--brand-primary-soft);
        --color-brown-1:            var(--brand-primary-dark);
        --color-purple-1:           var(--brand-primary);

        --luxury-primary:           var(--brand-heading);
        --luxury-primary-light:     var(--brand-primary-light);
        --luxury-accent:            var(--brand-primary);
        --luxury-gold:              var(--brand-primary);
        --luxury-gold-light:        var(--brand-primary-light);
        --luxury-gold-hover:        var(--brand-primary-dark);
        --luxury-cream:             var(--brand-body-bg);
        --luxury-ivory:             var(--brand-body-bg);
        --luxury-white:             var(--brand-body-bg);
        --luxury-charcoal:          var(--brand-heading);
        --luxury-charcoal-light:    var(--brand-text);
    }

    /* Tour-card "Featured" pill: GoTrip ships text-dark-1 on top of
       the gold yellow-1 background. After we retint yellow-1 to brand
       green, the dark text would clash against medium green. Force
       a white label on the pill. */
    .cardImage__leftBadge .bg-yellow-1.text-dark-1 {
        color: var(--brand-button-text, #ffffff) !important;
    }

    /* Page surface — paint the body white (or whatever the admin chose). */
    html, body {
        background-color: var(--brand-body-bg) !important;
        color: var(--brand-text);
    }

    /* Apply dynamic typography settings (admin Settings → Style → Typography) */
            body {
                                                        color:#000000;
                                                font-size:15;
                                                                    }
    
    /* Dynamic heading fonts */
            
    /* ============================================================
       MAIN COLOR — applied to GoTrip's native classes
       (kept identical to the original rules so nothing breaks)
       ============================================================ */
    .text-blue-1,
    .header .header-menu .menu .subnav > li > a:hover,
    .bravo_wrap .footer .menu-footer .menu__nav li .subnav > li > a:hover,
    .desktopMenu .menu a:hover,
    .desktopMenu .menu .subnav__backBtn a,
    .hotel_rooms_form .nav-enquiry .enquiry-item.active span,
    .bravo_single_book .nav-enquiry .enquiry-item.active span,
    .pricing-table .title{
        color: var(--brand-primary);
    }

    .tabs.-underline .tabs__controls .tabs__button:hover,
    .tabs.-pills-2 .tabs__controls .tabs__button:hover,
    .tabs.-bookmark-2 .tabs__button:hover,
    .sidebar.-dashboard .sidebar__button.-is-active,
    .tabs.-underline-2 .tabs__controls .tabs__button.is-tab-el-active,
    .accordion.-db-sidebar .accordion__item.is-active .sidebar__button,
    .tabs.-underline-2 .tabs__controls .tabs__button:hover{
        color: var(--brand-primary) !important;
    }

    .pagination.-dots .pagination__item.is-active,
    .button.-outline-blue-1:hover,
    .form-checkbox:hover input ~ .form-checkbox__mark,
    .pricing-tabs .tab-btns:before,
    .tabs.-underline-2 .tabs__controls .tabs__button::after{
        background-color: var(--brand-primary);
    }

    .bg-blue-1,
    .button.-blue-1,
    .button.-blue-1:hover,
    .tabs.-pills-2 .tabs__controls .tabs__button.is-tab-el-active,
    .tourTypeCard.-type-1:hover,
    .noUi-connect,
    .accordion.-map .accordion__item.is-active .accordion__icon,
    .form-checkbox input:checked ~ .form-checkbox__mark{
        background-color: var(--brand-button-bg) !important;
        color: var(--brand-button-text) !important;
    }

    .button.-blue-1:hover{
        background-color: var(--brand-button-hover-bg) !important;
        color: var(--brand-button-hover-text) !important;
    }

    .border-blue-1,
    .button.-outline-blue-1,
    .noUi-handle,
    .hotel_rooms_form .nav-enquiry .enquiry-item.active span,
    .bravo_single_book .nav-enquiry .enquiry-item.active span,
    .form-checkbox input:checked ~ .form-checkbox__mark,
    .pricing-table .inner-box:hover,
    .pricing-table.tagged .inner-box{
        border-color: var(--brand-primary);
    }

    /* ============================================================
       HEADER / FOOTER COLORS — admin-controlled
       ============================================================ */
    .header,
    .header.bg-white,
    .js-header,
    .js-header.bg-white {
        background-color: var(--brand-header-bg) !important;
        color: var(--brand-header-text);
    }
    .header.is-sticky,
    .js-header.is-sticky {
        background-color: var(--brand-header-sticky-bg) !important;
        color: var(--brand-header-sticky-text);
    }
    .bravo_wrap .bravo_footer,
    .bravo_wrap .bravo_footer .main-footer {
        background-color: var(--brand-footer-bg) !important;
        color: var(--brand-footer-text) !important;
    }
    .bravo_wrap .bravo_footer .nav-footer .title,
    .bravo_wrap .bravo_footer h1,
    .bravo_wrap .bravo_footer h2,
    .bravo_wrap .bravo_footer h3,
    .bravo_wrap .bravo_footer h4,
    .bravo_wrap .bravo_footer h5,
    .bravo_wrap .bravo_footer h6 {
        color: var(--brand-footer-heading) !important;
    }

    /* ============================================================
       LINK COLORS — admin-controlled
       ============================================================ */
    a { color: var(--brand-link); }
    a:hover { color: var(--brand-link-hover); }

    /* ============================================================
       RATING STARS / PRICE / BADGE — admin-controlled
       ============================================================ */
    .list-star .booking-item-rating-stars-active,
    .booking-item-rating-stars-active,
    .text-yellow-1,
    .review-rating i.icon-star,
    .icon.-color-yellow-1 {
        color: var(--brand-star) !important;
    }
    .tourCard__price,
    .hotelCard__price,
    .price-from {
        color: var(--brand-price) !important;
    }
    .cardImage__leftBadge,
    .cardImage__leftBadge.bg-dark-1,
    .cardImage__leftBadge.bg-blue-1 {
        background-color: var(--brand-badge-bg) !important;
        color: var(--brand-badge-text) !important;
    }

    /* ============================================================
       NEUTRALISE legacy gold/cream tokens from luxury-bridge.css.
       These were the "yellow / brown / gold" elements the brand
       brief asked us to replace with the green main color.
       ============================================================ */
    /* Anything that was using the gold pill backgrounds */
    .mobile-nav-item.mobile-nav-home {
        background: var(--brand-primary) !important;
        color: var(--brand-button-text) !important;
        box-shadow: 0 6px 20px rgba(var(--brand-primary-rgb), 0.4) !important;
    }
    .mobile-nav-item.mobile-nav-home .mobile-nav-text { color: var(--brand-button-text) !important; }

    /* ============================================================
       GLOBAL BUTTON OVERRIDES — apply to every primary/submit button
       in the project (frontend AND admin). Changing the "Button
       background" picker in Admin → Style is the single source of
       truth for every button on every page.
       ============================================================ */
    /* Bootstrap-flavour buttons (used by the admin panel) */
    .btn-primary,
    .btn-info,
    .btn-success,
    .btn-bc-primary,
    button.btn-primary,
    a.btn-primary,
    input[type="submit"].btn-primary,
    .swal2-styled.swal2-confirm {
        background-color: var(--brand-button-bg) !important;
        border-color:     var(--brand-button-bg) !important;
        color:            var(--brand-button-text) !important;
    }
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .btn-info:hover,
    .btn-info:focus,
    .btn-success:hover,
    .btn-success:focus,
    .btn-bc-primary:hover,
    .btn-bc-primary:focus,
    .swal2-styled.swal2-confirm:hover {
        background-color: var(--brand-button-hover-bg) !important;
        border-color:     var(--brand-button-hover-bg) !important;
        color:            var(--brand-button-hover-text) !important;
    }
    /* Button outline variants */
    .btn-outline-primary,
    .btn-outline-info,
    .btn-outline-success {
        color:        var(--brand-button-bg) !important;
        border-color: var(--brand-button-bg) !important;
    }
    .btn-outline-primary:hover,
    .btn-outline-info:hover,
    .btn-outline-success:hover {
        background-color: var(--brand-button-bg) !important;
        color:            var(--brand-button-text) !important;
    }

    /* GoTrip frontend button utility classes */
    .button.-dark-1,
    .button.-dark-2,
    .button.-blue-1,
    .button.-blue-1-05,
    .button.-blue-1-05:hover,
    .button.-blue-2 {
        background-color: var(--brand-button-bg) !important;
        color:            var(--brand-button-text) !important;
        border-color:     var(--brand-button-bg) !important;
    }
    .button.-dark-1:hover,
    .button.-dark-2:hover,
    .button.-blue-1:hover,
    .button.-blue-2:hover {
        background-color: var(--brand-button-hover-bg) !important;
        color:            var(--brand-button-hover-text) !important;
        border-color:     var(--brand-button-hover-bg) !important;
    }
    .button.-outline-dark-1,
    .button.-outline-blue-1 {
        color:        var(--brand-button-bg) !important;
        border-color: var(--brand-button-bg) !important;
    }
    .button.-outline-dark-1:hover,
    .button.-outline-blue-1:hover {
        background-color: var(--brand-button-bg) !important;
        color:            var(--brand-button-text) !important;
    }

    /* Form submit catch-all (covers themed forms that don't use a class) */
    button[type="submit"]:not(.spectrum-action):not(.swal2-cancel):not([disabled]),
    input[type="submit"]:not([disabled]) {
        background-color: var(--brand-button-bg);
        color:            var(--brand-button-text);
        border-color:     var(--brand-button-bg);
    }

    /* ============================================================
       ADMIN CHROME — sidebar / header / accents
       ============================================================ */
    /* The admin sidebar uses navy (#1a2b47 / #1c2742). Re-skin the
       active item / hover / brand pill so it follows the brand. */
    body .main-sidebar .menu-item.active > .item,
    body .main-sidebar .menu-item.active > .item:hover,
    body .main-sidebar .menu-item > .item.active,
    body .main-sidebar .menu-item > .item:hover {
        color: var(--brand-primary) !important;
    }
    body .main-sidebar .menu-item.active > .item::before,
    body .main-sidebar .menu-item > .item.active::before {
        background: var(--brand-primary) !important;
    }
    /* Admin badges / pills */
    .admin-bar .badge.badge-primary,
    .admin-bar .label.label-primary,
    .badge-primary,
    .badge-success {
        background-color: var(--brand-primary) !important;
        color:            var(--brand-button-text, #ffffff) !important;
    }
    /* Admin tabs (.nav-tabs) — active tab uses brand */
    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        color: var(--brand-primary) !important;
        border-bottom-color: var(--brand-primary) !important;
    }
    /* Admin form focus rings */
    .form-control:focus,
    .custom-select:focus,
    .form-select:focus {
        border-color: var(--brand-primary) !important;
        box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25) !important;
    }
    /* Bootstrap text colour helpers used in admin */
    .text-primary { color: var(--brand-primary) !important; }
    .bg-primary  { background-color: var(--brand-primary) !important; color: var(--brand-button-text, #fff) !important; }
    .border-primary { border-color: var(--brand-primary) !important; }
    /* Admin links */
    .main-content a:not(.btn):not(.button) { color: var(--brand-link); }
    .main-content a:not(.btn):not(.button):hover { color: var(--brand-link-hover); }
    /* Admin checkboxes / radios */
    .custom-control-input:checked ~ .custom-control-label::before,
    .form-check-input:checked {
        background-color: var(--brand-primary) !important;
        border-color:     var(--brand-primary) !important;
    }

    /* ============================================================
       DETAIL PAGE HERO TITLE — admin-controlled size & animation
       ============================================================
       Scale, color and animation come from Admin → Style → Detail Page
       Hero Title. The clamp values below match the inline defaults in
       themes/GoTrip/Layout/app.blade.php multiplied by the chosen
       scale, so this block always wins (loaded after app.blade.php). */
    /* Typewriter title — fixed at 25px on tour, hotel, and location
       detail pages so the animated headline text and its blinking
       typewriter cursor stay the same compact size. The admin
       "Detail Title Scale" setting is intentionally ignored here. */
    .typewriter-title,
    .typewriter-title .typewriter-text {
        font-size: 25px !important;
    }
    .typewriter-title.text-70,
    .typewriter-title.text-65,
    .typewriter-title.text-60,
    .typewriter-title.text-50,
    .typewriter-title.text-40,
    .typewriter-title.text-30,
    .typewriter-title.text-25 {
        font-size: 25px !important;
    }
    @media (max-width: 767px) {
        .typewriter-title.sm\:text-65,
        .typewriter-title.sm\:text-60,
        .typewriter-title.sm\:text-50,
        .typewriter-title.sm\:text-40,
        .typewriter-title.sm\:text-25 {
            font-size: 25px !important;
        }
    }
    .modern-tour-banner .typewriter-title,
    .location_banner .text-banner .typewriter-title,
    .banner-content .typewriter-title {
        font-size: 25px !important;
    }
    @media (max-width: 768px) {
        .banner-content .typewriter-title {
            font-size: 25px !important;
        }
    }
    .bravo_hotel_detail .banner-overlay .typewriter-title,
    .bravo_hotel_detail .g-header .typewriter-title,
    .bravo_hotel_detail .hotel-detail-hero__overlay .typewriter-title {
        font-size: 25px !important;
    }
    /* Title color over the hero image */
    .typewriter-title.typewriter-title--white,
    .modern-tour-banner .typewriter-title,
    .location_banner .text-banner .typewriter-title,
    .bravo_hotel_detail .banner-overlay .typewriter-title {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff;
    }
    :root {
        --detail-anim-duration: 700ms;
    }
    .typewriter-title::after { color: #ffffff; }

    /* Animation modes — body class is set in themes/GoTrip/Layout/app.blade.php
       (".detail-anim-{value}"). Each block below makes the headline visible
       and applies the chosen motion. Typewriter is the original behaviour and
       is handled by typewriter.js — for other modes, typewriter.js skips the
       per-character animation (see body class check in that file). */
    
    
    @keyframes brand-fade        { from { opacity: 0; } to { opacity: 1; } }
    @keyframes brand-fade-up     { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes brand-slide-up    { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes brand-slide-left  { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes brand-slide-right { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes brand-zoom        { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
    @keyframes brand-bounce-in   {
        0%   { opacity: 0; transform: scale(.4); }
        60%  { opacity: 1; transform: scale(1.08); }
        100% { transform: scale(1); }
    }

    /* Custom admin CSS — written in Settings → Style → Custom CSS */