/* AirCalendar — shared stylesheet (public + admin)
   Modal, date-range picker, guest picker, buttons, utility classes.
   Loaded BEFORE admin.css or public.css so either can override. */

/* Icons — SVG rendered by the icon() helper. Must not shrink inside
   flex containers, otherwise they collapse to near-zero. */
.icon { flex-shrink: 0; vertical-align: -2px; }

/* ============================================================
   Date picker — single-date selector with month/year nav.
   ============================================================ */
.datepicker { position: relative; display: block; width: 100%; }
.datepicker-input { width: 100%; cursor: pointer; }
.datepicker-input:read-only { cursor: pointer; }
.datepicker-pop {
    position: fixed;
    z-index: 9999;
    width: 266px;
    background: var(--panel, var(--surface, #fff));
    border: 1px solid var(--line, var(--border, #e2e8f0));
    border-radius: var(--radius, 8px);
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    padding: 12px;
    overflow: hidden;
    box-sizing: border-box;
}
.datepicker-pop[hidden] { display: none; }
.datepicker-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.datepicker-arrow {
    width: 28px; height: 28px;
    border: 0; background: transparent;
    cursor: pointer; font-size: 18px; color: var(--text);
    border-radius: var(--radius, 6px);
    display: flex; align-items: center; justify-content: center;
    padding: 0; box-shadow: none;
}
.datepicker-arrow:hover { background: var(--bg-raised, var(--surface-2, #f1f5f9)); }
.datepicker-title {
    border: 0; background: transparent;
    font: inherit; font-size: 14px; font-weight: 600;
    color: var(--text, #0f172a); cursor: pointer;
    padding: 4px 10px; border-radius: var(--radius, 6px);
    box-shadow: none;
}
.datepicker-title:hover { background: var(--bg-raised, var(--surface-2, #f1f5f9)); }
.datepicker-cal[hidden] { display: none; }
.datepicker-jump {
    position: relative;
}
.datepicker-jump[hidden] { display: none; }
.datepicker-jump-close {
    position: absolute; top: 0; right: 0;
    width: 24px; height: 24px;
    border: 0; background: transparent;
    cursor: pointer; font-size: 16px; color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px; padding: 0; box-shadow: none;
}
.datepicker-jump-close:hover { background: var(--bg-raised, var(--surface-2)); color: var(--text); }
.datepicker-jump-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 12px;
}
.datepicker-jump-months button {
    padding: 6px 4px; border: 0; background: transparent;
    border-radius: var(--radius, 6px); cursor: pointer;
    font: inherit; font-size: 13px; color: var(--text);
    transition: background .1s; box-shadow: none;
}
.datepicker-jump-months button:hover { background: var(--bg-raised, var(--surface-2, #f1f5f9)); }
.datepicker-jump-months button.is-active { background: var(--text); color: var(--panel, #fff); }
.datepicker-jump-year {
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.datepicker-jump-year span { font-size: 15px; font-weight: 600; min-width: 50px; text-align: center; }
.datepicker-jump-year button {
    border: 0; background: transparent; cursor: pointer;
    color: var(--text); font-size: 18px; padding: 4px 8px;
    border-radius: var(--radius, 6px); transition: background .1s; box-shadow: none;
}
.datepicker-jump-year button:hover { background: var(--bg-raised, var(--surface-2, #f1f5f9)); }
.datepicker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
    color: var(--muted, #94a3b8);
    font-size: 11px;
    text-align: center;
}
.datepicker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.datepicker-day {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    color: var(--text, #0f172a);
    padding: 0;
    margin: 0 auto;
}
.datepicker-day:hover:not(.is-disabled) { background: var(--bg-raised, var(--surface-2, #f1f5f9)); }
.datepicker-day.is-selected { background: var(--text, #0f172a); color: var(--panel, #fff); }
.datepicker-day.is-disabled { color: var(--muted, #94a3b8); opacity: .35; cursor: not-allowed; }

/* Base form field styling used everywhere (admin, public, checkout). */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-raised, var(--surface-2, #f1f5f9));
    border: 1px solid var(--line, var(--border, #e2e8f0));
    border-radius: var(--radius, 8px);
    color: var(--text, #0f172a);
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    transition: border-color .12s;
    box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--text, var(--border, #94a3b8));
}

/* Styled checkboxes — larger, accent coloured */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border, #cbd5e1);
    border-radius: 5px;
    background: var(--surface, #fff);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background .12s, border-color .12s;
}
input[type="checkbox"]:checked {
    background: var(--accent, var(--brand-accent, #2563eb));
    border-color: var(--accent, var(--brand-accent, #2563eb));
}
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent, var(--brand-accent, #2563eb));
    outline-offset: 2px;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 14px 0 4px;
}
label:first-child { margin-top: 0; }

/* ============================================================
   Shared utility classes
   ============================================================ */
.muted   { color: var(--muted); }
.small   { font-size: 12px; }
.hstack  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

input + input, select + input, input + select { margin-top: 6px; }
.row   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row + .row, input + .row, select + .row, textarea + .row { margin-top: 14px; }
.row label:first-child { margin-top: 0; }

.form-hint { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; }

/* ============================================================
   Cards (base only)
   ============================================================ */
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

/* ============================================================
   Badge
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 999px;
    line-height: 1.4;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--muted);
    letter-spacing: .01em;
}
.badge.ok      { background: rgba(134,239,172,.12); color: var(--ok);   border-color: rgba(134,239,172,.3); }
.badge.off     { background: var(--panel-2);        color: var(--muted); border-color: var(--line); }
.badge.pending { background: rgba(252,211,77,.12);  color: var(--warn); border-color: rgba(252,211,77,.3); }
.badge.ran     { background: rgba(134,239,172,.12); color: var(--ok);   border-color: rgba(134,239,172,.3); }
html[data-theme="light"] .badge.ok      { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
html[data-theme="light"] .badge.pending { background: #fef3c7; color: #92400e; border-color: #fde68a; }
html[data-theme="light"] .badge.ran     { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

/* ============================================================
   Empty state
   ============================================================ */
.empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--muted);
}
.empty-title { font-family: var(--font-heading); font-size: 18px; color: var(--text); margin-bottom: 8px; }

/* ============================================================
   Toggle switch
   ============================================================ */
.toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    margin: 12px 0;
    font-size: 14px;
}
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.toggle-track {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 11px;
    transition: background .18s, border-color .18s;
    flex-shrink: 0;
}
.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--text);
    border-radius: 50%;
    transition: transform .18s, background .18s;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.toggle input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); background: var(--accent-ink); }
.toggle input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px var(--accent-ring); }
.toggle-text { color: var(--text); }

/* ============================================================
   Buttons
   ============================================================ */
button, .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    padding: 7px 14px;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
    box-shadow: var(--shadow-sm);
    line-height: 1.4;
    box-sizing: border-box;
}
button:hover, .btn:hover {
    filter: brightness(1.12);
    text-decoration: none;
}
html[data-theme="light"] button:not(.secondary):not(.ghost):not(.danger):not(.auth-sublink):not(.link-btn):not(.link-button):not(.tab-trigger):not(.user-menu-item):not([data-theme-toggle]):hover,
html[data-theme="light"] .btn:not(.secondary):not(.ghost):not(.danger):not(.auth-sublink):not(.link-btn):not(.link-button):not(.tab-trigger):hover {
    filter: none;
    background: #000;
    border-color: #000;
    color: #fff;
}
button:disabled, .btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

button.secondary, .btn.secondary {
    background: var(--bg-raised);
    color: var(--text);
    border-color: var(--line);
}
button.secondary:hover, .btn.secondary:hover {
    background: var(--panel-2);
    border-color: var(--subtle);
    filter: none;
}
html[data-theme="light"] button.secondary:hover, html[data-theme="light"] .btn.secondary:hover {
    background: var(--panel-2);
    border-color: var(--muted);
}

button.ghost, .btn.ghost {
    background: transparent;
    color: var(--text);
    border-color: transparent;
    box-shadow: none;
    padding: 6px 10px;
}
button.ghost:hover, .btn.ghost:hover { background: var(--accent-soft); filter: none; }

button.danger, .btn.danger { background: var(--err); color: #fff; border-color: var(--err); }
html[data-theme="dark"] button.danger, html[data-theme="dark"] .btn.danger { color: #1a1a1a; }

button.small, .btn.small { padding: 5px 10px; font-size: 12px; height: 28px; }
button.block, .btn.block { width: 100%; justify-content: center; padding: 11px; height: auto; }

button.btn-icon, .btn.btn-icon {
    padding: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    justify-content: center;
}
button.btn-icon.small, .btn.btn-icon.small { width: 28px; height: 28px; }

/* ============================================================
   Modal — global dialog. Desktop: centred fade. Mobile: bottom sheet.
   Markup is generated by JS (window.Modal); these are the styles only.
   ============================================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1000;
    padding: 24px;
}
.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
html[data-theme="light"] .modal-backdrop { background: rgba(15, 15, 15, .35); }

.modal {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    max-width: 460px;
    width: 100%;
    transform: translateY(12px) scale(.98);
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
    box-shadow: var(--shadow);
    color: var(--text);
}
.modal-backdrop.is-open .modal { transform: translateY(0) scale(1); }

.modal-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 8px;
    color: var(--text);
}
.modal-body {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 20px;
}
.modal-body:not(:has(*)) { white-space: pre-line; }
.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
}
.modal-actions button.secondary {
    border-color: var(--subtle);
}
/* Opt-in left-aligned action — pushes itself to the start of the
   flex row so the rest of the actions stay on the right. Used by
   the System information modal's "Email log to support" sitting
   alongside the primary "Close". */
.modal-actions button.is-left {
    margin-right: auto;
}

/* Mobile / iOS — bottom sheet */
@media (max-width: 640px) {
    .modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }
    .modal {
        max-width: none;
        width: 100%;
        border-radius: 18px 18px 0 0;
        border-bottom: 0;
        padding: 20px 20px max(24px, env(safe-area-inset-bottom)) 20px;
        transform: translateY(100%);
    }
    .modal-backdrop.is-open .modal { transform: translateY(0); }
    .modal::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        background: var(--line);
        border-radius: 2px;
        margin: 0 auto 14px;
    }
}

.modal-large { max-width: 760px; }

/* ============================================================
   Date-range picker — trigger + two-month calendar popover.
   ============================================================ */
.daterange { position: relative; display: block; }

.daterange-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 11px;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
    text-align: left;
    box-shadow: none;
}
.daterange-trigger:hover  { border-color: var(--subtle); background: var(--bg-raised); filter: none; }
.daterange-trigger:focus,
.daterange.is-open .daterange-trigger {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.daterange-value { flex: 1; }
.daterange-value.is-placeholder { color: var(--muted); }
.daterange-sep { color: var(--muted); }

.daterange-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    padding: 12px;
    width: 440px;
    max-width: calc(100vw - 32px);
}
.daterange-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.daterange-months {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    color: var(--text);
}
.daterange-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.daterange-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
    font-size: 9px;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
/* `minmax(0, 1fr)` (not plain `1fr`) is the fix for the mobile
   overflow: a bare 1fr resolves to minmax(auto, 1fr) which uses the
   cell's min-content as the floor. On narrow viewports that forces
   the 7-cell row wider than the popover, and `.daterange-day.in-range`
   (the unavailable / selected-range highlight) then paints past the
   popover's right edge because the cell itself has overflowed. With
   minmax(0, 1fr) the cells can shrink to fit the container. */
.daterange-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.daterange-day {
    min-width: 0;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--text);
}
.daterange-day.blank { cursor: default; }
.daterange-day:not(.blank):not(.disabled):hover { background: var(--accent-soft); }
.daterange-day.disabled { color: var(--subtle); cursor: not-allowed; }
.daterange-day.in-range { background: var(--accent-soft); border-radius: 0; }
.daterange-day.selected-start,
.daterange-day.selected-end {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}
.daterange-day.selected-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.daterange-day.selected-end   { border-top-left-radius:  0; border-bottom-left-radius:  0; }
.daterange-day.selected-start.selected-end { border-radius: 3px; }

.daterange-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}

/* Compact mode — single month, fits within booking box. */
[data-compact] .daterange-popover { width: 100%; min-width: 260px; }
[data-compact] .daterange-panels { grid-template-columns: 1fr; }
[data-compact] .daterange-months { grid-template-columns: 1fr; }

.daterange-presets {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}
.daterange-preset {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    color: var(--text);
    transition: background .1s, border-color .1s;
}
.daterange-preset:hover {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}

@media (max-width: 640px) {
    .daterange-popover { width: calc(100vw - 32px); }
    .daterange-panels  { grid-template-columns: 1fr; }
    .daterange-months  { grid-template-columns: 1fr; }
    .daterange-months > span:nth-child(2) { display: none; }
}

/* ============================================================
   Guest picker — trigger + popover with stepper rows.
   ============================================================ */
.guestpicker { position: relative; display: block; width: 100%; }
.gp-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 11px;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    box-shadow: none;
}
.gp-trigger:hover  { filter: none; border-color: var(--subtle); background: var(--bg-raised); }
.gp-trigger:focus,
.guestpicker.is-open .gp-trigger {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.gp-caret { opacity: .7; flex-shrink: 0; }
.gp-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    min-width: 280px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
    padding: 10px 14px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.gp-pop[hidden] { display: none; }
.gp-pop.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.gp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}
.gp-row:first-child { border-top: 0; }
.gp-row-text { flex: 1; min-width: 0; }
.gp-row-label { font-weight: 500; font-size: 14px; color: var(--text); }
.gp-row-sub { font-size: 12px; color: var(--muted); }
.gp-stepper { display: inline-flex; align-items: center; gap: 8px; }
.gp-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    box-shadow: none;
}
.gp-step:hover { filter: none; border-color: var(--text); background: transparent; }
.gp-step:disabled { opacity: .3; cursor: not-allowed; }
.gp-count {
    min-width: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}

/* ============================================================
   Availability calendar (custom, vanilla JS)
   ============================================================ */

.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    position: relative;
}
.cal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    background: none;
    border: 0;
    padding: 4px 12px;
    border-radius: var(--radius, 8px);
    cursor: pointer;
    color: var(--text);
    font: inherit;
    font-size: 18px;
    font-weight: 600;
    transition: background .12s;
}
.cal-title:hover { background: var(--bg-raised, var(--surface-2, #f1f5f9)); }
.cal-jump {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    background: var(--panel, var(--surface, #fff));
    border: 1px solid var(--line, var(--border, #e2e8f0));
    border-radius: var(--radius, 8px);
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    padding: 16px;
    width: 260px;
}
.cal-jump[hidden] { display: none; }
.cal-jump-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 12px;
}
.cal-jump-months button {
    padding: 6px 4px;
    border: 0;
    background: transparent;
    border-radius: var(--radius, 6px);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    transition: background .1s;
}
.cal-jump-months button:hover { background: var(--bg-raised, var(--surface-2, #f1f5f9)); }
.cal-jump-months button.is-active { background: var(--text); color: var(--panel, #fff); }
.cal-jump-year {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.cal-jump-year span {
    font-size: 15px;
    font-weight: 600;
    min-width: 50px;
    text-align: center;
}
.cal-jump-year button {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--text);
    font-size: 18px;
    padding: 4px 8px;
    border-radius: var(--radius, 6px);
    transition: background .1s;
}
.cal-jump-year button:hover { background: var(--bg-raised, var(--surface-2, #f1f5f9)); }
.cal-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-muted);
}
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--surface-2);
}
.cal-legend-item.type-guest       .cal-legend-dot { background: var(--cal-guest, #3b82f6); }
.cal-legend-item.type-owner       .cal-legend-dot { background: var(--cal-owner, #8b5cf6); }
.cal-legend-item.type-maintenance .cal-legend-dot { background: var(--cal-maintenance, #f59e0b); }
.cal-legend-item.type-imported    .cal-legend-dot { background: var(--cal-imported, #64748b); }

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}
.cal-weekdays > div {
    background: var(--surface-2);
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    /* overflow: hidden clips at the GRID boundary only — segments that
       bleed ±1px into a neighbouring CELL (role-arrival / role-full /
       role-departure) are still visible because that sideways bleed
       stays inside the grid. What it stops is the last-column segment
       extending past the grid's right edge on mobile Safari (border-
       radius alone doesn't mask overflow in WebKit when parents are
       position:static). */
    overflow: hidden;
}
.cal-day {
    position: relative;
    background: var(--surface);
    min-height: 100px;
    padding: 6px 8px 0;
    cursor: pointer;
    transition: background .08s;
    border-right:  1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.cal-day:nth-child(7n)      { border-right: 0; }
.cal-day:nth-last-child(-n+7) { border-bottom: 0; }
.cal-day:hover { background: var(--surface-2); }
.cal-day.out   { background: color-mix(in srgb, var(--surface) 70%, var(--surface-2)); }
.cal-day.today .cal-day-num {
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 999px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cal-day.selecting { background: rgba(255,255,255,.15); outline: 2px solid var(--accent); outline-offset: -2px; z-index: 2; }

.cal-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
}
.cal-day-num {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}
.cal-day.out .cal-day-num { color: var(--muted); }
.cal-day-price {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Event segments — absolute-positioned with a 1px negative bleed on the
   sides that continue into a neighbouring cell, so multi-night bookings
   visually cross over the cell border. The overlay itself is z-indexed
   above the cell's right/bottom borders. */
.cal-day-events {
    position: absolute;
    left: 0; right: 0;
    top: 34px;
    height: 22px;
    z-index: 1;
    pointer-events: none;
}
.cal-seg {
    position: absolute;
    top: 0;
    height: 22px;
    border: 0;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 22px;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: none;
    border-radius: 0;
    transition: filter .1s;
    pointer-events: auto;
}
.cal-seg:hover { filter: brightness(1.1); }
.cal-seg-label { display: inline-block; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Arrival: afternoon-only — diagonal on the left, right edge bleeds
   over the cell border to meet the next day's segment. */
.cal-seg.role-arrival {
    left: 0;
    right: -1px;
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 30% 100%);
    padding-left: 52%;
}
/* Departure: morning-only — diagonal on the right, left edge bleeds left
   to cover the border from the preceding cell's full segment. */
.cal-seg.role-departure {
    left: -1px;
    right: 0;
    clip-path: polygon(0 0, 50% 0, 70% 100%, 0 100%);
    padding: 0;
}
/* Middle nights: full-width, bleeding over BOTH borders so a run of nights
   reads as one continuous bar crossing the grid lines. */
.cal-seg.role-full {
    left: -1px;
    right: -1px;
}

.cal-seg.type-guest       { background: var(--cal-guest, #3b82f6); color: #fff; }
.cal-seg.type-owner       { background: var(--cal-owner, #8b5cf6); color: #fff; }
.cal-seg.type-maintenance { background: var(--cal-maintenance, #f59e0b); color: #fff; }
.cal-seg.type-imported    { background: var(--cal-imported, #64748b); color: #fff; }


/* Date-range picker styles moved to shared.css */

/* ============================================================
   Calendar hover popover
   ============================================================ */

.cal-popover {
    position: fixed;
    z-index: 80;
    width: 280px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,.32);
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cal-popover[hidden] { display: none; }
.cal-popover-close {
    position: absolute;
    top: 6px; right: 6px;
    width: 22px; height: 22px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.cal-popover-close:hover { background: var(--surface-2); color: var(--text); }
.cal-popover-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 4px;
    padding-right: 24px;
}
.cal-popover-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
}
.cal-popover-dot.type-guest       { background: var(--cal-guest, #3b82f6); }
.cal-popover-dot.type-owner       { background: var(--cal-owner, #8b5cf6); }
.cal-popover-dot.type-maintenance { background: var(--cal-maintenance, #f59e0b); }
.cal-popover-dot.type-imported    { background: var(--cal-imported, #64748b); }
.cal-popover-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}
.cal-popover-dates {
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}
.cal-popover-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
    border-top: 1px dashed var(--line);
}
.cal-popover-row:first-of-type { border-top: 0; }
.cal-popover-k {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;
}
.cal-popover-v {
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}
.cal-popover-notes {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--text);
    white-space: pre-wrap;
}

/* ============================================================
   Star rating colours — used on both the public property page and
   the admin reviews list + view modal. Lives in shared.css so both
   surfaces pick it up without duplicating the rule.
   ============================================================ */
.star-on  { color: #f59e0b; }
.star-off { color: var(--border, #e5e7eb); }

/* ============================================================
   Form validation — field-level error messages and invalid-input
   border. Shared across admin forms and public forms (contact,
   enquiry) so the look is consistent everywhere.
   ============================================================ */
.field-error {
    color: var(--err, #dc2626);
    font-size: 12.5px;
    margin: 4px 0 0;
    line-height: 1.4;
}
input.is-invalid, select.is-invalid, textarea.is-invalid {
    border-color: var(--err, #dc2626);
}
input.is-invalid:focus, select.is-invalid:focus, textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(252, 165, 165, .22);
    border-color: var(--err, #dc2626);
    outline: none;
}

/* ============================================================
   Radar marker — the "general area" visualisation that replaces
   a Mapbox pin when a property has "Show exact location" off.
   Used on both the public property page AND the back-office
   property form for a live preview of the public behaviour.
   ============================================================ */
.prop-map-radar {
    position: relative;
    width: 18px;
    height: 18px;
    pointer-events: none;
}
.prop-map-radar-ring {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* Hollow ring, not a filled disc — so at scale(1) we don't paint a
       solid dot that reads as "pin". The ring expands from this start
       size while fading to nothing. */
    background: transparent;
    border: 2px solid var(--brand-accent, var(--accent, #2563eb));
    opacity: .55;
    transform: scale(1);
    animation: prop-radar-pulse 2.6s cubic-bezier(.17, .67, .45, 1) infinite;
}
.prop-map-radar-ring:nth-child(2) { animation-delay: .86s; }
.prop-map-radar-ring:nth-child(3) { animation-delay: 1.72s; }
@keyframes prop-radar-pulse {
    0%   { transform: scale(1);   opacity: .55; }
    80%  { opacity: 0; }
    100% { transform: scale(6);   opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .prop-map-radar-ring { animation: none; transform: scale(3.5); opacity: .25; }
}