/* BH Tour Package Generator - Main Styles */

/* CSS Custom Properties for Theming */
:root {
    /* Primary Brand Colors - Being Himalayan Theme */
    --bh-primary: #0066cc;
    --bh-primary-dark: #004999;
    --bh-primary-light: #3385d6;
    --bh-accent: #00a86b;
    --bh-accent-dark: #008556;

    /* Gradient Backgrounds */
    --bh-gradient-primary: linear-gradient(135deg, #0066cc 0%, #00a86b 100%);
    --bh-gradient-light: linear-gradient(135deg, #e8f4f8 0%, #f0f9f4 100%);
    --bh-gradient-card: linear-gradient(145deg, #ffffff 0%, #f8fafb 100%);

    /* Semantic Colors */
    --bh-success: #28a745;
    --bh-danger: #dc3545;
    --bh-warning: #ffc107;
    --bh-info: #17a2b8;

    /* Neutral Colors */
    --bh-white: #ffffff;
    --bh-light: #f8f9fa;
    --bh-gray: #6c757d;
    --bh-gray-light: #e9ecef;
    --bh-dark: #2c3e50;

    /* Spacing */
    --bh-spacing-xs: 0.25rem;
    --bh-spacing-sm: 0.5rem;
    --bh-spacing-md: 1rem;
    --bh-spacing-lg: 1.5rem;
    --bh-spacing-xl: 2.5rem;

    /* Border Radius */
    --bh-radius-sm: 6px;
    --bh-radius-md: 12px;
    --bh-radius-lg: 16px;
    --bh-radius-xl: 24px;

    /* Shadows */
    --bh-shadow-sm: 0 2px 8px rgba(0, 102, 204, 0.08);
    --bh-shadow-md: 0 4px 16px rgba(0, 102, 204, 0.12);
    --bh-shadow-lg: 0 8px 32px rgba(0, 102, 204, 0.16);
    --bh-shadow-xl: 0 16px 48px rgba(0, 102, 204, 0.2);

    /* Typography */
    --bh-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bh-font-size-base: 1rem;
    --bh-line-height: 1.6;

    /* Transitions */
    --bh-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --bh-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    background: var(--bh-gradient-light);
    min-height: 100vh;
    padding: var(--bh-spacing-xl) 0;
    font-family: var(--bh-font-family);
    line-height: var(--bh-line-height);
}

.container {
    max-width: 1200px;
    background: var(--bh-white);
    border-radius: var(--bh-radius-xl);
    padding: var(--bh-spacing-xl);
    box-shadow: var(--bh-shadow-xl);
    margin: 0 auto;
}

/* Header Styling */
header {
    padding-bottom: var(--bh-spacing-lg);
    border-bottom: 2px solid var(--bh-gray-light);
    margin-bottom: var(--bh-spacing-xl);
}

header h1 {
    color: var(--bh-dark);
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: var(--bh-spacing-sm);
}

header .text-muted {
    color: var(--bh-gray) !important;
    font-size: 1.1rem;
}

/* Tab Navigation */
.nav-tabs {
    border-bottom: 2px solid var(--bh-gray-light);
    margin-bottom: var(--bh-spacing-lg);
}

/* Itinerary Generator | Costing Calculator must stay side by side at every
   width. Bootstrap's .nav is flex-wrap: wrap, and each tab is ~210px wide,
   so on anything under roughly 470px (any phone, and a narrow desktop
   window) the second tab wrapped onto its own line and the pair read as a
   vertical stack. The mobile rules further down shrink them to fit
   instead. */
#mainTab {
    flex-wrap: nowrap;
}

#mainTab .nav-link {
    white-space: nowrap;
}

.nav-tabs .nav-link {
    color: var(--bh-gray);
    border: none;
    border-bottom: 3px solid transparent;
    padding: var(--bh-spacing-md) var(--bh-spacing-lg);
    font-weight: 500;
    transition: var(--bh-transition-fast);
}

.nav-tabs .nav-link:hover {
    color: var(--bh-primary);
    border-bottom-color: var(--bh-primary-light);
}

.nav-tabs .nav-link.active {
    color: var(--bh-primary);
    background: transparent;
    border-bottom-color: var(--bh-primary);
}

/* Button Styles */
.btn {
    border-radius: var(--bh-radius-sm);
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    transition: var(--bh-transition);
    border: none;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--bh-shadow-md);
}

.btn-primary {
    background: var(--bh-gradient-primary);
    color: var(--bh-white);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--bh-primary-dark) 0%, var(--bh-accent-dark) 100%);
    color: var(--bh-white);
}

.btn-success {
    background: var(--bh-accent);
    color: var(--bh-white);
}

.btn-success:hover {
    background: var(--bh-accent-dark);
    color: var(--bh-white);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    border-radius: var(--bh-radius-md);
}

/* Card Styles */
.card {
    border: 1px solid var(--bh-gray-light);
    border-radius: var(--bh-radius-lg);
    box-shadow: var(--bh-shadow-sm);
    transition: var(--bh-transition);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--bh-shadow-md);
    transform: translateY(-2px);
}

.card-header {
    background: var(--bh-gradient-primary) !important;
    border-bottom: none;
    padding: var(--bh-spacing-md) var(--bh-spacing-lg);
}

.card-body {
    padding: var(--bh-spacing-lg);
}

.result {
    margin-top: var(--bh-spacing-xl);
    padding: var(--bh-spacing-lg);
    background: var(--bh-gradient-light);
    border-radius: var(--bh-radius-lg);
    border: 1px solid var(--bh-gray-light);
}

/* Form Controls */
.form-label {
    font-weight: 600;
    color: var(--bh-dark);
    margin-bottom: var(--bh-spacing-sm);
    font-size: 0.95rem;
}

.form-control,
.form-select {
    border-radius: var(--bh-radius-sm);
    border: 2px solid var(--bh-gray-light);
    padding: 0.75rem 1rem;
    transition: var(--bh-transition-fast);
    font-size: 1rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bh-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.15);
    outline: none;
}

.form-control-lg {
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
    border-radius: var(--bh-radius-md);
}

.form-control.is-invalid {
    border-color: var(--bh-danger);
}

.form-control.is-invalid:focus {
    border-color: var(--bh-danger);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Alert Styles */
.alert {
    border-radius: var(--bh-radius-md);
    border: none;
    padding: var(--bh-spacing-md) var(--bh-spacing-lg);
}

.alert-success {
    background-color: rgba(40, 167, 69, 0.1);
    color: var(--bh-success);
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--bh-danger);
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #856404;
}

.alert-info {
    background-color: rgba(23, 162, 184, 0.1);
    color: var(--bh-info);
}

/* Button Enhancements */
.btn {
    border-radius: var(--bh-radius-sm);
    font-weight: 500;
    transition: var(--bh-transition);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-success {
    background-color: var(--bh-success);
    border-color: var(--bh-success);
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* Progress Bar */
.progress {
    height: 12px;
    border-radius: var(--bh-radius-md);
    background-color: var(--bh-gray-light);
    overflow: hidden;
}

.progress-bar {
    background: var(--bh-gradient-primary);
    transition: width 0.4s ease;
}

/* Fieldset Styling */
fieldset {
    margin-bottom: var(--bh-spacing-lg);
}

fieldset legend {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Small Text */
small.text-muted {
    color: var(--bh-gray) !important;
    font-size: 0.875rem;
    display: block;
    margin-top: 0.25rem;
}

/* Icon Styling */
.form-label i,
h5 i {
    margin-right: 0.5rem;
}

/* Button Loading States */
.btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none !important;
}

.btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Progressive Enhancement */
body:not(.js-loaded) .js-only {
    display: none !important;
}

.js-loaded .no-js {
    display: none !important;
}

/* Form Validation Styles */
.form-control.is-valid {
    border-color: var(--bh-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73 4.5-4.5c.2-.2-.1-.5-.3-.3L2.3 6.1c-.1.1-.4.1-.4-.1L.7 4.5c-.2-.2.1-.5.3-.3z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-valid:focus {
    border-color: var(--bh-success);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Loading States */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn:disabled:hover {
    transform: none;
}

/* Auto-save indicator */
.auto-save-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--bh-success);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--bh-radius-sm);
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.auto-save-indicator.show {
    opacity: 1;
}

/* Keyboard navigation hints */
.keyboard-hint {
    position: absolute;
    bottom: -2rem;
    left: 0;
    font-size: 0.75rem;
    color: var(--bh-gray);
    opacity: 0.7;
}

/* Focus management */
.btn:focus,
.form-control:focus,
select:focus {
    outline: 2px solid var(--bh-primary-start);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --bh-white: #ffffff;
        --bh-light: #ffffff;
        --bh-dark: #000000;
    }

    .btn-primary {
        background: var(--bh-dark);
        color: var(--bh-white);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    body {
        padding: var(--bh-spacing-md) 0;
    }

    .container {
        padding: var(--bh-spacing-md);
        border-radius: var(--bh-radius-md);
    }

    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }

    .auto-save-indicator {
        top: 10px;
        right: 10px;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* Premium Card Layout for Costing Calculator on Mobile */
    /* Note: integration.js now uses Bootstrap 'row' and 'col-*' classes. 
       We only add minor adjustments here. */
    
    #hotelRows > div {
        /* Keep card styling but let Bootstrap handle layout (flex-wrap) */
        /* display: flex; flex-direction: column;  <-- REMOVED to allow col-6 side-by-side */
        
        box-shadow: var(--bh-shadow-sm) !important; /* Force shadow */
        border: 1px solid var(--bh-gray-light) !important;
        margin-bottom: 1rem;
    }
    
    /* Ensure no double padding if JS adds p-3 */
    @media (max-width: 768px) {
        #hotelRows > div {
             padding: 1rem !important;
        }
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0.75rem;
    }
    
    .glass-card {
        padding: 1rem;
    }

    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.5rem; }
    
    /* Better touch targets — excludes checkboxes/radios (which include
       Bootstrap's toggle switches, e.g. #transportToggle) and range/color
       inputs. A bare `input` selector here applied min-height:48px to
       those too, stretching an ~16-32px-wide control into a distorted
       12-32px-wide by 48px-tall bar instead of touch-friendlier text
       inputs — confirmed live on http://161.118.162.95 where
       #modePreset/#modeManual (the Preset/Manual transport-mode radios)
       rendered as thin 12x48 slivers and #transportToggle's switch
       rendered as a stretched 32x48 pill. */
    .btn,
    .form-select,
    .form-control,
    select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
        min-height: 48px;
    }
    
    /* Make the tabs more mobile friendly */
    .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    /* Both labels have to fit one phone-width row (see #mainTab's
       flex-wrap: nowrap above) — split the row evenly, trim the padding
       and drop the leading icon's right margin rather than letting either
       tab wrap. Left to their natural widths the pair is ~331px against a
       ~327px container, i.e. four pixels short of fitting. */
    #mainTab .nav-item {
        flex: 1 1 0;
        min-width: 0;
    }

    #mainTab .nav-link {
        width: 100%;
        text-align: center;
        padding: 0.5rem 0.25rem;
        font-size: 0.8rem;
    }

    #mainTab .nav-link .fas {
        margin-right: 0.25rem !important;
    }
}

/* Smallest phones still in use (iPhone SE and similar, ~320px): at the
   0.8rem set above, both labels overflow their halves of the row by a
   dozen-odd pixels and get clipped mid-word. Dropping the leading icon and
   another notch of type is what makes "Itinerary Generator | Costing
   Calculator" fit as one readable row instead of wrapping into a stack. */
@media (max-width: 360px) {
    #mainTab .nav-link {
        font-size: 0.7rem;
    }

    #mainTab .nav-link .fas {
        display: none;
    }
}

/* New Layout Helpers */
.cockpit-preview .glass-card {
    border: 1px solid var(--bh-gray-light);
    box-shadow: var(--bh-shadow-lg);
}

.pdf-preview-container {
    margin: 0 auto;
    max-width: 210mm; /* A4 width */
    background: white;
    box-shadow: var(--bh-shadow-md);
}

/* Ensure Costing Panel Heights Match Config */
.cockpit-costing .bg-gray-900 {
    min-height: 100%;
}

/* ==========================================================================
   Mobile Optimization Overrides
   ========================================================================== */

@media (max-width: 820px) {
    /* Scale PDF Preview to fit screen */
    .cockpit-preview .glass-card {
        overflow-x: hidden;
        display: flex;
        justify-content: center;
        background: #525659; /* Acrobat reader background vibe */
        padding: 1rem 0;
    }

    /* Transform the A4 container to fit width */
    .pdf-preview-container {
        transform-origin: top center;
        /* Calculate scale: (Viewport Width - Padding) / A4 Width (approx 800px) */
        /* Using a generic safe scale for standard mobile */
        transform: scale(0.45); 
        margin-bottom: -50%; /* Compensate for empty space after scaling */
    }
}

@media (min-width: 450px) and (max-width: 820px) {
    .pdf-preview-container {
        transform: scale(0.65);
        margin-bottom: -30%;
    }
}

/* ===== FORM VALIDATION STYLES ===== */

.validation-summary {
    border-left: 4px solid var(--bh-warning);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.validation-summary ul {
    padding-left: 1.5rem;
}

.validation-summary li {
    margin-bottom: 0.25rem;
}

/* Enhanced field validation feedback */
.form-control.is-valid {
    border-color: var(--bh-success);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Activity List Styles for Enhanced Itineraries */
.pdf-activity-list {
    list-style: none;
    padding: 15px 20px;
    margin: 15px 0;
    background-color: #f8fafc;
    border-left: 4px solid var(--bh-accent);
    border-radius: 0 8px 8px 0;
}

.pdf-activity-list li {
    padding: 10px 0;
    color: #334155;
    line-height: 1.6;
    border-bottom: 1px dashed #e2e8f0;
}

.pdf-activity-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pdf-activity-list strong {
    color: var(--bh-primary);
    font-weight: 700;
    margin-right: 8px;
}

.form-control.is-invalid {
    border-color: var(--bh-danger);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control.is-valid:focus {
    border-color: var(--bh-success);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.form-control.is-invalid:focus {
    border-color: var(--bh-danger);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.invalid-feedback {
    color: var(--bh-danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* Real-time validation indicators */
.form-group.has-error .form-control {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}