/* Tuvums booking - inspired by tuvums.lv (organic wellness).
   Warmer cream, soft borders, generous whitespace, no harsh boxes.
   Fonts: Playfair Display (headings - reliably renders Latvian ā ē ī ū š č ž ķ ģ ļ ņ)
          Inter (body + time digits, full Latin Extended + tabular numerals) */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg:         #FBF7EE;
    --bg-warm:    #F5EEE0;
    --card:       #FFFFFF;
    --ink:        #2A2018;
    --ink-soft:   #5A4B3E;
    --muted:      #8B7A6B;
    --sand:       #E6D3C4;
    --sand-soft:  #F0E4D4;
    --line:       rgba(157, 53, 25, 0.14);
    --line-soft:  rgba(157, 53, 25, 0.08);

    --accent:       #9D3519;
    --accent-hover: #7d2a13;
    --accent-soft:  rgba(157, 53, 25, 0.08);

    --slot-free:     #7BA76F;   /* green - available */
    --slot-reserved: #D9853A;   /* orange - held by others */
    --slot-mine:     #4A73B0;   /* blue - my hold */
    --slot-taken:    #B03A1A;   /* red - booked */
    --slot-empty:    #D9D0C4;   /* fallback */

    --err: #B03A1A;
    --ok:  #4A7A47;

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-head: 'Playfair Display', Georgia, serif;
    --font-time: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 20px;

    --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.04), 0 2px 8px rgba(60, 40, 20, 0.03);
    --shadow-md: 0 2px 4px rgba(60, 40, 20, 0.06), 0 8px 24px rgba(157, 53, 25, 0.06);
    --shadow-lg: 0 4px 12px rgba(60, 40, 20, 0.08), 0 24px 48px rgba(157, 53, 25, 0.10);

    --pad: clamp(16px, 4vw, 28px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    background-image:
        radial-gradient(circle at 15% 0%, rgba(230, 211, 196, 0.4), transparent 50%),
        radial-gradient(circle at 85% 100%, rgba(157, 53, 25, 0.04), transparent 50%);
    background-attachment: fixed;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Public site + staff pages - fixed botanical background from tuvums.lv,
   dimmed with a warm cream overlay so text stays readable. */
body.public,
body.staff {
    background:
        linear-gradient(rgba(251, 247, 238, 0.86), rgba(251, 247, 238, 0.86)),
        url('assets-bg.webp') center center / cover no-repeat fixed,
        var(--bg);
}

/* ---------------- Layout ---------------- */
.wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--pad);
    padding-bottom: 80px;
}

.header {
    text-align: center;
    padding: 32px 0 24px;
    margin-bottom: 8px;
}

.brand {
    font-family: var(--font-head);
    font-weight: 400;
    font-size: clamp(32px, 8vw, 42px);
    letter-spacing: 0.02em;
    color: var(--accent);
    line-height: 1;
    font-variation-settings: 'opsz' 144;
}

.tagline {
    font-size: 14px;
    color: var(--muted);
    margin-top: 8px;
    letter-spacing: 0.02em;
}

/* ---------------- Tabs ---------------- */
.tabs {
    display: flex;
    gap: 4px;
    background: var(--sand-soft);
    padding: 4px;
    border-radius: var(--r-md);
    margin: 0 auto 28px;
    max-width: 420px;
}

.tab {
    flex: 1;
    background: none;
    border: none;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab[aria-selected="true"] {
    background: var(--card);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.tab .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 0 6px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: 1px;
}

/* ---------------- Intro text ----------------
   Deliberately plain - no card, no border, no shadow - so it never
   looks tappable. It's just guidance copy. */
.intro {
    padding: 4px 6px 8px;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-soft);
    text-align: center;
}

.intro p + p { margin-top: 10px; }
.intro em { color: var(--accent); font-style: normal; font-weight: 500; }

/* ---------------- Closed-event landing (index.html post-event) ---------------- */
.closed-card {
    background: var(--card);
    border-radius: var(--r-lg, 18px);
    padding: 48px 32px;
    margin-top: 24px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(42, 32, 24, 0.06);
}
.closed-msg {
    font-family: var(--font-head);
    font-size: clamp(20px, 5vw, 26px);
    line-height: 1.35;
    color: var(--ink);
    margin: 0;
}

/* ---------------- Programma timeline ---------------- */
/* One unified list. Every row is a 3-column grid:
   [time gutter] [main content (title + body)] [side (counter/arrow)].
   Bookable rows are <button> and get hover state + arrow + counter.
   Info rows share the same layout but are non-interactive.
   Section headers span the full width (no time gutter). */

#program-list {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.prog-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "time side"
        "main side";
    column-gap: 16px;
    row-gap: 6px;
    align-items: start;
    padding: 16px 20px;
    text-align: left;
    color: var(--ink);
    background: transparent;
    border: none;
    border-top: 1px solid var(--line-soft);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    width: 100%;
}
.prog-row:first-child { border-top: none; }

.prog-row .row-time {
    grid-area: time;
    font-family: var(--font-time);
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: -0.005em;
    font-feature-settings: 'tnum' 1, 'ss01' 1;
    white-space: nowrap;
}

.prog-row .row-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.prog-row .row-title {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    font-variation-settings: 'opsz' 144;
    line-height: 1.35;
}

.prog-row .row-body {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.55;
}
.prog-row .row-body a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.prog-row .row-side {
    grid-area: side;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: var(--muted);
}

.prog-row .row-arrow {
    font-size: 22px;
    color: var(--muted);
    line-height: 1;
}

/* Bookable row: interactive */
.prog-row--book {
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: var(--font-body);
}
.prog-row--book:hover,
.prog-row--book:focus {
    outline: none;
    background: var(--sand-soft);
}
.prog-row--book .row-title {
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
}
.prog-row--book .row-time {
    font-size: 17px;
    font-weight: 600;
}
.prog-row--book:hover .row-arrow,
.prog-row--book:focus .row-arrow { color: var(--accent); }

/* Section header row: no time cell, title spans full width */
.prog-row--section {
    grid-template-areas: "main main";
    padding: 22px 20px 10px;
    background: var(--sand-soft);
}
.prog-row--section .row-title {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: -0.005em;
}

/* Info-only row (no slotKey) - same layout as bookable, no interactivity */
.prog-row--info { background: #FAF6F0; }
.prog-row--info .row-title { font-size: 15px; }

@media (max-width: 560px) {
    .prog-row {
        column-gap: 12px;
        padding: 14px 14px;
    }
    .prog-row .row-time { font-size: 14px; }
    .prog-row--book .row-time { font-size: 14px; }
    .prog-row--book .row-title { font-size: 15px; }
    .prog-row .row-title { font-size: 15px; }
    .prog-row--section { padding: 18px 14px 8px; }
    .prog-row--section .row-title { font-size: 18px; }
}

/* External link pills on the expanded experience card.
   Shared pill shape; icon-square gets a per-platform colour variant so all
   pills line up in a row with matching height/alignment. */
.exp-link-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border-radius: 12px;
    background: var(--sand-soft);
    color: var(--ink);
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}
.exp-link-pill:hover, .exp-link-pill:focus {
    outline: none;
    background: var(--sand);
    transform: translateY(-1px);
}
.exp-link-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: #fff;
    flex-shrink: 0;
}
.exp-link-ico svg { width: 18px; height: 18px; display: block; }
.exp-link-ico--ig {
    background: linear-gradient(45deg,
        #F09433 0%, #E6683C 25%, #DC2743 50%, #CC2366 75%, #BC1888 100%);
}
.exp-link-ico--fb { background: #1877F2; }
.exp-link-ico--yt { background: #FF0000; }
.exp-link-ico--web { background: var(--accent); }
.exp-link-label {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0.01em;
    line-height: 1;
}

.slot-btn-mini-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.slot-note {
    font-size: 14px;
    color: var(--muted);
    padding: 8px 20px 0;
    text-align: center;
    line-height: 1.7;
}

.slot-note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------------- Experience cards ---------------- */
/* Inline top back button — subtle outline pill so it doesn't compete
   visually with the Programma / Manas pieredzes tabs above it. The sticky
   copy (.back-link-sticky, appears on scroll) takes the bolder accent-color
   fill since it's the primary reach-target when scrolled deep. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 10px 18px 10px 14px;
    margin-bottom: 20px;
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}
.back-link:hover, .back-link:focus {
    outline: none;
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.back-link-arrow {
    display: inline-block;
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1;
    margin-right: 2px;
}

/* Sticky duplicate — solid accent-color pill pinned to the viewport bottom.
   Bolder than the inline top button so it reads as the primary action when
   scrolled deep into the experience list. Hidden until JS adds .is-visible
   (scroll > 160px while on the experience view). */
.back-link-sticky {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(12px);
    margin-bottom: 0;
    padding: 13px 24px 13px 20px;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 28px rgba(87, 34, 24, 0.28), 0 2px 6px rgba(87, 34, 24, 0.18);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.back-link-sticky.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.back-link-sticky:hover, .back-link-sticky:focus {
    color: #fff;
    background: #3f1810;
    border-color: #3f1810;
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 12px 32px rgba(87, 34, 24, 0.36), 0 3px 8px rgba(87, 34, 24, 0.22);
}
#view-experiences { padding-bottom: 96px; }

.slot-title {
    font-family: var(--font-time);
    font-size: 24px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 4px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum' 1, 'ss01' 1;
}

.slot-sub {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 20px;
}

.info-box {
    background: var(--sand-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-soft);
}

.info-box ul { padding-left: 18px; margin: 0; }
.info-box li { margin-bottom: 4px; }
.info-box li:last-child { margin-bottom: 0; }

/* Individual experience card */
.exp-card {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.15s;
}

.exp-card.is-disabled { opacity: 0.5; }

.exp-card.is-expanded {
    box-shadow: var(--shadow-md);
    border-color: var(--line);
}

.exp-card.is-mine {
    border-color: var(--accent);
    border-width: 1px;
    background: linear-gradient(180deg, var(--card) 0%, var(--sand-soft) 100%);
}

.exp-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-wrap: wrap;
}

.exp-card-head:hover { background: var(--sand-soft); }

.exp-card.is-expanded .exp-card-head:hover { background: transparent; }

.exp-main {
    flex: 1;
    min-width: 0;
}

.exp-title {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.35;
    font-variation-settings: 'opsz' 144;
    margin-bottom: 4px;
}

.exp-presenter {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
    font-style: italic;
}

/* Legacy pulse used by reservation timer (still referenced) */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

.slot-status {
    font-size: 13px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.slot-status strong {
    color: var(--ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
}
.slot-status.full strong { color: var(--err); }
.slot-status.few strong { color: var(--slot-reserved); }
.slot-status.free-many strong { color: var(--ok); }

/* Live-counter pulse is driven by Web Animations API in index.html (see
   firePulse). Animates only the inner <strong> number's scale. */

/* Spot-number badge on experience cards */
.exp-number {
    flex: 0 0 auto;
    min-width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding-top: 2px;
    line-height: 1.05;
}
.exp-number-n {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
    font-feature-settings: 'tnum' 1, 'ss01' 1;
    letter-spacing: -0.01em;
}
.exp-number-lbl {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
}
.exp-number-empty { min-width: 0; }

/* Right side of the card head - counter + action button */
.exp-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding-top: 2px;
}

/* Slot-wide lock notice (single-booking-per-timeslot) */
.slot-lock-notice {
    background: var(--sand-soft);
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--ink-soft);
    text-align: center;
}

/* Locked card (visitor booked another exp in this slot) */
.exp-card.is-locked { opacity: 0.75; }
.exp-card.is-locked .exp-side .btn { cursor: pointer; }

/* Row of external link pills inside the expanded body */
.exp-video {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 4px 0 16px;
}

.exp-chevron {
    color: var(--muted);
    font-size: 20px;
    flex-shrink: 0;
    transition: transform 0.2s;
    line-height: 1;
    padding-top: 4px;
}
.exp-card.is-expanded .exp-chevron { transform: rotate(180deg); }

/* Body (expanded content) */
.exp-body {
    padding: 4px 20px 20px;
    border-top: 1px solid var(--line-soft);
    display: none;
}
.exp-card.is-expanded .exp-body { display: block; }

.exp-body-inner { padding-top: 16px; }

.exp-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin-bottom: 16px;
    white-space: pre-wrap;
}

.exp-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.reservation-timer {
    font-size: 13px;
    color: var(--slot-mine);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.reservation-timer.warn { color: var(--slot-reserved); }
.reservation-timer.expiring { color: var(--err); }

.reservation-timer::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 1.5s ease-in-out infinite;
}

.tag {
    display: inline-block;
    background: var(--sand-soft);
    color: var(--ink-soft);
    font-size: 13px;
    padding: 7px 14px;
    border-radius: var(--r-md);
    letter-spacing: 0.02em;
    font-weight: 500;
}

.tag-mine {
    background: var(--ok);
    color: #fff;
}

.tag-drop-in {
    background: var(--sand);
    color: var(--ink);
}

.tag-full {
    background: var(--err);
    color: #fff;
}

/* ---------------- Buttons ---------------- */
.btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 10px 22px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    border-radius: var(--r-md);
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { background: #C9BEB0; cursor: not-allowed; }

.btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}
.btn-outline:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.btn-danger {
    background: transparent;
    color: var(--err);
    border: 1px solid var(--err);
}
.btn-danger:hover:not(:disabled) { background: var(--err); color: #fff; }

.btn-lg { padding: 13px 28px; font-size: 15px; }
.btn-block { display: block; width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* Locked booking button: looks disabled but still receives clicks (opens explainer modal). */
.btn-locked {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    cursor: pointer;
    opacity: 0.8;
}
.btn-locked:hover { background: var(--sand-soft); }

/* Inline link inside modal copy */
.modal-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}
.modal-link:hover { color: var(--accent-dark, var(--accent)); }

/* ---------------- My bookings ---------------- */
.my-card {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 20px 22px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.my-left {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 60px;
}

.my-time {
    font-family: var(--font-time);
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    padding-top: 2px;
    font-feature-settings: 'tnum' 1, 'ss01' 1;
    letter-spacing: -0.01em;
}

.my-number {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
    padding-top: 2px;
    border-top: 1px solid var(--line-soft);
    width: 100%;
}
.my-number-n {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    font-feature-settings: 'tnum' 1, 'ss01' 1;
    letter-spacing: -0.01em;
    margin-top: 4px;
}
.my-number-lbl {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
}

.my-main { flex: 1; min-width: 0; }

.my-title {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 3px;
    font-variation-settings: 'opsz' 144;
    line-height: 1.3;
}

.my-presenter {
    font-size: 13px;
    color: var(--muted);
    font-style: italic;
    margin-bottom: 14px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
    font-size: 15px;
}
.empty-state svg { margin-bottom: 16px; opacity: 0.4; }

/* ---------------- Modal ---------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(42, 32, 24, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
    animation: fadeIn 0.15s ease;
}

.modal {
    background: var(--bg);
    border-radius: var(--r-lg);
    padding: 32px 28px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.2s ease;
}

.modal h3 {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 500;
    color: var(--accent);
    margin-bottom: 8px;
    font-variation-settings: 'opsz' 144;
}

.modal p { margin-bottom: 20px; font-size: 15px; color: var(--ink-soft); line-height: 1.55; }

.modal-input {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 16px;
    border: 1px solid var(--line);
    background: var(--card);
    margin-bottom: 20px;
    border-radius: var(--r-md);
    color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.modal-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.modal-actions .btn { flex: 1; }


/* ---------------- Notice bar ---------------- */
.notice {
    background: linear-gradient(135deg, var(--sand-soft), var(--sand));
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    text-align: center;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

/* ---------------- Toast ---------------- */
.toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--bg);
    padding: 14px 24px;
    border-radius: 999px;
    font-size: 14px;
    max-width: 90vw;
    z-index: 2000;
    animation: slideUp 0.2s ease;
    box-shadow: var(--shadow-lg);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.modal { animation: modalIn 0.2s ease; }
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.96) translateY(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------------- Admin ---------------- */
.admin-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--pad);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--line-soft);
}

.admin-brand {
    font-family: var(--font-head);
    font-size: 26px;
    color: var(--accent);
    letter-spacing: 0.01em;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
a.admin-brand:hover, a.admin-brand:focus { opacity: 0.7; outline: none; }

.admin-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-nav a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-section {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.admin-section h2 {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 500;
    color: var(--accent);
    margin-bottom: 18px;
    font-variation-settings: 'opsz' 144;
}

.form-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
}

.form-field input, .form-field select, .form-field textarea {
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    border: 1px solid var(--line);
    background: var(--bg);
    border-radius: var(--r-sm);
    color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.gate-datetime {
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    border: 1px solid var(--line);
    background: var(--bg);
    border-radius: var(--r-sm);
    color: var(--ink);
}
.gate-datetime:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.slot-heading {
    margin: 24px 0 10px;
    font-family: var(--font-time);
    font-weight: 600;
    font-size: 18px;
    color: var(--accent);
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum' 1, 'ss01' 1;
}
.slot-heading.empty { color: var(--muted); }
.slot-heading .muted { font-weight: 400; font-size: 14px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-field textarea { resize: vertical; min-height: 70px; }
.form-field.full { grid-column: 1 / -1; }

.form-field-inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.form-field-inline label {
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
    cursor: pointer;
}
.form-field-inline input[type=checkbox] {
    width: 18px; height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.admin-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.exp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.exp-table th, .exp-table td {
    text-align: left;
    padding: 12px 12px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
}
.exp-table th {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
}
.exp-table tr.is-disabled { opacity: 0.5; }
.exp-table .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.exp-table .row-actions .btn { padding: 5px 12px; font-size: 12px; }

.booking-count { font-family: var(--font-head); font-weight: 500; font-size: 16px; }
.booking-count.full { color: var(--err); }

/* ---------------- Monitor ---------------- */
.monitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.monitor-card {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.monitor-card h3 {
    font-family: var(--font-time);
    font-size: 22px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum' 1, 'ss01' 1;
}

.monitor-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14px;
    gap: 10px;
}
.monitor-row:last-child { border-bottom: none; }

.monitor-row .fill-bar {
    flex: 1;
    height: 6px;
    background: var(--sand-soft);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 8px;
    min-width: 40px;
    position: relative;
}
.monitor-row .fill-bar > div {
    height: 100%;
    background: var(--slot-free);
    transition: width 0.3s, background 0.3s;
    border-radius: 3px;
}
.monitor-row .fill-bar > div.warn  { background: var(--slot-reserved); }
.monitor-row .fill-bar > div.full  { background: var(--slot-taken); }
.monitor-row .fill-bar > div.empty { background: var(--slot-empty); }

.monitor-row .label { flex: 0 0 auto; }
.monitor-row .monitor-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--ink);
}
.monitor-row .num {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink);
    font-size: 13px;
    min-width: 42px;
    text-align: right;
}

.connection-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    padding: 5px 12px;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    flex-shrink: 0;
}
.status-dot.connected { background: var(--ok); }

/* ---------------- Utility ---------------- */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.center { text-align: center; }

@media (max-width: 560px) {
    .exp-table thead { display: none; }
    .exp-table tr {
        display: block;
        border-bottom: 1px solid var(--line-soft);
        padding: 14px 0;
    }
    .exp-table td {
        display: block;
        border: none;
        padding: 4px 0;
    }
    .exp-table td::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--muted);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: inline-block;
        margin-right: 6px;
    }
    .exp-table td.row-actions-cell::before { content: ""; }
    .my-card {
        gap: 12px;
    }
    .my-left { min-width: 52px; }
    .my-time { font-size: 20px; }
    .my-number-n { font-size: 20px; }

    .back-link {
        padding: 6px 14px 6px 10px;
        font-size: 12px;
        gap: 4px;
        margin-bottom: 14px;
        box-shadow: none;
    }
    .back-link-sticky {
        padding: 12px 22px 12px 18px;
        font-size: 14px;
        gap: 8px;
        box-shadow: 0 10px 28px rgba(87, 34, 24, 0.28), 0 2px 6px rgba(87, 34, 24, 0.18);
    }
    #view-experiences { padding-bottom: 88px; }
    .exp-card-head {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "number main   chevron"
            "side   side   side";
        column-gap: 12px;
        row-gap: 10px;
        padding: 14px 14px;
        align-items: start;
    }
    .exp-number { grid-area: number; min-width: 38px; }
    .exp-number-n { font-size: 22px; }
    .exp-main { grid-area: main; }
    .exp-chevron { grid-area: chevron; }
    .exp-side {
        grid-area: side;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-top: 0;
    }
    .exp-side .btn { padding: 8px 18px; font-size: 13px; }
    /* Match the size of a bookable program-row title ("Sevis izzināšanas pieredzes") */
    .exp-title { font-size: 15px; }
}