/* Playverse -- the worker area (the floor: today, walk-ins, reservations,
   payments, photos, vouchers, children). Phones and the reception tablet
   first: big buttons, rows of one height, nothing grows when it fills up.
   Logical properties only, so right-to-left comes free. Everything is .wk-. */

/* --- small pieces ------------------------------------------------------------------ */
.wk-link { color: inherit; }
.wk-link:hover { color: var(--brand); text-decoration: none; }
a.row-title.wk-link { display: block; }
.wk-push { margin-inline-start: auto; flex: none; }
.wk-pre { white-space: pre-line; }
.wk-warn { color: #AD5329; }
.wk-mt-sm { margin-top: 6px; }
.wk-tel { color: var(--brand); font-weight: 700; }
.wk-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wk-fieldset legend { padding: 0; margin-bottom: 8px; }
.wk-count { display: inline-grid; place-items: center; flex: none; min-width: 28px; height: 28px; padding: 0 8px;
            border-radius: 999px; background: var(--soft); color: var(--brand-d); font-size: 14px; font-weight: 800;
            font-variant-numeric: tabular-nums; }
.wk-none { display: flex; align-items: center; gap: 10px; min-height: 56px; margin: 0; padding: 0 16px; background: #fff;
           border: 2px dashed var(--line); border-radius: var(--r); color: var(--muted); font-weight: 700; min-width: 0; }
.wk-none .ic { color: var(--ok); }
.wk-memo { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 0; padding: 10px 12px; border-radius: var(--r-sm);
           background: var(--info-soft); color: var(--info); font-weight: 700; min-width: 0; }
.wk-memo .ic { margin-top: 2px; }
.wk-total { font-size: 20px; font-weight: 800; }
.wk-amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wk-visit .row-side form, .wk-payrow .row-side form { display: flex; margin: 0; }
/* rows with several buttons: the buttons move under the names before the names get squeezed */
.wk-visit .row-main, .wk-payrow .row-main { flex: 1 1 0; }
@media (max-width: 759px) {
  .wk-visit, .wk-payrow { flex-wrap: wrap; }
  .wk-visit .row-side, .wk-payrow .row-side { width: 100%; justify-content: flex-end; }
}
@media (max-width: 480px) { .wk-lbl { display: none; } }
@media (max-width: 599px) { .wk-hide-xs { display: none !important; } }

/* a badge whose words may be cut in a crowded row */
.badge.wk-badge { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.wk-badge > span { min-width: 0; overflow-wrap: break-word; }
.wk-badge-allergy { background: #FDEDE3; color: #AD5329; }
.wk-v-ready { background: var(--ok-soft); color: var(--ok); }
.wk-v-used { background: #EFEBF1; color: #6B6075; }
.wk-v-cancelled { background: var(--bad-soft); color: var(--bad); }

/* --- "full today" -------------------------------------------------------------------- */
.wk-full { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.wk-full-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wk-full-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wk-full-text b { font-size: 18px; }
.wk-full-text span { color: var(--ok); font-weight: 700; font-size: 14px; }
.wk-full.is-full { background: #FDEDE3; border-color: #F5CDB7; }
.wk-full.is-full .wk-full-text span { color: #AD5329; }
.wk-full-hours { display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--line);
                 color: var(--ink-2); font-size: 14px; font-weight: 700; }
.wk-full.is-full .wk-full-hours { border-top-color: #F5CDB7; }
.wk-full-hours .ic { width: 18px; height: 18px; color: var(--brand); }
.wk-full-hours.is-closed, .wk-full-hours.is-closed .ic { color: var(--bad); }
.wk-switch { position: relative; flex: none; width: 66px; height: 38px; padding: 0; border: 0; border-radius: 999px;
             background: #DDD3E5; cursor: pointer; transition: background .2s; }
.wk-switch i { position: absolute; top: 4px; inset-inline-start: 4px; width: 30px; height: 30px; border-radius: 50%;
               background: #fff; transition: inset-inline-start .2s; }
.wk-switch[aria-checked="true"] { background: #EE8655; }
.wk-switch[aria-checked="true"] i { inset-inline-start: 32px; }
.wk-switch:focus-visible { outline: 3px solid #E3D7EC; outline-offset: 2px; }

/* --- the board ------------------------------------------------------------------------ */
.wk-tiles { margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr)); }
.wk-tiles .tile { min-height: 104px; padding: 12px 14px; }
.wk-tiles .tile .num { font-size: 28px; }
.wk-tiles .tile .bubble { width: 32px; height: 32px; border-radius: 10px; }
.wk-tiles .tile .bubble .ic { width: 17px; height: 17px; }
.wk-sec { margin-top: 24px; scroll-margin-top: 84px; }
.wk-sec .sec-head { margin: 0 0 10px; }

/* the time (or the running timer) at the start of a row */
.wk-when { flex: none; min-width: 84px; max-width: 120px; min-height: 50px; display: flex; flex-direction: column; align-items: center;
           justify-content: center; gap: 1px; padding: 6px 8px; border-radius: 14px; background: var(--soft);
           color: var(--brand-d); text-align: center; }
.wk-when b { max-width: 100%; font-size: 15px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.wk-when small { max-width: 100%; font-size: 11.5px; font-weight: 800; line-height: 1.2; }
.wk-when.is-late { background: var(--warn-soft); color: var(--warn); }
.wk-when.is-in { background: var(--ok-soft); color: var(--ok); }
.wk-when.is-over { background: #FDEDE3; color: #AD5329; }
.wk-visit.is-over { border-color: #F5CDB7; }

/* a booking's children */
.wk-kids { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.wk-kid { display: inline-flex; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; }
.wk-kid .avatar { width: 26px; height: 26px; font-size: 12px; }
.wk-kid-name { min-width: 0; overflow-wrap: break-word; }
.wk-kid-more { flex: none; color: var(--muted); font-size: 14px; }
.wk-allergy { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
              background: #FDEDE3; color: #AD5329; }
.wk-allergy .ic { width: 14px; height: 14px; stroke-width: 2.4; }

.wk-thumb { flex: none; width: 52px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--soft); }
.wk-n { flex: none; font-weight: 800; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wk-n.is-full { color: var(--ok); }

/* --- sheets ------------------------------------------------------------------------- */
.wk-sheet-who { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 46px;
                padding: 8px 14px; border-radius: var(--r-sm); background: var(--soft); color: var(--brand-d); font-weight: 800; }
.wk-sheet-amt { flex: none; white-space: nowrap; font-size: 18px; color: var(--ink); }
.wk-methods { --min: 130px; }
.wk-methods .choice-body .ic { color: var(--brand); }
input.wk-pin { height: 64px; font-size: 30px; font-weight: 800; letter-spacing: .35em; text-align: center;
               font-variant-numeric: tabular-nums; }
.wk-idcheck { min-height: 44px; }

/* --- walk-in, search boxes ----------------------------------------------------------------- */
.wk-search-row { display: flex; gap: 10px; min-width: 0; }
.wk-search-row > .input-icon, .wk-search-row > input { flex: 1; min-width: 0; }
.wk-fam { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wk-choices { --min: 220px; }
.wk-choices .choice-body .price b { font-size: 16px; }
.wk-total-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.wk-total-row b { font-size: 22px; white-space: nowrap; }
.wk-tall { max-height: min(640px, calc(100dvh - 250px)); }

/* --- the booking page ------------------------------------------------------------------- */
.wk-kidcard { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line);
              border-radius: var(--r); min-width: 0; }
.wk-kidcard-head { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* --- photos ----------------------------------------------------------------------------- */
.wk-drop { position: relative; display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 16px 18px; min-width: 0;
           border: 2px dashed #D9CBE4; border-radius: var(--r); background: #FCF9FD; color: var(--brand-d); cursor: pointer; }
.wk-drop:hover, .wk-drop:focus-within { border-color: var(--brand); }
.wk-drop > .ic { width: 34px; height: 34px; }
.wk-drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-drop-text b { font-size: 17px; }
.wk-drop-text small { color: var(--muted); font-weight: 700; }
.wk-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wk-preview { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.wk-preview:empty { display: none; }
.wk-preview .shot { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--soft); }
.wk-preview .shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wk-shots { grid-template-columns: repeat(auto-fill, minmax(min(140px, 46%), 1fr)); }
.wk-shot { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wk-shot .shot { width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.wk-shot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; min-height: 36px; min-width: 0; }
.wk-frame-now { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wk-frame-big { flex: none; width: 120px; height: 100px; object-fit: contain; border-radius: 12px; background: var(--bg); }

/* --- vouchers, children ------------------------------------------------------------------ */
input.wk-code-in { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wk-voucher { max-width: 560px; }
.wk-voucher .ticket-top .muted { color: rgba(255, 255, 255, .85); }
.wk-voucher-name { font-size: 22px; }
.wk-voucher .ticket-body form { margin: 0; }
.wk-head { --gap: 14px; flex-wrap: wrap; min-width: 0; }
.wk-head-text { display: flex; flex-direction: column; min-width: 0; }
.wk-allergy-big { font-size: 18px; }