/*
 * Space detail page (resources/views/frontend/spaces/show.blade.php).
 *
 * Hand-written rather than Tailwind: the public site loads a purged bundle
 * (public/css/index.css) from an old build, so utility classes that were not in use
 * then do not exist, and the ones the booking script sets on slot cells cannot be
 * relied on. Everything this page needs is here, scoped under `.sd`.
 */

.sd {
    --sd-ink: #0f172a;
    --sd-ink-2: #334155;
    --sd-muted: #64748b;
    --sd-faint: #94a3b8;
    --sd-line: #e2e8f0;
    --sd-line-2: #cbd5e1;
    --sd-soft: #f8fafc;
    --sd-surface: #ffffff;
    --sd-brand: #2563eb;
    --sd-brand-ink: #1d4ed8;
    --sd-brand-soft: #eff6ff;
    --sd-brand-line: #bfdbfe;
    --sd-ok: #047857;
    --sd-ok-soft: #ecfdf5;
    --sd-warn: #b45309;
    --sd-warn-soft: #fffbeb;
    --sd-warn-line: #fcd34d;
    --sd-bad: #b91c1c;
    --sd-bad-soft: #fef2f2;
    --sd-bad-line: #fecaca;
    /* One accent per booking mode, used on its badges, tiles and card art. */
    --sd-daily: #0f766e;
    --sd-daily-soft: #f0fdfa;
    --sd-hourly: #6d28d9;
    --sd-hourly-soft: #f5f3ff;
    --sd-monthly: #b45309;
    --sd-monthly-soft: #fffbeb;
    --sd-radius: 16px;
    --sd-radius-sm: 10px;
    --sd-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    --sd-shadow-lg: 0 2px 4px rgba(15, 23, 42, 0.04), 0 20px 48px rgba(15, 23, 42, 0.10);
    --sd-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --sd-body: 'Inter', system-ui, sans-serif;

    background: var(--sd-surface);
    color: var(--sd-ink);
    font-family: var(--sd-body);
    font-size: 16px;
    line-height: 1.6;
}

.sd *, .sd *::before, .sd *::after { box-sizing: border-box; }

/* The booking script toggles `hidden`; nothing in here may out-rank it. */
.sd .hidden, .sd-cta .hidden { display: none !important; }

.sd-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.sd-main { padding: 5.5rem 0 7.5rem; }
@media (min-width: 768px) { .sd-main { padding-bottom: 4rem; } }

.sd-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px;
}
@media (min-width: 768px) { .sd-container { padding: 0 24px; } }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */

.sd-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 0 0 16px; padding: 0; list-style: none;
    font-size: 13px; color: var(--sd-muted);
}
.sd-crumbs a { color: var(--sd-muted); text-decoration: none; }
.sd-crumbs a:hover { color: var(--sd-brand); }
.sd-crumbs__sep { color: var(--sd-line-2); }
.sd-crumbs__here { color: var(--sd-ink); font-weight: 500; }

/* ── Gallery ────────────────────────────────────────────────────────────── */

.sd-gallery { margin-bottom: 28px; }

#mobile-carousel { display: block; }
#desktop-gallery { display: none; }
@media (min-width: 768px) {
    #mobile-carousel { display: none !important; }
    #desktop-gallery { display: block !important; }
}

.sd-carousel {
    position: relative;
    height: 280px;
    border-radius: var(--sd-radius);
    overflow: hidden;
    background: var(--sd-soft);
}
.mobile-carousel-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transition: opacity 0.3s ease;
}
.mobile-carousel-img.active { opacity: 1; z-index: 10; }
.mobile-carousel-img.inactive { opacity: 0; z-index: 0; }
.sd-carousel__count {
    position: absolute; top: 12px; left: 12px; z-index: 30;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(15, 23, 42, 0.6); color: #fff;
    font-size: 12px; font-weight: 600; pointer-events: none;
}
.sd-carousel__nav {
    position: absolute; top: 50%; z-index: 30; transform: translateY(-50%);
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.92); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}
.sd-carousel__nav--prev { left: 10px; }
.sd-carousel__nav--next { right: 10px; }
.sd-carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.mobile-carousel-dot { border: 0; padding: 0; border-radius: 999px; cursor: pointer; transition: all 0.2s; }
.mobile-carousel-dot.active { width: 18px; height: 8px; background: var(--sd-brand); }
.mobile-carousel-dot.inactive { width: 8px; height: 8px; background: var(--sd-line-2); }

.sd-mosaic {
    display: grid;
    gap: 8px;
    height: 440px;
    border-radius: var(--sd-radius);
    overflow: hidden;
}
.sd-mosaic--1 { grid-template-columns: 1fr; }
.sd-mosaic--2 { grid-template-columns: 1fr 1fr; }
.sd-mosaic--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.sd-mosaic--3 .sd-mosaic__main { grid-row: span 2; }
.sd-mosaic--4, .sd-mosaic--5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.sd-mosaic--4 .sd-mosaic__main, .sd-mosaic--5 .sd-mosaic__main { grid-row: span 2; }
.sd-mosaic--4 .sd-mosaic__tile:last-child { grid-column: span 2; }
@media (min-width: 768px) and (max-width: 1023px) { .sd-mosaic { height: 340px; } }

.sd-mosaic__main, .sd-mosaic__tile {
    position: relative; overflow: hidden; background: var(--sd-soft);
    border: 0; padding: 0; margin: 0; cursor: zoom-in;
}
.sd-mosaic__main img, .sd-mosaic__tile img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block;
    transition: transform 0.5s ease;
}
.sd-mosaic__main:hover img, .sd-mosaic__tile:hover img { transform: scale(1.03); }
.sd-mosaic__more {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.5); color: #fff;
    font-family: var(--sd-display); font-size: 22px; font-weight: 700;
}
.sd-mosaic__all {
    position: absolute; right: 16px; bottom: 16px; z-index: 5;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border: 1px solid var(--sd-ink); border-radius: 10px;
    background: #fff; color: var(--sd-ink);
    font-size: 13px; font-weight: 600; cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.sd-mosaic-wrap { position: relative; }

/* No photos yet: a composed banner rather than a grid of grey boxes. */
.sd-cover {
    position: relative;
    display: flex; align-items: flex-end;
    height: 220px;
    padding: 24px;
    border-radius: var(--sd-radius);
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(37, 99, 235, 0.22) 0%, rgba(37, 99, 235, 0) 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(109, 40, 217, 0.16) 0%, rgba(109, 40, 217, 0) 60%),
        linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
}
@media (min-width: 768px) { .sd-cover { height: 280px; padding: 32px; } }
.sd-cover__grid {
    position: absolute; inset: 0; opacity: 0.18;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: linear-gradient(120deg, transparent 20%, #000 90%);
            mask-image: linear-gradient(120deg, transparent 20%, #000 90%);
}
.sd-cover__monogram {
    position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
    font-family: var(--sd-display); font-weight: 800;
    font-size: 132px; line-height: 1; letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.10);
    user-select: none;
}
@media (min-width: 768px) { .sd-cover__monogram { font-size: 200px; right: 48px; } }
.sd-cover__note {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.9);
}

/* ── Two-column layout ──────────────────────────────────────────────────── */

.sd-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1024px) {
    .sd-layout { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; }
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.sd-head { padding-bottom: 28px; border-bottom: 1px solid var(--sd-line); }
.sd-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sd-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
    background: var(--sd-soft); color: var(--sd-ink-2);
}
.sd-badge--daily { background: var(--sd-daily-soft); color: var(--sd-daily); }
.sd-badge--hourly { background: var(--sd-hourly-soft); color: var(--sd-hourly); }
.sd-badge--monthly { background: var(--sd-monthly-soft); color: var(--sd-monthly); }
.sd-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.sd-title {
    margin: 0 0 12px;
    font-family: var(--sd-display);
    font-size: clamp(30px, 4.2vw, 46px);
    font-weight: 800; line-height: 1.08; letter-spacing: -0.025em;
    color: var(--sd-ink);
}
.sd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 15px; color: var(--sd-ink-2); }
.sd-meta__item { display: inline-flex; align-items: center; gap: 6px; }
.sd-meta__item svg { flex-shrink: 0; color: var(--sd-muted); }
.sd-meta a.sd-meta__item { color: var(--sd-ink-2); text-decoration: none; }
.sd-meta a.sd-meta__item:hover { color: var(--sd-brand); }
.sd-meta__open { color: var(--sd-ok); font-weight: 600; }
.sd-meta__closed { color: var(--sd-bad); font-weight: 600; }

/* ── "What you can book" tiles ──────────────────────────────────────────── */

.sd-offers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
@media (min-width: 640px) { .sd-offers { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.sd-offer {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; border: 1px solid var(--sd-line); border-radius: 14px;
    background: var(--sd-surface); color: inherit; text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.sd-offer:hover { border-color: var(--sd-line-2); box-shadow: var(--sd-shadow); transform: translateY(-1px); }
.sd-offer__icon {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.sd-offer--daily .sd-offer__icon { background: var(--sd-daily-soft); color: var(--sd-daily); }
.sd-offer--hourly .sd-offer__icon { background: var(--sd-hourly-soft); color: var(--sd-hourly); }
.sd-offer--monthly .sd-offer__icon { background: var(--sd-monthly-soft); color: var(--sd-monthly); }
.sd-offer__label { display: block; font-size: 13px; color: var(--sd-muted); line-height: 1.3; }
.sd-offer__price { display: block; white-space: nowrap; font-family: var(--sd-display); font-size: 18px; font-weight: 700; color: var(--sd-ink); line-height: 1.3; }
.sd-offer__price small { font-family: var(--sd-body); font-size: 13px; font-weight: 500; color: var(--sd-muted); }

/* ── Sections ───────────────────────────────────────────────────────────── */

.sd-section { padding: 36px 0; border-bottom: 1px solid var(--sd-line); scroll-margin-top: 96px; }
.sd-section:last-child { border-bottom: 0; }
.sd-h2 {
    margin: 0 0 6px;
    font-family: var(--sd-display);
    font-size: 24px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25;
    color: var(--sd-ink);
}
.sd-lede { margin: 0 0 20px; font-size: 15px; color: var(--sd-muted); }
.sd-prose { margin: 0; font-size: 16px; line-height: 1.75; color: var(--sd-ink-2); max-width: 68ch; }

/* ── Amenities ──────────────────────────────────────────────────────────── */

#space-amenities-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-top: 18px; }
@media (min-width: 768px) { #space-amenities-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sd-amenity { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 15px; color: var(--sd-ink-2); }
.sd-amenity__icon {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sd-brand-soft); color: var(--sd-brand);
}
.sd-link-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 18px; padding: 9px 16px;
    border: 1px solid var(--sd-ink); border-radius: 10px;
    background: #fff; color: var(--sd-ink);
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background 0.15s;
}
.sd-link-btn:hover { background: var(--sd-soft); }
.sd-link-btn svg { transition: transform 0.2s; }
.sd-link-btn svg.rotate-180 { transform: rotate(180deg); }

/* ── Space cards ────────────────────────────────────────────────────────── */

.sd-group + .sd-group { margin-top: 32px; }
.sd-group__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sd-group__title { margin: 0; font-family: var(--sd-display); font-size: 17px; font-weight: 700; color: var(--sd-ink); }
.sd-group__hint { margin: 0; font-size: 13px; color: var(--sd-muted); }
.sd-group__rule { flex: 1; height: 1px; background: var(--sd-line); }

.sd-spaces { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .sd-spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sd-space {
    display: flex; flex-direction: column;
    border: 1px solid var(--sd-line); border-radius: var(--sd-radius);
    background: var(--sd-surface); overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sd-space:hover { border-color: var(--sd-line-2); box-shadow: var(--sd-shadow); }
.sd-space.is-selected { border-color: var(--sd-brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }

.sd-space__media { position: relative; height: 152px; background: var(--sd-soft); overflow: hidden; }
.sd-space__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sd-space__art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sd-space--daily .sd-space__art { background: linear-gradient(135deg, #ccfbf1 0%, var(--sd-daily-soft) 100%); color: var(--sd-daily); }
.sd-space--hourly .sd-space__art { background: linear-gradient(135deg, #ede9fe 0%, var(--sd-hourly-soft) 100%); color: var(--sd-hourly); }
.sd-space--monthly .sd-space__art { background: linear-gradient(135deg, #fef3c7 0%, var(--sd-monthly-soft) 100%); color: var(--sd-monthly); }
.sd-space__art svg { width: 44px; height: 44px; opacity: 0.85; }
.sd-space__tag {
    position: absolute; left: 12px; top: 12px;
    padding: 4px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.94); color: var(--sd-ink);
    font-size: 11.5px; font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.sd-space__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.sd-space__name { margin: 0; font-family: var(--sd-display); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--sd-ink); }
.sd-space__facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; font-size: 13px; color: var(--sd-muted); }
.sd-space__facts span { display: inline-flex; align-items: center; gap: 5px; }
.sd-space__desc {
    margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--sd-ink-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sd-space__foot {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    margin-top: auto; padding-top: 16px;
}
.sd-space__price { line-height: 1.1; }
.sd-space__price strong { font-family: var(--sd-display); font-size: 22px; font-weight: 800; color: var(--sd-ink); letter-spacing: -0.01em; }
.sd-space__price span { margin-left: 2px; font-size: 13px; color: var(--sd-muted); }
.sd-space__price em { display: block; font-style: normal; font-size: 12px; color: var(--sd-muted); margin-bottom: 2px; }
.sd-space__quote { font-size: 14px; font-weight: 600; color: var(--sd-ink-2); }

/* Card CTA. Keeps the class the booking script binds to. */
.book-workspace-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    flex-shrink: 0;
    padding: 10px 14px; border-radius: 10px;
    background: var(--sd-ink); color: #fff;
    font-size: 13.5px; font-weight: 600; line-height: 1.2;
    white-space: nowrap; text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}
.book-workspace-link:hover { background: var(--sd-brand); color: #fff; }
.book-workspace-link:focus-visible { outline: 2px solid var(--sd-brand); outline-offset: 2px; }
.sd-space.is-selected .book-workspace-link { background: var(--sd-brand); }

/* ── Location ───────────────────────────────────────────────────────────── */

.sd-map {
    width: 100%; height: 320px;
    border: 1px solid var(--sd-line); border-radius: var(--sd-radius);
    overflow: hidden; background: var(--sd-soft);
}
.sd-address { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.sd-address__text { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--sd-ink-2); }
.sd-address__text svg { flex-shrink: 0; margin-top: 3px; color: var(--sd-muted); }
.sd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-chip-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border: 1px solid var(--sd-line); border-radius: 10px;
    background: #fff; color: var(--sd-ink-2);
    font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.sd-chip-btn:hover { border-color: var(--sd-ink); color: var(--sd-ink); }

/* Map popup (rendered by MapLibre inside #space-location-map). */
.maplibregl-popup { max-width: 168px !important; }
.maplibregl-popup-content {
    position: relative; padding: 0 !important; border-radius: 10px; overflow: visible;
    max-width: 168px !important; width: 168px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
}
.maplibregl-popup-close-button {
    position: absolute !important; top: 6px !important; right: 6px !important; z-index: 5;
    width: 26px !important; height: 26px !important; margin: 0 !important; padding: 0 !important;
    border: none !important; border-radius: 8px;
    background: rgba(255, 255, 255, 0.96) !important; color: #1e293b !important;
    font-size: 18px !important; line-height: 24px !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25); cursor: pointer;
    display: flex !important; align-items: center; justify-content: center;
}
.space-map-popup-card { box-sizing: border-box; width: 168px; background: #fff; overflow: hidden; border-radius: 10px; display: flex; flex-direction: column; }
.space-map-popup-body { padding: 7px 9px 9px; }
.space-map-popup-image-wrap { position: relative; width: 100%; height: 56px; overflow: hidden; background: #f1f5f9; }
.space-map-popup-image { width: 100% !important; height: 100% !important; max-height: 56px !important; object-fit: cover; display: block; }
.space-map-popup-name { font-weight: 600; font-size: 13px; color: #0f172a; margin-bottom: 4px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.space-map-popup-price-row { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.space-map-popup-price { font-weight: 700; font-size: 14px; color: #2563eb; }
.space-map-popup-unit, .space-map-popup-muted { font-size: 11px; color: #64748b; }

/* ── Booking card ───────────────────────────────────────────────────────── */

.sd-aside { min-width: 0; }
.space-request-sticky { scroll-margin-top: 88px; }
@media (min-width: 1024px) {
    .space-request-sticky { position: -webkit-sticky; position: sticky; top: 88px; }
}

.sd-book {
    border: 1px solid var(--sd-line);
    border-radius: 20px;
    background: var(--sd-surface);
    box-shadow: var(--sd-shadow-lg);
    overflow: hidden;
}
.sd-book__head { padding: 22px 22px 18px; border-bottom: 1px solid var(--sd-line); background: linear-gradient(180deg, var(--sd-soft) 0%, #fff 100%); }
.sd-book__from { margin: 0; font-size: 13px; color: var(--sd-muted); }
.sd-book__from strong { font-family: var(--sd-display); font-size: 26px; font-weight: 800; color: var(--sd-ink); letter-spacing: -0.02em; }
.sd-book__title { margin: 0; font-family: var(--sd-display); font-size: 20px; font-weight: 700; color: var(--sd-ink); }
.sd-book__sub { margin: 4px 0 0; font-size: 13.5px; color: var(--sd-muted); }
.sd-book__body { padding: 18px 22px 22px; }

.sd-form { display: flex; flex-direction: column; gap: 14px; }
.sd-field { display: flex; flex-direction: column; gap: 6px; }
.sd-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--sd-muted); }
.sd-input, .sd-form select, .sd-form textarea, .sd-form input[type="date"], .sd-form input[type="number"] {
    width: 100%; min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--sd-line-2); border-radius: 12px;
    background: #fff; color: var(--sd-ink);
    font: 500 15px/1.4 var(--sd-body);
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none; appearance: none;
}
.sd-form select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.sd-form textarea { min-height: 88px; resize: vertical; }
.sd-input:focus, .sd-form select:focus, .sd-form textarea:focus, .sd-form input:focus {
    outline: none; border-color: var(--sd-brand); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.sd-help { margin: 0; font-size: 12.5px; color: var(--sd-muted); }
.sd-hidden-field { display: none !important; }

.sd-total {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px; border-radius: 12px;
    background: var(--sd-ok-soft); color: var(--sd-ok);
    font-size: 13px; font-weight: 600; line-height: 1.45;
}

.sd-submit {
    width: 100%; min-height: 50px; margin-top: 2px;
    border: 0; border-radius: 12px;
    background: var(--sd-brand); color: #fff;
    font: 700 15.5px/1 var(--sd-body); cursor: pointer;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.sd-submit:hover { background: var(--sd-brand-ink); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(37, 99, 235, 0.32); }

.sd-assure { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--sd-line); list-style: none; }
.sd-assure li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sd-ink-2); }
.sd-assure svg { flex-shrink: 0; color: var(--sd-ok); }

.sd-alert { margin: 0 0 14px; padding: 12px 14px; border: 1px solid; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.sd-alert ul { margin: 0; padding-left: 18px; }
.sd-alert--ok { background: var(--sd-ok-soft); border-color: #a7f3d0; color: var(--sd-ok); }
.sd-alert--warn { background: var(--sd-warn-soft); border-color: var(--sd-warn-line); color: var(--sd-warn); }
.sd-alert--bad { background: var(--sd-bad-soft); border-color: var(--sd-bad-line); color: var(--sd-bad); }
.sd-alert--info { background: var(--sd-brand-soft); border-color: var(--sd-brand-line); color: var(--sd-brand-ink); }
.sd-note { margin: 0; font-size: 14px; color: var(--sd-ink-2); }

/* ── Booking picker (partials/slot-picker) ──────────────────────────────── */

.sd-picker { padding: 14px; border: 1px solid var(--sd-line); border-radius: 14px; background: var(--sd-soft); }
.sd-picker__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sd-picker [data-slot-caption] { margin: 0; font-size: 13px; font-weight: 600; color: var(--sd-ink-2); line-height: 1.4; }
.sd-picker [data-slot-summary] { text-align: right; flex-shrink: 0; }
.sd-picker [data-slot-summary] p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--sd-muted); }
.sd-picker [data-slot-summary] p:nth-child(2) { font-size: 13px; font-weight: 700; color: var(--sd-ink); }
.sd-picker [data-slot-message] { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--sd-line); font-size: 13px; color: var(--sd-ink-2); }

.sd-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 6px;
    max-height: 244px;
    overflow-y: auto;
    padding: 2px;
    margin: 0 -2px;
    scrollbar-width: thin;
}
/* Cells are built by the picker script; styled by state here rather than by the
   utility classes it sets, which the purged bundle does not all carry. */
.sd-slot-grid > button {
    height: 38px; padding: 0;
    border: 1px solid var(--sd-line-2); border-radius: 9px;
    background: #fff; color: var(--sd-ink);
    font: 600 13px/1 var(--sd-body); font-variant-numeric: tabular-nums;
    cursor: pointer; text-decoration: none;
    transition: border-color 0.12s, background 0.12s;
}
.sd-slot-grid > button:not(:disabled):hover { border-color: var(--sd-brand); color: var(--sd-brand); }
.sd-slot-grid > button:disabled { cursor: not-allowed; }
.sd-slot-grid > button[data-status="booked"] { background: #f1f5f9; border-color: #e2e8f0; color: var(--sd-faint); text-decoration: line-through; }
.sd-slot-grid > button[data-status="held"] { background: var(--sd-warn-soft); border-color: var(--sd-warn-line); color: var(--sd-warn); }
.sd-slot-grid > button[data-status="boundary"] { border-style: dashed; color: var(--sd-muted); background: transparent; }
.sd-slot-grid > button[data-selected="true"] { background: var(--sd-brand-soft); border-color: var(--sd-brand-line); color: var(--sd-brand-ink); }
.sd-slot-grid > button.bg-blue-600 { background: var(--sd-brand); border-color: var(--sd-brand); color: #fff; }
.sd-slot-grid > button.opacity-40 { opacity: 0.4; }

.sd-picker [data-slot-legend] { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.sd-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--sd-muted); }
.sd-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sd-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--sd-line-2); background: #fff; }
.sd-legend i.is-booked { background: #e2e8f0; border-color: #e2e8f0; }
.sd-legend i.is-held { background: var(--sd-warn-soft); border-color: var(--sd-warn-line); }
.sd-picker [data-slot-clear] { border: 0; background: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--sd-brand); cursor: pointer; }

.sd-picker [data-lease-controls] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sd-picker [data-lease-controls] label { font-size: 13px; font-weight: 600; color: var(--sd-ink-2); }
.sd-picker [data-lease-controls] select { width: auto; min-width: 140px; min-height: 40px; }
.sd-picker [data-window-status] { padding: 12px 14px; border: 1px solid var(--sd-line); border-radius: 12px; background: #fff; font-size: 13.5px; line-height: 1.55; color: var(--sd-ink-2); }
.sd-picker [data-window-status].border-blue-200 { border-color: var(--sd-brand-line); background: var(--sd-brand-soft); color: var(--sd-brand-ink); }
.sd-picker [data-window-status].border-red-200 { border-color: var(--sd-bad-line); background: var(--sd-bad-soft); color: var(--sd-bad); }
.sd-picker [data-window-status].border-amber-300 { border-color: var(--sd-warn-line); background: var(--sd-warn-soft); color: var(--sd-warn); }
.sd-picker [data-window-status].border-slate-300 { background: #f1f5f9; color: var(--sd-muted); }

/* ── Mobile booking bar ─────────────────────────────────────────────────── */

.sd-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
    font-family: 'Inter', system-ui, sans-serif;
    transition: transform 0.25s ease;
}
@media (min-width: 768px) { .sd-cta { display: none !important; } }
.sd-cta__price { font-size: 12px; color: #64748b; line-height: 1.3; }
.sd-cta__price strong { display: block; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 18px; font-weight: 800; color: #0f172a; }
.sd-cta__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 0 20px; border-radius: 12px;
    background: #2563eb; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none;
}
.sd-cta__note { margin: 0; width: 100%; text-align: center; font-size: 13px; color: #64748b; }

/* Toast for "link copied". */
.sd-toast {
    position: fixed; left: 50%; bottom: 96px; z-index: 60; transform: translate(-50%, 12px);
    padding: 10px 16px; border-radius: 999px;
    background: #0f172a; color: #fff; font: 600 13px/1 'Inter', sans-serif;
    opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.sd-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 768px) { .sd-toast { bottom: 32px; } }

@media (prefers-reduced-motion: reduce) {
    .sd *, .sd-cta { transition: none !important; }
}