/**
 * Tourify Single Package Mobile Bottom Navigation Bar Styles
 * 
 * Clean, modern, responsive bottom navigation bar for mobile and tablet screens.
 * Supports all single tour sections: Overview, Itinerary, Highlights, Inclusions, FAQs, Reviews.
 * Horizontally swipeable with auto-centering on small mobile screens.
 * Fully modular and customizable using CSS variables.
 * 
 * @package Tourify
 * @version 1.1.0
 */

:root {
    /* Color Palette - Easily configurable for any theme/plugin */
    --tb-nav-bg: rgba(255, 255, 255, 0.96);
    --tb-nav-border: rgba(226, 232, 240, 0.9);
    --tb-nav-shadow: 0 -4px 20px rgba(0, 0, 0, 0.07), 0 -1px 3px rgba(0, 0, 0, 0.03);
    --tb-nav-text-idle: #64748b;
    --tb-nav-text-hover: #0c4a85;
    --tb-nav-primary: #005fa3;
    --tb-nav-accent: #0284c7;
    --tb-nav-active-bg: rgba(0, 95, 163, 0.08);
    --tb-nav-cta-gradient: linear-gradient(135deg, #005fa3 0%, #0284c7 100%);
    --tb-nav-cta-hover: linear-gradient(135deg, #004b82 0%, #0369a1 100%);
    --tb-nav-cta-text: #ffffff;
    --tb-nav-cta-shadow: 0 4px 14px rgba(0, 95, 163, 0.32);
    --tb-nav-height: 64px;
}

/* 1. Desktop Visibility Guard: Always hide on desktops and laptops */
@media (min-width: 1024px) {
    .tour-bottom-nav-bar {
        display: none !important;
    }
}

/* 2. Mobile & Tablet Navigation Bar Container */
@media (max-width: 1023px) {

    /* Page Bottom Spacing: Prevents the fixed bar from overlapping footer or last sections */
    body.single-package,
    .tourify-single-package-main {
        padding-bottom: calc(var(--tb-nav-height) + env(safe-area-inset-bottom, 0px) + 20px) !important;
    }

    .tour-bottom-nav-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background-color: var(--tb-nav-bg);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border-top: 1px solid var(--tb-nav-border);
        box-shadow: var(--tb-nav-shadow);
        z-index: 99990;
        padding-top: 6px;
        padding-bottom: max(6px, env(safe-area-inset-bottom, 6px));
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
        box-sizing: border-box;
    }

    .tour-bottom-nav-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 760px;
        margin: 0 auto;
        padding: 0 10px;
        gap: 6px;
    }

    /* 3. Navigation Tabs Group (Horizontally swipeable on phone viewports) */
    .tour-bottom-nav-tabs {
        display: flex;
        align-items: center;
        flex: 1;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        gap: 2px;
        min-width: 0;
        padding: 0 2px;
    }

    .tour-bottom-nav-tabs::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Android */
    }

    .tour-bottom-nav-tab {
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--tb-nav-text-idle);
        padding: 5px 6px 3px;
        border-radius: 10px;
        flex: 0 0 auto;
        min-width: 52px;
        max-width: 66px;
        transition: color 0.2s ease, transform 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }

    /* Tablet Expansion (640px to 1023px) */
    @media (min-width: 640px) {
        .tour-bottom-nav-tabs {
            justify-content: space-around;
            overflow-x: visible;
        }
        .tour-bottom-nav-tab {
            flex: 1;
            min-width: 0;
            max-width: 80px;
        }
    }

    .tour-bottom-nav-tab:hover {
        color: var(--tb-nav-text-hover);
    }

    .tour-bottom-nav-tab:active {
        transform: scale(0.94);
    }

    /* Tab Icon */
    .tour-nav-tab-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        margin-bottom: 2px;
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
    }

    .tour-nav-tab-icon svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        transition: stroke 0.2s ease;
    }

    /* Tab Label */
    .tour-nav-tab-label {
        font-family: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: 0.1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        transition: color 0.2s ease, font-weight 0.2s ease;
    }

    /* Tab Top/Bottom Active Indicator Pill */
    .tour-nav-tab-indicator {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        width: 16px;
        height: 3px;
        background-color: var(--tb-nav-primary);
        border-radius: 9999px;
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Active Tab State */
    .tour-bottom-nav-tab.is-active {
        color: var(--tb-nav-primary);
    }

    .tour-bottom-nav-tab.is-active .tour-nav-tab-icon {
        transform: translateY(-2px);
    }

    .tour-bottom-nav-tab.is-active .tour-nav-tab-label {
        font-weight: 700;
        color: var(--tb-nav-primary);
    }

    .tour-bottom-nav-tab.is-active .tour-nav-tab-indicator {
        transform: translateX(-50%) scaleX(1);
    }

    /* 4. Enquire / Book CTA Button */
    .tour-bottom-nav-cta {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        padding-left: 2px;
        border-left: 1px solid rgba(226, 232, 240, 0.7);
    }

    .tour-bottom-cta-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: transparent;
        border: none;
        padding: 4px 4px;
        border-radius: 12px;
        cursor: pointer;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.15s ease;
    }

    .tour-bottom-cta-button:active {
        transform: scale(0.96);
    }

    /* Price Preview Box */
    .tour-bottom-cta-price-box {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 1.1;
        padding-right: 2px;
    }

    .tour-bottom-cta-price-prefix {
        font-family: 'Figtree', sans-serif;
        font-size: 9px;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    .tour-bottom-cta-price-val {
        font-family: 'Cinzel', serif;
        font-size: 13px;
        font-weight: 700;
        color: #0f172a;
    }

    /* Action Pill */
    .tour-bottom-cta-action-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: var(--tb-nav-cta-gradient);
        color: var(--tb-nav-cta-text);
        padding: 8px 13px;
        border-radius: 20px;
        box-shadow: var(--tb-nav-cta-shadow);
        font-family: 'Figtree', sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.3px;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .tour-bottom-cta-button:hover .tour-bottom-cta-action-pill {
        background: var(--tb-nav-cta-hover);
        box-shadow: 0 6px 18px rgba(0, 95, 163, 0.4);
    }

    .tour-bottom-cta-icon {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        flex-shrink: 0;
    }

    /* 5. Micro-Screens Support (< 380px) */
    @media (max-width: 379px) {
        .tour-bottom-nav-container {
            padding: 0 4px;
            gap: 2px;
        }

        .tour-bottom-nav-tab {
            padding: 4px 4px 2px;
            min-width: 46px;
            max-width: 54px;
        }

        .tour-nav-tab-icon {
            width: 18px;
            height: 18px;
        }

        .tour-nav-tab-icon svg {
            width: 17px;
            height: 17px;
        }

        .tour-nav-tab-label {
            font-size: 9px;
        }

        .tour-bottom-cta-price-box {
            display: none; /* Hide mini price on micro displays to preserve CTA touch space */
        }

        .tour-bottom-cta-action-pill {
            padding: 7px 10px;
            font-size: 11px;
            gap: 4px;
        }

        .tour-bottom-cta-icon {
            width: 13px;
            height: 13px;
        }
    }
}

/* 6. Dynamic Visual Pulse for Date Picker Redirection */
@keyframes tourPulseHighlight {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 95, 163, 0.5);
        border-color: var(--tb-nav-primary);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(0, 95, 163, 0);
        border-color: var(--tb-nav-accent);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 95, 163, 0);
    }
}

.cb-nav-pulse-highlight {
    animation: tourPulseHighlight 1.5s ease-in-out infinite !important;
    border-color: var(--tb-nav-primary) !important;
}