/**
 * Palace Tours Display - Mobile & Tablet Sticky Bars + Layout
 * Version: 21.1.0
 * 
 * CRITICAL: .ptd-mobile-sticky-header and .ptd-tabs-nav-mobile live INSIDE
 * .ptd-sticky-wrapper. We must NOT hide .ptd-sticky-wrapper itself, only
 * the desktop nav (.ptd-tabs-nav-desktop) within it.
 */

/* ============================================================
   MOBILE & TABLET RESPONSIVE (Up to 1024px)
   Covers iPad, iPad Pro, and all mobile devices
   ============================================================ */

@media (max-width: 1024px) {

    /* --- 1. GENERAL LAYOUT ADJUSTMENTS --- */
    body {
        padding-bottom: 70px !important; 
    }

    .ptd-overview-content,
    .ptd-highlights-content,
    .ptd-itinerary-days,
    .ptd-itinerary-header-content,
    .ptd-itinerary-simple,
    .ptd-tour-container {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .ptd-tour-container {
        padding: 0 !important;
        margin: 0 !important;
    }

    .ptd-overview,
    .ptd-itinerary,
    .ptd-booking-section,
    .ptd-tips-content,
    .ptd-gallery,
    .ptd-terms-content {
        padding: 15px !important;
        max-width: 100% !important;
    }

    /* Hide ONLY the desktop navigation - NOT the whole sticky wrapper! */
    .ptd-tabs-nav-desktop {
        display: none !important;
    }

    /* Make the sticky wrapper itself invisible but keep children accessible */
    .ptd-sticky-wrapper {
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /* --- 2. PERMANENT BOTTOM GOLD MENU --- */
    .ptd-tabs-nav-mobile {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        background: #c9a227 !important;
        border-top: 1px solid #b08d20 !important;
        z-index: 999999 !important;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.1) !important;
        padding: 0 !important;
        margin: 0 !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        justify-content: stretch !important;
        align-items: stretch !important;
        transform: translateZ(0);
    }

    .ptd-tab-btn-mobile {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        opacity: 0.8;
        font-size: 10px !important;
        padding: 8px 0 !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    
    .ptd-tab-btn-mobile.active {
        opacity: 1;
        background: rgba(0,0,0,0.1) !important;
        font-weight: bold !important;
        color: #fff !important;
    }

    .ptd-tab-icon-mobile {
        font-size: 18px !important;
        margin-bottom: 2px !important;
        display: block !important;
    }
    
    .ptd-tab-label-mobile {
        display: block !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .ptd-tab-btn-download-mobile {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255,255,255,0.15) !important;
        border: none !important;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 10px !important;
        padding: 8px 0 !important;
        cursor: pointer !important;
    }

    /* --- 3. TOP STICKY BAR (TOUR NAME) --- */
    .ptd-mobile-sticky-header {
        display: none !important;
        position: fixed !important;
        top: var(--ptd-header-offset, 60px) !important; 
        left: 0 !important;
        right: 0 !important;
        height: 50px !important;
        background: #c9a227 !important;
        color: #ffffff !important;
        z-index: 999990 !important;
        padding: 0 15px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
        align-items: center !important;
        justify-content: center !important;
        transition: opacity 0.2s ease;
        /* Hardware acceleration - prevents disappearing on iOS scroll */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* JS adds .visible class on scroll */
    .ptd-mobile-sticky-header.visible {
        display: flex !important;
    }

    .ptd-sticky-tour-name {
        font-family: 'Playfair Display', Georgia, serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100%;
        text-align: center;
        color: #fff !important;
    }
}

/* Smaller screens */
@media (max-width: 480px) {
    .ptd-sticky-tour-name {
        font-size: 14px !important;
    }
    .ptd-tab-label-mobile {
        font-size: 9px !important;
    }
}


/* ============================================================
   BOOKING SECTION STYLES
   ============================================================ */
.ptd-booking-loading {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}
.ptd-loading-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #c9a227;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: ptd-spin 0.8s linear infinite;
    margin: 0 auto 15px;
}
@keyframes ptd-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ptd-booking-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}
.ptd-booking-table th {
    background: #f5f5f5;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #ddd;
}
.ptd-booking-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

.ptd-download-pdf-btn:hover {
    background: #2a2a4e !important;
    color: #d4a853 !important;
}
.ptd-download-pdf-btn:active {
    background: #0e0e1e !important;
}