/* ===================================================================
   The caution fee — the booking sheets' tick and refund account, and
   the ADMIN's refund card (staff/caution_lib.php; assets/js/caution_tick.js
   and staff/assets/js/caution.js work them).

   The sheets bring their own tokens (--bk-*: rooms_section_css.php's
   .bk-sheet on the storefront, light and dark; room_sheet.php's .rs-sheet
   on the dashboards), and Send Money's account list (bank_suggest.css)
   reads the ones set here inside .cz-box — so the list wears the sheet it
   is in. 360 px first; every tap 44 px or more.

   Linked with the file's own time as its ?v= (cautionTickAssets(),
   cautionAssets()).
   =================================================================== */

.cz-box {
    --ink: var(--bk-ink, #0f172a);
    --ink-2: var(--bk-ink, #334155);
    --mute: var(--bk-mute, #64748b);
    --faint: var(--bk-mute, #94a3b8);
    --line: var(--bk-line, rgba(15, 23, 42, .12));
    --surface: var(--bk-surface, #fff);
    --surface-2: var(--bk-soft, #f6f7fb);
    --brand: var(--bk-accent, #6d28d9);
    --brand-ink: var(--bk-accent, #6d28d9);
    --brand-wash: color-mix(in srgb, var(--bk-accent, #6d28d9) 9%, transparent);
    --brand-soft: color-mix(in srgb, var(--bk-accent, #6d28d9) 16%, transparent);
    --lift-2: 0 14px 34px -18px rgba(15, 23, 42, .45);
    --good: #059669;
    --bad: #dc2626;
    --warn: #b45309;
    --ui-ring: 0 0 0 3px color-mix(in srgb, var(--bk-accent, #6d28d9) 20%, transparent);
    margin: 14px 0 4px;
    color: var(--ink);
}
.cz-box, .cz-box * { box-sizing: border-box; }

/* ── the tick: one tap anywhere on the row ─────────────────────────── */
.cz-tick {
    position: relative; display: flex; align-items: center; gap: 12px;
    min-height: 56px; margin: 0; padding: 10px 14px;
    border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface-2);
    color: var(--ink); cursor: pointer; user-select: none;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cz-tick__in { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cz-tick__box {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border: 2px solid var(--mute); border-radius: 7px; background: var(--surface);
}
.cz-tick__box::after {
    content: ""; width: 11px; height: 6px; margin-top: -2px;
    border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); opacity: 0;
}
.cz-tick__in:checked + .cz-tick__box { background: var(--brand); border-color: var(--brand); }
.cz-tick__in:checked + .cz-tick__box::after { opacity: 1; }
.cz-tick__in:focus-visible + .cz-tick__box { box-shadow: var(--ui-ring); }
.cz-tick__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cz-tick__txt b { font-size: 14.5px; font-weight: 750; line-height: 1.25; color: var(--ink); }
.cz-tick__txt small { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--mute); }
.cz-box.is-on .cz-tick { border-color: var(--brand); background: var(--brand-wash); }

/* ── the refund account ────────────────────────────────────────────── */
.cz-bank { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0; }
.cz-bank[hidden], .cz-typed[hidden] { display: none !important; }
.cz-typed { display: flex; flex-direction: column; gap: 10px; }
.cz-field { margin: 0; }
.cz-field label, .cz-box .bs-anchor > label {
    display: block; margin: 0 0 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--mute);
}
.cz-field input {
    display: block; width: 100%; min-height: 48px; margin: 0; padding: 12px 13px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink);
    font: inherit; font-size: 16px; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.cz-field input::placeholder { color: var(--faint); }
.cz-field input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ui-ring); }
.cz-field input[aria-invalid="true"] { border-color: var(--bad); }
.cz-box .bs-pop { margin-top: 6px; }
.cz-box .bs-card { min-height: 56px; }
/* The dashboards' own sheets size every field and button 40 px; the account
   field and its Change keep their 48 / 44 px on the desk's sheet too. */
#roomSheet .cz-box .cz-field input, #bookingModal .cz-box .cz-field input { height: 48px; min-height: 48px; max-height: none; }
#roomSheet .cz-box .bs-change, #bookingModal .cz-box .bs-change { height: 44px; min-height: 44px; max-height: none; }

/* The storefront has no icon font: the account list's few marks drawn in
   Phosphor's shapes by mask (the dashboards keep Font Awesome). */
.bk-sheet .cz-box i.fas {
    display: inline-block; width: 15px; height: 15px; vertical-align: -2px;
    background: currentColor; -webkit-mask: var(--cz-i) center / contain no-repeat; mask: var(--cz-i) center / contain no-repeat;
}
.bk-sheet .cz-box i.fas::before { content: none; }
.bk-sheet .cz-box i.fa-chevron-left {
    --cz-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z'/%3E%3C/svg%3E");
}
.bk-sheet .cz-box i.fa-chevron-right {
    --cz-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E");
}
.bk-sheet .cz-box i.fa-landmark {
    --cz-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M24,104H48v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16H208V104h24a8,8,0,0,0,4.19-14.81l-104-64a8,8,0,0,0-8.38,0l-104,64A8,8,0,0,0,24,104Zm40,0H96v64H64Zm80,0v64H112V104Zm48,64H160V104h32ZM128,41.39,203.74,88H52.26ZM248,208a8,8,0,0,1-8,8H16a8,8,0,0,1,0-16H240A8,8,0,0,1,248,208Z'/%3E%3C/svg%3E");
}
.bk-sheet .cz-box i.fa-circle-check {
    --cz-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'/%3E%3C/svg%3E");
}

/* ── the sheets' summaries: the caution as its own line ─────────────── */
.cz-sumrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cz-sumrow[hidden] { display: none !important; }

/* ── the ADMIN's card: how much goes back, and why the rest stays ──── */
.wd.cz .wd__ava { background: #ecfdf5; color: #047857; }
.wd.cz .cz-ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px; margin: 10px 0 0; }
.wd.cz .cz-ask__f { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.wd.cz .cz-ask__f > span:first-child {
    font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: #64748b;
}
.wd.cz .cz-ask__in {
    display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 0 0 11px;
    border: 1px solid #dbe2ea; border-radius: 11px; background: #fff;
}
.wd.cz .cz-ask__in:focus-within { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.wd.cz .cz-ask__in b { font-size: 14px; font-weight: 800; color: #64748b; }
#expSheet .wd.cz .cz-ask input, .wd.cz .cz-ask input {
    display: block; width: 100%; min-width: 0; height: 42px; min-height: 42px; margin: 0; padding: 0 11px;
    border: 0; border-radius: 11px; background: transparent; color: #0f172a;
    font: inherit; font-size: 15px; font-weight: 700; line-height: normal; box-shadow: none; outline: none;
    font-variant-numeric: tabular-nums;
}
#expSheet .wd.cz .cz-ask .cz-note, .wd.cz .cz-ask .cz-note {
    height: 44px; min-height: 44px; border: 1px solid #dbe2ea; font-weight: 600; font-size: 14px;
}
#expSheet .wd.cz .cz-ask .cz-note:focus, .wd.cz .cz-ask .cz-note:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.wd.cz .cz-ask__kept { grid-column: 1 / -1; margin: 0; font-size: 12.5px; font-weight: 700; color: #b45309; }
.wd.cz .cz-ask__kept[hidden] { display: none; }
.wd.cz .cz-bad { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .14) !important; }
@media (max-width: 420px) {
    .wd.cz .cz-ask { grid-template-columns: 1fr; }
}

/* ── the booking card's chip and line (booking_card.php) ───────────── */
.rvd-chip.is-cz { background: #ecfdf5; color: #047857; }
.resv-cz {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin: 10px 0 0; padding: 10px 12px; border: 1px solid #d1fae5; border-radius: 12px;
    background: #f0fdf4; color: #065f46; font-size: 13px; font-weight: 600; line-height: 1.4;
}
.resv-cz b { font-weight: 800; }
.resv-cz small { color: #047857; font-weight: 600; }
.resv-cz__go {
    margin-left: auto; min-height: 40px; padding: 0 14px; border: 1px solid #a7f3d0; border-radius: 10px;
    background: #fff; color: #047857; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}