/* ============================================================================

   FTS V2 - Responsive Breakpoints & Mobile Styles

   ============================================================================ */



.fts-v2-mobile-book-bar { display: none !important; }

@media (max-width: 992px) {
    .fts-v2-root { --fts-container-pad: 16px; }

    html body.single-trip {
        overflow-x: clip !important;
        max-width: 100% !important;
    }
    body.single-trip .fts-v2-root {
        max-width: 100% !important;
        overflow-x: clip !important;
    }
    /* Gallery breakout: do not clip horizontal overflow on layout column */
    body.single-trip .fts-v2-main-layout,
    body.single-trip .fts-v2-content-col {
        max-width: 100% !important;
        overflow-x: visible !important;
    }

    .fts-v2-main-layout { flex-direction: column !important; }

    .fts-v2-sidebar-col { width: 100% !important; }

    .fts-v2-sidebar-wrapper {
        position: relative !important;
        top: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
    }

    .fts-v2-sidebar-sticky { position: relative !important; top: 0 !important; }

    /* Tabs nav: break out to container edges (never 100vw — causes horizontal scroll) */
    .fts-v2-tabs-nav {
        display: block !important;
        margin-left: calc(-1 * var(--fts-container-pad, 16px)) !important;
        margin-right: calc(-1 * var(--fts-container-pad, 16px)) !important;
        width: calc(100% + 2 * var(--fts-container-pad, 16px)) !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

}



@media (max-width: 768px) {

    /* Hide desktop sidebar -- replaced by mobile sticky bar */

    .fts-v2-sidebar-col { display: none !important; }



    body.single-trip { padding-bottom: 96px !important; }


    /* Header */

    .fts-v2-breadcrumbs { display: none !important; }
    .fts-v2-trip-title { font-size: 20px !important; }

    /* Hero headline row: collapse to original stacked shape on mobile,
       and hide the desktop-only hero price card (mobile already has the sticky bar). */
    .fts-v2-hero-headline-row { display: block !important; gap: 0 !important; }
    .fts-v2-hero-price { display: none !important; }

    .fts-v2-hero-actions { top: 12px !important; right: 12px !important; }
    .fts-v2-hero-action { width: 40px !important; height: 40px !important; }
    .fts-v2-hero-subtitle { font-size: 13px !important; margin-bottom: 10px !important; }
    .fts-v2-hero-activity { padding: 12px !important; border-radius: 14px !important; }
    .fts-v2-activity-title { font-size: 14px !important; }
    .fts-v2-activity-item { font-size: 12px !important; }
    .fts-v2-title-row { flex-direction: column !important; gap: 8px !important; }

    .fts-v2-title-actions { align-self: flex-start !important; }

    .fts-v2-action-btn { font-size: 12px !important; }

    /* Slim page header on mobile */
    .fts-v2-page-header { display: none !important; }

    /* Mobile title block: visible on mobile, hidden on desktop */
    .fts-v2-mob-title-block {
        display: block !important;
        padding: 12px 0 4px !important;
    }
    .fts-v2-mob-title-block .fts-v2-trip-title {
        font-size: 20px !important;
        margin: 0 0 6px !important;
    }

    .fts-v2-col-gallery { margin-bottom: 0 !important; margin-top: 0 !important; }
    .fts-v2-col-description { font-size: 14px !important; }



    .fts-v2-bold-promise { font-size: 13px !important; margin-bottom: 10px !important; }
    .fts-v2-hero-benefits { grid-template-columns: 1fr !important; gap: 8px !important; margin-bottom: 12px !important; }
    .fts-v2-hero-benefits li { padding: 0 !important; font-size: 12px !important; }
    .fts-v2-hero-benefits li:nth-child(n+3) { display: none !important; }

    .fts-v2-meta-row { gap: 2px !important; font-size: 11px !important; }

    .fts-v2-meta-sep { margin: 0 6px !important; font-size: 12px !important; }

    .fts-v2-meta-item { font-size: 11px !important; gap: 4px !important; }

    .fts-v2-meta-item svg { width: 13px !important; height: 13px !important; }

    .fts-v2-meta-rating strong { font-size: 11px !important; }

    .fts-v2-stars-inline svg { width: 12px !important; height: 12px !important; }



    /* Gallery - single image on mobile */

    .fts-v2-gallery-grid {

        grid-template-columns: 1fr !important;

        grid-template-rows: 220px !important;

        height: auto !important;

    }

    .fts-v2-gallery-cell:not(.fts-v2-gallery-main) { display: none !important; }

    .fts-v2-gallery-main { grid-row: span 1 !important; }

    /* Hero gallery grid: hide on mobile, show slider instead (details in gallery.css) */
    .fts-v2-hero-gallery-grid { display: none !important; }

    .fts-v2-gallery-more {

        display: inline-flex !important;

        bottom: 10px !important;

        right: 10px !important;

        font-size: 12px !important;

        padding: 8px 12px !important;

    }



    /* Quick Bar */

    .fts-v2-quick-bar { padding: 16px 0 !important; }

    .fts-v2-quick-bar-inner { flex-direction: column !important; text-align: left !important; gap: 12px !important; }

    .fts-v2-facts-list { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 2px !important; justify-content: flex-start !important; }
    .fts-v2-fact { flex: 0 0 auto !important; }
    .fts-v2-price-current { font-size: 20px !important; }

    .fts-v2-price-old { font-size: 12px !important; }

    .fts-v2-price-person { font-size: 11px !important; }







    /* Tabs */

    .fts-v2-tabs-nav { top: 48px !important; }

    .fts-v2-tab-link { padding: 10px 12px !important; font-size: 12px !important; }



    /* Content */

    .fts-v2-container { padding: 0 16px !important; }
    .fts-v2-main-layout { padding-top: 0 !important; padding-bottom: 50px !important; }
    .fts-v2-section { margin-bottom: 12px !important; padding: 18px 14px !important; border-radius: 16px !important; box-shadow: none !important; }
    .fts-v2-section-title { font-size: 18px !important; margin-bottom: 16px !important; }
    .fts-v2-accordion-header { padding: 6px 10px !important; }
    .fts-v2-accordion-body { padding: 0 10px !important; }
    .fts-v2-accordion-item.is-open > .fts-v2-accordion-body { padding: 0 10px 10px !important; }


    .fts-v2-title-actions .fts-v2-action-btn span { display: none !important; }
    .fts-v2-title-actions .fts-v2-action-btn { padding: 10px !important; min-width: 40px !important; }

    .fts-v2-decision-card { padding: 12px 12px 10px !important; border-radius: 16px !important; }
    .fts-v2-decision-current { font-size: 20px !important; }
    .fts-v2-decision-cta { width: 100% !important; }
    .fts-v2-decision-cta-wrap { align-items: stretch !important; width: 100% !important; }
    .fts-v2-decision-main { flex-direction: column !important; align-items: stretch !important; }
    .fts-v2-subsection-title { font-size: 14px !important; }

    .fts-v2-overview-text { font-size: 14px !important; line-height: 1.75 !important; }
    .fts-v2-highlight-item { font-size: 12px !important; padding: 10px 12px !important; }

    .fts-v2-highlights { padding: 16px !important; }

    .fts-v2-highlights-grid { grid-template-columns: 1fr !important; gap: 8px !important; }

    .fts-v2-hl-icon { font-size: 14px !important; width: 24px !important; }

    .fts-v2-hl-icon i { font-size: 14px !important; }


    .fts-v2-map-embed { aspect-ratio: 4 / 3 !important; }


    /* Itinerary — GYG timeline */

    .fts-v2-tl-item { gap: 12px !important; }

    .fts-v2-tl-rail { width: 40px !important; }
    .fts-v2-tl-rail::before { width: 3px !important; }

    .fts-v2-tl-icon { width: 40px !important; height: 40px !important; }
    .fts-v2-tl-icon svg { width: 18px !important; height: 18px !important; }

    .fts-v2-tl-type-transfer .fts-v2-tl-icon { width: 32px !important; height: 32px !important; }
    .fts-v2-tl-type-food .fts-v2-tl-icon,
    .fts-v2-tl-type-optional .fts-v2-tl-icon { width: 34px !important; height: 34px !important; }

    .fts-v2-tl-title { font-size: 14px !important; }

    .fts-v2-tl-subtitle { font-size: 12px !important; }

    .fts-v2-tl-desc { font-size: 13px !important; }

    .fts-v2-tl-body { padding: 6px 0 16px !important; }

    .fts-v2-tl-toggle { width: 24px !important; height: 24px !important; font-size: 11px !important; }



    /* Trip Facts */

    .fts-v2-facts-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

    .fts-v2-fact-card { padding: 14px 10px 12px !important; border-radius: 12px !important; }

    .fts-v2-fact-card-icon { width: 38px !important; height: 38px !important; margin-bottom: 8px !important; }

    .fts-v2-fact-card-icon i { font-size: 16px !important; }

    .fts-v2-fact-card-label { font-size: 10px !important; }

    .fts-v2-fact-card-value { font-size: 13px !important; }


    /* Includes */

    .fts-v2-includes-grid { grid-template-columns: 1fr !important; gap: 10px !important; }

    .fts-v2-includes-col h3 { font-size: 14px !important; }

    .fts-v2-includes-col li { font-size: 12px !important; padding: 6px 0 !important; }



    /* Reviews */

    .fts-v2-score-num { font-size: 28px !important; }

    .fts-v2-score-count { font-size: 11px !important; }

    .fts-v2-reviews-list { grid-template-columns: 1fr !important; }

    .fts-v2-review-card { padding: 16px !important; }

    .fts-v2-review-avatar { width: 32px !important; height: 32px !important; font-size: 12px !important; }

    .fts-v2-review-meta strong { font-size: 12px !important; }

    .fts-v2-review-text { font-size: 12px !important; }



    /* FAQ */

    .fts-v2-faq-question { padding: 14px 16px !important; }

    .fts-v2-faq-question span { font-size: 12px !important; }

    .fts-v2-faq-answer { font-size: 12px !important; padding: 0 16px 14px 16px !important; }



    /* Packages */

    .fts-v2-packages-grid { grid-template-columns: 1fr !important; }

    .fts-v2-package-card { padding: 18px !important; }

    .fts-v2-package-name { font-size: 14px !important; }

    .fts-v2-pkg-current { font-size: 20px !important; }

    .fts-v2-package-select-btn { font-size: 12px !important; padding: 10px !important; }



    /* Photos */

    .fts-v2-photo-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }



    /* Related — horizontal slider on mobile */

    .fts-v2-related-section { padding: 32px 0 !important; }

    .fts-v2-related-grid.fts-v2-related-slider {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 14px !important;
        padding-bottom: 8px !important;
        scrollbar-width: none !important;
    }
    .fts-v2-related-grid.fts-v2-related-slider::-webkit-scrollbar { display: none !important; }

    .fts-v2-related-grid.fts-v2-related-slider .fts-v2-related-card {
        flex: 0 0 78% !important;
        max-width: 78% !important;
        scroll-snap-align: start !important;
    }

    .fts-v2-related-card-body h3 { font-size: 13px !important; }

    .fts-v2-related-card-meta { font-size: 11px !important; }

    .fts-v2-related-current { font-size: 13px !important; }

    .fts-v2-related-view-btn { font-size: 11px !important; }



    /* Sidebar */

    .fts-v2-booking-current-price { font-size: 24px !important; }

    .fts-v2-booking-old-price { font-size: 13px !important; }

    .fts-v2-urgency-bar { font-size: 12px !important; }

    .fts-v2-countdown-bar { font-size: 12px !important; }

    .fts-v2-countdown-timer { font-size: 14px !important; }

    .fts-v2-calendar-header { font-size: 13px !important; }

    .fts-v2-travelers-header { font-size: 13px !important; }

    .fts-v2-booking-trust-item { font-size: 11px !important; }

    .fts-v2-check-btn { font-size: 13px !important; padding: 14px 20px !important; }

    .fts-v2-payment-text { font-size: 11px !important; }

    .fts-v2-enquiry-card h4 { font-size: 14px !important; }

    .fts-v2-enquiry-card > p { font-size: 11px !important; }

}



@media (max-width: 480px) {
    .fts-v2-root { --fts-container-pad: 14px; }

    .fts-v2-container { padding: 0 14px !important; }
    .fts-v2-main-layout { padding-top: 0 !important; padding-bottom: 40px !important; }
    .fts-v2-breadcrumbs { display: none !important; }

    .fts-v2-tabs-nav { top: 44px !important; }

    .fts-v2-trip-title { font-size: 17px !important; line-height: 1.3 !important; }

    .fts-v2-meta-row { flex-wrap: wrap !important; }

    .fts-v2-meta-sep { display: none !important; }

    .fts-v2-meta-item { padding: 2px 0 !important; font-size: 10px !important; }

    .fts-v2-meta-item::after {

        content: "·" !important;

        margin-left: 8px !important;

        color: var(--v2-text-muted) !important;

    }

    .fts-v2-meta-item:last-child::after { content: none !important; }



    .fts-v2-bold-promise { font-size: 12px !important; margin-bottom: 8px !important; }
    .fts-v2-hero-benefits { gap: 6px !important; margin-bottom: 10px !important; }
    .fts-v2-hero-benefits li { padding: 0 !important; font-size: 11px !important; }
    .fts-v2-hero-benefits li:nth-child(n+3) { display: none !important; }

    .fts-v2-gallery-grid { grid-template-rows: 150px !important; }
    .fts-v2-gallery-more { font-size: 11px !important; padding: 7px 10px !important; }

    .fts-v2-quick-bar { padding: 10px 0 !important; }
    .fts-v2-quick-bar-inner { gap: 10px !important; }
    .fts-v2-facts-list { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 2px !important; }
    .fts-v2-fact { padding: 6px 8px !important; gap: 6px !important; flex: 0 0 auto !important; }
    .fts-v2-fact-icon { width: 22px !important; height: 22px !important; }
    .fts-v2-fact-icon i { font-size: 12px !important; }
    .fts-v2-fact-label { font-size: 10px !important; }
    .fts-v2-fact-value { font-size: 11px !important; }

    .fts-v2-quick-price-cta { gap: 12px !important; }
    .fts-v2-price-current { font-size: 18px !important; }
    .fts-v2-price-old { font-size: 11px !important; }
    .fts-v2-price-person { font-size: 11px !important; }
    .fts-v2-discount-badge { font-size: 11px !important; }


    .fts-v2-facts-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

    .fts-v2-fact-card { padding: 12px 8px 10px !important; }

    .fts-v2-fact-card-icon { width: 34px !important; height: 34px !important; margin-bottom: 6px !important; }

    .fts-v2-fact-card-icon i { font-size: 14px !important; }

    .fts-v2-fact-card-label { font-size: 9px !important; letter-spacing: 0.3px !important; }

    .fts-v2-fact-card-value { font-size: 12px !important; }

    .fts-v2-section-title { font-size: 16px !important; }

    .fts-v2-overview-text { font-size: 12px !important; }

    .fts-v2-highlight-item { font-size: 11px !important; }

    .fts-v2-tl-title { font-size: 13px !important; }

    .fts-v2-tl-desc { font-size: 11px !important; }

    .fts-v2-faq-question span { font-size: 11px !important; }

    .fts-v2-faq-answer { font-size: 11px !important; }

    .fts-v2-review-text { font-size: 11px !important; }

    .fts-v2-price-current { font-size: 18px !important; }

    .fts-v2-booking-current-price { font-size: 22px !important; }



    .fts-v2-mob-current { font-size: 18px !important; }

    .fts-v2-mobile-book-bar .fts-v2-mob-btn { padding: 10px 20px !important; font-size: 13px !important; }

}



/* Animations */

@keyframes fadeInUp {

    from { opacity: 0; transform: translateY(20px); }

    to { opacity: 1; transform: translateY(0); }

}

@keyframes subtlePulse {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.7; }

}

.fts-v2-section { animation: fadeInUp 0.5s ease backwards; }

.fts-v2-booking-card { animation: fadeInUp 0.6s ease backwards; }



/* Mobile Sticky Book Now Bar */

@media (max-width: 768px) {

    .fts-v2-root { padding-bottom: 0 !important; }
    .fts-v2-mobile-book-bar {

        --fts-mobbar-pad-top: 10px;
        --fts-mobbar-pad-bottom: 10px;
        --fts-mobbar-pad-x: 16px;
        --fts-mobbar-gap: 12px;
        --fts-mobbar-min-h: 64px;
        --fts-mobbar-from: 11px;
        --fts-mobbar-old: 13px;
        --fts-mobbar-current: 20px;
        --fts-mobbar-per: 12px;
        --fts-mobbar-cancel: 11px;
        --fts-mobbar-btn-font: 14px;
        --fts-mobbar-btn-pad-y: 12px;
        --fts-mobbar-btn-pad-x: 22px;
        --fts-mobbar-wa: 38px;
        position: fixed !important;

        bottom: 0 !important;

        left: 0 !important;

        transition: transform 0.3s ease, opacity 0.3s ease !important;

        right: 0 !important;

        background: var(--v2-bg, #fff) !important;

        min-height: var(--fts-mobbar-min-h) !important;
        padding-top: var(--fts-mobbar-pad-top) !important;
        padding-bottom: calc(var(--fts-mobbar-pad-bottom) + env(safe-area-inset-bottom)) !important;
        padding-left: calc(var(--fts-mobbar-pad-x) + env(safe-area-inset-left)) !important;
        padding-right: calc(var(--fts-mobbar-pad-x) + env(safe-area-inset-right)) !important;
        box-sizing: border-box !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.12) !important;

        z-index: 99999 !important;

        display: flex !important;

        gap: var(--fts-mobbar-gap) !important;
        justify-content: space-between !important;

        align-items: center !important;

        border-top: 1px solid var(--v2-border, #e9ecef) !important;

    }

    body.fts-v2-bm-open .fts-v2-mobile-book-bar {
        display: none !important;
    }
    .fts-v2-mobile-book-bar.fts-v2-mob-bar-hidden {
        transform: translateY(100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .fts-v2-mob-left {

        display: flex !important;

        flex-direction: column !important;

        gap: 2px !important;

        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .fts-v2-mob-price-row {

        display: flex !important;

        align-items: baseline !important;

        gap: 6px !important;

        flex-wrap: wrap !important;

    }

    .fts-v2-mob-from {
        font-size: var(--fts-mobbar-from) !important;
        color: var(--v2-text-muted, #718096) !important;
        font-weight: 700 !important;
    }
    .fts-v2-mob-old {

        font-size: var(--fts-mobbar-old) !important;
        color: var(--v2-text-muted, #718096) !important;

        text-decoration: line-through !important;

    }

    .fts-v2-mob-current {

        font-family: var(--v2-font-heading, 'Poppins', sans-serif) !important;

        font-weight: 800 !important;

        font-size: var(--fts-mobbar-current) !important;
        color: var(--v2-dark, #1a2332) !important;

    }

    .fts-v2-mob-per {

        font-size: var(--fts-mobbar-per) !important;
        color: var(--v2-text-light, #4a5568) !important;

        font-weight: 400 !important;

    }

    .fts-v2-mob-pkg {
        font-size: 11px !important;
        color: var(--v2-text-muted, #718096) !important;
        line-height: 1.2 !important;
        max-width: 56vw !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .fts-v2-mob-cancel {

        display: flex !important;

        align-items: center !important;

        gap: 4px !important;

        font-size: var(--fts-mobbar-cancel) !important;
        color: #38a169 !important;

        font-weight: 500 !important;

    }

    .fts-v2-mob-cancel svg {

        flex-shrink: 0 !important;

    }

    .fts-v2-mobile-book-bar .fts-v2-mob-btn {

        background: #e8501e !important;

        color: #fff !important;

        padding: var(--fts-mobbar-btn-pad-y) var(--fts-mobbar-btn-pad-x) !important;
        border-radius: 8px !important;

        font-weight: 700 !important;

        text-decoration: none !important;

        font-size: var(--fts-mobbar-btn-font) !important;
        white-space: nowrap !important;

        flex-shrink: 0 !important;

    }

    .fts-v2-mob-actions {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-shrink: 0 !important;
    }
    .fts-v2-mob-wa {
        width: var(--fts-mobbar-wa) !important;
        height: var(--fts-mobbar-wa) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        background: rgba(56, 161, 105, 0.14) !important;
        border: 1px solid rgba(56, 161, 105, 0.25) !important;
        color: #1f7a4a !important;
        text-decoration: none !important;
    }

    .fts-v2-mob-wa svg {
        width: calc(var(--fts-mobbar-wa) - 18px) !important;
        height: calc(var(--fts-mobbar-wa) - 18px) !important;
        display: block !important;
    }
}



@media (max-width: 360px) {
    .fts-v2-mobile-book-bar {
        --fts-mobbar-pad-top: 8px;
        --fts-mobbar-pad-bottom: 8px;
        --fts-mobbar-pad-x: 12px;
        --fts-mobbar-gap: 10px;
        --fts-mobbar-min-h: 58px;
        --fts-mobbar-from: 10px;
        --fts-mobbar-old: 12px;
        --fts-mobbar-current: 18px;
        --fts-mobbar-per: 11px;
        --fts-mobbar-cancel: 10px;
        --fts-mobbar-btn-font: 12px;
        --fts-mobbar-btn-pad-y: 10px;
        --fts-mobbar-btn-pad-x: 14px;
        --fts-mobbar-wa: 34px;
    }

    .fts-v2-mob-pkg { max-width: 52vw !important; }
}

@media (min-width: 361px) and (max-width: 430px) {
    .fts-v2-mobile-book-bar {
        --fts-mobbar-pad-top: 9px;
        --fts-mobbar-pad-bottom: 9px;
        --fts-mobbar-pad-x: 14px;
        --fts-mobbar-gap: 12px;
        --fts-mobbar-min-h: 62px;
        --fts-mobbar-from: 11px;
        --fts-mobbar-old: 12px;
        --fts-mobbar-current: 19px;
        --fts-mobbar-per: 11px;
        --fts-mobbar-cancel: 11px;
        --fts-mobbar-btn-font: 13px;
        --fts-mobbar-btn-pad-y: 11px;
        --fts-mobbar-btn-pad-x: 18px;
        --fts-mobbar-wa: 36px;
    }
}

@media (min-width: 431px) and (max-width: 768px) {
    .fts-v2-mobile-book-bar {
        --fts-mobbar-pad-top: 12px;
        --fts-mobbar-pad-bottom: 12px;
        --fts-mobbar-pad-x: 18px;
        --fts-mobbar-gap: 14px;
        --fts-mobbar-min-h: 70px;
        --fts-mobbar-from: 12px;
        --fts-mobbar-old: 14px;
        --fts-mobbar-current: 21px;
        --fts-mobbar-per: 12px;
        --fts-mobbar-cancel: 11px;
        --fts-mobbar-btn-font: 14px;
        --fts-mobbar-btn-pad-y: 12px;
        --fts-mobbar-btn-pad-x: 24px;
        --fts-mobbar-wa: 40px;
    }
}

/* Print-friendly */

@media print {

    .fts-v2-tabs-nav, .fts-v2-sidebar-col,

    .fts-v2-mobile-book-bar, .fts-v2-lightbox, .fts-v2-video-modal { display: none !important; }

}