/* (C)2026 Badger Commerce Limited, a subsidiary of Kedos Consulting Limited */

/* Book a table (tableBooking block, /book, /booking/{token}) for every Nova-based theme.

   Phone first: one column, full-width controls, tap targets of 44px or more. From 720px the choices sit in
   a row and the details in two columns. A theme re-skins it through the --tb-* tokens on :root (Bistro
   does); each falls back to Nova's tokens, then to plain values. */

.tb {
    --_bg: var(--tb-bg, #fff);
    --_surface: var(--tb-surface, var(--color-gray-50, #f9fafb));
    --_ink: var(--tb-ink, var(--color-gray-900, #111827));
    --_muted: var(--tb-muted, var(--color-gray-600, #4b5563));
    --_line: var(--tb-line, var(--color-gray-200, #e5e7eb));
    --_accent: var(--tb-accent, var(--color-primary, #4F46E5));
    --_accent-ink: var(--tb-accent-ink, #fff);
    --_ring: var(--tb-ring, var(--color-primary-ring, rgba(79, 70, 229, .3)));
    --_danger: var(--tb-danger, #b42318);
    --_radius: var(--tb-radius, var(--radius-lg, 12px));
    --_display: var(--tb-font-display, var(--font-family-display, inherit));

    max-width: 760px;
    margin: 0 auto;
    padding: 24px 0 48px; /* a block sits in the page's own gutter */
    color: var(--_ink);
}
.tb-page .tb { padding-inline: 16px; } /* /book and /booking/{token} have no other gutter */

.tb-head { margin-bottom: 20px; }
.tb-title {
    /* a link to #ab-title (a hero's Book button) lands below a sticky header, not under it */
    scroll-margin-top: 140px;
    font-family: var(--_display);
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem);
    line-height: 1.1;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--_ink);
}
.tb-subtitle { font-family: var(--_display); font-size: 1.4rem; font-weight: 600; margin: 0 0 12px; }
.tb-intro { margin: 0; color: var(--_muted); font-size: 1.05rem; }

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

/* ── messages ── */
.tb-alert, .tb-done, .tb-warning {
    border-radius: calc(var(--_radius) - 4px);
    padding: 12px 14px;
    margin: 0 0 16px;
    font-weight: 500;
}
.tb-alert { background: #fef3f2; color: var(--_danger); border: 1px solid #fecdca; }
.tb-done { background: #ecfdf3; color: #05603a; border: 1px solid #abefc6; }
.tb-warning { background: #fffaeb; color: #93370d; border: 1px solid #fedf89; }
.tb-alert[hidden], .tb-field[hidden], .tb-hint[hidden] { display: none; }

/* ── fields ── */
.tb-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.tb-label { font-weight: 600; font-size: .95rem; color: var(--_ink); }
.tb-optional { font-weight: 400; color: var(--_muted); }
.tb-hint { margin: 0; font-size: .875rem; color: var(--_muted); line-height: 1.45; }
.tb-hint a { color: inherit; text-decoration: underline; }
.tb-input {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    padding: 10px 12px;
    font: inherit;
    font-size: 16px; /* no zoom on iOS */
    color: var(--_ink);
    background: #fff;
    border: 1px solid var(--_line);
    border-radius: calc(var(--_radius) - 4px);
    appearance: none;
}
select.tb-input {
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}
textarea.tb-input { min-height: 72px; resize: vertical; }
.tb-input:focus { outline: none; border-color: var(--_accent); box-shadow: 0 0 0 3px var(--_ring); }
.tb-input[aria-invalid="true"] { border-color: var(--_danger); }

/* ── step 1: who, when ── */
.tb-choose {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
    align-items: start;
    padding: 16px;
    background: var(--_surface);
    border: 1px solid var(--_line);
    border-radius: var(--_radius);
    margin-bottom: 20px;
}
.tb-choose .tb-field { margin-bottom: 12px; }
.tb-choose .tb-field:not(.tb-field--party):not(.tb-field--date) { grid-column: 1 / -1; }
.tb-choose .tb-field--party .tb-hint { min-height: 0; }
.tb-choose .tb-btn { grid-column: 1 / -1; }
.tb-choose.is-live [data-tb-find] { display: none; }

/* ── buttons ── */
.tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 20px;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.tb-btn:focus-visible { outline: 3px solid var(--_ring); outline-offset: 2px; }
.tb-btn:active { transform: translateY(1px); }
.tb-btn--primary { background: var(--_accent); color: var(--_accent-ink); width: 100%; font-size: 1.05rem; }
.tb-btn--primary:hover { filter: brightness(.94); color: var(--_accent-ink); }
.tb-btn--primary[disabled] { opacity: .6; cursor: progress; }
.tb-btn--quiet { background: #fff; color: var(--_ink); border-color: var(--_line); }
.tb-btn--quiet:hover { border-color: var(--_ink); color: var(--_ink); }
.tb-btn--danger { background: #fff; color: var(--_danger); border-color: #fecdca; }
.tb-btn--danger:hover { background: #fef3f2; color: var(--_danger); }
.tb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }

/* ── step 2: the times ── */
.tb-times, .tb-details { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.tb-legend { font-family: var(--_display); font-size: 1.25rem; font-weight: 600; padding: 0; margin: 0 0 12px; }
.tb-service { margin-bottom: 14px; }
.tb-service__name { margin: 0 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--_muted); }
.tb-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.tb-slot { position: relative; display: block; }
.tb-slot input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tb-slot__time {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px;
    border: 1px solid var(--_line);
    border-radius: calc(var(--_radius) - 4px);
    background: #fff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.tb-slot:hover .tb-slot__time { border-color: var(--_accent); }
.tb-slot input:focus-visible + .tb-slot__time { box-shadow: 0 0 0 3px var(--_ring); border-color: var(--_accent); }
.tb-slot input:checked + .tb-slot__time { background: var(--_accent); border-color: var(--_accent); color: var(--_accent-ink); }
.tb-slot.is-full .tb-slot__time { color: var(--_muted); background: var(--_surface); text-decoration: line-through; opacity: .7; }
.tb-slot.is-full input { cursor: not-allowed; }
.tb-none { margin: 0 0 12px; font-weight: 500; }
.tb-days .tb-slots, .tb-nearby .tb-slots { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tb-nearby { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--_line); }
.tb-nearby[hidden] { display: none; }
.tb-day {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 6px 10px;
    border: 1px solid var(--_line); border-radius: calc(var(--_radius) - 4px);
    background: #fff; color: var(--_ink); text-decoration: none; font-weight: 600; text-align: center;
}
.tb-day:hover, .tb-day:focus-visible { border-color: var(--_accent); color: var(--_ink); }
.tb-loading .tb-slots-wrap { opacity: .5; }
.tb-note { margin: -8px 0 20px; padding: 10px 14px; border-radius: calc(var(--_radius) - 4px); background: var(--_surface); color: var(--_ink); }
.tb-note[hidden] { display: none; }

/* ── the guest ── */
.tb-details { padding-top: 20px; border-top: 1px solid var(--_line); }
.tb-consent { margin: 4px 0 20px; display: flex; flex-direction: column; gap: 12px; }
.tb-check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; cursor: pointer; }
.tb-check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--_accent); }
.tb-policy { padding-left: 12px; border-left: 3px solid var(--_line); }
.tb-status { margin: 12px 0 0; min-height: 1.4em; color: var(--_muted); }

/* ── a booking ── */
.tb-card { background: #fff; border: 1px solid var(--_line); border-radius: var(--_radius); padding: 18px; margin: 0 0 16px; }
.tb-facts { display: grid; gap: 12px; margin: 0 0 12px; }
.tb-facts > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 8px; }
.tb-facts dt { color: var(--_muted); font-weight: 500; }
.tb-facts dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.tb-address { display: block; font-weight: 400; color: var(--_muted); }
.tb-num { font-variant-numeric: tabular-nums; }
.tb-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.tb-status-badge {
    display: inline-block; margin: 0 0 8px; padding: 4px 10px; border-radius: 999px;
    font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--_surface); color: var(--_ink);
}
.tb-status-badge.is-booked, .tb-status-badge.is-confirmed { background: #ecfdf3; color: #05603a; }
.tb-status-badge.is-cancelled, .tb-status-badge.is-declined, .tb-status-badge.is-no_show { background: #fef3f2; color: var(--_danger); }
.tb-status-badge.is-enquiry { background: #fffaeb; color: #93370d; }
.tb-confirm { margin: 0 0 16px; }
.tb-confirm.is-prompted { padding: 16px; border-radius: var(--_radius); background: var(--_surface); }
.tb-confirm.is-prompted p { margin: 0 0 10px; font-weight: 600; }
.tb-change .tb-choose { background: var(--_surface); }

@media (min-width: 720px) {
    .tb { padding-block: 40px 64px; }
    .tb-page .tb { padding-inline: 24px; }
    /* The restaurant gets a row to itself so a long branch name ("Clatter Birmingham, Bullring") shows whole:
       a closed select can't wrap, so it needs the width. Guests, date and area share the row below. */
    .tb-choose { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
    .tb-choose .tb-field:not(.tb-field--party):not(.tb-field--date):not(.tb-field--location) { grid-column: auto; }
    .tb-choose .tb-field--location { grid-column: 1 / -1; }
    .tb-choose .tb-btn { grid-column: auto; margin-bottom: 12px; }
    .tb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
    .tb-btn--primary { width: auto; min-width: 220px; }
    .tb-facts > div { grid-template-columns: 9rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .tb-btn, .tb-slot__time { transition: none; }
}