/**
 * Voyaly - Main Stylesheet
 * 
 * Modern, clean design for the travel planner.
 * Mobile-first approach with CSS custom properties.
 */

/* ==========================================
   CSS Custom Properties (Design Tokens)
   ========================================== */

:root {
    /* ===== Voyaly Design Tokens (Alpen-Travel Look) ===== */

    /* Brand – Primary Greens */
    --voyaly-color-primary-700: #233326;
    --voyaly-color-primary-600: #2C3F2F;
    --voyaly-color-primary-500: #36533C;
    --voyaly-color-primary-100: #E3EDE4;

    /* Accent – Chartreuse CTA */
    --voyaly-color-accent-500: #D5F060;
    --voyaly-color-accent-400: #E0F58A;
    --voyaly-color-accent-100: #F6FCD7;

    /* Backgrounds & Surfaces */
    --voyaly-bg-body: #F6F1E6;
    --voyaly-bg-subtle: #EFE3D2;
    --voyaly-bg-card: #FBF7EE;
    --voyaly-bg-elevated: #FFFFFF;

    /* Text */
    --voyaly-text-primary: #1F2326;
    --voyaly-text-secondary: #5D6063;
    --voyaly-text-muted: #8C8F93;
    --voyaly-text-on-primary: #FFFFFF;
    --voyaly-text-on-accent: #202411;

    /* Borders */
    --voyaly-border-soft: #E2D6C5;
    --voyaly-border-strong: #C6B79E;
    --voyaly-border-primary: #36533C;

    /* Semantics */
    --voyaly-success-600: #2F6B3B;
    --voyaly-success-100: #E1F3E5;
    --voyaly-warning-600: #975A19;
    --voyaly-warning-100: #FFF1D9;
    --voyaly-danger-600: #A13C3C;
    --voyaly-danger-100: #FBE3E3;
    --voyaly-info-600: #386A72;
    --voyaly-info-100: #E1F0F3;

    /* Overlay & Shadow */
    --voyaly-overlay-soft: rgba(18, 16, 11, 0.25);
    --voyaly-shadow-soft: 0 12px 30px rgba(29, 23, 16, 0.12);

    /* ===== Legacy aliases (mapped to new tokens) ===== */
    --color-primary: var(--voyaly-color-primary-600);
    --color-primary-dark: var(--voyaly-color-primary-700);
    --color-primary-light: var(--voyaly-color-primary-100);
    --color-primary-lightest: var(--voyaly-color-primary-100);
    --color-success: var(--voyaly-success-600);
    --color-success-light: var(--voyaly-success-100);
    --color-warning: var(--voyaly-warning-600);
    --color-warning-light: var(--voyaly-warning-100);
    --color-danger: var(--voyaly-danger-600);
    --color-danger-light: var(--voyaly-danger-100);
    --color-gray-50: var(--voyaly-bg-body);
    --color-gray-100: var(--voyaly-bg-card);
    --color-gray-200: var(--voyaly-border-soft);
    --color-gray-300: var(--voyaly-border-strong);
    --color-gray-400: var(--voyaly-text-muted);
    --color-gray-500: var(--voyaly-text-secondary);
    --color-gray-600: var(--voyaly-text-secondary);
    --color-gray-700: var(--voyaly-text-primary);
    --color-gray-800: var(--voyaly-text-primary);
    --color-gray-900: var(--voyaly-text-primary);
    --color-white: var(--voyaly-bg-elevated);
    --color-black: #000000;
    --color-error: var(--voyaly-danger-600);

    /* Typography */
    --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(29, 23, 16, 0.06);
    --shadow-md: 0 4px 8px rgba(29, 23, 16, 0.08), 0 2px 4px rgba(29, 23, 16, 0.04);
    --shadow-lg: 0 10px 20px rgba(29, 23, 16, 0.10), 0 4px 8px rgba(29, 23, 16, 0.06);
    --shadow-xl: var(--voyaly-shadow-soft);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    
    /* Layout */
    --container-max: 1200px;
    --container-narrow: 640px;
    --header-height: 72px;
    /* Shared height for inline controls (inputs, selects, buttons in a row). */
    --control-height: 44px;
}

/* ==========================================
   Base & Reset
   ========================================== */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--voyaly-text-primary);
    background-color: var(--voyaly-bg-body);
    min-height: 100vh;
}

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

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

/* ==========================================
   Layout
   ========================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.container--flight-results {
    max-width: 880px;
}

.main {
    min-height: calc(100vh - var(--header-height) - 80px);
    padding: var(--spacing-8) 0;
}

/* ==========================================
   Header
   ========================================== */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background:
        linear-gradient(180deg, var(--voyaly-bg-elevated) 0%, var(--voyaly-bg-card) 100%);
    border-bottom: 1px solid var(--voyaly-border-soft);
    height: var(--header-height);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 6px 20px -12px rgba(35, 51, 38, 0.28);
    backdrop-filter: saturate(1.05);
}

.header__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--spacing-4);
}

.header__logo {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.header__logo img {
    height: 44px;
    width: auto;
}

.header__nav {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.header__link {
    color: var(--voyaly-text-secondary);
    font-weight: 500;
    transition: color var(--transition-fast);
}

.header__link:hover {
    color: var(--voyaly-color-primary-600);
}

.header__actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

/* ==========================================================================
   Animated "Meine Reisen" navigation control
   Compact plane pill that expands to reveal the label on hover / focus.
   ========================================================================== */

.header-trips-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 40px;
    padding: 0 0.85rem 0 0.55rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--voyaly-border-soft);
    background:
        radial-gradient(120% 120% at 30% 20%, var(--voyaly-bg-elevated) 0%, var(--voyaly-bg-card) 100%);
    color: var(--voyaly-color-primary-600);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(35, 51, 38, 0.06);
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        color 220ms ease;
}

.header-trips-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    flex-shrink: 0;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.header-trips-link__icon svg {
    width: 17px;
    height: 17px;
}

.header-trips-link__label {
    white-space: nowrap;
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.header-trips-link:hover,
.header-trips-link:focus-visible {
    transform: translateY(-1px);
    background:
        linear-gradient(135deg, var(--voyaly-color-primary-600) 0%, var(--voyaly-color-primary-700) 100%);
    border-color: var(--voyaly-color-primary-700);
    box-shadow: 0 10px 22px -12px rgba(35, 51, 38, 0.5);
    color: var(--voyaly-text-on-primary);
}

.header-trips-link:hover .header-trips-link__icon,
.header-trips-link:focus-visible .header-trips-link__icon {
    transform: translateY(-1px) scale(1.05);
}

.header-trips-link:focus-visible {
    outline: 2px solid var(--voyaly-color-accent-500);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .header-trips-link,
    .header-trips-link__icon {
        transition: none;
    }

    .header-trips-link:hover,
    .header-trips-link:focus-visible {
        transform: none;
    }

    .header-trips-link:hover .header-trips-link__icon,
    .header-trips-link:focus-visible .header-trips-link__icon {
        transform: none;
    }
}

.header__user {
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
    display: none;
}

@media (min-width: 640px) {
    .header__user {
        display: block;
    }
}

/* Keep the header calm and non-overflowing on narrow screens. */
@media (max-width: 640px) {
    .header {
        --header-height: 60px;
    }

    .header__inner {
        gap: var(--spacing-1);
        padding: 0 var(--spacing-3);
        grid-template-columns: auto 1fr auto;
    }

    .header__logo img {
        height: 34px;
    }

    .header__nav {
        justify-self: start;
        margin-left: var(--spacing-1);
    }

    .header__actions {
        gap: var(--spacing-1);
    }

    .app-header__packing-action {
        margin-right: 0;
        padding: 0;
        width: 40px;
        height: 40px;
        justify-content: center;
    }

    .app-header__packing-action::after {
        display: none;
        content: none;
    }

    .header__actions-divider {
        display: inline-block;
        width: 1px;
        height: 18px;
        margin: 0 4px;
        background: var(--voyaly-border-strong);
        opacity: 0.55;
        flex-shrink: 0;
        align-self: center;
    }

    .header-trips-link {
        padding: 0;
        width: 40px;
        height: 40px;
        justify-content: center;
    }

    .header-trips-link__label,
    .app-header__packing-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .header__guest-register {
        padding-left: var(--spacing-3);
        padding-right: var(--spacing-3);
    }
}

/* ==========================================
   Footer
   ========================================== */

.footer {
    background:
        linear-gradient(180deg, rgba(251, 247, 238, 0.4) 0%, var(--voyaly-bg-elevated) 100%);
    border-top: 1px solid var(--voyaly-border-soft);
    padding: var(--spacing-7) 0;
}

.footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    text-align: center;
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
}

.footer__line {
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.55rem;
    line-height: 1.5;
}

.footer__sep {
    opacity: 0.45;
}

.footer__swiss {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--voyaly-color-primary-600);
    font-weight: 600;
}

.footer__swiss-mark {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: #d52b1e;
    box-shadow: 0 0 0 1px rgba(35, 51, 38, 0.08);
    flex-shrink: 0;
}

.footer__swiss-cross {
    position: absolute;
    inset: 0;
}

.footer__swiss-cross::before,
.footer__swiss-cross::after {
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 1px;
}

.footer__swiss-cross::before {
    left: 50%;
    top: 2px;
    bottom: 2px;
    width: 2.5px;
    transform: translateX(-50%);
}

.footer__swiss-cross::after {
    top: 50%;
    left: 2px;
    right: 2px;
    height: 2.5px;
    transform: translateY(-50%);
}

.footer__swiss-label {
    letter-spacing: 0.01em;
}

/* ==========================================
   Buttons
   ========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(54, 83, 60, 0.2);
}

.btn__icon {
    width: 1.25em;
    height: 1.25em;
}

.btn--primary {
    background: var(--voyaly-color-primary-600);
    color: var(--voyaly-text-on-primary);
    border-color: var(--voyaly-color-primary-600);
}

.btn--primary:hover {
    background: var(--voyaly-color-primary-700);
    border-color: var(--voyaly-color-primary-700);
    color: var(--voyaly-text-on-primary);
}

.btn--primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn--accent {
    background: var(--voyaly-color-accent-500);
    color: var(--voyaly-text-on-accent);
    border-color: transparent;
    font-weight: 700;
}

.btn--accent:hover,
.btn--accent:focus {
    background: var(--voyaly-color-accent-400);
}

.btn--outline {
    background: var(--voyaly-bg-elevated);
    color: var(--voyaly-color-primary-600);
    border-color: var(--voyaly-border-soft);
}

.btn--outline:hover {
    background: var(--voyaly-color-primary-100);
    border-color: var(--voyaly-border-strong);
    color: var(--voyaly-color-primary-700);
}

.btn--danger {
    background: var(--voyaly-danger-600);
    color: #fff;
    border-color: var(--voyaly-danger-600);
}

.btn--danger:hover {
    background: #8a3232;
    border-color: #8a3232;
    color: #fff;
}

.btn--outline.btn--danger {
    background: transparent;
    color: var(--voyaly-danger-600);
    border-color: var(--voyaly-danger-600);
}

.btn--outline.btn--danger:hover {
    background: var(--voyaly-danger-600);
    color: #fff;
}

.btn--small {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
}

.btn--large {
    padding: var(--spacing-4) var(--spacing-6);
    font-size: var(--font-size-base);
}

.btn--full {
    width: 100%;
}

.btn--icon {
    padding: var(--spacing-2);
    border-radius: var(--radius-md);
}

.btn--icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ==========================================
   Forms
   ========================================== */

.form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.form__group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0;
}

.form__label {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-primary);
    margin-bottom: 0;
}

.form__input {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-family: inherit;
    font-size: var(--font-size-base);
    color: var(--voyaly-text-primary);
    background: var(--voyaly-bg-elevated);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form__input:focus {
    outline: none;
    border-color: var(--voyaly-border-primary);
    box-shadow: 0 0 0 1px rgba(54, 83, 60, 0.15);
}

.form__input::placeholder {
    color: var(--voyaly-text-muted);
}

.form__help,
.form__hint {
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-secondary);
    line-height: 1.45;
    margin-top: 0;
}

/* Form input error states */
.form__input--error {
    border-color: var(--voyaly-danger-600);
    background-color: var(--voyaly-danger-100);
}

.form__input--error:focus {
    border-color: var(--voyaly-danger-600);
    box-shadow: 0 0 0 3px var(--voyaly-danger-100);
}

.form__error {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
    line-height: 1.4;
    margin-top: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-1);
}

.form__error::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 10px;
    font-weight: 700;
    background: var(--color-danger);
    color: white;
    border-radius: 50%;
    margin-top: 1px;
}

/* Password requirements list */
.form__requirements {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-top: var(--spacing-2);
    padding-left: 0;
    line-height: 1.45;
}

.form__requirements-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form__requirements-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.form__requirements-item::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-gray-300);
    flex-shrink: 0;
}

.form__requirements-item--met::before {
    background: var(--color-success);
}

.form__requirements-item--unmet {
    color: var(--color-danger);
}

.form__requirements-item--unmet::before {
    background: var(--color-danger);
}

/* Select input styling — shared polished pattern.
   Applies to any of: .form__input--select modifier, a bare .form__select,
   or a native <select> using the .form__input base. Keeps native <select>
   semantics (accessible, mobile-friendly) with a calm custom chevron. */
.form__select {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-family: inherit;
    font-size: var(--font-size-base);
    color: var(--voyaly-text-primary);
    background-color: var(--voyaly-bg-elevated);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form__input--select,
.form__select,
select.form__input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--spacing-3) center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: var(--spacing-10);
    cursor: pointer;
}

.form__input--select:focus,
.form__select:focus,
select.form__input:focus {
    outline: none;
    border-color: var(--voyaly-border-primary);
    box-shadow: 0 0 0 1px rgba(54, 83, 60, 0.15);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2336533C' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

.form__input--select:disabled,
.form__select:disabled,
select.form__input:disabled {
    background-color: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Combobox inputs backed by a <datalist> (e.g. accommodation "Typ") get the
   same chevron affordance so they read as a chooser, while keeping free text. */
.form__input--combobox {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--spacing-3) center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: var(--spacing-10);
}

.form__input--combobox:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2336533C' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Native date/time inputs — align the indicator spacing so they sit calmly
   alongside other Voyaly controls. */
.date-picker--compact .date-picker__native,
input[type="date"].form__input,
input[type="time"].form__input {
    cursor: pointer;
}

.form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

@media (min-width: 480px) {
    .form__row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.form__actions {
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end;
    padding-top: var(--spacing-5);
    margin-top: var(--spacing-1);
}

/* ==========================================
   Alerts
   ========================================== */

.alert {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.alert p {
    margin: 0;
}

.alert__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.alert__list {
    margin: 0;
    padding-left: var(--spacing-4);
}

.alert--error {
    background: var(--voyaly-danger-100);
    color: var(--voyaly-danger-600);
}

.alert--success {
    background: var(--voyaly-success-100);
    color: var(--voyaly-success-600);
}

.alert--warning {
    background: var(--voyaly-warning-100);
    color: var(--voyaly-warning-600);
}

/* ==========================================
   Cards
   ========================================== */

.card {
    background: var(--voyaly-bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--voyaly-border-soft);
    padding: var(--spacing-6);
}

/* ==========================================
   Badges
   ========================================== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.badge--active {
    background: var(--voyaly-color-accent-100);
    color: var(--voyaly-color-primary-600);
}

.badge--upcoming {
    background: var(--voyaly-color-primary-100);
    color: var(--voyaly-color-primary-600);
}

.badge--completed {
    background: var(--voyaly-success-100);
    color: var(--voyaly-success-600);
}

.badge--soon {
    background: var(--voyaly-warning-100);
    color: var(--voyaly-warning-600);
}

.badge--warning {
    background: var(--voyaly-warning-100);
    color: var(--voyaly-warning-600);
}

.badge--large {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
}

/* ==========================================
   Page Header
   ========================================== */

.page-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

@media (min-width: 640px) {
    .page-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.page-header--centered {
    text-align: center;
    align-items: center;
}

.page-header__title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--voyaly-text-primary);
    line-height: 1.2;
}

.page-header__subtitle {
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-lg);
}

/* ==========================================
   Breadcrumb
   ========================================== */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    margin-bottom: var(--spacing-6);
}

.breadcrumb a {
    color: var(--voyaly-text-secondary);
}

.breadcrumb a:hover {
    color: var(--voyaly-color-primary-600);
}

.breadcrumb__separator {
    color: var(--voyaly-border-strong);
}

/* ==========================================
   Trip Grid
   ========================================== */

.trip-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}

@media (min-width: 640px) {
    .trip-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .trip-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================
   Trip Card
   ========================================== */

.trip-card {
    background: var(--voyaly-bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--voyaly-border-soft);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.trip-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-gray-100);
}

.trip-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.trip-card:hover .trip-card__image img {
    transform: scale(1.05);
}

.trip-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-300);
}

.trip-card__image--placeholder svg {
    width: 3rem;
    height: 3rem;
}

.trip-card__content {
    padding: var(--spacing-5);
}

.trip-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.trip-card__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.3;
}

.trip-card__title a {
    color: var(--voyaly-text-primary);
}

.trip-card__title a:hover {
    color: var(--voyaly-color-primary-600);
}

.trip-card__destination,
.trip-card__dates {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-1);
}

.trip-card__destination .icon,
.trip-card__dates .icon {
    width: 1rem;
    height: 1rem;
    color: var(--color-gray-400);
    flex-shrink: 0;
}

.trip-card__duration {
    color: var(--color-gray-400);
}

.trip-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border-top: 1px solid var(--color-gray-100);
}

/* ==========================================
   Trip Detail
   ========================================== */

.trip-detail__header {
    background: var(--voyaly-bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--voyaly-border-soft);
    overflow: hidden;
    margin-bottom: var(--spacing-8);
}

.trip-detail__cover {
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background: var(--color-gray-100);
}

.trip-detail__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trip-detail__info {
    padding: var(--spacing-6);
}

.trip-detail__badge-row {
    margin-bottom: var(--spacing-3);
}

.trip-detail__title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--voyaly-text-primary);
    margin-bottom: var(--spacing-4);
}

.trip-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4) var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.trip-detail__destination,
.trip-detail__dates,
.trip-detail__duration {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-gray-600);
}

.trip-detail__destination .icon,
.trip-detail__dates .icon,
.trip-detail__duration .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-gray-400);
}

.trip-detail__actions {
    display: flex;
    gap: var(--spacing-3);
}

.trip-detail__sections {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

@media (min-width: 640px) {
    .trip-detail__sections {
        grid-template-columns: repeat(2, 1fr);
    }
}

.trip-section {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    border: 1px solid var(--color-gray-200);
}

.trip-section--placeholder {
    text-align: center;
    border-style: dashed;
}

.trip-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: var(--color-gray-100);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
    color: var(--color-gray-400);
}

.trip-section__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.trip-section__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-2);
}

.trip-section__text {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-4);
}

.trip-detail__future-info {
    background: var(--voyaly-color-primary-100);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4) var(--spacing-5);
    font-size: var(--font-size-sm);
    color: var(--voyaly-color-primary-700);
}

/* ==========================================
   Filters
   ========================================== */

.filters {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

@media (min-width: 640px) {
    .filters {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.filters__tabs {
    display: flex;
    gap: var(--spacing-1);
    background: var(--color-gray-100);
    padding: var(--spacing-1);
    border-radius: var(--radius-lg);
}

.filters__tab {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-600);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.filters__tab:hover {
    color: var(--color-gray-800);
}

.filters__tab--active {
    background: var(--color-white);
    color: var(--color-gray-900);
    box-shadow: var(--shadow-sm);
}

.filters__search {
    display: flex;
    position: relative;
}

.filters__search-input {
    width: 100%;
    min-width: 200px;
    padding: var(--spacing-2) var(--spacing-4);
    padding-right: var(--spacing-10);
    font-family: inherit;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

.filters__search-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.filters__search-btn {
    position: absolute;
    right: var(--spacing-2);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-gray-400);
    cursor: pointer;
    padding: var(--spacing-1);
}

.filters__search-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.search-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-gray-100);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-6);
    font-size: var(--font-size-sm);
}

/* ==========================================
   Empty State
   ========================================== */

.empty-state {
    text-align: center;
    padding: var(--spacing-16) var(--spacing-4);
}

.empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-6);
    color: var(--color-gray-400);
}

.empty-state__icon svg {
    width: 2.5rem;
    height: 2.5rem;
}

.empty-state__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-2);
}

.empty-state__text {
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-6);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================
   Danger Zone
   ========================================== */

.danger-zone {
    margin-top: var(--spacing-8);
    padding: var(--spacing-6);
    border: 2px dashed var(--color-danger);
    border-radius: var(--radius-xl);
    text-align: center;
}

.danger-zone__title {
    color: var(--color-danger);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-2);
}

.danger-zone__text {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-4);
}

/* ==========================================
   Modal
   ========================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px; /* desktop gutters → content ≈ viewport − 32px */
}

.modal[hidden] {
    display: none !important;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--voyaly-overlay-soft);
}

/* Default: compact centered dialog — never near-full viewport width. */
.modal__content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 560px);
    max-height: calc(100vh - 48px);
    margin: auto;
    background: var(--voyaly-bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    box-sizing: border-box;
}

/* Confirmation: focused decision dialog */
.modal--confirm .modal__content {
    width: min(100%, 520px);
}

/* Medium: share / richer content */
.modal--medium .modal__content {
    width: min(100%, 720px);
}

/* Wide: complex forms / dense panels (opt-in only) */
.modal--wide .modal__content {
    width: min(100%, 920px);
}

/* Viewer: reserved for future .modal-based viewers; keep opt-in wide. */
.modal--viewer .modal__content {
    width: min(100%, 960px);
    max-height: calc(100vh - 32px);
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    flex-shrink: 0;
    padding: var(--spacing-5) var(--spacing-6);
    border-bottom: 1px solid var(--color-gray-200);
}

.modal--confirm .modal__header {
    padding: var(--spacing-4) var(--spacing-5);
}

.modal__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.modal__close {
    background: none;
    border: none;
    color: var(--color-gray-400);
    cursor: pointer;
    padding: var(--spacing-1);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.modal__close:hover {
    color: var(--color-gray-600);
}

.modal__close svg {
    width: 1.25rem;
    height: 1.25rem;
}

.modal__body {
    padding: var(--spacing-6);
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.modal--confirm .modal__body {
    padding: var(--spacing-4) var(--spacing-5);
}

.modal__body p {
    margin-bottom: var(--spacing-2);
}

.modal__body p:last-child {
    margin-bottom: 0;
}

.modal__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacing-3);
    flex-shrink: 0;
    padding: var(--spacing-4) var(--spacing-6);
    border-top: 1px solid var(--color-gray-200);
}

.modal--confirm .modal__footer {
    padding: var(--spacing-3) var(--spacing-5) var(--spacing-4);
}

.modal__footer form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    justify-content: flex-end;
    width: 100%;
}

@media (max-width: 640px) {
    .modal {
        padding: 0;
        align-items: flex-end;
    }

    .modal__content,
    .modal--confirm .modal__content,
    .modal--medium .modal__content,
    .modal--wide .modal__content,
    .modal--viewer .modal__content {
        width: 100%;
        max-width: 100%;
        max-height: min(92vh, calc(100dvh - 12px));
        margin: 0;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .modal__header,
    .modal--confirm .modal__header {
        padding: var(--spacing-4);
        gap: var(--spacing-2);
    }

    .modal__title {
        font-size: var(--font-size-base);
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .modal__close {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: -6px -6px -6px 0;
    }

    .modal__body,
    .modal--confirm .modal__body {
        padding: var(--spacing-4);
    }

    .modal__footer,
    .modal--confirm .modal__footer {
        padding: var(--spacing-3) var(--spacing-4) calc(var(--spacing-4) + env(safe-area-inset-bottom, 0));
        flex-direction: column-reverse;
    }

    .modal__footer .btn,
    .modal__footer form .btn {
        width: 100%;
    }

    .modal__footer form {
        flex-direction: column-reverse;
        width: 100%;
    }
}

/* ==========================================
   Confirm Modal (unified destructive action)
   ========================================== */

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.confirm-modal[hidden] {
    display: none !important;
}

.confirm-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--voyaly-overlay-soft);
    backdrop-filter: blur(2px);
}

.confirm-modal__dialog {
    position: relative;
    width: min(100%, 420px);
    background: var(--voyaly-bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-5);
    animation: confirmModalIn 160ms ease;
}

@keyframes confirmModalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .confirm-modal__dialog { animation: none; }
}

.confirm-modal__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0 0 var(--spacing-2);
    line-height: 1.3;
}

.confirm-modal__text {
    margin: 0 0 var(--spacing-5);
    color: var(--voyaly-text-muted);
    line-height: 1.5;
}

.confirm-modal__actions {
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end;
}

@media (max-width: 560px) {
    .confirm-modal {
        padding: 0;
        align-items: flex-end;
    }

    .confirm-modal__dialog {
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        padding: var(--spacing-5) var(--spacing-4) calc(var(--spacing-5) + env(safe-area-inset-bottom, 0));
        animation: confirmSheetIn 180ms ease;
    }

    .confirm-modal__actions {
        flex-direction: column-reverse;
    }
    .confirm-modal__actions .btn {
        width: 100%;
        min-height: 44px;
    }
}

@keyframes confirmSheetIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   Auth Pages
   ========================================== */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--voyaly-color-primary-100) 0%, var(--voyaly-bg-body) 50%, var(--voyaly-bg-elevated) 100%);
    padding: var(--spacing-6) 0;
}

.auth-container {
    width: 100%;
    max-width: 420px;
    padding: var(--spacing-4);
}

.auth-container--wide {
    max-width: 460px;
}

.auth-card {
    background: var(--voyaly-bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-8) var(--spacing-7);
}

.auth-header {
    text-align: center;
    margin-bottom: var(--spacing-6);
}

.auth-logo {
    display: inline-block;
    margin-bottom: var(--spacing-5);
}

.auth-logo img {
    height: 48px;
    width: auto;
}

.auth-title {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: var(--spacing-2);
}

.auth-subtitle {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    line-height: 1.55;
    max-width: 34ch;
    margin: 0 auto;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    margin-bottom: 0;
}

.auth-footer {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    border-top: 1px solid var(--voyaly-border-soft);
}

.auth-footer p {
    margin: 0;
    line-height: 1.5;
}

.auth-footer a {
    font-weight: 600;
}

/* ==========================================
   Utility Classes
   ========================================== */

.text-muted {
    color: var(--voyaly-text-secondary);
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

[hidden] {
    display: none !important;
}

/* ==========================================
   Trip Days Section
   ========================================== */

.trip-days {
    background: var(--voyaly-bg-card);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-md);
}

.trip-days__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
}

.trip-days__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin: 0;
}

.trip-days__title .icon {
    width: 1.25em;
    height: 1.25em;
    color: var(--color-primary);
}

.trip-days__count {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-400);
    margin-left: var(--spacing-1);
}

.trip-days__empty {
    text-align: center;
    padding: var(--spacing-10) var(--spacing-4);
    color: var(--color-gray-500);
}

.trip-days__empty p {
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-base);
}

.trip-days__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Day Card - Modern App-like Design */
.day-card {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-100);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.day-card:hover {
    border-color: var(--voyaly-border-strong);
    box-shadow: 0 8px 18px rgba(29, 23, 16, 0.08);
    transform: translateY(-2px);
}

.day-card__date {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: var(--spacing-3);
    background: linear-gradient(135deg, var(--voyaly-color-primary-100), var(--voyaly-color-accent-100));
    border-radius: var(--radius-md);
    text-align: center;
}

.day-card__day-of-week {
    font-size: 10px;
    font-weight: 600;
    color: var(--voyaly-color-primary-700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}

.day-card__date-formatted {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--voyaly-color-primary-700);
    line-height: 1.2;
}

.day-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-1) 0;
}

.day-card__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0;
    color: var(--color-gray-900);
    line-height: 1.4;
}

.day-card__title--placeholder {
    color: var(--color-gray-400);
    font-weight: 400;
    font-style: italic;
}

.day-card__notes {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin: var(--spacing-1) 0 0 0;
    line-height: 1.45;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    max-height: calc(1.45em * 2);
}

.day-card__actions {
    flex-shrink: 0;
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
    opacity: 0.15;
    transform: translateY(2px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.day-card:hover .day-card__actions {
    opacity: 1;
    transform: translateY(0);
}

/* Icon buttons in day cards */
.day-card__actions .btn--small {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
    border: 1px solid transparent;
    color: var(--color-gray-500);
    transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.day-card__actions .btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
    border: 1px solid transparent;
    color: var(--color-gray-500);
    transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.day-card__actions .btn--small:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-200);
    color: var(--color-gray-700);
    transform: translateY(-1px);
}

.day-card__actions .btn--icon:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-200);
    color: var(--color-gray-700);
    transform: translateY(-1px);
}

.day-card__actions .btn--small.btn--danger:hover {
    background: var(--color-danger-light);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.day-card__actions .btn--icon.btn--danger:hover {
    background: var(--color-danger-light);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.day-card__actions .btn__icon {
    margin: 0;
    width: 16px;
    height: 16px;
}

/* Empty state compact variant */
.empty-state--compact {
    padding: var(--spacing-8) var(--spacing-6);
}

.empty-state--compact .empty-state__icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-4);
}

.empty-state--compact .empty-state__icon svg {
    width: 100%;
    height: 100%;
    color: var(--color-success);
}

.empty-state--compact .empty-state__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-2);
}

.empty-state--compact .empty-state__text {
    margin-bottom: var(--spacing-6);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .trip-days {
        padding: var(--spacing-4);
        border-radius: var(--radius-lg);
    }
    
    .trip-days__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-4);
    }
    
    .day-card {
        flex-direction: column;
        padding: var(--spacing-4);
    }
    
    .day-card__date {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--spacing-2);
        min-height: auto;
        padding: var(--spacing-2) var(--spacing-3);
    }
    
    .day-card__day-of-week {
        margin-bottom: 0;
    }
    
    .day-card__actions {
        opacity: 1;
        align-self: flex-end;
        margin-top: var(--spacing-2);
        transform: none;
    }
}

/* ===========================================
   Packing List Section
   =========================================== */

.trip-packing {
    background: var(--voyaly-bg-card);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    margin-top: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--voyaly-border-soft);
}

.trip-packing__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-5);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
}

.trip-packing__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0;
}

.trip-packing__title .icon {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.trip-packing__count {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-500);
    background: var(--color-gray-100);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-full);
    margin-left: var(--spacing-2);
}

.trip-packing__empty {
    text-align: center;
    padding: var(--spacing-8) var(--spacing-4);
    color: var(--color-gray-500);
}

.trip-packing__empty p {
    margin-bottom: var(--spacing-4);
}

.trip-packing__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

/* Packing Category */
.packing-category {
    padding: var(--spacing-4) 0 var(--spacing-2);
    margin-top: var(--spacing-1);
    border-top: 1px solid var(--voyaly-border-soft);
}

.packing-category:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

.packing-category__title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    margin: 0;
}

/* Packing Item */
.packing-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--voyaly-bg-elevated);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.packing-item:hover {
    background: var(--voyaly-bg-card);
    border-color: var(--voyaly-border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.packing-item--checked {
    opacity: 0.86;
}

.packing-item--checked .packing-item__name {
    text-decoration: line-through;
    color: var(--color-gray-500);
}

.packing-item__checkbox-form {
    display: flex;
    align-items: center;
}

.packing-item__checkbox {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--voyaly-bg-body);
    border: 1px solid var(--voyaly-border-soft);
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius-full);
    transition: background-color 130ms ease, border-color 130ms ease, transform 120ms ease;
}

.packing-item__checkbox:hover {
    background: var(--voyaly-bg-subtle);
    border-color: var(--voyaly-border-strong);
    transform: scale(1.03);
}

.packing-item__checkbox:active {
    transform: scale(0.96);
}

.packing-item__checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(54, 83, 60, 0.18);
}

.packing-item__checkbox svg {
    width: 22px;
    height: 22px;
    color: var(--color-gray-400);
}

.packing-item--checked .packing-item__checkbox svg {
    color: var(--color-success);
}

.packing-item__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.packing-item__name {
    font-size: var(--font-size-base);
    color: var(--color-gray-900);
    font-weight: 500;
}

.packing-item__quantity {
    font-weight: 600;
    color: var(--color-primary);
    margin-right: var(--spacing-1);
}

.packing-item__category {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.packing-item__actions {
    display: flex;
    gap: var(--spacing-1);
    opacity: 0.18;
    transform: translateX(3px);
    transition: opacity 150ms ease, transform 150ms ease;
}

.packing-item:hover .packing-item__actions {
    opacity: 1;
    transform: translateX(0);
}

.packing-item__actions .btn--small {
    padding: var(--spacing-2);
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.packing-item__actions .btn--small.btn--outline {
    background: var(--color-white);
    border-color: var(--color-gray-200);
    color: var(--color-gray-600);
}

.packing-item__actions .btn--small.btn--outline:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
    color: var(--color-gray-700);
}

.packing-item__actions .btn--small.btn--danger:hover {
    background: var(--color-danger-light);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.packing-item__actions .btn__icon {
    margin: 0;
    width: 16px;
    height: 16px;
}

/* Packing add-item row: quantity stays compact beside the name field. */
.form__row--packing {
    display: flex;
    gap: var(--spacing-4);
    align-items: flex-end;
}

.form__group--small {
    flex: 0 0 100px;
}

.form__group--grow {
    flex: 1;
    min-width: 0;
}

/* Checkbox styling in forms */
.form__checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    cursor: pointer;
}

.form__checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--voyaly-color-primary-600);
    cursor: pointer;
}

.form__checkbox-label {
    font-size: var(--font-size-base);
    color: var(--voyaly-text-primary);
}

/* Packing responsive */
@media (max-width: 640px) {
    .trip-packing {
        padding: var(--spacing-4);
        border-radius: var(--radius-lg);
        margin-top: var(--spacing-4);
    }
    
    .trip-packing__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-4);
    }
    
    .packing-item {
        padding: var(--spacing-3);
    }
    
    .packing-item__actions {
        opacity: 1;
        transform: none;
    }
    
    .form__row--packing {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-4);
    }
    
    .form__group--small {
        flex: none;
        width: 100%;
    }
}

/* ===========================================
   Packing Overview + Personal Workspace
   =========================================== */

.packing-overview {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.packing-overview__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-3);
}

.packing-overview__stat {
    background: var(--voyaly-bg-elevated);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3) var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.packing-overview__stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--voyaly-text-primary);
    line-height: 1.1;
}

.packing-overview__stat-label {
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-secondary);
}

.packing-overview__categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.packing-overview__category {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--voyaly-bg-elevated);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
}

.packing-overview__category-name {
    color: var(--voyaly-text-primary);
    font-weight: 600;
}

.packing-overview__category-count {
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-xs);
}

.packing-overview__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.packing-overview__personal-note {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    background: var(--voyaly-bg-elevated);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-md);
    padding: var(--spacing-2) var(--spacing-3);
}

.packing-plan {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.packing-plan__category {
    background: var(--voyaly-bg-elevated);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3);
}

.packing-plan__category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--voyaly-border-soft);
}

.packing-plan__category-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin: 0;
}

.packing-plan__category-count {
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-secondary);
    background: var(--voyaly-bg-body);
    border-radius: var(--radius-full);
    padding: 2px var(--spacing-2);
}

.packing-plan__items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.packing-plan__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    background: var(--voyaly-bg-body);
}

.packing-plan__item-main {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-2);
    min-width: 0;
}

.packing-plan__item-name {
    color: var(--voyaly-text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.packing-plan__item-qty {
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-xs);
}

.packing-plan__item-actions {
    display: flex;
    gap: var(--spacing-1);
    opacity: 0.2;
    transition: opacity 140ms ease;
}

.packing-plan__item:hover .packing-plan__item-actions {
    opacity: 1;
}

.packing-plan__inline-form {
    display: inline-flex;
}

.packing-plan__item-actions .btn--small {
    min-width: 30px;
    height: 30px;
    padding: 6px;
}

.packing-plan__item-actions .btn--icon {
    min-width: 30px;
    height: 30px;
    padding: 6px;
}

.packing-plan__more {
    padding: 2px var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-secondary);
}

.packing-overview-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-8);
}

.packing-overview-page__header {
    margin-bottom: var(--spacing-1);
}

.packing-overview-page__title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-3xl);
    line-height: 1.2;
}

.packing-overview-page__title-icon,
.packing-overview-page__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--voyaly-color-primary-600);
}

.packing-overview-page__title-icon .voyaly-icon--packing {
    width: 1.15em;
    height: 1.15em;
}

.packing-overview-page__empty-icon {
    margin: 0 auto var(--spacing-3);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--voyaly-color-accent-100);
    border: 1px solid var(--voyaly-color-accent-400);
}

.packing-overview-page__empty-icon .voyaly-icon--packing {
    width: 24px;
    height: 24px;
}

.voyaly-icon--packing {
    display: block;
    flex-shrink: 0;
}

.trip-section-block__icon.voyaly-icon--packing {
    width: 22px;
    height: 22px;
}

.packing-overview-page__subtitle {
    margin: var(--spacing-1) 0 0;
    color: var(--voyaly-text-secondary);
}

.packing-overview-page__empty {
    text-align: center;
    border: 1px dashed var(--voyaly-border-strong);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8) var(--spacing-4);
}

.packing-overview-page__empty p {
    margin: 0 0 var(--spacing-4);
}

.packing-overview-page__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
}

@media (min-width: 768px) {
    .packing-overview-page__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.packing-overview-page__card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    color: inherit;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.packing-overview-page__card:hover {
    color: inherit;
    transform: translateY(-2px);
    border-color: var(--voyaly-border-strong);
    box-shadow: var(--shadow-md);
}

.packing-overview-page__card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-2);
}

.packing-overview-page__card-title {
    margin: 0;
    font-size: var(--font-size-lg);
    line-height: 1.3;
}

.packing-overview-page__card-percent {
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-secondary);
    background: var(--voyaly-bg-elevated);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-full);
    padding: 2px var(--spacing-2);
    white-space: nowrap;
}

.packing-overview-page__card-meta {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-secondary);
}

.packing-overview-page__card-progress {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-primary);
}

.packing-overview-page__card-track {
    width: 100%;
    height: 7px;
    border-radius: var(--radius-full);
    background: var(--voyaly-bg-subtle);
    overflow: hidden;
}

.packing-overview-page__card-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--voyaly-color-primary-500), var(--voyaly-color-primary-700));
}

.packing-suggest-wrap {
    position: relative;
    --packing-layer-backdrop: 1200;
    --packing-layer-active-control: 1210;
    --packing-layer-panel: 1220;
    z-index: 1;
}

.packing-suggest-wrap--active-layer {
    z-index: var(--packing-layer-active-control);
}

.packing-suggest-wrap--open .form__input {
    border-color: var(--voyaly-border-primary);
    box-shadow: 0 0 0 1px rgba(54, 83, 60, 0.14);
}

.packing-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: var(--packing-layer-panel);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    background: var(--voyaly-bg-elevated);
    box-shadow: 0 14px 28px rgba(29, 23, 16, 0.16);
    overflow: hidden;
    transform-origin: top center;
    animation: packingSuggestIn 150ms ease;
}

@keyframes packingSuggestIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.packing-suggest__header {
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-secondary);
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: 1px solid var(--voyaly-border-soft);
}

.packing-suggest__list {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.packing-suggest__item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: var(--spacing-2) var(--spacing-3);
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-2);
    cursor: pointer;
    transition: background-color 120ms ease, transform 100ms ease;
}

.packing-suggest__item:hover,
.packing-suggest__item:focus-visible,
.packing-suggest__item--active {
    background: var(--voyaly-bg-body);
    outline: none;
}

.packing-suggest__item--active {
    background: var(--voyaly-color-primary-100);
}

.packing-suggest__item:active {
    transform: scale(0.995);
}

.packing-suggest__name {
    color: var(--voyaly-text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.packing-suggest__cat {
    color: var(--voyaly-text-muted);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.packing-suggest-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(28, 26, 21, 0.14);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 140ms ease;
}

.packing-suggest-backdrop--visible {
    opacity: 1;
}

.packing-autofilled {
    animation: packingAutofillFlash 420ms ease;
}

@keyframes packingAutofillFlash {
    0% {
        border-color: var(--voyaly-border-primary);
        background: var(--voyaly-color-primary-100);
    }
    100% {
        border-color: var(--voyaly-border-soft);
        background: var(--voyaly-bg-elevated);
    }
}

.packing-personal {
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-8);
}

.packing-personal__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
}

.packing-personal__title {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-2xl);
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.packing-personal__title-icon {
    display: inline-flex;
    color: var(--voyaly-color-primary-600);
}

.packing-personal__title-icon .voyaly-icon--packing {
    width: 1.1em;
    height: 1.1em;
}

.packing-personal__subtitle {
    margin: var(--spacing-1) 0 0;
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
}

.packing-personal__progress {
    min-width: 240px;
}

.packing-personal__progress-label {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    margin-bottom: var(--spacing-2);
}

.packing-personal__progress-track {
    width: 100%;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--voyaly-bg-subtle);
    overflow: hidden;
}

.packing-personal__progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--voyaly-color-primary-500), var(--voyaly-color-primary-700));
    transition: width 180ms ease;
}

.packing-personal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-5);
}

.packing-personal__empty {
    text-align: center;
    padding: var(--spacing-8) var(--spacing-4);
    color: var(--voyaly-text-secondary);
    border: 1px dashed var(--voyaly-border-strong);
    border-radius: var(--radius-lg);
}

.packing-personal__empty p {
    margin: 0 0 var(--spacing-4);
}

.packing-personal__categories {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.packing-personal__category {
    background: var(--voyaly-bg-elevated);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
}

.packing-personal__category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--voyaly-border-soft);
}

.packing-personal__category-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    margin: 0;
}

.packing-personal__category-count {
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-secondary);
    background: var(--voyaly-bg-body);
    border-radius: var(--radius-full);
    padding: 2px var(--spacing-2);
}

.packing-personal__items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.packing-personal__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    background: var(--voyaly-bg-elevated);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease, opacity 140ms ease;
}

.packing-personal__item:hover {
    border-color: var(--voyaly-border-strong);
    box-shadow: var(--shadow-sm);
}

.packing-personal__item--checked {
    background: var(--voyaly-bg-body);
    opacity: 0.86;
}

.packing-personal__item--checked .packing-personal__item-name {
    color: var(--voyaly-text-secondary);
    text-decoration: line-through;
}

.packing-personal__item--pending {
    opacity: 0.62;
}

.packing-personal__toggle-form {
    display: flex;
    align-items: center;
}

.packing-personal__check {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    border: 1px solid var(--voyaly-border-soft);
    background: var(--voyaly-bg-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 120ms ease, border-color 120ms ease, transform 110ms ease;
}

.packing-personal__check:hover {
    background: var(--voyaly-bg-subtle);
    border-color: var(--voyaly-border-strong);
}

.packing-personal__check:active {
    transform: scale(0.96);
}

.packing-personal__check:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(54, 83, 60, 0.16);
}

.packing-personal__check-icon {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    border: 2px solid var(--voyaly-text-muted);
    transition: all 120ms ease;
}

.packing-personal__check--checked .packing-personal__check-icon {
    border-color: var(--voyaly-success-600);
    background: var(--voyaly-success-600);
    box-shadow: inset 0 0 0 3px var(--voyaly-bg-elevated);
}

.packing-personal__item-main {
    min-width: 0;
}

.packing-personal__item-name {
    display: block;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--voyaly-text-primary);
    line-height: 1.35;
}

.packing-personal__item-quantity {
    color: var(--voyaly-text-secondary);
    margin-right: 4px;
}

.packing-personal__item-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    opacity: 0.15;
    transition: opacity 140ms ease;
}

.packing-personal__item:hover .packing-personal__item-actions {
    opacity: 1;
}

.packing-personal__inline-form {
    display: inline-flex;
}

.packing-personal__item-actions .btn--small {
    min-width: 32px;
    height: 32px;
    padding: var(--spacing-2);
}

@media (max-width: 640px) {
    .packing-overview__stats {
        grid-template-columns: 1fr;
    }

    .packing-overview__cta-row .btn {
        width: 100%;
    }

    .packing-overview__personal-note {
        width: 100%;
        justify-content: center;
    }

    .packing-plan__item {
        flex-wrap: wrap;
        gap: var(--spacing-2);
    }

    .packing-plan__item-actions {
        width: 100%;
        justify-content: flex-end;
        opacity: 1;
    }

    .packing-overview-page__title {
        font-size: var(--font-size-2xl);
    }

    .packing-personal {
        padding: var(--spacing-4);
        border-radius: var(--radius-lg);
    }

    .packing-personal__progress {
        width: 100%;
        min-width: 0;
    }

    .packing-personal__actions .btn {
        width: 100%;
    }

    .packing-personal__item {
        grid-template-columns: auto 1fr;
        gap: var(--spacing-2);
    }

    .packing-personal__item-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        opacity: 1;
    }

    .packing-suggest {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1220;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        max-height: 65vh;
        box-shadow: 0 -10px 24px rgba(29, 23, 16, 0.18);
        top: auto;
        animation: packingSuggestInMobile 160ms ease;
    }

    @keyframes packingSuggestInMobile {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .packing-suggest__list {
        max-height: 52vh;
    }
}

/* ===========================================
   Documents Section
   =========================================== */

.trip-documents {
    background: var(--voyaly-bg-card);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    margin-top: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--voyaly-border-soft);
}

.trip-documents__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-5);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
}

.trip-documents__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0;
}

.trip-documents__title .icon {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.trip-documents__count {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-500);
    background: var(--color-gray-100);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-full);
    margin-left: var(--spacing-2);
}

.trip-documents__empty {
    text-align: center;
    padding: var(--spacing-8) var(--spacing-4);
    color: var(--color-gray-500);
}

.trip-documents__empty p {
    margin-bottom: var(--spacing-4);
}

.trip-documents__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Document Card */
.document-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--voyaly-bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.document-card:hover {
    background: var(--voyaly-bg-card);
    border-color: var(--voyaly-border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.document-card__icon {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--voyaly-color-primary-100), var(--voyaly-color-primary-600));
    border-radius: var(--radius-lg);
}

.document-card__icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.document-card__type-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 6px;
    background: var(--color-gray-800);
    color: white;
    border-radius: var(--radius-sm);
}

.document-card__content {
    flex: 1;
    min-width: 0;
}

.document-card__name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-card__filename {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin: 0 0 var(--spacing-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-card__meta {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.document-card__date::before {
    content: '•';
    margin-right: var(--spacing-2);
}

.document-card__actions {
    display: flex;
    gap: var(--spacing-1);
    opacity: 0.16;
    transform: translateY(2px);
    transition: opacity 150ms ease, transform 150ms ease;
}

.document-card:hover .document-card__actions {
    opacity: 1;
    transform: translateY(0);
}

.trip-documents__list:not(.trip-documents__list--extra) .document-card__actions {
    opacity: 0.9;
    transform: none;
}

.document-card__actions .btn--small {
    padding: var(--spacing-2);
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.document-card__actions .btn--icon {
    padding: var(--spacing-2);
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.document-card__actions .btn--small.btn--outline {
    background: var(--color-white);
    border-color: var(--color-gray-200);
    color: var(--color-gray-600);
}

.document-card__actions .btn--icon.btn--outline {
    background: var(--color-white);
    border-color: var(--color-gray-200);
    color: var(--color-gray-600);
}

.document-card__actions .btn--small.btn--outline:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
    color: var(--color-gray-700);
    transform: translateY(-1px);
}

.document-card__actions .btn--icon.btn--outline:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
    color: var(--color-gray-700);
    transform: translateY(-1px);
}

.document-card__actions .btn--small.btn--danger:hover {
    background: var(--color-danger-light);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.document-card__actions .btn__icon {
    margin: 0;
    width: 16px;
    height: 16px;
}

/* Document Info (for edit page) */
.document-info {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.document-info__file {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
    margin: 0;
}

.document-info__icon {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

.document-info__size {
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
}

/* File input styling */
.form__input--file {
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    cursor: pointer;
}

.form__input--file::file-selector-button {
    padding: var(--spacing-2) var(--spacing-4);
    margin-right: var(--spacing-4);
    background: var(--voyaly-color-primary-600);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.form__input--file::file-selector-button:hover {
    background: var(--voyaly-color-primary-700);
}

/* Documents responsive */
@media (max-width: 640px) {
    .trip-documents {
        padding: var(--spacing-4);
        border-radius: var(--radius-lg);
        margin-top: var(--spacing-4);
    }
    
    .trip-documents__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-4);
    }
    
    .document-card {
        flex-wrap: wrap;
        padding: var(--spacing-3);
    }
    
    .document-card__content {
        flex: 1 1 calc(100% - 64px);
    }
    
    .document-card__actions {
        opacity: 1;
        flex-basis: 100%;
        justify-content: flex-end;
        margin-top: var(--spacing-2);
        padding-top: var(--spacing-2);
        border-top: 1px solid var(--color-gray-100);
    }
}

/* ===========================================
   Media/Photos Section
   =========================================== */

.trip-media {
    background: var(--voyaly-bg-card);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--voyaly-border-soft);
}

.trip-media__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-5);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
}

.trip-media__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0;
}

.trip-media__title .icon {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.trip-media__count {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-500);
    background: var(--color-gray-100);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-full);
    margin-left: var(--spacing-2);
}

.trip-media__empty {
    text-align: center;
    padding: var(--spacing-8) var(--spacing-4);
    color: var(--color-gray-500);
}

.trip-media__empty p {
    margin-bottom: var(--spacing-4);
}

/* Media Gallery Grid */
.trip-media__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--spacing-4);
}

/* Media Card */
.media-card {
    background: var(--voyaly-bg-elevated);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--voyaly-border-soft);
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.media-card:hover {
    background: var(--voyaly-bg-card);
    border-color: var(--voyaly-border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.media-card__image-link {
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--color-gray-100);
}

.media-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease;
}

.media-card:hover .media-card__image {
    transform: scale(1.03);
}

.media-card__content {
    padding: var(--spacing-3);
}

.media-card__name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-card__meta {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin: 0;
    line-height: 1.35;
}

.media-card__actions {
    display: flex;
    gap: var(--spacing-1);
    padding: 0 var(--spacing-3) var(--spacing-3);
    opacity: 0.14;
    transform: translateY(2px);
    transition: opacity 150ms ease, transform 150ms ease;
}

.media-card:hover .media-card__actions {
    opacity: 1;
    transform: translateY(0);
}

.trip-media__gallery:not(.trip-media__gallery--extra) .media-card__actions {
    opacity: 0.9;
    transform: none;
}

.media-card__actions .btn--small {
    padding: var(--spacing-2);
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.media-card__actions .btn--icon {
    padding: var(--spacing-2);
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.media-card__actions .btn--small.btn--outline {
    background: var(--color-white);
    border-color: var(--color-gray-200);
    color: var(--color-gray-600);
}

.media-card__actions .btn--icon.btn--outline {
    background: var(--color-white);
    border-color: var(--color-gray-200);
    color: var(--color-gray-600);
}

.media-card__actions .btn--small.btn--outline:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
    color: var(--color-gray-700);
    transform: translateY(-1px);
}

.media-card__actions .btn--icon.btn--outline:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
    color: var(--color-gray-700);
    transform: translateY(-1px);
}

.media-card__actions .btn--small.btn--danger:hover {
    background: var(--color-danger-light);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.media-card__actions .btn__icon {
    margin: 0;
    width: 16px;
    height: 16px;
}

/* Media Preview (for edit page) */
.media-preview {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    text-align: center;
}

.media-preview__image {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--radius-md);
    object-fit: contain;
    margin-bottom: var(--spacing-3);
}

.media-preview__info {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0;
}

.media-preview__size {
    color: var(--color-gray-400);
}

/* Media responsive */
@media (max-width: 640px) {
    .trip-media {
        padding: var(--spacing-4);
        border-radius: var(--radius-lg);
        margin-top: var(--spacing-4);
    }
    
    .trip-media__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-4);
    }
    
    .trip-media__gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }
    
    .media-card__actions {
        opacity: 1;
        transform: none;
    }
    
    .media-card__content {
        padding: var(--spacing-2);
    }
    
    .media-card__actions {
        padding: 0 var(--spacing-2) var(--spacing-2);
    }
}

/* ===========================================
   Trip Sharing Controls
   =========================================== */

.trip-share {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    border: 1px solid var(--color-gray-200);
}

.trip-share__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.trip-share__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-700);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.trip-share__title svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

.trip-share__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3);
}

.trip-share__link-wrapper {
    flex: 1;
    min-width: 200px;
    display: flex;
    gap: var(--spacing-2);
}

.trip-share__link {
    flex: 1;
    font-family: monospace;
    font-size: var(--font-size-sm);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    color: var(--color-gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trip-share__copy-btn {
    flex-shrink: 0;
}

.trip-share__actions {
    display: flex;
    gap: var(--spacing-2);
}

.trip-share__no-link {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}

/* ===========================================
   Public Shared Trip View
   =========================================== */

.shared-error {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-4);
}

.shared-error__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-6);
    color: var(--color-gray-300);
}

.shared-error__icon svg {
    width: 100%;
    height: 100%;
}

.shared-error h1 {
    font-size: var(--font-size-2xl);
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-3);
}

.shared-error p {
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-6);
}

/* Shared Trip Container */
.shared-trip {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-6) 0;
}

.shared-trip__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    background: var(--color-primary-lightest);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-4);
}

.shared-trip__badge-icon {
    width: 16px;
    height: 16px;
}

.shared-trip__header {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.shared-trip__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-4);
}

.shared-trip__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-4);
    color: var(--color-gray-600);
    font-size: var(--font-size-base);
}

.shared-trip__destination,
.shared-trip__dates,
.shared-trip__duration {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.shared-trip__destination svg,
.shared-trip__dates svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

/* Shared Sections */
.shared-section {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-sm);
}

.shared-section__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-800);
    margin: 0 0 var(--spacing-5);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.shared-section__icon {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
}

/* Shared Days */
.shared-days {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.shared-day {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.shared-day__date {
    flex-shrink: 0;
    width: 60px;
    text-align: center;
    padding: var(--spacing-2);
    background: var(--color-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.shared-day__weekday {
    display: block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    color: var(--color-gray-500);
    font-weight: 500;
}

.shared-day__day {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.2;
}

.shared-day__month {
    display: block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    color: var(--color-gray-500);
}

.shared-day__content {
    flex: 1;
    min-width: 0;
}

.shared-day__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-800);
    margin: 0 0 var(--spacing-2);
}

.shared-day__notes {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0;
    white-space: pre-line;
}

.shared-day__notes--empty {
    color: var(--color-gray-400);
    font-style: italic;
}

/* Shared Packing List */
.shared-packing {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-6);
}

.shared-packing__category-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--voyaly-color-primary-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--spacing-3);
    padding-bottom: var(--spacing-2);
    border-bottom: 2px solid var(--voyaly-color-primary-100);
}

.shared-packing__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shared-packing__item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    padding: var(--spacing-2) 0;
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
}

.shared-packing__item--checked {
    color: var(--color-gray-400);
    text-decoration: line-through;
}

.shared-packing__checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
}

.shared-packing__item--checked .shared-packing__checkbox {
    background: var(--color-success);
    border-color: var(--color-success);
}

.shared-packing__checkbox svg {
    width: 12px;
    height: 12px;
    color: var(--color-white);
}

.shared-packing__name {
    flex: 1;
}

.shared-packing__quantity {
    color: var(--color-gray-400);
    font-weight: 500;
}

/* Shared Empty */
.shared-empty {
    text-align: center;
    padding: var(--spacing-8);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    color: var(--color-gray-500);
}

/* Shared Footer */
.shared-footer {
    text-align: center;
    padding: var(--spacing-6);
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
}

.shared-footer p {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0;
}

.shared-footer svg {
    width: 16px;
    height: 16px;
}

.shared-footer strong {
    color: var(--color-primary);
    font-weight: 600;
}

/* ===================================
   COLLABORATORS SECTION
   =================================== */

.trip-collaborator-notice {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--voyaly-color-primary-100);
    border: 1px solid var(--voyaly-color-primary-500);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-6);
    color: var(--voyaly-color-primary-700);
    font-size: var(--font-size-sm);
}

.trip-collaborator-notice--viewer {
    background: var(--voyaly-info-100);
    border-color: var(--voyaly-info-600);
    color: var(--voyaly-info-600);
}

.trip-collaborator-notice__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.trip-collaborators {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-5);
    margin-bottom: var(--spacing-6);
}

.trip-collaborators__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
}

.trip-collaborators__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-800);
    margin: 0;
}

.trip-collaborators__title svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

.trip-collaborators__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-left: var(--spacing-2);
}

.trip-collaborators__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-4);
}

.trip-collaborators__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
}

.trip-collaborators__item:last-child {
    margin-bottom: 0;
}

.trip-collaborators__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--voyaly-color-primary-600);
    color: var(--voyaly-text-on-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
}

.trip-collaborators__info {
    flex: 1;
    min-width: 0;
}

.trip-collaborators__email {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-800);
    word-break: break-all;
}

.trip-collaborators__role {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.trip-collaborators__remove-form {
    flex-shrink: 0;
}

.trip-collaborators__add-form {
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-gray-100);
}

.trip-collaborators__add-row {
    display: flex;
    gap: var(--spacing-2);
}

.trip-collaborators__add-row .form__input {
    flex: 1;
    min-width: 0;
}

.trip-collaborators__hint {
    margin: var(--spacing-2) 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

/* ===================================
   TRIP INDEX SECTIONS
   =================================== */

.trips-section {
    margin-bottom: var(--spacing-8);
}

.trips-section__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-800);
    margin: 0 0 var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-200);
}

.trips-section__icon {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
}

.trips-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-full);
    margin-left: auto;
}

/* Trip Card Shared Badge */
.trip-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.badge--shared {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-secondary);
    border: 1px solid var(--voyaly-border-soft);
}

.badge--shared .badge__icon {
    width: 12px;
    height: 12px;
}

.page-header__meta {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    font-weight: 400;
}

/* ===================================
   UNIFIED SHARING SECTION
   =================================== */

.trip-sharing {
    background: var(--voyaly-bg-body);
    border-radius: var(--radius-xl);
    box-shadow: none;
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    border: 1px solid var(--voyaly-border-soft);
}

.trip-sharing__header {
    margin-bottom: var(--spacing-5);
}

.trip-sharing__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-800);
    margin: 0;
}

.trip-sharing__title svg {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
}

.trip-sharing__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.trip-sharing__section {
    padding: var(--spacing-4);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    background: var(--voyaly-bg-elevated);
}

.trip-sharing__section:last-child {
    padding-bottom: var(--spacing-4);
}

.trip-sharing__section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-700);
    margin: 0 0 var(--spacing-2);
    text-transform: none;
    letter-spacing: 0.02em;
}

.trip-sharing__section-title svg {
    width: 16px;
    height: 16px;
    color: var(--color-gray-400);
}

.trip-sharing__section-desc {
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    line-height: 1.5;
    margin: 0 0 var(--spacing-3);
}

.trip-sharing__section-desc--spaced {
    margin-bottom: var(--spacing-3);
}

.trip-sharing__link-row {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.trip-sharing__link-input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    color: var(--color-gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* People List */
.trip-sharing__people-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.trip-sharing__person {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--voyaly-bg-body);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-md);
}

.trip-sharing__person-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--voyaly-color-primary-500), var(--voyaly-color-primary-700));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.trip-sharing__person-info {
    flex: 1;
    min-width: 0;
}

.trip-sharing__person-email {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    word-break: break-all;
}

.trip-sharing__role-form {
    display: flex;
    align-items: center;
}

.trip-sharing__role-select {
    font-size: var(--font-size-xs);
    padding: var(--spacing-1) var(--spacing-2);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-sm);
    background: var(--voyaly-bg-elevated);
    color: var(--voyaly-text-secondary);
    cursor: pointer;
    min-width: 120px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.trip-sharing__role-select:focus-visible {
    outline: none;
    border-color: var(--voyaly-border-primary);
    box-shadow: 0 0 0 3px rgba(54, 83, 60, 0.16);
}

.trip-sharing__remove-form {
    display: flex;
}

/* Icon-only Button */
.btn--icon {
    padding: var(--spacing-1);
    min-width: auto;
    line-height: 1;
}

.btn--icon svg {
    width: 16px;
    height: 16px;
}

.btn--danger-ghost {
    background: transparent;
    border: none;
    color: var(--color-gray-400);
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease, transform 120ms ease;
}

.btn--danger-ghost:hover {
    color: var(--color-error);
    background: rgba(161, 60, 60, 0.08);
}

.btn--danger-ghost:active {
    transform: translateY(1px);
}

/* Pending Invitations */
.trip-sharing__invitations {
    margin-bottom: var(--spacing-4);
}

.trip-sharing__invitations-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-500);
    margin: 0 0 var(--spacing-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.trip-sharing__invitation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: #fff8eb;
    border: 1px dashed #e4c98d;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
}

.trip-sharing__invitation:last-child {
    margin-bottom: 0;
}

.trip-sharing__invitation-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.trip-sharing__invitation-email {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    word-break: break-all;
}

.trip-sharing__invitation-role {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
}

.trip-sharing__invitation-date {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.trip-sharing__invitation-actions {
    display: flex;
    gap: var(--spacing-1);
    flex-shrink: 0;
}

/* Invite Form */
.trip-sharing__invite-form {
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--voyaly-border-soft);
}

.trip-sharing__invite-row {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.trip-sharing__invite-row .form__input {
    flex: 1;
    min-width: 0;
}

.trip-sharing__invite-role {
    width: 180px;
    flex-shrink: 0;
}

.trip-sharing__hint {
    margin: var(--spacing-2) 0 0;
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted);
    line-height: 1.45;
}

.trip-sharing__inline-form {
    display: inline-flex;
}

.trip-sharing__public-link {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.trip-sharing__revoke-form {
    display: flex;
    justify-content: flex-start;
}

.trip-sharing__link-row .btn span {
    margin-left: 0.25rem;
}

/* Shared responsive */
@media (max-width: 640px) {
    .shared-trip__header {
        padding: var(--spacing-6);
    }
    
    .shared-trip__title {
        font-size: var(--font-size-2xl);
    }
    
    .shared-trip__meta {
        flex-direction: column;
        gap: var(--spacing-2);
    }
    
    .shared-day {
        flex-direction: column;
        gap: var(--spacing-3);
    }
    
    .shared-day__date {
        width: auto;
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        padding: var(--spacing-2) var(--spacing-3);
    }
    
    .shared-day__weekday,
    .shared-day__day,
    .shared-day__month {
        display: inline;
    }
    
    .shared-day__day {
        font-size: var(--font-size-lg);
    }
    
    .shared-packing {
        grid-template-columns: 1fr;
    }
    
    .trip-share__content {
        flex-direction: column;
        align-items: stretch;
    }
    
    .trip-share__link-wrapper {
        min-width: 100%;
    }
    
    .trip-share__actions {
        width: 100%;
    }
    
    .trip-share__actions .btn {
        flex: 1;
    }
    
    /* Unified Sharing Section Responsive */
    .trip-sharing {
        padding: var(--spacing-4);
    }
    
    .trip-sharing__link-row {
        flex-wrap: wrap;
    }
    
    .trip-sharing__link-input {
        width: 100%;
        flex: none;
    }
    
    .trip-sharing__person {
        flex-wrap: wrap;
    }
    
    .trip-sharing__person-info {
        flex: 1 1 100%;
        margin-bottom: var(--spacing-2);
    }
    
    .trip-sharing__role-select {
        flex: 1;
    }
    
    .trip-sharing__invitation {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .trip-sharing__invitation-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .trip-sharing__invite-row {
        flex-wrap: wrap;
    }
    
    .trip-sharing__invite-row .form__input {
        width: 100%;
        flex: none;
    }
    
    .trip-sharing__invite-role {
        flex: 1;
        width: auto;
    }
}

/* Generic Invitation Link Display */
.trip-sharing__invitation-email--generic {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    font-style: italic;
    color: var(--voyaly-color-primary-600);
}

.trip-sharing__generic-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Packing Readonly Checkbox (viewers) */
.packing-item__checkbox--readonly {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.6;
    cursor: default;
}

.packing-item__checkbox--readonly svg {
    width: 22px;
    height: 22px;
    color: var(--voyaly-text-muted);
}

.packing-item--checked .packing-item__checkbox--readonly svg {
    color: var(--voyaly-success-600);
}

/* Invitation Info (accept page) */
.invitation-info {
    padding: var(--spacing-4);
    background: var(--voyaly-bg-card);
    border-radius: var(--radius-lg);
    margin: var(--spacing-4) 0;
}

.invitation-info__role {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.invitation-info__label {
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
}

.auth-card__header {
    text-align: center;
    margin-bottom: var(--spacing-4);
}

.auth-card__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-2);
}

.auth-card__subtitle {
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
}

.auth-card__text {
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-4);
    text-align: center;
}

.auth-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

/* ===========================================
   TRIP HERO (Reworked Trip Header)
   =========================================== */

.trip-hero {
    background: var(--voyaly-bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--voyaly-border-soft);
    overflow: hidden;
    margin-bottom: var(--spacing-6);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

@media (hover: hover) {
    .trip-hero:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
    }
}

.trip-hero__cover {
    aspect-ratio: 21 / 8;
    overflow: hidden;
    background: var(--voyaly-bg-subtle);
}

.trip-hero__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease;
}

@media (hover: hover) {
    .trip-hero:hover .trip-hero__cover img {
        transform: scale(1.015);
    }
}

.trip-hero__body {
    padding: var(--spacing-6) var(--spacing-6) var(--spacing-5);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 247, 238, 0.82));
}

.trip-hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-3);
}

.trip-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    align-items: center;
}

.trip-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

/* Wrapping form should not affect the flex layout of hero actions. */
.trip-hero__delete-form {
    display: contents;
}

.trip-utility-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    line-height: 1;
    border-radius: var(--radius-full);
    border-color: var(--voyaly-border-soft);
    background: rgba(255, 255, 255, 0.78);
    color: var(--voyaly-text-secondary);
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.trip-utility-action svg,
.trip-utility-action .btn__icon {
    width: 16px;
    height: 16px;
    display: block;
}

.trip-utility-action:hover {
    border-color: var(--voyaly-border-strong);
    background: rgba(255, 255, 255, 0.96);
    color: var(--voyaly-text-primary);
    transform: translateY(-1px);
}

.trip-utility-action:active {
    transform: translateY(0);
    background: var(--voyaly-bg-subtle);
}

.trip-utility-action--danger:hover {
    border-color: rgba(180, 70, 60, 0.35);
    color: var(--voyaly-danger-600);
    background: rgba(255, 245, 243, 0.95);
}

.trip-leave-action {
    border-radius: var(--radius-full);
    color: var(--voyaly-text-secondary);
    border-color: var(--voyaly-border-soft);
    background: rgba(255, 255, 255, 0.72);
    font-weight: 600;
}

.trip-leave-action:hover {
    color: var(--voyaly-danger-600);
    border-color: rgba(180, 70, 60, 0.3);
    background: rgba(255, 245, 243, 0.95);
}

.trip-hero__title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--voyaly-text-primary);
    margin: 0 0 var(--spacing-3);
    line-height: 1.18;
    letter-spacing: -0.01em;
}

.trip-hero__subtitle {
    margin: 0 0 var(--spacing-4);
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.trip-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.trip-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px var(--spacing-3);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    white-space: nowrap;
}

.trip-hero__pill svg {
    width: 14px;
    height: 14px;
    color: var(--voyaly-text-muted);
    flex-shrink: 0;
}

.trip-hero__summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-5);
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--voyaly-border-soft);
}

.trip-hero__summary:empty {
    display: none;
}

.trip-hero__summary span {
    display: inline-flex;
    align-items: center;
}

/* Role Badges */
.badge--role {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px var(--spacing-2);
    border-radius: var(--radius-sm);
}

.badge--role-owner {
    background: var(--voyaly-color-primary-100);
    color: var(--voyaly-color-primary-700);
}

.badge--role-editor {
    background: var(--voyaly-color-accent-100);
    color: var(--voyaly-color-primary-600);
}

.badge--role-viewer {
    background: var(--voyaly-info-100);
    color: var(--voyaly-info-600);
}

.trip-hero--owner {
    border-color: #c8d3c4;
}

.trip-hero--viewer {
    border-color: #d8e2e4;
}

.trip-hero--viewer .trip-hero__pill {
    background: var(--voyaly-bg-body);
}

/* ===========================================
   TRIP SECTION BLOCK (Unified section card)
   =========================================== */

.trip-section-block {
    background:
        linear-gradient(180deg, #fffdf9 0%, var(--voyaly-bg-card) 120px);
    border-radius: var(--radius-xl);
    border: 1px solid var(--voyaly-border-soft);
    box-shadow: 0 8px 20px rgba(29, 23, 16, 0.06);
    padding: var(--spacing-5) var(--spacing-6);
    margin-bottom: var(--spacing-5);
    min-width: 0;
}

.trip-section-block--primary {
    box-shadow: 0 10px 24px rgba(29, 23, 16, 0.08);
}

.trip-section-block--light {
    background:
        linear-gradient(180deg, #fffdf8 0%, rgba(255, 253, 248, 0) 128px),
        var(--voyaly-bg-card);
    border-color: var(--voyaly-border-soft);
}

.trip-section-block--admin {
    background: var(--voyaly-bg-elevated);
    border: 1px dashed var(--voyaly-border-strong);
    box-shadow: none;
}

/* Anreise: calm deep olive / travel tint */
.trip-section-block--flight {
    background:
        linear-gradient(
            180deg,
            #e8eee6 0%,
            rgba(232, 238, 230, 0) 128px
        ),
        var(--voyaly-bg-card);
    border-color: rgba(198, 183, 158, 0.85);
    box-shadow: 0 9px 22px rgba(29, 23, 16, 0.07);
}

/* Unterkunft: warm sand / cream stay tint */
.trip-section-block--stay {
    background:
        linear-gradient(
            180deg,
            #f5ecdf 0%,
            rgba(245, 236, 223, 0) 128px
        ),
        var(--voyaly-bg-card);
    border-color: rgba(198, 183, 158, 0.85);
    box-shadow: 0 9px 22px rgba(29, 23, 16, 0.07);
}

/* Tagesplanung: soft calendar / cream tint */
.trip-section-block--planning {
    background:
        linear-gradient(
            180deg,
            #f3eee2 0%,
            rgba(243, 238, 226, 0) 128px
        ),
        var(--voyaly-bg-card);
    border-color: var(--voyaly-border-soft);
    box-shadow: 0 10px 24px rgba(29, 23, 16, 0.07);
}

/* Dokumente: warm neutral paper / wallet tint */
.trip-section-block--documents {
    background:
        linear-gradient(
            180deg,
            #f4eee4 0%,
            rgba(244, 238, 228, 0) 128px
        ),
        var(--voyaly-bg-card);
    box-shadow: 0 9px 22px rgba(29, 23, 16, 0.07);
}

/* Fotos: soft warm photo tint */
.trip-section-block--media {
    background:
        linear-gradient(
            180deg,
            #f3eadc 0%,
            rgba(243, 234, 220, 0) 128px
        ),
        var(--voyaly-bg-card);
    box-shadow: 0 9px 22px rgba(29, 23, 16, 0.07);
}

/* Packliste: keep current green tint */
.trip-section-block--packing {
    background:
        linear-gradient(
            180deg,
            var(--voyaly-color-primary-100) 0%,
            rgba(227, 237, 228, 0) 128px
        ),
        var(--voyaly-bg-card);
    border-color: var(--voyaly-border-strong);
    box-shadow: 0 10px 24px rgba(29, 23, 16, 0.08);
}

.trip-section-block--packing .trip-section-block__header {
    border-bottom-color: rgba(198, 183, 158, 0.6);
}

.trip-section-block--packing .trip-section-block__icon {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: var(--radius-full);
    background: var(--voyaly-color-primary-600);
    color: var(--voyaly-color-accent-400);
    box-shadow: 0 4px 10px rgba(35, 51, 38, 0.24);
}

.trip-section-block--packing .trip-section-block__count {
    background: var(--voyaly-color-primary-100);
    color: var(--voyaly-color-primary-700);
    font-weight: 600;
}

.trip-section-block--sharing-admin {
    opacity: 0.98;
}

.trip-section-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--voyaly-border-soft);
}

.trip-section-block--light .trip-section-block__header {
    border-bottom-color: var(--voyaly-border-soft);
}

.trip-section-block__title-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    min-width: 0;
}

.trip-section-block__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--voyaly-text-primary);
    margin: 0;
    white-space: normal;
}

.trip-section-block__icon {
    width: 22px;
    height: 22px;
    color: var(--voyaly-color-primary-500);
    flex-shrink: 0;
}

.trip-section-block__count {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--voyaly-text-muted);
    background: var(--voyaly-bg-subtle);
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.trip-section-block__subtitle {
    margin: calc(-1 * var(--spacing-3)) 0 var(--spacing-4);
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.trip-section-block__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-1);
}

.trip-section-block__edit-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    line-height: 1;
    border-radius: var(--radius-full);
    border-color: var(--voyaly-border-soft);
    color: var(--voyaly-text-secondary);
    background: var(--voyaly-bg-elevated);
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.trip-section-block__edit-action svg,
.trip-section-block__edit-action .btn__icon {
    width: 16px;
    height: 16px;
    display: block;
}

.trip-section-block__edit-action:hover {
    border-color: var(--voyaly-border-strong);
    color: var(--voyaly-text-primary);
    background: var(--voyaly-bg-card);
    transform: translateY(-1px);
}

.trip-section-block__edit-action:active {
    transform: translateY(0);
    background: var(--voyaly-bg-subtle);
}

.trip-preview-more-indicator {
    margin-top: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted);
}

.trip-preview-panel {
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--voyaly-border-soft);
    animation: tripPreviewExpandIn 170ms ease;
}

@keyframes tripPreviewExpandIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.trip-section-block__empty {
    text-align: center;
    padding: var(--spacing-8) var(--spacing-4);
    color: var(--voyaly-text-secondary);
}

.trip-section-block__empty p {
    margin: 0 0 var(--spacing-4);
    font-size: var(--font-size-base);
}

.trip-section-block__empty--quiet {
    padding: var(--spacing-6) var(--spacing-4);
}

.trip-section-block__empty--quiet p {
    margin: 0;
}

.trip-section-block__empty-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--voyaly-text-primary);
    margin-bottom: var(--spacing-1) !important;
}

.trip-section-block__empty-text {
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* Quiet, section-level empty-state actions (not primary page CTAs). */
.section-empty-action {
    --sea-surface: #f7f1e4;
    --sea-border: rgba(54, 83, 60, 0.16);
    --sea-text: var(--voyaly-color-primary-600);
    --sea-icon-bg: rgba(54, 83, 60, 0.08);
    --sea-icon-color: var(--voyaly-color-primary-600);
    --sea-hover-border: rgba(54, 83, 60, 0.32);
    --sea-hover-surface: #f3ecdc;

    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    align-self: center;
    margin-top: var(--spacing-3);
    max-width: 100%;
    padding: 0.45rem 0.85rem 0.45rem 0.45rem;
    border: 1px solid var(--sea-border);
    border-radius: var(--radius-full);
    background: var(--sea-surface);
    color: var(--sea-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    box-shadow: none;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        color 160ms ease,
        transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section-empty-action__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--sea-icon-bg);
    color: var(--sea-icon-color);
}

.section-empty-action__icon svg {
    width: 0.95rem;
    height: 0.95rem;
    display: block;
}

.section-empty-action__label {
    min-width: 0;
}

.section-empty-action:hover {
    border-color: var(--sea-hover-border);
    background: var(--sea-hover-surface);
    color: var(--voyaly-color-primary-700);
    transform: translateY(-1px);
}

.section-empty-action:focus-visible {
    outline: 2px solid var(--voyaly-color-primary-600);
    outline-offset: 2px;
}

.section-empty-action:active {
    transform: translateY(0);
}

/* Anreise — soft chartreuse tint on dark boarding pass */
.section-empty-action--travel {
    --sea-surface: rgba(243, 236, 214, 0.1);
    --sea-border: rgba(213, 224, 134, 0.28);
    --sea-text: #f3ecd6;
    --sea-icon-bg: rgba(213, 224, 134, 0.16);
    --sea-icon-color: #d5e086;
    --sea-hover-border: rgba(213, 224, 134, 0.5);
    --sea-hover-surface: rgba(243, 236, 214, 0.16);
}

.boarding-pass--empty .section-empty-action--travel {
    margin-top: var(--spacing-4);
}

.boarding-pass--empty .section-empty-action--travel:hover {
    color: #fff8e8;
}

/* Unterkunft — warm sand / home */
.section-empty-action--stay {
    --sea-surface: #f8f2e6;
    --sea-border: rgba(120, 90, 42, 0.16);
    --sea-icon-bg: rgba(156, 122, 58, 0.1);
    --sea-icon-color: #7a5c2e;
    --sea-hover-border: rgba(120, 90, 42, 0.3);
    --sea-hover-surface: #f3ead8;
}

/* Tagesplanung — calendar olive */
.section-empty-action--days {
    --sea-surface: #f4f6ef;
    --sea-border: rgba(54, 83, 60, 0.14);
    --sea-icon-bg: var(--voyaly-color-primary-100);
    --sea-icon-color: var(--voyaly-color-primary-600);
    --sea-hover-border: rgba(54, 83, 60, 0.3);
    --sea-hover-surface: #eef2e8;
}

/* Packliste — accent-tinted suitcase */
.section-empty-action--packing {
    --sea-surface: #f7fae9;
    --sea-border: rgba(89, 106, 25, 0.18);
    --sea-icon-bg: var(--voyaly-color-accent-100);
    --sea-icon-color: var(--voyaly-color-primary-700);
    --sea-hover-border: rgba(89, 106, 25, 0.34);
    --sea-hover-surface: #f1f6dc;
}

.section-empty-action--packing .section-empty-action__icon svg {
    width: 1rem;
    height: 1rem;
}

/* Dokumente — wallet / paper */
.section-empty-action--documents {
    --sea-surface: #f6f3eb;
    --sea-border: rgba(54, 83, 60, 0.14);
    --sea-icon-bg: rgba(54, 83, 60, 0.07);
    --sea-icon-color: var(--voyaly-color-primary-500);
    --sea-hover-border: rgba(54, 83, 60, 0.28);
    --sea-hover-surface: #f0ebe0;
}

/* Fotos — memory / soft rose-sand */
.section-empty-action--photos {
    --sea-surface: #f8f1ea;
    --sea-border: rgba(130, 88, 62, 0.16);
    --sea-icon-bg: rgba(160, 110, 78, 0.1);
    --sea-icon-color: #8a5c3c;
    --sea-hover-border: rgba(130, 88, 62, 0.3);
    --sea-hover-surface: #f3e9df;
}

@media (max-width: 640px) {
    .section-empty-action {
        max-width: min(100%, 20rem);
        justify-content: center;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-empty-action {
        transition: none;
    }

    .section-empty-action:hover,
    .section-empty-action:active {
        transform: none;
    }
}

/* ===========================================
   DAY PREVIEW (Trip Detail, view-only)
   =========================================== */

.day-preview-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.day-preview {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-lg);
    background: #faf7f2;
    border: 1px solid rgba(60, 50, 35, 0.08);
}

.day-preview--planned {
    background: var(--voyaly-bg-elevated);
    border-color: var(--voyaly-border-soft);
    box-shadow: inset 3px 0 0 rgba(91, 101, 64, 0.28);
}

.day-preview--empty {
    background: rgba(250, 247, 242, 0.55);
    border-color: rgba(60, 50, 35, 0.05);
    box-shadow: none;
}

.day-preview__marker {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.35rem;
    min-height: 3.1rem;
    padding: 0.35rem 0.25rem;
    border-radius: 0.7rem;
    background: #f0e8db;
    border: 1px solid rgba(60, 50, 35, 0.06);
    text-align: center;
}

.day-preview--empty .day-preview__marker {
    background: rgba(240, 232, 219, 0.45);
    border-color: transparent;
    color: var(--voyaly-text-muted);
}

.day-preview__marker-dow {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--voyaly-text-muted);
    line-height: 1.1;
}

.day-preview__marker-date {
    margin-top: 0.12rem;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--voyaly-text-primary);
    line-height: 1.15;
}

.day-preview--empty .day-preview__marker-date {
    color: var(--voyaly-text-muted);
    font-weight: 600;
}

.day-preview__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.1rem;
}

.day-preview__title {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    line-height: 1.3;
}

.day-preview__day-no {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--voyaly-olive, #5b6540);
    text-transform: uppercase;
}

.day-preview__title-text {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--voyaly-text-primary);
}

.day-preview__title--quiet .day-preview__placeholder,
.day-preview__placeholder {
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted);
    font-weight: 400;
    font-style: italic;
}

.day-preview__note {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.45;
    color: var(--voyaly-text-secondary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    max-height: calc(1.45em * 2);
}

.day-preview-toggle {
    appearance: none;
    background: var(--voyaly-bg-elevated);
    border: 1px solid rgba(60, 50, 35, 0.1);
    padding: 0.45rem 0.95rem;
    margin: var(--spacing-3) 0 0 0;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--voyaly-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.day-preview-toggle:hover,
.day-preview-toggle:focus-visible {
    color: var(--voyaly-color-primary-700);
    background: var(--voyaly-color-primary-50, #f4f6ee);
    border-color: var(--voyaly-color-primary-200, #dbe3c6);
    box-shadow: 0 2px 8px rgba(29, 23, 16, 0.05);
}

.day-preview-toggle:focus-visible {
    outline: 2px solid var(--voyaly-color-primary-300);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .day-preview {
        padding: 0.65rem 0.7rem;
    }

    .day-preview__marker {
        width: 3rem;
        min-height: 2.85rem;
    }

    .day-preview__marker-date {
        font-size: 0.74rem;
    }
}

.trip-detail {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-8);
}

.trip-detail > .trip-section-block {
    margin-bottom: 0;
}

.trip-preview-more {
    margin-top: var(--spacing-3);
    border-top: 1px solid var(--voyaly-border-soft);
    padding-top: var(--spacing-3);
}

.trip-preview-more__summary {
    cursor: pointer;
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    list-style: none;
}

.trip-preview-more__summary::-webkit-details-marker {
    display: none;
}

.trip-preview-more__summary::before {
    content: '+';
    display: inline-flex;
    width: 16px;
    align-items: center;
    justify-content: center;
    margin-right: var(--spacing-1);
    color: var(--voyaly-text-muted);
}

.trip-preview-more[open] .trip-preview-more__summary::before {
    content: '-';
}

.trip-preview-more[open] .trip-documents__list--extra,
.trip-preview-more[open] .trip-media__gallery--extra {
    margin-top: var(--spacing-3);
}

.trip-share-modal {
    /* Width comes from .modal--medium; keep scroll shell only. */
    max-height: min(86vh, calc(100vh - 48px));
}

.trip-share-modal .modal__header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--voyaly-bg-card);
}

.trip-share-modal .modal__body {
    overflow-y: auto;
    padding-top: var(--spacing-4);
}

.trip-share-modal .trip-sharing {
    margin: 0;
}

.trip-sharing__invite-banner {
    margin: 0 0 var(--spacing-4);
    padding: var(--spacing-4);
    border: 1px solid rgba(89, 106, 25, 0.22);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(160deg, rgba(246, 252, 215, 0.75) 0%, rgba(251, 247, 238, 0.95) 100%);
}

.trip-sharing__invite-banner-title {
    margin: 0 0 0.2rem;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--voyaly-color-primary-700);
}

.trip-sharing__invite-banner-status {
    margin: 0 0 var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
}

.trip-focus {
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-8);
}

.trip-focus__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--voyaly-border-soft);
}

.trip-focus__title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-2xl);
    line-height: 1.2;
}

.trip-focus__title-icon {
    display: inline-flex;
    color: var(--voyaly-color-primary-600);
}

.trip-focus__title-icon .voyaly-icon--packing {
    width: 1.1em;
    height: 1.1em;
}

.trip-focus__title-row {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.trip-focus__subtitle {
    margin: var(--spacing-1) 0 0;
    color: var(--voyaly-text-secondary);
}

.trip-focus__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.trip-focus__empty {
    text-align: center;
    border: 1px dashed var(--voyaly-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--spacing-7) var(--spacing-4);
    color: var(--voyaly-text-secondary);
}

.trip-focus__empty p {
    margin: 0 0 var(--spacing-4);
}

.trip-focus__hint {
    margin: var(--spacing-4) 0 0;
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
}

.trip-detail .btn,
.trip-hero .btn {
    transition: transform 130ms ease, box-shadow 160ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

@media (hover: hover) {
    .trip-detail .btn:hover,
    .trip-hero .btn:hover {
        transform: translateY(-1px);
    }
}

.trip-detail .btn:active,
.trip-hero .btn:active {
    transform: translateY(0);
}

.trip-detail .btn:focus-visible,
.trip-hero .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(54, 83, 60, 0.2);
}

/* Responsive */
@media (max-width: 640px) {
    .trip-hero__body {
        padding: var(--spacing-4) var(--spacing-4) var(--spacing-3);
    }
    
    .trip-hero__title {
        font-size: var(--font-size-2xl);
    }

    .trip-hero__subtitle {
        margin-bottom: var(--spacing-3);
    }
    
    .trip-hero__top {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-2);
    }

    .trip-hero__actions {
        align-self: center;
        flex-shrink: 0;
    }
    
    .trip-hero__meta {
        gap: var(--spacing-1);
    }
    
    .trip-hero__pill {
        font-size: var(--font-size-xs);
        padding: 2px var(--spacing-2);
    }
    
    .trip-detail {
        gap: var(--spacing-4);
    }
    
    .trip-section-block {
        padding: var(--spacing-4);
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-4);
    }
    
    .trip-section-block__header {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-2);
    }
    
    .trip-section-block__empty {
        padding: var(--spacing-6) var(--spacing-3);
    }

    .trip-section-block__subtitle {
        margin: calc(-1 * var(--spacing-2)) 0 var(--spacing-3);
    }

    .trip-section-block__actions {
        width: auto;
        flex-shrink: 0;
    }

    .trip-sharing__section {
        padding: var(--spacing-3);
    }

    .trip-share-modal {
        max-height: calc(100vh - 24px);
        margin-top: auto;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .trip-share-modal .modal__body {
        padding-top: var(--spacing-3);
    }

    .trip-focus {
        padding: var(--spacing-4);
        border-radius: var(--radius-lg);
    }

    .trip-focus__header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-3);
    }

    .trip-focus__actions .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trip-hero,
    .trip-hero__cover img,
    .day-card,
    .day-card__actions,
    .packing-item,
    .packing-item__checkbox,
    .packing-item__actions,
    .document-card,
    .document-card__actions,
    .media-card,
    .media-card__image,
    .media-card__actions,
    .trip-detail .btn,
    .trip-hero .btn,
    .btn--danger-ghost,
    .trip-preview-panel {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    .packing-personal__progress-fill,
    .packing-personal__item,
    .packing-personal__check,
    .packing-personal__check-icon,
    .packing-personal__item-actions,
    .packing-plan__item-actions,
    .packing-overview-page__card,
    .packing-overview-page__card-fill,
    .packing-suggest__item,
    .packing-suggest,
    .packing-suggest-backdrop,
    .packing-autofilled {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ===========================================
   TRIPS OVERVIEW PAGE
   =========================================== */

/* Overview Header */
.overview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.overview-header__title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--voyaly-text-primary);
    margin: 0;
    line-height: 1.2;
}

.overview-header__subtitle {
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-base);
    margin: var(--spacing-1) 0 0;
}

.overview-header__action {
    flex-shrink: 0;
}

/* Overview Controls (search + filters) */
.overview-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    flex-wrap: wrap;
}

.overview-search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 360px;
}

.overview-search__icon {
    position: absolute;
    left: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--voyaly-text-muted);
    pointer-events: none;
}

.overview-search__input {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) 40px;
    font-family: inherit;
    font-size: var(--font-size-sm);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-full);
    background: var(--voyaly-bg-elevated);
    color: var(--voyaly-text-primary);
    transition: border-color var(--transition-fast);
}

.overview-search__input:focus {
    outline: none;
    border-color: var(--voyaly-border-primary);
}

.overview-search__input::placeholder {
    color: var(--voyaly-text-muted);
}

.overview-filters {
    display: flex;
    gap: var(--spacing-1);
    background: var(--voyaly-bg-subtle);
    padding: 3px;
    border-radius: var(--radius-full);
}

.overview-filter {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--voyaly-text-secondary);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.overview-filter:hover {
    color: var(--voyaly-text-primary);
}

.overview-filter--active {
    background: var(--voyaly-bg-elevated);
    color: var(--voyaly-text-primary);
    box-shadow: var(--shadow-sm);
}

/* Info Bar (search results) */
.overview-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--voyaly-color-primary-100);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-6);
    font-size: var(--font-size-sm);
    color: var(--voyaly-color-primary-700);
}

/* Overview Sections */
.overview-section {
    margin-bottom: var(--spacing-8);
}

.overview-section__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.overview-section__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--voyaly-text-primary);
    margin: 0;
}

.overview-section__icon {
    width: 20px;
    height: 20px;
    color: var(--voyaly-text-muted);
}

.overview-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-full);
}

.overview-section__empty-note {
    color: var(--voyaly-text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
    padding: var(--spacing-4) 0;
}

/* Overview Grid */
.overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

@media (min-width: 640px) {
    .overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Overview Empty State */
.overview-empty {
    text-align: center;
    padding: var(--spacing-16) var(--spacing-4) var(--spacing-12);
}

.overview-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--voyaly-bg-subtle);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-5);
    color: var(--voyaly-text-muted);
}

.overview-empty__icon svg {
    width: 32px;
    height: 32px;
}

.overview-empty__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--voyaly-text-primary);
    margin: 0 0 var(--spacing-2);
}

.overview-empty__text {
    color: var(--voyaly-text-secondary);
    margin: 0 0 var(--spacing-6);
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   First-trip empty-state CTA
   Inviting olive travel button with soft glow pulse, animated outline,
   plane takeoff + tiny trail. Namespaced — never touches .btn.
   ========================================================================== */

/* Overview primary CTA — warm, inviting, not neon. */
@keyframes create-trip-cta-glow {
    0%, 100% {
        box-shadow:
            0 10px 22px -12px rgba(35, 51, 38, 0.55),
            0 0 0 0 rgba(213, 240, 96, 0);
    }
    50% {
        box-shadow:
            0 14px 28px -12px rgba(35, 51, 38, 0.6),
            0 0 18px 1px rgba(213, 240, 96, 0.22);
    }
}

.create-trip-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.15rem 0.7rem 0.85rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(54, 83, 60, 0.18);
    background:
        linear-gradient(145deg, var(--voyaly-color-primary-500) 0%, var(--voyaly-color-primary-700) 100%);
    color: var(--voyaly-text-on-primary);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-decoration: none;
    isolation: isolate;
    overflow: hidden;
    animation: create-trip-cta-glow 3.4s ease-in-out infinite;
    transition:
        transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 280ms ease,
        filter 280ms ease;
}

.create-trip-cta--compact {
    margin-top: var(--spacing-2);
}

.create-trip-cta__glow {
    position: absolute;
    inset: -30% -20%;
    background: radial-gradient(circle at 30% 40%, rgba(213, 240, 96, 0.28), transparent 55%);
    opacity: 0.65;
    pointer-events: none;
    transition: opacity 280ms ease, transform 360ms ease;
}

.create-trip-cta__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    color: var(--voyaly-color-accent-400);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.create-trip-cta__icon svg {
    width: 14px;
    height: 14px;
}

.create-trip-cta__label {
    position: relative;
}

.create-trip-cta:hover,
.create-trip-cta:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.03);
    color: var(--voyaly-text-on-primary);
    animation: none;
    box-shadow:
        0 18px 32px -14px rgba(35, 51, 38, 0.7),
        0 0 22px 2px rgba(213, 240, 96, 0.24);
}

.create-trip-cta:hover .create-trip-cta__glow,
.create-trip-cta:focus-visible .create-trip-cta__glow {
    opacity: 1;
    transform: translate(6%, -4%);
}

.create-trip-cta:hover .create-trip-cta__icon,
.create-trip-cta:focus-visible .create-trip-cta__icon {
    transform: rotate(90deg) scale(1.05);
}

.create-trip-cta:active {
    transform: translateY(0);
}

.create-trip-cta:focus-visible {
    outline: 2px solid var(--voyaly-color-accent-500);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .create-trip-cta,
    .create-trip-cta__glow,
    .create-trip-cta__icon {
        animation: none !important;
        transition: none;
    }

    .create-trip-cta:hover,
    .create-trip-cta:focus-visible,
    .create-trip-cta:active {
        transform: none;
    }

    .create-trip-cta:hover .create-trip-cta__icon,
    .create-trip-cta:focus-visible .create-trip-cta__icon {
        transform: none;
    }
}

@keyframes empty-trip-cta-glow {
    0%, 100% {
        box-shadow:
            0 12px 26px -14px rgba(35, 51, 38, 0.7),
            0 0 0 0 rgba(213, 240, 96, 0);
    }
    50% {
        box-shadow:
            0 16px 32px -12px rgba(35, 51, 38, 0.75),
            0 0 22px 2px rgba(213, 240, 96, 0.28);
    }
}

@keyframes empty-trip-cta-ring {
    0%, 100% {
        opacity: 0.35;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.035);
    }
}

.empty-trip-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-7);
    border-radius: var(--radius-full);
    background:
        linear-gradient(135deg, var(--voyaly-color-primary-500) 0%, var(--voyaly-color-primary-700) 100%);
    color: var(--voyaly-text-on-primary);
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    isolation: isolate;
    overflow: visible;
    animation: empty-trip-cta-glow 3.2s ease-in-out infinite;
    transition:
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 320ms ease,
        filter 320ms ease;
}

/* Soft ambient ring that gently breathes while idle. */
.empty-trip-cta__state {
    position: absolute;
    inset: -4px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--voyaly-color-accent-500);
    opacity: 0.4;
    transform: scale(1);
    pointer-events: none;
    animation: empty-trip-cta-ring 3.2s ease-in-out infinite;
    transition:
        opacity 320ms ease,
        transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 320ms ease;
}

.empty-trip-cta__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--voyaly-color-accent-500);
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Tiny trail that appears as the plane lifts off. */
.empty-trip-cta__icon::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 55%;
    width: 14px;
    height: 2px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, transparent, var(--voyaly-color-accent-400));
    opacity: 0;
    transform: translate(-6px, 0) scaleX(0.4);
    transition:
        opacity 280ms ease,
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.empty-trip-cta__icon svg {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 1;
}

.empty-trip-cta__label {
    position: relative;
    transition: letter-spacing 320ms ease, transform 320ms ease;
}

.empty-trip-cta:hover,
.empty-trip-cta:focus-visible {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.04);
    box-shadow:
        0 22px 40px -14px rgba(35, 51, 38, 0.85),
        0 0 28px 4px rgba(213, 240, 96, 0.32);
    color: var(--voyaly-text-on-primary);
    animation: none;
}

.empty-trip-cta:hover .empty-trip-cta__state,
.empty-trip-cta:focus-visible .empty-trip-cta__state {
    opacity: 1;
    transform: scale(1.06);
    border-color: var(--voyaly-color-accent-400);
    animation: none;
}

.empty-trip-cta:hover .empty-trip-cta__icon,
.empty-trip-cta:focus-visible .empty-trip-cta__icon {
    transform: translate(8px, -6px) rotate(-14deg);
}

.empty-trip-cta:hover .empty-trip-cta__icon::before,
.empty-trip-cta:focus-visible .empty-trip-cta__icon::before {
    opacity: 0.9;
    transform: translate(-12px, 2px) rotate(12deg) scaleX(1.2);
}

.empty-trip-cta:hover .empty-trip-cta__label,
.empty-trip-cta:focus-visible .empty-trip-cta__label {
    letter-spacing: 0.03em;
    transform: translateX(1px);
}

.empty-trip-cta:active {
    transform: translateY(-1px) scale(1.01);
}

.empty-trip-cta:focus-visible {
    outline: 2px solid var(--voyaly-color-accent-500);
    outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
    .empty-trip-cta,
    .empty-trip-cta__state,
    .empty-trip-cta__icon,
    .empty-trip-cta__icon::before,
    .empty-trip-cta__label {
        animation: none !important;
        transition: none;
    }

    .empty-trip-cta:hover,
    .empty-trip-cta:focus-visible {
        transform: none;
        filter: none;
    }

    .empty-trip-cta:hover .empty-trip-cta__state,
    .empty-trip-cta:focus-visible .empty-trip-cta__state {
        opacity: 1;
        transform: scale(1);
    }

    .empty-trip-cta:hover .empty-trip-cta__icon,
    .empty-trip-cta:focus-visible .empty-trip-cta__icon,
    .empty-trip-cta:hover .empty-trip-cta__icon::before,
    .empty-trip-cta:focus-visible .empty-trip-cta__icon::before,
    .empty-trip-cta:hover .empty-trip-cta__label,
    .empty-trip-cta:focus-visible .empty-trip-cta__label {
        transform: none;
        opacity: 1;
        letter-spacing: inherit;
    }
}

/* ===========================================
   TRIP CARD (Redesigned - Fully Clickable)
   =========================================== */

.trip-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-xl);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.trip-card-link:hover {
    color: inherit;
    transform: translateY(-3px);
}

.trip-card-link:hover .trip-card {
    box-shadow: var(--shadow-lg);
    border-color: var(--voyaly-border-strong);
}

.trip-card-link:focus-visible {
    outline: 2px solid var(--voyaly-border-primary);
    outline-offset: 2px;
    border-radius: var(--radius-xl);
}

.trip-card {
    background: var(--voyaly-bg-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--voyaly-border-soft);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.trip-card__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--voyaly-bg-subtle);
    flex-shrink: 0;
}

.trip-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.trip-card-link:hover .trip-card__image img {
    transform: scale(1.04);
}

.trip-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--voyaly-border-strong);
}

.trip-card__image--placeholder svg {
    width: 2.5rem;
    height: 2.5rem;
}

.trip-card__body {
    padding: var(--spacing-4) var(--spacing-5) var(--spacing-5);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.trip-card__badge-row {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

.trip-card__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--voyaly-text-primary);
    margin: 0 0 var(--spacing-2);
    line-height: 1.3;
}

.trip-card__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
}

.trip-card__destination,
.trip-card__dates {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
}

.trip-card__destination svg,
.trip-card__dates svg {
    width: 14px;
    height: 14px;
    color: var(--voyaly-text-muted);
    flex-shrink: 0;
}

.trip-card__duration {
    color: var(--voyaly-text-muted);
}

.trip-card__role {
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--voyaly-border-soft);
}

.trip-card__role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 3px var(--spacing-2);
    border-radius: var(--radius-sm);
}

.trip-card__role-badge--owner {
    background: var(--voyaly-color-primary-100);
    color: var(--voyaly-color-primary-700);
}

.trip-card__role-badge--editor {
    background: var(--voyaly-color-accent-100);
    color: var(--voyaly-color-primary-600);
}

.trip-card__role-badge--viewer {
    background: var(--voyaly-info-100);
    color: var(--voyaly-info-600);
}

.trip-card__badge-row .trip-card__role-badge {
    align-self: center;
}

/* Mobile overrides */
@media (max-width: 640px) {
    .overview-header {
        flex-direction: column;
        gap: var(--spacing-3);
    }
    
    .overview-header__action {
        width: 100%;
    }
    
    .overview-header__action .btn,
    .overview-header__action .create-trip-cta {
        width: 100%;
        justify-content: center;
    }
    
    .overview-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .overview-search {
        max-width: none;
    }
    
    .overview-controls {
        width: 100%;
    }

    .overview-filters {
        width: 100%;
        max-width: none;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px;
        overflow: visible;
        box-sizing: border-box;
    }

    .overview-filter {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.45rem 0.25rem;
        font-size: 0.78rem;
        min-width: 0;
        box-sizing: border-box;
    }
    
    .overview-info-bar {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-2);
    }
    
    .trip-card__body {
        padding: var(--spacing-3) var(--spacing-4) var(--spacing-4);
    }
}

/* ===========================================
   AUTH ENHANCEMENTS
   =========================================== */

.form__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
}

.form__label-link {
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-secondary);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.form__label-link:hover {
    color: var(--voyaly-color-primary-600);
}

/* Email Verification Banner */
.email-verify-banner {
    background: var(--voyaly-warning-100);
    border-bottom: 1px solid var(--voyaly-border-soft);
}

.email-verify-banner__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-3) var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.email-verify-banner__text {
    font-size: var(--font-size-sm);
    color: var(--voyaly-warning-600);
    margin: 0;
}

.email-verify-banner__form {
    flex-shrink: 0;
}

.email-verify-banner__btn {
    border-color: var(--voyaly-warning-600);
    color: var(--voyaly-warning-600);
}

.email-verify-banner__btn:hover {
    background: var(--voyaly-warning-600);
    color: white;
}

@media (max-width: 640px) {
    .email-verify-banner__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-2);
    }
}

/* ===========================================
   AVATAR COMPONENT
   =========================================== */

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.avatar--initials {
    background: linear-gradient(135deg, var(--voyaly-color-primary-500), var(--voyaly-color-primary-700));
    color: white;
    font-weight: 700;
    text-transform: uppercase;
}

.avatar--sm {
    width: 32px;
    height: 32px;
    font-size: 11px;
}

.avatar--md {
    width: 40px;
    height: 40px;
    font-size: 13px;
}

.avatar--xl {
    width: 72px;
    height: 72px;
    font-size: var(--font-size-xl);
}

.avatar--xxl {
    width: 96px;
    height: 96px;
    font-size: var(--font-size-2xl);
}

/* ===========================================
   HEADER ACCOUNT MENU
   =========================================== */

.header__account {
    position: relative;
    display: inline-flex;
}

.header__account-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-2);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--voyaly-text-primary);
    cursor: pointer;
    min-height: 40px;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.header__account-toggle:hover,
.header__account--open .header__account-toggle {
    background: var(--voyaly-bg-card);
    border-color: var(--voyaly-border-soft);
}

.header__account-toggle:focus-visible {
    outline: 2px solid var(--voyaly-color-accent-500);
    outline-offset: 2px;
}

.header__account-chevron {
    width: 14px;
    height: 14px;
    color: var(--voyaly-text-muted);
    flex-shrink: 0;
    display: none;
}

.header__account-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1300;
    width: min(220px, calc(100vw - 24px));
    background: var(--voyaly-bg-elevated);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px rgba(29, 23, 16, 0.16);
    overflow: hidden;
    padding: var(--spacing-1);
    animation: notifyIn 150ms ease;
}

.header__account-panel[hidden] {
    display: none !important;
}

.header__account-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--voyaly-text-primary);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    min-height: 44px;
    transition: background-color var(--transition-fast);
}

.header__account-item:hover,
.header__account-item:focus-visible {
    background: var(--voyaly-bg-card);
    color: var(--voyaly-text-primary);
    outline: none;
}

.header__account-item--danger {
    color: var(--voyaly-danger-600);
}

.header__logout-form {
    margin: 0;
    width: 100%;
}

.header__utility-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 1px solid var(--voyaly-border-soft);
    color: var(--voyaly-text-secondary);
    background: var(--voyaly-bg-elevated);
    text-decoration: none;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.header__utility-link:hover {
    border-color: var(--voyaly-border-strong);
    color: var(--voyaly-text-primary);
    background: var(--voyaly-bg-card);
    transform: translateY(-1px);
}

.header__utility-link:active {
    transform: translateY(0);
}

.header__utility-icon {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Packing action — intentionally distinct, chartreuse-tinted travel button
   (Part C). Scoped under .app-header__ so it never touches generic buttons.
   ========================================================================== */

.app-header__packing-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 38px;
    padding: 0 0.8rem 0 0.5rem;
    margin-right: 0;
    border-radius: var(--radius-full);
    border: 1px solid var(--voyaly-color-accent-400);
    background:
        radial-gradient(120% 120% at 50% 15%, var(--voyaly-color-accent-100) 0%, var(--voyaly-bg-card) 100%);
    color: var(--voyaly-color-primary-700);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(35, 51, 38, 0.08);
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 200ms ease,
        transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.app-header__packing-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Soft divider that separates the packing action from the other actions. */
.app-header__packing-action::after {
    content: none;
    display: none;
}

.header__actions-divider {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: var(--voyaly-border-strong);
    opacity: 0.55;
    flex-shrink: 0;
    align-self: center;
    margin: 0 2px;
}

.app-header__packing-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.app-header__packing-icon svg {
    width: 19px;
    height: 19px;
}

.app-header__packing-action:hover {
    border-color: var(--voyaly-color-accent-500);
    background:
        radial-gradient(120% 120% at 50% 15%, var(--voyaly-color-accent-400) 0%, var(--voyaly-color-accent-100) 100%);
    box-shadow: 0 8px 18px -10px rgba(89, 106, 25, 0.6);
    transform: translateY(-1px);
}

.app-header__packing-action:hover .app-header__packing-icon {
    transform: translateY(-1px) scale(1.04);
}

.app-header__packing-action:active {
    transform: translateY(0);
}

.app-header__packing-action:focus-visible {
    outline: 2px solid var(--voyaly-color-primary-600);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .app-header__packing-action,
    .app-header__packing-icon {
        transition: none;
    }

    .app-header__packing-action:hover {
        transform: none;
    }

    .app-header__packing-action:hover .app-header__packing-icon {
        transform: none;
    }
}

.header__username {
    font-size: var(--font-size-sm);
    font-weight: 500;
    display: none;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .header__username {
        display: block;
    }

    .header__account-chevron {
        display: block;
    }
}

/* ===========================================
   ACCOUNT PAGE
   =========================================== */

.account-section {
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
}

.account-section__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--voyaly-text-primary);
    line-height: 1.3;
    margin: 0 0 var(--spacing-5);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--voyaly-border-soft);
}

.account-profile-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-6);
}

.account-profile-row__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    min-width: 0;
}

.account-inline-form {
    display: flex;
    gap: var(--spacing-2);
    align-items: flex-start;
}

.account-inline-form .form__input {
    flex: 1;
}

.account-readonly-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--voyaly-bg-body);
    border-radius: var(--radius-lg);
}

.account-readonly-value {
    font-size: var(--font-size-base);
    color: var(--voyaly-text-primary);
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.account-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    padding-bottom: var(--spacing-8);
}

.account-page__title {
    margin: 0;
}

.account-status-badge {
    font-size: 10px;
}

.account-actions-end {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--spacing-1);
}

/* ===========================================
   AVATAR UPLOAD (Setup Page)
   =========================================== */

.avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
}

.avatar-upload__btn {
    margin-top: var(--spacing-1);
}

.avatar-upload__help {
    text-align: center;
}

.setup-profile__avatar-group {
    align-items: center;
    padding: var(--spacing-2) 0 var(--spacing-1);
}

.setup-profile__optional {
    font-weight: 400;
    color: var(--voyaly-text-muted);
}

/* ===========================================
   COLLABORATOR NAME IN SHARING
   =========================================== */

.trip-sharing__person-name {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--voyaly-text-primary);
}

.trip-sharing__person-info .trip-sharing__person-email {
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--voyaly-text-muted);
}

/* ===========================================
   AUTH CARD SPACING FIX
   =========================================== */

.auth-footer {
    padding-top: var(--spacing-5);
    margin-top: var(--spacing-5);
}

.auth-form {
    margin-bottom: 0;
}

.auth-card > .alert {
    margin-bottom: var(--spacing-5);
}

.auth-form > .btn,
.auth-form > a.btn {
    margin-top: var(--spacing-1);
}

/* ===========================================
   UNIFIED EDIT-ITEM SYSTEM
   Used by: packing plan, documents, photos, days
   =========================================== */

.edit-item-group {
    margin-bottom: var(--spacing-3);
}

.edit-item-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-1);
    flex-wrap: wrap;
}

.edit-item-group__heading {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    min-width: 0;
}

.edit-item-group__title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--voyaly-text-primary);
    margin: 0;
}

.edit-item-group__count {
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-secondary);
}

.packing-suggest-open {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid rgba(60, 50, 35, 0.12);
    background: #faf7f2;
    color: var(--voyaly-text-secondary);
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.packing-suggest-open__icon {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}

.packing-suggest-open__label--short {
    display: none;
}

.packing-suggest-open:hover,
.packing-suggest-open:focus-visible {
    color: var(--voyaly-color-primary-700, #4a5334);
    background: var(--voyaly-color-primary-50, #f4f6ee);
    border-color: var(--voyaly-color-primary-200, #dbe3c6);
}

.packing-suggest-open:focus-visible {
    outline: 2px solid var(--voyaly-color-primary-300);
    outline-offset: 2px;
}

.packing-add-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.packing-add-action .btn__icon {
    width: 0.95rem;
    height: 0.95rem;
}

/* Packing suggestion multi-select modal */
.packing-suggest-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.packing-suggest-modal[hidden] {
    display: none !important;
}

.packing-suggest-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--voyaly-overlay-soft);
    backdrop-filter: blur(2px);
}

.packing-suggest-modal__dialog {
    position: relative;
    width: min(100%, 420px);
    max-height: min(100vh - 48px, 640px);
    display: flex;
    flex-direction: column;
    background: #faf7f2;
    border: 1px solid rgba(60, 50, 35, 0.1);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-5);
    animation: packingSuggestIn 160ms ease;
}

@keyframes packingSuggestIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .packing-suggest-modal__dialog { animation: none; }
}

.packing-suggest-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-3);
}

.packing-suggest-modal__eyebrow {
    margin: 0 0 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--voyaly-olive, #5b6540);
}

.packing-suggest-modal__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--voyaly-text-primary);
}

.packing-suggest-modal__close {
    appearance: none;
    border: 0;
    background: rgba(60, 50, 35, 0.06);
    color: var(--voyaly-text-secondary);
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.packing-suggest-modal__close svg {
    width: 1rem;
    height: 1rem;
}

.packing-suggest-modal__close:hover,
.packing-suggest-modal__close:focus-visible {
    background: rgba(60, 50, 35, 0.1);
    color: var(--voyaly-text-primary);
}

.packing-suggest-modal__help {
    margin: var(--spacing-3) 0 var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted);
    line-height: 1.45;
}

.packing-suggest-modal__form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.packing-suggest-modal__list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow-y: auto;
    min-height: 0;
    max-height: 22rem;
    padding-right: 2px;
    margin-bottom: var(--spacing-4);
}

.packing-suggest-modal__empty {
    margin: 0;
    padding: var(--spacing-4);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted);
    background: rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-lg);
    border: 1px dashed rgba(60, 50, 35, 0.12);
}

.packing-suggest-check {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid rgba(60, 50, 35, 0.08);
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease;
}

.packing-suggest-check:hover {
    border-color: rgba(91, 101, 64, 0.28);
}

.packing-suggest-check--disabled {
    opacity: 0.72;
    cursor: default;
    background: rgba(255, 255, 255, 0.55);
}

.packing-suggest-check--disabled:hover {
    border-color: rgba(60, 50, 35, 0.08);
}

.packing-suggest-check input[type="checkbox"] {
    appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    border: 1.5px solid rgba(60, 50, 35, 0.28);
    border-radius: 0.3rem;
    background: #fff;
    display: grid;
    place-content: center;
    cursor: pointer;
}

.packing-suggest-check input[type="checkbox"]::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    transform: scale(0);
    transition: transform 100ms ease;
    box-shadow: inset 1em 1em var(--voyaly-olive, #5b6540);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

.packing-suggest-check input[type="checkbox"]:checked {
    border-color: var(--voyaly-olive, #5b6540);
    background: var(--voyaly-color-primary-50, #f4f6ee);
}

.packing-suggest-check input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.packing-suggest-check input[type="checkbox"]:disabled {
    cursor: default;
    opacity: 0.55;
    background: #f0ebe3;
}

.packing-suggest-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--voyaly-color-primary-300);
    outline-offset: 2px;
}

.packing-suggest-check__label {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-primary);
    line-height: 1.3;
}

.packing-suggest-check__badge {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #8a8174;
    background: rgba(90, 80, 65, 0.08);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}

.packing-suggest-modal__actions {
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media (max-width: 560px) {
    .packing-suggest-modal__dialog {
        width: 100%;
        max-height: calc(100vh - 24px);
    }

    .packing-suggest-modal__actions {
        flex-direction: column-reverse;
    }

    .packing-suggest-modal__actions .btn {
        width: 100%;
    }
}

.edit-item-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.edit-item-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    background: var(--voyaly-bg-elevated);
    border: 1px solid var(--voyaly-border-soft);
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.edit-item-row:hover {
    border-color: var(--voyaly-border-strong);
    background: var(--voyaly-bg-card);
}

.edit-item-row__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--voyaly-color-primary-500), var(--voyaly-color-primary-700));
}

.edit-item-row__icon svg {
    width: 18px;
    height: 18px;
}

.edit-item-row__thumb {
    flex-shrink: 0;
    width: 52px;
    height: 38px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-gray-100);
}

.edit-item-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.edit-item-row__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.edit-item-row__name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--voyaly-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edit-item-row__meta {
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edit-item-row__name--placeholder {
    color: var(--voyaly-text-muted);
    font-weight: 400;
    font-style: italic;
}

.edit-item-row__date {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
    background: var(--voyaly-bg-subtle);
    text-align: center;
}

.edit-item-row__date-dow {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--voyaly-text-muted);
    line-height: 1.2;
}

.edit-item-row__date-formatted {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--voyaly-text-primary);
    line-height: 1.3;
}

.edit-item-row__actions {
    display: flex;
    gap: var(--spacing-1);
    flex-shrink: 0;
}

.edit-item-row__form {
    display: inline-flex;
}

.edit-item-row__action {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--voyaly-text-muted);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease;
    padding: 0;
    text-decoration: none;
}

.edit-item-row__action svg {
    width: 16px;
    height: 16px;
    display: block;
}

.edit-item-row__action:hover {
    color: var(--voyaly-text-primary);
    background: var(--voyaly-bg-subtle);
}

.edit-item-row__action--danger:hover {
    color: var(--voyaly-danger-600);
    background: rgba(157, 59, 59, 0.08);
}

/* ===========================================
   WALLET PREVIEW CARDS (Trip Detail preview)
   =========================================== */

.wallet-doc-card {
    appearance: none;
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    background: linear-gradient(160deg, var(--voyaly-bg-card), #f9f6ef);
    padding: var(--spacing-4);
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.wallet-doc-card:hover {
    transform: translateY(-2px);
    border-color: var(--voyaly-border-strong);
    box-shadow: var(--shadow-md);
}

.wallet-doc-card__icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--voyaly-color-primary-500), var(--voyaly-color-primary-700));
}

.wallet-doc-card__icon svg {
    width: 20px;
    height: 20px;
}

.wallet-doc-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.wallet-doc-card__type {
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--voyaly-text-muted);
}

.wallet-doc-card__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--voyaly-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wallet-doc-card__meta {
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===========================================
   UNIFIED VIEWER OVERLAY (doc + photo)
   =========================================== */

.viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
}

.viewer-overlay[hidden] {
    display: none !important;
}

.viewer-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 16, 0.82);
}

.viewer-overlay__shell {
    position: relative;
    z-index: 1;
    width: min(960px, calc(100vw - 2rem));
    height: min(92vh, 920px);
    max-height: min(92vh, 920px);
    display: flex;
    flex-direction: column;
    background: var(--voyaly-bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    margin: auto;
}

.viewer-overlay__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--voyaly-border-soft);
    flex: 0 0 auto;
    min-height: 52px;
    background: var(--voyaly-bg-elevated);
}

.viewer-overlay__title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--voyaly-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.viewer-overlay__bar-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    flex-shrink: 0;
}

.viewer-overlay__action {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--voyaly-text-secondary);
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease;
    padding: 0;
    text-decoration: none;
}

.viewer-overlay__action svg {
    width: 18px;
    height: 18px;
}

.viewer-overlay__action:hover {
    color: var(--voyaly-text-primary);
    background: var(--voyaly-bg-subtle);
}

.viewer-overlay__canvas {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: #f8f5ee;
    position: relative;
}

.viewer-overlay__image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: auto;
}

.viewer-overlay__pdf {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: #fff;
    display: block;
    flex: 1 1 auto;
}

.viewer-overlay__fallback {
    text-align: center;
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
    padding: var(--spacing-8) var(--spacing-4);
    margin: auto;
    width: 100%;
}

.viewer-overlay__fallback p {
    margin: 0 0 var(--spacing-4);
}

.viewer-overlay--photo {
    z-index: 1350;
}

.viewer-overlay--photo .viewer-overlay__backdrop {
    background: rgba(10, 12, 16, 0.88);
}

.viewer-overlay__photo {
    position: relative;
    z-index: 1;
    max-width: calc(100vw - 4rem);
    max-height: calc(100vh - 4rem);
    object-fit: contain;
    border-radius: var(--radius-md);
}

.viewer-overlay__close-btn,
.viewer-overlay__nav {
    position: fixed;
    z-index: 10;
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 140ms ease;
}

.viewer-overlay__close-btn:hover,
.viewer-overlay__nav:hover {
    background: rgba(255, 255, 255, 0.24);
}

.viewer-overlay__close-btn svg,
.viewer-overlay__nav svg {
    width: 18px;
    height: 18px;
}

.viewer-overlay__close-btn {
    top: var(--spacing-4);
    right: var(--spacing-4);
}

.viewer-overlay__nav--prev {
    left: var(--spacing-4);
}

.viewer-overlay__nav--next {
    right: var(--spacing-4);
}

/* ===========================================
   GALLERY TILES (Trip Detail preview)
   =========================================== */

.gallery-tile {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    aspect-ratio: 4 / 3;
    box-shadow: var(--shadow-sm);
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

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

.gallery-tile__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 220ms ease;
}

.gallery-tile:hover .gallery-tile__image {
    transform: scale(1.03);
}

/* media-lightbox kept as alias for Trip Detail photo lightbox */
.media-lightbox { position: fixed; inset: 0; z-index: 1350; display: flex; align-items: center; justify-content: center; }
.media-lightbox__backdrop { position: absolute; inset: 0; background: rgba(10, 12, 16, 0.88); }
.media-lightbox__panel { position: relative; max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); display: flex; align-items: center; justify-content: center; }
.media-lightbox__figure { margin: 0; display: flex; align-items: center; justify-content: center; }
.media-lightbox__image { max-width: calc(100vw - 4rem); max-height: calc(100vh - 4rem); object-fit: contain; border-radius: var(--radius-md); }
.media-lightbox__meta { display: none; }
.media-lightbox__close, .media-lightbox__nav { position: fixed; z-index: 10; border: 0; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.92); width: 40px; height: 40px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 140ms ease; }
.media-lightbox__close:hover, .media-lightbox__nav:hover { background: rgba(255,255,255,0.24); }
.media-lightbox__close { top: var(--spacing-4); right: var(--spacing-4); }
.media-lightbox__nav--prev { left: var(--spacing-4); }
.media-lightbox__nav--next { right: var(--spacing-4); }
.media-lightbox__manage { position: fixed; right: var(--spacing-4); bottom: var(--spacing-4); display: flex; align-items: center; gap: var(--spacing-2); z-index: 10; }

.trip-documents__list--preview-wallet {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-3);
}

.wallet-doc-card--preview {
    width: 100%;
    min-height: 88px;
}

.trip-media__gallery--preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-2);
}

.gallery-tile--preview {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
}

@media (max-width: 640px) {
    .edit-item-row {
        flex-wrap: nowrap;
        align-items: center;
        padding: var(--spacing-3);
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .edit-item-row__actions {
        width: auto;
        flex: 0 0 auto;
        justify-content: flex-end;
        padding-top: 0;
    }

    /* Centered mobile document viewer (not a bottom sheet). */
    .viewer-overlay {
        align-items: center;
        justify-content: center;
        padding:
            max(12px, env(safe-area-inset-top, 0px))
            max(12px, env(safe-area-inset-right, 0px))
            max(12px, env(safe-area-inset-bottom, 0px))
            max(12px, env(safe-area-inset-left, 0px));
    }

    .viewer-overlay__shell {
        width: calc(100% - 24px);
        max-width: none;
        height: calc(100dvh - 32px);
        max-height: calc(100dvh - 32px);
        margin: auto;
        border-radius: 18px;
        overflow: hidden;
    }

    .viewer-overlay__bar {
        position: relative;
        top: auto;
        z-index: 2;
        background: var(--voyaly-bg-elevated);
        padding: 0.75rem 1rem;
        min-height: 52px;
        flex: 0 0 auto;
    }

    .viewer-overlay__action {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .viewer-overlay__canvas {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    .viewer-overlay__pdf {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .viewer-overlay__image {
        max-width: 100%;
        max-height: 100%;
    }

    .viewer-overlay__photo {
        max-width: 100vw;
        max-height: calc(100vh - 6rem);
        border-radius: 0;
    }

    .viewer-overlay__close-btn {
        top: var(--spacing-3);
        right: var(--spacing-3);
    }

    .viewer-overlay__nav {
        width: 36px;
        height: 36px;
    }

    .viewer-overlay__nav--prev { left: var(--spacing-2); }
    .viewer-overlay__nav--next { right: var(--spacing-2); }

    .trip-documents__list--preview-wallet {
        grid-template-columns: 1fr;
    }

    .trip-documents__list--preview-wallet > :nth-child(n + 4) {
        display: none;
    }

    .trip-media__gallery--preview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trip-media__gallery--preview > :nth-child(n + 5) {
        display: none;
    }

    .media-lightbox__image { max-width: 100vw; max-height: calc(100vh - 6rem); border-radius: 0; }
    .media-lightbox__close { top: var(--spacing-3); right: var(--spacing-3); }
    .media-lightbox__nav { width: 36px; height: 36px; }
    .media-lightbox__nav--prev { left: var(--spacing-2); }
    .media-lightbox__nav--next { right: var(--spacing-2); }
    .media-lightbox__manage { left: var(--spacing-3); right: var(--spacing-3); bottom: var(--spacing-3); }
    .media-lightbox__manage .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .wallet-doc-card,
    .edit-item-row,
    .edit-item-row__action,
    .gallery-tile,
    .gallery-tile__image,
    .viewer-overlay__action,
    .viewer-overlay__close-btn,
    .viewer-overlay__nav,
    .media-lightbox__close,
    .media-lightbox__nav {
        transition: none;
    }
}

.auth-form + .auth-footer {
    margin-top: var(--spacing-6);
}

@media (max-width: 640px) {
    .auth-page {
        align-items: flex-start;
        padding: var(--spacing-4) 0;
    }

    .auth-container {
        padding: var(--spacing-3);
    }

    .auth-card {
        border-radius: var(--radius-xl);
        padding: var(--spacing-6) var(--spacing-5);
    }

    .auth-header {
        margin-bottom: var(--spacing-5);
    }

    .auth-logo {
        margin-bottom: var(--spacing-4);
    }

    .account-profile-row {
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    .account-profile-row__actions {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
    
    .account-inline-form {
        flex-direction: column;
    }
    
    .account-inline-form .btn {
        width: 100%;
    }

    .account-actions-end .btn {
        width: 100%;
    }
}


/* ===========================================
   TRAVEL ESSENTIALS: Flights + Accommodations
   Phase 1 — manual entries only.
   =========================================== */

.trip-essentials {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
}

@media (min-width: 900px) {
    .trip-essentials {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}

.trip-section-block--travel {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

/* ---------- Boarding pass (flight) ---------- */

.boarding-pass {
    background: linear-gradient(155deg, #262d24 0%, #1c211a 100%);
    color: #f3ecd6;
    border-radius: var(--radius-xl);
    padding: var(--spacing-5) var(--spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    box-shadow: 0 10px 26px rgba(20, 24, 18, 0.18);
    position: relative;
    overflow: hidden;
    min-height: 200px;
}

.boarding-pass::before,
.boarding-pass::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--voyaly-bg-card);
    top: 50%;
    transform: translateY(-50%);
}

.boarding-pass::before { left: -11px; }
.boarding-pass::after { right: -11px; }

.boarding-pass__airline {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #d5e086;
}

.boarding-pass__route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(60px, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--spacing-3);
}

.boarding-pass__endpoint {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 2px;
}

.boarding-pass__endpoint--right {
    align-items: flex-end;
    text-align: right;
}

.boarding-pass__code {
    font-size: clamp(2rem, 5vw, 2.6rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #f7f1dd;
}

.boarding-pass__city {
    font-size: var(--font-size-xs);
    color: rgba(243, 236, 214, 0.7);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boarding-pass__time {
    margin-top: 2px;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: rgba(243, 236, 214, 0.92);
    font-variant-numeric: tabular-nums;
}

.boarding-pass__path {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 var(--spacing-1);
    color: rgba(213, 224, 134, 0.85);
}

.boarding-pass__line {
    flex: 1;
    height: 1px;
    border-top: 1px dashed rgba(243, 236, 214, 0.32);
}

.boarding-pass__plane {
    width: 18px;
    height: 18px;
    transform: rotate(90deg);
    flex-shrink: 0;
}

.boarding-pass__meta,
.boarding-pass__submeta,
.boarding-pass__more {
    margin: 0;
    color: rgba(243, 236, 214, 0.72);
}

.boarding-pass__meta {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.boarding-pass__submeta {
    font-size: var(--font-size-xs);
    color: rgba(243, 236, 214, 0.58);
    line-height: 1.5;
}

.boarding-pass__more {
    margin-top: auto;
    padding-top: var(--spacing-2);
    border-top: 1px dashed rgba(243, 236, 214, 0.18);
    font-size: var(--font-size-xs);
    color: rgba(213, 224, 134, 0.85);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.boarding-pass--empty {
    background: linear-gradient(155deg, #2c3229 0%, #232821 100%);
    justify-content: center;
    text-align: center;
    align-items: stretch;
    color: rgba(243, 236, 214, 0.72);
}

.boarding-pass--empty .boarding-pass__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.boarding-pass__empty-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #f3ecd6;
}

.boarding-pass__empty-text {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(243, 236, 214, 0.62);
    line-height: 1.5;
}

/* ---------- Stay card (accommodation) ---------- */

.stay-card {
    background: linear-gradient(160deg, var(--voyaly-bg-card), #fbf6ec);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5) var(--spacing-5);
    box-shadow: 0 6px 18px rgba(78, 62, 30, 0.06);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    min-height: 200px;
}

.stay-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-3);
}

.stay-card__name {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--voyaly-text-primary);
    line-height: 1.25;
}

.stay-card__type {
    margin: 2px 0 0;
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--voyaly-text-muted);
    font-weight: 600;
}

.stay-card__dates {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--voyaly-text-primary);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

.stay-card__dates-nights {
    font-weight: 500;
    color: var(--voyaly-text-secondary);
}

.stay-card__location {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
}

.stay-card__location-icon {
    width: 14px;
    height: 14px;
    color: var(--voyaly-text-muted);
    flex-shrink: 0;
}

.stay-card__map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--voyaly-text-muted);
    border-radius: var(--radius-full);
    transition: color 140ms ease, background-color 140ms ease;
}

.stay-card__map-link svg {
    width: 14px;
    height: 14px;
}

.stay-card__map-link:hover {
    color: var(--voyaly-text-primary);
    background: var(--voyaly-bg-subtle);
}

.stay-card__times,
.stay-card__submeta,
.stay-card__more {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted);
    line-height: 1.5;
}

.stay-card__times {
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.stay-card__more {
    margin-top: auto;
    padding-top: var(--spacing-2);
    border-top: 1px dashed var(--voyaly-border-soft);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--voyaly-text-secondary);
}

.stay-card--empty {
    background: linear-gradient(160deg, #fbf7ee, #f6efdd);
    justify-content: center;
    text-align: center;
    color: var(--voyaly-text-secondary);
}

.stay-card__empty-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--voyaly-text-primary);
}

.stay-card__empty-text {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    line-height: 1.5;
}

/* ---------- Edit row extensions used by flights + accommodations ---------- */

.edit-item-row__badge {
    display: inline-block;
    margin-left: var(--spacing-2);
    padding: 2px var(--spacing-2);
    background: var(--voyaly-bg-subtle);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--voyaly-text-secondary);
    vertical-align: middle;
}

.form__input--mono {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------- Mobile refinements ---------- */

@media (max-width: 640px) {
    .boarding-pass,
    .stay-card {
        padding: var(--spacing-4);
        min-height: 0;
    }

    .boarding-pass__route {
        gap: var(--spacing-2);
    }

    .boarding-pass__code {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }

    .boarding-pass__time {
        font-size: var(--font-size-base);
    }

    .stay-card__name {
        font-size: var(--font-size-lg);
    }
}

/* ===========================================
   TRAVEL ESSENTIALS — expandable extras
   =========================================== */

/* Generic quiet preview toggle button (shared visual language with
   .day-preview-toggle). Positioned to sit as a section-level control
   under the primary card. */
.preview-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    padding: var(--spacing-2) var(--spacing-3);
    margin: var(--spacing-2) 0 0 calc(-1 * var(--spacing-3));
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--voyaly-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: color 140ms ease, background-color 140ms ease;
    align-self: flex-start;
}

.preview-toggle:hover,
.preview-toggle:focus-visible {
    color: var(--voyaly-text-primary);
    background: var(--voyaly-bg-subtle);
}

.preview-toggle:focus-visible {
    outline: 2px solid var(--voyaly-color-primary-300);
    outline-offset: 2px;
}

.trip-section-block--travel .preview-toggle {
    margin-left: 0;
    margin-top: var(--spacing-3);
}

/* Extras containers stack vertically with a soft gap. */
.flight-extras,
.stay-extras {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
}

/* ---------- Compact flight row ---------- */

.flight-mini {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    background: var(--voyaly-bg-elevated);
    border: 1px solid var(--voyaly-border-soft);
}

.flight-mini__route {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
    color: var(--voyaly-text-primary);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.flight-mini__code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: var(--font-size-sm);
}

.flight-mini__arrow {
    width: 14px;
    height: 14px;
    color: var(--voyaly-text-muted);
}

.flight-mini__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.flight-mini__airline {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--voyaly-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flight-mini__meta {
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted);
    line-height: 1.5;
}

/* ---------- Compact accommodation row ---------- */

.stay-mini {
    display: flex;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    background: var(--voyaly-bg-elevated);
    border: 1px solid var(--voyaly-border-soft);
}

.stay-mini__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.stay-mini__name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--voyaly-text-primary);
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.stay-mini__type {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--voyaly-text-muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.stay-mini__meta {
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .flight-mini,
    .stay-mini {
        padding: var(--spacing-3);
    }

    .flight-mini {
        flex-wrap: wrap;
    }

    .flight-mini__route {
        width: 100%;
    }
}

/* ===========================================
   FLIGHT past / completed variants
   =========================================== */

.boarding-pass__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    min-height: 18px;
}

.boarding-pass__status {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(243, 236, 214, 0.7);
    background: rgba(243, 236, 214, 0.1);
    border: 1px solid rgba(243, 236, 214, 0.16);
    white-space: nowrap;
}

.boarding-pass--past {
    background: linear-gradient(155deg, #3a3d34 0%, #2f3229 100%);
    color: rgba(243, 236, 214, 0.85);
    box-shadow: 0 6px 16px rgba(20, 24, 18, 0.12);
}

.boarding-pass--past .boarding-pass__airline {
    color: rgba(213, 224, 134, 0.55);
}

.boarding-pass--past .boarding-pass__code {
    color: rgba(243, 236, 214, 0.82);
}

.boarding-pass--past .boarding-pass__time {
    color: rgba(243, 236, 214, 0.72);
}

.boarding-pass--past .boarding-pass__city,
.boarding-pass--past .boarding-pass__meta,
.boarding-pass--past .boarding-pass__submeta {
    color: rgba(243, 236, 214, 0.55);
}

/* Compact past flight row */

.flight-mini--past {
    background: var(--voyaly-bg-subtle);
    border-color: transparent;
    color: var(--voyaly-text-muted);
}

.flight-mini--past .flight-mini__route,
.flight-mini--past .flight-mini__airline {
    color: var(--voyaly-text-secondary);
}

.flight-mini--past .flight-mini__code {
    color: var(--voyaly-text-secondary);
}

.flight-mini--past .flight-mini__meta {
    color: var(--voyaly-text-muted);
}

.flight-mini__status {
    margin-left: auto;
    align-self: center;
    flex-shrink: 0;
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.05);
    color: var(--voyaly-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .flight-mini__status {
        margin-left: 0;
        align-self: flex-start;
    }
}

/* ===========================================
   FLIGHT FINDER (Phase 2A)
   Calm helper panel above the manual flight form.
   No prices, no booking CTAs — this is a planner, not a shop.
   =========================================== */

.flight-finder {
    margin-bottom: var(--spacing-4);
}

.flight-finder__header {
    margin-bottom: var(--spacing-4);
}

.flight-finder__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--voyaly-text-primary);
}

.flight-finder__subtitle {
    margin: var(--spacing-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    line-height: 1.5;
}

.flight-finder__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.flight-finder__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    padding-top: var(--spacing-1);
}

.flight-finder__hint {
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted);
    line-height: 1.5;
}

.flight-finder__message {
    margin: var(--spacing-4) 0 0;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--voyaly-bg-subtle);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    line-height: 1.5;
}

.flight-finder__message--error {
    background: rgba(157, 59, 59, 0.06);
    color: var(--voyaly-danger-600);
}

.flight-finder__empty {
    margin-top: var(--spacing-4);
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    background: var(--voyaly-bg-subtle);
    text-align: center;
}

.flight-finder__empty-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--voyaly-text-primary);
}

.flight-finder__empty-text {
    margin: var(--spacing-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    line-height: 1.5;
}

.flight-finder__results {
    margin-top: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.flight-finder__result-hint {
    margin: var(--spacing-3) 0 0;
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted);
    line-height: 1.5;
}

/* Selectable flight result cards — quiet, planner-style, never booking-like. */
.flight-result {
    appearance: none;
    text-align: left;
    width: 100%;
    background: linear-gradient(165deg, var(--voyaly-bg-elevated), #f8f4ec);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    color: inherit;
    font: inherit;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.flight-result:hover,
.flight-result:focus-visible {
    border-color: var(--voyaly-border-strong);
    background: var(--voyaly-bg-card);
    box-shadow: 0 8px 24px rgba(45, 42, 36, 0.06);
    transform: translateY(-1px);
}

.flight-result:focus-visible {
    outline: 2px solid var(--voyaly-color-primary-300);
    outline-offset: 2px;
}

.flight-result--selected {
    border-color: var(--voyaly-color-primary-500);
    background: var(--voyaly-bg-card);
    box-shadow: 0 0 0 3px rgba(76, 91, 68, 0.1);
}

.flight-result__top,
.flight-result__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-3);
}

.flight-result__airline {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--voyaly-text-primary);
    letter-spacing: 0.02em;
}

.flight-result__source {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--voyaly-text-muted);
    flex-shrink: 0;
}

.flight-result__route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--spacing-3);
}

.flight-result__endpoint {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
}

.flight-result__endpoint--right {
    align-items: flex-end;
    text-align: right;
}

.flight-result__connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 48px;
    padding: 0 var(--spacing-1);
}

.flight-result__line {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--voyaly-border-strong), transparent);
}

.flight-result__code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: var(--voyaly-text-primary);
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.flight-result__city {
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted);
    letter-spacing: 0.03em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flight-result__time {
    font-size: var(--font-size-base);
    color: var(--voyaly-text-secondary);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.flight-result__arrow {
    color: var(--voyaly-text-muted);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.flight-result__secondary,
.flight-result__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-3);
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-secondary);
    line-height: 1.5;
}

.flight-result__cta {
    align-self: flex-start;
    margin-top: var(--spacing-1);
    padding: 6px var(--spacing-3);
    border-radius: var(--radius-full);
    background: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background-color 140ms ease, color 140ms ease;
}

.flight-result:hover .flight-result__cta,
.flight-result:focus-visible .flight-result__cta {
    background: var(--voyaly-color-primary-100);
    color: var(--voyaly-color-primary-700);
}

.flight-result--selected .flight-result__cta {
    background: var(--voyaly-color-primary-500);
    color: #fff;
}

@media (max-width: 640px) {
    .flight-result {
        padding: var(--spacing-3);
        gap: var(--spacing-2);
    }

    /* Keep route horizontal on phones for denser scanning. */
    .flight-result__route {
        grid-template-columns: 1fr auto 1fr;
        gap: var(--spacing-2);
    }

    .flight-result__connector {
        min-width: 36px;
        padding: 0;
        gap: 2px;
    }

    .flight-result__endpoint--right {
        align-items: flex-end;
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flight-result {
        transition: none;
    }
}

/* ===========================================
   FLIGHT FLOW — 4-step guided add flow
   (Phase 2A refinement + UX polish)
   =========================================== */

.flight-flow .page-header {
    margin-bottom: var(--spacing-5);
}

.flight-flow .card {
    padding: var(--spacing-5) var(--spacing-6);
}

@media (max-width: 640px) {
    .flight-flow .card {
        padding: var(--spacing-4);
    }
}

/* ---------- Step indicator ---------- */

.flight-flow__stepper {
    margin: 0 0 var(--spacing-5);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
}

.flight-flow__stepper-mobile {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--voyaly-text-muted);
    text-align: center;
}

.flight-flow__stepper-desktop {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--spacing-4);
    align-items: center;
    justify-content: center;
}

@media (min-width: 720px) {
    .flight-flow__stepper-mobile { display: none; }
    .flight-flow__stepper-desktop { display: flex; }
}

.flight-flow__step {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--voyaly-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.flight-flow__step + .flight-flow__step::before {
    content: '·';
    margin-left: 0;
    margin-right: var(--spacing-2);
    color: var(--voyaly-border-strong);
}

.flight-flow__step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-muted);
    font-size: 11px;
    font-weight: 700;
}

.flight-flow__step--current {
    color: var(--voyaly-text-primary);
}

.flight-flow__step--current .flight-flow__step-index {
    background: var(--voyaly-color-primary-500);
    color: #fff;
}

.flight-flow__step--done {
    color: var(--voyaly-text-secondary);
}

.flight-flow__step--done .flight-flow__step-index {
    background: var(--voyaly-color-primary-100);
    color: var(--voyaly-color-primary-700);
}

/* ---------- Manual fallback link ---------- */

.flight-flow__manual {
    margin: var(--spacing-4) 0 0;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted);
}

.flight-flow__manual-link {
    color: var(--voyaly-color-primary-600);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    transition: color 140ms ease;
}

.flight-flow__manual-link:hover,
.flight-flow__manual-link:focus-visible {
    color: var(--voyaly-color-primary-700);
}

/* ---------- Voyaly date picker ---------- */

.date-picker {
    position: relative;
}

.date-picker__native {
    width: 100%;
    min-height: 48px;
}

.date-picker__surface {
    display: none;
}

.date-picker--enhanced .date-picker__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.date-picker--enhanced .date-picker__surface {
    display: block;
    background: linear-gradient(165deg, #faf6ee, #f3ecdf);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
}

.date-picker__selected {
    margin: 0 0 var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--voyaly-text-primary);
    text-align: center;
}

.date-picker__selected--empty {
    color: var(--voyaly-text-muted);
    font-weight: 500;
}

.date-picker__calendar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.date-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: 0 var(--spacing-1);
}

.date-picker__month {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--voyaly-text-primary);
    letter-spacing: 0.02em;
    text-align: center;
    flex: 1;
}

.date-picker__nav {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-full);
    background: var(--voyaly-bg-card);
    color: var(--voyaly-text-secondary);
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.date-picker__nav svg {
    width: 16px;
    height: 16px;
}

.date-picker__nav:hover,
.date-picker__nav:focus-visible {
    border-color: var(--voyaly-border-strong);
    background: var(--voyaly-bg-elevated);
    color: var(--voyaly-color-primary-700);
    outline: none;
}

.date-picker__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 0 2px;
}

.date-picker__weekdays span {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--voyaly-text-muted);
    padding: var(--spacing-1) 0;
}

.date-picker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 2px;
}

.date-picker__day {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--voyaly-text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.date-picker__day:hover:not(:disabled),
.date-picker__day:focus-visible:not(:disabled) {
    background: var(--voyaly-bg-card);
    border-color: var(--voyaly-border-soft);
    outline: none;
}

.date-picker__day--today:not(.date-picker__day--selected) {
    border-color: var(--voyaly-border-strong);
    color: var(--voyaly-color-primary-700);
}

.date-picker__day--selected {
    background: var(--voyaly-color-primary-500);
    border-color: var(--voyaly-color-primary-500);
    color: #fff;
}

.date-picker__day--outside,
.date-picker__day--empty {
    visibility: hidden;
    pointer-events: none;
}

/* ---------- Trip date range picker (Von → Bis) ---------- */

.date-range-picker {
    position: relative;
}

.date-range-picker__trigger {
    appearance: none;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(165deg, var(--voyaly-bg-elevated) 0%, var(--voyaly-bg-card) 100%);
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(35, 51, 38, 0.05);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.date-range-picker__trigger:hover,
.date-range-picker__trigger[aria-expanded="true"] {
    border-color: var(--voyaly-border-strong);
    box-shadow: 0 8px 20px -12px rgba(35, 51, 38, 0.35);
}

.date-range-picker__trigger:focus-visible {
    outline: 2px solid var(--voyaly-color-primary-600);
    outline-offset: 2px;
}

.date-range-picker__slot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-lg);
    background: rgba(251, 247, 238, 0.85);
}

.date-range-picker__slot-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--voyaly-color-primary-600);
}

.date-range-picker__slot-value {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--voyaly-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.date-range-picker__slot-value--empty {
    color: var(--voyaly-text-muted);
    font-weight: 500;
}

.date-range-picker__separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--voyaly-color-primary-600);
    align-self: center;
}

.date-range-picker__separator svg {
    width: 18px;
    height: 18px;
}

.date-range-picker__panel {
    /* Closed/home: out of flow so the form never grows when the panel exists in DOM. */
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    width: min(100%, 360px);
    padding: var(--spacing-4);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    background: linear-gradient(165deg, #faf6ee, #f3ecdf);
    box-shadow: 0 18px 40px rgba(29, 23, 16, 0.18);
    box-sizing: border-box;
}

/* Opened via JS portal on document.body — never affects parent form/card height. */
.date-range-picker__panel--portal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000; /* above header/modals (~1350), below flash toasts (11000) & onboarding (12000) */
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow: auto;
    margin: 0;
}

.date-range-picker__panel[hidden] {
    display: none !important;
}

.date-range-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.date-range-picker__month {
    flex: 1;
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--voyaly-text-primary);
}

.date-range-picker__nav {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-full);
    background: var(--voyaly-bg-card);
    color: var(--voyaly-text-secondary);
    cursor: pointer;
}

.date-range-picker__nav svg {
    width: 16px;
    height: 16px;
}

.date-range-picker__nav:hover,
.date-range-picker__nav:focus-visible {
    border-color: var(--voyaly-border-strong);
    color: var(--voyaly-color-primary-700);
    outline: none;
}

.date-range-picker__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: var(--spacing-1);
}

.date-range-picker__weekdays span {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--voyaly-text-muted);
    padding: var(--spacing-1) 0;
}

.date-range-picker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.date-range-picker__day {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--voyaly-text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.date-range-picker__day:hover:not(:disabled),
.date-range-picker__day:focus-visible:not(:disabled) {
    background: var(--voyaly-bg-card);
    border-color: var(--voyaly-border-soft);
    outline: none;
}

.date-range-picker__day--today:not(.date-range-picker__day--start):not(.date-range-picker__day--end) {
    border-color: var(--voyaly-border-strong);
    color: var(--voyaly-color-primary-700);
}

.date-range-picker__day--in-range {
    background: var(--voyaly-color-primary-100);
    border-radius: 0;
    border-color: transparent;
}

.date-range-picker__day--start,
.date-range-picker__day--end {
    background: var(--voyaly-color-primary-600);
    border-color: var(--voyaly-color-primary-600);
    color: #fff;
    border-radius: var(--radius-full);
}

.date-range-picker__day--start.date-range-picker__day--in-range {
    border-radius: var(--radius-full) 0 0 var(--radius-full);
}

.date-range-picker__day--end.date-range-picker__day--in-range {
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.date-range-picker__day--empty {
    visibility: hidden;
    pointer-events: none;
}

.date-range-picker__hint {
    margin: var(--spacing-3) 0 0;
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-secondary);
}

.date-range-picker__panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
}

.date-range-picker__action {
    appearance: none;
    border-radius: var(--radius-full);
    padding: 0.45rem 0.95rem;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.date-range-picker__action--ghost {
    background: transparent;
    color: var(--voyaly-text-secondary);
}

.date-range-picker__action--ghost:hover {
    background: var(--voyaly-bg-card);
    color: var(--voyaly-text-primary);
}

.date-range-picker__action--primary {
    background: var(--voyaly-color-primary-600);
    border-color: var(--voyaly-color-primary-600);
    color: #fff;
}

.date-range-picker__action--primary:hover {
    background: var(--voyaly-color-primary-700);
}

.date-range-picker__error {
    margin: var(--spacing-2) 0 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-danger-600);
}

.date-range-picker__error[hidden] {
    display: none !important;
}

/* Enhanced mode: hide native date inputs visually but keep them for submit/a11y fallback. */
.date-range-picker--enhanced .date-range-picker__native-fields {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* No-JS / before enhance: show stacked native fields under the trigger. */
.date-range-picker:not(.date-range-picker--enhanced) .date-range-picker__trigger,
.date-range-picker:not(.date-range-picker--enhanced) .date-range-picker__panel {
    display: none;
}

.date-range-picker:not(.date-range-picker--enhanced) .date-range-picker__native-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
}

.date-range-picker:not(.date-range-picker--enhanced) .date-range-picker__native-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-1);
    color: var(--voyaly-text-primary);
}

.date-range-picker:not(.date-range-picker--enhanced) .date-range-picker__native-label:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
}

.date-range-picker:not(.date-range-picker--enhanced) .date-range-picker__native[data-range-start] {
    grid-column: 1;
    grid-row: 2;
}

.date-range-picker:not(.date-range-picker--enhanced) .date-range-picker__native[data-range-end] {
    grid-column: 2;
    grid-row: 2;
}

@media (max-width: 640px) {
    .date-range-picker__panel--portal {
        left: 12px !important;
        right: 12px;
        width: auto !important;
        max-width: none;
        border-radius: var(--radius-2xl);
    }

    .date-range-picker__panel--portal.date-range-picker__panel--sheet {
        top: auto !important;
        bottom: 12px;
        max-height: min(78vh, calc(100vh - 24px));
    }

    .date-range-picker__trigger {
        gap: var(--spacing-1);
        padding: var(--spacing-2);
    }

    .date-range-picker__slot {
        padding: var(--spacing-2);
    }

    .date-range-picker__day {
        min-height: 38px;
    }

    .date-range-picker:not(.date-range-picker--enhanced) .date-range-picker__native-fields {
        grid-template-columns: 1fr;
    }

    .date-range-picker:not(.date-range-picker--enhanced) .date-range-picker__native-label:nth-of-type(2),
    .date-range-picker:not(.date-range-picker--enhanced) .date-range-picker__native[data-range-start],
    .date-range-picker:not(.date-range-picker--enhanced) .date-range-picker__native[data-range-end] {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .date-range-picker__trigger,
    .date-range-picker__day {
        transition: none;
    }
}

/* ---------- Result cards / list wrapper ---------- */

.flight-flow__results {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.flight-flow__results-panel {
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5) var(--spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.flight-flow__results-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--voyaly-border-soft);
}

.flight-flow__results-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--voyaly-text-primary);
}

.flight-flow__results-count {
    font-weight: 500;
    color: var(--voyaly-text-muted);
}

.flight-flow__hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted);
    line-height: 1.5;
}

.flight-flow__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
}

@media (min-width: 760px) {
    .flight-flow__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.flight-flow__result-form {
    margin: 0;
    min-width: 0;
}

.flight-flow__load-more {
    display: flex;
    justify-content: center;
    padding-top: var(--spacing-2);
    border-top: 1px solid var(--voyaly-border-soft);
}

.flight-flow__load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px dashed var(--voyaly-border-strong);
    border-radius: var(--radius-lg);
    background: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.flight-flow__load-more-btn:hover,
.flight-flow__load-more-btn:focus-visible {
    border-color: var(--voyaly-color-primary-400);
    background: var(--voyaly-color-primary-50, #f4f6f0);
    color: var(--voyaly-color-primary-700);
}

.flight-flow__load-more-label {
    letter-spacing: 0.01em;
}

.flight-flow__load-more-note {
    margin: 0;
    padding-top: var(--spacing-2);
    border-top: 1px solid var(--voyaly-border-soft);
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted);
}

.flight-flow__footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    margin-top: var(--spacing-1);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--voyaly-border-soft);
}

/* ---------- State card (no provider / no results / error) ---------- */

.flight-flow__state {
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.flight-flow__state-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--voyaly-text-primary);
}

.flight-flow__state-text {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    line-height: 1.5;
}

.flight-flow__state-actions {
    margin-top: var(--spacing-3);
    display: inline-flex;
    justify-content: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

/* ---------- Review step ---------- */

.flight-summary {
    background: linear-gradient(160deg, #f7f3ea, #f1eadf);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4) var(--spacing-5);
    margin: 0 0 var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--voyaly-text-primary);
}

.flight-summary__eyebrow {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--voyaly-text-muted);
}

.flight-summary__line {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--voyaly-text-primary);
}

.flight-summary__route {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-2);
    font-size: var(--font-size-base);
}

.flight-summary__code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.flight-summary__time {
    color: var(--voyaly-text-secondary);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.flight-summary__arrow {
    color: var(--voyaly-text-muted);
}

.flight-summary__meta {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted);
}

.flight-flow__section {
    margin-bottom: var(--spacing-4);
}

.flight-flow__section-hint {
    margin: 0 0 var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    line-height: 1.5;
}

.flight-flow__details {
    margin: var(--spacing-4) 0;
    border-top: 1px solid var(--voyaly-border-soft);
    padding-top: var(--spacing-3);
}

.flight-flow__details-summary {
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--voyaly-text-primary);
    padding: var(--spacing-2) 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.flight-flow__details-summary::-webkit-details-marker {
    display: none;
}

.flight-flow__details-summary::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-muted);
    font-weight: 700;
    font-size: var(--font-size-sm);
    line-height: 1;
    transition: transform 140ms ease, background-color 140ms ease;
}

.flight-flow__details[open] .flight-flow__details-summary::before {
    content: '−';
    background: var(--voyaly-color-primary-100);
    color: var(--voyaly-color-primary-700);
}

.flight-flow__details-summary:hover,
.flight-flow__details-summary:focus-visible {
    color: var(--voyaly-color-primary-700);
}

.flight-flow__details-body {
    margin-top: var(--spacing-3);
}

@media (max-width: 640px) {
    .flight-flow__footer-actions {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .flight-flow__stepper {
        margin-bottom: var(--spacing-4);
        padding: var(--spacing-3);
    }

    .flight-flow__results-panel {
        padding: var(--spacing-4);
    }

    .date-picker--enhanced .date-picker__surface {
        padding: var(--spacing-3);
    }

    .date-picker__day {
        min-height: 44px;
    }
}

/* ---------- Airport autocomplete (flight finder) ---------- */

.airport-suggest-wrap {
    position: relative;
    --airport-layer-backdrop: 1200;
    --airport-layer-active-control: 1210;
    --airport-layer-panel: 1220;
    z-index: 1;
}

.airport-suggest-wrap--active-layer {
    z-index: var(--airport-layer-active-control);
}

.airport-suggest-wrap--open .form__input {
    border-color: var(--voyaly-border-primary);
    box-shadow: 0 0 0 1px rgba(54, 83, 60, 0.14);
}

.airport-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: var(--airport-layer-panel);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--voyaly-bg-elevated), #f8f4ec);
    box-shadow: 0 14px 28px rgba(29, 23, 16, 0.14);
    overflow: hidden;
    transform-origin: top center;
    animation: airportSuggestIn 150ms ease;
}

.airport-suggest[hidden] {
    display: none !important;
    pointer-events: none !important;
}

@keyframes airportSuggestIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.airport-suggest__header {
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted);
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: 1px solid var(--voyaly-border-soft);
    margin: 0;
}

.airport-suggest__list {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.airport-suggest__item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: var(--spacing-3);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-2) var(--spacing-3);
    align-items: baseline;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.airport-suggest__item:hover,
.airport-suggest__item:focus-visible,
.airport-suggest__item--active {
    background: var(--voyaly-bg-body);
    outline: none;
}

.airport-suggest__item--active {
    background: var(--voyaly-color-primary-100);
}

.airport-suggest__code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--voyaly-color-primary-700);
    letter-spacing: 0.04em;
}

.airport-suggest__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.airport-suggest__name {
    color: var(--voyaly-text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.airport-suggest__sub {
    color: var(--voyaly-text-muted);
    font-size: var(--font-size-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Flight search loading state ---------- */

.flight-flow__btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    margin-left: var(--spacing-2);
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: var(--radius-full);
    animation: flightFlowSpin 700ms linear infinite;
}

.flight-flow__form--loading .flight-flow__btn-spinner {
    display: inline-block;
}

.flight-flow__form--loading [data-flight-search-submit] {
    pointer-events: none;
    opacity: 0.88;
}

@keyframes flightFlowSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .airport-suggest__list {
        max-height: 240px;
    }

    .airport-suggest__item {
        padding: var(--spacing-3) var(--spacing-3);
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .airport-suggest,
    .flight-flow__btn-spinner,
    .accommodation-flow__btn-spinner {
        animation: none;
    }
}

/* ===========================================
   ACCOMMODATION FLOW — guided add flow (2B)
   =========================================== */

.container--accommodation-results {
    max-width: 880px;
}

.accommodation-flow .page-header {
    margin-bottom: var(--spacing-5);
}

.accommodation-flow .card {
    padding: var(--spacing-5) var(--spacing-6);
}

.accommodation-flow__stepper {
    margin: 0 0 var(--spacing-5);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
}

.accommodation-flow__stepper-mobile {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--voyaly-text-muted);
    text-align: center;
}

.accommodation-flow__stepper-desktop {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--spacing-4);
    align-items: center;
    justify-content: center;
}

@media (min-width: 720px) {
    .accommodation-flow__stepper-mobile { display: none; }
    .accommodation-flow__stepper-desktop { display: flex; }
}

.accommodation-flow__step {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--voyaly-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.accommodation-flow__step + .accommodation-flow__step::before {
    content: '·';
    margin-right: var(--spacing-2);
    color: var(--voyaly-border-strong);
}

.accommodation-flow__step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-muted);
    font-size: 11px;
    font-weight: 700;
}

.accommodation-flow__step--current {
    color: var(--voyaly-text-primary);
}

.accommodation-flow__step--current .accommodation-flow__step-index {
    background: var(--voyaly-color-primary-500);
    color: #fff;
}

.accommodation-flow__step--done {
    color: var(--voyaly-text-secondary);
}

.accommodation-flow__step--done .accommodation-flow__step-index {
    background: var(--voyaly-color-primary-100);
    color: var(--voyaly-color-primary-700);
}

.accommodation-flow__manual {
    margin: var(--spacing-4) 0 0;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted);
}

.accommodation-flow__manual-link {
    color: var(--voyaly-color-primary-600);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.accommodation-flow__hint-card {
    margin: 0 0 var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    background: linear-gradient(165deg, #faf6ee, #f3ecdf);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    line-height: 1.5;
}

.accommodation-flow__section-hint {
    margin: 0 0 var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    line-height: 1.5;
}

.accommodation-flow__results-panel {
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5) var(--spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.accommodation-flow__results-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--voyaly-border-soft);
}

.accommodation-flow__results-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--voyaly-text-primary);
}

.accommodation-flow__results-count,
.accommodation-flow__hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted);
    line-height: 1.5;
}

.accommodation-flow__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
}

@media (min-width: 760px) {
    .accommodation-flow__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.accommodation-flow__result-form {
    margin: 0;
    min-width: 0;
}

.place-result {
    appearance: none;
    text-align: left;
    width: 100%;
    background: linear-gradient(165deg, #faf6ee, #f4efe4);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    color: inherit;
    font: inherit;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.place-result:hover,
.place-result:focus-visible {
    border-color: var(--voyaly-border-strong);
    background: #fffdf8;
    box-shadow: 0 10px 24px rgba(45, 42, 36, 0.07);
    transform: translateY(-1px);
    outline: none;
}

.place-result__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-3);
}

.place-result__name {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--voyaly-text-primary);
    line-height: 1.3;
}

.place-result__source {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--voyaly-text-muted);
    flex-shrink: 0;
}

.place-result__type {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--voyaly-color-primary-700);
}

.place-result__address,
.place-result__location {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    line-height: 1.45;
}

.place-result__rating {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted);
}

.place-result__cta {
    align-self: flex-start;
    margin-top: var(--spacing-1);
    padding: 6px var(--spacing-3);
    border-radius: var(--radius-full);
    background: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.place-result:hover .place-result__cta,
.place-result:focus-visible .place-result__cta {
    background: var(--voyaly-color-primary-100);
    color: var(--voyaly-color-primary-700);
}

.accommodation-flow__state {
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.accommodation-flow__state-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 700;
}

.accommodation-flow__state-text {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
}

.accommodation-flow__state-actions {
    margin-top: var(--spacing-3);
    display: inline-flex;
    justify-content: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.accommodation-flow__load-more {
    display: flex;
    justify-content: center;
    padding-top: var(--spacing-2);
    border-top: 1px solid var(--voyaly-border-soft);
}

.accommodation-flow__load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px dashed var(--voyaly-border-strong);
    border-radius: var(--radius-lg);
    background: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
}

.accommodation-flow__footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--voyaly-border-soft);
}

.accommodation-summary {
    background: linear-gradient(160deg, #f7f3ea, #efe6d8);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4) var(--spacing-5);
    margin: 0 0 var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.accommodation-summary__eyebrow {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--voyaly-text-muted);
}

.accommodation-summary__name {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--voyaly-text-primary);
}

.accommodation-summary__meta {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
}

.accommodation-flow__details {
    margin: var(--spacing-4) 0;
    border-top: 1px solid var(--voyaly-border-soft);
    padding-top: var(--spacing-3);
}

.accommodation-flow__details-summary {
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--voyaly-text-primary);
    padding: var(--spacing-2) 0;
    list-style: none;
}

.accommodation-flow__details-summary::-webkit-details-marker {
    display: none;
}

.accommodation-flow__btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    margin-left: var(--spacing-2);
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: var(--radius-full);
    animation: flightFlowSpin 700ms linear infinite;
}

.accommodation-flow__form--loading .accommodation-flow__btn-spinner {
    display: inline-block;
}

.accommodation-flow__form--loading [data-accommodation-stay-submit],
.accommodation-flow__form--loading [data-accommodation-search-submit],
.accommodation-flow__form--loading [data-accommodation-review-submit] {
    pointer-events: none;
    opacity: 0.88;
}

@media (max-width: 640px) {
    .accommodation-flow .card,
    .accommodation-flow__results-panel {
        padding: var(--spacing-4);
    }

    .accommodation-flow__footer-actions {
        flex-direction: column;
        text-align: center;
    }
}

/* ===========================================
   DETAIL VIEW — flight & accommodation show pages
   =========================================== */

.detail-view__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-5);
}

.detail-view__title {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--voyaly-text-primary);
    line-height: 1.2;
}

.detail-view__subtitle {
    margin: 4px 0 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
}

.detail-view__actions {
    display: inline-flex;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

.boarding-pass--detail {
    min-height: 0;
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-5);
}

.stay-card--detail {
    min-height: 0;
    margin-bottom: var(--spacing-5);
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

@media (min-width: 640px) {
    .detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .detail-card--wide {
        grid-column: 1 / -1;
    }
}

.detail-card {
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.detail-card__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--voyaly-text-muted);
}

.detail-card__icon {
    width: 16px;
    height: 16px;
    color: var(--voyaly-color-primary-500);
    flex-shrink: 0;
}

.detail-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.detail-list__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-3);
}

.detail-list__label {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted);
    flex-shrink: 0;
}

.detail-list__value {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--voyaly-text-primary);
    text-align: right;
    word-break: break-word;
}

.detail-list__value--mono {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: 0.04em;
}

.detail-list__value-link {
    color: var(--voyaly-color-primary-600);
    text-decoration: none;
}

.detail-list__value-link:hover {
    text-decoration: underline;
}

.detail-card__notes {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    line-height: 1.6;
    white-space: pre-line;
}

.detail-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--voyaly-color-primary-600);
    text-decoration: none;
}

.detail-card__link svg {
    width: 15px;
    height: 15px;
}

.detail-card__link:hover {
    color: var(--voyaly-color-primary-700);
    text-decoration: underline;
}

/* ---------- Stretched card link (view → detail) ---------- */

.boarding-pass--linked,
.flight-mini--linked,
.stay-card--linked,
.stay-mini--linked {
    position: relative;
}

.card-detail-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
}

.card-detail-link:focus-visible {
    outline: 2px solid var(--voyaly-color-primary-500);
    outline-offset: 2px;
}

/* Inner interactive elements must sit above the stretched overlay. */
.stay-card--linked .stay-card__map-link {
    position: relative;
    z-index: 2;
}

.boarding-pass--linked,
.flight-mini--linked,
.stay-card--linked,
.stay-mini--linked {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.boarding-pass--linked:hover,
.flight-mini--linked:hover,
.stay-card--linked:hover,
.stay-mini--linked:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(29, 23, 16, 0.14);
}

/* ---------- Focused list rows as links ---------- */

.edit-item-row__content--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    min-width: 0;
}

.edit-item-row__content--link:hover .edit-item-row__name {
    color: var(--voyaly-color-primary-600);
}

/* ---------- Form secondary section heading ---------- */

.form__section-heading {
    margin: var(--spacing-4) 0 var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--voyaly-border-soft);
}

.form__section-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--voyaly-text-primary);
}

.form__section-hint {
    margin: 4px 0 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted);
    line-height: 1.45;
}

.flight-flow__section--secondary,
.accommodation-flow__section--secondary {
    margin-top: var(--spacing-2);
}

/* ---------- Voyaly combobox (calm, no native datalist overlay) ---------- */

.combobox {
    position: relative;
    display: block;
    width: 100%;
}

.combobox .form__input--combobox {
    width: 100%;
    box-sizing: border-box;
}

.combobox__toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: var(--spacing-10);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--voyaly-text-muted);
    cursor: pointer;
    padding: 0;
}

.combobox__toggle svg {
    width: 1.25em;
    height: 1.25em;
    transition: transform var(--transition-fast);
}

.combobox--open .combobox__toggle svg {
    transform: rotate(180deg);
}

/* The custom panel replaces the chevron background on the input. */
.combobox .form__input--combobox {
    background-image: none;
}

.combobox__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: var(--spacing-1);
    list-style: none;
    background: var(--voyaly-bg-elevated);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--voyaly-shadow-soft);
    max-height: 240px;
    overflow-y: auto;
}

.combobox__option {
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-primary);
    cursor: pointer;
}

.combobox__option--active,
.combobox__option:hover {
    background: var(--voyaly-color-primary-100);
    color: var(--voyaly-color-primary-700);
}

@media (max-width: 640px) {
    .detail-view__header {
        align-items: stretch;
    }
    .detail-list__row {
        flex-direction: column;
        gap: 0;
    }
    .detail-list__value {
        text-align: left;
    }
}

/* ===========================================
   TAGESPLANUNG — itinerary items, timeline, day detail
   =========================================== */

/* ---------- Shared time pill ---------- */

.time-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--voyaly-color-primary-100);
    color: var(--voyaly-color-primary-700);
    font-weight: 700;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.time-pill--muted {
    background: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-muted);
    font-weight: 600;
    /* Text labels like "ganztägig" are wider than a HH:MM time — keep them
       fully visible and let the pill size to its content within the cell. */
    font-size: var(--font-size-xs);
    letter-spacing: 0;
    padding: 3px 8px;
    max-width: 100%;
}

/* ---------- Trip Detail preview: linked day cards + mini timeline ---------- */

.day-preview {
    display: block;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.day-preview__link {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-md);
}

.day-preview__link:focus-visible {
    outline: 2px solid var(--voyaly-color-primary-500);
    outline-offset: 3px;
}

.day-preview__link--static {
    cursor: default;
}

.day-preview--linked:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(29, 23, 16, 0.07);
    border-color: rgba(60, 50, 35, 0.14);
}

.day-preview--planned.day-preview--linked:hover {
    box-shadow: inset 3px 0 0 rgba(91, 101, 64, 0.4), 0 6px 16px rgba(29, 23, 16, 0.07);
}

.day-preview--linked:hover .day-preview__title-text {
    color: var(--voyaly-color-primary-600);
}

.day-preview--empty.day-preview--linked:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(60, 50, 35, 0.05);
}

.day-preview__timeline {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.2rem;
}

.day-preview__stop {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-2);
    min-width: 0;
    font-size: var(--font-size-sm);
    line-height: 1.35;
}

.day-preview__stop-time {
    flex-shrink: 0;
    min-width: 2.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: rgba(91, 101, 64, 0.1);
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--voyaly-color-primary-700, #4a5334);
    text-align: center;
}

.day-preview__stop-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--voyaly-text-secondary);
}

.day-preview__stop--more {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--voyaly-text-muted);
}

/* ---------- Day detail page ---------- */

.detail-view__eyebrow {
    margin: 0 0 4px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--voyaly-text-muted);
}

.day-detail {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.day-detail__timeline-section {
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.itinerary-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.itinerary-timeline__item {
    display: grid;
    grid-template-columns: 78px 18px minmax(0, 1fr);
    gap: var(--spacing-3);
}

.itinerary-timeline__time {
    padding-top: 1px;
}

.itinerary-timeline__marker {
    position: relative;
}

.itinerary-timeline__dot {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--voyaly-color-primary-500);
    box-shadow: 0 0 0 3px var(--voyaly-bg-card);
    z-index: 1;
}

.itinerary-timeline__item:not(:last-child) .itinerary-timeline__marker::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: var(--voyaly-border-soft);
}

.itinerary-timeline__content {
    min-width: 0;
    padding-bottom: var(--spacing-4);
}

.itinerary-timeline__item:last-child .itinerary-timeline__content {
    padding-bottom: 0;
}

.itinerary-timeline__title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--voyaly-text-primary);
    overflow-wrap: anywhere;
}

.itinerary-timeline__note {
    margin: 4px 0 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-secondary);
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.day-detail__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    text-align: center;
    padding: var(--spacing-5) var(--spacing-3);
}

.day-detail__empty-title {
    margin: 0;
    font-weight: 600;
    color: var(--voyaly-text-primary);
}

.day-detail__empty-text {
    margin: 0;
    max-width: 42ch;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted);
    line-height: 1.5;
}

.day-detail__empty .btn {
    margin-top: var(--spacing-2);
}

/* ---------- Day create/edit itinerary builder ---------- */

.itinerary-builder {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.itinerary-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.itinerary-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--voyaly-bg-subtle);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
}

.itinerary-row__main {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
}

.itinerary-row__activity {
    flex: 1 1 auto;
    min-width: 0;
    order: 1;
}

.itinerary-row__time {
    position: relative;
    flex: 0 0 auto;
    width: 148px;
    order: 2;
}

.itinerary-row__time-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--voyaly-text-muted);
    pointer-events: none;
}

.itinerary-row__time-icon svg {
    width: 16px;
    height: 16px;
}

.itinerary-row__time-input {
    padding-left: 32px;
}

.itinerary-row__remove {
    order: 3;
    flex: 0 0 auto;
    appearance: none;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--voyaly-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.itinerary-row__remove svg {
    width: 18px;
    height: 18px;
}

.itinerary-row__remove:hover,
.itinerary-row__remove:focus-visible {
    color: var(--voyaly-danger-600);
    background: rgba(157, 59, 59, 0.08);
}

.itinerary-empty {
    padding: var(--spacing-4);
    text-align: center;
    border: 1px dashed var(--voyaly-border-strong);
    border-radius: var(--radius-lg);
}

.itinerary-empty p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted);
}

.itinerary-add {
    align-self: flex-start;
}

@media (max-width: 640px) {
    .itinerary-row__main {
        flex-wrap: wrap;
    }
    .itinerary-row__time {
        width: 100%;
        order: 3;
    }
    .itinerary-row__remove {
        order: 2;
    }
    .itinerary-timeline__item {
        grid-template-columns: 70px 16px minmax(0, 1fr);
        gap: var(--spacing-2);
    }
}

/* ==========================================================================
   General UI refinements (Part A): control alignment + alert spacing
   ========================================================================== */

/* Inline control rows: inputs, selects and buttons share one calm height so
   a button never looks shorter/taller than the field beside it. */
.form__control-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--spacing-2);
}

.form__control-row .form__input,
.form__control-row .form__input--select,
.form__control-row .btn {
    min-height: var(--control-height);
}

.form__control-row .form__input {
    flex: 1 1 180px;
}

.form__control-row .btn {
    flex: 0 0 auto;
    padding-top: 0;
    padding-bottom: 0;
}

.alert--info {
    background: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-secondary);
}

/* ==========================================================================
   Flash toasts — fixed layer, never shifts document flow / onboarding targets
   z-index: above header (100) & notify panel (~1300), below onboarding (12000)
   ========================================================================== */

.flash-toast-layer {
    position: fixed;
    top: calc(var(--header-height) + 12px);
    right: 16px;
    z-index: 11000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

.flash-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: 14px 14px 14px 16px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--voyaly-border-soft);
    background: var(--voyaly-bg-card);
    box-shadow: 0 14px 32px rgba(29, 23, 16, 0.16);
    color: var(--voyaly-text-primary);
    animation: flash-toast-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.flash-toast--leaving {
    animation: flash-toast-out 200ms ease forwards;
}

.flash-toast__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 2px;
}

.flash-toast__body {
    flex: 1;
    min-width: 0;
}

.flash-toast__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 2px;
    color: var(--voyaly-text-muted);
}

.flash-toast__message {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.45;
    color: var(--voyaly-text-primary);
}

.flash-toast__close {
    appearance: none;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px -4px 0 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--voyaly-text-muted);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.flash-toast__close svg {
    width: 14px;
    height: 14px;
}

.flash-toast__close:hover,
.flash-toast__close:focus-visible {
    background: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-primary);
    outline: none;
}

.flash-toast--success {
    border-color: rgba(47, 107, 59, 0.22);
    background: linear-gradient(165deg, #f7fbf7, var(--voyaly-success-100));
}

.flash-toast--success .flash-toast__icon,
.flash-toast--success .flash-toast__label {
    color: var(--voyaly-success-600);
}

.flash-toast--error {
    border-color: rgba(161, 60, 60, 0.25);
    background: linear-gradient(165deg, #fff8f8, var(--voyaly-danger-100));
}

.flash-toast--error .flash-toast__icon,
.flash-toast--error .flash-toast__label {
    color: var(--voyaly-danger-600);
}

.flash-toast--warning {
    border-color: rgba(151, 90, 25, 0.25);
    background: linear-gradient(165deg, #fffaf2, var(--voyaly-warning-100));
}

.flash-toast--warning .flash-toast__icon,
.flash-toast--warning .flash-toast__label {
    color: var(--voyaly-warning-600);
}

.flash-toast--info {
    border-color: var(--voyaly-border-soft);
    background: linear-gradient(165deg, var(--voyaly-bg-elevated), var(--voyaly-bg-subtle));
}

.flash-toast--info .flash-toast__icon,
.flash-toast--info .flash-toast__label {
    color: var(--voyaly-info-600);
}

@keyframes flash-toast-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes flash-toast-out {
    to {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
}

@media (max-width: 640px) {
    .flash-toast-layer {
        top: calc(var(--header-height) + 8px);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(420px, calc(100vw - 24px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .flash-toast,
    .flash-toast--leaving {
        animation: none;
    }
}

/* Legacy empty wrapper safety (in case old markup remains cached). */
.flash-messages:empty {
    display: none;
}

/* Screen-reader-only utility. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Header notification center (Part C)
   ========================================================================== */

.header__notify {
    position: relative;
    display: inline-flex;
}

.header__notify-toggle {
    position: relative;
}

.header__notify-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--voyaly-danger-600, #c0492f);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--voyaly-bg-elevated);
}

.header__notify-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(360px, calc(100vw - 32px));
    z-index: 1300;
    background: var(--voyaly-bg-elevated);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px rgba(29, 23, 16, 0.18);
    overflow: hidden;
    animation: notifyIn 150ms ease;
}

.header__notify-panel[hidden] {
    display: none !important;
}

@keyframes notifyIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.header__notify-head {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--voyaly-border-soft);
}

.header__notify-title {
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-primary);
}

.header__notify-body {
    max-height: min(70vh, 440px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.notify-item {
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--voyaly-border-soft);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.notify-item:last-child {
    border-bottom: 0;
}

.notify-item__title {
    margin: 0;
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-primary);
}

.notify-item__text {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--voyaly-text-secondary);
}

.notify-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-top: var(--spacing-1);
}

.notify-item--verify {
    background: var(--voyaly-bg-subtle);
}

.notify-empty {
    padding: var(--spacing-6) var(--spacing-4);
    text-align: center;
    color: var(--voyaly-text-muted);
    font-size: var(--font-size-sm);
}

.notify-empty p {
    margin: 0;
}

/* ==========================================================================
   Trip current-day pill (Part E) + day past/today/future states (Part F)
   ========================================================================== */

.trip-hero__pill--today {
    background: var(--voyaly-color-accent-100, var(--voyaly-color-primary-100));
    color: var(--voyaly-color-primary-700);
    font-weight: 700;
}

/* Preview cards: calm completed look for past days, gentle highlight today. */
.day-preview--past {
    opacity: 0.72;
}

.day-preview--past:hover {
    opacity: 1;
}

.day-preview--future.day-preview--empty {
    opacity: 0.92;
}

.day-preview--today {
    background: var(--voyaly-color-primary-50, #f4f6ee);
    border-color: var(--voyaly-color-primary-200, #dbe3c6);
    box-shadow: inset 3px 0 0 var(--voyaly-color-primary-700, #4a5334);
}

.day-preview--today.day-preview--planned {
    box-shadow: inset 3px 0 0 var(--voyaly-color-primary-700, #4a5334);
}

.day-preview--today .day-preview__marker {
    background: var(--voyaly-color-primary-100, #e5ebd3);
    border-color: var(--voyaly-color-primary-200, #dbe3c6);
}

.day-preview--today .day-preview__marker-dow,
.day-preview--today .day-preview__marker-date {
    color: var(--voyaly-color-primary-700, #4a5334);
    font-weight: 700;
}

.day-preview--today .day-preview__day-no {
    color: var(--voyaly-color-primary-700, #4a5334);
}

/* Focused days list rows. */
.edit-item-row--past {
    opacity: 0.72;
}

.edit-item-row--today {
    box-shadow: inset 3px 0 0 var(--voyaly-color-primary-700);
    border-radius: var(--radius-md);
}

.edit-item-row--today .edit-item-row__date-formatted {
    color: var(--voyaly-color-primary-700);
    font-weight: 700;
}

/* Day detail header state badges. */
.day-state-badge {
    display: inline-flex;
    align-items: center;
    margin-left: var(--spacing-2);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.day-state-badge--today {
    background: var(--voyaly-color-primary-100);
    color: var(--voyaly-color-primary-700);
}

.day-state-badge--past {
    background: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-muted);
}

.day-state-badge--outside {
    background: var(--voyaly-color-warning-100, #fdf1e3);
    color: var(--voyaly-color-warning-700, #9a5b16);
}

/* Days that fall outside the current trip range (after date edits). */
.edit-item-row--outside {
    opacity: 0.85;
    box-shadow: inset 3px 0 0 var(--voyaly-color-warning-700, #9a5b16);
    border-radius: var(--radius-md);
}

.edit-item-row__day-no {
    font-weight: 700;
    color: var(--voyaly-color-primary-700);
    margin-right: 4px;
}

.edit-item-row__badge--outside {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--voyaly-color-warning-100, #fdf1e3);
    color: var(--voyaly-color-warning-700, #9a5b16);
}

/* ==========================================================================
   Destination autocomplete (trip create/edit)
   Mirrors the calm airport suggestion panel, without browser-native overlays.
   ========================================================================== */

.destination-suggest-wrap {
    position: relative;
    z-index: 1;
}

.destination-suggest-wrap--open {
    z-index: 1210;
}

.destination-suggest-wrap--open .form__input {
    border-color: var(--voyaly-border-primary);
    box-shadow: 0 0 0 1px rgba(54, 83, 60, 0.14);
}

.destination-suggest__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1220;
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--voyaly-bg-elevated), #f8f4ec);
    box-shadow: 0 14px 28px rgba(29, 23, 16, 0.14);
    overflow: hidden;
    transform-origin: top center;
    animation: destinationSuggestIn 150ms ease;
}

.destination-suggest__panel[hidden] {
    display: none !important;
    pointer-events: none !important;
}

@keyframes destinationSuggestIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.destination-suggest__list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.destination-suggest__item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: var(--spacing-3);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-2) var(--spacing-3);
    align-items: center;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.destination-suggest__item:hover,
.destination-suggest__item:focus-visible,
.destination-suggest__item--active {
    background: var(--voyaly-bg-body);
    outline: none;
}

.destination-suggest__item--active {
    background: var(--voyaly-color-primary-100);
}

.destination-suggest__pin {
    display: flex;
    color: var(--voyaly-color-primary-700);
}

.destination-suggest__pin svg {
    width: 18px;
    height: 18px;
}

.destination-suggest__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.destination-suggest__name {
    color: var(--voyaly-text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.destination-suggest__sub {
    color: var(--voyaly-text-muted);
    font-size: var(--font-size-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.destination-suggest__type {
    font-size: var(--font-size-xs);
    color: var(--voyaly-color-primary-700);
    background: var(--voyaly-color-primary-100);
    border-radius: var(--radius-full);
    padding: 2px 10px;
    white-space: nowrap;
}

.destination-suggest__empty {
    padding: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted);
}

/* Trip card image: subtle scrim keeps calm depth and avoids harsh edges. */
.trip-card__image {
    position: relative;
}

.trip-card__image-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(29, 23, 16, 0) 55%, rgba(29, 23, 16, 0.12) 100%);
}

/* ==========================================================================
   Onboarding tour — dimmed page + soft spotlight + cream coachmark
   ========================================================================== */

body.onboarding-tour-active,
html.onboarding-tour-active {
    overflow: hidden;
}

.onboarding-tour {
    position: fixed;
    inset: 0;
    z-index: 12000;
    pointer-events: none;
}

.onboarding-tour__overlay {
    position: absolute;
    inset: 0;
    background: rgba(29, 23, 16, 0.18);
    pointer-events: auto;
}

.onboarding-tour__highlight {
    position: fixed;
    z-index: 12001;
    border-radius: 16px;
    box-shadow:
        0 0 0 2px rgba(213, 240, 96, 0.55),
        0 0 0 9999px rgba(29, 23, 16, 0.58);
    background: transparent;
    pointer-events: none;
    transition:
        top 280ms cubic-bezier(0.22, 1, 0.36, 1),
        left 280ms cubic-bezier(0.22, 1, 0.36, 1),
        width 280ms cubic-bezier(0.22, 1, 0.36, 1),
        height 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-tour__card {
    position: fixed;
    z-index: 12002;
    pointer-events: auto;
    max-width: calc(100vw - 24px);
    padding: var(--spacing-5);
    border-radius: var(--radius-xl);
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    box-shadow: 0 18px 40px rgba(29, 23, 16, 0.22);
    color: var(--voyaly-text-primary);
}

.onboarding-tour__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-2);
}

.onboarding-tour__progress {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--voyaly-color-primary-600);
}

.onboarding-tour__title {
    margin: 0 0 var(--spacing-2);
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: var(--voyaly-color-primary-700);
    line-height: 1.25;
}

.onboarding-tour__body {
    margin: 0 0 var(--spacing-5);
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--voyaly-text-secondary);
}

.onboarding-tour__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    justify-content: flex-end;
}

.onboarding-tour__btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    padding: 0.55rem 1rem;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.onboarding-tour__btn:focus-visible {
    outline: 2px solid var(--voyaly-color-primary-600);
    outline-offset: 2px;
}

.onboarding-tour__btn--ghost {
    background: transparent;
    color: var(--voyaly-text-secondary);
    margin-right: auto;
}

.onboarding-tour__btn--ghost:hover {
    color: var(--voyaly-text-primary);
    background: var(--voyaly-bg-subtle);
}

.onboarding-tour__btn--outline {
    background: var(--voyaly-bg-elevated);
    border-color: var(--voyaly-border-soft);
    color: var(--voyaly-color-primary-700);
}

.onboarding-tour__btn--outline:hover:not(:disabled) {
    border-color: var(--voyaly-border-strong);
    background: var(--voyaly-color-primary-100);
}

.onboarding-tour__btn--outline:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.onboarding-tour__btn--primary {
    background: var(--voyaly-color-primary-600);
    border-color: var(--voyaly-color-primary-600);
    color: var(--voyaly-text-on-primary);
}

.onboarding-tour__btn--primary:hover {
    background: var(--voyaly-color-primary-700);
    border-color: var(--voyaly-color-primary-700);
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .onboarding-tour__card {
        left: 12px !important;
        right: 12px;
        width: auto !important;
        max-width: none;
        padding: var(--spacing-4);
    }

    .onboarding-tour__actions {
        gap: var(--spacing-2);
    }

    .onboarding-tour__btn {
        padding: 0.5rem 0.85rem;
    }

    .onboarding-tour__btn--ghost {
        width: 100%;
        margin-right: 0;
        order: 3;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .onboarding-tour__highlight,
    .onboarding-tour__btn {
        transition: none;
    }

    .onboarding-tour__btn--primary:hover {
        transform: none;
    }
}



/* ==========================================
   Day selector (photo upload)
   ========================================== */

.day-selector {
    margin-top: var(--spacing-2);
}

.day-selector__track {
    display: flex;
    gap: var(--spacing-3);
    overflow-x: auto;
    padding: var(--spacing-1) var(--spacing-1) var(--spacing-3);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.day-selector__card {
    position: relative;
    flex: 0 0 auto;
    width: 7.5rem;
    min-height: 6.5rem;
    padding: var(--spacing-3);
    border-radius: var(--radius-lg);
    background: var(--voyaly-bg-elevated, #faf7f2);
    border: 1px solid rgba(70, 78, 46, 0.12);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(40, 40, 20, 0.04));
    scroll-snap-align: start;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.day-selector__card:hover {
    border-color: rgba(70, 78, 46, 0.28);
}

.day-selector__card.is-selected,
.day-selector__card:has(.day-selector__input:checked) {
    border-color: var(--voyaly-olive, #5b6540);
    box-shadow: 0 0 0 2px rgba(91, 101, 64, 0.18);
    transform: translateY(-1px);
}

.day-selector__card--today {
    background: linear-gradient(180deg, #f7f3ea 0%, #f1ebe0 100%);
}

.day-selector__card--past {
    opacity: 0.88;
}

.day-selector__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.day-selector__number {
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--voyaly-olive, #5b6540);
}

.day-selector__weekday {
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted, #6b655c);
}

.day-selector__date {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--voyaly-text, #2f2a24);
}

.day-selector__title {
    margin-top: auto;
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted, #6b655c);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================
   Photo upload
   ========================================== */

.photo-upload__section {
    margin-bottom: var(--spacing-8);
}

.photo-upload__section-title {
    margin: 0 0 var(--spacing-3);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--voyaly-text, #2f2a24);
}

.photo-upload__quota {
    margin-bottom: var(--spacing-5);
}

.photo-upload__dropzone {
    position: relative;
    border: 1px dashed rgba(70, 78, 46, 0.28);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #faf7f2 0%, #f3eee5 100%);
    padding: var(--spacing-5);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.photo-upload__dropzone.is-dragover {
    border-color: var(--voyaly-olive, #5b6540);
    background: #f4f0e6;
}

.photo-upload__file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.photo-upload__drop-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    text-align: center;
    pointer-events: none;
    padding: var(--spacing-6) var(--spacing-3);
}

.photo-upload__drop-title {
    font-weight: 600;
    color: var(--voyaly-text, #2f2a24);
}

.photo-upload__drop-help {
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted, #6b655c);
}

.photo-upload__previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
}

.photo-upload__preview {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(70, 78, 46, 0.08);
}

.photo-upload__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================
   Photo journal gallery
   ========================================== */

.photo-journal {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.photo-journal__empty {
    text-align: center;
    padding: var(--spacing-10) var(--spacing-4);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, #faf7f2 0%, #f2ece3 100%);
    color: var(--voyaly-text-muted, #6b655c);
}

.photo-journal__empty p {
    margin: 0 0 var(--spacing-4);
}

.photo-journal__day-header {
    margin-bottom: var(--spacing-4);
}

.photo-journal__day-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-3);
    align-items: baseline;
    margin-bottom: var(--spacing-1);
}

.photo-journal__day-number {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--voyaly-olive, #5b6540);
}

.photo-journal__day-number--outside,
.photo-card__day--outside {
    color: #8a8174;
}

.photo-journal__day-date {
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted, #6b655c);
}

.photo-journal__day-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--voyaly-text, #2f2a24);
}

.photo-journal__note {
    margin: var(--spacing-3) 0 0;
    max-width: 40rem;
    font-size: var(--font-size-base);
    line-height: 1.55;
    color: var(--voyaly-text, #2f2a24);
    opacity: 0.9;
}

.photo-journal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: var(--spacing-3);
}

.photo-journal__tile {
    position: relative;
    margin: 0;
}

.photo-journal__thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(70, 78, 46, 0.08);
    cursor: zoom-in;
    aspect-ratio: 1;
}

.photo-journal__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.photo-journal__thumb:hover img {
    transform: scale(1.03);
}

.photo-journal__actions {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.photo-journal__tile:hover .photo-journal__actions,
.photo-journal__tile:focus-within .photo-journal__actions {
    opacity: 1;
}

.photo-journal__action,
.photo-journal__action-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: rgba(250, 247, 242, 0.94);
    color: var(--voyaly-text, #2f2a24);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(40, 40, 20, 0.08));
    cursor: pointer;
}

.photo-journal__action svg,
.photo-journal__action-form button svg {
    width: 1rem;
    height: 1rem;
}

.photo-journal__action--danger {
    color: #8a3b2d;
}

.shared-trip--photos .photo-journal {
    margin-top: var(--spacing-6);
}

@media (max-width: 640px) {
    .photo-journal__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-2);
    }

    .photo-journal__actions {
        opacity: 1;
    }

    .day-selector__card {
        width: 6.75rem;
        min-height: 6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .day-selector__card,
    .photo-journal__thumb img {
        transition: none;
    }
}

/* ==========================================
   Photo day cards (folders/stacks)
   ========================================== */

.photo-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--spacing-4);
}

.photo-cards__empty {
    text-align: center;
    padding: var(--spacing-8) var(--spacing-4);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, #faf7f2 0%, #f2ece3 100%);
    color: var(--voyaly-text-muted, #6b655c);
}

.photo-cards__empty p {
    margin: 0 0 var(--spacing-4);
}

/* Soft separator for photo groups outside the current trip range. */
.photo-cards-outside {
    margin-top: var(--spacing-5);
}

.photo-cards-outside__divider {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.photo-cards-outside__divider::before,
.photo-cards-outside__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(90, 80, 65, 0.14);
}

.photo-cards-outside__label {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8174;
}

.photo-cards--outside .photo-card,
.photo-card--outside {
    opacity: 0.78;
}

.photo-cards--outside .photo-card:hover,
.photo-card--outside:hover {
    opacity: 1;
}

.photo-cards--outside .photo-card__stack,
.photo-card--outside .photo-card__stack {
    background: #e8e2d8;
}

.photo-cards--outside .photo-card__stack::before,
.photo-card--outside .photo-card__stack::before {
    background: #efe9df;
}

.photo-cards--outside .photo-card__cover,
.photo-card--outside .photo-card__cover {
    filter: saturate(0.88);
}

.photo-journal__day--outside {
    opacity: 0.82;
}

.photo-cards-outside--journal {
    margin-top: var(--spacing-6);
}

.photo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-lg);
}

/* Layered "stack of photos" effect behind the cover. */
.photo-card__stack {
    position: absolute;
    top: -6px;
    left: 8px;
    right: 8px;
    height: 60%;
    border-radius: var(--radius-lg);
    background: #efe7db;
    box-shadow: 0 1px 2px rgba(40, 40, 20, 0.08);
    transform: rotate(-1.4deg);
    transition: transform 0.18s ease;
    z-index: 0;
}

.photo-card__stack::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: #f4eee4;
    transform: translate(4px, -4px) rotate(2deg);
    z-index: -1;
}

.photo-card__cover {
    position: relative;
    z-index: 1;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(70, 78, 46, 0.08);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(40, 40, 20, 0.12));
}

.photo-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.photo-card:hover .photo-card__cover img {
    transform: scale(1.03);
}

.photo-card:hover .photo-card__stack {
    transform: rotate(-2.6deg) translateY(-1px);
}

.photo-card__badge {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(30, 28, 22, 0.72);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 600;
    backdrop-filter: blur(2px);
}

.photo-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: var(--spacing-3) 0.15rem 0;
}

.photo-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: baseline;
}

.photo-card__day {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--voyaly-olive, #5b6540);
}

.photo-card__date {
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted, #6b655c);
}

.photo-card__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--voyaly-text, #2f2a24);
}

.photo-card__note {
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted, #6b655c);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================
   Photo day gallery overlay
   ========================================== */

.photo-day-gallery__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        "stage header"
        "stage thumbs";
    gap: var(--spacing-4);
    align-items: stretch;
    /* Fixed visual size so the viewer never resizes with the image. */
    width: min(100% - 48px, 1100px);
    height: min(100vh - 72px, 760px);
    padding: var(--spacing-4);
    background: rgba(26, 24, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(8px);
}

.photo-day-gallery__close {
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3);
}

/* Header is anchored top-right (or top on mobile), always left-aligned. */
.photo-day-gallery__header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align: left;
    padding-right: 2.5rem;
    min-width: 0;
}

.photo-day-gallery__day {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}

.photo-day-gallery__date {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.78);
}

.photo-day-gallery__count {
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6);
}

.photo-day-gallery__note {
    margin: var(--spacing-2) 0 0;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.photo-day-gallery__stage {
    grid-area: stage;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.photo-day-gallery__figure {
    margin: 0;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3);
}

.photo-day-gallery__figure img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
}

/* Keep nav arrows inside the stage rather than at the screen edges. */
.photo-day-gallery .media-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
}

.photo-day-gallery .media-lightbox__nav--prev {
    left: var(--spacing-3);
}

.photo-day-gallery .media-lightbox__nav--next {
    right: var(--spacing-3);
}

.photo-day-gallery__thumbs {
    grid-area: thumbs;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr));
    gap: var(--spacing-2);
    align-content: start;
    overflow-y: auto;
    padding-right: 2px;
}

.photo-day-gallery__thumb {
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.12);
    opacity: 0.7;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.photo-day-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-day-gallery__thumb.is-active,
.photo-day-gallery__thumb:hover {
    opacity: 1;
    border-color: #fff;
}

@media (max-width: 860px) {
    .photo-day-gallery__panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "header"
            "stage"
            "thumbs";
        gap: var(--spacing-3);
        width: calc(100% - 24px);
        height: calc(100vh - 32px);
    }

    .photo-day-gallery__thumbs {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 3.25rem;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: 4rem;
    }
}

/* ==========================================
   Photo upload — existing photos + counter
   ========================================== */

.photo-upload__existing {
    border-radius: var(--radius-lg);
    background: #f7f3ea;
    padding: var(--spacing-3);
}

.photo-upload__existing-hint {
    margin: 0 0 var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted, #6b655c);
}

.photo-upload__existing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: var(--spacing-2);
}

.photo-upload__existing-item {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(70, 78, 46, 0.08);
}

.photo-upload__existing-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-upload__existing-empty {
    font-size: var(--font-size-sm);
    color: var(--voyaly-text-muted, #6b655c);
}

.photo-upload__counter {
    margin-top: var(--spacing-2);
    font-variant-numeric: tabular-nums;
}

.photo-upload__counter.is-warning {
    color: #a15c2b;
    font-weight: 600;
}

@media (max-width: 640px) {
    .photo-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .photo-card__stack,
    .photo-card__cover img {
        transition: none;
    }
}

/* ==========================================
   OAuth / Social sign-in
   ========================================== */

.oauth-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
}

.btn--google {
    background: var(--voyaly-bg-elevated);
    color: var(--voyaly-text-primary);
    border: 1px solid var(--voyaly-border-strong);
    gap: var(--spacing-3);
    font-weight: 600;
}

.btn--google:hover,
.btn--google:focus-visible {
    background: var(--voyaly-bg-card);
    border-color: var(--voyaly-text-muted);
    color: var(--voyaly-text-primary);
}

.btn--google__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.btn--google__label {
    line-height: 1;
}

.oauth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--voyaly-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.oauth-divider::before,
.oauth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--voyaly-border-soft);
}

.oauth-divider span {
    padding: 0 var(--spacing-3);
}

/* ==========================================
   Invitation landing page
   ========================================== */

.invite-landing-wrap {
    display: flex;
    justify-content: center;
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-12);
}

.invite-landing {
    width: 100%;
    max-width: 460px;
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-8) var(--spacing-7);
    text-align: center;
}

.invite-landing__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--spacing-5);
    border-radius: var(--radius-full);
    background: var(--voyaly-color-primary-100);
    color: var(--voyaly-color-primary-600);
}

.invite-landing__icon svg {
    width: 32px;
    height: 32px;
}

.invite-landing__icon--muted {
    background: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-muted);
}

.invite-landing__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--voyaly-text-muted);
    margin: 0 0 var(--spacing-2);
}

.invite-landing__title {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 var(--spacing-4);
    color: var(--voyaly-text-primary);
}

.invite-landing__trip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.invite-landing__trip-name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--voyaly-color-primary-700);
}

.invite-landing__role {
    align-self: center;
}

.invite-landing__subtitle {
    color: var(--voyaly-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    max-width: 36ch;
    margin: 0 auto var(--spacing-6);
}

.invite-landing__cta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.invite-landing__cta .oauth-options {
    margin-bottom: 0;
}

.invite-landing__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.invite-landing__form {
    margin: 0;
}

.invite-landing__hint {
    margin: var(--spacing-5) 0 0;
    font-size: var(--font-size-xs);
    color: var(--voyaly-text-muted);
}

.invite-landing--muted {
    background: var(--voyaly-bg-elevated);
}

@media (min-width: 640px) {
    .invite-landing__actions {
        flex-direction: row;
    }
    .invite-landing__actions .btn {
        flex: 1;
    }
}

/* ==========================================
   Responsive / Mobile UX polish (global)
   Calm, app-like behaviour without breaking desktop.
   ========================================== */

html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
}

.container,
.header__inner,
.main,
.auth-container,
.auth-card,
.trip-hero,
.trip-section-block,
.overview-grid,
.trip-card,
.modal__content,
.invite-landing {
    min-width: 0;
}

/* Long text: clamp titles in overviews, wrap safely elsewhere. */
.trip-card__title,
.overview-header__title,
.trip-hero__title,
.page-header__title,
.auth-title,
.invite-landing__title,
.invite-landing__trip-name {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.trip-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trip-card__destination,
.trip-hero__pill,
.notify-item__text strong {
    overflow-wrap: anywhere;
}

.header__username,
.trip-sharing__url-input,
.form__input {
    max-width: 100%;
}

.trip-sharing__url-input,
input[readonly].form__input {
    text-overflow: ellipsis;
}

/* Comfortable touch targets for icon controls. */
.btn--icon,
.btn--icon.btn--small,
.packing-item__actions .btn,
.document-card__actions .btn,
.media-card__actions .btn {
    min-width: 40px;
    min-height: 40px;
}

.form__actions {
    flex-wrap: wrap;
}

.form__actions .btn {
    min-height: 44px;
}

@media (max-width: 640px) {
    .main {
        padding: var(--spacing-5) 0 var(--spacing-10);
    }

    .container {
        padding-left: var(--spacing-3);
        padding-right: var(--spacing-3);
    }

    /* Forms: always stack two-column rows on phones. */
    .form__row {
        grid-template-columns: 1fr;
    }

    .form__input,
    .form__select,
    select.form__input,
    textarea.form__input {
        width: 100%;
        max-width: 100%;
        font-size: 16px; /* prevent iOS zoom */
    }

    .form__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .form__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .form__label-row {
        flex-wrap: wrap;
    }

    /* Page headers / breadcrumbs */
    .page-header {
        gap: var(--spacing-3);
    }

    .page-header__actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-2);
    }

    .page-header__actions .btn {
        flex: 1 1 auto;
        min-height: 44px;
        justify-content: center;
    }

    .breadcrumb {
        flex-wrap: wrap;
        row-gap: var(--spacing-1);
        font-size: var(--font-size-xs);
    }

    /* Trip overview */
    .trip-card__meta {
        flex-wrap: wrap;
        gap: var(--spacing-2);
    }

    .trip-card__badge-row {
        flex-wrap: wrap;
        gap: var(--spacing-2);
    }

    /* Trip detail hero */
    .trip-hero__title {
        font-size: clamp(1.35rem, 6vw, 1.75rem);
        line-height: 1.25;
    }

    .trip-hero__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-2);
    }

    .trip-hero__pill {
        max-width: 100%;
        white-space: normal;
        line-height: 1.35;
    }

    .trip-hero__summary {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-2) var(--spacing-3);
    }

    .trip-hero__summary span {
        white-space: normal;
    }

    .trip-hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-2);
        justify-content: flex-end;
    }

    .trip-hero__actions .btn,
    .trip-utility-action {
        min-width: 36px;
        min-height: 36px;
    }

    .trip-section-block__header {
        width: 100%;
        flex-direction: row;
        align-items: center;
    }

    .trip-section-block__actions {
        width: auto;
        flex-shrink: 0;
        display: flex;
        flex-wrap: nowrap;
        gap: var(--spacing-1);
    }

    .trip-section-block__actions .btn,
    .trip-section-block__edit-action {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        padding: 0;
    }

    /* Essentials / boarding / accommodation cards */
    .trip-essentials,
    .travel-essentials {
        grid-template-columns: 1fr !important;
    }

    /* Day preview rows */
    .day-preview__row,
    .day-preview-item {
        min-width: 0;
    }

    /* Packing */
    .packing-overview__stats {
        grid-template-columns: 1fr;
    }

    .packing-item {
        align-items: flex-start;
    }

    .packing-item__name,
    .packing-item__label {
        overflow-wrap: anywhere;
        min-width: 0;
    }

    /* Documents / media */
    .document-card,
    .media-card,
    .gallery-tile {
        min-width: 0;
    }

    .document-card__name,
    .media-card__caption {
        overflow-wrap: anywhere;
    }

    /* Edit item lists (flights, accommodations, days) */
    .edit-item-row {
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--spacing-2);
        padding: var(--spacing-3);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .edit-item-row__main,
    .edit-item-row__content {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .edit-item-row__actions {
        width: auto;
        max-width: none;
        margin-left: 0;
        flex: 0 0 auto;
        opacity: 1;
    }

    .edit-item-row__name,
    .edit-item-row__meta {
        min-width: 0;
        max-width: 100%;
    }

    .edit-item-row__badge {
        display: inline-block;
        max-width: 7rem;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: baseline;
    }

    /* Sharing invite row */
    .trip-sharing__invite-row {
        flex-direction: column;
        align-items: stretch;
    }

    .trip-sharing__invite-role {
        width: 100%;
        min-width: 0;
    }

    .trip-sharing__url-row {
        flex-wrap: wrap;
    }

    .trip-sharing__url-row .btn {
        flex: 1 1 auto;
        min-height: 44px;
    }

    /* Notifications: full-width sheet under header on small phones */
    .header__notify-panel {
        position: fixed;
        top: calc(var(--header-height) + 8px);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - var(--header-height) - 24px);
        border-radius: var(--radius-xl);
    }

    .header__notify-body {
        max-height: min(65dvh, 420px);
    }

    .notify-item__actions {
        flex-direction: column;
    }

    .notify-item__actions .btn,
    .notify-item__actions form {
        width: 100%;
    }

    .notify-item__actions form .btn {
        width: 100%;
        min-height: 44px;
    }

    /* Account menu */
    .header__account-panel {
        right: 0;
        width: min(240px, calc(100vw - 16px));
    }

    /* Auth */
    .auth-page {
        padding: var(--spacing-4) var(--spacing-3);
        align-items: flex-start;
    }

    .auth-card {
        padding: var(--spacing-6) var(--spacing-4);
        border-radius: var(--radius-xl);
        width: 100%;
    }

    .auth-subtitle {
        max-width: none;
    }

    /* Email verify banner */
    .email-verify-banner__inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-2);
        text-align: left;
    }

    .email-verify-banner__btn {
        width: 100%;
        min-height: 40px;
    }

    /* Invite landing */
    .invite-landing-wrap {
        padding-top: var(--spacing-4);
        padding-bottom: var(--spacing-8);
    }

    .invite-landing {
        padding: var(--spacing-6) var(--spacing-4);
    }

    /* Packing suggest modal as bottom sheet */
    .packing-suggest-modal {
        align-items: flex-end;
        padding: 0;
    }

    .packing-suggest-modal__dialog {
        width: 100%;
        max-width: 100%;
        max-height: min(90dvh, calc(100dvh - 12px));
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        margin: 0;
    }

    .packing-suggest-modal__actions {
        flex-direction: column-reverse;
    }

    .packing-suggest-modal__actions .btn {
        width: 100%;
        min-height: 44px;
    }

    /* Photo day gallery already stacks ≤860; tighten gutters */
    .photo-day-gallery__panel {
        width: calc(100% - 16px) !important;
        height: calc(100dvh - 24px) !important;
        max-height: calc(100dvh - 24px);
    }

    /* Buttons in tight rows may wrap label when needed */
    .trip-section-block__actions .btn,
    .page-header__actions .btn,
    .form__actions .btn {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    /* Guest header: keep both actions but compact */
    .header__guest-login,
    .header__guest-register {
        min-height: 36px;
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 390px) {
    .header__guest-register {
        padding-left: var(--spacing-2);
        padding-right: var(--spacing-2);
    }

    .invite-landing__title {
        font-size: var(--font-size-xl);
    }
}

@media (min-width: 641px) and (max-width: 860px) {
    .photo-day-gallery__panel {
        width: min(100% - 32px, 980px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header__account-panel,
    .confirm-modal__dialog {
        animation: none;
    }
}

/* ==========================================
   Mobile densification (app-like compactness)
   Scoped to phones — desktop stays premium/roomy.
   ========================================== */

@media (max-width: 640px) {
    /* --- Typography & page rhythm --- */
    .main {
        padding: var(--spacing-4) 0 var(--spacing-8);
    }

    .page-header {
        gap: var(--spacing-2);
        margin-bottom: var(--spacing-4);
    }

    .page-header__title,
    .overview-header__title,
    .trip-focus__title,
    .packing-overview-page__title {
        font-size: clamp(1.25rem, 5.5vw, 1.55rem);
        line-height: 1.2;
        margin-bottom: var(--spacing-1);
    }

    .page-header__subtitle,
    .overview-header__subtitle,
    .trip-focus__subtitle,
    .auth-subtitle,
    .form__help,
    .trip-section-block__subtitle {
        font-size: 0.8125rem;
        line-height: 1.4;
        margin-top: 0;
    }

    .breadcrumb {
        margin-bottom: var(--spacing-2);
        font-size: 0.7rem;
        gap: 0.25rem;
    }

    .footer {
        padding: var(--spacing-4) 0;
    }

    .footer__inner {
        gap: var(--spacing-2);
    }

    .footer__line {
        font-size: 0.7rem;
        line-height: 1.35;
    }

    /* Slightly calmer global action heights — still tappable */
    .form__actions .btn,
    .page-header__actions .btn,
    .trip-focus__actions .btn {
        min-height: 40px;
    }

    .trip-section-block__actions .btn,
    .trip-section-block__edit-action {
        min-width: 36px;
        min-height: 36px;
        width: 36px;
        height: 36px;
        padding: 0;
    }

    .btn--icon,
    .btn--icon.btn--small,
    .packing-item__actions .btn,
    .document-card__actions .btn,
    .media-card__actions .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
        line-height: 1;
        padding: 0;
    }

    .btn--icon svg,
    .btn--icon .btn__icon,
    .packing-item__actions .btn svg,
    .document-card__actions .btn svg,
    .media-card__actions .btn svg {
        display: block;
        width: 16px;
        height: 16px;
    }

    /* --- Header icons --- */
    .header {
        --header-height: 56px;
    }

    .header__logo img {
        height: 30px;
    }

    .header-trips-link,
    .app-header__packing-action,
    .header__utility-link {
        width: 36px;
        height: 36px;
        border-radius: 999px;
    }

    .app-header__packing-action {
        flex-shrink: 0;
        aspect-ratio: 1 / 1;
        padding: 0;
        margin-right: 0;
    }

    .app-header__packing-action::after {
        display: none;
        content: none;
    }

    .header__actions-divider {
        display: inline-block;
        height: 16px;
        margin: 0 3px;
        background: var(--voyaly-border-strong);
        opacity: 0.55;
    }

    .header-trips-link__icon svg,
    .app-header__packing-icon svg,
    .header__utility-icon {
        width: 16px;
        height: 16px;
    }

    .header__account-toggle {
        min-height: 36px;
        padding: 0.15rem;
    }

    .header__account-toggle .avatar--sm {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    /* --- Trip overview --- */
    .overview-header {
        gap: var(--spacing-2);
        margin-bottom: var(--spacing-4);
    }

    .overview-header__action .btn,
    .overview-header__action .create-trip-cta {
        min-height: 40px;
        padding: 0.55rem 1rem;
        font-size: 0.9rem;
    }

    .overview-controls {
        gap: var(--spacing-2);
        margin-bottom: var(--spacing-3);
        width: 100%;
    }

    .overview-search,
    .overview-search__input {
        width: 100%;
        min-height: 38px;
    }

    .trip-card__body {
        padding: var(--spacing-3);
    }

    .trip-card__title {
        font-size: 1.05rem;
        line-height: 1.25;
        margin-bottom: 0.35rem;
    }

    /* --- Trip Detail hero --- */
    .trip-hero__body {
        padding: var(--spacing-3) var(--spacing-3) var(--spacing-3);
    }

    .trip-hero__top {
        flex-direction: row;
        margin-bottom: var(--spacing-2);
        gap: var(--spacing-2);
        align-items: center;
    }

    .trip-hero__badges {
        gap: 0.35rem;
        flex: 1 1 auto;
        min-width: 0;
    }

    .trip-hero__badges .badge,
    .trip-hero__badges .badge--role {
        font-size: 0.62rem;
        padding: 0.18rem 0.45rem;
        letter-spacing: 0.03em;
    }

    .trip-hero__actions {
        gap: 0.3rem;
        flex-shrink: 0;
    }

    .trip-hero__actions .btn,
    .trip-utility-action,
    .trip-leave-action {
        min-width: 34px;
        min-height: 34px;
        width: 34px;
        height: 34px;
        padding: 0;
    }

    .trip-leave-action {
        width: auto;
        min-width: 0;
        height: 34px;
        padding: 0 0.65rem;
        font-size: 0.72rem;
        white-space: nowrap;
        line-height: 1;
    }

    .trip-hero__title {
        font-size: clamp(1.2rem, 5.2vw, 1.5rem);
        margin: 0 0 0.7rem;
        line-height: 1.2;
    }

    .trip-hero__subtitle {
        font-size: 0.8rem;
        line-height: 1.35;
        margin: 0 0 0.75rem;
    }

    .trip-hero__meta {
        gap: 0.35rem;
        margin-bottom: var(--spacing-3);
    }

    .trip-hero__pill {
        font-size: 0.7rem;
        padding: 0.15rem 0.45rem;
        line-height: 1.3;
    }

    .trip-hero__summary {
        gap: 0.25rem 0.65rem;
        padding-top: var(--spacing-2);
        font-size: 0.7rem;
        line-height: 1.35;
    }

    .trip-detail {
        gap: var(--spacing-3);
    }

    .trip-section-block {
        padding: var(--spacing-3);
        margin-bottom: var(--spacing-3);
    }

    .trip-section-block__header {
        gap: var(--spacing-2);
        margin-bottom: var(--spacing-2);
    }

    .trip-section-block__empty {
        padding: var(--spacing-4) var(--spacing-3);
    }

    .trip-section-block__actions .btn {
        min-height: 36px;
        font-size: 0.8rem;
    }

    .boarding-pass,
    .boarding-pass--empty {
        padding: var(--spacing-3);
    }

    .boarding-pass__code {
        font-size: 1.15rem;
    }

    .boarding-pass__empty-title {
        font-size: 0.95rem;
        margin-bottom: 0.35rem;
    }

    .boarding-pass__empty-text {
        font-size: 0.78rem;
        line-height: 1.4;
        margin-bottom: var(--spacing-3);
    }

    /* Day preview denser */
    .day-preview__row,
    .day-preview-item {
        padding: 0.55rem 0.65rem;
        gap: 0.65rem;
    }

    /* --- Edit lists (flights / accommodations / packing / days) --- */
    .edit-item-group {
        margin-bottom: var(--spacing-2);
    }

    .edit-item-group__header {
        gap: var(--spacing-2);
        padding: 0.25rem 0;
        flex-wrap: nowrap;
        align-items: center;
    }

    .edit-item-group__title {
        font-size: 0.85rem;
    }

    .edit-item-list {
        gap: 0.35rem;
    }

    .edit-item-row {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 0.65rem;
    }

    .edit-item-row__name {
        font-size: 0.875rem;
        line-height: 1.3;
    }

    .edit-item-row__meta {
        font-size: 0.72rem;
    }

    .edit-item-row__action {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .trip-focus {
        padding: var(--spacing-3);
        gap: var(--spacing-3);
    }

    .trip-focus__header {
        gap: var(--spacing-2);
        margin-bottom: var(--spacing-2);
    }

    .trip-focus__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .trip-focus__actions .btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-height: 34px;
        padding: 0.4rem 0.6rem;
        font-size: 0.78rem;
    }

    .trip-focus__actions .packing-add-action,
    .trip-focus__actions .btn--primary {
        flex: 1 1 100%;
        min-height: 38px;
    }

    .edit-item-row__content {
        flex: 1 1 auto;
        min-width: 0;
    }

    .packing-suggest-open {
        padding: 0.3rem 0.55rem;
        min-height: 32px;
    }

    .packing-suggest-open__label--full {
        display: none;
    }

    .packing-suggest-open__label--short {
        display: inline;
    }

    .packing-plan__category {
        padding: var(--spacing-2);
    }

    .packing-plan__item {
        padding: 0.4rem 0.55rem;
    }

    .packing-item {
        padding: 0.55rem 0.65rem;
    }

    /* Suggestion modal denser + sticky footer */
    .packing-suggest-modal__dialog {
        padding: var(--spacing-3) var(--spacing-3) 0;
        max-height: min(88dvh, calc(100dvh - 8px));
    }

    .packing-suggest-modal__header {
        margin-bottom: 0;
        gap: var(--spacing-2);
    }

    .packing-suggest-modal__eyebrow {
        margin-bottom: 0;
        font-size: 0.62rem;
    }

    .packing-suggest-modal__title {
        font-size: 1.05rem;
    }

    .packing-suggest-modal__help {
        margin: 0.45rem 0 0.65rem;
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .packing-suggest-modal__list {
        gap: 0.25rem;
        max-height: none;
        flex: 1;
        margin-bottom: 0;
        padding-bottom: var(--spacing-2);
    }

    .packing-suggest-modal__form {
        min-height: 0;
    }

    .packing-suggest-check {
        padding: 0.45rem 0.55rem;
        min-height: 40px;
    }

    .packing-suggest-modal__actions {
        position: sticky;
        bottom: 0;
        flex-direction: row;
        gap: 0.5rem;
        padding: var(--spacing-3) 0 calc(var(--spacing-3) + env(safe-area-inset-bottom, 0));
        background: linear-gradient(180deg, rgba(250, 247, 242, 0) 0%, #faf7f2 28%);
        margin-top: auto;
    }

    .packing-suggest-modal__actions .btn {
        flex: 1;
        min-height: 40px;
        width: auto;
    }

    /* Add-item form + floating suggest panels → mobile panels */
    .form__group {
        gap: 0.4rem;
        margin-bottom: 0;
    }

    .form,
    .auth-form {
        gap: 1.25rem;
    }

    .form__label {
        font-size: 0.8125rem;
        margin-bottom: 0;
    }

    .form__help,
    .form__hint,
    .form__error {
        margin-top: 0;
    }

    .form__row {
        gap: 0.9rem;
    }

    .form__actions {
        padding-top: 1.35rem;
        margin-top: 0.15rem;
        gap: var(--spacing-2);
    }

    .form__section-heading {
        margin: 1rem 0 0.9rem;
        padding-top: 0.9rem;
    }

    .form__input,
    .form__select,
    select.form__input,
    textarea.form__input {
        min-height: 42px;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
        font-size: 1rem; /* avoid iOS zoom */
    }

    .packing-suggest {
        position: fixed;
        left: 12px;
        right: 12px;
        top: auto;
        bottom: max(12px, env(safe-area-inset-bottom, 0px));
        max-height: min(48dvh, 340px);
        border-radius: var(--radius-xl);
        box-shadow: 0 18px 40px rgba(29, 23, 16, 0.22);
        z-index: 1225;
        transform-origin: bottom center;
    }

    .packing-suggest__header {
        padding: 0.45rem 0.75rem;
        font-size: 0.68rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-weight: 700;
    }

    .packing-suggest__list {
        max-height: min(40dvh, 280px);
    }

    .packing-suggest__item {
        padding: 0.65rem 0.75rem;
        min-height: 42px;
        align-items: center;
    }

    .packing-suggest__name {
        font-size: 0.875rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .packing-suggest__cat {
        max-width: 36%;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 0;
    }

    .packing-suggest-backdrop {
        background: rgba(28, 26, 21, 0.28);
        backdrop-filter: blur(1.5px);
        -webkit-backdrop-filter: blur(1.5px);
    }

    .combobox__panel {
        left: 0;
        right: 0;
        width: 100%;
        max-height: min(42dvh, 280px);
        border-radius: var(--radius-lg);
    }

    .combobox__option {
        padding: 0.65rem 0.75rem;
        min-height: 42px;
    }

    .destination-suggest__panel,
    .airport-suggest {
        position: fixed;
        left: 12px;
        right: 12px;
        top: auto;
        bottom: max(12px, env(safe-area-inset-bottom, 0px));
        max-height: min(48dvh, 340px);
        border-radius: var(--radius-xl);
        z-index: 1225;
        box-shadow: 0 18px 40px rgba(29, 23, 16, 0.22);
    }

    .destination-suggest__list,
    .airport-suggest__list {
        max-height: min(40dvh, 280px);
    }

    .destination-suggest__item,
    .airport-suggest__item {
        padding: 0.65rem 0.75rem;
        min-height: 42px;
    }

    /* --- Flight / accommodation result cards --- */
    .flight-result {
        padding: var(--spacing-3);
        gap: var(--spacing-2);
        border-radius: var(--radius-lg);
    }

    .flight-result__code {
        font-size: 1.15rem;
    }

    .flight-result__time {
        font-size: 0.875rem;
    }

    .flight-result__city,
    .flight-result__secondary,
    .flight-result__meta {
        font-size: 0.7rem;
        line-height: 1.35;
    }

    .flight-result__cta {
        margin-top: 0;
        padding: 0.3rem 0.7rem;
        font-size: 0.65rem;
        align-self: stretch;
        text-align: center;
    }

    .flight-flow__results-panel {
        padding: var(--spacing-3);
    }

    .flight-flow__results-header {
        margin-bottom: var(--spacing-2);
        gap: var(--spacing-2);
    }

    .flight-flow__results-title {
        font-size: 1rem;
    }

    .flash-toast-layer {
        top: calc(var(--header-height) + 6px);
    }

    .flash-toast {
        padding: 0.65rem 0.75rem;
    }

    .flash-toast__message {
        font-size: 0.8rem;
        line-height: 1.35;
    }
}

@media (max-width: 364px) {
    .trip-leave-action {
        font-size: 0.68rem;
        padding: 0 0.5rem;
    }

    .overview-filter {
        font-size: 0.72rem;
        padding: 0.4rem 0.2rem;
    }

    .trip-hero__actions .btn,
    .trip-utility-action {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }

    .header-trips-link,
    .app-header__packing-action,
    .header__utility-link {
        width: 34px;
        height: 34px;
    }
}

/* ===========================================
   MOBILE UI CONSISTENCY PASS (regression fix)
   High-specificity overrides after densification.
   Desktop rules above remain authoritative outside these queries.
   =========================================== */

@media (max-width: 640px) {
    /* --- Spacing rhythm --- */
    .main {
        padding-top: var(--spacing-4);
        padding-bottom: var(--spacing-8);
    }

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .breadcrumb {
        margin-bottom: 12px;
    }

    .trip-detail {
        gap: 16px;
    }

    .trip-section-block {
        padding: 16px;
        margin-bottom: 0;
        border-radius: var(--radius-lg);
        box-shadow: 0 8px 20px rgba(29, 23, 16, 0.06);
        border: 1px solid var(--voyaly-border-soft);
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .trip-section-block__header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .trip-section-block__title-group {
        flex: 1 1 auto;
        min-width: 0;
    }

    .trip-section-block__actions {
        width: auto !important;
        flex: 0 0 auto;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        margin-left: auto;
    }

    .trip-section-block__actions .btn,
    .trip-section-block__edit-action {
        flex: 0 0 auto !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        line-height: 1;
    }

    .trip-section-block__actions .btn svg,
    .trip-section-block__edit-action svg,
    .trip-section-block__edit-action .btn__icon {
        display: block;
        width: 16px;
        height: 16px;
    }

    /* Subtle section tints remain; ensure elevation parity */
    .trip-section-block--flight,
    .trip-section-block--stay,
    .trip-section-block--planning,
    .trip-section-block--packing,
    .trip-section-block--documents,
    .trip-section-block--media,
    .trip-section-block--light,
    .trip-section-block--travel {
        box-shadow: 0 8px 20px rgba(29, 23, 16, 0.06);
    }

    .trip-section-block--packing {
        box-shadow: 0 10px 24px rgba(29, 23, 16, 0.08);
    }

    /* --- Hero: badges left, actions right, no empty column --- */
    .trip-hero__top {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
    }

    .trip-hero__badges {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    .trip-hero__actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        flex: 0 0 auto;
        align-self: center;
        margin: 0;
        width: auto;
    }

    .trip-hero__actions .btn,
    .trip-utility-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        max-width: 40px;
        max-height: 40px;
        padding: 0;
        line-height: 1;
        border-radius: 999px;
    }

    .trip-hero__actions .btn svg,
    .trip-utility-action svg,
    .trip-utility-action .btn__icon {
        display: block;
        width: 16px;
        height: 16px;
    }

    .trip-hero__title {
        margin-top: 0;
        margin-bottom: 0.7rem;
    }

    .trip-hero__subtitle {
        margin-top: 0;
        margin-bottom: 0.75rem;
    }

    /* --- Button system (mobile) --- */
    .btn:not(.btn--icon):not(.edit-item-row__action):not(.trip-utility-action):not(.trip-section-block__edit-action) {
        min-height: 40px;
        padding: 0.55rem 0.95rem;
        font-size: 0.875rem;
        border-radius: var(--radius-lg);
        line-height: 1.1;
    }

    .btn--small:not(.btn--icon) {
        min-height: 36px;
        padding: 0.45rem 0.8rem;
        font-size: 0.8rem;
    }

    .btn--icon,
    .btn--icon.btn--small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        padding: 0;
        line-height: 1;
    }

    .btn--icon svg,
    .btn--icon .btn__icon {
        display: block;
        width: 16px;
        height: 16px;
        margin: 0;
    }

    /* --- Edit/list rows: never overflow card --- */
    .edit-item-list,
    .trip-focus,
    .trip-focus__empty {
        min-width: 0;
        max-width: 100%;
    }

    .edit-item-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .edit-item-row__icon,
    .edit-item-row__thumb,
    .edit-item-row__date {
        flex: 0 0 auto;
    }

    .edit-item-row__main,
    .edit-item-row__content,
    .edit-item-row__content--link {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .edit-item-row__name,
    .edit-item-row__meta {
        display: block;
        min-width: 0;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .edit-item-row__actions {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 2px;
        width: auto !important;
        max-width: none;
        flex: 0 0 auto;
        margin-left: 0;
        padding-top: 0;
        opacity: 1;
    }

    .edit-item-row__form {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .edit-item-row__action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        padding: 0;
        line-height: 1;
        flex: 0 0 auto;
    }

    .edit-item-row__action svg {
        display: block;
        width: 16px;
        height: 16px;
    }

    /* Forms / lists spacing */
    .form__group {
        gap: 0.4rem;
        margin-bottom: 0;
    }

    .form,
    .auth-form {
        gap: 1.25rem;
    }

    .form__help,
    .form__hint,
    .form__error {
        margin-top: 0;
    }

    .form__label {
        margin-bottom: 0;
    }

    .edit-item-group {
        margin-bottom: 12px;
    }

    .edit-item-list {
        gap: 8px;
    }

    /* Segmented filters stay balanced */
    .overview-filters {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px;
    }

    .overview-filter {
        width: 100%;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0.45rem 0.35rem;
        font-size: 0.78rem;
        box-sizing: border-box;
    }
}

@media (max-width: 390px) {
    .edit-item-row__icon {
        width: 32px;
        height: 32px;
    }

    .edit-item-row__action {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }

    .trip-hero__actions .btn,
    .trip-utility-action,
    .trip-section-block__edit-action,
    .trip-section-block__actions .btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }
}

/* ===========================================
   FINAL VISUAL POLISH (header / hero / forms)
   =========================================== */

@media (max-width: 640px) {
    /* Explicit Packen ↔ notify divider (sand/tan), never clipped. */
    .header__actions {
        align-items: center;
    }

    .app-header__packing-action {
        position: relative;
        margin-right: 0;
        overflow: visible;
    }

    .app-header__packing-action::after {
        content: none;
        display: none;
    }

    .header__actions-divider {
        display: inline-block;
        width: 1px;
        height: 16px;
        margin: 0 3px;
        background: var(--voyaly-border-strong);
        flex-shrink: 0;
        align-self: center;
        opacity: 0.55;
    }

    .header__notify {
        margin-left: 0;
    }
}

/* Desktop: keep title/subtitle/pills as one coherent hero block */
.trip-hero__title {
    margin-bottom: var(--spacing-3);
}

.trip-hero__subtitle {
    margin-top: 0;
}

/* Form rhythm: label/input/help tight, groups separated */
@media (max-width: 640px) {
    .card .form,
    .trip-focus .form,
    .auth-card .form,
    .auth-form,
    .form {
        gap: 1.25rem;
    }

    .form__group,
    .auth-form .form__group {
        gap: 0.4rem;
    }

    .form__label + .form__input,
    .form__label + .combobox,
    .form__label + select,
    .form__label + textarea {
        margin-top: 0;
    }

    .form__actions {
        padding-top: 1.35rem;
    }
}

/* ===========================================
   DOCUMENT VIEWER — mobile centering polish
   =========================================== */

@media (max-width: 640px) {
    .viewer-overlay:not([hidden]) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding:
            max(12px, env(safe-area-inset-top, 0px))
            max(12px, env(safe-area-inset-right, 0px))
            max(12px, env(safe-area-inset-bottom, 0px))
            max(12px, env(safe-area-inset-left, 0px)) !important;
        overscroll-behavior: contain;
    }

    .viewer-overlay__shell {
        width: calc(100% - 24px) !important;
        height: calc(100dvh - 32px) !important;
        max-height: calc(100dvh - 32px) !important;
        margin: auto !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .viewer-overlay__bar {
        flex: 0 0 auto !important;
        min-height: 52px;
        position: relative !important;
        margin-top: 0 !important;
    }

    .viewer-overlay__canvas {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .viewer-overlay__pdf {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        border: 0 !important;
    }

    .viewer-overlay__fallback .btn {
        min-height: 40px;
    }
}

@supports not (height: 100dvh) {
    @media (max-width: 640px) {
        .viewer-overlay__shell {
            height: calc(100vh - 32px) !important;
            max-height: calc(100vh - 32px) !important;
        }
    }
}

/* ===========================================
   ADMIN DASHBOARD (private, desktop-first)
   =========================================== */

.admin-body {
    background:
        linear-gradient(180deg, #f3eee4 0%, var(--voyaly-bg-body) 220px);
    min-height: 100vh;
    color: var(--voyaly-text-primary);
}

.admin-header {
    background: rgba(251, 247, 238, 0.94);
    border-bottom: 1px solid var(--voyaly-border-soft);
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(8px);
}

.admin-header__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.admin-header__brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    text-decoration: none;
    color: inherit;
}

.admin-header__mark {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.admin-header__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--voyaly-color-primary-600);
    background: var(--voyaly-color-primary-100);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}

.admin-header__nav {
    display: flex;
    gap: 0.35rem;
    flex: 1;
}

.admin-header__link {
    text-decoration: none;
    color: var(--voyaly-text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-full);
}

.admin-header__link.is-active,
.admin-header__link:hover {
    color: var(--voyaly-text-primary);
    background: rgba(255, 255, 255, 0.7);
}

.admin-header__aside {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.admin-header__user {
    font-size: 0.85rem;
    color: var(--voyaly-text-muted);
}

.admin-header__back {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--voyaly-color-primary-600);
    text-decoration: none;
}

.admin-main {
    padding: 1.5rem 0 3rem;
}

.admin-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.admin-page-header {
    margin-bottom: 1.25rem;
}

.admin-page-header__title {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.admin-page-header__sub,
.admin-page-header__crumb {
    margin: 0;
    color: var(--voyaly-text-secondary);
    font-size: 0.95rem;
}

.admin-page-header__crumb a {
    color: inherit;
}

.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.admin-kpi,
.admin-panel {
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 20px rgba(29, 23, 16, 0.05);
}

.admin-kpi {
    padding: 0.9rem 1rem;
}

.admin-kpi__label {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    color: var(--voyaly-text-muted);
    font-weight: 600;
}

.admin-kpi__value {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.admin-panel {
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
}

.admin-panel__title {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    font-weight: 700;
}

.admin-panel--revenue {
    background:
        linear-gradient(180deg, #eef2ea 0%, var(--voyaly-bg-card) 90px);
}

.admin-revenue__amount {
    margin: 0 0 0.35rem;
    font-size: 1.8rem;
    font-weight: 800;
}

.admin-revenue__note,
.admin-muted {
    margin: 0;
    color: var(--voyaly-text-muted);
    font-size: 0.9rem;
}

.admin-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    padding-top: 0.5rem;
}

.admin-chart__bar {
    flex: 1 1 0;
    min-width: 0;
    background: linear-gradient(180deg, var(--voyaly-color-primary-500), var(--voyaly-color-primary-700));
    border-radius: 3px 3px 0 0;
    opacity: 0.85;
}

.admin-stack {
    display: flex;
    height: 18px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--voyaly-bg-subtle);
    margin-bottom: 0.75rem;
}

.admin-stack__seg--email_password,
.admin-stack__dot--email_password { background: var(--voyaly-color-primary-600); }
.admin-stack__seg--google,
.admin-stack__dot--google { background: #5b7c99; }
.admin-stack__seg--verified,
.admin-stack__dot--verified { background: var(--voyaly-success-600); }
.admin-stack__seg--unverified,
.admin-stack__dot--unverified { background: var(--voyaly-warning-600); }

.admin-stack__legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    font-size: 0.85rem;
    color: var(--voyaly-text-secondary);
}

.admin-stack__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.35rem;
}

.admin-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
}

.admin-search .form__input {
    flex: 1 1 220px;
    min-width: 0;
}

.admin-table-wrap {
    overflow-x: auto;
    background: var(--voyaly-bg-card);
    border: 1px solid var(--voyaly-border-soft);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 20px rgba(29, 23, 16, 0.05);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-table th,
.admin-table td {
    padding: 0.7rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--voyaly-border-soft);
    white-space: nowrap;
}

.admin-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--voyaly-text-muted);
    background: rgba(255, 255, 255, 0.55);
}

.admin-table__empty {
    text-align: center;
    color: var(--voyaly-text-muted);
    padding: 1.5rem !important;
}

.admin-status {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--voyaly-bg-subtle);
    color: var(--voyaly-text-secondary);
}

.admin-status--active {
    background: var(--voyaly-success-100);
    color: var(--voyaly-success-600);
}

.admin-status--disabled {
    background: var(--voyaly-danger-100);
    color: var(--voyaly-danger-600);
}

.admin-status--admin {
    background: var(--voyaly-color-primary-100);
    color: var(--voyaly-color-primary-700);
    margin-left: 0.25rem;
}

.admin-pagination {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.admin-detail-grid,
.admin-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-dl {
    margin: 0;
}

.admin-dl > div {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(226, 214, 197, 0.6);
    font-size: 0.9rem;
}

.admin-dl dt {
    color: var(--voyaly-text-muted);
    font-weight: 600;
}

.admin-dl dd {
    margin: 0;
}

.admin-stat-list,
.admin-simple-list {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.admin-action-form {
    margin-bottom: 0.9rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--voyaly-border-soft);
}

.admin-action-form:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.admin-action-form__row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.admin-footer {
    text-align: center;
    padding: 1.25rem;
    color: var(--voyaly-text-muted);
    font-size: 0.8rem;
}

@media (max-width: 900px) {
    .admin-charts,
    .admin-two-col,
    .admin-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-header__inner {
        flex-wrap: wrap;
    }

    .admin-header__aside {
        width: 100%;
        justify-content: space-between;
    }
}