/* BH Tour Package Generator - Design System v1.0 */
/* Himalayan-inspired premium design system */

/* ============================================
   1. CSS VARIABLES (Design Tokens)
   ============================================ */

:root {
    /* Primary Colors - Mountain Blues */
    --primary-900: #0a2540;
    --primary-700: #0066cc;
    --primary-500: #0099ff;
    --primary-300: #66c2ff;
    --primary-100: #e6f4ff;

    /* Secondary Colors - Himalayan Greens */
    --secondary-900: #004d40;
    --secondary-700: #00a86b;
    --secondary-500: #00d084;
    --secondary-300: #66e6b3;
    --secondary-100: #e6fff8;

    /* Accent Colors - Sunset Orange */
    --accent-700: #ff6b35;
    --accent-500: #ff8c61;
    --accent-300: #ffb399;

    /* Neutrals - Snow & Stone */
    --neutral-50: #fafbfc;
    --neutral-100: #f4f6f8;
    --neutral-200: #e8ecef;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #4a5568;
    --neutral-800: #374151;
    --neutral-900: #1a202c;

    /* Semantic Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #0066cc 0%, #00a86b 100%);
    --gradient-hero: linear-gradient(135deg, #0a2540 0%, #0066cc 50%, #00a86b 100%);
    --gradient-card: linear-gradient(145deg, #ffffff 0%, #f4f6f8 100%);
    --gradient-sunset: linear-gradient(135deg, #ff6b35 0%, #ff8c61 100%);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

    /* Glass Effect */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    /* Spacing */
    --space-xs: 0.25rem;
    /* 4px */
    --space-sm: 0.5rem;
    /* 8px */
    --space-md: 1rem;
    /* 16px */
    --space-lg: 1.5rem;
    /* 24px */
    --space-xl: 2rem;
    /* 32px */
    --space-2xl: 3rem;
    /* 48px */
    --space-3xl: 4rem;
    /* 64px */

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Typography */
    --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-accent: 'Playfair Display', Georgia, serif;

    /* Font Sizes */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2.25rem;
    /* 36px */
    --text-5xl: 3rem;
    /* 48px */

    /* Font Weights */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ============================================
   2. GLOBAL STYLES
   ============================================ */

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--neutral-700);
    background-color: var(--neutral-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.02em;
    color: var(--neutral-900);
    margin-top: 0;
    line-height: var(--leading-tight);
}

h1 {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-lg);
}

h2 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-md);
}

h3 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-md);
}

h4 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);
}

h5 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-sm);
}

h6 {
    font-size: var(--text-base);
    margin-bottom: var(--space-sm);
}

p {
    margin-top: 0;
    margin-bottom: var(--space-md);
}

a {
    color: var(--primary-700);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-500);
}

/* ============================================
   3. UTILITY CLASSES
   ============================================ */

/* Glassmorphism */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--glass-shadow);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.glass-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Neumorphism */
.neu-button {
    background: var(--neutral-100);
    box-shadow:
        8px 8px 16px rgba(0, 0, 0, 0.1),
        -8px -8px 16px rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-xl);
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    color: var(--neutral-700);
    cursor: pointer;
    transition: all var(--transition-base);
}

.neu-button:hover {
    box-shadow:
        4px 4px 8px rgba(0, 0, 0, 0.1),
        -4px -4px 8px rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.neu-button:active {
    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.1),
        inset -4px -4px 8px rgba(255, 255, 255, 0.9);
    transform: translateY(0);
}

/* Gradient Buttons */
.btn-gradient {
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-xl);
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0099ff 0%, #00d084 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.btn-gradient:hover::before {
    opacity: 1;
}

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

.btn-gradient span {
    position: relative;
    z-index: 1;
}

/* Cards */
.card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

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

.card-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--neutral-100);
}

.card-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--neutral-900);
    margin: 0;
}

/* Stat Cards */
.stat-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--neutral-100);
    transition: all var(--transition-base);
}

.stat-card:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    margin-bottom: var(--space-md);
}

.stat-icon.primary {
    background: var(--primary-100);
    color: var(--primary-700);
}

.stat-icon.secondary {
    background: var(--secondary-100);
    color: var(--secondary-700);
}

.stat-icon.accent {
    background: #fff5f0;
    color: var(--accent-700);
}

.stat-value {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--neutral-900);
    margin-bottom: var(--space-xs);
}

.stat-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Floating Label Inputs */
.floating-label {
    position: relative;
    margin-bottom: var(--space-lg);
}

.floating-label input,
.floating-label select,
.floating-label textarea {
    width: 100%;
    padding: var(--space-md) var(--space-md) var(--space-sm);
    border: 2px solid var(--neutral-200);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: var(--font-body);
    color: var(--neutral-900);
    background: white;
    transition: all var(--transition-base);
    outline: none;
}

.floating-label input:focus,
.floating-label select:focus,
.floating-label textarea:focus {
    border-color: var(--primary-700);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.floating-label label {
    position: absolute;
    top: 50%;
    left: var(--space-md);
    transform: translateY(-50%);
    font-size: var(--text-base);
    color: var(--neutral-500);
    pointer-events: none;
    transition: all var(--transition-base);
    background: white;
    padding: 0 var(--space-xs);
    /* This label is position:absolute, so it doesn't participate in
       layout — a label whose text doesn't fit its input's width (e.g. a
       long label like "Travel Season" squeezed into a narrow mobile
       col-4) wrapped onto 2 lines and grew upward out of its box instead
       of pushing anything else down, visually overlapping the row above
       it. Confirmed live at 375px width. Truncating with an ellipsis
       instead keeps every floating label inside its own input's bounds
       no matter how narrow the column gets. */
    max-width: calc(100% - 2 * var(--space-md));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-label input:focus+label,
.floating-label input:not(:placeholder-shown)+label,
.floating-label select:focus+label,
.floating-label select:not([value=""])+label,
.floating-label textarea:focus+label,
.floating-label textarea:not(:placeholder-shown)+label {
    top: 0;
    font-size: var(--text-xs);
    color: var(--primary-700);
    font-weight: var(--weight-medium);
}

/* Progress Indicator */
.progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2xl);
    position: relative;
}

.progress-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--neutral-200);
    z-index: 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.progress-step-circle {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: white;
    border: 2px solid var(--neutral-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-semibold);
    color: var(--neutral-400);
    margin-bottom: var(--space-sm);
    transition: all var(--transition-base);
}

.progress-step.active .progress-step-circle {
    background: var(--gradient-primary);
    border-color: var(--primary-700);
    color: white;
    box-shadow: var(--shadow-md);
}

.progress-step.completed .progress-step-circle {
    background: var(--secondary-700);
    border-color: var(--secondary-700);
    color: white;
}

.progress-step-label {
    font-size: var(--text-sm);
    color: var(--neutral-600);
    font-weight: var(--weight-medium);
}

.progress-step.active .progress-step-label {
    color: var(--primary-700);
    font-weight: var(--weight-semibold);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.fade-in {
    animation: fadeIn var(--transition-base) ease-out;
}

.slide-in {
    animation: slideIn var(--transition-base) ease-out;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    :root {
        --text-4xl: 2rem;
        --text-3xl: 1.5rem;
        --text-2xl: 1.25rem;
    }

    .glass-card {
        padding: var(--space-lg);
    }

    .card {
        padding: var(--space-lg);
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--neutral-100);
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: var(--radius-full);
}

/* Hero Section */
.hero-section {
    background: var(--gradient-hero);
    color: white;
    padding: var(--space-3xl) var(--space-xl);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-2xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://images.unsplash.com/photo-1518002363162-8e3b7c4d5766?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    opacity: 0.1;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-title {
    color: white;
    margin-bottom: var(--space-sm);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-subtitle {
    color: var(--primary-100);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}