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

:root {
    --primary: #01204A;
    --primary-dark: #02326f;
    --primary-hover: #094a80;
    --secondary: #0C7779;
    --yellow: #FFB700;
    --text: #171717;
    --text-gray-900: #111827;
    --text-gray-700: #374151;
    --text-gray-500: #6b7280;
    --text-gray-400: #9ca3af;
    --text-gray-300: #d1d5db;
    --white: #ffffff;
    --bg-body: #ffffff;
    --bg-soft: #f8f9fa;
    --bg-gray-50: #f9fafb;
    --bg-gray-100: #f3f4f6;
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --success: #16a34a;
    --success-bg: #f0fdf4;
    --error: #dc2626;
    --error-bg: #fef2f2;
    --red-500: #ef4444;
    --font: var(--font-body, 'Familjen Grotesk'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
}

html { scroll-behavior: smooth; scrollbar-gutter: stable; }


body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container-7xl, .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.container-5xl { max-width: 1024px; margin: 0 auto; padding: 0 1rem; }
.container-4xl { max-width: 896px; margin: 0 auto; padding: 0 1rem; }
.container-3xl { max-width: 768px; margin: 0 auto; padding: 0 1rem; }
.container-sm { max-width: 640px; margin: 0 auto; padding: 0 1rem; }

@media (min-width: 640px) {
    .container-7xl, .container-5xl, .container-4xl, .container-3xl, .container-sm, .container { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
    .container-7xl, .container { padding: 0 2rem; }
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.015em; color: var(--text-gray-900); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }

i[data-lucide] { display: inline-block; vertical-align: middle; }
.icon-logo { width: 20px; height: 20px; }
.icon-nav { width: 16px; height: 16px; margin-right: 4px; stroke-width: 2; }
.icon-alert { width: 16px; height: 16px; margin-right: 5px; stroke-width: 2; }
.icon-sm { width: 14px; height: 14px; stroke-width: 2; }
.icon-md { width: 17px; height: 17px; stroke-width: 2; }
.icon-lg { width: 22px; height: 22px; stroke-width: 2; }
.icon-hamburger { width: 24px; height: 24px; stroke-width: 2.2; }

.site-header { background: #01204A; position: sticky; top: 0; z-index: 50; box-shadow: none; }
.site-header-inner { max-width: 1280px; margin: 0 auto; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
@media (min-width: 640px) { .site-header-inner { padding: 1rem 1.5rem; } }
@media (min-width: 1024px) { .site-header-inner { padding: 1rem 2rem; } }

.logo { display: inline-block; flex-shrink: 0; }
.logo img { height: 32px; width: auto; display: block; }
@media (min-width: 768px) { .logo img { height: 38px; } }
.logo:hover { opacity: 0.9; text-decoration: none; }

.header-nav { display: none; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .header-nav { display: flex; } }

.nav-links { display: flex; align-items: center; gap: 4px; }

.nav-link {
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.nav-link:hover { background: rgba(255,255,255,0.1); color: var(--white); text-decoration: none; }
.nav-link.active { background: rgba(255,255,255,0.2); color: var(--white); }

.nav-logout { color: rgba(255,150,150,0.85); }
.nav-logout:hover { background: rgba(220,38,38,0.15); color: #fca5a5; }

.btn-logout { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.btn-logout:hover { background: #fee2e2; color: #991b1b; }

.nav-right { display: flex; align-items: center; gap: 0.75rem; }
.nav-login { color: rgba(255,255,255,0.9); font-size: 0.875rem; font-weight: 500; padding: 0.5rem 0.75rem; }
.nav-login:hover { color: var(--white); text-decoration: none; }

.nav-cta {
    background: var(--white);
    color: var(--primary);
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nav-cta:hover { background: rgba(255,255,255,0.9); text-decoration: none; }

.avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--white); color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem;
}

.hamburger {
    display: inline-flex;
    align-items: center; justify-content: center;
    background: transparent;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
}
.hamburger:hover { background: rgba(255,255,255,0.1); }
@media (min-width: 768px) { .hamburger { display: none; } }

.mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--primary);
    z-index: 60;
    overflow-y: auto;
    padding: 1rem 0;
}

.mobile-nav.open { display: block; }

.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-nav-close { background: transparent; border: none; color: var(--white); padding: 8px; cursor: pointer; border-radius: var(--radius-sm); }
.mobile-nav-close:hover { background: rgba(255,255,255,0.1); }

.mobile-nav-links { padding: 1rem 0; }

.mobile-nav-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.9rem 1.5rem;
    color: rgba(255,255,255,0.9);
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mobile-nav-links a:hover { background: rgba(255,255,255,0.1); text-decoration: none; color: var(--white); }
.mobile-nav-links a.active { background: rgba(255,255,255,0.15); color: var(--white); }

.mobile-nav-footer { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.mobile-nav-footer .btn { width: 100%; padding: 0.8rem; font-size: 0.95rem; }

main { min-height: calc(100vh - 200px); }

.site-footer { background: var(--primary); color: var(--white); margin-top: 3rem; }
.site-footer-inner { max-width: 1280px; margin: 0 auto; padding: 3rem 1rem; }
@media (min-width: 640px) { .site-footer-inner { padding: 3rem 1.5rem; } }
@media (min-width: 1024px) { .site-footer-inner { padding: 3rem 2rem; } }

.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }

.footer-col img { height: 40px; width: auto; display: block; margin-bottom: 1rem; }
.footer-col p { color: rgba(255,255,255,0.6); font-size: 0.85rem; line-height: 1.65; max-width: 20rem; }
.footer-col h4 { color: rgba(255,255,255,0.4); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a { color: rgba(255,255,255,0.7); font-size: 0.85rem; }
.footer-col a:hover { color: var(--white); }

.site-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 1.25rem 0; text-align: center; color: rgba(255,255,255,0.4); font-size: 0.85rem; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.55rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text-gray-900);
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
    line-height: 1.4;
}

.btn:hover { background: var(--bg-soft); text-decoration: none; border-color: #d1d5db; }
.btn-primary { background: var(--primary); color: var(--white); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); }
.btn-secondary { background: var(--bg-soft); border-color: var(--border); }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
.btn-lg { padding: 0.8rem 1.75rem; font-size: 0.95rem; font-weight: 600; }
.btn-block { width: 100%; }
.btn-link { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 0.875rem; padding: 0; font-family: inherit; font-weight: 500; }
.btn-link:hover { text-decoration: underline; }
.btn-danger { color: var(--error); }

.alert { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.875rem; display: flex; align-items: center; }

.toast-stack {
    position: fixed;
    top: 76px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: calc(100vw - 40px);
    width: 360px;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px 12px 12px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
    border-left: 4px solid #9ca3af;
    font-size: 0.9rem;
    line-height: 1.4;
    pointer-events: auto;
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.28s ease, opacity 0.28s ease;
    animation: toast-in 0.28s ease;
}
@keyframes toast-in {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.toast.is-leaving { transform: translateX(30px); opacity: 0; }
.toast-success { border-left-color: #22c55e; color: #166534; }
.toast-success i[data-lucide], .toast-success svg { color: #22c55e; }
.toast-error { border-left-color: #dc2626; color: #991b1b; }
.toast-error i[data-lucide], .toast-error svg { color: #dc2626; }
.toast > i[data-lucide], .toast > svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.toast-body { flex: 1; color: #1f2937; }
.toast-body a { color: #01204A; font-weight: 600; text-decoration: underline; }
.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 4px;
    margin-left: 2px;
}
.toast-close:hover { color: #111827; }

@media (max-width: 640px) {
    .toast-stack { top: 64px; right: 12px; left: 12px; width: auto; }
}
.alert-success { background: var(--success-bg); color: #166534; border: 1px solid #bbf7d0; }
.alert-error { background: var(--error-bg); color: #991b1b; border: 1px solid #fecaca; }

.hero { position: relative; color: var(--white); overflow: hidden; background-color: var(--primary); }
/* Hero with the map-pattern background image (dark blue). The solid color stays
   as the base/fallback while the image loads. */
.hero.hero-bgmap {
    background-color: #01204A;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.55); }

.hero-content { position: relative; z-index: 1; max-width: 768px; margin: 0 auto; padding: 2rem 1rem 2.5rem; text-align: center; }
@media (min-width: 768px) { .hero-content { padding: 3.5rem 1.5rem 5rem; } }

.hero h1 {
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--white);
    margin-bottom: 0.75rem;
    text-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
@media (min-width: 768px) { .hero h1 { font-size: 3rem; } }

.hero p { font-size: 1rem; color: rgba(255,255,255,0.7); max-width: 576px; margin: 1.2rem auto 0; text-shadow: 0 2px 4px rgba(0,0,0,0.3); font-weight: 400; }
@media (min-width: 768px) { .hero p { font-size: 1.125rem; } }

.search-card-wrap { max-width: 1024px; margin: -2rem auto 2rem; padding: 0 1rem; position: relative; z-index: 10; }
@media (min-width: 640px) { .search-card-wrap { padding: 0 1.5rem; } }

.search-card { background: var(--white); border-radius: var(--radius-lg); border: 2px solid #FFB700; box-shadow: var(--shadow-lg); padding: 0.4rem; }
@media (min-width: 768px) { .search-card { padding: 0.5rem; } }

.search-card-row { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 768px) { .search-card-row { flex-direction: row; align-items: stretch; } }

/* Desktop homepage search: use a grid so every field column is exactly uniform
   (date box = 2 units because it holds two sub-fields; each single field = 1
   unit). Grid `fr` ignores intrinsic content width, unlike flex, so the boxes
   come out truly equal. minmax(0,*) prevents content from blowing columns out. */
@media (min-width: 768px) {
    .search-card:not(.search-card-lot) .search-card-row {
        display: grid !important;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
        align-items: stretch;
        gap: 10px;
    }
    .search-card .search-field-timesel { box-sizing: border-box; }
}

/* Compact "lot" variant — embedded in the parking detail sidebar. Renders a
   single trigger button that opens the shared date popup/modal. */
.search-card-lot { background: transparent; box-shadow: none; padding: 0; border-radius: 0; border: none; text-align: left; }
.search-card-lot .search-card-row { flex-direction: column; align-items: stretch; gap: 10px; }

/* ===== Lot-mode booking bar (parking detail). Desktop: one horizontal row;
   mobile: stacked. Mirrors the reference quote widget. ===== */
.booking-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.booking-bar .bb-dates {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.booking-bar .bb-field {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.booking-bar .bb-field:hover { border-color: #01204A; }
.booking-bar .bb-field:focus-within { outline: none; border-color: #01204A; box-shadow: 0 0 0 3px rgba(1, 32, 74, 0.12); }
.booking-bar .bb-label {
    font-size: 12px;
    font-weight: 700;
    color: #5b6b7a;
    line-height: 1.1;
}
.booking-bar .bb-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.booking-bar .bb-value.placeholder { color: #9ca3af; font-weight: 500; }
.booking-bar .bb-arrow {
    display: flex;
    align-items: center;
    align-self: center;
    color: #01204A;
    flex: 0 0 auto;
}
.booking-bar .bb-arrow i[data-lucide] { width: 22px; height: 22px; }
.booking-bar .bb-select,
.booking-bar .bb-input {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827;
    outline: none;
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.booking-bar .bb-input { cursor: text; }
.booking-bar .bb-input::placeholder { color: #9ca3af; font-weight: 500; }
.booking-bar .bb-submit {
    flex: 0 0 auto;
    align-self: stretch;
    padding: 0 1.75rem;
    min-height: 64px;
    border: none;
    border-radius: 12px;
    background: var(--yellow);
    color: var(--text-gray-900);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, transform 0.1s;
}
.booking-bar .bb-submit:hover { background: #e6a500; }
.booking-bar .bb-submit:active { transform: translateY(1px); }

/* Desktop: lay everything out on a single horizontal row. */
@media (min-width: 768px) {
    .booking-bar {
        flex-direction: row;
        align-items: stretch;
        gap: 12px;
    }
    .booking-bar .bb-dates { flex: 2.2; }
    .booking-bar .bb-time { flex: 1; }
    .booking-bar .bb-voucher { flex: 1.1; }
}

/* Full-width booking panel on the parking detail page. */
.pd-booking {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 10px 30px -18px rgba(16, 42, 67, 0.35);
    padding: 14px;
    margin: 0 0 1.5rem;
}
@media (min-width: 768px) {
    .pd-booking { padding: 16px 18px; }
}
.lot-date-trigger {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 13px 14px; border: 1px solid #d1d5db; border-radius: 12px;
    background: #fff; cursor: pointer; font-family: inherit;
    font-size: 0.95rem; font-weight: 600; color: #111827;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.lot-date-trigger:hover { border-color: #01204A; }
.lot-date-trigger:focus-visible { outline: none; border-color: #01204A; box-shadow: 0 0 0 3px rgba(1,32,74,0.12); }
.lot-date-trigger-icon { display: inline-flex; color: #01204A; }
.lot-date-trigger-icon i[data-lucide] { width: 20px; height: 20px; }
.lot-date-trigger-text { flex: 1; text-align: left; }
.lot-date-trigger-caret { width: 18px; height: 18px; color: #9ca3af; flex-shrink: 0; }

.search-field { flex: 2; min-width: 0; position: relative; }
.search-field-inner { width: 100%; padding: 0.625rem 0.75rem; border-radius: var(--radius); background: var(--white); border: 1px solid var(--border); transition: all 0.2s; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.search-field-inner:hover { border-color: var(--primary); background: var(--bg-soft); }
.search-field-inner i[data-lucide] { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; }
.search-field-content { flex: 1; min-width: 0; text-align: left; }
.search-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; line-height: 1; color: var(--text-gray-400); }

.search-field input[type=date] {
    width: 100%;
    border: none;
    background: transparent;
    padding: 2px 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-900);
    outline: none;
    font-family: inherit;
    cursor: pointer;
}

.search-submit { flex: 0 0 auto; min-width: 0; display: flex; align-items: center; align-self: center; }

.search-submit button {
    width: 100%;
    height: 40px;
    min-height: 40px;
    align-self: center;
    background: var(--yellow);
    color: var(--text-gray-900);
    border: none;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    box-shadow: 0 4px 12px -6px rgba(245, 179, 0, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: inherit;
    padding: 0 1.4rem;
    white-space: nowrap;
}
.search-submit button:active { transform: translateY(1px); }

.search-submit button:hover { background: #e6a500; }

/* ===== Homepage search: date-range field + inline time-select fields =====
   Kept in this cache-busted stylesheet (?v=) and given extra specificity so it
   reliably overrides the bundled globals.css `.search-card .search-field`
   flex/labels regardless of stylesheet load order. ===== */
/* Uniform field boxes: each single-field box (time, type) is one unit; the
   date box holds two sub-fields so it gets two units → every visible field
   column ends up the same width. */
.search-card .search-field.search-field-daterange { flex: 2 1 0 !important; }
.search-card .search-field.search-field-timesel { flex: 1 1 0 !important; }
.search-card .search-field.search-field-type { flex: 1 1 0 !important; }

/* Slimmer field boxes (Hunor: "ne legyenek dagik"). Fixed, equal, lower height;
   inner buttons fill their grid cell so every box matches. Extra specificity to
   beat globals' min-height: 66px !important. */
.search-card .search-field .search-field-btn {
    min-height: 54px !important;
    height: 100% !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
}
.search-card .search-field.search-field-timesel {
    min-height: 54px !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
}
.search-card .search-field-label { margin-bottom: 2px !important; }
/* Uniform label size across every field so the boxes match in height. */
.search-card .search-field-type .search-field-label,
.search-card .search-field-daterange .search-field-label,
.search-card .search-field-timesel .search-field-label { font-size: 14px !important; }
.search-card .search-field-type .search-field-value-txt { font-size: 14px !important; }
.search-card .sf-time-select { line-height: 1.2; }

/* Mobile: bigger, full-width Keresés button (Hunor). */
@media (max-width: 767px) {
    .search-card .search-submit { min-width: 0 !important; width: 100%; }
    .search-card .search-submit button {
        width: 100% !important;
        min-height: 52px !important;
        height: 52px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
        gap: 9px !important;
    }
    .search-card .search-submit button .search-submit-icon {
        width: 18px !important;
        height: 18px !important;
    }
}

.search-card .search-field-daterange .search-field-btn { padding-right: 1rem !important; }
.search-card .search-field-daterange .search-field-btn::after { display: none !important; }
.search-card .sf-dr {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.search-card .sf-dr-col {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.search-card .sf-dr-col .search-field-label {
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-card .sf-dr-col .search-field-value-txt { font-size: 14px !important; }
.search-card .sf-dr-arrow {
    display: flex;
    align-items: center;
    color: #01204A;
    flex: 0 0 auto;
}
.search-card .sf-dr-arrow svg { width: 20px; height: 20px; }

.search-card .search-field-timesel {
    position: relative;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    min-height: 66px;
    padding: 0.85rem 2.4rem 0.85rem 1rem;
    display: flex;
    align-items: center;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.search-card .search-field-timesel .search-field-label { font-size: 14px !important; white-space: nowrap; }
.search-card .search-field-timesel:focus-within {
    border-color: #01204A;
    box-shadow: 0 0 0 3px rgba(1, 32, 74, 0.12);
}
.search-card .search-field-timesel::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    pointer-events: none;
    opacity: 0.9;
}
/* The trigger/mobile button fills the WHOLE box (inset 0) so a click anywhere
   in the field opens the picker — not just on a tiny native control. */
.search-card .sf-time-trigger,
.search-card .sf-time-mobile {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0.45rem 2.4rem 0.45rem 1rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.search-card .sf-time-trigger .search-field-value-txt,
.search-card .sf-time-mobile .search-field-value-txt {
    font-size: 14px !important;
    font-weight: 600;
    color: #111827;
}

/* Desktop custom time dropdown (Hunor: whole box clickable + nicer than the OS
   native select). Scrollable list of times below the field. */
.search-card .sf-time-mobile { display: none; }
.search-card .search-field-timesel .time-dd {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 40;
    display: none;
    max-height: 264px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.search-card .search-field-timesel .time-dd.open { display: block; }
.search-card .time-dd-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: #111827;
    cursor: pointer;
}
.search-card .time-dd-opt:hover { background: var(--bg-soft, #f1f5f9); }
.search-card .time-dd-opt.selected { background: rgba(1, 32, 74, 0.08); color: var(--primary); font-weight: 600; }

@media (max-width: 767px) {
    .search-card .sf-time-desktop,
    .search-card .search-field-timesel .time-dd { display: none !important; }
    .search-card .sf-time-mobile { display: flex; }
}

.search-field-btn {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius);
    background: var(--white);
    border: 1px solid var(--border);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: inherit;
    min-height: 56px;
    text-align: left;
}

.search-field-btn:hover { border-color: var(--primary); background: var(--bg-soft); }
.search-field-btn.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(1, 32, 74, 0.12); }
.search-field-btn i[data-lucide] { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; }

.search-field-value-txt {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-900);
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-field-value-txt.placeholder { font-weight: 400; color: var(--text-gray-500); }

.calendar-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1rem 1.25rem;
    z-index: 40;
    display: none;
}
.calendar-popup.open { display: block; }
@media (min-width: 768px) {
    .calendar-popup { left: 0; right: auto; min-width: 640px; }
}

.calendar-popup-header {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 0.5rem;
}

.calendar-popup-titles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-gray-900);
}
@media (max-width: 639px) {
    .calendar-popup-titles { grid-template-columns: 1fr; }
}

.calendar-nav-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--white);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-gray-700);
}
.calendar-nav-btn:hover { background: var(--bg-soft); }
.calendar-nav-btn i[data-lucide] { width: 16px; height: 16px; }

.calendar-close {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--white);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-gray-500);
}
.calendar-close:hover { background: var(--bg-soft); color: var(--text-gray-900); }
.calendar-close i[data-lucide] { width: 14px; height: 14px; }

.calendar-months {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 640px) { .calendar-months { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.calendar-month { }
.calendar-month-title { text-align: center; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.75rem; color: var(--text-gray-900); }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar-weekday {
    text-align: center; font-size: 0.72rem; font-weight: 500;
    color: var(--text-gray-400); padding: 3px 0 2px;
}
.calendar-day {
    height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.84rem;
    color: var(--text-gray-900);
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    transition: background 0.12s;
    padding: 0;
}
.calendar-day:hover:not(:disabled):not(.range-start):not(.range-end):not(.in-range) { background: var(--bg-gray-100); }
.calendar-day:disabled { color: #d1d5db; cursor: not-allowed; }
.calendar-day.in-range { background: #dbeafe; color: var(--text-gray-900); border-radius: var(--radius-sm); }
.calendar-day.range-start { background: var(--primary); color: var(--white); border-radius: var(--radius-sm); font-weight: 600; }
.calendar-day.range-end { background: var(--primary); color: var(--white); border-radius: var(--radius-sm); font-weight: 600; }
.calendar-day.today:not(.range-start):not(.range-end) { font-weight: 700; color: var(--primary); border: 1px solid var(--primary); }
.calendar-day.empty { cursor: default; background: transparent !important; }

.calendar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
}

.calendar-footer-text { font-size: 0.9rem; color: var(--text-gray-500); }
.calendar-footer-text .nights { color: var(--primary); font-weight: 600; margin-left: 4px; }

.calendar-confirm-btn {
    background: var(--primary);
    color: var(--white);
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.calendar-confirm-btn:disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }
.calendar-confirm-btn:not(:disabled):hover { background: var(--primary-dark); }

.time-popup, .type-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.25rem;
    z-index: 40;
    min-width: 280px;
    display: none;
}
.time-popup.open, .type-popup.open { display: block; }

.time-popup-label, .type-popup-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--text-gray-500);
    margin-bottom: 6px;
}
.time-popup select, .type-popup select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--white);
    margin-bottom: 1rem;
}

.time-popup-done {
    width: 100%;
    background: var(--primary);
    color: var(--white);
    border: none;
    padding: 0.6rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.time-popup-done:hover { background: var(--primary-dark); }

.type-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 2px;
}
.type-option:hover { background: var(--bg-soft); }
.type-option.selected { background: rgba(1, 32, 74, 0.08); }
.type-option .title { font-size: 0.9rem; font-weight: 600; color: var(--text-gray-900); margin-bottom: 2px; }
.type-option .desc { font-size: 0.75rem; color: var(--text-gray-500); }

/* Type dropdown popup options */
.type-popup { padding: 0.4rem; min-width: 260px; }
.type-dd-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.7rem;
    border-radius: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}
.type-dd-option + .type-dd-option { margin-top: 2px; }
.type-dd-option:hover { background: var(--bg-soft); }
.type-dd-option.selected { background: rgba(1, 32, 74, 0.08); }
.type-dd-icon {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #eef2f6;
    color: var(--text-gray-700, #475569);
}
.type-dd-option.selected .type-dd-icon { background: #d8e8fb; color: var(--primary); }
.type-dd-icon svg { width: 20px; height: 20px; }
.type-dd-text { display: flex; flex-direction: column; min-width: 0; }
.type-dd-name { font-size: 14px; font-weight: 600; color: var(--text-gray-900); line-height: 1.2; }
.type-dd-option.selected .type-dd-name { color: var(--primary); }
.type-dd-desc { font-size: 0.76rem; color: var(--text-gray-500); margin-top: 1px; }
.type-dd-check {
    margin-left: auto;
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: var(--primary);
    opacity: 0;
}
.type-dd-option.selected .type-dd-check { opacity: 1; }

.trust-row { max-width: 768px; margin: 0 auto 3rem; padding: 0 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.5rem; font-size: 0.875rem; color: var(--text-gray-500); }
@media (min-width: 768px) { .trust-row { margin-bottom: 4rem; } }
.trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.trust-row i[data-lucide] { width: 16px; height: 16px; color: var(--primary); }

.section-py { padding: 3rem 0; }
@media (min-width: 768px) { .section-py { padding: 4rem 0; } }
.section-py-lg { padding: 3.5rem 0; }
@media (min-width: 768px) { .section-py-lg { padding: 5rem 0; } }

.bg-gray-50 { background: var(--bg-soft); }
.bg-primary { background: var(--primary); color: var(--white); }

.section-title { text-align: center; margin-bottom: 2rem; }
@media (min-width: 768px) { .section-title { margin-bottom: 2.5rem; } }

.section-title h2 { font-size: 1.25rem; font-weight: 700; color: var(--text-gray-900); margin-bottom: 0.5rem; }
@media (min-width: 768px) { .section-title h2 { font-size: 1.5rem; } }

.bg-primary .section-title h2 { color: var(--white); }
.section-title p { font-size: 0.875rem; color: var(--text-gray-500); max-width: 32rem; margin: 0 auto; }
.bg-primary .section-title p { color: rgba(255,255,255,0.7); }

.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; text-align: center; max-width: 896px; margin: 0 auto; }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

.stat-big-val { font-size: 1.5rem; font-weight: 800; color: var(--white); line-height: 1.1; }
.stat-big-val.accent { color: var(--yellow); }
@media (min-width: 768px) { .stat-big-val { font-size: 1.875rem; } }
.stat-big-lbl { font-size: 0.75rem; color: rgba(255,255,255,0.6); margin-top: 2px; }
@media (min-width: 768px) { .stat-big-lbl { font-size: 0.875rem; } }

.features-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }

.feature-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; }

.feature-icon-box { width: 36px; height: 36px; border-radius: var(--radius); background: rgba(1, 32, 74, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feature-icon-box i[data-lucide] { width: 18px; height: 18px; color: var(--primary); }
.feature-item h3 { font-size: 0.875rem; font-weight: 700; color: var(--text-gray-900); margin-bottom: 2px; }
.feature-item p { font-size: 0.75rem; color: var(--text-gray-500); line-height: 1.5; }

.steps-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.step-card { background: var(--white); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-sm); display: flex; align-items: flex-start; gap: 1rem; }
@media (min-width: 768px) { .step-card { flex-direction: column; align-items: center; text-align: center; padding: 1.5rem; gap: 0.75rem; } }

.step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; }
.step-card h3 { font-size: 0.95rem; font-weight: 700; color: var(--text-gray-900); margin-bottom: 4px; }
.step-card p { font-size: 0.875rem; color: var(--text-gray-500); line-height: 1.5; }

.testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.testimonial { background: var(--bg-soft); border-radius: var(--radius-lg); padding: 1.25rem; }
@media (min-width: 768px) { .testimonial { padding: 1.5rem; } }

.stars { display: inline-flex; gap: 1px; margin-bottom: 0.75rem; }
.stars i[data-lucide] { width: 16px; height: 16px; color: var(--yellow); fill: var(--yellow); }
.stars i[data-lucide].empty { color: #d1d5db; fill: none; }

.testimonial-text { font-size: 0.875rem; color: var(--text-gray-700); line-height: 1.65; margin-bottom: 1rem; }
.testimonial-author { display: flex; align-items: center; gap: 0.5rem; }
.testimonial-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; }
.testimonial-author .name { font-size: 0.875rem; font-weight: 600; color: var(--text-gray-900); }

.trust-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .trust-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust-cards { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }

.trust-card { background: var(--white); border-radius: var(--radius-lg); padding: 1.25rem; text-align: center; box-shadow: var(--shadow-sm); }
@media (min-width: 768px) { .trust-card { padding: 1.5rem; } }

.trust-card-icon-box { width: 48px; height: 48px; border-radius: var(--radius-lg); background: rgba(1, 32, 74, 0.1); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; }
.trust-card-icon-box i[data-lucide] { width: 24px; height: 24px; color: var(--primary); }
.trust-card h3 { font-size: 0.875rem; font-weight: 700; color: var(--text-gray-900); margin-bottom: 6px; }
.trust-card p { font-size: 0.75rem; color: var(--text-gray-500); line-height: 1.5; }

.faq { display: flex; flex-direction: column; gap: 0.5rem; }
.faq-item { background: var(--bg-soft); border-radius: var(--radius-lg); overflow: hidden; }
/* Native <details> chevron: down when closed, flipped up when open. */
.faq-item > summary i[data-lucide],
.faq-item > summary svg { transition: transform 0.25s ease; flex-shrink: 0; }
.faq-item[open] > summary i[data-lucide],
.faq-item[open] > summary svg { transform: rotate(180deg); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; text-align: left; background: transparent; border: none; cursor: pointer; font-family: inherit; }
@media (min-width: 768px) { .faq-question { padding: 1.25rem 1.5rem; } }
.faq-question span { font-size: 0.9375rem; font-weight: 600; color: var(--text-gray-900); padding-right: 1rem; flex: 1; }
.faq-question i[data-lucide] { width: 20px; height: 20px; color: var(--text-gray-400); transition: transform 0.3s; flex-shrink: 0; }
.faq-question.open i[data-lucide] { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.faq-answer.open { max-height: 500px; }
.faq-answer-inner { padding: 0 1.25rem 1rem; color: var(--text-gray-700); font-size: 0.875rem; line-height: 1.65; }
@media (min-width: 768px) { .faq-answer-inner { padding: 0 1.5rem 1.25rem; } }

.cta-section { background: var(--primary); padding: 3rem 1rem; text-align: center; color: var(--white); }
@media (min-width: 768px) { .cta-section { padding: 4rem 1.5rem; } }
.cta-section h2 { font-size: 1.5rem; color: var(--white); font-weight: 800; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .cta-section h2 { font-size: 1.875rem; } }
.cta-section p { font-size: 1rem; color: rgba(255,255,255,0.8); margin-bottom: 1.5rem; max-width: 540px; margin-left: auto; margin-right: auto; }
.cta-section .btn-cta { background: var(--white); color: var(--primary); padding: 0.875rem 2rem; border-radius: var(--radius); font-size: 1rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.cta-section .btn-cta:hover { background: rgba(255,255,255,0.9); text-decoration: none; }

.search-summary-bar { background: var(--primary); color: var(--white); padding: 1.25rem 0; margin-bottom: 1.5rem; }
.search-summary-inner { max-width: 1280px; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
@media (min-width: 640px) { .search-summary-inner { padding: 0 1.5rem; } }

.search-summary-pill { background: var(--white); color: var(--text-gray-900); border-radius: var(--radius-lg); padding: 0.75rem 1.25rem; flex: 1; min-width: 260px; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.875rem; box-shadow: var(--shadow-sm); }
.search-summary-pill strong { font-weight: 700; }
.search-summary-pill .arrow { color: var(--text-gray-400); }
.search-summary-bar .btn { background: var(--white); color: var(--primary); border-color: var(--white); font-weight: 600; cursor: pointer; }

/* "Módosítás" search-edit popup (reuses the homepage SearchCard). Sits above the
   sticky header (z 50) but below the SearchCard's own date/time pickers
   (z 100-110) so those layer on top of it. */
.search-edit-modal { display: none; position: fixed; inset: 0; z-index: 90; }
.search-edit-modal.open { display: block; }
.search-edit-backdrop { position: absolute; inset: 0; background: rgba(2, 15, 38, 0.55); }
.search-edit-panel {
    position: absolute; z-index: 2;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    display: flex; flex-direction: column;
    background: #fff; border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}
.search-edit-head {
    flex: none;
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 20px; border-bottom: 1px solid #e5e7eb;
}
.search-edit-head h2 { font-size: 1.05rem; font-weight: 700; color: #01204A; margin: 0; }
.search-edit-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    border: none; background: #f3f4f6; color: #374151; cursor: pointer;
}
.search-edit-close:hover { background: #e5e7eb; }
.search-edit-body { padding: 18px 20px 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.search-edit-body .search-card { width: 100%; }
@media (max-width: 640px) {
    /* Slightly tighter padding and full available width on phones. */
    .search-edit-panel { width: calc(100vw - 24px); border-radius: 18px; }
    .search-edit-body { padding: 14px 14px 18px; }
}

.parking-grid { display: grid; gap: 1rem; }

.parking-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; transition: all 0.25s; }
.parking-card:hover { box-shadow: var(--shadow-md); border-color: #d1d5db; }

.parking-card-row { display: none; }
@media (min-width: 768px) { .parking-card-row { display: flex; padding: 1rem; gap: 1.25rem; } .parking-card-stack { display: none; } }

.parking-card-image { width: 208px; flex-shrink: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-gray-100); position: relative; align-self: stretch; min-height: 180px; }
.parking-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.parking-card:hover .parking-card-image img { transform: scale(1.05); }

.parking-card-image-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-gray-400); }
.parking-card-image-placeholder i[data-lucide] { width: 48px; height: 48px; stroke-width: 1.2; opacity: 0.5; }

.parking-card-content { flex: 1; display: flex; gap: 1.5rem; min-width: 0; }
.parking-card-info { flex: 1; min-width: 0; }
.parking-card-info h3 { font-size: 1.125rem; font-weight: 600; color: var(--text-gray-900); margin-bottom: 4px; }
.parking-card-info h3 a { color: inherit; }
.parking-card-info h3 a:hover { color: var(--primary); text-decoration: none; }

.parking-card-rating { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.parking-card-rating .rating-num { font-size: 0.875rem; font-weight: 600; color: var(--text-gray-900); }
.parking-card-rating .rating-count { font-size: 0.75rem; color: var(--text-gray-500); }

.features-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 1rem; margin-bottom: 0.75rem; }
.feature-check { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--text-gray-900); }
.feature-check i[data-lucide] { width: 16px; height: 16px; color: var(--primary); stroke-width: 2.5; flex-shrink: 0; }

.parking-meta { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.meta-line { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--text-gray-500); margin-bottom: 4px; }
.meta-line i[data-lucide] { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }
.meta-line strong { color: var(--text-gray-900); font-weight: 600; }

.parking-address-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--primary); margin-top: 0.5rem; }
.parking-address-link:hover { text-decoration: underline; }
.parking-address-link i[data-lucide] { width: 14px; height: 14px; }

.parking-card-price-section { width: 180px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; border-left: 1px solid var(--border-light); padding-left: 1.25rem; }

.price { font-size: 1.875rem; font-weight: 700; color: var(--text-gray-900); line-height: 1; }
.price-label { font-size: 0.75rem; color: var(--text-gray-500); }

.parking-card-price-section .btn { width: 100%; padding: 0.7rem; font-weight: 500; }
.btn-detail-link { font-size: 0.85rem; color: var(--primary); font-weight: 500; }
.btn-detail-link:hover { text-decoration: underline; }

.parking-card-stack { padding: 0.75rem; }
.parking-card-stack .parking-card-image { width: 100%; aspect-ratio: 16/10; border-radius: var(--radius-lg); min-height: 0; }
.parking-card-stack-content { padding-top: 1rem; }
.parking-card-stack h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 4px; color: var(--text-gray-900); }

.parking-card-stack .meta-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.parking-card-stack .price-cta { display: flex; flex-direction: column; align-items: center; padding-top: 1.25rem; margin-top: 1rem; border-top: 1px solid var(--border); }
.parking-card-stack .price-cta .price { font-size: 1.875rem; margin-bottom: 1rem; }
.parking-card-stack .price-cta .btn { width: 100%; padding: 0.8rem; font-weight: 500; margin-bottom: 0.5rem; }

.search-filters { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.5rem; }
.filter-form .form-row { align-items: center; }
.filter-form label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; white-space: nowrap; cursor: pointer; }
.search-info { color: var(--text-gray-700); font-size: 0.95rem; margin-bottom: 1rem; font-weight: 600; }

.form-row { display: flex; gap: 0.85rem; flex-wrap: wrap; align-items: flex-end; }
.form-group { flex: 1; min-width: 0; margin-bottom: 0.75rem; }
.form-group label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--text-gray-900); }

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.88rem;
    font-family: inherit;
    background: var(--white);
    color: var(--text-gray-900);
    transition: all 0.15s;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(1, 32, 74, 0.12);
}

.form-group textarea { resize: vertical; min-height: 60px; }

fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 0.75rem; background: var(--white); }
fieldset legend { font-weight: 600; font-size: 0.85rem; padding: 0 0.4rem; color: var(--text-gray-900); }

.checkbox-group { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.checkbox-group label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.84rem; cursor: pointer; }

.form-actions { display: flex; gap: 0.6rem; margin-top: 0.5rem; }

.auth-form { max-width: 420px; margin: 2rem auto; background: var(--white); padding: 2rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.auth-form h1 { font-size: 1.375rem; margin-bottom: 1.25rem; text-align: center; }
.auth-link { margin-top: 1rem; font-size: 0.85rem; color: var(--text-gray-500); text-align: center; }

.dashboard { padding: 1.5rem 0 0; }
.stats-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin: 0.75rem 0 1.5rem; }

.stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 0.75rem; text-align: center; box-shadow: var(--shadow-sm); }
.stat-card i[data-lucide] { width: 20px; height: 20px; color: var(--primary); margin: 0 auto 4px; display: block; }
.stat-value { display: block; font-size: 1.4rem; font-weight: 800; color: var(--text-gray-900); line-height: 1.2; }
.stat-label { font-size: 0.75rem; color: var(--text-gray-500); margin-top: 0.25rem; font-weight: 500; }

.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem; padding-top: 1rem; }

.table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.table th, .table td { padding: 0.7rem 0.85rem; text-align: left; border-bottom: 1px solid var(--border-light); font-size: 0.85rem; }
.table th { font-weight: 600; color: var(--text-gray-500); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-soft); }
.table tr:hover { background: var(--bg-soft); }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-gray-500); font-size: 0.9rem; background: var(--white); border-radius: var(--radius); border: 1px solid var(--border); }

.tag { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; background: var(--bg-gray-100); border-radius: 100px; font-size: 0.7rem; color: var(--text-gray-700); font-weight: 500; }

.pagination { display: flex; gap: 3px; justify-content: center; margin-top: 1.5rem; }
.pagination a, .pagination span { padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.82rem; text-decoration: none; color: var(--text-gray-700); background: var(--white); }
.pagination a:hover { background: var(--bg-soft); text-decoration: none; }
.pagination .active { background: var(--primary); color: var(--white); border-color: var(--primary); }

.calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.calendar-table { background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); width: 100%; }
.calendar-table td { text-align: center; vertical-align: top; padding: 0.4rem; height: 54px; font-size: 0.82rem; }
.cal-day { display: block; font-weight: 600; font-size: 0.82rem; }
.cal-spots { display: block; font-size: 0.7rem; color: var(--text-gray-500); }
.avail-high { background: var(--success-bg); }
.avail-mid { background: #fffbeb; }
.avail-low { background: var(--error-bg); }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.65rem; margin-bottom: 1rem; }
.photo-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.photo-card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.photo-card form { padding: 0.4rem; text-align: center; }

.detail-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 0.4rem; margin-bottom: 1.25rem; border-radius: var(--radius-lg); overflow: hidden; }
.detail-gallery img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery .gallery-main { grid-row: 1 / 3; }

.detail-info { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; padding-top: 1rem; }

.detail-sidebar { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.5rem; align-self: start; position: sticky; top: 88px; box-shadow: var(--shadow-sm); }
.detail-sidebar .price { color: var(--primary); font-size: 1.875rem; }

.compare-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.compare-table th, .compare-table td { padding: 0.6rem 0.85rem; text-align: center; border-bottom: 1px solid var(--border-light); font-size: 0.85rem; }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; color: var(--text-gray-500); font-weight: 500; }

.rating-input { display: flex; gap: 0.5rem; }
.rating-input label { cursor: pointer; font-size: 0.88rem; }

.content-narrow { max-width: 480px; margin: 0 auto; }
.content-medium { max-width: 600px; margin: 0 auto; }
.content-wide { max-width: 760px; margin: 0 auto; }

:root {
    --detail-bg: #f5f5f5;
    --detail-text-dark: #03160E;
    --detail-text-med: #47504E;
    --detail-text-soft: #595959;
    --detail-border: #e0e0e0;
    --detail-bg-card: #ffffff;
    --detail-bg-soft: #f7f9f8;
    --detail-pill-bg: #f0f0f0;
    --detail-yellow-rating: #FBBC04;
    --detail-green: #008009;
    --detail-primary-5: rgba(1, 32, 74, 0.05);
    --detail-primary-10: rgba(1, 32, 74, 0.1);
    --detail-primary-20: rgba(1, 32, 74, 0.2);
    --detail-primary-40: rgba(1, 32, 74, 0.4);
}

.detail-page { background: var(--detail-bg); min-height: calc(100vh - 200px); }
.detail-wrap { max-width: 1100px; margin: 0 auto; padding: 1rem; }
@media (min-width: 640px) { .detail-wrap { padding: 1rem 1.5rem; } }
@media (min-width: 1024px) { .detail-wrap { padding: 1rem 2rem; } }

.detail-back { display: inline-flex; align-items: center; gap: 8px; color: var(--detail-text-med); font-weight: 500; font-size: 0.95rem; padding: 0.35rem 0; transition: color 0.2s; background: none; border: none; cursor: pointer; font-family: inherit; }
.detail-back:hover { color: var(--detail-text-dark); text-decoration: none; }
.detail-back i[data-lucide] { width: 20px; height: 20px; transition: transform 0.2s; }
.detail-back:hover i[data-lucide] { transform: translateX(-2px); }

.detail-main { padding-bottom: 2rem; }

.detail-title-bar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.75rem; gap: 1rem; }
.detail-title-bar h1 { font-size: 1.875rem; font-weight: 700; color: var(--detail-text-dark); margin-bottom: 4px; line-height: 1.2; }
.detail-title-bar h1.mobile { font-size: 1.5rem; }

.detail-address { display: flex; align-items: center; gap: 6px; color: var(--detail-text-med); font-size: 1rem; }
.detail-address i[data-lucide] { width: 16px; height: 16px; flex-shrink: 0; }
.detail-address.mobile { font-size: 0.875rem; }
.detail-address.mobile i[data-lucide] { width: 14px; height: 14px; }

.rating-box { display: flex; align-items: center; gap: 0.75rem; }
.rating-label-text { text-align: right; }
.rating-label-text .label { font-size: 0.875rem; font-weight: 600; color: var(--detail-text-dark); }
.rating-label-text .count { font-size: 0.75rem; color: var(--detail-text-med); display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.rating-badge { background: var(--detail-yellow-rating); color: var(--white); font-weight: 700; font-size: 1.125rem; padding: 0.5rem 0.75rem; border-radius: 8px 8px 8px 0; display: inline-flex; align-items: center; gap: 6px; min-width: 52px; justify-content: center; }
.rating-badge i[data-lucide] { width: 16px; height: 16px; fill: var(--white); }
.rating-badge.mobile { font-size: 0.875rem; padding: 4px 8px; min-width: 40px; }
.rating-badge.mobile i[data-lucide] { width: 14px; height: 14px; }

.rating-row-mobile { display: flex; align-items: center; gap: 0.5rem; margin: 0.75rem 0 1rem; }
.rating-row-mobile .label-sm { font-weight: 600; color: var(--detail-text-dark); font-size: 0.875rem; }
.rating-row-mobile .count-sm { font-size: 0.75rem; color: var(--detail-text-med); display: flex; align-items: center; gap: 4px; }

.md-hidden { display: block; }
.mobile-hidden { display: none; }
@media (min-width: 768px) {
    .md-hidden { display: none; }
    .mobile-hidden { display: block; }
}

.detail-gallery-new {
    display: block;
    position: relative;
    margin-bottom: 1rem;
}

.gallery-mobile {
    position: relative;
    height: 250px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--bg-gray-100);
}
.gallery-mobile img { width: 100%; height: 100%; object-fit: cover; }

.gallery-desktop { display: none; }
@media (min-width: 768px) {
    .gallery-mobile { display: none; }
    .gallery-desktop { display: block; }
}

.gallery-big { position: relative; height: 380px; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-gray-100); margin-bottom: 8px; cursor: pointer; }
.gallery-big img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.gallery-big:hover img { transform: scale(1.05); }

.gallery-small-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 1rem; }
.gallery-small { position: relative; height: 180px; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-gray-100); cursor: pointer; }
.gallery-small img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.gallery-small:hover img { transform: scale(1.05); }

.gallery-placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-gray-400); width: 100%; height: 100%; }
.gallery-placeholder i[data-lucide] { width: 64px; height: 64px; stroke-width: 1.2; opacity: 0.5; }

.gallery-empty { height: 300px; border-radius: var(--radius-lg); background: linear-gradient(to bottom right, var(--detail-primary-10), var(--detail-primary-20)); display: flex; align-items: center; justify-content: center; }
@media (min-width: 768px) { .gallery-empty { height: 500px; } }
.gallery-empty-content { text-align: center; }
.gallery-empty-content i[data-lucide] { width: 80px; height: 80px; color: var(--detail-primary-40); margin: 0 auto 12px; }
.gallery-empty-content span { color: var(--detail-text-med); font-size: 0.875rem; }

.detail-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .detail-layout { grid-template-columns: 8fr 4fr; }
}

.detail-content h2 { font-size: 1.25rem; font-weight: 700; color: var(--detail-text-dark); margin-bottom: 0.75rem; }
.detail-content h2.mobile { font-size: 1.125rem; margin-bottom: 0.625rem; }
.detail-section { margin-bottom: 1rem; }
.detail-hr { border: none; border-top: 1px solid var(--detail-border); margin: 1rem 0; }

.distance-row { display: flex; align-items: center; gap: 4px; color: var(--detail-text-med); font-size: 0.875rem; margin-bottom: 1rem; flex-wrap: wrap; }
.distance-row span { display: inline-flex; align-items: center; gap: 4px; }
.distance-row i[data-lucide] { width: 16px; height: 16px; color: var(--primary); }
.distance-row strong { font-weight: 600; color: var(--detail-text-dark); }
.distance-row .sep { color: #ccc; margin: 0 6px; }

.map-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.625rem 1rem;
    background: var(--detail-primary-5);
    color: var(--primary);
    border: 1px solid var(--detail-primary-20);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s;
    margin-bottom: 1rem;
    cursor: pointer;
    font-family: inherit;
}
.map-btn:hover { background: var(--detail-primary-10); text-decoration: none; }
.map-btn i[data-lucide] { width: 16px; height: 16px; }

.service-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.service-pill {
    background: var(--detail-pill-bg);
    color: var(--detail-text-dark);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
}
.service-pill.mobile { font-size: 0.75rem; }

.legal-accordion {
    border: 1px solid var(--detail-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
}
.legal-accordion-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}
.legal-accordion-btn:hover { background: var(--detail-primary-5); }
.legal-accordion-btn span { font-size: 1rem; font-weight: 600; color: var(--detail-text-dark); }
.legal-accordion-btn i[data-lucide] { width: 24px; height: 24px; color: var(--detail-text-med); transition: transform 0.3s; }
.legal-accordion-btn.open i[data-lucide] { transform: rotate(180deg); }
.legal-accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.legal-accordion-body.open { max-height: 2000px; }
.legal-accordion-body-inner { padding: 0 1.25rem 1.25rem; color: var(--detail-text-med); font-size: 0.875rem; line-height: 1.65; }

.price-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 1rem;
}
.price-cell {
    background: var(--detail-bg);
    border: 1px solid var(--detail-border);
    border-radius: var(--radius);
    padding: 12px;
}
.price-cell .day-num { font-size: 0.75rem; color: var(--detail-text-med); }
.price-cell .day-price { font-weight: 700; color: var(--primary); font-size: 1.125rem; margin-top: 2px; }

.review-card { background: var(--detail-bg); border-radius: var(--radius-lg); padding: 1rem; margin-bottom: 8px; }
.review-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 6px; }
.stars-small { display: inline-flex; gap: 1px; }
.stars-small i[data-lucide] { width: 14px; height: 14px; color: var(--yellow); fill: var(--yellow); }
.stars-small i[data-lucide].empty { color: #d1d5db; fill: none; }
.review-card-author { font-size: 0.875rem; font-weight: 600; color: var(--detail-text-dark); }
.review-card p { font-size: 0.875rem; color: var(--detail-text-med); line-height: 1.65; }

.booking-sidebar {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--detail-border);
    overflow: hidden;
}
@media (min-width: 768px) {
    .booking-sidebar { position: sticky; top: 80px; max-height: calc(100vh - 6rem); overflow-y: auto; }
}

.booking-sidebar-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--detail-border);
}
.booking-sidebar-header h3 { font-size: 1rem; font-weight: 700; color: var(--text-gray-900); }
.booking-sidebar-body { padding: 1rem; }

.booking-dates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--detail-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.booking-dates-grid > div { padding: 0.75rem; }
.booking-dates-grid > div:first-child { border-right: 1px solid var(--detail-border); }
.booking-dates-grid .lbl {
    font-size: 10px;
    font-weight: 700;
    color: var(--detail-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.booking-dates-grid .val {
    font-size: 0.875rem;
    font-weight: 700;
    color: #171717;
    margin-top: 2px;
}
.booking-dates-grid .time {
    font-size: 0.75rem;
    color: var(--detail-text-soft);
}

.booking-days-text {
    font-size: 0.75rem;
    color: var(--detail-text-soft);
    margin-bottom: 1rem;
}
.booking-days-text strong { font-weight: 600; color: #171717; }

.booking-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.booking-price-row .days { font-size: 0.75rem; color: var(--detail-text-soft); }
.booking-price-row .total { font-size: 1.5rem; font-weight: 700; color: #171717; }
.booking-price-note {
    text-align: right;
    font-size: 0.75rem;
    color: var(--detail-text-soft);
    margin-bottom: 1rem;
}

.booking-btn {
    width: 100%;
    background: var(--primary);
    color: var(--white);
    font-weight: 700;
    padding: 0.75rem;
    border-radius: var(--radius);
    border: none;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.booking-btn:hover { background: #094a82; }

.booking-no-dates {
    text-align: center;
    padding: 1.5rem 0;
}
.booking-no-dates i[data-lucide] {
    width: 40px;
    height: 40px;
    color: var(--detail-primary-40);
    margin: 0 auto 12px;
    display: block;
}
.booking-no-dates h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #171717;
    margin-bottom: 0.5rem;
}
.booking-no-dates p {
    color: var(--detail-text-soft);
    margin-bottom: 1rem;
    font-size: 0.75rem;
}

.booking-benefits {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--detail-border);
    background: var(--detail-bg-soft);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.booking-benefits .benefit {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--detail-green);
}
.booking-benefits .benefit svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .stats-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .stat-value { font-size: 1.2rem; }
    .detail-info { grid-template-columns: 1fr; }
    .detail-sidebar { position: static; }
    .detail-gallery { grid-template-columns: 1fr; }
    .detail-gallery .gallery-main { grid-row: auto; }
    .section-header { flex-direction: column; align-items: flex-start; }
    .table { font-size: 0.8rem; }
    .table th, .table td { padding: 0.45rem 0.55rem; }
    .auth-form { margin: 1rem; padding: 1.5rem; }
    .compare-table { display: block; overflow-x: auto; }
    .calendar-table { display: block; overflow-x: auto; }
    .photo-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { flex-direction: column; gap: 0; }
    .form-group { min-width: 100%; }
}

.admin-body { background: #f8f9fa; min-height: 100vh; }

.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 256px;
    height: 100vh;
    background: #01204A;
    border-right: 1px solid rgba(255,255,255,0.08);
    box-shadow: 2px 0 10px rgba(0,0,0,0.12);
    z-index: 50;
    display: none;
    flex-direction: column;
    color: #fff;
}

@media (min-width: 1024px) {
    .admin-sidebar { display: flex; }
    .admin-main { margin-left: 256px; min-height: 100vh; }
}

.admin-sidebar-header { padding: 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); }

.admin-sidebar-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.admin-sidebar-brand:hover { opacity: 0.85; text-decoration: none; }
.admin-sidebar-brand img { height: 32px; width: auto; }

.admin-badge {
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.operator-brand-text h1 { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0; }
.operator-brand-text p { font-size: 0.72rem; color: rgba(255,255,255,0.7); margin: 0; }

.admin-sidebar-nav { flex: 1; padding: 0.75rem 0; overflow-y: auto; }
.admin-sidebar-nav > ul { list-style: none; padding: 0 10px; display: flex; flex-direction: column; gap: 2px; position: relative; }

.admin-nav-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: rgba(255,255,255,0.78);
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    text-align: left;
    position: relative;
    z-index: 1;
}

.admin-nav-indicator { display: none; }

.admin-sidebar-nav > ul > li { position: relative; z-index: 1; }
.admin-nav-link:hover { background: rgba(255,255,255,0.1); color: #fff; text-decoration: none; }
.admin-nav-link.active:not(.admin-nav-toggle) {
    background: #fff;
    color: #01204A;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.admin-nav-link.active:not(.admin-nav-toggle):hover { background: #fff; color: #01204A; }
.admin-nav-toggle.active { color: #fff; }
.admin-nav-link i[data-lucide] { width: 18px; height: 18px; flex-shrink: 0; }

/* Custom (SVG asset) menu icons: mask-tinted to the current menu text colour so
   they match lucide icons and follow the active-state colour. */
.admin-nav-customicon {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
}
.admin-mobile-tab .admin-nav-customicon { width: 22px; height: 22px; }

/* Sidebar section header — groups the menu for readability. */
.admin-sidebar-nav .admin-nav-section {
    list-style: none;
    padding: 0 16px;
    margin: 18px 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}
.admin-sidebar-nav .admin-nav-section:first-child { margin-top: 4px; }

/* Guest initials avatar (bookings / guest tables). */
.op-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
}
.op-guest {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.op-guest-text { min-width: 0; }
.op-guest-name { font-weight: 600; color: #111827; line-height: 1.2; }

/* The `hidden` attribute must win over component display rules (max-quantity
   fields, modal wrappers that are toggled hidden). */
[hidden] { display: none !important; }

/* Arrivals/departures table (operator dashboard) — date+time, plate pill, kebab. */
.arrivals-table .op-dt-date { color: #111827; }
.arrivals-table .op-dt-time { color: #6b7280; margin-left: 10px; }
.op-plate {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #f8fafc;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: #0f2747;
}
.arrivals-row { cursor: pointer; transition: background 0.12s; }
.arrivals-row:hover { background: #f8fafc; }
.op-row-actions { text-align: right; width: 44px; }
.op-kebab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    color: #94a3b8;
}
.arrivals-row:hover .op-kebab { color: #475569; background: #eef2f7; }
.op-kebab i[data-lucide], .op-kebab svg { width: 18px; height: 18px; }

.admin-nav-chev { width: 14px; height: 14px; margin-left: auto; opacity: 0.45; transition: transform 0.2s; flex-shrink: 0; }
.submenu-open > .admin-nav-toggle .admin-nav-chev { transform: rotate(180deg); opacity: 0.7; }

.admin-submenu {
    list-style: none;
    padding: 2px 0 6px 0;
    margin: 0;
    display: none;
    flex-direction: column;
    gap: 0;
}
.submenu-open > .admin-submenu { display: flex; }

.admin-nav-sublink {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 40px;
    border-radius: 7px;
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    font-weight: 450;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    position: relative;
    z-index: 1;
}
.admin-nav-sublink:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.admin-nav-sublink.active {
    color: #fff;
    font-weight: 600;
    background: rgba(255,255,255,0.14);
}

.admin-main { transition: opacity 180ms ease; }
.admin-main.is-nav-loading { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
    .admin-main { transition: none; }
}

.admin-sidebar-footer { border-top: 1px solid rgba(255,255,255,0.1); padding: 1rem; }
.admin-user-box { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.admin-user-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #01204A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #fff;
}
.admin-user-avatar-img { background: transparent; overflow: hidden; padding: 0; }
.admin-user-avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

.admin-user-info { flex: 1; min-width: 0; }
.admin-user-name { font-weight: 600; color: #fff; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user-email { font-size: 0.75rem; color: rgba(255,255,255,0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.admin-logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    color: rgba(255,170,170,0.9);
    background: rgba(220,38,38,0.08);
    border: 1px solid rgba(254,202,202,0.2);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-decoration: none;
}

.admin-logout-btn:hover { background: rgba(254,202,202,0.14); color: #fecaca; border-color: rgba(254,202,202,0.3); text-decoration: none; }
.admin-logout-btn i[data-lucide] { width: 20px; height: 20px; flex-shrink: 0; }

.admin-main { min-height: 100vh; padding-bottom: 96px; }
@media (min-width: 1024px) { .admin-main { padding-bottom: 0; } }

.admin-page { padding: 1.5rem 1rem; max-width: 1280px; }
@media (min-width: 640px) { .admin-page { padding: 1.5rem; } }
@media (min-width: 1024px) { .admin-page { padding: 2rem; } }

.admin-page-header { margin-bottom: 1.5rem; }
.admin-page-header h1 { font-size: 1.5rem; font-weight: 700; color: #111827; margin-bottom: 4px; }
.admin-page-header p { color: #6b7280; font-size: 0.9rem; }

.welcome-banner {
    display: flex; gap: 20px; align-items: flex-start;
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border: 1px solid #bfdbfe; border-radius: 12px;
    padding: 24px 28px; margin-bottom: 1.5rem;
}
.welcome-banner-icon { flex-shrink: 0; }
.welcome-banner-icon i[data-lucide] { width: 36px; height: 36px; color: #01204A; }
.welcome-banner-body h2 { font-size: 1.15rem; font-weight: 700; color: #111827; margin: 0 0 6px; }
.welcome-banner-body > p { font-size: 0.88rem; color: #4b5563; margin: 0 0 16px; line-height: 1.5; }
.welcome-checklist { display: flex; flex-direction: column; gap: 10px; }
.welcome-check {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: #fff; border-radius: 8px;
    border: 1px solid #e5e7eb;
}
.welcome-check.done { border-color: #bbf7d0; background: #f0fdf4; }
.welcome-check i[data-lucide] { width: 20px; height: 20px; color: #9ca3af; flex-shrink: 0; }
.welcome-check.done i[data-lucide] { color: #16a34a; }
.welcome-check span { flex: 1; font-size: 0.88rem; font-weight: 500; color: #374151; }
.welcome-check.done span { color: #15803d; }
.welcome-check .btn { margin-left: auto; flex-shrink: 0; }
@media (max-width: 640px) {
    .welcome-banner { flex-direction: column; gap: 12px; padding: 18px; }
    .welcome-banner-icon { display: none; }
}

.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }

.admin-stat-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.admin-stat-card i[data-lucide] { width: 24px; height: 24px; color: #01204A; margin-bottom: 8px; }
.admin-stat-card .label { font-size: 0.75rem; color: #6b7280; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.admin-stat-card .value { font-size: 1.75rem; font-weight: 700; color: #111827; margin-top: 4px; line-height: 1.1; }

.admin-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; margin-bottom: 1rem; }
.admin-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.admin-card-header h2 { font-size: 1rem; font-weight: 600; color: #111827; margin: 0; }
.admin-card-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.72rem; font-weight: 600; padding: 3px 8px;
    border-radius: 20px; white-space: nowrap;
}
.admin-card-badge-muted { background: #f3f4f6; color: #6b7280; }
.admin-card-badge-public { background: #ecfdf5; color: #059669; }
.admin-card-body { padding: 1.25rem; }
.admin-card-link { font-size: 0.85rem; color: #01204A; text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.admin-card-link i[data-lucide] { width: 14px; height: 14px; }
.admin-card-link:hover { text-decoration: underline; }

.admin-alert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.admin-alert-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid #f59e0b;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.admin-alert-card:hover { background: #fffbeb; }
.admin-alert-icon { width: 40px; height: 40px; border-radius: 8px; background: #fef3c7; color: #b45309; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.admin-alert-icon i[data-lucide] { width: 20px; height: 20px; }
.admin-alert-body { flex: 1; min-width: 0; }
.admin-alert-title { font-size: 0.9rem; font-weight: 600; color: #111827; margin-bottom: 2px; }
.admin-alert-sub { font-size: 0.8rem; color: #6b7280; }
.admin-alert-chev { width: 18px; height: 18px; color: #9ca3af; flex-shrink: 0; }

.admin-lot-summary { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; justify-content: space-between; }
.admin-lot-info { flex: 1; min-width: 240px; }
.admin-lot-info h3 { font-size: 1.1rem; font-weight: 600; color: #111827; margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.admin-lot-address { color: #6b7280; font-size: 0.9rem; display: flex; align-items: center; gap: 6px; margin-bottom: 0.75rem; }
.admin-lot-address i[data-lucide] { width: 14px; height: 14px; }
.admin-lot-stats { display: flex; gap: 1.5rem; font-size: 0.9rem; color: #374151; }
.admin-lot-stats strong { color: #111827; }
.admin-lot-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.dash-date-nav {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.dash-date-nav button {
    width: 36px; height: 36px; border: 1px solid #e5e7eb; background: #fff;
    border-radius: 8px; cursor: pointer; display: flex; align-items: center;
    justify-content: center; color: #374151; transition: all 0.1s;
}
.dash-date-nav button:hover { border-color: #01204A; color: #01204A; }
.dash-date-nav button svg { width: 18px; height: 18px; }
.dash-date-label { font-size: 1.05rem; font-weight: 600; color: #111827; }
.dash-date-today-btn {
    width: auto !important; padding: 0 14px; font-size: 0.82rem; font-weight: 600;
}

.dash-occupancy-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 16px; margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .dash-occupancy-row { grid-template-columns: 1fr; } }

.dash-occupancy-card, .dash-today-card, .dash-revenue-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px;
}

.dash-occupancy-card { display: flex; align-items: center; gap: 18px; }
.dash-occ-ring { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
.dash-occ-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#occ_arc { transition: stroke-dasharray 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.4s ease; }
.dash-occ-pct {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 700; color: #111827;
}
.dash-occ-title { font-size: 0.82rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.dash-occ-nums { display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; color: #4b5563; }
.dash-occ-nums strong { color: #111827; }

.dash-today-card { display: flex; flex-direction: column; }
.dash-today-title { font-size: 0.82rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 12px; }
.dash-today-nums { display: flex; gap: 0; flex: 1; align-items: stretch; }
.dash-today-item { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: center; }
.dash-today-item i[data-lucide], .dash-today-item svg { width: 22px; height: 22px; flex-shrink: 0; }
.dash-today-sep { width: 1px; background: #e5e7eb; margin: 4px 0; }
.dash-today-arrive i[data-lucide], .dash-today-arrive svg { color: #10b981; }
.dash-today-depart i[data-lucide], .dash-today-depart svg { color: #f59e0b; }
.dash-today-val { font-size: 1.5rem; font-weight: 700; color: #111827; line-height: 1; }
.dash-today-lbl { font-size: 0.8rem; color: #6b7280; }

.dash-revenue-card { display: flex; flex-direction: column; justify-content: center; }
.dash-rev-row { display: flex; gap: 0; margin-bottom: 10px; }
.dash-rev-row > div { flex: 1; padding: 0 16px; }
.dash-rev-row > div + div { border-left: 1px solid #e5e7eb; }
.dash-rev-row > div:first-child { padding-left: 0; }
.dash-rev-label { font-size: 0.82rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.dash-rev-value { font-size: 1.25rem; font-weight: 700; color: #111827; }
.dash-rev-bookings { font-size: 0.82rem; color: #9ca3af; }

.dash-day-strip {
    display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 4px;
}
.dash-day-item {
    flex: 0 0 60px; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 4px; border-radius: 8px; cursor: default;
    transition: background 0.1s;
}
.dash-day-item:hover { background: #f3f4f6; }
.dash-day-today { background: #eff6ff; border: 1.5px solid #01204A; }
.dash-day-past { opacity: 0.45; }
.dash-day-name { font-size: 0.68rem; font-weight: 600; color: #6b7280; text-transform: capitalize; }
.dash-day-today .dash-day-name { color: #01204A; }
.dash-day-num { font-size: 1rem; font-weight: 700; color: #111827; line-height: 1; }
.dash-day-today .dash-day-num { color: #01204A; }
.dash-day-bar { width: 24px; height: 32px; background: #f1f5f9; border-radius: 4px; position: relative; overflow: hidden; }
.dash-day-bar-fill { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 4px; transition: height 0.3s; }
.dash-day-pct { font-size: 0.68rem; font-weight: 600; color: #374151; }
.dash-day-info { display: flex; gap: 4px; min-height: 16px; }
.dash-di-in, .dash-di-out {
    font-size: 0.65rem; font-weight: 700; padding: 1px 4px;
    border-radius: 3px; line-height: 1.3;
}
.dash-di-in { background: #d1fae5; color: #065f46; }
.dash-di-out { background: #fef3c7; color: #92400e; }

.dash-guest-link { color: #01204A; text-decoration: none; font-weight: 700; }
.dash-guest-link:hover { text-decoration: underline; }

.dash-booking-backdrop {
    display: none; position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(2px);
}
.dash-booking-backdrop.open { display: block; }
.dash-booking-modal {
    display: none; position: fixed; z-index: 1000;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: #fff; border-radius: 14px;
    max-width: 480px; width: calc(100% - 32px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    overflow: hidden;
}
.dash-booking-modal.open { display: block; }
.dash-booking-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid #e5e7eb;
}
.dash-booking-head h3 { font-size: 1.1rem; font-weight: 700; color: #111827; margin: 0; }
.dash-booking-head button {
    width: 32px; height: 32px; border: none; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; border-radius: 6px;
    color: #6b7280;
}
.dash-booking-head button:hover { background: #f3f4f6; }
.dash-booking-head button svg { width: 18px; height: 18px; }
.dash-booking-contact {
    display: flex; gap: 16px; padding: 0 22px 14px; flex-wrap: wrap;
}
.dash-booking-contact span {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.85rem; color: #4b5563;
}
.dash-booking-contact svg { width: 14px; height: 14px; color: #9ca3af; }
.dash-booking-body { padding: 0 22px 22px; max-height: 60vh; overflow-y: auto; }
.dash-guest-count { font-size: 0.82rem; font-weight: 600; color: #6b7280; margin-bottom: 12px; }

.dash-bk-card {
    padding: 14px; border: 1px solid #e5e7eb; border-radius: 10px;
    margin-bottom: 10px; border-left: 3px solid #10b981;
}
.dash-bk-card.dash-bk-cancelled { border-left-color: #ef4444; opacity: 0.6; }
.dash-bk-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dash-bk-ref { font-size: 0.78rem; font-weight: 600; color: #6b7280; background: #f3f4f6; padding: 2px 8px; border-radius: 4px; }
.dash-bk-price { font-size: 0.95rem; font-weight: 700; color: #111827; }
.dash-bk-dates { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: #374151; margin-bottom: 6px; }
.dash-bk-arrow { color: #9ca3af; }
.dash-bk-meta { display: flex; gap: 12px; font-size: 0.82rem; color: #6b7280; flex-wrap: wrap; }

.guest-profile-top {
    display: flex; align-items: center; gap: 20px;
    margin-bottom: 1.5rem;
}
.guest-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: #01204A; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 700; flex-shrink: 0;
}
.guest-info h2 { font-size: 1.2rem; font-weight: 700; color: #111827; margin: 0 0 4px; }
.guest-contact { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.guest-contact a {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.88rem; color: #01204A; text-decoration: none;
}
.guest-contact a:hover { text-decoration: underline; }
.guest-contact svg { width: 14px; height: 14px; }
.guest-since { font-size: 0.8rem; color: #9ca3af; }

.guest-stats-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px; margin-bottom: 1.5rem;
}
.guest-stat {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 16px; text-align: center;
}
.guest-stat-val { font-size: 1.3rem; font-weight: 700; color: #111827; }
.guest-stat-lbl { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }

.guest-vehicles { display: flex; gap: 10px; flex-wrap: wrap; }
.guest-vehicle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; background: #f9fafb; border: 1px solid #e5e7eb;
    border-radius: 8px; font-size: 0.88rem; color: #374151;
}
.guest-vehicle svg { width: 16px; height: 16px; color: #6b7280; }
.guest-vehicle strong { color: #111827; }
.guest-vehicle span { color: #6b7280; }

.admin-filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.admin-filter-bar select, .admin-filter-bar input[type="date"] {
    height: 40px; padding: 0 0.75rem; border: 1px solid #e5e7eb; border-radius: 6px;
    font-size: 0.875rem; color: #111827; background: #fff; font-family: inherit;
}
.admin-filter-bar select:focus, .admin-filter-bar input:focus { outline: none; border-color: #01204A; box-shadow: 0 0 0 3px rgba(1,32,74,0.1); }
.admin-filter-search { position: relative; flex: 1; min-width: 220px; }
.admin-filter-search i[data-lucide] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #9ca3af; pointer-events: none; }
.admin-filter-search input { width: 100%; height: 40px; padding: 0 0.75rem 0 2.25rem; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 0.875rem; color: #111827; background: #fff; font-family: inherit; }
.admin-filter-search input:focus { outline: none; border-color: #01204A; box-shadow: 0 0 0 3px rgba(1,32,74,0.1); }

.admin-row-sub { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }

.admin-pagination { display: flex; gap: 4px; justify-content: center; margin-top: 1.5rem; }
.admin-pagination a, .admin-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
    font-size: 0.85rem; color: #374151; text-decoration: none;
}
.admin-pagination a:hover { background: #f9fafb; }
.admin-pagination .active { background: #01204A; border-color: #01204A; color: #fff; }
.admin-pagination .ellipsis {
    min-width: 24px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-weight: 600;
}
.admin-pagination a i[data-lucide],
.admin-pagination a > svg { width: 16px; height: 16px; }

.admin-tab-bar { display: flex; gap: 4px; margin-bottom: 1rem; padding: 4px; background: #f3f4f6; border-radius: 8px; width: fit-content; flex-wrap: wrap; }
.admin-tab { padding: 6px 14px; border-radius: 6px; font-size: 0.85rem; font-weight: 500; color: #6b7280; text-decoration: none; transition: all 0.15s; }
.admin-tab:hover { color: #111827; }
.admin-tab.active { background: #fff; color: #01204A; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

.admin-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-row-actions form { margin: 0; display: inline-flex; }

.btn-ghost-danger { background: transparent; color: #b91c1c; border: 1px solid #fecaca; }
.btn-ghost-danger:hover { background: #fee2e2; }

.admin-rating { color: #FFB700; font-size: 0.95rem; letter-spacing: 1px; }

.admin-inline-status-form { display: inline-flex; gap: 6px; align-items: center; }
.admin-inline-status-form select { height: 32px; padding: 0 0.5rem; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 0.8rem; background: #fff; }

.admin-commission-form { display: inline-flex; gap: 8px; align-items: center; }
.admin-commission-form input { width: 90px; height: 32px; padding: 0 0.5rem; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 0.85rem; background: #fff; font-family: inherit; }
.admin-commission-form input:focus { outline: none; border-color: #01204A; box-shadow: 0 0 0 3px rgba(1,32,74,0.1); }

.admin-reject-form { display: inline-flex; gap: 6px; align-items: center; }
.admin-reject-form input { width: 140px; height: 32px; padding: 0 0.5rem; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 0.8rem; background: #fff; font-family: inherit; }
.admin-reject-form input:focus { outline: none; border-color: #01204A; box-shadow: 0 0 0 3px rgba(1,32,74,0.1); }

.admin-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }

.admin-pricing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }

.pricing-tier-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 12px;
    padding: 12px 16px;
    border-radius: 10px;
    border-left: 4px solid;
    font-weight: 600;
}
.pricing-tier-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.pricing-tier-header i[data-lucide],
.pricing-tier-header svg {
    width: 20px;
    height: 20px;
}
.pricing-tier-outdoor,
.pricing-tier-indoor {
    background: #f8fafc;
    border-left-color: #e5e7eb;
    color: #1a2433;
}
.pricing-tier-header:first-of-type { margin-top: 0; }

.pricing-responsibility {
    margin: 0 0 20px;
    padding: 14px 16px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    transition: background 0.2s, border-color 0.2s;
}
.pricing-responsibility.is-accepted {
    background: #f0fdf4;
    border-color: #86efac;
    border-left-color: #22c55e;
}
.pricing-responsibility-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin: 0;
}
.pricing-accept-checkbox {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #01204A;
    flex-shrink: 0;
    cursor: pointer;
}
.pricing-responsibility-body {
    flex: 1;
    font-size: 0.86rem;
    color: #78350f;
    line-height: 1.45;
}
.pricing-responsibility.is-accepted .pricing-responsibility-body { color: #166534; }
.pricing-responsibility-body strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: #92400e;
}
.pricing-responsibility.is-accepted .pricing-responsibility-body strong { color: #14532d; }

.btn.is-locked,
button[type="submit"].is-locked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.booking-terms {
    margin: 14px 0;
    padding: 14px 16px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    transition: background 0.2s, border-color 0.2s;
}
.booking-terms:has(input:checked) {
    background: #f0fdf4;
    border-color: #86efac;
    border-left-color: #22c55e;
}
.booking-terms-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin: 0;
}
.booking-terms-box input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: #01204A;
    flex-shrink: 0;
    cursor: pointer;
}
.booking-terms-text {
    flex: 1;
    font-size: 0.88rem;
    color: #78350f;
    line-height: 1.5;
}
.booking-terms:has(input:checked) .booking-terms-text { color: #166534; }
.booking-terms-text a { color: inherit; text-decoration: underline; font-weight: 600; }
.booking-terms-text a:hover { color: #01204A; }

.booking-terms.is-invalid {
    background: #fef2f2;
    border-color: #fca5a5;
    border-left-color: #dc2626;
}
.booking-terms.is-invalid .booking-terms-text { color: #991b1b; }
.booking-terms-error {
    margin-top: 8px;
    padding-left: 32px;
    font-size: 0.85rem;
    color: #dc2626;
    font-weight: 600;
}
@keyframes bkg-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.booking-terms.is-shaking { animation: bkg-shake 0.45s ease-in-out; }

.booking-cancel-note {
    margin: 12px 0 20px;
    text-align: center;
    font-size: 0.85rem;
    color: #6b7280;
}
.bfo-sidebar .booking-cancel-note {
    margin-bottom: 24px;
    padding: 0 16px;
}

.svc-list { display: flex; flex-direction: column; gap: 12px; }
.svc-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 10px;
}
.svc-row-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #01204A;
    flex-shrink: 0;
}
.svc-row-icon i[data-lucide], .svc-row-icon svg { width: 22px; height: 22px; }
.svc-row-body { flex: 1; min-width: 0; }
.svc-row-name { font-weight: 600; font-size: 1rem; color: #111827; margin-bottom: 4px; }
.svc-row-desc { font-size: 0.88rem; color: #6b7280; margin-bottom: 6px; }
.svc-row-price { font-size: 0.9rem; color: #111827; }
.svc-row-price strong { color: #01204A; }
.svc-row-seasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.svc-season-badge {
    padding: 3px 8px;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 0.76rem;
    color: #374151;
}
.svc-row-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
@media (max-width: 640px) {
    .svc-row { flex-direction: column; }
    .svc-row-actions { flex-direction: row; width: 100%; }
    .svc-row-actions .btn { flex: 1; }
}

.svc-request-form { display: flex; flex-direction: column; gap: 10px; }
.svc-request-list { display: flex; flex-direction: column; gap: 10px; }
.svc-request-item {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 8px;
}
.svc-request-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.svc-request-type {
    font-weight: 600;
    color: #01204A;
    font-size: 0.9rem;
}
.svc-request-date { margin-left: auto; font-size: 0.8rem; color: #9ca3af; }
.svc-request-body > div { font-size: 0.88rem; color: #374151; padding: 2px 0; }
.svc-request-reply {
    margin-top: 8px;
    padding: 8px 10px;
    background: #eff6ff;
    border-left: 3px solid #01204A;
    border-radius: 4px;
    color: #1e3a8a;
}

.svc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 100;
}
.svc-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    background: #fff;
    border-radius: 12px;
    width: min(560px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.svc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eef0f3;
}
.svc-modal-header h3 { margin: 0; font-size: 1.05rem; }
.svc-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #6b7280;
    border-radius: 6px;
}
.svc-modal-close:hover { background: #f3f4f6; color: #111827; }
.svc-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.svc-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid #eef0f3;
}

.svc-req-adm-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.86rem;
    color: #374151;
    margin-bottom: 12px;
}
.svc-req-adm-body > div { font-size: 0.9rem; padding: 3px 0; }
.svc-req-adm-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.svc-req-adm-form textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.88rem;
    resize: vertical;
}
.svc-req-adm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.svc-req-adm-processed {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    color: #6b7280;
}

.req-type-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.req-type-edit { background: #eff6ff; color: #1d4ed8; }
.req-type-service { background: #f0fdf4; color: #15803d; }

.svc-admin-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 10px;
}
.svc-admin-fields {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.svc-admin-fields input, .svc-admin-fields select, .svc-admin-fields textarea {
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.86rem;
    width: 100%;
}
.svc-admin-fields textarea { grid-column: 1 / -1; }
.svc-admin-actions { display: flex; flex-direction: column; gap: 6px; }
.svc-catalog-usage { font-size: 0.76rem; color: #9ca3af; text-align: right; }
button.svc-row-icon {
    border: 1px dashed transparent;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
button.svc-row-icon:hover { border-color: #01204A; background: #eff6ff; }

.svc-assign-list { display: flex; flex-direction: column; gap: 10px; }
.svc-assign-row {
    display: grid;
    grid-template-columns: auto 44px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    transition: border-color 0.15s, background 0.15s;
}
.svc-assign-row.is-checked {
    border-color: #01204A;
    background: #f0f7fc;
}
.svc-assign-check { cursor: pointer; display: inline-flex; align-items: center; }
.svc-assign-check input { position: absolute; opacity: 0; pointer-events: none; }
.svc-assign-box {
    width: 20px; height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    position: relative;
    transition: background 0.12s, border-color 0.12s;
}
.svc-assign-check input:checked + .svc-assign-box {
    background: #01204A;
    border-color: #01204A;
}
.svc-assign-check input:checked + .svc-assign-box::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.svc-assign-icon {
    width: 44px; height: 44px;
    background: #f3f4f6;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #01204A;
}
.svc-assign-icon i[data-lucide], .svc-assign-icon svg { width: 22px; height: 22px; }
.svc-assign-info { min-width: 0; }
.svc-assign-name { font-weight: 600; color: #111827; margin-bottom: 2px; }
.svc-assign-desc { font-size: 0.85rem; color: #6b7280; }
.svc-assign-override { display: flex; gap: 8px; flex-wrap: wrap; }
.svc-assign-override label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.72rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.svc-assign-override input, .svc-assign-override select {
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.88rem;
    min-width: 110px;
}
.svc-assign-variants {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px dashed #e5e7eb;
    font-size: 0.82rem;
    align-items: center;
}
.svc-assign-variants-label { color: #6b7280; font-weight: 500; }
@media (max-width: 900px) {
    .svc-assign-row { grid-template-columns: auto 44px 1fr; }
    .svc-assign-override { grid-column: 2 / -1; }
}

.booking-step-icon-warm {
    background: linear-gradient(135deg, #fef3c7, #fcd34d) !important;
    color: #92400e !important;
}
.upsell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.upsell-tile {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border: 2px solid #eef0f3;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.upsell-tile:hover { border-color: #01204A; transform: translateY(-1px); }
.upsell-tile.is-selected {
    border-color: #22c55e;
    background: #f0fdf4;
}
.upsell-tile input { position: absolute; opacity: 0; pointer-events: none; }
.upsell-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #01204A;
    flex-shrink: 0;
}
.upsell-tile.is-selected .upsell-tile-icon { background: #dcfce7; color: #16a34a; }
.upsell-tile-icon i[data-lucide], .upsell-tile-icon svg { width: 22px; height: 22px; }
.upsell-tile-body { flex: 1; min-width: 0; }
.upsell-tile-name { font-weight: 600; font-size: 0.95rem; color: #111827; margin-bottom: 4px; }
.upsell-tile-desc { font-size: 0.82rem; color: #6b7280; margin-bottom: 6px; line-height: 1.3; }
.upsell-tile-price { font-size: 0.9rem; color: #111827; }
.upsell-tile-price strong { color: #01204A; }
.upsell-tile.is-selected .upsell-tile-price strong { color: #16a34a; }
.upsell-tile-price span { color: #9ca3af; font-size: 0.8rem; }
.upsell-tile-add, .upsell-tile-added {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 600;
}
.upsell-tile-add {
    background: #eff6ff;
    color: #01204A;
}
.upsell-tile-added {
    background: #16a34a;
    color: #fff;
    display: none;
}
.upsell-tile-add i, .upsell-tile-added i { width: 12px; height: 12px; }
.upsell-tile.is-selected .upsell-tile-add { display: none; }
.upsell-tile.is-selected .upsell-tile-added { display: inline-flex; }

.upsell-summary {
    margin-top: 14px;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #166534;
    font-size: 0.92rem;
}
.upsell-summary strong { color: #14532d; font-size: 1rem; }

#upsell_root { display: flex; flex-direction: column; gap: 12px; }
.upsell-svc {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.upsell-svc-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex: 1;
    min-width: 260px;
}
.upsell-svc-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
    color: #01204A;
    flex-shrink: 0;
}
.upsell-svc-icon i[data-lucide], .upsell-svc-icon svg { width: 22px; height: 22px; }
.upsell-svc-body { flex: 1; min-width: 0; }
.upsell-svc-name { font-weight: 600; font-size: 0.95rem; color: #111827; margin-bottom: 3px; }
.upsell-svc-desc { font-size: 0.82rem; color: #6b7280; margin-bottom: 6px; line-height: 1.35; }
.upsell-svc-price { font-size: 0.88rem; color: #111827; }
.upsell-svc-price strong { color: #01204A; }

.upsell-svc-ctrls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.upsell-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #eff6ff;
    color: #01204A;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background 0.15s;
}
.upsell-toggle:hover { background: #dbeafe; }
.upsell-toggle input { accent-color: #01204A; }

.upsell-variant-select {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.88rem;
    background: #fff;
    min-width: 200px;
}
.upsell-variant-select:focus { outline: none; border-color: #01204A; }

.upsell-free {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.upsell-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.upsell-qty-btn {
    width: 32px; height: 32px;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: #374151;
    font-weight: 600;
}
.upsell-qty-btn:hover { background: #f3f4f6; color: #01204A; }
.upsell-qty-val {
    display: inline-block;
    min-width: 36px;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}
.upsell-qty-max { font-size: 0.76rem; color: #9ca3af; }

.upsell-per-vehicle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.upsell-vehicle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: #f9fafb;
    border-radius: 8px;
}
.upsell-vehicle-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #374151;
    min-width: 70px;
}

.svc-row-variants {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.svc-variant-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f9fafb;
    border-radius: 6px;
    font-size: 0.85rem;
    flex-wrap: wrap;
}
.svc-variant-chip strong { color: #111827; }
.svc-variant-chip span:not(.svc-variant-price-tag) { color: #6b7280; flex: 1; }
.svc-variant-price-tag {
    background: #eff6ff;
    color: #01204A;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.svc-row-mode {
    margin-top: 6px;
    font-size: 0.78rem;
    color: #9ca3af;
}

.svc-admin-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 10px;
}
.svc-admin-card .svc-admin-row { padding: 0; background: transparent; border: none; }
.svc-variants-section {
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
}
.svc-variants-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.svc-variants-empty { font-size: 0.85rem; color: #9ca3af; margin-bottom: 8px; }
.svc-variants-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.svc-variant-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
    background: #f9fafb;
    border-radius: 6px;
    font-size: 0.86rem;
}
.svc-variant-row .svc-variant-name { font-weight: 600; color: #111827; }
.svc-variant-row .svc-variant-desc { color: #6b7280; flex: 1; font-size: 0.82rem; }
.svc-variant-row .svc-variant-price { font-weight: 600; color: #01204A; }
.svc-variant-add {
    display: flex;
    gap: 6px;
    align-items: center;
}
.svc-variant-add input {
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.86rem;
}

@media (max-width: 640px) {
    .upsell-svc { flex-direction: column; align-items: stretch; }
    .upsell-svc-ctrls { width: 100%; justify-content: flex-start; }
}
.admin-pricing-cell label { display: block; font-size: 0.7rem; color: #6b7280; margin-bottom: 2px; text-align: center; font-weight: 500; }
.admin-pricing-cell input { width: 100%; height: 34px; padding: 0 6px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 0.85rem; text-align: center; background: #fff; font-family: inherit; }
.admin-pricing-cell input:focus { outline: none; border-color: #01204A; box-shadow: 0 0 0 2px rgba(1,32,74,0.1); }

.admin-pending-card { max-width: 520px; margin: 3rem auto; text-align: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 3rem 2rem; }
.admin-pending-icon { width: 64px; height: 64px; border-radius: 50%; background: #fef3c7; color: #b45309; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.admin-pending-icon i[data-lucide] { width: 32px; height: 32px; }
.admin-pending-card h1 { font-size: 1.4rem; font-weight: 700; color: #111827; margin-bottom: 0.75rem; }
.admin-pending-card p { color: #6b7280; margin-bottom: 0.5rem; }

.admin-impersonation-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 10px 20px; margin: 0; background: #fef3c7; border-bottom: 2px solid #f59e0b;
    font-size: 0.9rem; color: #78350f; flex-wrap: wrap;
}
.admin-impersonation-body { display: flex; align-items: center; gap: 8px; }
.admin-impersonation-body i[data-lucide] { width: 18px; height: 18px; color: #b45309; }
.admin-impersonation-body strong { color: #78350f; }
.admin-impersonation-actions { display: flex; gap: 6px; align-items: center; }
.admin-impersonation-bar.edit-mode {
    background: #dbeafe;
    border-bottom-color: #3b82f6;
    color: #1e3a8a;
}
.admin-impersonation-bar.edit-mode .admin-impersonation-body i[data-lucide],
.admin-impersonation-bar.edit-mode .admin-impersonation-body > svg { color: #1d4ed8; }
.admin-impersonation-bar.edit-mode .admin-impersonation-body strong { color: #1e3a8a; }

.admin-nav-link { position: relative; }
.admin-nav-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #FFB700;
    color: #000;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px #01204A;
    animation: badgePulse 2.2s ease-in-out infinite;
}
.admin-nav-link.active .admin-nav-badge { box-shadow: 0 0 0 2px #fff; }
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.admin-more-sheet li a {
    position: relative;
    display: flex;
    align-items: center;
}
.admin-more-sheet .admin-nav-badge {
    margin-left: auto;
}

.admin-mobile-tab-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.admin-mobile-tab-dot {
    position: absolute;
    top: -2px; right: -4px;
    width: 10px; height: 10px;
    background: #FFB700;
    border: 2px solid #fff;
    border-radius: 50%;
    animation: badgePulse 2.2s ease-in-out infinite;
}
.admin-mobile-tab.active .admin-mobile-tab-dot {
    border-color: #f9fafb;
}

.bkm-tabs-wrap {
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid #e5e7eb;
}
.bkm-tabs-wrap::-webkit-scrollbar { display: none; }
.bkm-tabs {
    display: inline-flex;
    gap: 2px;
    white-space: nowrap;
    padding-bottom: 0;
}
.bkm-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    margin-bottom: -1px;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.bkm-tab:hover { color: #111827; }
.bkm-tab.is-active {
    color: #01204A;
    border-bottom-color: #01204A;
}
.bkm-tab-count {
    font-size: 0.72rem;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
}
.bkm-tab.is-active .bkm-tab-count { color: #01204A; }

.bkm-filter {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.bkm-search {
    position: relative;
    flex: 1;
    min-width: 240px;
}
.bkm-search > i[data-lucide],
.bkm-search > svg {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 15px; height: 15px;
    color: #9ca3af;
    pointer-events: none;
}
.bkm-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.88rem;
    background: #fff;
    color: #111827;
    font-family: inherit;
}
.bkm-search input:focus {
    outline: none;
    border-color: #01204A;
    box-shadow: 0 0 0 3px rgba(1,32,74,0.1);
}
.bkm-filter input[type="date"],
.bkm-filter select {
    height: 38px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.85rem;
    background: #fff;
    color: #374151;
    font-family: inherit;
}
.bkm-filter input[type="date"]:focus,
.bkm-filter select:focus {
    outline: none;
    border-color: #01204A;
}
.bkm-filter select { padding-right: 28px; }
.bkm-reset {
    color: #6b7280;
    font-size: 0.82rem;
    text-decoration: none;
}
.bkm-reset:hover { color: #111827; text-decoration: underline; }

.bkm-empty {
    padding: 48px 20px;
    text-align: center;
    color: #9ca3af;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
}
.bkm-empty i[data-lucide],
.bkm-empty > svg {
    width: 36px; height: 36px;
    color: #d1d5db;
    margin: 0 auto 10px;
    stroke-width: 1.2;
}
.bkm-empty p { margin: 0; font-size: 0.9rem; }

.admin-page:has(.bkm-tablewrap) { max-width: none; }

.bkm-tablewrap {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.bkm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.bkm-table thead th {
    text-align: left;
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
    padding: 10px 12px;
    background: #fafbfc;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
.bkm-table th.bkm-th-num,
.bkm-table td.bkm-td-num { text-align: right; }
.bkm-table th.bkm-th-check,
.bkm-table td.bkm-td-check { width: 36px; padding-left: 14px; padding-right: 4px; }
.bkm-table tbody td {
    padding: 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
    color: #111827;
}
.bkm-tr { transition: background 0.12s; border-left: 3px solid transparent; }
.bkm-tr:hover { background: #fafafa; }
.bkm-tr.is-selected { background: rgba(1,32,74,0.05); }
.bkm-tr.bkm-row-today td:first-child { box-shadow: inset 3px 0 0 #01204A; }
.bkm-tr.bkm-row-confirmed td:first-child { box-shadow: inset 3px 0 0 #22c55e; }
.bkm-tr.bkm-row-active td:first-child { box-shadow: inset 3px 0 0 #01204A; }
.bkm-tr.bkm-row-pending td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.bkm-tr.bkm-row-completed td:first-child { box-shadow: inset 3px 0 0 #94a3b8; }
.bkm-tr.bkm-row-cancelled td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.bkm-tr.bkm-row-cancelled { opacity: 0.6; }

.bkm-ref {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-weight: 600;
    font-size: 0.85rem;
    color: #111827;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bkm-new-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: #dc2626;
    color: #fff;
    font-family: system-ui, sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45);
    animation: bkm-pulse 1.8s ease-in-out infinite;
    transition: opacity 0.2s, transform 0.2s;
}
.bkm-new-badge.is-fading { opacity: 0; transform: scale(0.8); animation: none; }
@keyframes bkm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
    50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}
.bkm-td-num { white-space: nowrap; }
.bkm-name {
    font-size: 0.9rem;
    color: #111827;
    font-weight: 500;
    white-space: nowrap;
}
.bkm-guest-link {
    color: #01204A; text-decoration: none; font-weight: 600;
}
.bkm-guest-link:hover { text-decoration: underline; }
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.bkm-sub {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 2px;
}
.bkm-date {
    font-size: 0.9rem;
    color: #111827;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bkm-time {
    font-weight: 600;
    color: #01204A;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.bkm-link {
    color: #374151;
    text-decoration: none;
    font-size: 0.85rem;
}
.bkm-link:hover { color: #01204A; text-decoration: underline; }
.bkm-link-truncate {
    display: inline-block;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}
.bkm-plate {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    background: #f3f4f6;
    border-radius: 4px;
    color: #111827;
    white-space: nowrap;
}

.bkm-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}
.bkm-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.bkm-checkbox span {
    width: 16px;
    height: 16px;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    transition: background 0.12s, border-color 0.12s;
    position: relative;
}
.bkm-checkbox input:checked + span {
    background: #01204A;
    border-color: #01204A;
}
.bkm-checkbox input:checked + span::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.bkm-checkbox input:indeterminate + span {
    background: #01204A;
    border-color: #01204A;
}
.bkm-checkbox input:indeterminate + span::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 6px;
    width: 8px;
    height: 2px;
    background: #fff;
}

.bkm-bulkbar {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.bkm-bulkbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: #6b7280;
    flex-wrap: wrap;
}
.bkm-bulk-select {
    padding: 6px 28px 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    font-size: 0.85rem;
    color: #374151;
    cursor: pointer;
    height: 32px;
}
.bkm-bulk-select:focus {
    outline: none;
    border-color: #01204A;
}
.bkm-bulkbar .btn {
    height: 32px;
    padding: 0 12px;
}
.bkm-bulkbar .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.bkm-bulk-info { margin-left: 8px; color: #374151; }
.bkm-bulk-info strong { color: #111827; }
.bkm-bulk-link {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 4px;
    text-decoration: underline;
}
.bkm-bulk-link:hover { color: #01204A; }

.bkm-th-sort a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.bkm-th-sort a:hover { color: #111827; }
.bkm-th-sort.is-sorted a { color: #01204A; }

.bkm-tr { cursor: pointer; }
.bkm-tr.is-expanded { background: #f5f8fb; }
.bkm-th-expand, .bkm-td-expand { width: 30px; padding-left: 0 !important; padding-right: 0 !important; }
.bkm-expand-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #9ca3af;
    transition: transform 0.15s, color 0.15s;
}
.bkm-expand-btn:hover { color: #374151; background: #f3f4f6; }
.bkm-expand-btn.is-open { transform: rotate(90deg); color: #01204A; }
.bkm-expand-btn svg, .bkm-expand-btn i[data-lucide] { width: 14px; height: 14px; }

.bkm-flight {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bkm-airline-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 6px;
    max-width: 100%;
}
.bkm-airline-logo-sm {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 3px;
    background: #fff;
    flex-shrink: 0;
}
.bkm-airline-fallback-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    background: #f3f4f6;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    color: #374151;
    flex-shrink: 0;
}
.bkm-airline-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.bkm-airline-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}
.bkm-airline-flight {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.72rem !important;
    color: #6b7280 !important;
    letter-spacing: 0.03em;
    margin-top: 1px !important;
}
.bkm-arrival-from {
    margin-top: 4px !important;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bkm-detail-row td {
    background: #fafbfc;
    padding: 0 !important;
    border-bottom: 2px solid #e5e7eb;
}
.bkm-detail {
    padding: 18px 20px;
}
.bkm-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.bkm-detail-block {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 8px;
    padding: 12px 14px;
}
.bkm-detail-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 10px;
}
.bkm-detail-title i[data-lucide], .bkm-detail-title svg { width: 14px; height: 14px; }
.bkm-detail-strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}
.bkm-detail-kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    font-size: 0.85rem;
    border-top: 1px dashed #f1f5f9;
}
.bkm-detail-kv:first-of-type { border-top: none; }
.bkm-detail-kv span { color: #9ca3af; }
.bkm-detail-kv strong, .bkm-detail-kv a { color: #111827; font-weight: 500; text-align: right; word-break: break-word; }
.bkm-detail-notes {
    margin-top: 8px;
    padding: 8px 10px;
    background: #fff7ed;
    border-left: 3px solid #f59e0b;
    font-size: 0.85rem;
    color: #78350f;
    border-radius: 4px;
}
.bkm-detail-airline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.bkm-airline-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #eef0f3;
    padding: 2px;
}
.bkm-airline-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #f3f4f6;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
}
.bkm-vehicle-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bkm-vehicle-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .bkm-tabs-wrap { margin-bottom: 12px; }
    .bkm-tab { padding: 8px 12px; font-size: 0.82rem; }
    .bkm-filter { gap: 6px; }
    .bkm-search { min-width: 0; flex: 1 1 100%; }
    .bkm-filter input[type="date"] { flex: 1; min-width: 120px; }
    .bkm-filter select { width: 100%; }
    .bkm-table { font-size: 0.82rem; }
    .bkm-table thead th { padding: 8px 10px; font-size: 0.68rem; }
    .bkm-table tbody td { padding: 10px; }
    .bkm-link-truncate { max-width: 140px; }
    .bkm-detail { padding: 12px; }
    .bkm-detail-grid { grid-template-columns: 1fr; gap: 10px; }
}

.bk-stats-grid { margin-bottom: 14px; }
.bk-stat .value { font-size: 1.35rem; }

.bk-tabs-wrap {
    margin-bottom: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bk-tabs-wrap::-webkit-scrollbar { display: none; }
.bk-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    background: #f3f4f6;
    border-radius: 10px;
    white-space: nowrap;
}
.bk-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
.bk-tab i[data-lucide],
.bk-tab > svg { width: 15px; height: 15px; }
.bk-tab:hover { color: #111827; }
.bk-tab.is-active {
    background: #fff;
    color: #01204A;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.bk-tab-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #e5e7eb;
    color: #374151;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bk-tab.is-active .bk-tab-count { background: rgba(1,32,74,0.15); color: #01204A; }

.bk-filters { padding: 14px 16px; }
.bk-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.bk-filter-search {
    position: relative;
    flex: 1;
    min-width: 240px;
}
.bk-filter-search > i[data-lucide],
.bk-filter-search > svg {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: #9ca3af;
    pointer-events: none;
}
.bk-filter-search input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 36px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #111827;
    background: #fff;
    font-family: inherit;
}
.bk-filter-search input:focus {
    outline: none;
    border-color: #01204A;
    box-shadow: 0 0 0 3px rgba(1,32,74,0.1);
}

.bk-filter-dates {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
}
.bk-filter-dates input[type="date"] {
    height: 40px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.85rem;
    background: #fff;
    font-family: inherit;
}
.bk-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: #6b7280;
    font-weight: 500;
}
.bk-filter-label i[data-lucide],
.bk-filter-label > svg { width: 14px; height: 14px; }
.bk-filter-select {
    height: 40px;
    padding: 0 32px 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.85rem;
    background: #fff;
    font-family: inherit;
    color: #111827;
}
.bk-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    height: 40px;
    color: #6b7280;
    font-size: 0.85rem;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid transparent;
}
.bk-filter-reset:hover { border-color: #e5e7eb; background: #f9fafb; }
.bk-filter-reset i[data-lucide],
.bk-filter-reset > svg { width: 14px; height: 14px; }

.bk-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bk-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bk-card:hover { border-color: #c9d0d9; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.bk-card-today {
    border-color: #01204A;
    box-shadow: 0 0 0 1px #01204A, 0 4px 16px rgba(1,32,74,0.12);
}
.bk-card-active { background: linear-gradient(to right, rgba(34,197,94,0.03), #fff 30%); }

.bk-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafafa;
}
.bk-card-ref {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.bk-card-ref strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.02em;
    font-family: ui-monospace, SFMono-Regular, monospace;
}
.bk-today-pill {
    padding: 2px 8px;
    background: #01204A;
    color: #fff;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.bk-card-amount {
    text-align: right;
    flex-shrink: 0;
}
.bk-card-amount strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
}
.bk-amount-net {
    display: block;
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 1px;
}

.bk-card-body {
    padding: 14px 16px 16px;
}

.bk-card-dates {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 12px;
}
.bk-date-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-date-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.bk-date-label i[data-lucide],
.bk-date-label > svg { width: 12px; height: 12px; }
.bk-date-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}
.bk-date-value span {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 400;
    margin-left: 3px;
}
.bk-date-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #9ca3af;
}
.bk-date-arrow i[data-lucide],
.bk-date-arrow > svg { width: 16px; height: 16px; }
.bk-nights {
    font-size: 0.68rem;
    color: #01204A;
    font-weight: 600;
    background: rgba(1,32,74,0.08);
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.bk-card-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 14px;
}
.bk-info-block { min-width: 0; }
.bk-info-label {
    font-size: 0.7rem;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 3px;
}
.bk-info-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bk-info-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 3px;
}
.bk-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #01204A;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bk-contact-link:hover { text-decoration: underline; }
.bk-contact-link i[data-lucide],
.bk-contact-link > svg { width: 12px; height: 12px; flex-shrink: 0; }

.bk-plate {
    display: inline-block;
    padding: 3px 10px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-weight: 700;
    color: #78350f;
    letter-spacing: 0.04em;
    font-size: 0.88rem;
}
.bk-vehicle-count {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    background: #e5e7eb;
    color: #374151;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.bk-flight {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.88rem;
    color: #01204A;
}
.bk-flight i[data-lucide],
.bk-flight > svg { width: 12px; height: 12px; }

@media (max-width: 900px) {
    .bk-card-grid { grid-template-columns: 1fr 1fr; }
    .bk-info-block:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .bk-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .bk-stat .value { font-size: 1.1rem; }

    .bk-filters { padding: 12px; }
    .bk-filter-form { flex-direction: column; align-items: stretch; gap: 8px; }
    .bk-filter-search { min-width: 0; }
    .bk-filter-dates { flex-wrap: wrap; justify-content: space-between; }
    .bk-filter-dates input { flex: 1; min-width: 120px; }
    .bk-filter-select { width: 100%; }

    .bk-card-head { padding: 10px 12px; flex-wrap: wrap; }
    .bk-card-ref { gap: 6px; }
    .bk-card-ref strong { font-size: 0.85rem; }
    .bk-card-amount strong { font-size: 0.95rem; }

    .bk-card-body { padding: 12px; }
    .bk-card-dates {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 10px 12px;
    }
    .bk-date-arrow { flex-direction: row; justify-content: center; gap: 8px; }
    .bk-date-arrow i[data-lucide],
    .bk-date-arrow > svg { transform: rotate(90deg); }

    .bk-card-grid { grid-template-columns: 1fr; gap: 12px; }
    .bk-info-block:nth-child(3) { grid-column: auto; }
    .bk-info-sub { flex-direction: column; gap: 4px; }
}

.admin-table { width: 100%; border-collapse: collapse; background: #fff; }
.admin-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.admin-table td {
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
}
.admin-table tr:hover { background: #f9fafb; }
.admin-table tr:last-child td { border-bottom: none; }

.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #111827;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    font-family: inherit;
}

.admin-btn:hover { background: #f9fafb; border-color: #d1d5db; text-decoration: none; }
.admin-btn-primary { background: #01204A; color: #fff; border-color: #01204A; }
.admin-btn-primary:hover { background: #094a82; border-color: #094a82; color: #fff; }
.admin-btn-danger { background: #fff; color: #dc2626; border-color: #fecaca; }
.admin-btn-danger:hover { background: #fef2f2; border-color: #f87171; }

.btn-danger-solid { background: #dc2626; color: #fff; border: none; }
.btn-danger-solid:hover { background: #b91c1c; }
.btn-danger-solid:disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }

.confirm-delete-backdrop {
    display: none; position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
}
.confirm-delete-backdrop.open { display: block; }
.confirm-delete-modal {
    display: none; position: fixed; z-index: 1000;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: #fff; border-radius: 12px; padding: 28px;
    max-width: 440px; width: calc(100% - 32px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.confirm-delete-modal.open { display: block; }
.confirm-delete-icon { text-align: center; margin-bottom: 12px; }
.confirm-delete-icon i[data-lucide] { width: 40px; height: 40px; color: #dc2626; }
.confirm-delete-modal h3 {
    font-size: 1.1rem; font-weight: 700; color: #111827;
    text-align: center; margin: 0 0 8px;
}
.confirm-delete-modal p {
    font-size: 0.85rem; color: #6b7280; line-height: 1.5;
    text-align: center; margin: 0 0 6px;
}
.confirm-delete-hint { margin-top: 14px !important; color: #374151 !important; }
.confirm-delete-input {
    display: block; width: 100%; margin: 12px 0 16px;
    padding: 10px 12px; border: 1.5px solid #d1d5db;
    border-radius: 8px; font-size: 0.9rem;
    transition: border-color 0.15s;
}
.confirm-delete-input:focus { outline: none; border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.1); }
.confirm-delete-actions {
    display: flex; gap: 8px; justify-content: flex-end;
}

.admin-btn-sm { padding: 0.3rem 0.7rem; font-size: 0.78rem; }

.admin-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-status-approved, .admin-status-active, .admin-status-confirmed { background: #dcfce7; color: #15803d; }
.admin-status-pending { background: #fef3c7; color: #b45309; }
.admin-status-suspended, .admin-status-inactive, .admin-status-cancelled, .admin-status-removed { background: #fee2e2; color: #b91c1c; }
.admin-status-completed { background: #e0e7ff; color: #4338ca; }
.admin-status-default { background: #f3f4f6; color: #374151; }
.admin-status-paid { background: #d1fae5; color: #065f46; }
.admin-status-invited { background: #fef3c7; color: #b45309; }

.admin-mobile-tabs {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    z-index: 40;
}

@media (min-width: 1024px) { .admin-mobile-tabs { display: none; } }

.admin-mobile-tab {
    flex: 1;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #6b7280;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 500;
}

.admin-mobile-tab:hover { color: #01204A; text-decoration: none; }
.admin-mobile-tab.active { color: #01204A; }

.admin-mobile-tab-icon {
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-mobile-tab.active .admin-mobile-tab-icon { background: rgba(1, 32, 74, 0.1); }
.admin-mobile-tab i[data-lucide] { width: 20px; height: 20px; }

.admin-more-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 45;
}
.admin-more-backdrop.open { display: block; }

.admin-more-sheet {
    display: none;
    position: fixed;
    bottom: 64px;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
    z-index: 46;
    padding: 1rem;
}

.admin-more-sheet.open { display: block; }

.admin-more-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.admin-more-header h3 { font-size: 1rem; font-weight: 600; color: #111827; margin: 0; }
.admin-more-close {
    background: transparent;
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    color: #6b7280;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.admin-more-close:hover { background: #f3f4f6; }
.admin-more-close i[data-lucide] { width: 20px; height: 20px; }

.admin-more-sheet ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.admin-more-sheet ul li button,
.admin-more-sheet ul li a {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    min-height: 48px;
    border-radius: 12px;
    color: #4b5563;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}
.admin-more-sheet ul li button:hover,
.admin-more-sheet ul li a:hover { background: #f3f4f6; text-decoration: none; }
.admin-more-sheet ul li a.active { background: #01204A; color: #fff; }
.admin-more-sheet ul li i[data-lucide] { width: 20px; height: 20px; flex-shrink: 0; }

.admin-more-logout {
    color: #dc2626 !important;
    border-top: 1px solid #f3f4f6 !important;
    margin-top: 8px !important;
    padding-top: 16px !important;
}
.admin-more-logout:hover { background: #fef2f2 !important; }

.admin-page .form-group label { color: #374151; font-weight: 500; font-size: 0.82rem; }
.admin-page .form-group input,
.admin-page .form-group select,
.admin-page .form-group textarea { padding: 0.55rem 0.75rem; font-size: 0.875rem; }

.admin-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}
.admin-empty i[data-lucide] { width: 48px; height: 48px; color: #d1d5db; margin: 0 auto 1rem; stroke-width: 1.2; }
.admin-empty h3 { font-size: 1rem; color: #374151; font-weight: 600; margin-bottom: 0.5rem; }
.admin-empty p { font-size: 0.875rem; color: #6b7280; }

@media (max-width: 767px) {
    .time-popup-desktop, .type-popup-desktop { display: none !important; }
}

body.sheet-open { overflow: hidden; }

.bottom-sheet {
    position: fixed; inset: 0; z-index: 100;
    visibility: hidden; pointer-events: none;
}
.bottom-sheet.open { visibility: visible; pointer-events: auto; }

.bottom-sheet-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.bottom-sheet.open .bottom-sheet-backdrop { opacity: 1; }

.bottom-sheet-panel {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top-left-radius: 18px; border-top-right-radius: 18px;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom, 0);
    will-change: transform;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.bottom-sheet.open .bottom-sheet-panel {
    transform: translate3d(0, 0, 0);
}

.bottom-sheet-drag {
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    cursor: grab;
}
.bottom-sheet-drag:active { cursor: grabbing; }

.bottom-sheet-handle {
    width: 40px; height: 5px;
    border-radius: 3px;
    background: #d1d5db;
    margin: 10px auto 4px;
}

.bottom-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px 14px;
}
.bottom-sheet-header h2 {
    font-size: 1.05rem; font-weight: 700; color: #111827;
    margin: 0;
}
.bottom-sheet-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: transparent; border: none; cursor: pointer;
    color: #9ca3af;
    transition: background 0.15s;
}
.bottom-sheet-close:hover { background: #f3f4f6; }
.bottom-sheet-close i[data-lucide] { width: 18px; height: 18px; }

.bottom-sheet-footer {
    padding: 16px 20px 22px;
    flex-shrink: 0;
}
.bottom-sheet-confirm {
    width: 100%;
    background: #01204A;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 14px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.bottom-sheet-confirm:hover { background: #0a4a82; }
.bottom-sheet-confirm:active { transform: scale(0.98); }

.wheel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 4px 20px 8px;
}
.wheel-col-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 8px;
}
.wheel {
    position: relative;
    height: 220px;
    overflow: hidden;
}
.wheel-indicator {
    position: absolute;
    left: 0; right: 0;
    top: 88px;
    height: 44px;
    border-top: 2px solid rgba(1, 32, 74, 0.3);
    border-bottom: 2px solid rgba(1, 32, 74, 0.3);
    background: rgba(1, 32, 74, 0.05);
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
}
.wheel-fade-top, .wheel-fade-bottom {
    position: absolute;
    left: 0; right: 0;
    height: 64px;
    pointer-events: none;
    z-index: 3;
}
.wheel-fade-top {
    top: 0;
    background: linear-gradient(to bottom, #fff, rgba(255,255,255,0));
}
.wheel-fade-bottom {
    bottom: 0;
    background: linear-gradient(to top, #fff, rgba(255,255,255,0));
}
.wheel-scroll {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.wheel-scroll::-webkit-scrollbar { display: none; }
.wheel-pad { height: 88px; }
.wheel-item {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: #9ca3af;
    scroll-snap-align: start;
    transition: color 0.15s, font-weight 0.15s, transform 0.15s;
}
.wheel-item.selected {
    color: #01204A;
    font-weight: 700;
    transform: scale(1.1);
}

.type-sheet-list {
    padding: 8px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.type-sheet-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #f9fafb;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}
.type-sheet-option:active { background: #f3f4f6; }
.type-sheet-option.selected {
    background: rgba(1, 32, 74, 0.08);
    border-color: #01204A;
}
.type-sheet-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: #fff;
    color: #01204A;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.type-sheet-icon i[data-lucide] { width: 20px; height: 20px; }
.type-sheet-option.selected .type-sheet-icon {
    background: #01204A;
    color: #fff;
}
.type-sheet-text { flex: 1; min-width: 0; }
.type-sheet-text .title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}
.type-sheet-option.selected .type-sheet-text .title { color: #01204A; }
.type-sheet-text .desc {
    font-size: 0.78rem;
    color: #9ca3af;
    margin-top: 2px;
}
.type-sheet-check {
    width: 20px; height: 20px;
    color: #01204A;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.type-sheet-option.selected .type-sheet-check { opacity: 1; }

.date-modal {
    position: fixed; inset: 0;
    z-index: 110;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    visibility: hidden;
    padding-top: env(safe-area-inset-top, 0);
}
.date-modal.open {
    transform: translateY(0);
    visibility: visible;
}
/* Inner wrapper: fills the screen on the mobile sheet, becomes a sized card in
   the centered lot-mode dialog. */
.date-modal-inner {
    flex: 1; display: flex; flex-direction: column; min-height: 0;
    width: 100%; background: #fff;
}
/* Lot mode on desktop: centered modal dialog with a dimmed backdrop instead of
   the full-screen mobile sheet (which stretches the day grid grotesquely wide). */
@media (min-width: 768px) {
    .date-modal.date-modal-lot {
        inset: 0; background: rgba(15, 23, 42, 0.55);
        align-items: center; justify-content: center;
        padding: 24px; transform: none; opacity: 0;
        transition: opacity 0.2s ease;
    }
    .date-modal.date-modal-lot.open { transform: none; opacity: 1; }
    .date-modal.date-modal-lot .date-modal-inner {
        flex: none; width: min(640px, 100%); max-height: 86vh;
        border-radius: 16px; overflow: hidden;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    }
    .date-modal.date-modal-lot .date-modal-months { max-height: 60vh; }
}
.date-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.date-modal-close {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #f3f4f6;
    border: none;
    cursor: pointer;
    color: #374151;
    flex-shrink: 0;
}
.date-modal-close:active { background: #e5e7eb; }
.date-modal-close i[data-lucide] { width: 18px; height: 18px; }
.date-modal-header-text h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}
.date-modal-subtitle {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 2px;
}
.date-modal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 10px 16px 8px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.date-modal-weekdays span {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.date-modal-months {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 16px;
    -webkit-overflow-scrolling: touch;
}
.date-modal-month {
    margin-bottom: 20px;
}
.date-modal-month-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    padding: 8px 0 12px;
    text-transform: capitalize;
    text-align: center;
    position: sticky;
    top: 0;
    background: linear-gradient(to bottom, #fff 80%, rgba(255,255,255,0.9) 100%);
    z-index: 1;
}
.date-modal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.date-modal-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    color: #111827;
    font-weight: 500;
    border-radius: 12px;
    font-family: inherit;
    transition: background 0.15s, transform 0.1s;
    padding: 0;
}
.date-modal-cell:active:not(:disabled) { transform: scale(0.95); }
.date-modal-cell.empty {
    cursor: default;
    pointer-events: none;
    background: transparent;
}
.date-modal-cell.disabled {
    color: #e5e7eb;
    cursor: not-allowed;
}
.date-modal-cell.today {
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(1, 32, 74, 0.3);
}
.date-modal-cell.in-range {
    background: rgba(1, 32, 74, 0.1);
    color: #111827;
}
.date-modal-cell.range-start,
.date-modal-cell.range-end {
    background: #01204A;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(1, 32, 74, 0.25);
}
.date-modal-cell.range-start.today,
.date-modal-cell.range-end.today {
    box-shadow: 0 1px 3px rgba(1, 32, 74, 0.25);
}
.date-modal-footer {
    border-top: 1px solid #e5e7eb;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0));
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}
/* Lot-mode arrival/departure time selectors inside the date popup. */
.date-modal-times {
    display: flex; gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid #f1f5f9;
    background: #fff;
    flex-shrink: 0;
}
.date-modal-times .dmt-field { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.date-modal-times label {
    font-size: 0.72rem; font-weight: 600; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.date-modal-times select {
    width: 100%; padding: 10px 12px;
    border: 1px solid #d1d5db; border-radius: 10px;
    font-size: 0.9rem; color: #111827; font-family: inherit;
    background: #fff; cursor: pointer;
}
.date-modal-times select:focus { outline: none; border-color: #01204A; box-shadow: 0 0 0 3px rgba(1,32,74,0.12); }
.date-modal-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
.date-modal-range {
    font-size: 0.95rem;
    color: #374151;
    font-weight: 500;
    text-align: center;
    min-height: 20px;
}
.date-modal-range .nights {
    color: #01204A;
    font-weight: 700;
    margin-left: 4px;
}
.date-modal-confirm {
    width: 100%;
    padding: 14px;
    background: #01204A;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.date-modal-confirm:hover { background: #0a4a82; }
.date-modal-confirm:active { transform: scale(0.98); }
.date-modal-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.search-results-section { padding: 1rem 1rem 2rem; }
.search-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.search-toolbar-count { font-size: 0.95rem; color: #374151; font-weight: 600; }
.search-toolbar-actions { display: flex; gap: 8px; align-items: center; }
.search-toolbar-btn {
    display: none;
    align-items: center; gap: 6px;
    padding: 8px 14px; height: 40px;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 8px; font-size: 0.9rem; font-weight: 600; color: #374151;
    cursor: pointer;
}
.search-toolbar-btn:hover { background: #f9fafb; }
.search-toolbar-btn i[data-lucide] { width: 16px; height: 16px; }
.search-sort select {
    height: 40px; padding: 0 32px 0 12px;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 8px; font-size: 0.9rem; color: #111827; font-family: inherit;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.search-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
}
.search-sidebar {
    background: #fff;
    border: 1px solid #DEE3E1;
    border-radius: 16px;
    padding: 0;
    align-self: start;
    position: sticky;
    top: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.fs-form { display: block; }
.fs-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #DEE3E1;
}
.fs-head h2 { font-size: 1rem; font-weight: 700; color: #03160E; margin: 0; }
.fs-head-right { display: flex; align-items: center; gap: 10px; }
.fs-reset {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.75rem; font-weight: 500; color: #01204A;
    text-decoration: none;
    transition: color 0.15s;
}
.fs-reset:hover { color: #094a82; }
.fs-reset i[data-lucide] { width: 12px; height: 12px; }

.fs-section {
    padding: 14px 20px;
    border-bottom: 1px solid #DEE3E1;
}
.fs-section-last { border-bottom: none; }
.fs-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #47504E;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}
.fs-rows { display: flex; flex-direction: column; gap: 2px; }
.fs-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}
.fs-row:hover:not(.is-selected) { background: #F5F5F5; }
.fs-row.is-selected {
    background: linear-gradient(180deg, #f3f8fe 0%, #eaf2fc 100%);
    box-shadow: inset 0 0 0 1px #caddf4, 0 4px 14px -8px rgba(1, 32, 74, 0.45);
}
/* Refined checkmark on the right so the selected filter is clearly marked. */
.fs-row.is-selected::after {
    content: '';
    margin-left: auto;
    width: 20px; height: 20px; flex-shrink: 0;
    border-radius: 50%;
    background: #01204A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='m9.55 17.6-4.4-4.4 1.4-1.4 3 3 7-7 1.4 1.4z'/%3E%3C/svg%3E") center / 14px no-repeat;
    box-shadow: 0 2px 6px -2px rgba(1, 32, 74, 0.6);
}
.fs-row input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.fs-row-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: #f3f5f8;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.15s;
}
.fs-row-icon img { width: 22px; height: 22px; display: block; }
.fs-row:hover .fs-row-icon { transform: scale(1.06); }
.fs-row.is-selected .fs-row-icon { background: #d8e8fb; }
.fs-row-label {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 500;
    color: #03160E;
}
.fs-row.is-selected .fs-row-label { color: #01204A; font-weight: 700; }
.fs-row-count {
    font-size: 0.72rem;
    font-weight: 500;
    color: #47504E;
    background: #F5F5F5;
    padding: 2px 9px;
    border-radius: 999px;
    flex-shrink: 0;
}
.fs-row.is-selected .fs-row-count {
    color: #01204A;
    background: rgba(1, 32, 74, 0.15);
}

.fs-histogram {
    height: 60px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding: 0 4px;
    margin-bottom: 2px;
}
.fs-hist-bar {
    flex: 1;
    background: #DEE3E1;
    border-radius: 2px;
    transition: background 0.25s ease;
}
.fs-hist-bar.in-range { background: rgba(1, 32, 74, 0.4); }

.fs-slider {
    position: relative;
    height: 40px;
    padding: 0 4px;
    display: flex; align-items: center;
}
.fs-track, .fs-track-active {
    position: absolute;
    left: 4px; right: 4px;
    height: 5px;
    border-radius: 999px;
}
.fs-track { background: #DEE3E1; }
.fs-track-active {
    background: #01204A;
    right: auto;
    transition: left 0.05s linear, width 0.05s linear;
}
.fs-thumb {
    position: absolute;
    width: 18px; height: 18px;
    background: #fff;
    border: 3px solid #01204A;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    z-index: 5;
}
.fs-slider input[type="range"] {
    position: absolute;
    left: 0; width: 100%;
    height: 40px;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    background: transparent;
    pointer-events: auto;
}
.fs-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 40px; height: 40px;
    opacity: 0;
    cursor: pointer;
}
.fs-slider input[type="range"]::-moz-range-thumb {
    width: 40px; height: 40px;
    opacity: 0;
    cursor: pointer;
    border: none;
}

.fs-price-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 14px;
}
.fs-price-box label {
    display: block;
    font-size: 0.63rem;
    font-weight: 600;
    color: #47504E;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
}
.fs-price-field {
    display: flex; align-items: center;
    border: 2px solid #8794A6;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.fs-price-field:focus-within {
    border-color: #01204A;
    box-shadow: 0 0 0 3px rgba(1, 32, 74, 0.1);
}
.fs-price-field input {
    flex: 1;
    width: 100%;
    padding: 8px 10px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #03160E;
    background: transparent;
    border: none;
    outline: none;
    -moz-appearance: textfield;
    font-family: inherit;
}
.fs-price-field input::-webkit-outer-spin-button,
.fs-price-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.fs-price-field span {
    padding: 0 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #47504E;
}
.fs-apply { width: 100%; justify-content: center; display: inline-flex; }
.search-sidebar-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1rem;
}
.search-sidebar-header h3 { font-size: 1rem; font-weight: 700; color: #111827; margin: 0; }
.search-sidebar-close {
    display: none;
    background: transparent; border: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    align-items: center; justify-content: center;
    color: #374151;
}
.search-sidebar-close:hover { background: #f3f4f6; }
.filter-group { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #f1f5f9; }
.filter-group:last-of-type { border-bottom: none; }
.filter-group h4 {
    font-size: 0.78rem; font-weight: 700; color: #374151;
    text-transform: uppercase; letter-spacing: 0.03em;
    margin: 0 0 0.6rem;
}
.filter-check {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; cursor: pointer;
    font-size: 0.9rem; color: #111827;
}
.filter-check input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: #01204A;
    cursor: pointer;
}
.filter-price-row {
    display: flex; align-items: center; gap: 8px;
}
.filter-price-row input {
    flex: 1; width: 100%; height: 38px;
    padding: 0 10px;
    border: 1px solid #e5e7eb; border-radius: 8px;
    font-size: 0.9rem; color: #111827; font-family: inherit; background: #fff;
}
.filter-price-row span { color: #9ca3af; font-weight: 600; }
.filter-group select {
    width: 100%; height: 40px;
    padding: 0 12px;
    border: 1px solid #e5e7eb; border-radius: 8px;
    font-size: 0.9rem; color: #111827; font-family: inherit; background: #fff;
}
.filter-actions { padding-top: 0.5rem; }
.btn-block { width: 100%; display: inline-flex; align-items: center; justify-content: center; }
.filter-clear {
    display: block; text-align: center; margin-top: 10px;
    font-size: 0.85rem; color: #6b7280; text-decoration: none;
}
.filter-clear:hover { color: #01204A; text-decoration: underline; }

.search-sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 95;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}
.search-sidebar-backdrop.open { opacity: 1; visibility: visible; }

.search-results { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.search-empty {
    text-align: center;
    padding: 3rem 1rem;
    background: #fff;
    border-radius: 12px;
    border: 1px dashed #e5e7eb;
}
.search-empty i[data-lucide] {
    width: 48px; height: 48px;
    color: #d1d5db;
    margin: 0 auto 1rem;
    stroke-width: 1.2;
}
.search-empty h3 { font-size: 1.05rem; font-weight: 700; color: #374151; margin: 0 0 4px; }
.search-empty p { color: #6b7280; font-size: 0.9rem; margin: 0; }

.pc {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    position: relative;
}
.pc:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.07); transform: translateY(-1px); }
.pc-mobile { display: none; }
.pc-image-placeholder {
    width: 100%; height: 100%;
    background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
    color: #d1d5db;
}
.pc-image-placeholder i[data-lucide] { width: 40px; height: 40px; stroke-width: 1.2; }

.pc-desktop { display: flex; }
.pc-image {
    position: relative;
    width: 220px; flex-shrink: 0;
    align-self: stretch;
    background: #f3f4f6;
}
.pc-image img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.pc-body { flex: 1; padding: 16px; display: flex; flex-direction: column; min-width: 0; }
.pc-main { display: flex; gap: 16px; }
.pc-info { flex: 1; min-width: 0; }
.pc-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.pc-heading { min-width: 0; flex: 1; }
.pc-title {
    font-size: 1.05rem; font-weight: 700;
    line-height: 1.25; margin: 0;
    color: #01204A;
}
.pc-title a { color: inherit; text-decoration: none; }
.pc-title a:hover { color: #003B95; text-decoration: underline; }
.pc-subtitle { font-size: 0.75rem; color: #595959; margin-top: 3px; }
.pc-rating {
    display: flex; align-items: flex-start; gap: 8px; flex-shrink: 0;
}
.pc-rating-text { text-align: right; }
.pc-rating-label { font-size: 0.82rem; font-weight: 700; color: #171717; }
.pc-rating-count {
    font-size: 0.7rem; color: #595959;
    display: inline-flex; align-items: center; gap: 3px;
    justify-content: flex-end; margin-top: 1px;
}
.pc-rating-badge {
    width: 36px; height: 36px;
    color: #fff; font-size: 0.85rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px 8px 8px 0;
    background: #FBBC04;
    flex-shrink: 0;
}
/* Three rating tiers (higher = better) as soft tinted badges: a subdued tint with
   the score in a matching, deeper tone of the same hue. green / blue / slate. */
.pc-rating-high { background: #d8f3e3; color: #137a48; }
.pc-rating-mid { background: #e1ecfa; color: #0C5998; }
.pc-rating-low { background: #eaeef3; color: #55647b; }
/* Desktop search card: tinted score pill (same tier colours as the mobile badge). */
.sr-rating-score { display: inline-block; padding: 1px 8px; border-radius: 6px; font-weight: 700; }

.pc-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-top: 8px;
}
.pc-meta-item, .pc-meta-link {
    font-size: 0.75rem;
    display: inline-flex; align-items: center; gap: 4px;
    color: #595959;
    text-decoration: none;
}
.pc-meta-link { color: #01204A; }
.pc-meta-link:hover { text-decoration: underline; }
.pc-meta-item i[data-lucide], .pc-meta-link i[data-lucide] { width: 13px; height: 13px; flex-shrink: 0; }
.pc-divider { border-top: 1px solid #e8e8e8; margin: 12px 0; }
.pc-service-type {
    font-size: 0.88rem; font-weight: 600; color: #171717;
    margin-bottom: 6px;
}
.pc-features { display: flex; flex-wrap: wrap; gap: 5px; }
.pc-feature-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.72rem; font-weight: 600;
    color: #334155;
    background: #f1f5f9;
    padding: 3px 10px 3px 7px;
    border-radius: 999px;
}
.pc-feature-pill .feat-ic { width: 15px; height: 15px; display: block; flex: none; }
.pc-feature-more {
    background: rgba(1, 32, 74, 0.08);
    color: #01204A;
}

.pc-price-col {
    width: 180px; flex-shrink: 0;
    border-left: 1px solid #e8e8e8; padding-left: 16px;
    display: flex; flex-direction: column; align-items: flex-end;
    justify-content: space-between;
}
.pc-price-top { text-align: right; width: 100%; }
.pc-price-days { font-size: 0.72rem; color: #595959; }
.pc-price-value {
    font-size: 1.45rem; font-weight: 700; color: #171717; line-height: 1.1;
    margin-top: 2px;
}
.pc-price-note { font-size: 0.72rem; color: #595959; margin-top: 3px; }
.pc-cta {
    margin-top: 12px;
    width: 100%;
    background: #FFB700; color: #1a1a1a;
    font-size: 0.85rem; font-weight: 700;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    transition: background 0.15s ease;
}
.pc-cta:hover { background: #e6a500; }
.pc-cta i[data-lucide] { width: 16px; height: 16px; }

@media (max-width: 767px) {
    .search-results-section { padding: 0.75rem; }
    .search-toolbar-btn { display: inline-flex; }
    .search-layout { grid-template-columns: 1fr; gap: 12px; }
    /* Mobile: the filter panel rises from the bottom like the date/time sheet,
       leaving a small gap at the top so the dimmed page peeks through. */
    .search-sidebar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        top: auto;
        width: 100%;
        max-width: none;
        max-height: 86vh;
        border-radius: 22px 22px 0 0;
        border: none;
        z-index: 96;
        transform: translateY(100%);
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
        padding: 0;
        display: flex;
        flex-direction: column;
        box-shadow: 0 -10px 30px rgba(0,0,0,0.18);
        overflow: hidden;
        touch-action: pan-y;
    }
    .search-sidebar::before {
        content: "";
        flex: none;
        width: 40px; height: 4px;
        margin: 10px auto 2px;
        border-radius: 999px;
        background: #d1d5db;
    }
    .search-sidebar.open { transform: translateY(0); }
    .search-sidebar-close { display: inline-flex; }
    .search-sidebar .fs-form { overflow-y: auto; overflow-x: hidden; touch-action: pan-y; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; }

    .fs-form {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .fs-head {
        flex-shrink: 0;
        padding: 16px 20px;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
        border-bottom: 1px solid #DEE3E1;
    }
    .fs-head h2 { font-size: 1.15rem; }
    .fs-section { padding: 16px 20px; }
    .fs-row { padding: 12px 10px; gap: 12px; }
    .fs-row-icon { width: 38px; height: 38px; border-radius: 10px; }
    .fs-row-icon i[data-lucide],
    .fs-row-icon > svg { width: 18px; height: 18px; }
    .fs-row-label { font-size: 0.95rem; }
    .fs-row-count { font-size: 0.78rem; padding: 3px 11px; }
    .fs-histogram { height: 52px; }
    .fs-price-field input { padding: 12px 12px; font-size: 0.95rem; }
    .fs-apply {
        /* width:100% (base rule) + side margins overflowed the sheet by 40px and
           pushed the button off-centre; subtract the margins from the width. */
        width: calc(100% - 40px);
        margin: 0 20px calc(16px + env(safe-area-inset-bottom, 0));
        padding: 14px;
        font-size: 0.95rem;
    }
    .search-sidebar-backdrop.open { z-index: 95; }
    .search-sidebar-close { width: 40px; height: 40px; }
    .search-sidebar-close i[data-lucide],
    .search-sidebar-close > svg { width: 22px; height: 22px; }

    .pc-desktop { display: none; }
    .pc-mobile { display: block; }
    .pc-mobile-image {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 10;
        background: #f3f4f6;
    }
    .pc-mobile-image img {
        position: absolute; inset: 0;
        width: 100%; height: 100%; object-fit: cover;
    }
    .pc-mobile-body { padding: 16px; }
    .pc-mobile-body .pc-title { font-size: 1.18rem; line-height: 1.25; }
    .pc-mobile-body .pc-rating-badge { width: 38px; height: 38px; font-size: 0.92rem; }
    .pc-mobile-body .pc-rating-label { font-size: 0.84rem; }
    .pc-mobile-body .pc-rating-count { font-size: 0.74rem; }
    .pc-mobile-body .pc-meta { gap: 12px; margin-top: 10px; font-size: 0.92rem; }
    .pc-mobile-body .pc-feature-pill {
        font-size: 0.8rem;
        padding: 5px 11px;
    }
    .pc-mobile-footer {
        display: flex; align-items: flex-end; justify-content: space-between;
        padding-top: 12px;
        margin-top: 12px;
        border-top: 1px solid #e8e8e8;
        gap: 12px;
    }
    .pc-mobile-footer .pc-price-top { text-align: left; flex: 1; }
    .pc-mobile-footer .pc-price-value { font-size: 1.5rem; }
    .pc-mobile-footer .pc-cta { margin-top: 0; width: auto; padding: 13px 22px; font-size: 1rem; }
}

.booking-page { background: #f7f8fa; min-height: 100vh; padding-bottom: 96px; }
.booking-topbar {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 0;
    position: sticky; top: 0; z-index: 20;
}
.booking-topbar-inner {
    display: flex; align-items: center; gap: 16px;
    padding: 0 1rem;
}
.booking-back {
    display: inline-flex; align-items: center; gap: 4px;
    color: #01204A; text-decoration: none; font-weight: 600; font-size: 0.9rem;
    padding: 6px 10px; border-radius: 6px;
    flex-shrink: 0;
}
.booking-back:hover { background: rgba(1, 32, 74, 0.08); }
.booking-back i[data-lucide] { width: 18px; height: 18px; }
.booking-topbar-title { min-width: 0; flex: 1; }
.booking-topbar-name {
    font-size: 1rem; font-weight: 700; color: #111827;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.booking-topbar-dates {
    font-size: 0.78rem; color: #6b7280;
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    margin-top: 2px;
}
.booking-days-pill {
    background: rgba(1, 32, 74, 0.1);
    color: #01204A;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.72rem;
}

.booking-main {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    padding: 24px 1rem;
    align-items: start;
}

.booking-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.booking-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}
.booking-card-head {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px 20px 12px;
    border-bottom: 1px solid #f1f5f9;
}
.booking-step-num {
    width: 30px; height: 30px;
    background: #01204A;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem;
    flex-shrink: 0;
}
.booking-step-icon {
    width: 36px; height: 36px;
    background: #01204A;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.booking-step-icon i[data-lucide] { width: 18px; height: 18px; }

.booking-input-with-icon {
    position: relative;
}
.booking-input-with-icon > i[data-lucide],
.booking-input-with-icon > svg {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: #47504E;
    pointer-events: none;
    z-index: 1;
}
.booking-input-with-icon input {
    width: 100%;
    padding-left: 42px !important;
    height: 46px !important;
    border-radius: 12px !important;
    border: 1px solid #DEE3E1;
}
.booking-input-with-icon input:focus {
    outline: none;
    border-color: #01204A;
    box-shadow: 0 0 0 3px rgba(1, 32, 74, 0.12);
}

.airline-select { position: relative; }
.airline-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #DEE3E1;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.92rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.airline-trigger .airline-logo {
    width: 22px; height: 22px;
    border-radius: 5px;
}
.airline-trigger.is-open {
    border-color: #01204A;
    box-shadow: 0 0 0 3px rgba(1, 32, 74, 0.12);
}
.airline-trigger-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.airline-trigger-icon,
.airline-trigger-left > svg { width: 18px; height: 18px; color: #47504E; flex-shrink: 0; }
.airline-trigger-label {
    color: #47504E;
    font-size: 0.92rem;
}
.airline-trigger-name {
    flex: 1;
    color: #03160E;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
.airline-trigger-code {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.72rem;
    background: #F3F4F6;
    color: #47504E;
    padding: 3px 8px;
    border-radius: 5px;
    flex-shrink: 0;
}
.airline-trigger-chev {
    width: 18px; height: 18px;
    color: #47504E;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.airline-trigger.is-open .airline-trigger-chev { transform: rotate(180deg); }

.airline-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: 30;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
.airline-search {
    position: sticky; top: 0;
    padding: 12px;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1;
}
.airline-search > i[data-lucide],
.airline-search > svg {
    position: absolute;
    right: 24px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: #9ca3af;
    pointer-events: none;
    z-index: 2;
}
.airline-search input {
    width: 100%;
    padding: 10px 34px 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #111827;
    outline: none;
    font-family: inherit;
}
.airline-search input:focus {
    border-color: #01204A;
    box-shadow: 0 0 0 3px rgba(1, 32, 74, 0.1);
}
.airline-list {
    max-height: 300px;
    overflow-y: auto;
}
.airline-group-label {
    font-size: 0.64rem;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 0.08em;
    padding: 10px 14px 6px;
}
.airline-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.15s;
}
.airline-item:hover { background: #f9fafb; }
.airline-item.is-selected { background: rgba(1, 32, 74, 0.08); }
.airline-logo {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.airline-logo img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.airline-logo-fb {
    display: none;
    font-size: 0.64rem;
    font-weight: 700;
    font-family: ui-monospace, monospace;
    color: #01204A;
    letter-spacing: 0.02em;
}
.airline-logo.fallback {
    background: rgba(1, 32, 74, 0.1);
    border-radius: 8px;
}
.airline-logo.fallback .airline-logo-fb { display: inline; }
.airline-item-name {
    flex: 1;
    font-size: 0.9rem;
    color: #03160E;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.airline-item-code {
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    background: #F3F4F6;
    color: #47504E;
    padding: 3px 8px;
    border-radius: 5px;
    flex-shrink: 0;
}
.airline-empty {
    padding: 18px 14px;
    text-align: center;
    color: #9ca3af;
    font-size: 0.88rem;
}

.occ-legend { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0; }
.occ-legend summary {
    list-style: none;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}
.occ-legend summary::-webkit-details-marker { display: none; }
.occ-legend summary > span:first-child {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 0.88rem; color: #111827;
}
.occ-legend summary > span:first-child i[data-lucide],
.occ-legend summary > span:first-child > svg { width: 16px; height: 16px; color: #01204A; }
.occ-legend-hint { flex: 1; font-size: 0.78rem; color: #6b7280; }
.occ-legend-chev {
    width: 18px; height: 18px;
    color: #6b7280;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.occ-legend[open] .occ-legend-chev { transform: rotate(180deg); }
.occ-legend-body {
    padding: 4px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid #f1f5f9;
}
.occ-legend-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.82rem; color: #374151;
}
.occ-dot { width: 14px; height: 14px; border-radius: 4px; display: inline-block; flex-shrink: 0; }

.occ-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    gap: 12px;
}
.occ-nav-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #374151;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
.occ-nav-btn:hover { background: #f3f4f6; }
.occ-nav-btn i[data-lucide],
.occ-nav-btn > svg { width: 18px; height: 18px; }
.occ-month {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    text-transform: capitalize;
}

.occ-body { padding: 0 12px 12px; }
.occ-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 8px 0 6px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 8px;
}
.occ-weekdays span {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.occ-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.occ-cell {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 8px 8px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    background: #fff;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.occ-cell-empty {
    border: none;
    background: transparent;
}
.occ-cell:not(.occ-cell-empty):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.occ-cell.is-past { opacity: 0.55; }
.occ-cell.is-today {
    border-color: #01204A;
    box-shadow: 0 0 0 1px #01204A;
}
.occ-cell-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
}
.occ-day-num {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}
.occ-today-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background: #01204A;
    padding: 2px 6px;
    border-radius: 999px;
    letter-spacing: 0.03em;
}

.occ-cell-metrics {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
}
.occ-metric {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.72rem;
    color: #6b7280;
}
.occ-metric-label {
    display: inline-flex; align-items: center; gap: 3px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.occ-metric-label i[data-lucide],
.occ-metric-label > svg {
    width: 11px; height: 11px;
    flex-shrink: 0;
    color: #9ca3af;
}
.occ-metric-value {
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.occ-metric-fill .occ-metric-label { font-weight: 600; color: #374151; }
.occ-bar {
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
.occ-bar > span {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width 0.2s ease;
}

.occ-low { background: rgba(34, 197, 94, 0.06); }
.occ-low .occ-bar > span { background: #22c55e; }
.occ-low.is-today,
.occ-low:hover { border-color: #bbf7d0; }

.occ-mid { background: rgba(251, 188, 4, 0.08); }
.occ-mid .occ-bar > span { background: #FBBC04; }

.occ-high { background: rgba(249, 115, 22, 0.08); }
.occ-high .occ-bar > span { background: #f97316; }

.occ-full { background: rgba(239, 68, 68, 0.08); }
.occ-full .occ-bar > span { background: #ef4444; }

.occ-dot.occ-low { background: #22c55e; }
.occ-dot.occ-mid { background: #FBBC04; }
.occ-dot.occ-high { background: #f97316; }
.occ-dot.occ-full { background: #ef4444; }

@media (max-width: 900px) and (min-width: 768px) {
    .occ-cell { min-height: 80px; padding: 4px 5px 6px; }
    .occ-day-num { font-size: 0.85rem; }
    .occ-metric { font-size: 0.64rem; }
    .occ-metric-label i[data-lucide],
    .occ-metric-label > svg { width: 9px; height: 9px; }
    .occ-bar { height: 3px; }
    .occ-today-badge { font-size: 0.52rem; padding: 1px 4px; }
}
@media (max-width: 767px) {
    .occ-nav { padding: 8px 10px; }
    .occ-month { font-size: 0.95rem; }
    .occ-body { padding: 0 8px 10px; }
    .occ-weekdays { padding: 6px 0 4px; margin-bottom: 4px; }
    .occ-weekdays span { font-size: 0.6rem; letter-spacing: 0.02em; }
    .occ-grid { gap: 3px; }
    .occ-cell {
        min-height: 0;
        aspect-ratio: 1 / 1.15;
        padding: 4px 3px 10px;
        border-radius: 6px;
        border-width: 1px;
        justify-content: flex-start;
        align-items: stretch;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .occ-cell-head {
        margin: 0 0 2px;
        justify-content: space-between;
        align-items: flex-start;
    }
    .occ-day-num { font-size: 0.82rem; line-height: 1; }
    .occ-today-badge {
        font-size: 0.52rem;
        padding: 1px 4px;
        line-height: 1.1;
    }
    .occ-cell-metrics {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;
        margin: 0;
    }
    .occ-metric:not(.occ-metric-fill) { display: none; }
    .occ-metric-fill {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        padding: 0;
        text-align: center;
    }
    .occ-metric-fill .occ-metric-label { display: none; }
    .occ-metric-fill .occ-metric-value {
        font-size: 0.78rem;
        font-weight: 700;
        color: #111827;
        font-variant-numeric: tabular-nums;
    }
    .occ-cell.occ-full .occ-metric-fill .occ-metric-value { color: #b91c1c; }
    .occ-bar {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 4px;
        border-radius: 0;
        background: #f1f5f9;
        margin: 0;
    }
    .occ-cell.is-today {
        box-shadow: 0 0 0 1.5px #01204A;
        border-color: #01204A;
    }
    .occ-cell.is-today .occ-day-num { color: #01204A; }

    .occ-detail-backdrop {
        position: fixed; inset: 0;
        z-index: 95;
        background: rgba(0,0,0,0.4);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s;
    }
    .occ-detail-backdrop.open { opacity: 1; visibility: visible; }
    .occ-detail-sheet {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 96;
        background: #fff;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0));
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: 0 -6px 24px rgba(0,0,0,0.12);
    }
    .occ-detail-sheet.open { transform: translateY(0); }
    .occ-detail-handle {
        width: 38px; height: 4px;
        border-radius: 2px;
        background: #d1d5db;
        margin: 2px auto 10px;
    }
    .occ-detail-date {
        font-size: 0.7rem;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: center;
        margin-bottom: 2px;
    }
    .occ-detail-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: #111827;
        text-align: center;
        margin-bottom: 14px;
    }
    .occ-detail-pct {
        font-size: 0.78rem;
        text-align: center;
        margin-bottom: 14px;
        font-weight: 600;
    }
    .occ-detail-pct.occ-low { color: #16a34a; background: transparent; }
    .occ-detail-pct.occ-mid { color: #b45309; background: transparent; }
    .occ-detail-pct.occ-high { color: #c2410c; background: transparent; }
    .occ-detail-pct.occ-full { color: #b91c1c; background: transparent; }
    .occ-detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }
    .occ-detail-card {
        padding: 12px 10px;
        background: #f9fafb;
        border-radius: 10px;
        text-align: center;
    }
    .occ-detail-card-label {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.7rem;
        color: #6b7280;
        margin-bottom: 6px;
    }
    .occ-detail-card-label i[data-lucide],
    .occ-detail-card-label > svg { width: 12px; height: 12px; }
    .occ-detail-card-value {
        font-size: 1.35rem;
        font-weight: 700;
        color: #111827;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }
    .occ-detail-card-subval { font-size: 0.7rem; color: #6b7280; margin-top: 2px; }
}
.booking-card-head h2 { font-size: 1.02rem; font-weight: 700; color: #111827; margin: 0; }
.booking-card-head p { font-size: 0.82rem; color: #6b7280; margin: 2px 0 0; }
.booking-card-body { padding: 18px 20px 20px; }

.booking-logged-in {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    border-color: #bbf7d0;
    background: #f0fdf4;
}
.booking-logged-in i[data-lucide] { width: 28px; height: 28px; color: #16a34a; flex-shrink: 0; }
.booking-logged-name { font-size: 0.95rem; color: #14532d; }
.booking-logged-email { font-size: 0.82rem; color: #166534; margin-top: 2px; }

.booking-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.booking-field-row .booking-field { flex: 1 1 200px; min-width: 0; }
.booking-field { display: flex; flex-direction: column; margin-bottom: 14px; }
.booking-field:last-child { margin-bottom: 0; }
.booking-field label {
    font-size: 0.8rem; color: #374151; font-weight: 600;
    margin-bottom: 5px;
}
.booking-field input,
.booking-field select,
.booking-field textarea {
    height: 42px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.92rem;
    color: #111827;
    background: #fff;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.booking-field textarea {
    height: auto;
    padding: 10px 12px;
    min-height: 70px;
    resize: vertical;
}
.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus {
    outline: none;
    border-color: #01204A;
    box-shadow: 0 0 0 3px rgba(1, 32, 74, 0.1);
}
.booking-login-hint { font-size: 0.85rem; color: #6b7280; padding: 10px 0; }
.booking-login-hint a { color: #01204A; font-weight: 600; text-decoration: none; }
.booking-login-hint a:hover { text-decoration: underline; }

.vehicle-row {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}
.vehicle-row-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.vehicle-badge {
    font-size: 0.78rem;
    font-weight: 700;
    color: #01204A;
    background: rgba(1, 32, 74, 0.1);
    padding: 4px 12px;
    border-radius: 999px;
}
.vehicle-remove {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent; border: none;
    color: #b91c1c; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.vehicle-remove:hover { background: #fee2e2; }
.vehicle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 767px) {
    .vehicle-grid { grid-template-columns: 1fr; }
}
.vehicle-add-btn {
    width: 100%;
    padding: 10px;
    background: #fff;
    border: 1px dashed #c0c6d0;
    border-radius: 10px;
    color: #01204A; font-weight: 600; font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}
.vehicle-add-btn:hover:not(:disabled) {
    background: rgba(1, 32, 74, 0.06);
    border-color: #01204A;
}
.vehicle-add-btn:disabled {
    opacity: 0.5; cursor: not-allowed;
}
.vehicle-add-btn i[data-lucide] { width: 16px; height: 16px; }

.booking-save-vehicles {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.88rem;
    color: #374151;
}
.booking-save-vehicles input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: #01204A;
    cursor: pointer;
}

.booking-policy {
    padding: 18px 20px;
    background: #f0f9ff;
    border-color: #bae6fd;
}
.booking-policy h3 {
    font-size: 0.92rem; font-weight: 700; color: #01204A;
    margin: 0 0 10px;
    display: inline-flex; align-items: center; gap: 6px;
}
.booking-policy h3 i[data-lucide] { width: 18px; height: 18px; }
.booking-policy ul {
    margin: 0; padding-left: 18px;
    font-size: 0.85rem; color: #1e3a5f;
    line-height: 1.6;
}

.bfo-sidebar { min-width: 0; }
.bfo-sidebar .booking-sidebar-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    position: sticky;
    top: 88px;
}
.booking-sidebar-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f3f4f6;
    overflow: hidden;
}
.booking-sidebar-image img {
    width: 100%; height: 100%; object-fit: cover;
}
.booking-sidebar-info { padding: 14px 18px 10px; }
.booking-sidebar-info h3 {
    font-size: 1rem; font-weight: 700; color: #111827; margin: 0;
}
.booking-sidebar-meta {
    margin-top: 6px;
    display: flex; flex-direction: column; gap: 4px;
    font-size: 0.8rem; color: #6b7280;
}
.booking-sidebar-meta div {
    display: inline-flex; align-items: center; gap: 5px;
}
.booking-sidebar-meta i[data-lucide] { width: 13px; height: 13px; flex-shrink: 0; color: #9ca3af; }

.booking-sidebar-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}
.booking-sidebar-date {
    padding: 12px 18px;
}
.booking-sidebar-date + .booking-sidebar-date { border-left: 1px solid #f1f5f9; }
.booking-sidebar-date-label {
    font-size: 0.7rem; font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.booking-sidebar-date-value {
    font-size: 0.92rem; font-weight: 600; color: #111827;
    margin-top: 2px;
}

.booking-sidebar-rows {
    padding: 14px 18px 6px;
    display: flex; flex-direction: column; gap: 8px;
}
.booking-sidebar-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.88rem; color: #374151;
}
.booking-sidebar-row strong { color: #111827; font-weight: 600; }
.booking-sidebar-row-sub { font-size: 0.78rem; color: #9ca3af; margin-top: -4px; }
.booking-sidebar-row-cars { font-size: 0.82rem; color: #6b7280; }

.booking-sidebar-total {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 14px 18px 12px;
    border-top: 1px solid #e5e7eb;
    margin-top: 8px;
    font-size: 0.95rem;
    color: #111827;
    font-weight: 600;
}
.booking-sidebar-total strong {
    font-size: 1.4rem; font-weight: 700; color: #01204A;
}

.booking-sidebar-spots {
    margin: 0 18px;
    padding: 10px 14px;
    background: #f0fdf4;
    color: #166534;
    font-size: 0.82rem;
    border-radius: 8px;
    display: inline-flex; align-items: center; gap: 6px;
}
.booking-sidebar-spots i[data-lucide] { width: 14px; height: 14px; color: #16a34a; }

.booking-submit-btn {
    background: #FFB700;
    color: #01204A;
    width: 100%;
    padding: 14px;
    border: none; border-radius: 10px;
    font-size: 1rem; font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 0.15s, transform 0.1s;
    font-family: inherit;
}
.booking-submit-btn:hover { background: #e6a500; }
.booking-submit-btn:active { transform: scale(0.98); }
.booking-submit-btn i[data-lucide] { width: 18px; height: 18px; }
.booking-submit-desktop { margin: 16px 18px 12px; width: calc(100% - 36px); }

.booking-sidebar-note {
    padding: 0 18px 18px;
    font-size: 0.72rem;
    color: #9ca3af;
    line-height: 1.45;
    margin: 0;
}
.booking-sidebar-note a { color: #01204A; text-decoration: none; }
.booking-sidebar-note a:hover { text-decoration: underline; }

.booking-submit-mobile { display: none; }

.booking-sticky-total {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 25;
    background: #f8fafc;
    border-top: 2px solid #01204A;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.booking-sticky-summary { width: 100%; }
.booking-sticky-dates {
    font-size: 0.78rem; color: #4b5563; margin-bottom: 4px;
}
.booking-sticky-price-row {
    display: flex; justify-content: space-between; align-items: center;
}
.booking-sticky-price-row span { font-size: 0.85rem; color: #6b7280; }
.booking-sticky-price-row strong { font-size: 1.15rem; color: #111827; }
.booking-sticky-btn {
    background: #FFB700;
    color: #1a1a1a;
    width: 100%;
    padding: 13px 20px;
    border: none; border-radius: 8px;
    font-size: 0.95rem; font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    font-family: inherit;
}
.booking-sticky-btn:hover { background: #e6a500; }
.booking-sticky-btn i[data-lucide] { width: 16px; height: 16px; }

@media (max-width: 1023px) {
    .booking-main { grid-template-columns: 1fr; }
    .bfo-sidebar .booking-sidebar-card { position: static; }
}
@media (max-width: 767px) {
    .booking-page { padding-bottom: 96px; overflow-x: hidden; max-width: 100vw; width: 100%; }
    .booking-page * { max-width: 100%; box-sizing: border-box; }
    .booking-form, .bfo-sidebar, .booking-card { max-width: 100%; }
    .booking-topbar { padding: 10px 0; }
    .booking-topbar-inner { gap: 8px; padding: 0 12px; }
    .booking-back { padding: 6px 8px; font-size: 0.85rem; }
    .booking-back > span { display: none; }
    .booking-topbar-name { font-size: 0.9rem; }
    .booking-topbar-dates { font-size: 0.72rem; gap: 4px; flex-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .booking-days-pill { font-size: 0.65rem; padding: 1px 6px; }

    .booking-main { padding: 14px 10px 0; grid-template-columns: 1fr; gap: 10px; }
    .bfo-sidebar { order: 10; }
    .bfo-sidebar .booking-sidebar-card {
        position: static;
        border-radius: 12px;
        background: #f8fafc;
        border: 2px solid #01204A;
    }
    .booking-sidebar-card { margin-top: 0; }
    .booking-sidebar-image { display: none; }
    .booking-sidebar-info { padding: 12px 14px 8px; }
    .booking-sidebar-info h3 { font-size: 0.95rem; }
    .booking-sidebar-meta { font-size: 0.76rem; }
    .booking-sidebar-dates { grid-template-columns: 1fr 1fr; }
    .booking-sidebar-date { padding: 10px 14px; }
    .booking-sidebar-date-value { font-size: 0.85rem; }
    .booking-sidebar-rows { padding: 10px 14px 4px; }
    .booking-sidebar-row { font-size: 0.85rem; }
    .booking-sidebar-total {
        padding: 12px 14px;
        font-size: 0.88rem;
    }
    .booking-sidebar-total strong { font-size: 1.2rem; }
    .booking-sidebar-spots { margin: 0 14px; padding: 8px 12px; font-size: 0.78rem; }
    .booking-submit-desktop { display: none; }
    .booking-sidebar-note { padding: 0 14px 14px; font-size: 0.68rem; }

    .booking-card {
        border-radius: 12px;
    }
    .booking-card-head {
        padding: 12px 14px 10px;
        gap: 10px;
    }
    .booking-step-icon { width: 30px; height: 30px; }
    .booking-step-icon i[data-lucide],
    .booking-step-icon > svg { width: 16px; height: 16px; }
    .booking-step-num { width: 26px; height: 26px; font-size: 0.82rem; }
    .booking-card-head h2 { font-size: 0.95rem; }
    .booking-card-head p { font-size: 0.76rem; }
    .booking-card-body { padding: 12px 14px 14px; }
    .booking-field { margin-bottom: 10px; }
    .booking-field label { font-size: 0.76rem; }
    .booking-field input,
    .booking-field select,
    .booking-field textarea {
        height: 44px;
        font-size: 1rem;
    }
    .booking-field textarea { height: auto; min-height: 64px; }
    .booking-field-row {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }
    .booking-field-row .booking-field {
        flex: 0 0 auto;
        width: 100%;
    }
    .booking-card .booking-login-hint {
        padding: 0;
        font-size: 0.82rem;
        margin-top: -4px;
    }
    .booking-field[style*="align-items:flex-end"],
    .booking-field[style*="align-items: flex-end"] {
        display: block !important;
        align-items: initial !important;
    }

    .booking-logged-in { padding: 10px 14px; gap: 10px; }
    .booking-logged-in i[data-lucide],
    .booking-logged-in > svg { width: 22px; height: 22px; }
    .booking-logged-name { font-size: 0.88rem; }
    .booking-logged-email { font-size: 0.76rem; }
    .booking-login-hint { font-size: 0.8rem; padding: 4px 0 0; }

    .vehicle-row {
        padding: 10px 12px 12px;
        border-radius: 10px;
    }
    .vehicle-grid { grid-template-columns: 1fr; gap: 8px; }
    .vehicle-badge { font-size: 0.72rem; padding: 3px 10px; }
    .vehicle-remove { font-size: 0.75rem; padding: 4px 6px; }
    .vehicle-add-btn { padding: 12px; font-size: 0.88rem; }

    .booking-input-with-icon input {
        height: 46px !important;
        font-size: 1rem;
    }

    .booking-policy { padding: 14px 16px; }
    .booking-policy h3 { font-size: 0.88rem; }
    .booking-policy ul { font-size: 0.82rem; padding-left: 16px; }

    .booking-save-vehicles { padding: 10px 14px; font-size: 0.84rem; }

    .airline-trigger { font-size: 0.95rem; height: 44px; }
    .airline-trigger-name { font-size: 0.9rem; }
    .airline-dropdown { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 60vh; border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,0.15); }
    .airline-list { max-height: calc(60vh - 70px); }

    .phone-country-btn { padding: 0 8px; min-height: 44px; }
    .phone-flag { font-size: 1.2rem; }
    .phone-number { min-height: 44px; font-size: 1rem; }
    .phone-dropdown { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 60vh; border-radius: 14px 14px 0 0; }

    .booking-submit-mobile { display: block; margin-top: 6px; }
    .booking-submit-mobile .booking-submit-btn {
        padding: 15px;
        font-size: 1rem;
        border-radius: 12px;
    }

    .booking-sticky-total {
        display: flex;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0));
    }
    .booking-sticky-total-label { font-size: 0.7rem; }
    .booking-sticky-total-value { font-size: 1.1rem; }
    .booking-sticky-btn { padding: 11px 18px; font-size: 0.9rem; }
}

.pd-page { background: #f7f8fa; min-height: 100vh; padding-bottom: 16px; }
.pd-top { padding: 14px 1rem 0; }
.pd-back {
    display: inline-flex; align-items: center; gap: 4px;
    color: #01204A; text-decoration: none; font-weight: 600; font-size: 0.9rem;
    padding: 6px 10px; border-radius: 6px;
}
.pd-back:hover { background: rgba(1, 32, 74, 0.08); }
.pd-back i[data-lucide] { width: 18px; height: 18px; }

.pd-main { padding: 16px 1rem 24px; }

.pd-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
/* Title + rating share a row (rating on the right); the address is a separate
   full-width section below it, so it never gets squeezed. */
.pd-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.pd-header-text { flex: 1; min-width: 0; }
.pd-header h1 { flex: 1; min-width: 0; font-size: 1.8rem; font-weight: 700; color: #111827; margin: 0; line-height: 1.2; }
.pd-address {
    display: inline-flex; align-items: center; gap: 5px;
    color: #01204A; font-size: 0.92rem;
}
.pd-address i[data-lucide] { width: 15px; height: 15px; }
.pd-rating {
    display: flex; gap: 10px; align-items: flex-start;
    flex-shrink: 0;
}
.pd-rating-text { text-align: right; }
.pd-rating-label { font-size: 0.92rem; font-weight: 700; color: #171717; }
.pd-rating-count { font-size: 0.78rem; color: #595959; margin-top: 2px; }
.pd-rating-badge {
    width: 44px; height: 44px;
    font-weight: 700; font-size: 1.05rem;
    border-radius: 10px 10px 10px 0;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
/* Tier colours win because .pd-rating-badge no longer sets its own bg/colour. */

.pd-hero-row {
    display: grid;
    grid-template-columns: 1fr 340px;
    grid-template-areas: "header header" "gallery sidebar";
    gap: 8px 24px;
    align-items: start;
    margin-bottom: 24px;
}
.pd-hero-row > .pd-header { grid-area: header; }
.pd-hero-row > .pd-hero-image { grid-area: gallery; }
.pd-hero-row > .pd-sidebar-wrap-hero { grid-area: sidebar; }
.pd-hero-image { min-width: 0; }
.pd-hero-img-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: #f3f4f6;
}
.pd-hero-img-inner img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.pd-hero-img-inner:hover img { transform: scale(1.02); }
/* Swipe dots over the hero image (mobile carousel). Desktop uses the thumbnail
   strip instead, so dots are hidden there. */
.pd-hero-dots {
    display: none;
    position: absolute;
    bottom: 10px; left: 0; right: 0;
    justify-content: center;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
}
.pd-hero-dot {
    width: 7px; height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
    transition: width 0.2s ease, background 0.2s ease;
}
.pd-hero-dot.active { width: 20px; background: #fff; }
.pd-hero-thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pd-hero-thumb {
    width: 72px; height: 54px; padding: 0; border: 2px solid transparent;
    border-radius: 8px; overflow: hidden; cursor: pointer; background: #f3f4f6;
    flex-shrink: 0; transition: border-color 0.15s;
}
.pd-hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-hero-thumb.active { border-color: #01204A; }
.pd-hero-thumb:hover { border-color: #097F9A; }
.pd-hero-empty {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f3f4f6;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #9ca3af;
}
.pd-hero-empty i[data-lucide] { width: 40px; height: 40px; stroke-width: 1.2; }
.pd-hero-image .pd-gallery-viewall { opacity: 0; transform: translateY(6px); }
.pd-hero-img-inner:hover .pd-gallery-viewall { opacity: 1; transform: translateY(0); }

.pd-layout-single { grid-template-columns: 1fr !important; }
.pd-layout-single .pd-sidebar-wrap { display: none; }

.pd-sidebar-wrap-hero .pd-sidebar { position: static; }

.pd-gallery { margin-bottom: 24px; }
.pd-gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, 180px);
    gap: 6px;
    border-radius: 14px;
    overflow: hidden;
}
.pd-gallery-big {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    background: #f3f4f6;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}
.pd-gallery-small {
    background: #f3f4f6;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.pd-gallery-big img, .pd-gallery-small img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}
.pd-gallery-big:hover img, .pd-gallery-small:hover img { transform: scale(1.03); }
.pd-gallery-more {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-weight: 700; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
}
.pd-gallery-viewall {
    position: absolute;
    bottom: 14px; right: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
    font-family: inherit;
    z-index: 2;
}
.pd-gallery-big:hover .pd-gallery-viewall,
.pd-gallery-big:focus-visible .pd-gallery-viewall {
    opacity: 1;
    transform: translateY(0);
}
.pd-gallery-viewall:hover { background: rgba(0, 0, 0, 0.88); }
.pd-gallery-viewall i[data-lucide] { width: 15px; height: 15px; }

@media (max-width: 767px) {
    .pd-gallery-viewall {
        opacity: 1;
        transform: none;
        bottom: 10px; right: 10px;
        padding: 8px 14px;
        font-size: 0.76rem;
    }
}
.pd-gallery-empty-cell {
    display: flex; align-items: center; justify-content: center;
    color: #d1d5db;
}
.pd-gallery-empty-cell i[data-lucide] { width: 32px; height: 32px; stroke-width: 1.2; }
.pd-gallery-empty {
    width: 100%; height: 320px;
    background: #f3f4f6;
    border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; color: #9ca3af;
}
.pd-gallery-empty i[data-lucide] { width: 40px; height: 40px; stroke-width: 1.2; }

.pd-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
}
.pd-content { min-width: 0; }

.pd-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.pd-fact {
    display: flex; gap: 10px; align-items: center;
    padding: 12px 14px;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.pd-fact-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(1, 32, 74, 0.08);
    color: #01204A;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pd-fact-icon i[data-lucide] { width: 18px; height: 18px; }
.pd-fact-value { font-size: 0.98rem; font-weight: 700; color: #111827; line-height: 1.1; }
.pd-fact-label { font-size: 0.76rem; color: #6b7280; margin-top: 2px; }

.pd-map-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.88rem; font-weight: 600; color: #01204A;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 24px;
    font-family: inherit;
}
.pd-map-btn:hover { background: rgba(1, 32, 74, 0.06); }
.pd-map-btn i[data-lucide] { width: 16px; height: 16px; }

.pd-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 14px;
}
.pd-section h2 {
    font-size: 1.1rem; font-weight: 700; color: #111827;
    margin: 0 0 14px;
}

.pd-services {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.pd-service {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 0.88rem; color: #374151;
}
.pd-service-icon {
    width: 32px; height: 32px;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pd-service-icon i[data-lucide] { width: 15px; height: 15px; }
.pd-service-icon img { width: 18px; height: 18px; display: block; }

.pd-description {
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.65;
}

.pd-season { margin-bottom: 18px; }
.pd-season:last-child { margin-bottom: 0; }
.pd-season h3 { font-size: 0.95rem; font-weight: 700; color: #111827; margin: 0 0 6px; }
.pd-season-periods {
    font-size: 0.78rem; color: #6b7280; margin-bottom: 8px;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.pd-season-period {
    background: rgba(1, 32, 74, 0.06);
    color: #01204A;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.pd-price-table {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 6px;
}
.pd-price-cell {
    text-align: center;
    padding: 10px 6px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.pd-price-cell-overflow { background: rgba(1, 32, 74, 0.06); border-color: rgba(1, 32, 74, 0.2); }
.pd-price-day { font-size: 0.72rem; color: #6b7280; font-weight: 600; }
.pd-price-val { font-size: 0.92rem; font-weight: 700; color: #111827; margin-top: 3px; }

.pd-reviews { display: flex; flex-direction: column; gap: 14px; }
.pd-review {
    padding: 14px;
    background: #f9fafb;
    border-radius: 10px;
}
.pd-review-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.pd-review-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #01204A; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.88rem;
    flex-shrink: 0;
}
.pd-review-author { font-weight: 600; color: #111827; font-size: 0.92rem; }
.pd-review-stars { display: inline-flex; gap: 1px; margin-top: 2px; }
.pd-review-stars i[data-lucide] { width: 13px; height: 13px; color: #FBBC04; fill: #FBBC04; }
.pd-review-stars i[data-lucide].empty { color: #e5e7eb; fill: transparent; }
.pd-review-text {
    margin: 0;
    color: #374151;
    font-size: 0.88rem; line-height: 1.55;
}

.pd-sidebar-wrap { min-width: 0; }
.pd-sidebar {
    position: sticky; top: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.pd-sidebar-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 12px;
}
.pd-sidebar-dates > div { padding: 10px 14px; }
.pd-sidebar-dates > div + div { border-left: 1px solid #e5e7eb; }
.pd-sidebar-dates-lbl {
    font-size: 0.68rem; color: #9ca3af; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.pd-sidebar-dates-val { font-size: 0.88rem; font-weight: 600; color: #111827; margin-top: 2px; }
.pd-sidebar-days {
    font-size: 0.82rem; color: #6b7280;
    text-align: center;
    margin-bottom: 14px;
}
.pd-sidebar-days strong { color: #111827; }
.pd-sidebar-total {
    padding: 14px;
    background: #f9fafb;
    border-radius: 10px;
    margin-bottom: 12px;
}
.pd-sidebar-total-label { font-size: 0.78rem; color: #6b7280; }
.pd-sidebar-total-value {
    font-size: 1.55rem; font-weight: 700; color: #111827;
    margin-top: 2px; line-height: 1.1;
}
.pd-sidebar-total-note { font-size: 0.72rem; color: #6b7280; margin-top: 3px; }

.pd-sidebar-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    width: 100%;
    padding: 13px;
    background: #FFB700; color: #01204A;
    border: none; border-radius: 10px;
    font-size: 0.95rem; font-weight: 700;
    text-decoration: none; cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}
.pd-sidebar-cta:hover { background: #e6a500; }
.pd-sidebar-cta i[data-lucide] { width: 16px; height: 16px; }

.pd-sidebar-spots {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 10px;
    padding: 6px 10px;
    background: #f0fdf4;
    color: #166534;
    font-size: 0.78rem;
    border-radius: 6px;
}
.pd-sidebar-spots i[data-lucide] { width: 13px; height: 13px; color: #16a34a; }
.pd-sidebar-nospots {
    margin-top: 10px;
    padding: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.85rem; text-align: center;
    border-radius: 8px;
    font-weight: 600;
}

.pd-sidebar-noavail {
    margin-top: 10px; text-align: center; padding: 16px 12px;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
}
.pd-sidebar-noavail i[data-lucide] {
    width: 28px; height: 28px; color: #d97706; margin: 0 auto 6px; display: block;
}
.pd-sidebar-noavail p {
    font-size: 0.85rem; color: #92400e; margin: 0 0 10px; line-height: 1.4;
}
.pd-sidebar-change-dates {
    display: inline-block; font-size: 0.85rem; font-weight: 600;
    color: var(--primary); text-decoration: none;
}
.pd-sidebar-change-dates:hover { text-decoration: underline; }

.pd-sidebar-empty { text-align: center; padding: 8px 0; }
.pd-sidebar-from {
    display: flex; align-items: baseline; justify-content: center;
    flex-wrap: wrap; gap: 6px;
    margin-bottom: 14px; padding-bottom: 14px;
    border-bottom: 1px solid #eef2f6;
}
.pd-sidebar-from-prefix { font-size: 0.8rem; color: #6b7280; font-weight: 500; }
.pd-sidebar-from-value { font-size: 1.5rem; font-weight: 800; color: #0B5998; letter-spacing: -0.01em; }
.pd-sidebar-from-unit { font-size: 0.82rem; color: #6b7280; }
.pd-sidebar-dateform { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.pd-sidebar-dateform .pd-df-field { display: flex; flex-direction: column; gap: 4px; }
.pd-sidebar-dateform label { font-size: 0.72rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; }
.pd-sidebar-dateform input[type="date"] {
    width: 100%; padding: 10px 12px;
    border: 1px solid #d1d5db; border-radius: 10px;
    font-size: 0.9rem; color: #111827; font-family: inherit;
    background: #fff; box-sizing: border-box;
}
.pd-sidebar-dateform input[type="date"]:focus { outline: none; border-color: #01204A; box-shadow: 0 0 0 3px rgba(1,32,74,0.12); }
.pd-sidebar-dateform .pd-sidebar-cta { margin-top: 2px; }
.pd-sidebar-empty i[data-lucide] {
    width: 40px; height: 40px;
    color: #01204A;
    margin: 0 auto 8px;
}
.pd-sidebar-empty h4 { font-size: 1rem; font-weight: 700; color: #111827; margin: 0 0 4px; }
.pd-sidebar-empty p { font-size: 0.82rem; color: #6b7280; margin: 0 0 14px; }
.pd-sidebar-empty .booking-field { text-align: left; }

.pd-date-trigger {
    display: flex; align-items: stretch; width: 100%;
    border: 1px solid #d1d5db; border-radius: var(--radius-md);
    background: var(--white); cursor: pointer; text-align: left;
    transition: border-color 0.15s;
}
.pd-date-trigger:hover { border-color: var(--primary); }
.pd-date-col { flex: 1; padding: 10px 12px; }
.pd-date-sep { width: 1px; background: #e5e7eb; margin: 8px 0; }
.pd-date-label { font-size: 0.7rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.pd-date-value { font-size: 0.85rem; color: #111827; white-space: nowrap; }
.pd-date-value.placeholder { color: #9ca3af; }

.pd-cal-popup {
    display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    z-index: 100; background: var(--white); border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 20px; min-width: 580px; margin-top: 8px;
}
.pd-cal-popup.open { display: block; }
@media (max-width: 767px) { .pd-cal-popup { display: none !important; } }

.pd-cal-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.pd-cal-titles { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; flex: 1; text-align: center; font-weight: 600; font-size: 0.95rem; color: var(--text-gray-900); }
.pd-cal-nav {
    width: 32px; height: 32px; border: none; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);
    color: var(--text-gray-600); flex-shrink: 0;
}
.pd-cal-nav:hover { background: var(--bg-soft); }
.pd-cal-nav i[data-lucide] { width: 16px; height: 16px; }
.pd-cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.pd-cal-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 16px; padding-top: 12px; border-top: 1px solid #f1f5f9;
}
.pd-cal-footer span { font-size: 0.9rem; color: var(--text-gray-500); }
.pd-cal-footer .nights { color: var(--primary); font-weight: 600; margin-left: 4px; }
.pd-cal-confirm {
    padding: 8px 20px; border: none; border-radius: var(--radius-md);
    background: var(--primary); color: var(--white); font-weight: 600;
    font-size: 0.9rem; cursor: pointer;
}
.pd-cal-confirm:disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }
.pd-cal-confirm:not(:disabled):hover { background: var(--primary-dark); }

.pd-sidebar-empty { position: relative; }
.pd-sidebar-empty #pd_submit_btn:disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }

.pd-date-modal {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: var(--white); flex-direction: column; overflow: hidden;
}
.pd-date-modal.open { display: flex; }
@media (min-width: 768px) { .pd-date-modal { display: none !important; } }
.pd-date-modal-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.pd-date-modal-close {
    width: 36px; height: 36px; border: none; background: none;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pd-date-modal-close i[data-lucide] { width: 20px; height: 20px; }
.pd-date-modal-title { font-size: 1.1rem; font-weight: 700; }
.pd-date-modal-subtitle { font-size: 0.82rem; color: #6b7280; }
.pd-date-modal-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
    font-size: 0.75rem; font-weight: 600; color: #6b7280; padding: 8px 16px;
    border-bottom: 1px solid #f1f5f9; flex-shrink: 0;
}
.pd-date-modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px 16px; }
.pd-date-modal-month-title {
    font-size: 1rem; font-weight: 700; color: var(--text-gray-900);
    padding: 20px 0 12px; text-align: center; position: sticky; top: 0; background: var(--white); z-index: 1;
}
.pd-date-modal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pd-date-modal-cell {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; border: none; background: none; cursor: pointer; border-radius: var(--radius-sm);
}
.pd-date-modal-cell.empty { cursor: default; }
.pd-date-modal-cell:disabled { color: #d1d5db; cursor: not-allowed; }
.pd-date-modal-cell.today:not(.range-start):not(.range-end) { font-weight: 700; color: var(--primary); border: 1px solid var(--primary); }
.pd-date-modal-cell.in-range { background: #dbeafe; color: var(--text-gray-900); }
.pd-date-modal-cell.range-start,
.pd-date-modal-cell.range-end { background: var(--primary); color: var(--white); font-weight: 600; }
.pd-date-modal-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-top: 1px solid #e5e7eb; flex-shrink: 0;
}
.pd-date-modal-range { font-size: 0.9rem; color: var(--text-gray-500); }
.pd-date-modal-range .nights { color: var(--primary); font-weight: 600; }
.pd-date-modal-confirm {
    padding: 10px 24px; border: none; border-radius: var(--radius-md);
    background: var(--primary); color: var(--white); font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.pd-date-modal-confirm:disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }

.pd-sidebar-bennies {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
    display: flex; flex-direction: column; gap: 6px;
}
.pd-benefit {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.8rem; color: #374151;
}
.pd-benefit i[data-lucide] {
    width: 14px; height: 14px;
    color: #16a34a;
    flex-shrink: 0;
}

.pd-sidebar-services {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eef2f6;
}
.pd-sidebar-services-title {
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: #94a3b8; margin-bottom: 12px;
}
.pd-sidebar-services-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.pd-sidebar-services-list li {
    list-style: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px 5px 9px; border-radius: 100px;
    background: #f1f5f9; color: #334155;
    font-size: 0.78rem; font-weight: 600; line-height: 1.2;
}
.pd-sidebar-services-list li img { width: 16px; height: 16px; display: block; flex: none; }

/* On phones the sidebar services duplicate the main "Szolgáltatások" section
   (which has the same icons). Hide the sidebar copy there to avoid the repeat. */
@media (max-width: 900px) {
    .pd-sidebar-services { display: none; }
}

.pd-sticky-bar { display: none; }

.pd-lightbox {
    position: fixed; inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.pd-lightbox.open { opacity: 1; visibility: visible; }
.pd-lightbox-img-wrap { max-width: 100%; max-height: 100%; }
.pd-lightbox-img-wrap img {
    max-width: 100%; max-height: calc(100vh - 40px);
    display: block;
    border-radius: 6px;
    object-fit: contain;
}
.pd-lightbox-close, .pd-lightbox-prev, .pd-lightbox-next {
    position: absolute;
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: none; border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
}
.pd-lightbox-close { top: 20px; right: 20px; }
.pd-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.pd-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.pd-lightbox-close:hover, .pd-lightbox-prev:hover, .pd-lightbox-next:hover {
    background: rgba(255,255,255,0.2);
}
.pd-lightbox-close i[data-lucide], .pd-lightbox-prev i[data-lucide], .pd-lightbox-next i[data-lucide] {
    width: 22px; height: 22px;
}
.pd-lightbox-counter {
    position: absolute;
    bottom: 20px; left: 50%; transform: translateX(-50%);
    padding: 6px 14px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 999px;
    font-size: 0.82rem; font-weight: 600;
    backdrop-filter: blur(8px);
}

.pd-map-modal {
    position: fixed; inset: 0;
    z-index: 150;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.pd-map-modal.open { opacity: 1; visibility: visible; }
.pd-map-inner {
    background: #fff;
    width: 100%; max-width: 900px;
    max-height: 90vh;
    border-radius: 14px;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.pd-map-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
}
.pd-map-head h3 { font-size: 1rem; font-weight: 700; margin: 0; color: #111827; }
.pd-map-head button {
    width: 36px; height: 36px;
    background: transparent; border: none;
    border-radius: 50%;
    cursor: pointer; color: #374151;
    display: flex; align-items: center; justify-content: center;
}
.pd-map-head button:hover { background: #f3f4f6; }
#map-container { flex: 1; min-height: 400px; }

@media (max-width: 1023px) {
    .pd-layout { grid-template-columns: 1fr; }
    /* Single column: gallery first, then the name/rating header, then booking. */
    .pd-hero-row { grid-template-columns: 1fr; grid-template-areas: "gallery" "header" "sidebar"; }
    .pd-sidebar { position: static; }
    .pd-hero-img-inner { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
    .pd-header h1 { font-size: 1.35rem; }
    .pd-hero-dots { display: flex; }
    .pd-hero-thumbs { display: none; }
    /* No sticky bottom bar on mobile anymore, so no extra bottom space needed. */
    .pd-main { padding: 12px 12px 28px; }
    .pd-hero-img-inner { aspect-ratio: 4 / 3; border-radius: 12px; }
    .pd-section { padding: 16px; }
    /* Show the price + date-picker + services sidebar on phones too (stacked
       below the hero image), so the booking flow matches desktop. The sticky
       bottom bar still appears once a date range is selected. */
    .pd-sidebar-wrap-hero { display: block; }
    /* The persistent bottom booking bar is removed on mobile per request — the
       inline booking section/CTA on the page covers booking. */
    .pd-sticky-bar {
        display: none;
        position: fixed; bottom: 0; left: 0; right: 0;
        z-index: 25;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0));
        justify-content: space-between; align-items: center; gap: 12px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
    }
    .pd-sticky-bar-full {
        flex-direction: column; gap: 8px; align-items: stretch;
        background: #f8fafc; border-top: 2px solid #01204A;
    }
    .pd-sticky-summary { display: flex; justify-content: space-between; align-items: center; }
    .pd-sticky-dates { font-size: 0.78rem; color: #4b5563; display: flex; align-items: center; gap: 4px; }
    .pd-sticky-arrow { color: #9ca3af; }
    .pd-sticky-price { flex: 1; min-width: 0; }
    .pd-sticky-total { font-size: 1.1rem; font-weight: 700; color: #111827; }
    .pd-sticky-note { font-size: 0.75rem; color: #6b7280; font-weight: 400; margin-left: 4px; }
    .pd-sticky-bar-full .pd-sticky-cta { width: 100%; justify-content: center; }
    .pd-sticky-cta {
        display: inline-flex; align-items: center; gap: 4px;
        background: #FFB700; color: #1a1a1a;
        padding: 12px 20px;
        border-radius: 8px;
        font-weight: 700; font-size: 0.95rem;
        text-decoration: none;
    }
    .pd-sticky-cta:hover { background: #e6a500; }
    .pd-sticky-cta i[data-lucide] { width: 16px; height: 16px; }
    .pd-sticky-bar-pick, .pd-sticky-bar-noavail { display: flex; }
    .pd-sticky-pick-text { font-size: 0.88rem; font-weight: 600; color: #111827; }
    .pd-sticky-noavail-text { font-size: 0.85rem; font-weight: 600; color: #92400e; }
    .pd-sticky-cta-outline {
        background: transparent !important; color: var(--primary) !important;
        border: 1.5px solid var(--primary);
    }
    .pd-sticky-bar-pick .pd-sticky-cta {
        border: none; cursor: pointer;
    }
}

.featured-section { padding: 2.5rem 0 1rem; }
.featured-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 1rem; margin-bottom: 1rem;
}
.featured-head h2 { font-size: 1.25rem; font-weight: 700; color: #111827; margin: 0; }
.featured-all {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.88rem; color: #01204A;
    text-decoration: none; font-weight: 600;
}
.featured-all:hover { text-decoration: underline; }
.featured-all i[data-lucide] { width: 15px; height: 15px; }
.featured-scroll {
    display: flex;
    gap: 14px;
    padding: 0 1rem 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.featured-scroll::-webkit-scrollbar { height: 6px; }
.featured-scroll::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }

/* ===== Auto-gliding marquee (pure CSS, GPU-smooth, never stops). The cards are
   rendered twice inside .featured-track; translating the track by -50% slides
   the duplicate into the first set's exact position → seamless infinite loop.
   Using margin-right (not flex gap) makes the half-point land precisely on a
   card boundary so there is no jump. Pauses on hover. ===== */
.featured-scroll-wrap { overflow: hidden; }
.featured-scroll-wrap .featured-scroll {
    display: block !important;
    overflow: hidden !important;
    scroll-snap-type: none !important;
    padding: 4px 0 !important;
    -ms-overflow-style: auto;
}
.featured-track {
    display: flex;
    gap: 0;
    width: max-content;
    animation: featured-marquee 48s linear infinite;
    will-change: transform;
}
.featured-track .featured-card {
    margin-right: 14px;
    scroll-snap-align: none;
}
.featured-scroll-wrap:hover .featured-track,
.featured-scroll-wrap:focus-within .featured-track {
    animation-play-state: paused;
}
@keyframes featured-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (max-width: 767px) {
    .featured-track { animation-duration: 60s; }
}
.featured-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.featured-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.08); transform: translateY(-2px); text-decoration: none; }
.featured-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #f3f4f6;
    overflow: hidden;
}
.featured-card-image img { width: 100%; height: 100%; object-fit: cover; }
.featured-card-rating {
    position: absolute;
    top: 10px; left: 10px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.95);
    border-radius: 999px;
    font-size: 0.78rem; font-weight: 700; color: #171717;
    display: inline-flex; align-items: center; gap: 3px;
    backdrop-filter: blur(4px);
}
.featured-card-body { padding: 12px 14px 14px; }
.featured-card-name {
    font-size: 0.95rem; font-weight: 700; color: #111827;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.featured-card-meta {
    display: flex; gap: 10px; margin-top: 4px;
    font-size: 0.75rem; color: #6b7280;
}
.featured-card-meta span {
    display: inline-flex; align-items: center; gap: 3px;
}
.featured-card-meta i[data-lucide] { width: 12px; height: 12px; }
.featured-card-price {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #6b7280;
}
.featured-card-price strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0a2540;
}
.featured-card-price-prefix {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
    margin-right: 2px;
}
.featured-card-price-unit {
    font-size: 0.8rem;
    color: #6b7280;
}

.photo-dropzone {
    display: block;
    border: 2px dashed #c7cdd8;
    border-radius: 14px;
    background: #f9fafb;
    padding: 36px 24px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.photo-dropzone:hover { background: #f3f4f6; border-color: #01204A; }
.photo-dropzone.drag-active {
    background: rgba(1, 32, 74, 0.08);
    border-color: #01204A;
    transform: scale(1.005);
}
.photo-dropzone-inner { pointer-events: none; }
.photo-dropzone-icon {
    width: 56px; height: 56px;
    margin: 0 auto 12px;
    background: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    color: #01204A;
}
.photo-dropzone-icon i[data-lucide] { width: 26px; height: 26px; }
.photo-dropzone-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}
.photo-dropzone-hint {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 2px;
}
.photo-dropzone-hint-opt { color: #01204A; opacity: 0.8; margin-top: 4px; font-size: 0.75rem; }

.photo-queue {
    margin-top: 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.photo-queue-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.photo-queue-item.has-error { border-color: #fecaca; background: #fef2f2; }
.photo-queue-item.is-done { border-color: #bbf7d0; background: #f0fdf4; }
.photo-queue-thumb {
    width: 52px; height: 52px;
    border-radius: 8px;
    background: #f3f4f6;
    overflow: hidden;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #9ca3af;
}
.photo-queue-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-queue-body { flex: 1; min-width: 0; }
.photo-queue-name {
    font-size: 0.88rem; font-weight: 600;
    color: #111827;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.photo-queue-size { font-size: 0.72rem; color: #6b7280; }
.photo-queue-progress {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    margin: 6px 0 3px;
}
.photo-queue-progress .bar {
    height: 100%;
    background: #01204A;
    transition: width 0.2s ease;
}
.has-error .photo-queue-progress .bar { background: #ef4444; }
.is-done .photo-queue-progress .bar { background: #16a34a; }
.photo-queue-status {
    font-size: 0.72rem;
    color: #6b7280;
}
.has-error .photo-queue-status { color: #b91c1c; }
.is-done .photo-queue-status { color: #16a34a; }

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.photo-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.photo-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.photo-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
    transform: scale(0.97);
}
.photo-card-drag-handle {
    position: absolute;
    top: 6px; left: 6px;
    width: 28px; height: 28px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    backdrop-filter: blur(6px);
}
.photo-card:hover .photo-card-drag-handle { opacity: 1; }
.photo-card-drag-handle i[data-lucide] { width: 16px; height: 16px; }
.photo-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.photo-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.photo-card-dims {
    position: absolute;
    bottom: 6px; left: 6px;
    padding: 2px 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.7rem;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    font-variant-numeric: tabular-nums;
}
.photo-card-actions {
    position: absolute;
    top: 6px; right: 6px;
    display: flex; gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.photo-card:hover .photo-card-actions { opacity: 1; }
.photo-card-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.95);
    color: #374151;
    border: none; border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: background 0.15s, color 0.15s;
}
.photo-card-btn:hover { background: #fff; color: #111827; }
.photo-card-delete:hover { color: #b91c1c; }
.photo-card-btn i[data-lucide] { width: 15px; height: 15px; }

.photo-card-cover-badge {
    position: absolute;
    top: 6px; left: 6px;
    display: none;
    align-items: center;
    padding: 3px 10px;
    background: #01204A;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 999px;
    z-index: 2;
    pointer-events: none;
}
.photo-card:first-child .photo-card-cover-badge { display: inline-flex; }
.photo-card:first-child .photo-card-drag-handle { display: none; }

.photo-card-btn[data-dir] { font-weight: 700; }
.photo-card-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.photo-card { touch-action: pan-y; }
.photo-card.dragging {
    box-shadow: 0 12px 24px rgba(1, 32, 74, 0.25);
    z-index: 10;
    transform: scale(1.03);
    opacity: 0.9;
}

@media (max-width: 600px) {
    .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .photo-card-actions { opacity: 1; }
    .photo-card-drag-handle { opacity: 0; }
    .photo-card-btn { width: 28px; height: 28px; }
    .photo-card-btn i[data-lucide] { width: 13px; height: 13px; }
    .photo-card-cover-badge { font-size: 0.62rem; padding: 2px 7px; }
}

.cc-root {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s ease;
}
.cc-root.cc-visible { transform: translateY(0); opacity: 1; }
.cc-root.cc-leaving { transform: translateY(100%); opacity: 0; }
.cc-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: -1;
}
.cc-root.cc-settings-open .cc-backdrop {
    opacity: 1;
    pointer-events: auto;
}
.cc-panel {
    background: #fff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
}
.cc-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 20px;
}

.cc-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.cc-main-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 260px;
}
.cc-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(1, 32, 74, 0.1);
    color: #01204A;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.cc-icon i[data-lucide] { width: 18px; height: 18px; }
.cc-text h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #171717;
    margin: 0 0 3px;
}
.cc-text p {
    font-size: 0.78rem;
    color: #595959;
    line-height: 1.5;
    margin: 0;
}
.cc-text a {
    color: #01204A;
    font-weight: 500;
    text-decoration: none;
}
.cc-text a:hover { text-decoration: underline; }

.cc-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cc-btn {
    padding: 10px 18px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.cc-btn-primary {
    background: #01204A;
    color: #fff;
    font-weight: 700;
    padding: 10px 20px;
}
.cc-btn-primary:hover { background: #094a82; }
.cc-btn-secondary {
    background: #fff;
    color: #595959;
    border-color: #e0e0e0;
}
.cc-btn-secondary:hover { background: #f5f5f5; color: #171717; }
.cc-btn-outline {
    background: #fff;
    color: #01204A;
    border-color: rgba(1, 32, 74, 0.3);
}
.cc-btn-outline:hover { background: rgba(1, 32, 74, 0.05); }

.cc-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.cc-settings-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cc-settings-title i[data-lucide] { width: 18px; height: 18px; color: #01204A; }
.cc-settings-title h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #171717;
    margin: 0;
}
.cc-settings-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #595959;
    transition: background 0.15s, color 0.15s;
}
.cc-settings-close:hover { background: #f5f5f5; color: #171717; }
.cc-settings-close i[data-lucide] { width: 18px; height: 18px; }

.cc-settings-intro {
    font-size: 0.78rem;
    color: #595959;
    line-height: 1.5;
    margin: 0 0 16px;
}
.cc-settings-intro a { color: #01204A; font-weight: 500; text-decoration: none; }
.cc-settings-intro a:hover { text-decoration: underline; }

.cc-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}
.cc-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
}
.cc-category-locked { background: #f9f9f9; }
.cc-category-text { flex: 1; min-width: 0; }
.cc-category-name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.cc-category-name i[data-lucide] {
    width: 15px; height: 15px;
    color: #595959;
    flex-shrink: 0;
}
.cc-category-locked .cc-category-name i[data-lucide] { color: #01204A; }
.cc-category-name > span:not(.cc-always-on) {
    font-size: 0.88rem;
    font-weight: 600;
    color: #171717;
}
.cc-always-on {
    font-size: 0.64rem;
    font-weight: 500;
    color: #01204A;
    background: rgba(1, 32, 74, 0.1);
    padding: 2px 8px;
    border-radius: 999px;
}
.cc-category p {
    font-size: 0.76rem;
    color: #595959;
    line-height: 1.5;
    margin: 0;
}

.cc-toggle {
    width: 44px; height: 24px;
    border-radius: 999px;
    border: none;
    background: #d1d5db;
    cursor: pointer;
    padding: 0;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.cc-toggle span {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: left 0.2s ease, right 0.2s ease;
}
.cc-toggle-on {
    background: #01204A;
}
.cc-toggle-on span {
    left: auto;
    right: 2px;
}
.cc-toggle-locked {
    cursor: not-allowed;
    opacity: 0.9;
}

.cc-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 767px) {
    .cc-inner { padding: 14px 16px; }
    .cc-main { flex-direction: column; align-items: stretch; }
    .cc-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .cc-btn-primary { grid-column: 1 / 3; order: -1; }
    .cc-category { padding: 12px; }
    .cc-category p { font-size: 0.72rem; }
    .cc-settings-actions { flex-direction: column-reverse; }
    .cc-settings-actions .cc-btn { width: 100%; text-align: center; }
}

.pac-center {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pac-top-card { padding: 18px 24px; }
.pac-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}
.pac-nav-left {
    display: flex; align-items: center; gap: 8px;
    min-width: 0;
}
.pac-nav-btn {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    border-radius: 8px;
    color: #374151;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
.pac-nav-btn:hover { background: #f3f4f6; }
.pac-nav-btn i[data-lucide],
.pac-nav-btn > svg { width: 18px; height: 18px; }
.pac-month {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    white-space: nowrap;
}
.pac-today-btn {
    padding: 10px 24px;
    background: #01204A;
    color: #fff;
    border: none; border-radius: 10px;
    font-size: 0.95rem; font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    flex-shrink: 0;
}
.pac-today-btn:hover { background: #094a82; }

.pac-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: #f3f4f6;
    border-radius: 12px;
}
.pac-tab {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.pac-tab i[data-lucide],
.pac-tab > svg { width: 16px; height: 16px; }
.pac-tab.active {
    background: #fff;
    color: #01204A;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.pac-grid-card { padding: 24px 28px; }
.pac-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 2px 0 14px;
}
.pac-weekdays span {
    text-align: center;
    font-size: 0.95rem;
    color: #6b7280;
    font-weight: 500;
}
.pac-grid {
    display: grid;
    /* minmax(0, 1fr) lets the 7 columns shrink to fit narrow screens instead of
       overflowing (which clipped the last column on phones). */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}
.pac-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    padding: 14px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.pac-cell:hover:not(.pac-cell-outside) {
    background: #f9fafb;
    border-color: #e5e7eb;
}
.pac-cell:active:not(.pac-cell-outside) { transform: scale(0.97); }
.pac-day-num {
    font-size: 1.05rem;
    font-weight: 500;
    color: #111827;
    font-variant-numeric: tabular-nums;
}
.pac-cell-outside {
    background: #fafbfc;
    cursor: default;
}
.pac-cell-outside .pac-day-num { color: #cbd5e1; }
.pac-cell-past .pac-day-num { color: #9ca3af; }
.pac-cell-today {
    border: 2px solid #01204A;
    padding: 13px;
}
.pac-cell-today .pac-day-num { color: #01204A; font-weight: 700; }
.pac-cell-blocked {
    background: #fef2f2;
    border-color: #fecaca;
}

.amenity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.amenity-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    user-select: none;
}
.amenity-tile:hover { background: #f3f4f6; border-color: #d1d5db; }
.amenity-tile:active { transform: scale(0.98); }
.amenity-tile input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.amenity-tile-icon {
    width: 36px; height: 36px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border-radius: 8px;
    color: #6b7280;
    transition: background 0.15s, color 0.15s;
}
.amenity-tile-icon i[data-lucide],
.amenity-tile-icon > svg { width: 18px; height: 18px; }
.amenity-tile-label {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 500;
    color: #111827;
}
.amenity-tile-check {
    width: 18px; height: 18px;
    color: #fff;
    background: transparent;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    padding: 2px;
    box-sizing: border-box;
}
.amenity-tile.is-selected {
    background: rgba(1, 32, 74, 0.08);
    border-color: #01204A;
}
.amenity-tile.is-selected .amenity-tile-icon {
    background: #01204A;
    color: #fff;
}
.amenity-tile.is-selected .amenity-tile-label { color: #01204A; }
.amenity-tile.is-selected .amenity-tile-check {
    opacity: 1;
    background: #01204A;
}
.form-hint {
    font-size: 0.82rem;
    color: #6b7280;
    margin: -4px 0 10px;
}

.readonly-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 0.88rem;
    color: #78350f;
}
.readonly-banner i[data-lucide],
.readonly-banner > svg {
    width: 18px; height: 18px;
    color: #b45309;
    flex-shrink: 0;
}

.amenity-add-form { max-width: 500px; }
.amenity-add-form .form-group { margin-bottom: 14px; }
.amenity-icon-input {
    display: flex;
    align-items: center;
    gap: 10px;
}
.amenity-icon-preview {
    width: 42px; height: 42px;
    background: rgba(1, 32, 74, 0.08);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #01204A;
    flex-shrink: 0;
}
.amenity-icon-preview i[data-lucide],
.amenity-icon-preview > svg { width: 20px; height: 20px; }
.amenity-icon-input input {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.88rem;
}
.form-hint code {
    background: #f3f4f6;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.82rem;
}
.amenity-icon-cell {
    width: 34px; height: 34px;
    background: rgba(1, 32, 74, 0.08);
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #01204A;
}
.amenity-icon-cell i[data-lucide],
.amenity-icon-cell > svg { width: 16px; height: 16px; }

.edit-req-field {
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 10px;
    background: #fafafa;
    transition: background 0.15s, border-color 0.15s;
}
.edit-req-field:has(input[type="checkbox"]:checked),
.edit-req-field:has(.edit-req-inputs.is-active) {
    background: #fff;
    border-color: #01204A;
}
.edit-req-check {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 0.92rem; color: #111827;
    cursor: pointer;
    margin-bottom: 10px;
}
.edit-req-check input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: #01204A; cursor: pointer;
}
.edit-req-inputs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    opacity: 0.55; transition: opacity 0.15s;
}
.edit-req-inputs.is-active { opacity: 1; }
.edit-req-label {
    font-size: 0.72rem; font-weight: 600; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.03em;
    margin-bottom: 4px;
}
.edit-req-current .edit-req-value {
    padding: 10px 12px;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 0.88rem; color: #374151;
    min-height: 42px;
    white-space: pre-wrap;
    word-break: break-word;
}
.edit-req-new input,
.edit-req-new textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit; font-size: 0.88rem;
    background: #fff; color: #111827;
}
.edit-req-new input:focus,
.edit-req-new textarea:focus {
    outline: none; border-color: #01204A;
    box-shadow: 0 0 0 3px rgba(1,32,74,0.12);
}

.er-row {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
}
.er-row:last-child { border-bottom: none; }
.er-row-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px; font-size: 0.95rem; color: #111827;
}
.er-row-diff {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}
.er-side {
    padding: 10px 12px;
    border-radius: 8px;
    min-height: 44px;
}
.er-side-current { background: #fef2f2; border: 1px solid #fecaca; }
.er-side-new { background: #f0fdf4; border: 1px solid #bbf7d0; }
.er-label {
    font-size: 0.7rem; font-weight: 600; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.03em;
    margin-bottom: 3px;
}
.er-value { font-size: 0.92rem; color: #111827; word-break: break-word; }
.er-side-new .er-value { color: #14532d; font-weight: 500; }
.er-side-current .er-value { color: #7f1d1d; }
.er-arrow { color: #6b7280; }
.er-arrow i[data-lucide], .er-arrow > svg { width: 18px; height: 18px; }

.er-row-actions {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.er-radio {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem; font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}
.er-radio input { position: absolute; opacity: 0; }
.er-radio i[data-lucide], .er-radio > svg { width: 14px; height: 14px; }
.er-radio:has(input:checked) {
    border-color: #01204A; background: rgba(1,32,74,0.08); color: #01204A;
}
.er-radio:has(input[value="rejected"]:checked) {
    border-color: #b91c1c; background: #fef2f2; color: #b91c1c;
}
.er-note-input {
    flex: 1; min-width: 200px;
    height: 36px; padding: 0 10px;
    border: 1px solid #e5e7eb; border-radius: 8px;
    font-size: 0.85rem; font-family: inherit;
}
.er-row-adminnote {
    margin-top: 6px;
    font-size: 0.8rem; color: #6b7280;
    padding: 6px 10px; background: #f9fafb; border-radius: 6px;
}

.phone-input {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    overflow: visible;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.phone-input:focus-within {
    border-color: #01204A;
    box-shadow: 0 0 0 3px rgba(1, 32, 74, 0.1);
}
.phone-country-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    background: #f9fafb;
    border: none;
    border-right: 1px solid #e5e7eb;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.92rem;
    color: #111827;
    min-height: 42px;
}
.phone-country-btn:hover { background: #f3f4f6; }
.phone-flag { font-size: 1.15rem; line-height: 1; }
.phone-code {
    font-weight: 500;
    color: #374151;
    font-variant-numeric: tabular-nums;
}
.phone-country-btn i[data-lucide],
.phone-country-btn > svg { width: 14px; height: 14px; color: #6b7280; }
.phone-number {
    flex: 1;
    min-width: 0;
    padding: 0 12px;
    border: none !important;
    background: transparent !important;
    font-size: 0.92rem;
    font-family: inherit;
    color: #111827;
    outline: none !important;
    box-shadow: none !important;
    min-height: 42px;
}

.phone-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: min(320px, 90vw);
    z-index: 40;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    overflow: hidden;
}
.phone-dropdown-search {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
}
.phone-dropdown-search > i[data-lucide],
.phone-dropdown-search > svg {
    position: absolute;
    left: 22px; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    color: #9ca3af;
    pointer-events: none;
}
.phone-dropdown-search input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.88rem;
    outline: none;
    font-family: inherit;
}
.phone-dropdown-list {
    max-height: 280px;
    overflow-y: auto;
}
.phone-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.phone-dropdown-item:hover { background: #f9fafb; }
.phone-dropdown-item .phone-flag { font-size: 1.15rem; }
.phone-dropdown-name {
    flex: 1;
    font-size: 0.88rem;
    color: #111827;
}
.phone-dropdown-code {
    font-size: 0.82rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}
.phone-dropdown-empty {
    padding: 20px;
    text-align: center;
    color: #9ca3af;
    font-size: 0.85rem;
}

@media (max-width: 767px) {
    .edit-req-inputs { grid-template-columns: 1fr; }
    .er-row-diff { grid-template-columns: 1fr; }
    .er-arrow { transform: rotate(90deg); text-align: center; }
}

.icon-picker-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.92rem;
    color: #111827;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.icon-picker-trigger:hover { border-color: #c0c6d0; }
.icon-picker-trigger:focus { outline: none; border-color: #01204A; box-shadow: 0 0 0 3px rgba(1,32,74,0.12); }
.icon-picker-trigger .amenity-icon-preview {
    width: 36px; height: 36px;
    border-radius: 8px;
}
.icon-picker-label {
    flex: 1;
    text-align: left;
    font-weight: 500;
    color: #374151;
}
.icon-picker-trigger .icon-picker-chev {
    width: 16px; height: 16px;
    color: #9ca3af;
    flex-shrink: 0;
}

.icon-picker-modal {
    position: fixed; inset: 0;
    z-index: 150;
    visibility: hidden;
    pointer-events: none;
}
.icon-picker-modal.open { visibility: visible; pointer-events: auto; }
.icon-picker-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.icon-picker-modal.open .icon-picker-backdrop { opacity: 1; }
.icon-picker-panel {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -46%) scale(0.97);
    width: min(600px, calc(100vw - 24px));
    max-height: 80vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 50px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    overflow: hidden;
}
.icon-picker-modal.open .icon-picker-panel {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.icon-picker-head {
    padding: 16px 20px 14px;
    border-bottom: 1px solid #f1f5f9;
    display: flex; align-items: center; justify-content: space-between;
}
.icon-picker-head h3 { font-size: 1rem; font-weight: 700; color: #111827; margin: 0; }
.icon-picker-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    border-radius: 50%;
    cursor: pointer; color: #6b7280;
}
.icon-picker-close:hover { background: #f3f4f6; color: #111827; }
.icon-picker-close i[data-lucide],
.icon-picker-close > svg { width: 18px; height: 18px; }

.icon-picker-search {
    position: relative;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
}
.icon-picker-search > i[data-lucide],
.icon-picker-search > svg {
    position: absolute;
    left: 32px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: #9ca3af;
    pointer-events: none;
}
.icon-picker-search input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.92rem;
    color: #111827;
    outline: none;
    font-family: inherit;
}
.icon-picker-search input:focus {
    border-color: #01204A;
    box-shadow: 0 0 0 3px rgba(1, 32, 74, 0.1);
}

.icon-picker-grid {
    padding: 10px 16px 16px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 6px;
    flex: 1;
    min-height: 0;
}
.icon-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
    color: #374151;
}
.icon-picker-item:hover { background: #f9fafb; }
.icon-picker-item.is-selected {
    background: rgba(1, 32, 74, 0.1);
    border-color: #01204A;
    color: #01204A;
}
.icon-picker-item i[data-lucide],
.icon-picker-item > svg {
    width: 22px; height: 22px;
}
.icon-picker-item span {
    font-size: 0.62rem;
    color: #6b7280;
    font-family: ui-monospace, SFMono-Regular, monospace;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.icon-picker-item.is-selected span { color: #01204A; }

.icon-picker-empty {
    padding: 40px 20px;
    text-align: center;
    color: #9ca3af;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .icon-picker-panel {
        width: calc(100vw - 16px);
        max-height: 90vh;
        border-radius: 14px;
    }
    .icon-picker-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
}
.pac-dots {
    display: none;
    margin-top: auto;
    gap: 3px;
    align-items: center;
}
.pac-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pac-dot-arr { background: #22c55e; }
.pac-dot-dep { background: #ef4444; }

.pac-stats {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.72rem;
    color: #6b7280;
}
.pac-stat {
    display: flex; align-items: center; gap: 5px;
    line-height: 1.2;
}
.pac-stat .pac-dot { width: 5px; height: 5px; }
.pac-stat span { color: #9ca3af; }
.pac-stat strong {
    margin-left: auto;
    color: #111827;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pac-stat-occ {
    margin-top: 2px;
    padding-top: 5px;
    border-top: 1px solid #f1f5f9;
    justify-content: flex-end;
    color: #01204A;
    font-weight: 600;
}
.pac-stat-occ span { color: #01204A; font-variant-numeric: tabular-nums; }
.pac-cell-outside .pac-stats,
.pac-cell-past .pac-stats { opacity: 0.5; }
.pac-cell-outside .pac-stats { display: none; }

.pac-legend-card { padding: 14px 18px; }
.pac-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    font-size: 0.82rem;
    color: #6b7280;
}
.pac-legend-item {
    display: inline-flex; align-items: center; gap: 6px;
}
.pac-legend-block {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 3px;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.pac-list-card { padding: 0; }
.pac-list {
    display: flex;
    flex-direction: column;
}
.pac-list-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
}
.pac-list-row:last-child { border-bottom: none; }
.pac-list-date {
    width: 48px;
    text-align: center;
    flex-shrink: 0;
}
.pac-list-day {
    font-size: 1.45rem;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}
.pac-list-wd {
    font-size: 0.68rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}
.pac-list-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}
.pac-list-event {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.9rem;
    color: #374151;
}
.pac-list-event .pac-dot { width: 8px; height: 8px; }

.pac-sheet-backdrop {
    position: fixed; inset: 0;
    z-index: 95;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}
.pac-sheet-backdrop.open { opacity: 1; visibility: visible; }
.pac-sheet {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -48%);
    width: min(460px, calc(100vw - 32px));
    z-index: 96;
    background: #fff;
    border-radius: 16px;
    padding: 20px 22px 22px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    max-height: 80vh;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
}
.pac-sheet.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.pac-sheet-handle { display: none; }

@media (max-width: 767px) {
    .pac-sheet {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        transform: translateY(100%);
        width: 100%;
        max-width: none;
        border-radius: 18px 18px 0 0;
        padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0));
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
        opacity: 1;
        visibility: visible;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.3s;
    }
    .pac-sheet.open {
        transform: translateY(0);
        visibility: visible;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .pac-sheet-handle {
        display: block;
        width: 38px; height: 4px;
        border-radius: 2px;
        background: #d1d5db;
        margin: 4px auto 12px;
    }
}
.pac-sheet-handle {
    width: 38px; height: 4px;
    border-radius: 2px;
    background: #d1d5db;
    margin: 4px auto 12px;
}
.pac-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 14px;
}
.pac-sheet-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}
.pac-sheet-summary {
    font-size: 0.82rem;
    color: #6b7280;
    margin-top: 2px;
}
.pac-sheet-close {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    border-radius: 50%;
    cursor: pointer; color: #6b7280;
    flex-shrink: 0;
}
.pac-sheet-close:hover { background: #f3f4f6; }
.pac-sheet-close i[data-lucide],
.pac-sheet-close > svg { width: 18px; height: 18px; }
.pac-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pac-sheet-stat {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    background: #f9fafb;
    border-radius: 10px;
}
.pac-sheet-stat-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.88rem;
    color: #374151;
    font-weight: 500;
}
.pac-sheet-stat-label i[data-lucide],
.pac-sheet-stat-label > svg { width: 14px; height: 14px; color: #6b7280; }
.pac-sheet-stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
}
.pac-sheet-stat-link {
    text-decoration: none;
    gap: 10px;
    transition: background 0.15s, transform 0.12s;
}
.pac-sheet-stat-link:hover { background: #eff6ff; text-decoration: none; }
.pac-sheet-stat-link:active { transform: scale(0.99); }
.pac-sheet-stat-chev { width: 16px; height: 16px; color: #9ca3af; flex-shrink: 0; }
.pac-sheet-stat-link:hover .pac-sheet-stat-chev { color: #01204A; }
.pac-sheet-stat-link.is-disabled { pointer-events: none; opacity: 0.5; }
.pac-sheet-stat-link.is-disabled .pac-sheet-stat-chev { display: none; }

@media (max-width: 767px) {
    .pac-top-card { padding: 14px; }
    .pac-nav { margin-bottom: 0; }
    .pac-month { font-size: 1rem; }
    .pac-today-btn { padding: 8px 16px; font-size: 0.82rem; }
    .pac-grid-card { padding: 10px 12px; }
    .pac-weekdays { padding: 4px 0 6px; }
    .pac-weekdays span { font-size: 0.7rem; }
    .pac-grid-card { padding: 12px 10px; }
    .pac-grid { gap: 5px; }
    .pac-cell { padding: 7px 3px; border-radius: 9px; }
    .pac-day-num { font-size: 0.95rem; }
    .pac-cell-today { padding: 6px 2px; border-width: 1.5px; }
    .pac-stats { display: none; }
    .pac-dots { display: flex; }
    .pac-legend-card { padding: 12px; }
    .pac-legend { gap: 14px; font-size: 0.78rem; }
}

.profile-photo-wrap { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.profile-photo-preview {
    width: 96px; height: 96px; border-radius: 50%;
    background: #f3f4f6; border: 2px dashed #d1d5db;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo-preview i[data-lucide] { width: 28px; height: 28px; color: #9ca3af; }
.profile-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; min-width: 200px; }
.profile-photo-actions .form-hint { width: 100%; }

.crop-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: none; align-items: center; justify-content: center;
    padding: 16px;
}
.crop-modal.open { display: flex; }
.crop-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.crop-panel {
    position: relative; background: #fff; border-radius: 14px;
    width: 100%; max-width: 440px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex; flex-direction: column;
}
.crop-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #e5e7eb;
}
.crop-head h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.crop-close {
    background: none; border: none; cursor: pointer; padding: 4px;
    color: #6b7280; border-radius: 6px;
}
.crop-close:hover { background: #f3f4f6; color: #111; }
.crop-close i[data-lucide] { width: 20px; height: 20px; }

.crop-stage {
    position: relative; width: 360px; height: 360px;
    margin: 16px auto; background: #000;
    overflow: hidden; touch-action: none; cursor: grab;
}
.crop-stage:active { cursor: grabbing; }
.crop-stage canvas { display: block; width: 360px; height: 360px; }
.crop-mask {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at center, transparent 180px, rgba(0,0,0,0.55) 181px);
}
.crop-mask::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 360px; height: 360px; transform: translate(-50%,-50%);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85);
}

.crop-controls { padding: 0 20px 12px; display: flex; align-items: center; gap: 12px; }
.crop-controls label { font-size: 0.82rem; color: #6b7280; }
.crop-controls input[type=range] { flex: 1; }
.crop-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 16px 16px; border-top: 1px solid #e5e7eb;
}

@media (max-width: 420px) {
    .crop-stage, .crop-stage canvas { width: 300px; height: 300px; }
    .crop-mask { background: radial-gradient(circle at center, transparent 150px, rgba(0,0,0,0.55) 151px); }
    .crop-mask::after { width: 300px; height: 300px; }
}

.pricing-copy-row {
    margin-top: 14px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.pricing-copy-row i[data-lucide] { color: #6b7280; flex-shrink: 0; }
.pricing-copy-label { font-size: 0.85rem; color: #4b5563; font-weight: 500; }
.pricing-copy-row select { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; min-width: 220px; }

.pricing-now-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #d1fae5;
    color: #065f46;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}
.pricing-now-badge i[data-lucide] { width: 12px; height: 12px; }
.pricing-season-current { border: 2px solid #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.08); }

.partner-hero-cta { margin-top: 1.5rem; display: inline-flex; font-size: 1rem; padding: 0.75rem 2rem; border-radius: var(--radius-lg); }
.btn-lg { padding: 0.75rem 1.75rem; font-size: 1rem; }

.partner-section { padding: 3rem 0; }
@media (min-width: 768px) { .partner-section { padding: 4rem 0; } }
.partner-section-alt { background: var(--bg-soft); }
.partner-section-title { font-size: 1.5rem; font-weight: 700; text-align: center; margin: 0 0 0.5rem; color: var(--text-primary); }
@media (min-width: 768px) { .partner-section-title { font-size: 1.75rem; margin-bottom: 0.75rem; } }
.partner-section-sub { text-align: center; color: var(--text-gray-500); max-width: 480px; margin: 0 auto 2rem; font-size: 0.95rem; }

.partner-grid-3 { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 768px) { .partner-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.partner-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem 1.5rem; text-align: center; }
.partner-card-icon { width: 48px; height: 48px; background: rgba(1, 32, 74, 0.08); border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.partner-card-icon i[data-lucide] { width: 24px; height: 24px; color: var(--primary); }
.partner-card h3 { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--text-primary); }
.partner-card p { font-size: 0.875rem; color: var(--text-gray-500); margin: 0; line-height: 1.6; }

.partner-steps { max-width: 560px; margin: 2rem auto 0; display: flex; flex-direction: column; gap: 1.5rem; }
.partner-step { display: flex; gap: 1rem; align-items: flex-start; }
.partner-step-num { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; background: var(--primary); color: var(--white); font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.partner-step-body h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; color: var(--text-primary); }
.partner-step-body p { font-size: 0.875rem; color: var(--text-gray-500); margin: 0; line-height: 1.5; }

.partner-grid-2 { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 640px) { .partner-grid-2 { grid-template-columns: repeat(2, 1fr); } }
.partner-feature { display: flex; gap: 0.875rem; align-items: flex-start; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem; }
.partner-feature i[data-lucide] { width: 22px; height: 22px; min-width: 22px; color: var(--primary); margin-top: 2px; }
.partner-feature h4 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.25rem; color: var(--text-primary); }
.partner-feature p { font-size: 0.825rem; color: var(--text-gray-500); margin: 0; line-height: 1.5; }

.partner-form { max-width: 560px; margin: 0 auto; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; }
@media (min-width: 768px) { .partner-form { padding: 2rem; } }
.partner-form .form-row { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .partner-form .form-row { grid-template-columns: 1fr 1fr; } }
.partner-form .form-group { margin-bottom: 0; }
.partner-form .form-group:not(:last-child) { margin-bottom: 1rem; }
.partner-form .form-row .form-group { margin-bottom: 0; }
.partner-form label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); margin-bottom: 0.25rem; }
.partner-form input, .partner-form textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; font-size: 0.875rem; font-family: inherit; }
.partner-form input:focus, .partner-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(1, 32, 74, 0.1); }
.partner-form textarea { resize: vertical; min-height: 80px; }
.partner-form .btn { width: 100%; margin-top: 0.5rem; }

.stat-summary-row {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-bottom: 1.5rem;
}
@media (max-width: 767px) { .stat-summary-row { grid-template-columns: 1fr 1fr; } }
.stat-summary-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid #e9ebef; border-radius: 14px;
    padding: 16px 18px;
}
.stat-card-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: #eef2f8;
}
.stat-card-icon svg, .stat-card-icon i[data-lucide] { width: 22px; height: 22px; color: #01204A; }
.stat-card-label { font-size: 0.78rem; color: #6b7280; font-weight: 500; }
.stat-card-value { font-size: 1.2rem; font-weight: 700; color: #111827; }

.stat-header-note { font-size: 0.82rem; color: #6b7280; font-weight: 500; }

.stat-chart-body { position: relative; overflow: visible; }

.stat-tooltip {
    position: absolute; z-index: 10; pointer-events: none;
    background: #1f2937; color: #fff; font-size: 0.78rem; font-weight: 500;
    padding: 5px 10px; border-radius: 6px; white-space: nowrap;
    opacity: 0; transition: opacity 0.15s;
}

.stat-bar-chart {
    display: flex; align-items: flex-end; gap: 2px; height: 180px; position: relative;
}
.stat-bar-col {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end; height: 100%; min-width: 0; cursor: crosshair;
}
.stat-bar-fill {
    width: 100%; border-radius: 3px 3px 0 0; min-height: 3px;
    transition: height 0.4s ease, opacity 0.15s;
}
.stat-bar-col:hover .stat-bar-fill { opacity: 0.7; }
.stat-bar-label { font-size: 0.62rem; color: #9ca3af; margin-top: 4px; line-height: 1; }

.stat-fill-occ { background: #3b82f6; }
.stat-bar-col:nth-child(odd) .stat-fill-occ { background: #60a5fa; }

.stat-fill-rev { background: #10b981; }
.stat-revenue-chart .stat-bar-col:nth-child(odd) .stat-fill-rev { background: #34d399; }

.stat-cap-line {
    position: absolute; left: 0; right: 0;
    border-top: 1.5px dashed #d1d5db; pointer-events: none;
}
.stat-cap-line span {
    position: absolute; right: 0; top: -14px;
    font-size: 0.65rem; color: #9ca3af;
}

.stat-revenue-chart .stat-bar-col:nth-child(odd) .stat-fill-rev { opacity: 0.85; }

@media (max-width: 767px) {
    .stat-summary-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-summary-card { padding: 10px 12px; gap: 8px; }
    .stat-card-value { font-size: 0.95rem; }
    .stat-card-label { font-size: 0.7rem; }
    .stat-card-icon { display: none; }
    .stat-bar-chart { height: 150px; gap: 1px; touch-action: none; }
    .stat-header-note { font-size: 0.72rem; }
    .stat-tooltip {
        font-size: 0.75rem; padding: 6px 12px;
        top: -32px; bottom: auto !important;
    }
    .stat-monthly-month { font-size: 0.85rem; }
    .stat-monthly-revenue { font-size: 0.85rem; }
}
.stat-inline-bar { height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; }
.stat-inline-fill { height: 100%; background: #01204A; border-radius: 3px; transition: width 0.4s; }

.stat-bar-active .stat-bar-fill { opacity: 1 !important; box-shadow: 0 0 6px rgba(0,0,0,0.15); }

.stat-monthly-list { display: flex; flex-direction: column; gap: 14px; }
.stat-monthly-row { }
.stat-monthly-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.stat-monthly-month { font-size: 0.9rem; font-weight: 700; color: #111827; }
.stat-monthly-revenue { font-size: 0.9rem; font-weight: 700; color: #111827; }
.stat-monthly-bar-wrap { height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; margin-bottom: 2px; }
.stat-monthly-bar { height: 100%; background: #3b82f6; border-radius: 4px; transition: width 0.5s; }
.stat-monthly-count { font-size: 0.78rem; color: #6b7280; }

.stat-service-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid #f3f4f6;
}
.stat-service-row:last-child { border-bottom: none; }
.stat-service-name { width: 140px; flex-shrink: 0; font-size: 0.88rem; font-weight: 500; color: #374151; }
.stat-service-bar-wrap { flex: 1; height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.stat-service-bar { height: 100%; background: #01204A; border-radius: 4px; transition: width 0.5s ease; }
.stat-service-count { width: 40px; text-align: right; font-size: 0.85rem; font-weight: 600; color: #111827; }

.demo-banner {
    display: flex; align-items: center; gap: 10px;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
    padding: 10px 16px; margin: 0 0 16px;
    font-size: 0.85rem; color: #1e40af;
}
.demo-banner svg, .demo-banner i[data-lucide] { width: 18px; height: 18px; flex-shrink: 0; color: #3b82f6; }
.demo-banner a { color: #1e40af; font-weight: 600; }

.dash-booking-list { display: flex; flex-direction: column; gap: 0; padding: 0 !important; }
.dash-bk-row {
    display: block; text-decoration: none; color: inherit;
    padding: 12px 16px; border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s;
}
.dash-bk-row:last-child { border-bottom: none; }
.dash-bk-row:hover { background: #f9fafb; }
.dash-bk-row-main {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
.dash-bk-row-main strong { font-size: 0.9rem; color: #01204A; }
.dash-bk-row-plate {
    font-size: 0.82rem; font-weight: 600; color: #111827;
    background: #f3f4f6; padding: 2px 8px; border-radius: 4px;
}
.dash-bk-row-meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    font-size: 0.78rem; color: #6b7280;
}

@media (max-width: 767px) {
    .dash-date-nav { gap: 8px; margin-bottom: 12px; }
    .dash-date-label { font-size: 0.88rem; }
    .dash-date-nav button { width: 32px; height: 32px; }
    .dash-date-today-btn { padding: 0 10px !important; font-size: 0.75rem !important; }

    .dash-occupancy-row { gap: 10px; }
    .dash-occupancy-card { padding: 14px; gap: 12px; }
    .dash-occ-ring { width: 80px; height: 80px; }
    .dash-occ-pct { font-size: 1rem; }
    .dash-occ-title { font-size: 0.72rem; }
    .dash-occ-nums { font-size: 0.8rem; }
    .dash-occ-nums span { display: block; }

    .dash-today-card { padding: 14px; }
    .dash-today-title { font-size: 0.72rem; margin-bottom: 8px; }
    .dash-today-val { font-size: 1.2rem; }
    .dash-today-lbl { font-size: 0.72rem; }
    .dash-today-item svg, .dash-today-item i[data-lucide] { width: 18px; height: 18px; }

    .dash-revenue-card { padding: 14px; }
    .dash-rev-row > div { padding: 0 12px; }
    .dash-rev-label { font-size: 0.72rem; }
    .dash-rev-value { font-size: 1rem; }
    .dash-rev-bookings { font-size: 0.75rem; }

    .dash-bk-row { padding: 10px 14px; }
    .dash-bk-row-main strong { font-size: 0.85rem; }
    .dash-bk-row-meta { font-size: 0.72rem; gap: 6px; }
}

.act-online-dot { background: #10b981; color: #fff; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-left: 6px; }
.act-online-user { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 0.88rem; }
.act-online-user:last-child { border-bottom: none; }
.act-online-dot-green { width: 8px; height: 8px; background: #10b981; border-radius: 50%; flex-shrink: 0; animation: act-pulse 2s infinite; }
@keyframes act-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
.act-online-email { color: #6b7280; font-size: 0.8rem; }
.act-online-pages { color: #9ca3af; font-size: 0.78rem; margin-left: auto; }

.act-feed-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid #f9fafb; font-size: 0.85rem; }
.act-feed-new { animation: act-flash 1s ease; }
@keyframes act-flash { 0% { background: #ecfdf5; } 100% { background: transparent; } }
.act-feed-time { color: #9ca3af; font-size: 0.75rem; font-family: monospace; flex-shrink: 0; }
.act-feed-path { color: #6b7280; font-size: 0.8rem; margin-left: auto; }

.act-session { border-bottom: 1px solid #f1f5f9; }
.act-session:last-child { border-bottom: none; }
.act-session-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; transition: background 0.1s; }
.act-session-head:hover { background: #f9fafb; }
.act-session-info { flex: 1; min-width: 0; }
.act-session-lot { font-size: 0.9rem; color: #111827; display: block; }
.act-session-email { font-size: 0.78rem; color: #6b7280; }
.act-session-meta { display: flex; gap: 12px; font-size: 0.78rem; color: #9ca3af; flex-shrink: 0; }
.act-session-pages { background: #eff6ff; color: #01204A; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.act-session-time { background: #f0fdf4; color: #065f46; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.act-session-date { font-family: monospace; }
.act-session-pages-list { display: none; padding: 0 16px 12px 28px; }
.act-session.open .act-session-pages-list { display: block; }
.act-session.open i[data-lucide] { transform: rotate(180deg); }
.act-page-row { display: flex; gap: 10px; padding: 3px 0; font-size: 0.8rem; }
.act-page-time { color: #9ca3af; font-family: monospace; flex-shrink: 0; }
.act-page-path { color: #374151; }

/* All parkings page */
.all-parkings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.all-parking-card { display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 0.2s, transform 0.15s; }
.all-parking-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.08); transform: translateY(-2px); text-decoration: none; }
.all-parking-card-image { position: relative; width: 100%; aspect-ratio: 16/9; background: #e5e7eb; overflow: hidden; }
.all-parking-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.all-parking-card:hover .all-parking-card-image img { transform: scale(1.05); }
.all-parking-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3a4a5e, #5a6c80); color: rgba(255,255,255,0.6); }
.all-parking-card-placeholder i[data-lucide] { width: 48px; height: 48px; stroke-width: 1.2; }
.all-parking-card-rating-badge { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 4px; padding: 4px 10px; background: #fff; border-radius: 100px; font-size: 0.8rem; font-weight: 700; color: var(--text-gray-900); box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.all-parking-card-body { padding: 1rem 1.25rem 1.25rem; }
.all-parking-card-name { font-size: 1.1rem; font-weight: 600; color: var(--text-gray-900); margin-bottom: 0.35rem; }
.all-parking-card-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.85rem; color: var(--text-gray-500); margin-bottom: 0.75rem; }
.all-parking-card-meta i[data-lucide] { width: 14px; height: 14px; }
.all-parking-card-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.all-parking-tag { font-size: 0.75rem; padding: 3px 10px; border-radius: 100px; background: #f3f4f6; color: var(--text-gray-700); font-weight: 500; }

/* Kapcsolat page */
.kapcsolat-page { padding-top: 2.5rem; padding-bottom: 3rem; max-width: 800px; }
.kapcsolat-hero { text-align: center; margin-bottom: 3rem; }
.kapcsolat-hero h1 { font-size: 2.25rem; font-weight: 800; color: var(--text-gray-900); margin-bottom: 0.5rem; }
.kapcsolat-hero-sub { font-size: 1.25rem; color: var(--primary); font-weight: 600; margin-bottom: 1rem; }
.kapcsolat-hero-desc { font-size: 1.05rem; color: var(--text-gray-600); line-height: 1.7; max-width: 640px; margin: 0 auto; }
.kapcsolat-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 2rem; margin-bottom: 1.5rem; }
.kapcsolat-section h2 { font-size: 1.25rem; font-weight: 700; color: var(--text-gray-900); margin-bottom: 0.75rem; }
.kapcsolat-section p { color: var(--text-gray-600); line-height: 1.7; margin-bottom: 1rem; }
.kapcsolat-section-icon { margin-bottom: 1rem; }
.kapcsolat-section-icon i[data-lucide] { width: 32px; height: 32px; color: var(--primary); }
.kapcsolat-email { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; font-weight: 600; margin-bottom: 0.75rem; }
.kapcsolat-email i[data-lucide] { width: 18px; height: 18px; color: var(--primary); }
.kapcsolat-email a { color: var(--primary); text-decoration: none; }
.kapcsolat-email a:hover { text-decoration: underline; }
.kapcsolat-note { font-size: 0.9rem; color: var(--text-gray-500); margin-bottom: 0.5rem; }
.kapcsolat-note a { color: var(--primary); font-weight: 600; text-decoration: none; }
.kapcsolat-note a:hover { text-decoration: underline; }
.kapcsolat-tip { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.85rem 1rem; background: #fef9e7; border-radius: 10px; font-size: 0.95rem; color: var(--text-gray-700); margin-top: 1rem; }
.kapcsolat-tip i[data-lucide] { width: 18px; height: 18px; color: #d49f00; flex-shrink: 0; margin-top: 2px; }
.kapcsolat-tip a { color: var(--primary); font-weight: 600; }
.kapcsolat-benefits { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0; }
.kapcsolat-benefit { display: flex; gap: 0.75rem; align-items: flex-start; }
.kapcsolat-benefit i[data-lucide] { width: 20px; height: 20px; color: #22c55e; flex-shrink: 0; margin-top: 2px; }
.kapcsolat-benefit strong { display: block; color: var(--text-gray-900); font-weight: 600; margin-bottom: 2px; }
.kapcsolat-benefit span { font-size: 0.95rem; color: var(--text-gray-600); line-height: 1.5; }
.kapcsolat-trust-items { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.kapcsolat-trust-item { display: flex; gap: 0.75rem; align-items: flex-start; }
.kapcsolat-trust-item i[data-lucide] { width: 18px; height: 18px; color: #22c55e; flex-shrink: 0; margin-top: 3px; }
.kapcsolat-trust-item span { font-size: 0.95rem; color: var(--text-gray-600); line-height: 1.5; }
.kapcsolat-cta { text-align: center; margin-top: 2rem; }
.kapcsolat-cta p { font-size: 1.1rem; color: var(--text-gray-700); margin-bottom: 1rem; }

/* Kapcsolat form */
.kapcsolat-form { margin-top: 1.5rem; }
.kapcsolat-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 600px) { .kapcsolat-form-row { grid-template-columns: 1fr; } }
.kapcsolat-form-group { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0rem; }
.kapcsolat-form-group:not(:last-child) { margin-bottom: 0; }
.kapcsolat-form-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-gray-700); }
.kapcsolat-form-group input,
.kapcsolat-form-group textarea { padding: 0.7rem 0.85rem; border: 1px solid #d1d5db; border-radius: 10px; font-size: 0.95rem; font-family: inherit; color: var(--text-gray-900); background: #fff; transition: border-color 0.15s; }
.kapcsolat-form-group input:focus,
.kapcsolat-form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26, 78, 138, 0.1); }
.kapcsolat-form-group textarea { resize: vertical; min-height: 120px; }
.kapcsolat-form .btn { margin-top: 1rem; }

/* Teszt fooldal */
.tf-hero { position: relative; color: #fff; overflow: hidden; min-height: 520px; padding-bottom: 60px; }
@media (min-width: 768px) { .tf-hero { min-height: 600px; padding-bottom: 80px; } }
.tf-hero-bg { position: absolute; inset: 0; z-index: 0; }
.tf-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tf-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.2) 100%); }

.tf-hero-content { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 4rem 1.5rem 5rem; text-align: left; min-height: 460px; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
@media (min-width: 768px) { .tf-hero-content { padding: 6rem 2rem 7rem; min-height: 520px; } }

.tf-headline {
    font-size: 1.75rem; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em;
    color: #fff; margin: 0; display: flex; flex-direction: column; gap: 0.1em;
    text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
@media (min-width: 768px) { .tf-headline { font-size: 2.75rem; } }
@media (min-width: 1024px) { .tf-headline { font-size: 3.5rem; } }
.tf-headline > span { display: block; }

.tf-line-2 { display: flex; }
.tf-emphasis { position: relative; display: inline-flex !important; align-items: baseline; gap: 0.15em; width: fit-content; padding-bottom: 0.18em; padding-right: 0.4em; }
.tf-underline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 0.18em; pointer-events: none; }
.tf-plane { width: 0.55em; height: 0.55em; flex-shrink: 0; transform: rotate(-15deg); align-self: center; opacity: 0.95; margin-left: 0.1em; }

.tf-subtitle { color: rgba(255,255,255,0.92); font-size: 0.95rem; max-width: 540px; margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
@media (min-width: 768px) { .tf-subtitle { font-size: 1.05rem; } }

/* Search card */
.tf-search-card { position: absolute; bottom: -1px; left: 0; right: 0; z-index: 3; padding: 0 1rem; }
@media (min-width: 768px) { .tf-search-card { bottom: 20px; padding: 0 2rem; } }
.tf-search-inner {
    max-width: 1240px; margin: 0 auto; background: #fff; border-radius: 12px;
    display: flex; align-items: stretch; gap: 0; padding: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    flex-wrap: wrap;
}
.tf-sc-item { padding: 8px 18px; flex: 1; min-width: 140px; display: flex; flex-direction: column; justify-content: center; }
.tf-sc-divider { width: 1px; background: #e5e7eb; align-self: stretch; margin: 8px 0; }
@media (max-width: 768px) { .tf-sc-divider { display: none; } .tf-sc-item { min-width: 50%; padding: 6px 10px; } }
.tf-sc-label { font-size: 0.72rem; color: #6b7280; font-weight: 600; text-transform: capitalize; }
.tf-sc-value { font-size: 0.95rem; color: #111827; font-weight: 600; margin-top: 2px; }
.tf-sc-reviews { padding-left: 14px; }
.tf-sc-google { display: flex; align-items: center; gap: 6px; }
.tf-sc-google-text { font-size: 1rem; font-weight: 600; color: #5f6368; letter-spacing: -0.02em; }
.tf-sc-stars { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.tf-sc-stars-icons { color: #f59e0b; font-size: 0.85rem; letter-spacing: 1px; }
.tf-sc-reviews-count { font-size: 0.75rem; color: #6b7280; font-weight: 500; }
.tf-sc-cta {
    background: #e11d48; color: #fff; border: none; padding: 0 28px;
    border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s; min-height: 48px; margin-left: auto;
}
.tf-sc-cta:hover { background: #be123c; }
@media (max-width: 768px) { .tf-sc-cta { width: 100%; margin: 8px 10px 0; min-width: calc(100% - 20px); } }

/* Type segmented control (search card) — borderless, fits flex column */
.search-field.search-field-segmented {
    flex: 3.5;
    min-width: 280px;
}
/* Type field is a boxed field like the others (white, bordered, labelled). */
.search-field-segmented {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 56px;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 100%;
    align-self: stretch;
    transition: border-color 0.2s;
    overflow: hidden;
}
.search-field-segmented:hover { border-color: var(--primary); }
.search-field-segmented .search-field-label-row { display: none; }
.search-field-segmented > .search-field-label { display: block; }

/* Type as three separate boxes (one per option), matching the other fields. */
.search-field-types { display: flex; gap: 8px; align-items: stretch; flex: 0 0 auto; }
.type-box {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 56px;
    padding: 0 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-gray-500);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.type-box:hover { border-color: var(--primary); color: #374151; }
.type-box.active {
    border-color: var(--primary);
    color: #0B5998;
    background: rgba(1, 32, 74, 0.06);
    font-weight: 700;
    box-shadow: 0 0 0 1px var(--primary) inset;
}
/* Mobile keeps the older single segmented pill; desktop keeps the 3 boxes. */
.type-mobile-seg { display: none; }
@media (max-width: 767px) {
    .search-field-types { display: none; }
    .type-mobile-seg {
        display: flex; position: relative; box-sizing: border-box;
        background: #f3f4f6; border-radius: 999px; padding: 4px;
        height: 48px; width: 100%;
    }
    .type-mobile-seg .tms-ind {
        position: absolute; top: 4px; bottom: 4px; left: 4px;
        width: calc((100% - 8px) / 3);
        background: #fff; border-radius: 999px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .type-mobile-seg[data-active="1"] .tms-ind { transform: translateX(100%); }
    .type-mobile-seg[data-active="2"] .tms-ind { transform: translateX(200%); }
    .type-mobile-seg button {
        position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
        background: transparent; border: none; cursor: pointer; font-family: inherit;
        border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: #6b7280;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .type-mobile-seg button.selected { color: #0a2540; font-weight: 700; }
}
.type-segmented {
    position: relative;
    display: flex;
    background: transparent;
    border-radius: 999px;
    padding: 0;
    width: 100%;
    min-width: 0;
    height: 30px;
    box-sizing: border-box;
}
.type-segmented-indicator {
    position: absolute;
    top: 0; bottom: 0;
    left: 0;
    width: calc(100% / 3);
    background: #eef2f6;
    border-radius: 999px;
    box-shadow: none;
    transition: transform 0.28s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform: translateX(0);
}
.type-segmented[data-active="1"] .type-segmented-indicator { transform: translateX(100%); }
.type-segmented[data-active="2"] .type-segmented-indicator { transform: translateX(200%); }
.type-segmented-option {
    position: relative; z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    background: transparent;
    border: none;
    padding: 0 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: color 0.2s;
    font-family: inherit;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
/* Clean text-only segmented control — the tiny icons read as clutter at this size.
   Lucide swaps the <i data-lucide> for an <svg>, so hide both. */
.type-segmented-option i[data-lucide],
.type-segmented-option svg { display: none; }
.type-segmented-option:hover { color: #374151; }

/* Selected: clear dark, bold, with a colour accent per type */
.type-segmented-option.selected { color: #0a2540; font-weight: 700; }

/* Arculati kézikönyv */
.brand-page { max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.brand-header { text-align: center; margin-bottom: 3rem; }
.brand-header h1 { font-size: 2.25rem; margin-bottom: 0.75rem; color: #0B5998; }
.brand-header p { color: #4b5563; max-width: 640px; margin: 0 auto; line-height: 1.6; }

.brand-section { margin-bottom: 3.5rem; }
.brand-section h2 { font-size: 1.5rem; margin-bottom: 0.5rem; color: #0B5998; border-bottom: 2px solid #0B5998; padding-bottom: 0.5rem; }
.brand-section-desc { color: #6b7280; margin-bottom: 1.5rem; }

/* Swatches */
.brand-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.brand-swatch { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.06); border: 1px solid #e5e7eb; }
.brand-swatch-color { height: 120px; display: flex; align-items: flex-end; padding: 1rem; font-weight: 700; font-family: monospace; }
.brand-swatch-meta { padding: 0.75rem 1rem 1rem; background: #fff; }
.brand-swatch-name { font-weight: 700; color: #111827; }
.brand-swatch-role { font-size: 0.8rem; color: #6b7280; margin-top: 2px; line-height: 1.4; }

/* Buttons */
.brand-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.brand-btn { padding: 0.7rem 1.4rem; border-radius: 10px; font-weight: 600; font-size: 0.95rem; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.brand-btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.brand-btn-primary { background: #FFB700; color: #1f2937; }
.brand-btn-primary:hover { background: #c9a23f; }
.brand-btn-secondary { background: #0B5998; color: #fff; }
.brand-btn-secondary:hover { background: #094778; }
.brand-btn-teal { background: #097F9A; color: #fff; }
.brand-btn-teal:hover { background: #066578; }
.brand-btn-danger { background: #D64645; color: #fff; }
.brand-btn-danger:hover { background: #b53333; }
.brand-btn-outline { background: #fff; color: #0B5998; border-color: #0B5998; }
.brand-btn-outline:hover { background: #0B5998; color: #fff; }
.brand-btn-gold { background: #FFB700; color: #1f2937; }
.brand-btn-gold:hover { background: #c9a23f; }

/* Cards */
.brand-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.brand-card { padding: 1.5rem; border-radius: 12px; position: relative; }
.brand-card-default { background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.brand-card-sage { background: #D9EDEF; }
.brand-card-sage h3 { color: #0B5998; }
.brand-card h3 { font-size: 1.1rem; margin-bottom: 0.35rem; color: #0B5998; }
.brand-card p { color: #6b7280; font-size: 0.9rem; margin-bottom: 1rem; }
.brand-card-navy {
    background: linear-gradient(135deg, #0B5998 0%, #097F9A 100%);
    color: #fff;
    padding: 2rem;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 16px rgba(11,89,152,0.2);
}
.brand-card-navy h3 { color: #fff; font-size: 1.35rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.25; }
.brand-card-navy p { color: rgba(255,255,255,0.95); font-size: 1rem; margin-bottom: 1.5rem; line-height: 1.5; }
.brand-card-navy .brand-btn-gold { align-self: flex-start; }
.brand-card-tag { position: absolute; top: 12px; right: 12px; background: #FFB700; color: #1f2937; font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 100px; text-transform: uppercase; }
.brand-card-tag-light { background: #D9EDEF; color: #0B5998; }
.brand-card-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.brand-card-price { display: flex; align-items: baseline; gap: 4px; }
.brand-card-price strong { color: #0B5998; font-size: 1.15rem; font-weight: 800; }
.brand-card-price-prefix { font-size: 0.7rem; color: #6b7280; text-transform: uppercase; font-weight: 600; }
.brand-card-price-unit { font-size: 0.8rem; color: #6b7280; }
.brand-list { list-style: none; padding: 0; margin: 0; }
.brand-list li { padding: 4px 0 4px 22px; position: relative; color: #1f2937; font-size: 0.9rem; }
.brand-list li::before { content: '✓'; position: absolute; left: 0; color: #097F9A; font-weight: 700; }

/* Alerts — HeroUI: white bg, colored icon & title, plain description */
.brand-alerts { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; max-width: 680px; }
.brand-alert {
    position: relative;
    display: flex; align-items: flex-start; gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px -4px rgba(0,0,0,0.06);
    border: 1px solid #f3f4f6;
    overflow: hidden;
    animation: brandAlertFadeOut 0.4s ease-in 5.6s forwards;
}
@keyframes brandAlertFadeOut { to { opacity: 0; transform: translateY(-6px) scale(0.98); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border-width: 0; } }
.brand-alert-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    width: 100%;
    background: currentColor;
    opacity: 0.7;
    transform-origin: left;
    animation: brandAlertProgress 6s linear forwards;
}
@keyframes brandAlertProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.brand-alert-default .brand-alert-progress { color: #6b7280; }
.brand-alert-accent .brand-alert-progress { color: #0B5998; }
.brand-alert-success .brand-alert-progress { color: #059669; }
.brand-alert-warning .brand-alert-progress { color: #FFB700; }
.brand-alert-danger .brand-alert-progress { color: #D64645; }
.brand-alert-info .brand-alert-progress { color: #097F9A; }
.brand-alert-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.brand-alert-icon i[data-lucide] { width: 22px; height: 22px; stroke-width: 2; }
.brand-alert-content { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brand-alert-title { font-size: 0.95rem; font-weight: 700; line-height: 1.3; }
.brand-alert-desc { font-size: 0.88rem; color: #4b5563; line-height: 1.5; }
.brand-alert-desc ul { margin: 0.5rem 0 0; padding-left: 1.5rem; }
.brand-alert-desc li { margin: 0.2rem 0; list-style: disc; color: #4b5563; }

/* Status colors — icon + title in status color, body stays neutral */
.brand-alert-default .brand-alert-icon i[data-lucide] { color: #6b7280; }
.brand-alert-default .brand-alert-title { color: #111827; }

.brand-alert-accent .brand-alert-icon i[data-lucide] { color: #0B5998; }
.brand-alert-accent .brand-alert-title { color: #0B5998; }

.brand-alert-success .brand-alert-icon i[data-lucide] { color: #059669; }
.brand-alert-success .brand-alert-title { color: #059669; }

.brand-alert-warning .brand-alert-icon i[data-lucide] { color: #b88a1a; }
.brand-alert-warning .brand-alert-title { color: #b88a1a; }

.brand-alert-danger .brand-alert-icon i[data-lucide] { color: #D64645; }
.brand-alert-danger .brand-alert-title { color: #D64645; }

.brand-alert-info .brand-alert-icon i[data-lucide] { color: #097F9A; }
.brand-alert-info .brand-alert-title { color: #097F9A; }

/* Spinner indicator */
.brand-alert-spinner {
    width: 18px; height: 18px;
    border: 2px solid #cbd5e1;
    border-top-color: #0B5998;
    border-radius: 50%;
    display: inline-block;
    animation: brandSpin 0.7s linear infinite;
}
@keyframes brandSpin { to { transform: rotate(360deg); } }

/* Action button (pill style) */
.brand-alert-action {
    flex-shrink: 0;
    padding: 6px 16px;
    border-radius: 100px;
    border: none;
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
    align-self: center;
}
.brand-alert-action-accent { background: #0B5998; color: #fff; }
.brand-alert-action-accent:hover { background: #094778; }
.brand-alert-action-danger { background: #D64645; color: #fff; }
.brand-alert-action-danger:hover { background: #b53333; }

/* Close button */
.brand-alert-close {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.2s, color 0.2s;
    align-self: center;
}
.brand-alert-close:hover { background: #e5e7eb; color: #111827; }
.brand-alert-close i[data-lucide] { width: 14px; height: 14px; }

/* Badges - 3 styles, each in its own card */
.brand-badge-row {
    margin-top: 1rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 8px 24px -8px rgba(0,0,0,0.08);
    border: 1px solid #f3f4f6;
}
.brand-badge-row-label { font-size: 0.72rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.brand-badge-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Style 1: Status badge with pulsing dot */
.brand-badge-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px 5px 10px;
    border-radius: 100px;
    font-size: 0.78rem; font-weight: 600;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #374151;
}
.brand-badge-status .dot { width: 7px; height: 7px; border-radius: 50%; position: relative; flex-shrink: 0; }
.brand-badge-status .dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; opacity: 0.4; animation: brandPulse 1.6s ease-out infinite; }
@keyframes brandPulse { 0% { transform: scale(0.5); opacity: 0.6; } 100% { transform: scale(1.4); opacity: 0; } }
.brand-badge-status-live { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.brand-badge-status-live .dot { background: #10b981; }
.brand-badge-status-live .dot::after { background: #10b981; }
.brand-badge-status-busy { background: #fef6e2; border-color: #fde68a; color: #92400e; }
.brand-badge-status-busy .dot { background: #FFB700; }
.brand-badge-status-busy .dot::after { background: #FFB700; }
.brand-badge-status-full { background: #fbe7e7; border-color: #fecaca; color: #991b1b; }
.brand-badge-status-full .dot { background: #D64645; }
.brand-badge-status-full .dot::after { background: #D64645; }

/* Style 2: Tag with icon — tonal background */
.brand-tag-icon {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px 5px 10px;
    border-radius: 8px;
    font-size: 0.78rem; font-weight: 600;
}
.brand-tag-icon i[data-lucide] { width: 13px; height: 13px; stroke-width: 2.5; flex-shrink: 0; }
.brand-tag-navy { background: rgba(11,89,152,0.08); color: #0B5998; }
.brand-tag-teal { background: rgba(9,127,154,0.1); color: #097F9A; }
.brand-tag-gold { background: rgba(255, 183, 0,0.15); color: #8a6f1f; }
.brand-tag-coral { background: rgba(214,70,69,0.1); color: #b53333; }

/* Style 3: Minimalist outline with subtle background */
.brand-tag-outline {
    display: inline-flex; align-items: center;
    padding: 4px 11px;
    border-radius: 8px;
    font-size: 0.78rem; font-weight: 600;
    border: 1.5px solid;
}
.brand-tag-outline-navy { border-color: #0B5998; color: #0B5998; background: rgba(11,89,152,0.06); }
.brand-tag-outline-teal { border-color: #097F9A; color: #097F9A; background: rgba(9,127,154,0.06); }
.brand-tag-outline-gold { border-color: #FFB700; color: #8a6f1f; background: rgba(255, 183, 0,0.1); }
.brand-tag-outline-coral { border-color: #D64645; color: #D64645; background: rgba(214,70,69,0.06); }

/* Typography */
.brand-typo { background: #fff; padding: 1.5rem; border-radius: 12px; border: 1px solid #e5e7eb; }
.brand-typo h1 { color: #0B5998; font-size: 2rem; margin-bottom: 0.5rem; }
.brand-typo h2 { color: #0B5998; font-size: 1.4rem; border: none; padding: 0; margin: 1rem 0 0.5rem; }
.brand-typo h3 { color: #097F9A; font-size: 1.1rem; margin: 0.75rem 0 0.4rem; }
.brand-typo p { color: #1f2937; line-height: 1.6; }
.brand-typo a { color: #097F9A; font-weight: 600; }
.brand-typo strong { color: #0B5998; }

/* Recommendation */
.brand-recommendation { background: #D9EDEF; padding: 2rem; border-radius: 16px; }
.brand-recommendation h2 { color: #0B5998; border: none; padding: 0; }
.brand-numbered { padding-left: 1.5rem; margin: 1rem 0; }
.brand-numbered li { margin-bottom: 0.85rem; color: #1f2937; line-height: 1.6; }
.brand-numbered li strong { color: #0B5998; }
.brand-final { background: #fff; padding: 1rem 1.25rem; border-radius: 10px; margin-top: 1.5rem; color: #1f2937; line-height: 1.6; }

/* Sage alternatives compare */
.brand-sage-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.brand-sage-option { display: flex; flex-direction: column; }
.brand-sage-card { padding: 1.5rem; border-radius: 12px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem; position: relative; }
.brand-sage-hex { font-family: monospace; font-size: 0.7rem; color: #6b7280; position: absolute; top: 10px; right: 14px; background: rgba(255,255,255,0.7); padding: 2px 6px; border-radius: 4px; }
.brand-sage-card h3 { color: #0B5998; font-size: 1.1rem; margin: 0; }
.brand-sage-card p { color: #374151; font-size: 0.9rem; margin: 0; line-height: 1.5; }
.brand-sage-meta { padding: 0.75rem 0.5rem 0; }
.brand-sage-meta strong { display: block; color: #111827; font-size: 0.95rem; }
.brand-sage-meta span { font-size: 0.82rem; color: #6b7280; }

/* Cards showcase */
.cards-demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.cs-block-wide { grid-column: span 2; }
@media (max-width: 700px) { .cs-block-wide { grid-column: span 1; } }
.card-style-label { display: block; margin-bottom: 0.75rem; }
.card-style-label strong { display: block; color: #0B5998; font-size: 0.95rem; font-weight: 700; }
.card-style-label span { font-size: 0.8rem; color: #6b7280; }

/* Base card */
.cs-card { background: #fff; border-radius: 14px; overflow: hidden; transition: all 0.25s; cursor: pointer; }
.cs-card:hover { transform: translateY(-2px); }
.cs-img { width: 100%; aspect-ratio: 16/10; background: linear-gradient(135deg, #3a4a5e, #5a6c80); position: relative; }
.cs-img::after { content: 'P'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); font-size: 3rem; font-weight: 800; }
.cs-body { padding: 1rem 1.25rem 1.25rem; }
.cs-body-compact { padding: 0.75rem 1.25rem 1rem; }
.cs-card h3 { font-size: 1.05rem; font-weight: 700; color: #0B5998; margin: 0 0 0.25rem; line-height: 1.2; }
.cs-meta { font-size: 0.82rem; color: #6b7280; margin-bottom: 0.75rem; }
.cs-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
.cs-price { color: #0B5998; font-weight: 700; font-size: 1.05rem; }
.cs-price span { font-size: 0.75rem; color: #6b7280; font-weight: 500; }
.cs-price s { color: #9ca3af; font-weight: 500; font-size: 0.85rem; margin-right: 4px; }
.cs-btn { padding: 6px 16px; border-radius: 100px; border: none; background: #FFB700; color: #1f2937; font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.2s; }
.cs-btn:hover { background: #c9a23f; }
.cs-btn-gold { background: #FFB700; color: #1f2937; }
.cs-btn-block { width: 100%; padding: 9px 16px; }

/* Tag pills */
.cs-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0.5rem; }
.cs-tag { padding: 2px 10px; background: rgba(9,127,154,0.1); color: #097F9A; border-radius: 100px; font-size: 0.72rem; font-weight: 600; }
.cs-rating-inline { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; color: #4b5563; font-weight: 500; margin-top: 0.25rem; }
.cs-rating-inline strong { color: #111827; font-weight: 700; }

/* Style 1: Classic */
.cs-classic { border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.cs-classic:hover { border-color: #0B5998; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

/* Style 2: Elevated */
.cs-elevated { box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06); }
.cs-elevated:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08); transform: translateY(-4px); }

/* Style 3: Outlined */
.cs-outlined { border: 2px solid #0B5998; }
.cs-outlined:hover { background: #f0f7fc; }

/* Style 4: Seafoam */
.cs-seafoam { background: #D9EDEF; }

/* Style 5: Wide */
.cs-wide { display: grid; grid-template-columns: 200px 1fr 180px; gap: 0; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.cs-wide-img { background: linear-gradient(135deg, #3a4a5e, #5a6c80); position: relative; }
.cs-wide-img::after { content: 'P'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); font-size: 3rem; font-weight: 800; }
.cs-wide-body { padding: 1rem 1.25rem; }
.cs-wide-side { padding: 1rem 1.25rem; border-left: 1px solid #e5e7eb; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 0.5rem; }
.cs-wide-price { display: flex; flex-direction: column; align-items: center; }
.cs-wide-price span { font-size: 0.7rem; color: #6b7280; font-weight: 600; text-transform: uppercase; }
.cs-wide-price strong { color: #0B5998; font-size: 1.3rem; font-weight: 800; line-height: 1; margin: 4px 0; }
.cs-wide-price small { font-size: 0.75rem; color: #6b7280; }
@media (max-width: 700px) { .cs-wide { grid-template-columns: 1fr; } .cs-wide-side { border-left: none; border-top: 1px solid #e5e7eb; } }

/* Search result card — Booking.com style #5 (cs-wide applied to live data) */
.pc-desktop.sr-wide {
    display: grid; grid-template-columns: 220px 1fr 190px; gap: 0;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
    overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s, transform 0.2s;
}
.pc-desktop.sr-wide:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
.sr-wide-img { display: block; position: relative; background: #eef2f6; min-height: 180px; }
.sr-wide-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-wide-img .pc-image-placeholder {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #9aa6b2; background: #eef2f6;
}
.sr-wide-img .pc-image-placeholder i[data-lucide] { width: 40px; height: 40px; }
.sr-wide-body { padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: 0.3rem; }
.sr-wide-title { font-size: 1.1rem; font-weight: 700; margin: 0; line-height: 1.2; }
.sr-wide-title a { color: #0B5998; text-decoration: none; }
.sr-wide-title a:hover { text-decoration: underline; }
.sr-wide-meta { font-size: 0.85rem; color: #6b7280; }
.sr-wide-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 0.84rem; color: #4b5563; }
.sr-wide-rating strong { color: #111827; font-weight: 700; }
.sr-wide-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.45rem; }
.sr-wide-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px 4px 8px; border-radius: 100px;
    background: #f1f5f9; color: #334155;
    font-size: 0.74rem; font-weight: 600;
}
.sr-wide-tag .feat-ic { width: 16px; height: 16px; display: block; flex: none; }
.sr-wide-side {
    padding: 1.1rem 1.25rem; border-left: 1px solid #eef2f6;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; gap: 0.7rem;
}
.sr-wide-price { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.sr-wide-price span { font-size: 0.7rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.sr-wide-price strong { color: #0B5998; font-size: 1.35rem; font-weight: 800; margin: 4px 0; }
.sr-wide-price small { font-size: 0.76rem; color: #6b7280; }
.sr-wide-price-ask small { font-size: 0.86rem; color: #6b7280; font-weight: 500; }
.sr-wide-btn {
    width: 100%; padding: 9px 16px; border-radius: 100px;
    background: #FFB700; color: #1f2937; font-size: 0.88rem; font-weight: 700;
    text-align: center; text-decoration: none; transition: background 0.2s;
}
.sr-wide-btn:hover { background: #c9a23f; }
/* Keep the wide desktop card hidden on mobile (overrides the 2-class specificity). */
@media (max-width: 767px) { .pc-desktop.sr-wide { display: none; } }

/* Style 6: Image overlay */
.cs-overlay { border: 1px solid #e5e7eb; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.cs-overlay-img { position: relative; aspect-ratio: 16/10; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%), linear-gradient(135deg, #3a4a5e, #5a6c80); }
.cs-overlay-badge { position: absolute; top: 12px; left: 12px; background: #FFB700; color: #1f2937; padding: 4px 12px; border-radius: 100px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.cs-overlay-content { position: absolute; bottom: 14px; left: 16px; right: 16px; color: #fff; }
.cs-overlay-content h3 { color: #fff; font-size: 1.2rem; font-weight: 700; margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.cs-overlay-meta { font-size: 0.82rem; color: rgba(255,255,255,0.9); margin-top: 2px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

/* Style 7: Accent top */
.cs-accent-top { border-top: 4px solid #FFB700; border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }

/* Style 8: Navy filled */
.cs-navy { background: linear-gradient(135deg, #0B5998, #094778); color: #fff; }
.cs-navy h3 { color: #fff; }
.cs-navy .cs-meta { color: rgba(255,255,255,0.7); }
.cs-navy .cs-price { color: #FFB700; }
.cs-navy .cs-price span { color: rgba(255,255,255,0.6); }
.cs-navy .cs-img { background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.15)); }
.cs-navy .cs-img::after { color: rgba(255,255,255,0.2); }

/* Style 9: Gradient */
.cs-gradient { background: linear-gradient(135deg, #0B5998 0%, #097F9A 100%); color: #fff; box-shadow: 0 8px 24px rgba(11,89,152,0.25); }
.cs-gradient h3 { color: #fff; }
.cs-gradient .cs-meta { color: rgba(255,255,255,0.8); }
.cs-gradient .cs-price { color: #FFB700; }
.cs-gradient .cs-price span { color: rgba(255,255,255,0.6); }
.cs-gradient .cs-img { background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); }
.cs-gradient .cs-img::after { color: rgba(255,255,255,0.2); }

/* Style 10: Stat */
.cs-stat { display: grid; grid-template-columns: 140px 1fr; border: 1px solid #e5e7eb; }
.cs-stat-side { background: #D9EDEF; padding: 1.25rem 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.cs-stat-big { font-size: 1.6rem; font-weight: 800; color: #0B5998; line-height: 1; }
.cs-stat-label { font-size: 0.75rem; color: #097F9A; font-weight: 600; margin-top: 4px; }
.cs-stat-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cs-stat-body h3 { color: #0B5998; }

/* Style 11: Compact */
.cs-compact { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 0.75rem; padding: 0.6rem; border: 1px solid #e5e7eb; }
.cs-compact-img { width: 64px; height: 64px; border-radius: 8px; background: linear-gradient(135deg, #3a4a5e, #5a6c80); flex-shrink: 0; }
.cs-compact-body h3 { font-size: 0.95rem; margin-bottom: 2px; }
.cs-compact-body .cs-meta { margin: 0; font-size: 0.75rem; }
.cs-compact-price { text-align: right; padding-right: 0.5rem; }
.cs-compact-price strong { color: #0B5998; font-size: 1.05rem; font-weight: 800; display: block; }
.cs-compact-price small { font-size: 0.7rem; color: #6b7280; }

/* Style 12: Glass */
.cs-glass-wrap { background-image: linear-gradient(135deg, #0B5998, #097F9A); padding: 1.5rem; border-radius: 18px; }
.cs-glass { background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2); color: #fff; }
.cs-glass h3 { color: #fff; }
.cs-glass .cs-meta { color: rgba(255,255,255,0.8); }
.cs-glass .cs-price { color: #FFB700; }
.cs-glass .cs-price span { color: rgba(255,255,255,0.7); }

/* Style 13: Ribbon */
.cs-ribbon { position: relative; }
.cs-ribbon-tag { position: absolute; top: 12px; right: 0; background: #D64645; color: #fff; padding: 4px 12px; font-size: 0.78rem; font-weight: 700; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.cs-ribbon-tag::before { content: ''; position: absolute; left: -8px; top: 0; border: 4px solid transparent; border-right-color: #b53333; border-bottom-color: #b53333; }

/* Style 14: Text only */
.cs-text-only { padding: 1.5rem; border: 1px solid #e5e7eb; text-align: center; }
.cs-text-only .cs-text-icon { width: 56px; height: 56px; border-radius: 50%; background: #D9EDEF; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; }
.cs-text-only .cs-text-icon i[data-lucide] { width: 28px; height: 28px; color: #0B5998; }
.cs-text-only h3 { font-size: 1.15rem; }
.cs-text-only .cs-tags { justify-content: center; }
.cs-text-only .cs-bottom { margin-top: 1rem; }

/* Style 15: Premium */
.cs-premium { border: 2px solid #FFB700; box-shadow: 0 4px 24px rgba(255, 183, 0,0.18); position: relative; background: linear-gradient(180deg, #fefcf6 0%, #ffffff 30%); }
.cs-premium-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: linear-gradient(135deg, #FFB700, #b88a1a); color: #fff; padding: 4px 12px 4px 8px; border-radius: 100px; font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; letter-spacing: 0.04em; box-shadow: 0 2px 6px rgba(255, 183, 0,0.3); }
.cs-premium-badge i[data-lucide] { width: 12px; height: 12px; }

/* Info cards showcase */
.ic-card { background: #fff; border-radius: 14px; padding: 1.5rem; border: 1px solid #e5e7eb; transition: all 0.2s; height: 100%; box-sizing: border-box; }
.ic-card h3 { font-size: 1.05rem; font-weight: 700; color: #0B5998; margin: 0 0 0.5rem; line-height: 1.25; }
.ic-card p { font-size: 0.88rem; color: #4b5563; line-height: 1.55; margin: 0; }

/* 1. Feature icon top */
.ic-feature { text-align: center; }
.ic-feature-icon { width: 56px; height: 56px; border-radius: 16px; background: #D9EDEF; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.ic-feature-icon i[data-lucide] { width: 28px; height: 28px; color: #097F9A; }

/* 2. Stat */
.ic-stat { text-align: center; background: linear-gradient(135deg, #fff 0%, #fafbff 100%); }
.ic-stat-num { font-size: 2.5rem; font-weight: 800; color: #0B5998; line-height: 1; letter-spacing: -0.02em; }
.ic-stat-label { font-size: 0.95rem; font-weight: 600; color: #097F9A; margin-top: 0.5rem; }
.ic-stat-sub { font-size: 0.8rem; color: #6b7280; margin-top: 4px; }

/* 3. Icon left */
.ic-icon-left { display: flex; gap: 1rem; align-items: flex-start; }
.ic-icon-l { width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 183, 0,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic-icon-l i[data-lucide] { width: 22px; height: 22px; color: #b88a1a; }
.ic-icon-l-body h3 { margin-bottom: 0.25rem; }

/* 4. Step */
.ic-step { padding-top: 2rem; position: relative; }
.ic-step-num { position: absolute; top: 1.25rem; right: 1.25rem; font-size: 2rem; font-weight: 800; color: rgba(11,89,152,0.12); line-height: 1; }

/* 5. Testimonial */
.ic-testimonial { background: #D9EDEF; border: none; }
.ic-testimonial-quote { margin-bottom: 0.5rem; }
.ic-testimonial p { font-size: 0.95rem; color: #1f2937; line-height: 1.55; margin-bottom: 1rem; font-style: italic; }
.ic-testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.ic-testimonial-avatar { width: 36px; height: 36px; border-radius: 50%; background: #0B5998; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.ic-testimonial-author strong { display: block; font-size: 0.88rem; color: #111827; }
.ic-testimonial-author span { font-size: 0.78rem; color: #6b7280; }

/* 6. Benefits */
.ic-benefits ul { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.ic-benefits li { display: flex; align-items: center; gap: 0.65rem; padding: 0.35rem 0; color: #1f2937; font-size: 0.9rem; }
.ic-benefits li i[data-lucide] { width: 18px; height: 18px; color: #fff; background: #059669; border-radius: 50%; padding: 3px; flex-shrink: 0; stroke-width: 3; }

/* 7. Notice */
.ic-notice { background: #fef9ed; border-color: rgba(255, 183, 0,0.3); display: flex; gap: 0.85rem; align-items: flex-start; }
.ic-notice-icon { width: 36px; height: 36px; border-radius: 50%; background: #FFB700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic-notice-icon i[data-lucide] { width: 20px; height: 20px; color: #fff; }
.ic-notice strong { display: block; font-size: 0.95rem; color: #6b5219; font-weight: 700; margin-bottom: 2px; }
.ic-notice p { color: #6b5219; }

/* 8. FAQ */
.ic-faq { padding: 0.5rem 1rem; }
.ic-faq-row { padding: 0.85rem 0; border-bottom: 1px solid #f3f4f6; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.ic-faq-row:last-child { border-bottom: none; }
.ic-faq-row span { font-weight: 600; color: #1f2937; font-size: 0.9rem; }
.ic-faq-row i[data-lucide] { width: 18px; height: 18px; color: #6b7280; }
.ic-faq-open { flex-direction: column; align-items: stretch; }
.ic-faq-q { display: flex; justify-content: space-between; align-items: center; }
.ic-faq-q i[data-lucide] { color: #0B5998; }
.ic-faq-a { margin-top: 0.5rem; color: #4b5563; font-size: 0.85rem; line-height: 1.5; }

/* 9. Compare */
.ic-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.ic-compare-col { padding: 1.25rem 1rem; }
.ic-compare-col:first-child { border-right: 1px solid #e5e7eb; background: #fef8f8; }
.ic-compare-col:last-child { background: #f0f9f4; }
.ic-compare h4 { font-size: 0.88rem; font-weight: 700; margin-bottom: 0.75rem; }
.ic-compare-bad { color: #D64645; }
.ic-compare-good { color: #059669; }
.ic-compare ul { list-style: none; padding: 0; margin: 0; }
.ic-compare li { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.82rem; color: #1f2937; }
.ic-compare li i[data-lucide] { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.ic-compare-col:first-child li i[data-lucide] { color: #D64645; }
.ic-compare-col:last-child li i[data-lucide] { color: #059669; }

/* 10. CTA */
.ic-cta { text-align: center; background: linear-gradient(135deg, #0B5998, #097F9A); color: #fff; border: none; padding: 2rem 1.5rem; }
.ic-cta h3 { color: #fff; margin-bottom: 0.5rem; }
.ic-cta p { color: rgba(255,255,255,0.85); margin-bottom: 1.25rem; }

/* 11. Team */
.ic-team { text-align: center; }
.ic-team-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #0B5998, #097F9A); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.4rem; margin-bottom: 0.75rem; }
.ic-team-role { display: block; font-size: 0.82rem; color: #6b7280; margin-bottom: 1rem; }
.ic-team-links { display: flex; justify-content: center; gap: 0.5rem; }
.ic-team-links a { width: 36px; height: 36px; border-radius: 50%; background: #f3f4f6; display: inline-flex; align-items: center; justify-content: center; color: #0B5998; transition: background 0.2s; }
.ic-team-links a:hover { background: #D9EDEF; }
.ic-team-links i[data-lucide] { width: 16px; height: 16px; }

/* 12. Badge card */
.ic-badge-card { position: relative; padding-top: 2.5rem; }
.ic-badge-card-tag { position: absolute; top: 1.25rem; left: 1.25rem; background: #FFB700; color: #1f2937; padding: 3px 10px; border-radius: 100px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.ic-link { display: inline-flex; align-items: center; gap: 4px; color: #097F9A; font-weight: 600; font-size: 0.88rem; margin-top: 0.75rem; }
.ic-link i[data-lucide] { width: 14px; height: 14px; transition: transform 0.2s; }
.ic-link:hover i[data-lucide] { transform: translateX(3px); }

/* 13. Icon grid */
.ic-icon-grid h3 { margin-bottom: 1rem; }
.ic-icon-grid-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.ic-icon-grid-items > div { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: #f9fafb; border-radius: 8px; font-size: 0.82rem; color: #1f2937; font-weight: 500; }
.ic-icon-grid-items i[data-lucide] { width: 16px; height: 16px; color: #097F9A; flex-shrink: 0; }

/* 14. Timeline */
.ic-timeline { padding: 1.25rem 1.5rem; }
.ic-tl-row { display: flex; gap: 0.85rem; padding: 0.5rem 0; position: relative; align-items: center; }
.ic-tl-row:not(:last-child)::after { content: ''; position: absolute; left: 6px; top: 30px; bottom: -6px; width: 2px; background: #e5e7eb; }
.ic-tl-dot { width: 14px; height: 14px; border-radius: 50%; background: #e5e7eb; flex-shrink: 0; z-index: 1; border: 2px solid #fff; box-shadow: 0 0 0 2px #e5e7eb; }
.ic-tl-done .ic-tl-dot { background: #059669; box-shadow: 0 0 0 2px #059669; }
.ic-tl-active .ic-tl-dot { background: #0B5998; box-shadow: 0 0 0 2px #0B5998; animation: brandPulse 1.6s ease-out infinite; }
.ic-tl-row > div:last-child { display: flex; flex-direction: column; }
.ic-tl-row > div:last-child strong { font-size: 0.88rem; color: #111827; font-weight: 600; }
.ic-tl-row > div:last-child span { font-size: 0.78rem; color: #6b7280; }
.ic-tl-row:not(.ic-tl-done):not(.ic-tl-active) strong { color: #6b7280; font-weight: 500; }

/* 15. Highlight */
.ic-highlight { background: linear-gradient(135deg, #FFB700 0%, #c9a23f 100%); color: #1f2937; border: none; text-align: center; padding: 2rem 1.5rem; }
.ic-highlight-big { font-size: 2.25rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.ic-highlight-text { font-size: 0.95rem; line-height: 1.5; color: rgba(31,41,55,0.85); max-width: 220px; margin: 0 auto; }

/* Linear/Stripe info cards */
.lc-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 1.75rem;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.lc-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(0,0,0,0.08); }
.lc-card h3 { font-size: 1.15rem; font-weight: 600; color: #0a2540; margin: 0 0 0.5rem; letter-spacing: -0.01em; line-height: 1.3; }
.lc-card p { font-size: 0.92rem; color: #6b7280; line-height: 1.6; margin: 0; }
.lc-eyebrow { font-size: 0.7rem; font-weight: 600; color: #097F9A; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; }

/* Arrow link (Stripe style) */
.lc-arrow {
    display: inline-flex; align-items: center; gap: 6px;
    color: #0B5998; font-weight: 600; font-size: 0.92rem;
    margin-top: 1rem; text-decoration: none;
    transition: gap 0.2s;
}
.lc-arrow:hover { gap: 10px; text-decoration: none; }
.lc-arrow span { font-size: 1.1em; line-height: 1; transition: transform 0.2s; }
.lc-arrow-gold { color: #b88a1a; }

/* 1. Subtle gradient */
.lc-gradient { background: linear-gradient(135deg, #fafbff 0%, #f0f7fc 100%); }

/* 2. Big stat with bars */
.lc-stat-big { display: flex; flex-direction: column; }
.lc-stat-mega {
    font-size: 3rem; font-weight: 800;
    color: #0a2540;
    letter-spacing: -0.04em;
    line-height: 1;
    font-feature-settings: 'tnum';
    margin-bottom: 0.5rem;
}
.lc-stat-mega span { color: #097F9A; }
.lc-stat-meta { font-size: 0.9rem; color: #4b5563; margin-bottom: 1.25rem; }
.lc-bars { display: flex; align-items: flex-end; gap: 5px; height: 40px; margin-top: auto; }
.lc-bar {
    flex: 1;
    background: linear-gradient(180deg, #097F9A, #0B5998);
    border-radius: 3px;
    min-height: 8px;
    opacity: 0.85;
}

/* 3. Glow icon */
.lc-glow { padding-top: 2.5rem; }
.lc-glow-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #FFB700, #b88a1a);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 0 0 6px rgba(255, 183, 0,0.08), 0 8px 24px -6px rgba(255, 183, 0,0.3);
}
.lc-glow-icon i[data-lucide] { width: 24px; height: 24px; color: #fff; }

/* 4. Step */
.lc-step-track { display: flex; gap: 6px; margin-bottom: 0.85rem; }
.lc-step-dot { flex: 1; height: 3px; border-radius: 100px; background: #e5e7eb; }
.lc-step-dot-done { background: linear-gradient(90deg, #0B5998, #097F9A); }
.lc-step-dot-active { background: linear-gradient(90deg, #0B5998, #097F9A); position: relative; }
.lc-step-dot-active::after { content: ''; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; background: #097F9A; border-radius: 50%; box-shadow: 0 0 0 3px rgba(9,127,154,0.2); }
.lc-step-meta { font-size: 0.72rem; color: #097F9A; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }

/* 5. Quote */
.lc-quote-text { font-size: 1rem; color: #0a2540; line-height: 1.55; margin-bottom: 1.25rem; font-weight: 500; }
.lc-quote-author { display: flex; align-items: center; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.06); }
.lc-quote-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #0B5998, #097F9A); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.lc-quote-author strong { display: block; font-size: 0.88rem; color: #0a2540; }
.lc-quote-author span { font-size: 0.78rem; color: #6b7280; }

/* 6. Bento */
.lc-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.25rem; }
.lc-bento > div { padding: 1rem; background: rgba(11,89,152,0.03); border-radius: 12px; }
.lc-bento-num { font-size: 1.5rem; font-weight: 700; color: #0a2540; letter-spacing: -0.02em; font-feature-settings: 'tnum'; line-height: 1; }
.lc-bento-num small { font-size: 0.75rem; color: #6b7280; font-weight: 500; margin-left: 2px; }
.lc-bento-label { font-size: 0.78rem; color: #6b7280; margin-top: 4px; }

/* 7. Notice */
.lc-notice { display: flex; gap: 0.85rem; align-items: flex-start; background: rgba(255, 183, 0,0.04); border-color: rgba(255, 183, 0,0.2); }
.lc-notice-dot { width: 10px; height: 10px; border-radius: 50%; background: #FFB700; flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 0 4px rgba(255, 183, 0,0.15); }
.lc-notice-head { font-size: 0.75rem; font-weight: 700; color: #b88a1a; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }

/* 8. FAQ minimal */
.lc-faq { padding: 0.5rem 0; }
.lc-faq-row { padding: 1rem 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.05); }
.lc-faq-row:last-child { border-bottom: none; }
.lc-faq-q { font-weight: 600; color: #0a2540; font-size: 0.92rem; margin-bottom: 4px; }
.lc-faq-a { font-size: 0.85rem; color: #6b7280; font-family: ui-monospace, monospace; }

/* 9. CTA Glow */
.lc-cta-glow {
    background: linear-gradient(135deg, #0a2540 0%, #0B5998 100%);
    color: #fff;
    padding: 2rem 1.75rem;
    border: none;
    position: relative;
}
.lc-cta-glow-blob {
    position: absolute;
    top: -30%; right: -20%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255, 183, 0,0.4) 0%, transparent 70%);
    pointer-events: none;
}
.lc-cta-glow-content { position: relative; z-index: 1; }
.lc-cta-glow h3 { color: #fff; font-size: 1.3rem; }
.lc-cta-glow p { color: rgba(255,255,255,0.75); margin-bottom: 1.25rem; }
.lc-cta-glow-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #FFB700; color: #0a2540;
    padding: 9px 20px; border-radius: 100px;
    font-weight: 600; font-size: 0.92rem;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.lc-cta-glow-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255, 183, 0,0.4); text-decoration: none; }

/* 10. Person */
.lc-person { text-align: center; padding-top: 2rem; }
.lc-person-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0B5998, #097F9A);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.15rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 4px 12px -4px rgba(11,89,152,0.3);
}
.lc-person-role { display: block; font-size: 0.82rem; color: #6b7280; margin-top: 4px; margin-bottom: 1rem; }

/* 11. Timeline */
.lc-timeline { padding: 1.25rem 1.5rem; }
.lc-tl-item { position: relative; padding: 0.75rem 0 0.75rem 1.5rem; display: flex; flex-direction: column; }
.lc-tl-item::before { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: #e5e7eb; }
.lc-tl-item:first-child::before { top: 14px; }
.lc-tl-item:last-child::before { bottom: 50%; }
.lc-tl-item::after { content: ''; position: absolute; left: 0; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid #d1d5db; }
.lc-tl-item.lc-tl-done::after { background: #097F9A; border-color: #097F9A; }
.lc-tl-item.lc-tl-active::after { background: #0B5998; border-color: #0B5998; box-shadow: 0 0 0 4px rgba(11,89,152,0.15); }
.lc-tl-item strong { font-size: 0.88rem; color: #0a2540; font-weight: 600; }
.lc-tl-item span { font-size: 0.78rem; color: #6b7280; font-feature-settings: 'tnum'; margin-top: 2px; }
.lc-tl-item:not(.lc-tl-done):not(.lc-tl-active) strong { color: #9ca3af; font-weight: 500; }

/* 12. Compare */
.lc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.lc-compare-col { padding: 1.25rem 1.5rem; }
.lc-compare-col:first-child { border-right: 1px solid rgba(0,0,0,0.05); }
.lc-compare-head { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; display: block; }
.lc-compare-bad { color: #9ca3af; }
.lc-compare-good { color: #097F9A; }
.lc-compare-col p { font-size: 0.88rem; line-height: 1.5; margin: 0; padding: 0.4rem 0; color: #0a2540; }
.lc-compare-col:first-child p { color: #9ca3af; text-decoration: line-through; }

/* 13. Highlight inline */
.lc-highlight p { font-size: 1rem; color: #0a2540; line-height: 1.5; }
.lc-highlight-num { font-size: 1.8rem; font-weight: 800; color: #0B5998; letter-spacing: -0.02em; font-feature-settings: 'tnum'; display: inline-block; margin: 0 4px; vertical-align: middle; }
.lc-highlight-sub { font-size: 0.85rem; color: #6b7280; margin-top: 0.75rem; }

/* 14. Process steps */
.lc-process h3 { margin-bottom: 1rem; }
.lc-process-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.lc-process-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.lc-process-icon { width: 40px; height: 40px; border-radius: 12px; background: #f0f7fc; display: flex; align-items: center; justify-content: center; }
.lc-process-icon i[data-lucide] { width: 18px; height: 18px; color: #097F9A; }
.lc-process-step span { font-size: 0.78rem; color: #4b5563; font-weight: 600; }
.lc-process-arrow { color: #d1d5db; font-size: 1.2rem; font-weight: 300; }

/* 15. Premium subtle */
.lc-premium { background: linear-gradient(135deg, #fffbf0 0%, #fff 50%); border-color: rgba(255, 183, 0,0.25); }
.lc-premium-tag { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 183, 0,0.15); color: #b88a1a; padding: 4px 10px; border-radius: 100px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.85rem; }
.lc-premium-tag i[data-lucide] { width: 12px; height: 12px; }

/* Igy mukodik (How it works) — 4 lépés timeline */
.how-it-works { max-width: 1100px; margin: 0 auto; padding: 4rem 1.5rem 3rem; }
.hiw-header { text-align: center; margin-bottom: 2rem; }
.hiw-header-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: #eaf2fb; margin-bottom: 0.75rem; }
.hiw-header-icon i[data-lucide] { width: 22px; height: 22px; color: #0B5998; }
.hiw-header h2 { font-size: 2.25rem; font-weight: 700; color: #0a2540; margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.hiw-header p { font-size: 0.95rem; color: #6b7280; max-width: 520px; margin: 0 auto; line-height: 1.5; }

.hiw-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin: 2rem auto 1.5rem; max-width: 100%; position: relative; }
.hiw-timeline::before {
    content: '';
    position: absolute;
    left: 12.5%; right: 12.5%;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, #0B5998 0%, #0B5998 33%, #097F9A 33%, #097F9A 66%, #FFB700 66%, #FFB700 99%, #D64645 99%);
    transform: translateY(-50%);
    z-index: 0;
}
.hiw-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    justify-self: center;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 4px #fff;
}
.hiw-dot-1 { background: #0B5998; }
.hiw-dot-2 { background: #097F9A; }
.hiw-dot-3 { background: #FFB700; }
.hiw-dot-4 { background: #D64645; }

.hiw-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
@media (max-width: 760px) {
    .hiw-timeline { display: none; }
    .hiw-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        position: relative;
        padding-left: 2.5rem;
    }
    /* Vertical timeline line on the left */
    .hiw-cards::before {
        content: '';
        position: absolute;
        left: 18px; top: 16px; bottom: 16px;
        width: 2px;
        background: linear-gradient(180deg, #0B5998 0%, #0B5998 25%, #097F9A 25%, #097F9A 50%, #FFB700 50%, #FFB700 75%, #D64645 75%, #D64645 100%);
    }
    /* Cards: 2-col grid - icon left, content right */
    .hiw-card {
        display: grid;
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto;
        column-gap: 1rem;
        row-gap: 0.5rem;
        text-align: left;
        padding: 1.25rem 1.25rem 1.5rem;
        position: relative;
        align-items: start;
    }
    .hiw-card-img { width: 64px; height: 64px; margin: 0; flex-shrink: 0; grid-row: span 2; }
    .hiw-card h3 {
        text-align: left;
        margin: 0.15rem 0 0.75rem;
        display: inline-block;
        align-self: end;
    }
    .hiw-card h3::after { left: 0; transform: none; }
    .hiw-card p { text-align: left; align-self: start; grid-column: 2; }
    /* Step badge floats on the vertical line, to the LEFT of the card */
    .hiw-card-num {
        position: absolute;
        left: -2.5rem;
        top: 1.25rem;
        margin: 0;
        z-index: 1;
        box-shadow: 0 0 0 4px #fff;
    }
}

.hiw-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem 1.25rem 1.75rem;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px -10px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.hiw-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
}
.hiw-card-1::after { background: #0B5998; }
.hiw-card-2::after { background: #097F9A; }
.hiw-card-3::after { background: #FFB700; }
.hiw-card-4::after { background: #D64645; }
.hiw-card-img { width: 96px; height: 96px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; }
.hiw-card-img img { width: 100%; height: 100%; object-fit: contain; }
.hiw-card-num {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    font-feature-settings: 'tnum';
}
.hiw-card-1 .hiw-card-num { background: #0B5998; }
.hiw-card-2 .hiw-card-num { background: #097F9A; }
.hiw-card-3 .hiw-card-num { background: #FFB700; color: #1f2937; }
.hiw-card-4 .hiw-card-num { background: #D64645; }
.hiw-card h3 {
    font-size: 1.05rem; font-weight: 700; color: #0a2540;
    margin: 0 0 0.85rem;
    padding-bottom: 0.6rem;
    position: relative;
    display: inline-block;
}
.hiw-card h3::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    border-radius: 2px;
}
.hiw-card-1 h3 { color: #0B5998; }
.hiw-card-1 h3::after { background: #0B5998; }
.hiw-card-2 h3 { color: #097F9A; }
.hiw-card-2 h3::after { background: #097F9A; }
.hiw-card-3 h3 { color: #b88a1a; }
.hiw-card-3 h3::after { background: #FFB700; }
.hiw-card-4 h3 { color: #D64645; }
.hiw-card-4 h3::after { background: #D64645; }
.hiw-card p { font-size: 0.88rem; color: #6b7280; line-height: 1.55; margin: 0; }

/* Igy mukodik MOBILE override - must come AFTER general .hiw-card rules */
@media (max-width: 760px) {
    .hiw-timeline { display: none; }
    .hiw-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        position: relative;
        padding-left: 2.5rem;
    }
    .hiw-cards::before {
        content: '';
        position: absolute;
        left: 18px; top: 16px; bottom: 16px;
        width: 2px;
        background: linear-gradient(180deg, #0B5998 0%, #0B5998 25%, #097F9A 25%, #097F9A 50%, #FFB700 50%, #FFB700 75%, #D64645 75%, #D64645 100%);
    }
    .hiw-card {
        display: grid !important;
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto;
        column-gap: 1rem;
        row-gap: 0.25rem;
        text-align: left;
        padding: 1.25rem 1.25rem 1.5rem;
        position: relative;
        overflow: visible !important;
        align-items: start;
    }
    .hiw-card::after { border-radius: 0 0 16px 16px; }
    .hiw-card-img {
        width: 64px !important; height: 64px !important;
        margin: 0;
        grid-row: span 2;
        align-self: center;
    }
    .hiw-card h3 {
        text-align: left;
        margin: 0 0 0.6rem;
        align-self: end;
    }
    .hiw-card h3::after { left: 0; transform: none; }
    .hiw-card p { text-align: left; grid-column: 2; align-self: start; }
    .hiw-card-num {
        position: absolute !important;
        left: -2.85rem !important;
        top: 1.5rem !important;
        margin: 0 !important;
        z-index: 5;
        box-shadow: 0 0 0 4px #fff;
        min-width: 36px !important;
        height: 36px !important;
    }
}

/* Igy mukodik v2 — handwritten + arrows design */
.hiw2 { max-width: 1280px; margin: 0 auto; padding: 4rem 1.5rem 3rem; }
.hiw2-header { text-align: center; margin-bottom: 3.5rem; }
.hiw2-header h2 { font-size: 2.25rem; font-weight: 700; color: #0a2540; margin: 0 0 0.75rem; letter-spacing: -0.02em; }
.hiw2-header p { font-size: 1rem; color: #6b7280; max-width: 560px; margin: 0 auto; line-height: 1.55; }

.hiw2-flow {
    display: grid;
    grid-template-columns: 1fr 90px 1fr 90px 1fr 90px 1fr;
    gap: 1.25rem;
    align-items: flex-start;
    position: relative;
    padding-top: 1rem;
}
.hiw2-step {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 280px;
}
.hiw2-icon {
    display: none;
}
.hiw2-icon i[data-lucide] {
    width: 32px; height: 32px;
    color: #0B5998;
    stroke-width: 1.6;
}
.hiw2-step h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0a2540;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.hiw2-step p {
    font-size: 0.92rem;
    color: #6b7280;
    line-height: 1.55;
    margin: 0;
}
.hiw2-seo-img {
    width: 100px; height: 100px;
    object-fit: contain;
    display: block;
    margin-bottom: 0.4rem;
    order: -1;
}
.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;
}

/* Arrows between steps */
.hiw2-arrow {
    color: #FFB700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 2.5rem;
}
.hiw2-arrow svg {
    width: 100%; max-width: 80px;
    height: 36px;
}
.hiw2-arrow svg path { stroke-width: 2.5; }

/* Handwritten category tags */
.hiw2-tag {
    position: absolute;
    font-family: var(--font-script, 'Caveat', cursive);
    font-size: 1.45rem;
    font-weight: 600;
    color: #FFB700;
    line-height: 1;
    top: 0;
}
.hiw2-tag-left {
    grid-column: 1 / span 3;
    text-align: left;
    padding-left: 0.5rem;
    transform: translateY(-0.5rem);
}
.hiw2-tag-right {
    grid-column: 5 / span 3;
    text-align: left;
    padding-left: 0.5rem;
    transform: translateY(-0.5rem);
}
.hiw2-tag-curve {
    width: 60px; height: 40px;
    position: absolute;
    left: 8rem;
    top: 0.6rem;
    color: #FFB700;
}

/* Mobile */
@media (max-width: 900px) {
    .hiw2-flow {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding-top: 1rem;
    }
    .hiw2-arrow {
        display: flex;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
        transform: rotate(90deg);
        width: 36px;
        height: 36px;
    }
    .hiw2-arrow svg {
        width: 36px;
        height: 24px;
    }
    .hiw2-tag {
        position: relative;
        grid-column: 1;
        transform: none;
        margin-top: 0.5rem;
        margin-bottom: -1rem;
        padding-left: 0;
    }
    .hiw2-tag-curve {
        display: none;
    }
    .hiw2-step {
        max-width: 100%;
    }
}

/* hiw2 step + arrow colors per index */
.hiw2-step-1 .hiw2-icon i[data-lucide] { color: #0B5998; }
.hiw2-step-2 .hiw2-icon i[data-lucide] { color: #097F9A; }
.hiw2-step-3 .hiw2-icon i[data-lucide] { color: #FFB700; }
.hiw2-step-4 .hiw2-icon i[data-lucide] { color: #D64645; }

.hiw2-arrow-1 { color: #0B5998; }
.hiw2-arrow-2 { color: #097F9A; }
.hiw2-arrow-3 { color: #FFB700; }

/* ============================================================
   Register page — split layout (promo panel + form card)
   ============================================================ */
.reg-split {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    max-width: 1040px;
    margin: 2.5rem auto 3.5rem;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(11, 89, 152, 0.12);
}

/* Left promo panel — seafoam background that blends with the illustration. */
.reg-promo { position: relative; min-height: 560px; color: #0B5998; background: #E4EDEC; }
.reg-promo-media {
    position: absolute; inset: 0;
    background-image: url('/assets/img/register-promo.webp?v=3');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: min(94%, 480px);
}
/* Login (and set-password) use a separate illustration. */
.reg-split-login .reg-promo-media {
    background-image: url('/assets/img/login-promo.webp?v=2');
}
.reg-promo-overlay {
    position: relative; z-index: 1;
    padding: 2.4rem;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.reg-promo-eyebrow {
    display: block;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: #097F9A;
    max-width: 200px; line-height: 1.3; margin-bottom: 0.6rem;
}
.reg-promo-badge {
    flex-shrink: 0;
    width: 84px; height: 84px; border-radius: 50%;
    background: #FFB700; color: #1f2937;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(11,89,152,0.18);
}
.reg-promo-badge span { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.reg-promo-badge small { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.reg-promo-title {
    font-family: var(--font-heading), sans-serif;
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    font-weight: 800; line-height: 0.98; letter-spacing: -0.01em;
    margin: 0; text-transform: uppercase; color: #0B5998;
}

/* Right form panel */
.reg-panel { padding: 2.8rem 2.6rem; display: flex; flex-direction: column; }
.reg-panel-head { text-align: center; margin-bottom: 1.6rem; }
.reg-panel-head h1 { font-size: 1.9rem; font-weight: 800; color: #0f172a; margin: 0 0 0.35rem; }
.reg-panel-head p { color: #6b7280; font-size: 0.95rem; margin: 0; }

.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; }
.reg-grid .form-group { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.reg-grid .reg-col-2 { grid-column: span 1; }
.reg-form label { font-size: 0.8rem; font-weight: 600; color: #374151; }
.reg-form input[type="text"],
.reg-form input[type="email"],
.reg-form input[type="tel"],
.reg-form input[type="password"] {
    width: 100%; padding: 11px 13px;
    border: 1px solid #d1d5db; border-radius: 10px;
    font-size: 0.92rem; font-family: inherit; color: #111827;
    background: #f9fafb; box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.reg-form input:focus {
    outline: none; border-color: #01204A; background: #fff;
    box-shadow: 0 0 0 3px rgba(1,32,74,0.12);
}
.reg-form .form-error { font-size: 0.78rem; color: #D64645; }
.reg-pw-hint { display: block; margin: 0.5rem 0 1rem; color: #6b7280; font-size: 0.78rem; }

.reg-consent {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 0.84rem; color: #4b5563; line-height: 1.4;
    margin-bottom: 0.7rem; cursor: pointer;
}
.reg-consent input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: #01204A; }
.reg-consent a { color: #097F9A; font-weight: 600; }

.reg-submit {
    margin-top: 0.6rem; width: 100%;
    padding: 13px; border: none; border-radius: 100px;
    background: #FFB700; color: #1f2937;
    font-size: 1rem; font-weight: 700; font-family: inherit;
    cursor: pointer; transition: background 0.2s, transform 0.1s;
}
.reg-submit:hover:not(:disabled) { background: #c9a23f; }
.reg-submit:active:not(:disabled) { transform: translateY(1px); }
.reg-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.reg-foot { text-align: center; font-size: 0.88rem; color: #4b5563; margin: 1.1rem 0 0; }
.reg-foot a { color: #01204A; font-weight: 600; }
.reg-foot-muted { color: #9ca3af; font-size: 0.8rem; margin-top: 0.4rem; }

/* Stacked form groups (login uses these directly, not the 2-col grid). */
.reg-form > .form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 0.95rem; }

/* Google OAuth button — "coming soon" disabled state. */
.reg-oauth { margin-top: 1.1rem; }
.reg-oauth-divider {
    display: flex; align-items: center; text-align: center;
    color: #9ca3af; font-size: 0.8rem; margin: 0 0 1rem;
}
.reg-oauth-divider::before, .reg-oauth-divider::after {
    content: ''; flex: 1; height: 1px; background: #e5e7eb;
}
.reg-oauth-divider span { padding: 0 12px; }
.reg-google-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 11px 14px; border: 1px solid #d1d5db; border-radius: 100px;
    background: #fff; font-size: 0.92rem; font-weight: 600; color: #374151;
    font-family: inherit; cursor: not-allowed;
}
.reg-google-btn:disabled { opacity: 0.5; }
.reg-google-soon { font-weight: 500; color: #9ca3af; }

/* Password field eye toggle */
.pw-wrap { position: relative; }
.reg-form .pw-wrap input { padding-right: 44px; }
.pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    border: none; background: none; cursor: pointer;
    color: #9ca3af; border-radius: 8px; transition: color 0.15s;
}
.pw-toggle:hover { color: #01204A; }

/* Remember-me checkbox (login) */
.reg-remember {
    display: flex; align-items: center; gap: 9px;
    font-size: 0.86rem; color: #4b5563; cursor: pointer;
    margin: 0 0 1rem;
}
.reg-remember input[type="checkbox"] { width: 16px; height: 16px; accent-color: #01204A; }

@media (max-width: 860px) {
    .reg-split { grid-template-columns: 1fr; margin: 1.25rem; border-radius: 18px; }
    /* Compact banner: text + badge on the left, illustration anchored bottom-right
       so the two never overlap. */
    .reg-promo { min-height: 200px; }
    .reg-promo-media {
        background-size: auto 205px;
        background-position: right -16px bottom;
    }
    .reg-promo-overlay {
        flex-direction: column; align-items: flex-start; gap: 0.7rem;
        padding: 1.4rem 1.4rem; max-width: 62%;
    }
    .reg-promo-eyebrow { margin-bottom: 0; }
    .reg-promo-title { font-size: 1.55rem; }
    .reg-promo-badge { width: 60px; height: 60px; }
    .reg-promo-badge span { font-size: 1.1rem; }
    .reg-promo-badge small { font-size: 0.52rem; }
    .reg-panel { padding: 1.8rem 1.4rem; }
}
@media (max-width: 520px) {
    .reg-grid { grid-template-columns: 1fr; }
    .reg-promo { min-height: 180px; }
    .reg-promo-media { background-size: auto 175px; }
    .reg-promo-title { font-size: 1.35rem; }
}

/* GYIK anchor: offset under sticky header when jumping to /#gyik */
#gyik { scroll-margin-top: 96px; }

/* Lenis smooth scroll (see components/smooth-scroll.tsx). When Lenis drives the
   window scroll we must turn OFF native smooth scroll-behavior to avoid the two
   fighting; Lenis adds the .lenis / .lenis-smooth classes on <html> itself. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }


/* ============================================================
   "Így működik" — interactive product showcase (HowItWorks)
   Left auto-advancing stepper + right phone mockup that swaps
   the app screen per step. See components/how-it-works.tsx.
   ============================================================ */
.hiw {
  padding: 5rem 0 4.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fb 100%);
  overflow: hidden;
}
.hiw-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 3.5rem;
  align-items: center;
}
.hiw-eyebrow {
  display: inline-block; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #097F9A; margin-bottom: 0.85rem;
}
.hiw-left > h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; color: #0a2540;
  letter-spacing: -0.02em; margin: 0 0 0.7rem; line-height: 1.12;
}
.hiw-lead { font-size: 1.02rem; color: #6b7280; line-height: 1.55; margin: 0 0 2rem; max-width: 520px; }

.hiw-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.hiw-step {
  display: grid; grid-template-columns: 44px 1fr; gap: 0.9rem; align-items: start;
  padding: 1rem 1.1rem; border-radius: 16px; cursor: pointer;
  border: 1px solid transparent; background: transparent;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.hiw-step:hover { background: #ffffff; border-color: #e6ecf3; }
.hiw-step.is-active {
  background: #ffffff; border-color: color-mix(in srgb, var(--accent) 35%, #e6ecf3);
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--accent) 70%, transparent);
}
.hiw-step-num {
  font-weight: 800; font-size: 0.85rem; letter-spacing: 0.05em; color: #c2cdda;
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: #f1f5f9; transition: color 0.25s ease, background 0.25s ease;
}
.hiw-step.is-active .hiw-step-num { color: #fff; background: var(--accent); }
.hiw-step-copy { min-width: 0; }
.hiw-step-copy h3 { font-size: 1.08rem; font-weight: 700; color: #0a2540; margin: 0.15rem 0 0.25rem; letter-spacing: -0.01em; }
.hiw-step-copy > p { font-size: 0.9rem; color: #6b7280; line-height: 1.5; margin: 0; }
.hiw-step:not(.is-active) .hiw-step-copy > p { color: #93a1b1; }

.hiw-step-bar { display: block; height: 3px; border-radius: 3px; background: #eef2f6; margin-top: 0.8rem; overflow: hidden; }
.hiw-step-fill {
  display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent);
  animation-name: hiwFill; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes hiwFill { from { width: 0; } to { width: 100%; } }

/* Right: phone mockup + glow */
.hiw-right { position: relative; display: flex; align-items: center; justify-content: center; }
.hiw-glow { position: absolute; inset: -10% -20%; z-index: 0; transition: background 0.5s ease; }
.hiw-phone {
  position: relative; z-index: 1; width: 300px; max-width: 80vw; aspect-ratio: 300 / 610;
  background: #0e1b2b; border-radius: 40px; padding: 12px;
  box-shadow: 0 50px 90px -34px rgba(10, 37, 64, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.hiw-phone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 116px; height: 22px; background: #0e1b2b; border-radius: 0 0 14px 14px; z-index: 3; }
.hiw-phone-screen { position: relative; height: 100%; background: #f4f7fb; border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; }
.hiw-phone-bar { display: flex; align-items: center; justify-content: space-between; padding: 30px 18px 14px; color: #fff; font-weight: 700; font-size: 0.92rem; transition: background 0.4s ease; }
.hiw-phone-step { font-size: 0.72rem; font-weight: 600; opacity: 0.85; }
.hiw-screens { flex: 1; padding: 16px 14px; display: flex; flex-direction: column; gap: 11px; animation: hiwScreenIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes hiwScreenIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.hiw-screen { display: flex; flex-direction: column; gap: 9px; height: 100%; }

/* Shared mock primitives */
.hiw-sc-lbl { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08em; color: #9aa7b6; font-weight: 700; }
.hiw-sc-btn { margin-top: auto; background: #0B5998; color: #fff; border: none; border-radius: 12px; padding: 12px; font-weight: 700; font-size: 0.8rem; cursor: default; }
.hiw-sc-btn-pay { background: #16a34a; }
.hiw-sc-btn-ghost { background: #fff; color: #0a2540; border: 1.5px solid #e2e8f0; }

/* Stylised vector map */
.hiw-sc-mapwrap { position: relative; border-radius: 14px; overflow: hidden; height: 96px; flex: none; box-shadow: inset 0 0 0 1px rgba(10,37,64,0.05); }
.hiw-sc-maproute { height: 118px; }
.hiw-sc-map { width: 100%; height: 100%; display: block; }
.hiw-sc-mapbadge { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.95); border-radius: 999px; padding: 5px 10px; font-size: 0.66rem; font-weight: 700; color: #0a2540; box-shadow: 0 4px 10px -4px rgba(10,37,64,0.3); }
.hiw-sc-live { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,0.5); animation: hiwLive 1.8s ease-out infinite; }
@keyframes hiwLive { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.55); } 100% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } }

/* Search screen */
.hiw-sc-loc { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #e6ecf3; border-radius: 12px; padding: 10px 12px; }
.hiw-sc-loc svg { width: 20px; height: 20px; flex: none; }
.hiw-sc-loc > div { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.hiw-sc-loc strong { font-size: 0.82rem; color: #0a2540; }
.hiw-sc-loc span { font-size: 0.66rem; color: #9aa7b6; }
.hiw-sc-code { font-size: 0.66rem; font-weight: 800; color: #0B5998; background: #eaf2fb; border-radius: 7px; padding: 4px 7px; letter-spacing: 0.04em; }
.hiw-sc-daterow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.hiw-sc-date { background: #fff; border: 1px solid #e6ecf3; border-radius: 12px; padding: 9px 11px; display: flex; flex-direction: column; gap: 1px; }
.hiw-sc-date strong { font-size: 0.82rem; color: #0a2540; }
.hiw-sc-sub { font-size: 0.66rem; color: #6b7280; }
.hiw-sc-nights { font-size: 0.6rem; font-weight: 800; color: #097F9A; background: #e6f3f5; border-radius: 999px; padding: 4px 7px; white-space: nowrap; }
.hiw-sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hiw-sc-chip { font-size: 0.64rem; font-weight: 600; color: #6b7280; background: #fff; border: 1px solid #e6ecf3; border-radius: 999px; padding: 5px 10px; }
.hiw-sc-chip.is-on { color: #0B5998; border-color: #0B5998; background: #eaf2fb; font-weight: 700; }

/* Results */
.hiw-sc-sort { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.hiw-sc-sort strong { font-size: 0.78rem; color: #0a2540; }
.hiw-sc-sortby { display: inline-flex; align-items: center; gap: 3px; font-size: 0.68rem; font-weight: 700; color: #0B5998; }
.hiw-sc-sortby svg { width: 13px; height: 13px; }
.hiw-sc-result { position: relative; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e6ecf3; border-radius: 14px; padding: 8px; }
.hiw-sc-result.is-hot { border-color: #0B5998; box-shadow: 0 10px 20px -12px rgba(11, 89, 152, 0.6); }
.hiw-sc-ribbon { position: absolute; top: -7px; left: 10px; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: #0B5998; border-radius: 6px; padding: 2px 7px; }
.hiw-sc-thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; }
.hiw-sc-rinfo { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hiw-sc-rinfo strong { font-size: 0.78rem; color: #0a2540; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hiw-sc-meta { font-size: 0.62rem; color: #9aa7b6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hiw-sc-rate { color: #e0a615; font-weight: 800; }
.hiw-sc-tag { align-self: flex-start; font-size: 0.58rem; font-weight: 700; color: #097F9A; background: #e6f3f5; border-radius: 5px; padding: 2px 6px; }
.hiw-sc-rprice { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; flex: none; }
.hiw-sc-rprice s { font-size: 0.58rem; color: #c2cdda; }
.hiw-sc-rprice b { font-size: 0.86rem; color: #0a2540; }
.hiw-sc-rprice span { font-size: 0.56rem; color: #9aa7b6; }

/* Booking */
.hiw-sc-summary { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e6ecf3; border-radius: 12px; padding: 8px; }
.hiw-sc-summary img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; flex: none; }
.hiw-sc-summary strong { display: block; font-size: 0.78rem; color: #0a2540; }
.hiw-sc-summary span { font-size: 0.66rem; color: #6b7280; }
.hiw-sc-bill { background: #fff; border: 1px solid #e6ecf3; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.hiw-sc-billrow { display: flex; justify-content: space-between; font-size: 0.74rem; color: #6b7280; }
.hiw-sc-free { color: #16a34a; font-weight: 700; }
.hiw-sc-billtotal { border-top: 1px dashed #e2e8f0; padding-top: 7px; margin-top: 1px; color: #0a2540; }
.hiw-sc-billtotal strong { font-size: 0.92rem; color: #0a2540; }
.hiw-sc-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hiw-sc-input { background: #fff; border: 1px solid #e6ecf3; border-radius: 12px; padding: 8px 11px; display: flex; flex-direction: column; gap: 1px; }
.hiw-sc-input strong { font-size: 0.8rem; color: #0a2540; }
.hiw-sc-card { display: flex; align-items: center; gap: 9px; background: #0e1b2b; color: #fff; border-radius: 12px; padding: 12px; font-size: 0.78rem; letter-spacing: 0.05em; }
.hiw-sc-visa { font-weight: 800; font-style: italic; background: #fff; color: #1a1f71; border-radius: 4px; padding: 2px 6px; font-size: 0.62rem; letter-spacing: 0; flex: none; }
.hiw-sc-lock { width: 16px; height: 16px; margin-left: auto; opacity: 0.7; }

/* Confirmation */
.hiw-sc-confirmhead { display: flex; align-items: center; gap: 10px; }
.hiw-sc-check { width: 42px; height: 42px; border-radius: 50%; background: #16a34a; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 8px 18px -7px rgba(22, 163, 74, 0.6); animation: hiwCheckPop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.hiw-sc-check svg { width: 22px; height: 22px; }
@keyframes hiwCheckPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.hiw-sc-confirmhead strong { display: block; font-size: 0.92rem; color: #0a2540; }
.hiw-sc-confirmhead span { font-size: 0.66rem; color: #9aa7b6; letter-spacing: 0.02em; }
.hiw-sc-transferbar { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e6ecf3; border-radius: 12px; padding: 10px 11px; }
.hiw-sc-tbus { width: 34px; height: 34px; border-radius: 9px; background: #fdeaea; color: #D64645; display: flex; align-items: center; justify-content: center; flex: none; }
.hiw-sc-tbus svg { width: 19px; height: 19px; }
.hiw-sc-transferbar > div { flex: 1; min-width: 0; line-height: 1.25; }
.hiw-sc-transferbar strong { display: block; font-size: 0.76rem; color: #0a2540; }
.hiw-sc-transferbar span { display: block; font-size: 0.62rem; color: #9aa7b6; }
.hiw-sc-eta { font-size: 0.8rem; font-weight: 800; color: #16a34a; flex: none; }
.hiw-sc-mailrow { display: flex; align-items: center; gap: 8px; font-size: 0.68rem; color: #6b7280; font-weight: 600; padding: 0 2px; }
.hiw-sc-mailrow svg { width: 16px; height: 16px; flex: none; }
.hiw-sc-trust { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.hiw-sc-trust span { display: flex; align-items: center; gap: 7px; font-size: 0.68rem; color: #475569; font-weight: 600; }
.hiw-sc-trust svg { width: 15px; height: 15px; flex: none; }

/* Tablet / mobile: stack copy over the device */
@media (max-width: 900px) {
  .hiw { padding: 3.5rem 0 3rem; }
  .hiw-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .hiw-right { order: 2; }
  .hiw-left { order: 1; }
  .hiw-lead { max-width: none; margin-bottom: 1.4rem; }
  /* Compact stepper: collapse inactive descriptions so the list stays short and
     the phone is reachable without a long scroll. Active step stays expanded. */
  .hiw-steps { gap: 0.4rem; }
  .hiw-step { padding: 0.75rem 0.85rem; align-items: center; }
  .hiw-step-num { width: 38px; height: 38px; }
  .hiw-step:not(.is-active) .hiw-step-copy > p { display: none; }
  .hiw-step:not(.is-active) .hiw-step-copy h3 { margin: 0; }
  .hiw-phone { width: 268px; }
}
@media (prefers-reduced-motion: reduce) {
  .hiw-screens, .hiw-sc-check { animation: none; }
  .hiw-step-fill { animation: none; width: 100%; }
}

/* ============================================================
   "Az utad a terminálig" — animated trip overview on the parking
   detail page (TripJourney). Replaces the 3 generic stat cards.
   ============================================================ */
.trip {
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  border: 1px solid #e5e7eb; border-radius: 16px;
  padding: 22px 24px 26px; margin-bottom: 14px;
}
.trip-head { margin-bottom: 22px; }
.trip-eyebrow { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #097F9A; margin-bottom: 4px; }
.trip-title { font-size: 1.2rem; font-weight: 700; color: #0a2540; margin: 0; letter-spacing: -0.01em; }

.trip-route { display: grid; grid-template-columns: minmax(120px, 1fr) 2.2fr minmax(120px, 1fr); align-items: start; gap: 8px; }
.trip-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 4px; }
.trip-node strong { font-size: 0.92rem; color: #0a2540; }
.trip-node span { font-size: 0.74rem; color: #6b7280; line-height: 1.35; max-width: 150px; }
.trip-pin {
  width: 58px; height: 58px; border-radius: 50%;
  background: #eef2f6; border: 2px solid #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease; transform: scale(0.85); opacity: 0;
}
.trip-pin img { width: 28px; height: 28px; display: block; }
.trip-pin-end { background: #e2e8f0; border-color: #cbd5e1; }
.trip-pin-end img { width: 26px; height: 26px; }
.trip.is-go .trip-pin { transform: scale(1); opacity: 1; }
.trip.is-go .trip-node-end .trip-pin { transition-delay: 0.5s; }

/* The transfer line between the two nodes */
.trip-line { position: relative; align-self: stretch; min-height: 58px; display: flex; flex-direction: column; justify-content: flex-start; }
.trip-line-track {
  position: absolute; top: 29px; left: 6px; right: 6px; height: 3px; transform: translateY(-50%);
  background: repeating-linear-gradient(to right, #cbd5e1 0 2px, transparent 2px 9px);
  border-radius: 3px; overflow: visible;
}
.trip-line-fill {
  position: absolute; inset: 0 auto 0 0; width: 0; height: 100%;
  background: #0B5998; border-radius: 3px;
}
.trip.is-go .trip-line-fill { animation: tripDraw 1.6s ease 0.3s forwards; }
@keyframes tripDraw { to { width: 100%; } }
.trip-shuttle {
  position: absolute; top: 29px; left: 0; width: 38px; height: 38px; margin-top: -19px; margin-left: -6px;
  border-radius: 50%; background: #fff; border: 2px solid #cbd5e1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -5px rgba(10, 37, 64, 0.3); opacity: 0;
}
.trip-shuttle img { width: 20px; height: 20px; display: block; }
.trip.is-go .trip-shuttle { animation: tripDrive 1.9s cubic-bezier(0.4, 0, 0.3, 1) 0.2s forwards; }
@keyframes tripDrive {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 1; }
}
.trip-line-labels { position: absolute; top: 44px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.trip-chip { font-size: 0.78rem; font-weight: 700; color: #0a2540; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; padding: 5px 13px; box-shadow: 0 4px 10px -6px rgba(10, 37, 64, 0.25); }
.trip-sub { font-size: 0.72rem; color: #9aa7b6; font-weight: 600; }

/* Mobile: vertical timeline. One continuous connector runs from the parking
   icon centre to the terminal icon centre (drawn on .trip-route, behind the
   pins) so it always reaches both nodes and stays aligned under the icons. */
@media (max-width: 720px) {
  .trip { padding: 20px 18px 22px; }
  .trip-route { grid-template-columns: 58px 1fr; gap: 0; position: relative; }
  .trip-node { flex-direction: row; align-items: center; text-align: left; gap: 12px; grid-column: 1 / span 2; padding: 0; }
  .trip-node strong { font-size: 0.92rem; }
  .trip-node span { max-width: none; }
  .trip-node-start { margin-bottom: 0; }
  .trip-pin { position: relative; z-index: 1; }
  /* pin centre = 29px (58px disc); align the line there, top/bottom inset 29px
     so it spans exactly icon-centre to icon-centre. */
  .trip-route::before {
    content: ''; position: absolute; left: 28px; top: 29px; bottom: 29px; width: 2px; z-index: 0;
    background: repeating-linear-gradient(to bottom, #cbd5e1 0 2px, transparent 2px 9px);
  }
  .trip-route::after {
    content: ''; position: absolute; left: 28px; top: 29px; width: 2px; height: 0; z-index: 0;
    background: #0B5998; border-radius: 2px;
  }
  .trip.is-go .trip-route::after { animation: tripDrawV 1.6s ease 0.3s forwards; }
  @keyframes tripDrawV { to { height: calc(100% - 58px); } }
  /* The desktop middle-line pieces are replaced by the route connector above. */
  .trip-line { grid-column: 1 / span 2; min-height: 0; padding-left: 0; }
  .trip-line-track, .trip-line-fill, .trip-shuttle { display: none; }
  .trip-line-labels { position: relative; top: 0; align-items: flex-start; text-align: left; padding: 10px 0 10px 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .trip-pin { opacity: 1; transform: none; }
  .trip-line-fill { width: 100% !important; animation: none !important; }
  .trip-shuttle { opacity: 1; left: calc(100% - 6px); animation: none !important; }
}

/* "Így működik" right side: real-photo editorial showcase (replaces the phone
   mockup). Real parking imagery + real location + a concrete proof line. */
.hiw-shot {
  position: relative; z-index: 1; margin: 0;
  width: 100%; max-width: 380px; aspect-ratio: 4 / 5;
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(10, 37, 64, 0.5), 0 0 0 1px rgba(10, 37, 64, 0.05);
  animation: hiwShotIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes hiwShotIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.hiw-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hiw-shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 20, 35, 0.8) 0%, rgba(8, 20, 35, 0.18) 40%, transparent 62%);
}
.hiw-shot-loc {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.92); color: #0a2540;
  font-size: 0.74rem; font-weight: 600; padding: 6px 11px 6px 9px; border-radius: 999px;
  backdrop-filter: blur(4px); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.4);
}
.hiw-shot-loc svg { width: 15px; height: 15px; color: #0B5998; flex: none; }
.hiw-shot-tag {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: var(--accent, #0B5998); color: #fff;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; padding: 5px 10px; border-radius: 8px;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5);
}
.hiw-shot-cap {
  position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2;
  color: #fff; font-size: 1.02rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
@media (max-width: 900px) {
  .hiw-shot { max-width: none; aspect-ratio: 16 / 11; }
  .hiw-shot-cap { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hiw-shot { animation: none; }
}

/* ============================================================
   "Így működik" v3 (HowItWorks) — centered header + real-photo
   visual with overlapping card & hand-drawn note, and a vertical
   connected step list. Matches the reference design.
   ============================================================ */
.hiw3 { padding: 5rem 1.5rem 4.5rem; max-width: 1140px; margin: 0 auto; }
.hiw3-head { text-align: center; max-width: 640px; margin: 0 auto 3.4rem; }
.hiw3-eyebrow {
  display: inline-block; font-family: var(--font-script, 'Caveat', cursive);
  font-size: 1.5rem; font-weight: 600; color: #097F9A; line-height: 1; margin-bottom: 0.4rem;
}
.hiw3-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; color: #0a2540; letter-spacing: -0.02em; margin: 0 0 0.7rem; }
.hiw3-head p { font-size: 1.02rem; color: #6b7280; line-height: 1.55; margin: 0; }

.hiw3-body { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

/* Left: photo + overlapping card + note */
/* Left: a layered composition of two real photos + real social proof, instead
   of a mock UI card. */
.hiw3-visual { position: relative; padding: 26px 0 40px; min-height: 380px; }
.hiw3-photo { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 26px 50px -26px rgba(10, 37, 64, 0.5); }
.hiw3-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hiw3-photo-main { width: 74%; aspect-ratio: 4 / 5; margin-left: 0; }
.hiw3-photo-sub {
  position: absolute; right: 0; bottom: 0; width: 50%; aspect-ratio: 4 / 3; z-index: 2;
  border: 5px solid #fff; border-radius: 20px; transform: rotate(3deg);
  box-shadow: 0 20px 40px -20px rgba(10, 37, 64, 0.45);
}
.hiw3-pinpill {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.94); color: #0a2540;
  font-size: 0.72rem; font-weight: 600; padding: 6px 11px 6px 9px; border-radius: 999px;
  backdrop-filter: blur(4px); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.4);
}
.hiw3-pinpill svg { width: 14px; height: 14px; color: #0B5998; flex: none; }
.hiw3-rating {
  position: absolute; left: 8%; bottom: 6px; z-index: 3;
  background: #fff; border-radius: 14px; padding: 11px 16px;
  box-shadow: 0 18px 38px -16px rgba(10, 37, 64, 0.4), 0 0 0 1px rgba(10, 37, 64, 0.04);
}
.hiw3-rating-stars { color: #f5b301; font-size: 0.95rem; letter-spacing: 1px; line-height: 1; }
.hiw3-rating-num { font-size: 0.74rem; color: #6b7280; margin-top: 4px; }
.hiw3-rating-num strong { color: #0a2540; font-size: 0.86rem; }
.hiw3-annot {
  position: absolute; top: 0; right: 2%; z-index: 4;
  font-family: var(--font-script, 'Caveat', cursive); font-size: 1.5rem; font-weight: 600;
  color: #0B5998; line-height: 1; transform: rotate(-6deg);
}
.hiw3-annot svg { position: absolute; top: 22px; right: 26px; width: 56px; height: 46px; color: #0B5998; transform: rotate(10deg); }

/* Right: vertical connected steps */
.hiw3-steps { list-style: none; margin: 0; padding: 0; }
.hiw3-step { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding-bottom: 16px; }
.hiw3-step:last-child { padding-bottom: 0; }
.hiw3-num { display: flex; flex-direction: column; align-items: center; position: relative; padding-top: 14px; }
.hiw3-num-n { font-size: 2.1rem; font-weight: 800; color: #ccd5e1; line-height: 1; }
.hiw3-num-l { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #ccd5e1; margin-top: 3px; }
.hiw3-step:not(:last-child) .hiw3-num::after {
  content: ''; position: absolute; top: 74px; bottom: -16px; left: 50%; transform: translateX(-50%);
  border-left: 2px dashed #d8dee8;
}
.hiw3-card { display: flex; align-items: center; gap: 16px; background: #f5f5fb; border-radius: 18px; padding: 16px 20px; }
.hiw3-card-ic { width: 58px; height: 58px; object-fit: contain; flex: none; filter: drop-shadow(0 6px 9px rgba(10, 37, 64, 0.12)); }
.hiw3-card-copy h3 { font-size: 1.06rem; font-weight: 700; color: #0a2540; margin: 0 0 0.25rem; letter-spacing: -0.01em; }
.hiw3-card-copy p { font-size: 0.9rem; color: #8a94a6; line-height: 1.5; margin: 0; }

@media (max-width: 880px) {
  .hiw3 { padding: 3.5rem 1.25rem 3rem; }
  .hiw3-head { margin-bottom: 2.4rem; }
  .hiw3-body { grid-template-columns: 1fr; gap: 3rem; }
  .hiw3-visual { max-width: 440px; margin: 0 auto; width: 100%; min-height: 360px; }
  .hiw3-photo-main { width: 72%; }
  .hiw3-rating { left: 2%; }
  .hiw3-step { grid-template-columns: 44px 1fr; gap: 12px; }
  .hiw3-num-n { font-size: 1.7rem; }
  .hiw3-card { padding: 14px 16px; gap: 13px; }
  .hiw3-card-ic { width: 50px; height: 50px; }
}

/* Operator (Partner) portal demo banner — top of the main content area. */
.op-demo-banner {
  display: flex; align-items: center; gap: 10px;
  background: #eef4fb; color: #334155;
  border-bottom: 1px solid #dbe6f3;
  padding: 10px 24px; font-size: 0.84rem; line-height: 1.4;
}
.op-demo-banner i[data-lucide], .op-demo-banner svg { width: 16px; height: 16px; color: #0b5998; flex: none; }
.op-demo-banner a { color: #0b5998; font-weight: 600; text-decoration: none; }
.op-demo-banner a:hover { text-decoration: underline; }

/* ============================================================
   Skeleton loading (own component, no Tailwind / no library)
   Gentle animate-pulse style opacity animation on gray blocks.
   ============================================================ */
.skeleton {
  display: block;
  background-color: #e5e7eb;
  border-radius: 8px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-circle { border-radius: 9999px; }
.skeleton-lines { display: block; }
.skeleton-text { height: 0.78em; width: 100%; margin-bottom: 0.55em; border-radius: 4px; }
.skeleton-text:last-child { margin-bottom: 0; }
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}
.sr-only-loading {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Hero placeholder block on the homepage loading state */
.skeleton-hero { min-height: 220px; border-radius: 0; }
.skeleton-search-card { height: 132px; border-radius: 16px; }

/* ============================================================
   Bookings / list filter bar — clean soft-filled design.
   Kept in this cache-busted stylesheet (?v=) so visual tweaks
   reliably reach already-open browsers. Overrides any earlier
   .op-filters rules (this sheet loads last).
   ============================================================ */
.op-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 14px;
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(16, 24, 40, 0.05);
    padding: 18px 20px;
}
@media (min-width: 720px) {
    .op-filters { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
}
.op-filters .booking-field {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}
.op-filters .booking-field label {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 600;
    color: #667085;
    padding-left: 2px;
    text-transform: none;
    letter-spacing: 0;
}
.op-filters .booking-field input,
.op-filters .booking-field select {
    width: 100%;
    height: 46px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    padding: 0 14px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a2433;
    background: #f3f5f8;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.op-filters .booking-field input:hover,
.op-filters .booking-field select:hover {
    background: #eceff3;
}
.op-filters .booking-field select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 16px;
}
.op-filters .booking-field input:focus,
.op-filters .booking-field select:focus {
    outline: none;
    background: #fff;
    border-color: #01204A;
    box-shadow: 0 0 0 4px rgba(1, 32, 74, 0.08);
}
.op-filters .booking-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
}
.op-filters .booking-field input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 0.85;
}
.op-filters .op-btn {
    height: 46px;
    border-radius: 12px;
    padding: 0 1.6rem;
}
@media (max-width: 719px) {
    /* button spans the full grid width below the stacked fields */
    .op-filters .op-btn { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 640px) {
    .op-filters { padding: 16px; gap: 12px; }
}

/* ============================================================
   Custom bookings filter (client component .bf2): fully styled
   controls, custom dropdowns + calendar (no native browser chrome).
   Cache-busted stylesheet so it reliably reaches open browsers.
   ============================================================ */
.bf2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 14px;
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(16, 24, 40, 0.05);
    padding: 18px 20px;
}
@media (min-width: 860px) {
    .bf2 { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
}
.bf2-field { position: relative; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bf2-label { font-size: 0.74rem; font-weight: 600; color: #667085; padding-left: 2px; }
.bf2-control {
    display: flex; align-items: center; gap: 9px;
    width: 100%; height: 48px;
    border: 1.5px solid #e7eaee; border-radius: 12px;
    padding: 0 14px; background: #fff;
    font-size: 0.95rem; font-weight: 500; color: #1a2433;
    cursor: pointer; text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.bf2-control:hover { border-color: #d4d9df; background: #fafbfc; }
.bf2-field.is-open .bf2-control { border-color: #01204A; box-shadow: 0 0 0 4px rgba(1, 32, 74, 0.08); }
.bf2-control-ic { color: #98a2b3; flex: none; }
.bf2-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf2-placeholder { color: #9aa4b2; font-weight: 400; }
.bf2-caret { color: #98a2b3; flex: none; transition: transform 0.15s; }
.bf2-field.is-open .bf2-caret { transform: rotate(180deg); }
.bf2-pop {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
    min-width: 100%;
    background: #fff; border: 1px solid #eaedf0; border-radius: 14px;
    box-shadow: 0 14px 36px rgba(16, 24, 40, 0.16);
    padding: 8px;
    animation: bf2-pop-in 0.12s ease;
}
@keyframes bf2-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.bf2-menu { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.bf2-item {
    text-align: left; padding: 9px 12px; border-radius: 9px;
    border: 0; background: transparent; cursor: pointer;
    font-size: 0.92rem; color: #344054; white-space: nowrap;
    transition: background 0.12s;
}
.bf2-item:hover { background: #f3f5f8; }
.bf2-item.is-sel { background: #eaf0f8; color: #01204A; font-weight: 600; }
.bf2-cal { width: 270px; }
.bf2-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; }
.bf2-cal-title { font-weight: 700; font-size: 0.92rem; color: #1a2433; }
.bf2-cal-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    border: 0; background: #f3f5f8; color: #475467; cursor: pointer;
}
.bf2-cal-nav:hover { background: #e8ebef; }
.bf2-cal-nav svg { width: 16px; height: 16px; }
.bf2-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bf2-cal-dow { margin-bottom: 4px; }
.bf2-cal-dowcell { text-align: center; font-size: 0.68rem; font-weight: 600; color: #98a2b3; padding: 2px 0; }
.bf2-cal-day {
    aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; border-radius: 8px; cursor: pointer;
    font-size: 0.85rem; color: #344054;
    transition: background 0.12s;
}
.bf2-cal-day:hover { background: #f3f5f8; }
.bf2-cal-day.is-today { color: #01204A; font-weight: 700; }
.bf2-cal-day.is-sel { background: #01204A; color: #fff; font-weight: 600; }
.bf2-clear {
    display: block; width: 100%; margin-top: 6px; padding: 8px;
    border: 0; border-top: 1px solid #f0f2f4; background: transparent;
    color: #475467; font-size: 0.85rem; cursor: pointer;
}
.bf2-clear:hover { color: #01204A; }
.bf2-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    height: 48px; align-self: end;
    background: #01204A; color: #fff; border: 0; border-radius: 12px;
    padding: 0 1.6rem; font-weight: 600; font-size: 0.95rem; cursor: pointer;
    white-space: nowrap; transition: background 0.15s, transform 0.05s;
}
.bf2-submit:hover { background: #0a2f63; }
.bf2-submit:active { transform: translateY(1px); }
.bf2-submit svg { width: 16px; height: 16px; }
@media (max-width: 859px) {
    .bf2-submit { grid-column: 1 / -1; width: 100%; }
}

/* ============================================================
   Statistics SVG charts (.sc-*) — dependency-free area/bar
   charts with axes, gridlines and a hover tooltip.
   ============================================================ */
.sc-wrap { position: relative; width: 100%; }
.sc-svg { display: block; width: 100%; height: auto; font-family: inherit; }
.sc-tooltip {
    position: absolute; top: 8px; transform: translateX(-50%);
    background: #01204A; color: #fff;
    padding: 6px 11px; border-radius: 9px;
    font-size: 0.82rem; line-height: 1.25;
    pointer-events: none; white-space: nowrap;
    box-shadow: 0 8px 22px rgba(1, 32, 74, 0.28); z-index: 5;
}
.sc-tip-day { font-size: 0.68rem; opacity: 0.72; }
.sc-tip-val { font-weight: 700; }

/* ============================================================
   Modern date picker (.dp-*) — replaces native <input type=date>
   with a styled control + custom month-grid popup.
   ============================================================ */
.dp { position: relative; display: inline-block; }
.dp-control {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 12px;
    border: 1px solid #e3e6ea; border-radius: 10px;
    background: #fff; font: inherit; font-size: 0.92rem; color: #1a2433;
    cursor: pointer; white-space: nowrap;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.dp-control:hover { border-color: #d4d9df; }
.dp.is-open .dp-control { border-color: #01204A; box-shadow: 0 0 0 3px rgba(1, 32, 74, 0.08); }
.dp-ic { color: #98a2b3; flex: none; }
.dp-placeholder { color: #9aa4b2; }
.dp-caret { color: #98a2b3; flex: none; margin-left: 2px; transition: transform 0.15s; }
.dp.is-open .dp-caret { transform: rotate(180deg); }
.dp-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    background: #fff; border: 1px solid #eaedf0; border-radius: 14px;
    box-shadow: 0 14px 36px rgba(16, 24, 40, 0.16); padding: 8px;
    animation: bf2-pop-in 0.12s ease;
}
.dp-cal { width: 264px; }
.dp-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; }
.dp-cal-title { font-weight: 700; font-size: 0.9rem; color: #1a2433; }
.dp-cal-nav { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 0; background: #f3f5f8; color: #475467; cursor: pointer; }
.dp-cal-nav:hover { background: #e8ebef; }
.dp-cal-nav svg { width: 16px; height: 16px; }
.dp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-cal-dow { margin-bottom: 4px; }
.dp-cal-dowcell { text-align: center; font-size: 0.66rem; font-weight: 600; color: #98a2b3; padding: 2px 0; }
.dp-cal-day { aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font-size: 0.84rem; color: #344054; transition: background 0.12s; }
.dp-cal-day:hover { background: #f3f5f8; }
.dp-cal-day.is-today { color: #01204A; font-weight: 700; }
.dp-cal-day.is-sel { background: #01204A; color: #fff; font-weight: 600; }
.dp-clear { display: block; width: 100%; margin-top: 6px; padding: 8px; border: 0; border-top: 1px solid #f0f2f4; background: transparent; color: #475467; font-size: 0.85rem; cursor: pointer; }
.dp-clear:hover { color: #01204A; }

/* Custom select dropdown menu (reuses .dp control/popup look) */
.dp-menu { display: flex; flex-direction: column; gap: 2px; min-width: 100%; max-height: 320px; overflow-y: auto; }
.dp-item {
    text-align: left; padding: 9px 14px; border-radius: 9px;
    border: 0; background: transparent; cursor: pointer;
    font-size: 0.92rem; color: #344054; white-space: nowrap;
    transition: background 0.12s;
}
.dp-item:hover { background: #f3f5f8; }
.dp-item.is-sel { background: #eaf0f8; color: #01204A; font-weight: 600; }

/* "Hamarosan!" mobile-app promo banner (above the footer). The phone is absolutely
   positioned and overhangs the card top + bottom; the large bottom padding keeps the
   overhang on white space so it never collides with the footer (desktop). */
.app-promo { padding: 48px 0 130px; }
.app-promo-card {
    position: relative;
    background: #01204A;
    border-radius: 30px;
    padding: 60px 64px;
    min-height: 300px;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 40px;
    box-shadow: 0 30px 70px rgba(1, 32, 74, 0.28);
}
.app-promo-left { flex: 1 1 auto; min-width: 0; }
.app-promo-title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    line-height: 1.04;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}
.app-promo-sub {
    color: #b9cae3;
    font-size: 1.02rem;
    line-height: 1.5;
    margin: 0 0 30px;
    max-width: 400px;
}
.app-promo-badges { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.app-promo-badge { display: inline-block; cursor: default; }
.app-promo-badge img { height: 50px; width: auto; display: block; }
.app-promo-phone-wrap { position: relative; flex: none; width: 240px; align-self: stretch; }
/* The phone PNG is already tilted, so no extra rotation — just let it pop out
   vertically beyond the card edges. */
.app-promo-phone-wrap img {
    position: absolute;
    right: -6px;
    top: 50%;
    width: 280px;
    height: auto;
    transform: translateY(-50%);
    filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.35));
}
@media (max-width: 900px) {
    .app-promo { padding: 32px 0 64px; }
    .app-promo-card { flex-direction: column; text-align: center; padding: 46px 26px 0; gap: 4px; overflow: visible; }
    .app-promo-left { width: 100%; }
    .app-promo-badges { align-items: center; }
    .app-promo-phone-wrap { position: static; width: auto; align-self: center; }
    /* The phone overhangs the bottom of the navy card (matching the reference).
       Its canvas has ~30px transparent bottom at this width, so the negative
       margin closes that gap and lets the device tip overhang well onto the page. */
    .app-promo-phone-wrap img {
        position: static;
        transform: none;
        width: 280px;
        margin: 14px auto -78px;
    }
}

/* 404 page — brand-navy, modern, with header + footer */
.notfound {
    min-height: 56vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 0 88px;
    background: radial-gradient(120% 90% at 50% -10%, #eef3fb 0%, #f8fafc 60%);
}
.notfound-inner { text-align: center; }
.notfound-code {
    font-size: clamp(5rem, 15vw, 9.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #01204A;
}
.notfound-title {
    font-size: clamp(1.4rem, 3.4vw, 2.1rem);
    font-weight: 700;
    color: #01204A;
    margin: 6px 0 12px;
}
.notfound-text {
    color: #475569;
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 460px;
    margin: 0 auto 30px;
}
.notfound-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.notfound-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.notfound-btn-primary { background: #01204A; color: #fff; }
.notfound-btn-primary:hover { background: #01193b; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(1, 32, 74, 0.22); }
.notfound-btn-secondary { background: #fff; color: #01204A; border: 1.5px solid #01204A; }
.notfound-btn-secondary:hover { background: #eef3fb; transform: translateY(-1px); }