/* Public pages on layouts.front (My Orders, content pages, public forms).
   Loads after menu.css, which themes the Argon components they share. */

.public-page { margin-top: 72px; padding-block: 28px 80px; background: var(--paper); color: var(--ink); }
.public-page__inner { max-width: 860px; }
.public-page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.public-page__head h1 { margin: 0; font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.public-page__back { display: inline-block; margin-bottom: 8px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.public-page__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.public-page__empty { padding-block: 32px; color: var(--muted); }

.public-page .card {
    margin-bottom: 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: none !important;
    overflow: hidden;
}
.public-page .bg-secondary { background: var(--paper) !important; }
.public-page .card-header { background: transparent !important; border-bottom: 1px solid var(--line); }
.public-page .card-header h3 { margin: 0; font-size: 1.3125rem; font-weight: 800; }
.public-page h3 { font-size: 1.25rem; }
.public-page h4 { font-family: var(--body); font-size: 1rem; font-weight: 500; }
.public-page h6.heading-small { font-size: .9375rem; text-transform: none; letter-spacing: 0; }
.public-page hr { border-color: var(--line); }
.public-page .form-control-label { color: var(--ink); font-weight: 700; }
.public-page .timeline-step { background: var(--saffron); color: var(--navy); }
.public-page .timeline-one-side::before, .public-page .timeline::before { border-color: var(--line); }

.public-page .btn-success, .public-page .btn-success:hover, .public-page .btn-success:focus {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    color: var(--btn-ink);
    box-shadow: none;
}
.public-page .btn-secondary, .public-page .btn-secondary:hover, .public-page .btn-secondary:focus {
    background: transparent;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    box-shadow: none;
}
.public-page .paymentbutton { display: block; margin: 0 24px 24px !important; }

/* Register a visit: one narrow column, the table chosen first as big number chips. */
.visit-intro { max-width: 46ch; margin: -8px 0 28px; color: var(--muted); font-size: 1.0625rem; line-height: 1.5; }
.visit-form { display: grid; gap: 22px; max-width: 560px; }
.visit-label { display: block; margin-bottom: 8px; color: var(--ink); font: 700 1rem/1.3 var(--display); }
.visit-optional { color: var(--muted); font: 500 .9375rem/1.3 var(--body); }

.visit-tables { border: 1.5px solid var(--line); border-radius: 16px; background: var(--paper); }
.visit-tables__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 18px;
    cursor: pointer;
    list-style: none;
}
.visit-tables__summary::-webkit-details-marker { display: none; }
.visit-tables__summary .visit-label { margin: 0; }
.visit-tables__chosen {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--saffron);
    color: var(--navy);
    font: 800 1rem/1.3 var(--display);
}
.visit-tables__change { margin-left: auto; color: var(--muted); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.visit-tables[open] .visit-tables__change, .visit-tables:not(:has(.visit-tables__chosen:not([hidden]))) .visit-tables__change { display: none; }
.visit-tables__summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 14px; }
.visit-tables__list { padding: 0 18px 18px; }
.visit-tables__area { margin: 10px 0 8px; color: var(--muted); font: 600 .9375rem/1.3 var(--body); }

.visit-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.visit-chip__input { position: absolute; opacity: 0; pointer-events: none; }
.visit-chip {
    display: grid;
    place-items: center;
    min-width: 52px;
    height: 52px;
    margin: 0;
    padding: 0 16px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    font: 700 1rem/1 var(--display);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.visit-chip--number { padding: 0; font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.visit-chip:hover { border-color: var(--ink); }
.visit-chip__input:checked + .visit-chip { border-color: var(--saffron); background: var(--saffron); color: var(--navy); }
.visit-chip__input:focus-visible + .visit-chip { outline: 3px solid var(--ink); outline-offset: 2px; }

.visit-input {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 1.5px solid var(--muted);
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    font: 400 1.0625rem/1.4 var(--body);
}
.visit-input::placeholder { color: var(--muted); opacity: .8; }
.visit-input:focus { outline: 3px solid var(--saffron); outline-offset: 0; border-color: var(--ink); }
.visit-input--note { min-height: 96px; resize: vertical; }
.visit-input.is-invalid { border-color: var(--error); }
.visit-error { margin: 8px 0 0; color: var(--error); font-weight: 600; font-size: .9375rem; }
.visit-tables + .visit-error { margin-top: -14px; }

.visit-submit, .public-page .visit-submit {
    justify-self: start;
    min-height: 52px;
    margin: 6px 0 0;
    padding: 12px 32px;
    border-radius: 999px;
    font-size: 1.0625rem;
    font-weight: 700;
}
.visit-submit:disabled { opacity: .6; }

@media (max-width: 575px) {
    .visit-submit, .public-page .visit-submit { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
    .visit-chip { transition: none; }
}

/* Book a table: the visit form's fields and chips, plus a row of days and the booking ticket. */
.res-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.res-group > .visit-label { float: none; width: auto; padding: 0; font-size: 1rem; }
.res-days {
    display: flex;
    gap: 8px;
    margin: 0 -15px;
    padding: 2px 15px 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 15px;
    scrollbar-width: none;
}
.res-days::-webkit-scrollbar { display: none; }
.res-day {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    align-content: center;
    gap: 2px;
    width: 76px;
    height: 64px;
    margin: 0;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    cursor: pointer;
    scroll-snap-align: start;
    transition: background-color .15s, border-color .15s;
}
.res-day__week { font: 600 .875rem/1.1 var(--body); text-transform: capitalize; }
.res-day__date { font: 800 1rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.res-day:hover { border-color: var(--ink); }
.visit-chip__input:checked + .res-day { border-color: var(--saffron); background: var(--saffron); color: var(--navy); }
.visit-chip__input:focus-visible + .res-day { outline: 3px solid var(--ink); outline-offset: 2px; }
.visit-chip__input:disabled + .res-day { border-style: dashed; color: var(--muted); opacity: .55; cursor: not-allowed; }

.res-times + .res-times { margin-top: 14px; }
.res-form.is-js .res-times:not(.is-active), .res-form.is-js .res-times__day { display: none; }
.res-times__day { margin-top: 0; text-transform: capitalize; }
.res-time { min-width: 76px; font-variant-numeric: tabular-nums; }

.res-flash { max-width: 560px; margin: -8px 0 20px; color: var(--muted); font-weight: 600; }
.res-ticket {
    max-width: 560px;
    padding: 24px 24px 22px;
    border: 1.5px solid var(--line);
    border-left: 8px solid var(--saffron);
    border-radius: 18px;
    background: var(--surface, var(--paper));
}
.res-ticket--confirmed, .res-ticket--arrived { border-left-color: var(--ok); }
.res-ticket--cancelled, .res-ticket--no_show { border-left-color: var(--line); }
.res-ticket__state { margin: 0 0 6px; color: var(--ink); font: 800 1.375rem/1.2 var(--display); }
.res-ticket__lead { max-width: 46ch; margin: 0 0 20px; color: var(--muted); line-height: 1.5; }
.res-ticket__when { display: grid; margin: 0 0 20px; }
.res-ticket__time { color: var(--ink); font: 800 clamp(3rem, 14vw, 4.5rem)/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.res-ticket__date { margin-top: 6px; color: var(--ink); font: 600 1.125rem/1.3 var(--body); }
.res-ticket--cancelled .res-ticket__time, .res-ticket--no_show .res-ticket__time { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 3px; }
.res-ticket__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px 20px; margin: 0; padding-top: 18px; border-top: 1.5px dashed var(--line); }
.res-ticket__facts dt { color: var(--muted); font: 500 .875rem/1.3 var(--body); }
.res-ticket__facts dd { margin: 2px 0 0; color: var(--ink); font: 700 1.0625rem/1.35 var(--body); overflow-wrap: anywhere; }
.res-ticket__note { grid-column: 1 / -1; }

.res-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; max-width: 560px; margin-top: 22px; }
.res-actions .visit-submit { margin: 0; }
.res-link { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.res-cancel { max-width: 560px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.res-cancel__btn {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--error);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.res-cancel__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

@media (max-width: 575px) {
    .res-actions .visit-submit { flex: 1 1 100%; text-align: center; }
    .res-ticket { padding: 20px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .res-day { transition: none; }
}

/* Admin-written page content */
.prose { max-width: 70ch; font-size: 1.0625rem; line-height: 1.65; overflow-wrap: anywhere; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin: 1.5em 0 .5em; font-family: var(--display); font-weight: 800; }
.prose p, .prose ul, .prose ol { margin-bottom: 1em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose img, .prose iframe, .prose table { max-width: 100%; }
.prose img { height: auto; border-radius: 10px; }

@media (max-width: 767px) {
    .public-page { margin-top: 64px; }
}