/* ================================================
   Restaurant 906 — Booking Calendar page styles
   ================================================ */

.p-booking {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 4em;
}

/* ── Back link ──────────────────────────────────── */
.p-booking__back {
    display: block;
    padding: 1em 1em 0;
    font-size: 87.5%;
    color: #000;
    text-decoration: none;
}
.p-booking__back:hover,
.p-booking__back:focus {
    text-decoration: underline;
    outline-offset: 2px;
}

/* ── Selected course summary ────────────────────── */
.p-booking__summaryBox {
    border: 1px solid #e0e0e0;
    margin: 1.25em 1em;
}
.p-booking__summaryHead {
    padding: 0.7em 1em;
    font-size: 75%;
    font-weight: bold;
    letter-spacing: 0.12em;
    color: #888;
    border-bottom: 1px solid #e0e0e0;
}
.p-booking__summaryRow {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: baseline;
    align-items: baseline;
    padding: 0.7em 1em;
    border-bottom: 1px solid #e0e0e0;
    gap: 1em;
}
.p-booking__summaryRow:last-child {
    border-bottom: none;
    border-top: 2px solid #222;
}
.p-booking__summaryLabel {
    font-size: 87.5%;
    color: #555;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
.p-booking__summaryLabel--price {
    font-size: 100%;
    font-weight: bold;
}
.p-booking__summaryValue {
    font-size: 87.5%;
    text-align: right;
    word-break: break-word;
}
.p-booking__summaryValue--price {
    font-size: 125%;
    font-weight: bold;
}

/* ── Section headings ───────────────────────────── */
/* Matches the Course Detail page's .p-cdetail__menuHeading section-title
   treatment (flex row: accent bar + small bold letter-spaced text). */
.p-booking__secHead {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 2em 1em 0.5em;
}
.p-booking__secTitle {
    font-size: 75%;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #666;
    margin: 0;
}
.p-booking__secAccent {
    display: inline-block;
    width: 1.5em;
    height: 2px;
    background: #d5001c;
    margin-right: 0.5em;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
.p-booking__secRule {
    border: none;
    border-top: 1px solid #e6e6e6;
    margin: 0;
}

/* ── Guest counter ──────────────────────────────── */
.p-booking__guestRow {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 1em;
    padding: 1.1em 1em 1em;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.p-booking__guestLabel {
    font-size: 87.5%;
    min-width: 2.5em;
}
.p-booking__counter {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    border: 1px solid #bbb;
}
.p-booking__counterBtn {
    width: 2.6em;
    height: 2.6em;
    background: transparent;
    border: none;
    font-size: 112.5%;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    line-height: 1;
}
.p-booking__counterBtn:hover:not(:disabled) {
    background: #f5f5f5;
}
.p-booking__counterBtn:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}
.p-booking__counterBtn:disabled {
    color: #ccc;
    cursor: default;
}
.p-booking__counterVal {
    min-width: 3em;
    height: 2.6em;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-weight: bold;
    padding: 0 0.5em;
    box-sizing: border-box;
    text-align: center;
}
.p-booking__guestMax {
    font-size: 87.5%;
    color: #999;
}

/* ── Calendar wrap ──────────────────────────────── */
/* Grid chrome (background, padding, borders, weekend colors, selected
   state) is provided by the shared .p-calendar / .p-calender__wrap /
   .u-bg__light / .c-btn__active classes from public/assets/css/style.css
   (same classes used by /reserve-driving) so both calendars stay in sync. */
.p-booking__calWrap {
    margin: 0 1em;
}
.p-booking__calHdr {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 1em;
    padding: 0.5em 0 0.75em;
}
.p-booking__calNavBtn {
    width: 2em;
    height: 2em;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    box-sizing: border-box;
    color: #4b4b4b;
}
.p-booking__calNavBtn .icon {
    display: inline-block;
    width: 0.8em;
    height: 1.3em;
    vertical-align: middle;
}
.p-booking__calNavBtn .icon svg {
    width: 100%;
    height: 100%;
}
.p-booking__calNavBtn:hover:not(:disabled) {
    color: #d5001c;
}
.p-booking__calNavBtn:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}
.p-booking__calNavBtn:disabled {
    color: #ccc;
    cursor: default;
}
.p-booking__calMonthLabel {
    font-weight: bold;
    font-size: 125%;
    min-width: 8em;
    text-align: center;
}
.p-booking__calTh {
    text-align: center;
}
.p-booking__calCell {
    text-align: center;
}

/* Date buttons (selectable and disabled) */
.p-booking__calBtn {
    cursor: pointer;
}
.p-booking__calBtn:focus {
    outline: 2px solid #000;
    outline-offset: -2px;
}
/* Disabled (past/closed/full/outside-range) — muted text over the shared
   .p-calendar button:disabled background (#e6e6e6), beats weekend color */
.p-booking__calBtn:disabled {
    color: #ccc;
    cursor: default;
}

/* ── Availability legend ────────────────────────── */
.p-booking__legend {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1.25em;
    padding: 0.75em 1em;
    font-size: 75%;
    color: #666;
    border-top: 1px solid #e6e6e6;
}

/* ── Date summary ───────────────────────────────── */
.p-booking__dateSummary {
    padding: 1.25em 1em 0.5em;
    font-size: 87.5%;
    font-weight: bold;
    min-height: 2.5em;
}

/* ── Time slot grid ─────────────────────────────── */
.p-booking__slotsGrid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5em;
    padding: 0 1em 0.5em;
}
@media (min-width: 480px) {
    .p-booking__slotsGrid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 640px) {
    .p-booking__slotsGrid { grid-template-columns: repeat(4, 1fr); }
}
.p-booking__slotCell {
    cursor: pointer;
}
.p-booking__slotBtn {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
    padding: 0.75em 0.25em;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    gap: 0.2em;
    box-sizing: border-box;
}
.p-booking__slotBtn:hover:not([disabled]) {
    border-color: #888;
}
.p-booking__slotBtn:focus {
    outline-offset: 1px;
}
.p-booking__slotBtn.is-selected {
    border: 2px solid #d5001c;
    background: #d5001c;
    color: #fff;
}
.p-booking__slotBtn.is-selected:hover,
.p-booking__slotBtn.is-selected:focus {
    border-color: #d5001c;
    background: #d5001c;
    color: #fff;
}
.p-booking__slotBtn.is-selected .p-booking__slotTime,
.p-booking__slotBtn.is-selected .p-booking__slotSymbol {
    color: #fff;
}
.p-booking__slotBtn--full,
.p-booking__slotBtn--past {
    background: #f5f5f5;
    border-color: #e8e8e8;
    cursor: not-allowed;
    opacity: 0.6;
}
.p-booking__slotTime {
    font-weight: bold;
    font-size: 87.5%;
}
.p-booking__slotSymbol {
    font-size: 87.5%;
    color: #444;
}
.p-booking__slotBtn--full .p-booking__slotTime,
.p-booking__slotBtn--past .p-booking__slotTime {
    color: #999;
    text-decoration: line-through;
}
.p-booking__slotBtn--full .p-booking__slotSymbol,
.p-booking__slotBtn--past .p-booking__slotSymbol {
    color: #bbb;
}
.p-booking__slotsEmpty {
    grid-column: 1 / -1;
    font-size: 87.5%;
    color: #999;
    text-align: center;
    padding: 1em 0;
}

/* ── Proceed button ─────────────────────────────── */
.p-booking__proceedBtn {
    display: block;
    width: calc(100% - 2em);
    margin: 1.5em 1em 0;
    padding: 1em;
    border: none;
    background: #e0e0e0;
    color: #999;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
    cursor: not-allowed;
    box-sizing: border-box;
    letter-spacing: 0.05em;
}
.p-booking__proceedBtn.is-enabled {
    background: #000;
    color: #fff;
    cursor: pointer;
}
.p-booking__proceedBtn.is-enabled:hover {
    background: #222;
}
.p-booking__proceedBtn.is-enabled:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ── Slot-full error modal ────────────────────────────────── */
.p-booking__modalOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-booking__modal {
    background: #fff;
    padding: 40px 32px 32px;
    max-width: 480px;
    width: calc(100% - 40px);
    text-align: center;
}

/* ── Existing-reservation warning modal (narrower, two-button layout) ── */
#booking-existing-reservation-overlay .p-booking__modal {
    max-width: 420px;
}

.p-booking__modalMsg {
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 28px;
    color: #111;
    text-align: left;
    white-space: pre-line;
    word-break: break-word;
}

.p-booking__modalClose {
    display: inline-block;
    background: #000;
    color: #fff;
    border: none;
    padding: 14px 32px;
    font-size: 14px;
    letter-spacing: 0.05em;
    cursor: pointer;
    width: 100%;
}

.p-booking__modalClose:hover,
.p-booking__modalClose:focus {
    background: #333;
    outline: none;
}

/* ── Cancellation policy link ───────────────────── */
.p-booking__policyLink {
    text-align: center;
    padding: 1.5em 1em 1em;
}
.p-booking__policyLink a {
    font-size: 87.5%;
    color: #000;
    text-decoration: underline;
}
.p-booking__policyLink a:hover,
.p-booking__policyLink a:focus {
    text-decoration: none;
    outline-offset: 2px;
}

/* ================================================
   Restaurant 906 — Reservation Information Form page styles
   ================================================ */

.p-resinfo {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 4em;
}

/* ── Page title ─────────────────────────────────── */
.p-resinfo__title {
    font-size: 175%;
    font-weight: bold;
    line-height: 1.3;
    margin: 0.75em 0.5em 0.5em;
    padding: 0;
}

/* ── Reservation summary ────────────────────────── */
.p-resinfo__summaryHead {
    padding: 0.7em 1em 0.5em;
    font-size: 75%;
    font-weight: bold;
    letter-spacing: 0.12em;
    color: #888;
}
.p-resinfo__summaryRow {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: baseline;
    align-items: baseline;
    padding: 0.65em 1em;
    border-top: 1px solid #e6e6e6;
    gap: 1em;
}
.p-resinfo__summaryLabel {
    font-size: 87.5%;
    color: #555;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
.p-resinfo__summaryValue {
    font-size: 87.5%;
    font-weight: bold;
    text-align: right;
    word-break: break-word;
}

/* ── Required-field notice ──────────────────────── */
.p-resinfo__requiredNotice {
    font-size: 81.25%;
    color: #888;
    padding: 1em 1em 0.25em;
    margin: 0;
}
.p-resinfo__required {
    color: #d5001c;
}

/* ── Section headings ───────────────────────────── */
/* Matches the Course Detail page's .p-cdetail__menuHeading section-title
   treatment (flex row: accent bar + small bold letter-spaced text). */
.p-resinfo__secHead {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 1.75em 1em 0.5em;
}
.p-resinfo__secTitle {
    font-size: 75%;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #666;
    margin: 0;
}
.p-resinfo__secAccent {
    display: inline-block;
    width: 1.5em;
    height: 2px;
    background: #d5001c;
    margin-right: 0.5em;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
.p-resinfo__secRule {
    border: none;
    border-top: 1px solid #e6e6e6;
    margin: 0;
}

/* ── Member description ─────────────────────────── */
.p-resinfo__memberDesc {
    font-size: 81.25%;
    color: #666;
    line-height: 1.7;
    padding: 0.9em 1em 0.5em;
    margin: 0;
}

/* ── Member form area ───────────────────────────── */
.p-resinfo__formArea {
    padding: 0 1em;
}
.p-resinfo__formArea .c-form__parts {
    margin-bottom: 1.25em;
}

/* ── Read-only input: override global [readonly] rule ─
   style.css sets padding:0; border:none; background:#fff on all
   readonly inputs. This rule has identical specificity (0,0,2,1)
   and loads later via @yield('styles.head'), so it wins.         */
input.p-resinfo__roInput[readonly] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.65em 0.9em;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    color: #222;
}
input.p-resinfo__roInput[readonly]:focus {
    outline: 2px solid #000;
    outline-offset: 1px;
}

/* ── Stack l-2clm on mobile (767px matches app breakpoint) ── */
@media screen and (max-width: 767px) {
    .p-resinfo__formArea .l-2clm {
        width: 100%;
    }
}
.p-resinfo__textarea {
    width: 100%;
    padding: 0.7em 0.85em;
    font-size: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    line-height: 1.6;
    background: #fff;
    color: #222;
    resize: vertical;
    min-height: 6em;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.p-resinfo__textarea:focus {
    outline: 2px solid #000;
    outline-offset: 1px;
}
.p-resinfo__textarea::placeholder {
    color: #aaa;
}

/* ── Policy agreement area ──────────────────────── */
.p-resinfo__policyArea {
    margin: 1.5em 1em 0;
    padding: 1.1em 1.25em;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
}
.p-resinfo__policyLabel {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 0.6em;
    font-size: 87.5%;
    cursor: pointer;
    line-height: 1.5;
}
.p-resinfo__policyCheck {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.15em;
    cursor: pointer;
    accent-color: #000;
}
.p-resinfo__policyCheck:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}
.p-resinfo__policyLink {
    color: #000;
    text-decoration: underline;
}
.p-resinfo__policyLink:hover,
.p-resinfo__policyLink:focus {
    text-decoration: none;
    outline-offset: 2px;
}

/* ── Back button (secondary action) ────────────── */
.p-resinfo__backBtn {
    display: block;
    width: calc(100% - 2em);
    margin: 0.75em 1em 0;
    padding: 1em;
    border: 2px solid #222;
    background: #fff;
    color: #222;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    letter-spacing: 0.05em;
    font-family: inherit;
}
.p-resinfo__backBtn:hover {
    background: #f5f5f5;
}
.p-resinfo__backBtn:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ── Confirm button ─────────────────────────────── */
.p-resinfo__confirmBtn {
    display: block;
    width: calc(100% - 2em);
    margin: 1.5em 1em 0;
    padding: 1em;
    border: none;
    background: #e0e0e0;
    color: #999;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
    cursor: not-allowed;
    box-sizing: border-box;
    letter-spacing: 0.05em;
    font-family: inherit;
}
.p-resinfo__confirmBtn.is-enabled {
    background: #000;
    color: #fff;
    cursor: pointer;
}
.p-resinfo__confirmBtn.is-enabled:hover {
    background: #222;
}
.p-resinfo__confirmBtn.is-enabled:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ================================================
   Restaurant 906 — Reservation Confirmation page
   ================================================ */

/* ── Page container ─────────────────────────────── */
.p-confirm {
    max-width: 800px;
    margin: 0 auto;
    padding: 2em 2em 5em;
    box-sizing: border-box;
}
@media screen and (max-width: 767px) {
    .p-confirm {
        padding: 1.5em 1em 3em;
    }
}

/* ── Page title and description ─────────────────── */
.p-confirm__title {
    font-size: 175%;
    font-weight: bold;
    line-height: 1.3;
    margin: 0 0 0.4em;
    padding: 0;
}
.p-confirm__desc {
    font-size: 87.5%;
    color: #666;
    line-height: 1.65;
    margin: 0 0 2em;
    padding: 0;
}

/* ── Bordered information panels ─────────────────── */
.p-confirm__panel {
    border: 1px solid #d0d0d0;
    background: #fff;
    margin-bottom: 1.25em;
}

/* ── Panel section headings ─────────────────────── */
/* Matches the Course Detail page's .p-cdetail__menuHeading section-title
   treatment (flex row: accent bar + small bold letter-spaced text). */
.p-confirm__panelHead {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 1em 1.25em;
}
.p-confirm__panelAccent {
    display: inline-block;
    width: 1.5em;
    height: 2px;
    background: #d5001c;
    margin-right: 0.5em;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
.p-confirm__panelTitle {
    font-size: 75%;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #666;
    margin: 0;
}
.p-confirm__panelRule {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 0;
}

/* ── Summary rows ────────────────────────────────── */
.p-confirm__summaryRow {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: baseline;
    align-items: baseline;
    padding: 0.75em 1.25em;
    border-top: 1px solid #e8e8e8;
    gap: 1em;
}
/* No top border on the first row — the panel rule provides the separator */
.p-confirm__panel dl > div:first-child {
    border-top: none;
}
.p-confirm__summaryLabel {
    font-size: 87.5%;
    color: #666;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
.p-confirm__summaryValue {
    font-size: 87.5%;
    font-weight: bold;
    text-align: right;
    white-space: pre-wrap;
    word-break: break-word;
    color: #111;
}
.p-confirm__summaryValue.is-empty {
    color: #999;
    font-weight: normal;
}

/* ── Payment notice ──────────────────────────────── */
.p-confirm__notice {
    border-left: 4px solid #a08040;
    background: #fdfcf8;
    padding: 0.85em 1.1em;
    font-size: 87.5%;
    color: #555;
    line-height: 1.7;
    margin-bottom: 2em;
    box-sizing: border-box;
}

/* ── Action button group ─────────────────────────── */
.p-confirm__actions {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    gap: 0.75em;
}

#booking-existing-reservation-overlay .p-confirm__actions {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

/* ── Primary confirm button ─────────────────────── */
.p-confirm__submitBtn {
    display: inline-block;
    padding: 0.87em 1.75em;
    border: none;
    background: #000;
    color: #fff;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    letter-spacing: 0.04em;
    font-family: inherit;
    min-width: 200px;
    box-sizing: border-box;
    -webkit-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}
.p-confirm__submitBtn:hover {
    background: #222;
}
.p-confirm__submitBtn:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ── Secondary edit button ──────────────────────── */
.p-confirm__editBtn {
    display: inline-block;
    padding: 0.87em 1.75em;
    border: 2px solid #222;
    background: #fff;
    color: #222;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    letter-spacing: 0.04em;
    font-family: inherit;
    min-width: 200px;
    box-sizing: border-box;
    -webkit-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}
.p-confirm__editBtn:hover {
    background: #f5f5f5;
}
.p-confirm__editBtn:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ── Mobile overrides (≤767px) ───────────────────── */
@media screen and (max-width: 767px) {
    .p-confirm__actions {
        -webkit-flex-direction: column;
        flex-direction: column;
        gap: 0.75em;
    }
    .p-confirm__submitBtn {
        width: 100%;
        min-width: 0;
        -webkit-order: -1;
        order: -1; /* Primary button on top on mobile */
    }
    .p-confirm__editBtn {
        width: 100%;
        min-width: 0;
    }
}

/* ================================================
   Restaurant 906 — Reservation Complete page
   ================================================ */

.p-complete {
    max-width: 800px;
    margin: 0 auto;
    padding: 2em 2em 5em;
    box-sizing: border-box;
}
@media screen and (max-width: 767px) {
    .p-complete { padding: 1.5em 1em 3em; }
}

.p-complete__title {
    margin: 0 0 0.5em;
    padding: 0;
    line-height: 1.3;
}

.p-complete__divider {
    border: none;
    border-top: 1px solid #d0d0d0;
    margin: 0 0 2em;
}

/* Equal-width main action buttons on desktop */
.p-complete__mainBtns {
    list-style: none;
    padding: 0;
    gap: 1.25em;
}
.p-complete__mainBtns > li {
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
}
.p-complete__mainBtns > li .c-linkBtn {
    display: block;
    width: 100%;
}
.p-complete__mainBtns > li .c-linkBtn a {
    min-width: 0;
    width: 100%;
}

/* Keyboard focus visibility */
.p-complete .c-linkBtn a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ================================================
   Restaurant 906 — Reservation Conflict Error page
   ================================================ */

.p-conflict {
    max-width: 800px;
    margin: 0 auto;
    padding: 2em 2em 5em;
    box-sizing: border-box;
}
@media screen and (max-width: 767px) {
    .p-conflict { padding: 1.5em 1em 3em; }
}

.p-conflict__title {
    margin: 0 0 0.5em;
    padding: 0;
    line-height: 1.3;
}

.p-conflict__divider {
    border: none;
    border-top: 1px solid #d0d0d0;
    margin: 0 0 2em;
}

/* Bordered conflict message panel */
.p-conflict__panel {
    border: 1px solid #d0d0d0;
    background: #fff;
    padding: 1.25em 1.5em;
    margin-bottom: 1.25em;
}

/* Full-width retry button */
.p-conflict__retryBtn {
    display: block;
    width: 100%;
}
.p-conflict__retryBtn a {
    display: block;
    min-width: 0;
    width: 100%;
}

/* Keyboard focus visibility */
.p-conflict .c-linkBtn a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ================================================
   Restaurant 906 — Cancellation Policy page styles
   ================================================ */

.p-cancel {
    max-width: 900px;
    margin: 0 auto;
    padding: 2em 2em 5em;
    box-sizing: border-box;
}
@media screen and (max-width: 767px) {
    .p-cancel { padding: 1.5em 1em 3em; }
}

/* ── Page title ─────────────────────────────────── */
.p-cancel__pageTitle {
    margin: 0 0 0.5em;
    padding: 0;
    line-height: 1.3;
}
.p-cancel__titleRule {
    border: none;
    border-top: 1px solid #d0d0d0;
    margin: 0 0 2em;
}
.p-cancel__desc {
    font-size: 87.5%;
    color: #666;
    line-height: 1.75;
    margin-bottom: 2em;
}

/* ── Section headings ───────────────────────────── */
.p-cancel__secHead {
    margin: 2em 0 1em;
}
.p-cancel__secHead:first-of-type {
    margin-top: 0;
}
.p-cancel__secAccent {
    width: 1.75em;
    height: 2px;
    background: #d5001c;
}

/* ── Fee section ────────────────────────────────── */
.p-cancel__feeSection {
    margin-bottom: 2em;
}
.p-cancel__feeRows {
    margin-top: 0;
}
.p-cancel__feeRow {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    padding: 0.75em 0;
    border-bottom: 1px solid #e6e6e6;
    gap: 1em;
}
.p-cancel__feeRow:first-child {
    border-top: 1px solid #e6e6e6;
}
.p-cancel__feeCondition {
    font-size: 87.5%;
    line-height: 1.5;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}
.p-cancel__feeAmount {
    font-size: 87.5%;
    font-weight: bold;
    white-space: nowrap;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    text-align: right;
}
.p-cancel__feeAmount--free    { color: #000; }
.p-cancel__feeAmount--penalty { color: #d5001c; }

/* ── Notes ──────────────────────────────────────── */
.p-cancel__notes {
    margin-bottom: 2em;
}
.p-cancel__note {
    font-size: 75%;
    color: #666;
    line-height: 1.75;
    display: block;
}
.p-cancel__note + .p-cancel__note {
    margin-top: 0.4em;
}

/* ── Special cases ──────────────────────────────── */
.p-cancel__specialSection {
    margin-bottom: 2em;
}
.p-cancel__specialItems {
    margin-top: 1em;
}
.p-cancel__specialItem {
    font-size: 87.5%;
    line-height: 1.75;
    margin-bottom: 0.75em;
}
.p-cancel__specialItem:last-child {
    margin-bottom: 0;
}
.p-cancel__specialLabel {
    font-weight: bold;
}

/* ── Contact block ──────────────────────────────── */
.p-cancel__contact {
    text-align: center;
    border: 1px solid #d0d0d0;
    padding: 1.75em 1.5em;
    margin-bottom: 2.5em;
}
.p-cancel__contactTitle {
    font-size: 75%;
    color: #666;
    letter-spacing: 0.1em;
    margin-bottom: 0.6em;
}
.p-cancel__phone {
    display: block;
    font-size: 175%;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    line-height: 1.3;
    margin-bottom: 0.35em;
}
.p-cancel__phone:hover,
.p-cancel__phone:focus {
    text-decoration: underline;
    outline-offset: 2px;
}
.p-cancel__hours {
    font-size: 75%;
    color: #666;
    line-height: 1.75;
}

/* ── Back button ────────────────────────────────── */
.p-cancel__backWrap {
    max-width: 320px;
    margin: 0 auto;
}
.p-cancel__backWrap .c-linkBtn {
    display: block;
    width: 100%;
}
.p-cancel__backWrap .c-linkBtn a {
    display: block;
    width: 100%;
}
@media screen and (max-width: 767px) {
    .p-cancel__backWrap {
        max-width: 100%;
    }
}

/* ── Focus visible ──────────────────────────────── */
.p-cancel .p-cancel__phone:focus-visible,
.p-cancel .c-linkBtn a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}