/* BH Tour Package Generator - Redesign Layout v2.0 */

/* ============================================
   1. DESKTOP COCKPIT LAYOUT (3-Column)
   ============================================ */
@media (min-width: 1200px) {
    .cockpit-grid {
        display: grid;
        grid-template-columns: 320px minmax(500px, 1fr) 350px;
        gap: var(--space-lg);
        align-items: start;
        position: relative;
    }

    /* Left Column: Configuration */
    .cockpit-config {
        position: sticky;
        top: var(--space-lg);
        max-height: calc(100vh - 2 * var(--space-lg));
        overflow-y: auto;
        padding-right: var(--space-sm); /* For scrollbar breathing room */
    }

    /* Center Column: Preview (Scrolls naturally) */
    .cockpit-preview {
        /* No sticky, flows with content */
    }

    /* Right Column: Costing */
    .cockpit-costing {
        position: sticky;
        top: var(--space-lg);
    }
}

/* Tablet Layout (2-Column) */
@media (min-width: 768px) and (max-width: 1199px) {
    .cockpit-grid {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: var(--space-md);
    }

    .cockpit-config {
        grid-column: 1 / -1; /* Config takes full width on top */
    }

    .cockpit-preview {
        /* Opens up space */
    }

    .cockpit-costing {
        position: sticky;
        top: var(--space-md);
        height: fit-content;
    }
}

/* ============================================
   2. MOBILE OPTIMIZATIONS
   ============================================ */
@media (max-width: 767px) {
    .cockpit-grid {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        padding-bottom: 80px; /* Space for sticky footer */
    }

    /* The Costing Calculator's "Cost Estimate" box shares a flex row with
       the tab's own heading (see BH-Tour-Package-Generator.html) so it can
       sit to the heading's right on desktop. Below this width there's no
       room for both on one line, so the row wraps (flex-wrap on that
       container) — but a wrapped flex item still only takes its
       content's width by default, leaving the box's own 4-column stat
       grid squeezed into a sliver instead of the full row it needs.
       Forcing it to the full row width once wrapped fixes that. */
    #cost-estimate-box {
        width: 100%;
    }

    /* Stacked Navigation for Mobile */
    #generatorTabs {
        flex-direction: column !important;
        gap: var(--space-xs) !important;
        padding: var(--space-sm) !important;
    }

    #generatorTabs .nav-link {
        padding: var(--space-sm) !important;
        font-size: var(--text-sm);
    }

    /* Hide Desktop Costing Sidebar on Mobile */
    .desktop-costing-panel {
        display: none !important;
    }
}

/* Sticky Mobile Footer */
.mobile-cost-footer {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: var(--z-fixed);
    padding: var(--space-md);
    border-top: 1px solid var(--neutral-200);
    animation: slideUp 0.3s ease-out;
}

@media (max-width: 767px) {
    .mobile-cost-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-sm);
    }
}

/* The Costing Calculator tab has no sidebar of its own — its Live Costing
   numbers live in the Itinerary Generator tab's sidebar (.desktop-costing-panel),
   which is invisible while that tab isn't active. Without this, a desktop
   user on the Costing Calculator tab has no total or breakdown visible
   anywhere: the sidebar is in the other (hidden) tab-pane, and this footer
   is normally mobile-only. integration.js's initTabs() adds this class
   while the Costing Calculator tab is active, regardless of viewport. */
.mobile-cost-footer.force-visible {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ============================================
   3. GLASSMORPHISM REFINEMENTS
   ============================================ */
.glass-panel {
    background: rgba(255, 255, 255, 0.85); /* More opaque for readability */
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
}

.glass-panel:hover {
    box-shadow: var(--shadow-md);
}

/* Highlighting Active Fields */
.floating-label input:focus {
    background: white;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px var(--primary-100);
}

/* Validation Checks */
.validation-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--success);
    opacity: 0;
    transition: opacity 0.2s;
}

.floating-label input:valid + label + .validation-icon {
    opacity: 1;
}