/**
 * Search Page Styles - Modern 2026++
 * Full compliance with 2026 web standards
 * Features: @layer, container queries, color-mix(), dark mode, view transitions
 */

/* === CSS Layers (2026 cascade control) === */
@layer reset, base, components, utilities;

@layer reset {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
}

@layer base {

    /* === Design Tokens === */
    :root {
        /* Colors */
        --color-primary: oklch(0.6 0.2 265);
        --color-primary-light: color-mix(in oklch, var(--color-primary), white 20%);
        --color-primary-dark: color-mix(in oklch, var(--color-primary), black 20%);
        --color-accent: oklch(0.55 0.25 290);

        /* Surfaces */
        --surface-bg: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
        --surface-card: oklch(1 0 0 / 0.95);
        --surface-card-border: oklch(0.9 0 0);

        /* Text */
        --text-primary: oklch(0.15 0.02 265);
        --text-secondary: oklch(0.4 0.05 265);
        --text-on-primary: oklch(1 0 0);

        /* Spacing */
        --space-xs: clamp(0.25rem, 1vw, 0.5rem);
        --space-sm: clamp(0.5rem, 2vw, 1rem);
        --space-md: clamp(1rem, 3vw, 1.5rem);
        --space-lg: clamp(1.5rem, 4vw, 2.5rem);
        --space-xl: clamp(2rem, 6vw, 4rem);

        /* Typography */
        --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        --font-size-base: clamp(1rem, 1vw + 0.75rem, 1.125rem);
        --font-size-lg: clamp(1.25rem, 2vw + 0.5rem, 1.5rem);
        --font-size-xl: clamp(1.75rem, 4vw + 0.5rem, 2.75rem);

        /* Effects */
        --shadow-sm: 0 2px 8px oklch(0 0 0 / 0.08);
        --shadow-md: 0 8px 24px oklch(0 0 0 / 0.12);
        --shadow-lg: 0 20px 60px oklch(0 0 0 / 0.15);
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 16px;
        --radius-xl: 24px;

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

        /* Color scheme */
        color-scheme: light dark;
    }

    /* === Dark Mode (Bootstrap 5.3) === */
    [data-bs-theme="dark"] {
        --surface-card: oklch(0.2 0.02 265 / 0.95);
        --surface-card-border: oklch(0.35 0.03 265);
        --text-primary: oklch(0.95 0 0);
        --text-secondary: oklch(0.7 0.02 265);
    }

    /* === Light Mode (Bootstrap 5.3) === */
    [data-bs-theme="light"] {
        --surface-card: oklch(1 0 0 / 0.95);
        --surface-card-border: oklch(0.9 0 0);
        --text-primary: oklch(0.15 0.02 265);
        --text-secondary: oklch(0.4 0.05 265);
    }

    html {
        scroll-behavior: smooth;
        text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        background: var(--surface-bg);
        font-family: var(--font-sans);
        font-size: var(--font-size-base);
        line-height: 1.6;
        color: var(--text-primary);
        min-block-size: 100dvh;
    }
}

@layer components {

    /* === Container Queries (2026 standard) === */
    .search-section {
        container-type: inline-size;
        container-name: search-card;

        background: var(--surface-card);
        border: 1px solid var(--surface-card-border);
        border-radius: var(--radius-xl);
        padding: var(--space-lg);
        box-shadow: var(--shadow-lg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        max-width: 900px;
        width: 100%;
        margin-inline: auto;
        overflow: visible;
        box-sizing: border-box;

        /* View Transition API (2026) */
        view-transition-name: search-card;

        /* Animation */
        animation: fade-in-up var(--transition-slow) ease-out;
    }

    .search-section * {
        box-sizing: border-box;
    }

    .search-section .row {
        max-width: 100%;
        margin-inline: 0;
    }

    /* Keep route autocomplete above the history block. */
    #route-search {
        position: relative;
        z-index: 20;
    }

    #route-history {
        position: relative;
        z-index: 10;
    }

    .route-finder-col {
        max-inline-size: 320px;
        overflow: visible;
    }

    .route-finder-input-wrap {
        inline-size: 100%;
        max-inline-size: 320px;
        overflow: visible;
    }

    /* Container query responsive styles */
    @container search-card (max-width: 600px) {
        .route-finder-row {
            flex-direction: column !important;
            gap: var(--space-md) !important;
            align-items: center !important;
        }

        .route-finder-row .col {
            inline-size: 100% !important;
            max-inline-size: 100% !important;
            padding-inline: 0;
        }

        .route-finder-col,
        .route-finder-input-wrap {
            max-inline-size: 100% !important;
        }

        .route-finder-row .col .input-with-icon {
            inline-size: 100% !important;
            max-inline-size: 100% !important;
        }

        .route-finder-row .col .form-control {
            inline-size: 100% !important;
            max-inline-size: 100% !important;
            box-sizing: border-box !important;
        }

        /* Center swap button on mobile */
        .route-finder-row .col:has(#swapButtonNew) {
            display: flex;
            justify-content: center;
        }
    }

    /* Fallback media query for browsers without container query support */
    @media (max-width: 800px) {
        .search-section {
            margin-inline: var(--space-sm);
            max-inline-size: calc(100% - var(--space-md));
            overflow: visible;
        }

        .route-finder-row {
            flex-direction: column !important;
            gap: var(--space-md) !important;
        }

        .route-finder-row .col {
            inline-size: 100% !important;
            max-inline-size: 100% !important;
            padding-inline: 0;
        }

        .route-finder-col,
        .route-finder-input-wrap {
            max-inline-size: 100% !important;
        }

        .route-finder-row .col .input-with-icon,
        .route-finder-row .col .form-control {
            inline-size: 100% !important;
            max-inline-size: 100% !important;
            box-sizing: border-box !important;
        }
    }

    /* === Typography === */
    .search-page-title {
        color: var(--text-on-primary);
        font-size: var(--font-size-xl);
        font-weight: 700;
        letter-spacing: -0.02em;
        text-shadow: 0 2px 10px oklch(0 0 0 / 0.2);
        text-wrap: balance;
    }

    /* === Form Inputs === */
    .search-section .form-control,
    .search-section input[type="search"] {
        outline-offset: -2px;
        -webkit-appearance: textfield;
        appearance: textfield;
        width: 100%;
        height: 46px;
        border: 1px solid #e0e0e0;
        border-radius: 30px;
        padding: 0 20px 0 48px;
        font-size: 16px;
        background: #fff;
        color: #9d111e;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition:
            border-color var(--transition-fast),
            box-shadow var(--transition-fast);
        box-sizing: border-box;
    }

    .search-section .form-control:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-primary), transparent 80%);
        outline: none;
    }

    .search-section .form-control::placeholder {
        color: var(--text-secondary);
    }

    /* Input Icon Wrapper */
    .input-with-icon {
        position: relative;
        width: 100%;
        inline-size: 100%;
    }

    .input-with-icon::before {
        content: "";
        position: absolute;
        inset-inline-start: 18px;
        inset-block-start: 50%;
        transform: translateY(-50%);
        inline-size: 20px;
        /* Slightly larger icon */
        block-size: 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238e99a4' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 1;
        pointer-events: none;
    }

    /* Dark mode icon adjustment handled by opacity/filter in complex cases, 
       but for simple SVG lines, we might want a different specific color or use currentColor if inline.
       For now keeping the gray stroke as it works on white/dark cards usually. 
    */

    /* === Buttons === */
    .search-section .btn-primary {
        background: var(--color-primary);
        color: var(--text-on-primary);
        border: none;
        border-radius: var(--radius-md);
        padding-block: var(--space-sm);
        padding-inline: var(--space-lg);
        font-size: var(--font-size-base);
        font-weight: 600;
        box-shadow: var(--shadow-md);
        transition:
            background var(--transition-fast),
            transform var(--transition-fast),
            box-shadow var(--transition-fast);
    }

    .search-section .btn-primary:hover {
        background: var(--color-primary-dark);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .search-section .btn-primary:active {
        transform: translateY(0);
        box-shadow: var(--shadow-sm);
    }

    /* Swap Button */
    #swapButtonNew {
        background: var(--color-primary);
        border: none;
        transition:
            background var(--transition-fast),
            transform var(--transition-normal);
        aspect-ratio: 1;
    }

    #swapButtonNew:hover {
        background: var(--color-primary-dark);
        transform: rotate(180deg);
    }

    /* === Livesearch Dropdown === */
    .livesearch-dropdown {
        position: absolute;
        inset-block-start: 100%;
        inset-inline: 0;
        margin-block-start: var(--space-xs);
        background: var(--surface-card);
        border: 1px solid var(--surface-card-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        z-index: 99999;
        max-block-size: 300px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .livesearch-dropdown .livesearch-item {
        padding: var(--space-sm) var(--space-md);
        cursor: pointer;
        border-block-end: 1px solid var(--surface-card-border);
        transition: background var(--transition-fast);
    }

    .livesearch-dropdown .livesearch-item:hover {
        background: color-mix(in oklch, var(--color-primary), transparent 90%);
    }

    .livesearch-dropdown .livesearch-item:last-child {
        border-block-end: none;
    }
}

@layer utilities {

    /* === Accessibility === */
    .visually-hidden {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* === Focus States (2026 accessibility) === */
    :focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* === Reduced Motion (accessibility) === */
    @media (prefers-reduced-motion: reduce) {

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

        html {
            scroll-behavior: auto;
        }
    }

    /* === High Contrast Mode === */
    @media (prefers-contrast: high) {
        :root {
            --surface-card-border: oklch(0 0 0);
        }

        .search-section .form-control {
            border-width: 3px;
        }
    }
}

/* === Animations === */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* === Print Styles === */
@media print {
    body {
        background: white;
    }

    .search-section {
        box-shadow: none;
        border: 1px solid #000;
    }
}