/* ==========================================================================
   The booking page — /c/{monthToken}.

   This is the public face of omnia-karim.com, so it wears that site's design
   rather than the control panel's. Tokens, type stack and the slot row are
   ported from the website's public.css; class names were kept identical
   (.ok-slot, .ok-tag, .ok-btn) so the two files can be compared side by side
   when either one moves.

   Everything is nested under .bk. The control panel is console.css, which reads
   the same tokens at working density; the screens not yet moved across are
   still on coordinate.css.

   RTL: Arabic is the only language here, so boxes use logical properties
   (margin-inline, padding-inline) and the layout mirrors from `dir` alone.
   ========================================================================== */

.bk {
    /* Colours, faces and shapes come from omnia.css, which both surfaces share.
       What is set here is only what makes this one a page for reading. */

    /* Covers the app's gradient body, which belongs to the screens still on
       coordinate.css. */
    min-height: 100vh;
    background: var(--ok-cream);
    color: var(--ok-ink);
    font-family: var(--ok-body);
    /* Naskh has a smaller x-height than Lora at the same px size; 16.5/2 is
       what the website sets for Arabic. */
    font-size: 16.5px;
    line-height: 2;
    -webkit-font-smoothing: antialiased;
}

.bk-shell {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding: 30px 20px 72px;
}

.bk h1,
.bk h2,
.bk h3 {
    margin: 0;
    font-family: var(--ok-display);
    font-weight: 500;
    line-height: 1.12;
}

/* Cormorant Garamond defaults to oldstyle figures, which set "01" as something
   very close to "OI". Anything in the display face read as a number asks for
   lining forms. */
.bk .ok-slot-day {
    font-variant-numeric: lining-nums tabular-nums;
}

.bk p {
    margin: 0;
}

.bk img {
    display: block;
    max-width: 100%;
}

.bk :focus-visible {
    outline: 2px solid var(--ok-gold-ink);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------ header */

.bk-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 34px;
}

.bk-head h1 {
    font-size: clamp(30px, 6vw, 46px);
    font-weight: 400;
}

.bk-head p {
    max-width: 52ch;
    color: var(--ok-muted);
    text-wrap: pretty;
}

.bk .ok-eyebrow {
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--ok-gold-ink);
}

/* Arabic has no upper- and lower-case, and letter-spacing breaks the joins
   between letters, so both are dropped wherever the text is Arabic. */
.bk .ok-eyebrow,
.bk .ok-btn,
.bk .bk-group-label,
.bk .ok-slot-month,
.bk .ok-slot-when {
    text-transform: none;
    letter-spacing: 0;
}

.bk .ok-rule {
    height: 1px;
    width: 96px;
    border: 0;
    margin: 0;
    background: linear-gradient(to left, var(--ok-gold), transparent);
}

/* --------------------------------------------------------------- sections */

.bk-group + .bk-group {
    margin-top: 44px;
}

.bk-group-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--ok-sage);
}

/* The hairline runs from the label to the edge of the measure, which sets the
   group apart without a heading big enough to compete with the slot titles. */
.bk-group-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ok-divider);
}

/* ------------------------------------------------------------------ slots */

.bk .ok-slots {
    border-top: 1px solid var(--ok-divider);
}

.bk .ok-slot {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding-block: 24px;
    border-bottom: 1px solid var(--ok-divider);
}

.bk .ok-slot-date {
    text-align: center;
    padding: 12px 8px;
    border: 1px solid var(--ok-divider);
    border-radius: var(--ok-radius);
    background: color-mix(in srgb, var(--ok-cream) 70%, transparent);
}

.bk .ok-slot-day {
    font-family: var(--ok-display);
    font-size: 32px;
    line-height: 1;
    color: var(--ok-gold-ink);
}

.bk .ok-slot-month {
    margin-top: 4px;
    font-size: 11px;
    color: var(--ok-sage);
    line-height: 1.6;
}

.bk .ok-slot h3 {
    font-size: 22px;
    font-weight: 400;
}

.bk .ok-slot-when {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--ok-faint);
    line-height: 1.7;
    font-variant-numeric: lining-nums tabular-nums;
}

.bk .ok-slot-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 10px;
}

.bk .ok-slot-note {
    margin-top: 12px;
    max-width: 60ch;
    color: var(--ok-muted);
    font-size: .95em;
    line-height: 1.9;
    white-space: pre-wrap;
}

/* A slot with nothing left to book keeps its place in the month — the booker
   asked for it by name and deserves an answer — but drops every gold cue so
   the eye passes over it on the way to one that is open. */
.bk .ok-slot.is-full {
    color: var(--ok-faint);
}

.bk .ok-slot.is-full .ok-slot-day {
    color: var(--ok-faint);
}

.bk .ok-slot.is-full .ok-slot-date {
    background: transparent;
}

.bk .ok-slot.is-full h3 {
    color: var(--ok-muted);
}

/* ------------------------------------------------------------------- tags */

.bk .ok-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.9;
    background: color-mix(in srgb, var(--ok-gold) 14%, transparent);
    color: var(--ok-gold-ink);
}

.bk .ok-tag-sage {
    background: color-mix(in srgb, var(--ok-sage) 18%, transparent);
    color: color-mix(in srgb, var(--ok-sage) 80%, var(--ok-ink));
}

/* Said once, plainly, in place of the button that used to sit here. */
.bk .ok-tag-full {
    padding: 5px 16px;
    border: 1px solid var(--ok-divider-strong);
    background: transparent;
    color: var(--ok-muted);
    font-size: 12px;
}

/* ---------------------------------------------------------------- buttons */

.bk .ok-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    border: 1px solid var(--ok-divider-strong);
    border-radius: 999px;
    font-family: var(--ok-body);
    font-size: 12px;
    line-height: 1.4;
    color: var(--ok-ink);
    background: transparent;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.bk .ok-btn:hover {
    border-color: var(--ok-gold);
    background: color-mix(in srgb, var(--ok-gold) 10%, transparent);
}

.bk .ok-btn-gold {
    border-color: var(--ok-gold);
    color: var(--ok-gold-ink);
}

/* The arrow points the way the page reads. */
.bk .ok-arrow::before {
    content: "\2190";
}

.bk .ok-slot-book {
    margin-top: 16px;
}

/* ------------------------------------------------------------- time chips */

.bk-times {
    margin-top: 14px;
}

.bk-day-label {
    font-size: 11.5px;
    color: var(--ok-sage);
    line-height: 1.8;
}

.bk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* Quiet by default: a row of six filled buttons had every chip shouting as
   loudly as the booking action itself. The fill is spent on the one the
   pointer is actually on. */
.bk .ok-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    border: 1px solid var(--ok-gold);
    border-radius: 999px;
    font-family: var(--ok-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--ok-gold-ink);
    background: transparent;
    cursor: pointer;
    font-variant-numeric: lining-nums tabular-nums;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.bk .ok-chip:hover {
    background: var(--ok-forest);
    border-color: var(--ok-forest);
    color: var(--ok-cream);
}

.bk .ok-chip-more {
    border-color: var(--ok-divider-strong);
    color: var(--ok-muted);
}

.bk .ok-chip-more:hover {
    background: color-mix(in srgb, var(--ok-gold) 10%, transparent);
    border-color: var(--ok-gold);
    color: var(--ok-gold-ink);
}

/* ------------------------------------------------------------ notes/empty */

.bk-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 34px 26px;
    border: 1px dashed var(--ok-divider-strong);
    border-radius: var(--ok-radius);
    color: var(--ok-muted);
    background: color-mix(in srgb, var(--ok-cream) 55%, transparent);
}

.bk-note p {
    max-width: 46ch;
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 560px) {
    .bk-shell {
        padding: 22px 16px 56px;
    }

    .bk .ok-slot {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 14px;
        padding-block: 20px;
    }

    .bk .ok-slot-date {
        padding: 8px 4px;
    }

    .bk .ok-slot-day {
        font-size: 26px;
    }

    .bk .ok-slot h3 {
        font-size: 19px;
    }
}

/* ====================================================================== */
/*  The three screens after the month view: times, form, confirmation.    */
/*  Same tokens, same measure — a booker who taps a time should not feel  */
/*  they left the page they were on.                                      */
/* ====================================================================== */

/* In an RTL page forward reads leftwards, so the way back points right. */
.bk-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--ok-body);
    font-size: 12.5px;
    color: var(--ok-gold-ink);
    cursor: pointer;
}

.bk-back::before {
    content: "\2192";
}

.bk-back:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ------------------------------------------------------------ day blocks */

.bk-day + .bk-day {
    margin-top: 4px;
}

.bk-day {
    padding-block: 20px;
    border-bottom: 1px solid var(--ok-divider);
}

.bk-day-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.bk-day-title {
    font-family: var(--ok-display);
    font-size: 19px;
    color: var(--ok-ink);
}

.bk-day-cap {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--ok-faint);
}

/* A time already taken stays visible — seeing what went first is how a booker
   judges how quickly to decide — but it is plainly not a target. */
.bk .ok-chip:disabled {
    border-color: var(--ok-divider);
    color: var(--ok-faint);
    text-decoration: line-through;
    cursor: not-allowed;
}

.bk .ok-chip:disabled:hover {
    background: transparent;
    border-color: var(--ok-divider);
    color: var(--ok-faint);
}

/* --------------------------------------------------------------- summary */

.bk-summary {
    padding: 22px 24px;
    border: 1px solid var(--ok-divider);
    border-radius: var(--ok-radius);
    background: color-mix(in srgb, var(--ok-cream) 60%, transparent);
}

.bk-summary h2 {
    font-size: 22px;
    font-weight: 400;
}

.bk-summary-when {
    margin-top: 8px;
    font-size: 13px;
    color: var(--ok-muted);
    font-variant-numeric: lining-nums tabular-nums;
}

.bk-summary-note {
    margin-top: 10px;
    color: var(--ok-muted);
    font-size: .95em;
    white-space: pre-wrap;
}

/* The price sits on the last screen before confirming, so nobody types their
   details without seeing what they are agreeing to pay. */
.bk-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ok-divider);
}

.bk-price + .bk-price {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 0;
}

.bk-price dt {
    font-size: 12.5px;
    color: var(--ok-muted);
}

.bk-price dd {
    margin: 0;
    font-family: var(--ok-display);
    font-size: 22px;
    color: var(--ok-gold-ink);
    font-variant-numeric: lining-nums tabular-nums;
}

/* ----------------------------------------------------------------- form */

.bk-form {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bk-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bk-field label {
    font-size: 12.5px;
    color: var(--ok-muted);
}

.bk-field input {
    padding: 13px 14px;
    border: 1px solid var(--ok-divider-strong);
    border-radius: var(--ok-radius);
    background: var(--ok-cream);
    font-family: var(--ok-body);
    font-size: 15px;
    color: var(--ok-ink);
}

.bk-field input::placeholder {
    color: var(--ok-faint);
}

.bk-field input:focus {
    outline: 2px solid var(--ok-gold-ink);
    outline-offset: 1px;
    border-color: var(--ok-gold);
}

.bk .ok-btn-solid {
    justify-content: center;
    background: var(--ok-forest);
    border-color: var(--ok-forest);
    color: var(--ok-cream);
    font-size: 13px;
    padding: 15px 26px;
}

.bk .ok-btn-solid:hover:not(:disabled) {
    background: var(--ok-forest-deep);
    border-color: var(--ok-forest-deep);
    color: var(--ok-cream);
}

.bk .ok-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.bk .ok-btn-block {
    display: flex;
    width: 100%;
}

.bk-error {
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, #9c4221 40%, transparent);
    border-radius: var(--ok-radius);
    background: color-mix(in srgb, #9c4221 8%, transparent);
    color: #7c3a1d;
    font-size: 13px;
}

/* --------------------------------------------------------- confirmation */

.bk-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 44px 26px;
    border: 1px solid var(--ok-divider);
    border-radius: var(--ok-radius);
    background: color-mix(in srgb, var(--ok-cream) 60%, transparent);
}

.bk-done h1 {
    font-size: clamp(26px, 5vw, 34px);
    font-weight: 400;
}

.bk-done-what {
    width: 100%;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--ok-divider);
}

.bk-done-what strong {
    display: block;
    font-family: var(--ok-display);
    font-size: 21px;
    font-weight: 400;
}

.bk-done-what span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--ok-muted);
    font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 560px) {
    .bk-summary {
        padding: 18px 18px;
    }

    .bk-done {
        padding: 34px 20px;
    }
}