/* ============================================================
   RENE Hair Studio - Booking, newsletter & admin styles
   ------------------------------------------------------------
   Loaded after css/styles.css and reuses its custom properties
   (--color-gold, --gradient-primary, --radius-*, --shadow-*),
   so the booking UI inherits the existing brand automatically.
   ============================================================ */

/* ============================================================
   Booking modal
   ============================================================ */
#bookingModal .modal-content,
#bookingConfirmationModal .modal-content {
    background: var(--color-white);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl), var(--shadow-gold);
}

#bookingModal .modal-header,
#bookingConfirmationModal .modal-header {
    border-bottom: 2px solid var(--color-gold);
    padding: 1.25rem 1.5rem;
}

#bookingModal .modal-title,
#bookingConfirmationModal .modal-title {
    font-family: var(--font-heading);
    color: var(--color-black);
    font-weight: 700;
}

#bookingModal .modal-body,
#bookingConfirmationModal .modal-body {
    padding: 1.5rem;
}

.booking-intro {
    color: var(--color-rose-gold);
    font-style: italic;
    margin-bottom: 1.5rem;
}

/* Two-column form that collapses on small screens */
.booking-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.booking-grid__full {
    grid-column: 1 / -1;
}

@media (max-width: 575px) {
    .booking-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Appointment time slots
   ============================================================ */
.rene-slots {
    border: 1px solid var(--color-beige);
    border-radius: var(--radius-md);
    padding: 1rem;
    background: var(--color-light-beige);
    min-height: 90px;
}

.rene-slots__meta {
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-rose-gold);
    margin-bottom: .75rem;
}

.rene-slots__message {
    margin: 0;
    color: var(--color-rose-gold);
    font-size: .9rem;
}

.rene-slots__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: .5rem;
}

.rene-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    min-height: 52px;
    padding: .5rem .25rem;
    border: 2px solid var(--color-beige);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-black);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rene-slot:hover:not(:disabled) {
    border-color: var(--color-gold);
    transform: translateY(-2px);
}

.rene-slot:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 2px;
}

.rene-slot.is-selected {
    background: var(--gradient-primary);
    border-color: transparent;
    color: var(--color-white);
    box-shadow: var(--shadow-gold);
}

.rene-slot:disabled {
    cursor: not-allowed;
    opacity: .55;
    background: var(--color-soft-grey);
    border-style: dashed;
}

.rene-slot__note {
    font-size: .65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-rose-gold-dark);
}

.rene-slot--full .rene-slot__note {
    color: #a02334;
}

/* ============================================================
   Confirmation screen
   ============================================================ */
.rene-confirmation__ref {
    text-align: center;
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--gradient-primary);
    color: var(--color-white);
    margin-bottom: 1.5rem;
}

.rene-confirmation__ref span {
    display: block;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .9;
}

.rene-confirmation__ref strong {
    font-size: 1.6rem;
    letter-spacing: .05em;
}

.rene-confirmation__list {
    display: grid;
    grid-template-columns: minmax(90px, 30%) 1fr;
    gap: .5rem 1rem;
    margin: 0 0 1.5rem;
}

.rene-confirmation__list dt {
    font-weight: 600;
    color: var(--color-rose-gold-dark);
}

.rene-confirmation__list dd {
    margin: 0;
    word-break: break-word;
}

.rene-confirmation__salon {
    padding: 1rem;
    border-left: 4px solid var(--color-gold);
    background: var(--color-light-beige);
    border-radius: var(--radius-md);
}

.rene-confirmation__salon h4 {
    font-size: 1.1rem;
    margin-bottom: .5rem;
}

.rene-confirmation__salon p {
    margin-bottom: .25rem;
    font-size: .9rem;
}

.rene-confirmation__note {
    margin-top: 1rem;
    font-size: .85rem;
    color: var(--color-rose-gold);
}

/* ============================================================
   Badges
   ============================================================ */
.rene-badge {
    display: inline-block;
    padding: .15rem .65rem;
    border-radius: var(--radius-full);
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.rene-badge--pending   { background: #fff3cd; color: #7a5c00; }
.rene-badge--confirmed { background: #d4edda; color: #155724; }
.rene-badge--completed { background: #d7e6f5; color: #14456e; }
.rene-badge--cancelled { background: #f8d7da; color: #721c24; }
.rene-badge--noshow    { background: #ececec; color: #444; }
.rene-badge--muted     { background: #f1f1f1; color: #777; }
.rene-badge--override  { background: var(--color-rose-gold); color: #fff; margin-left: .35rem; }

/* ============================================================
   Newsletter additions
   ============================================================ */
.newsletter-links {
    margin-top: 1rem;
    font-size: .85rem;
}

.newsletter-links button {
    background: none;
    border: none;
    color: var(--color-rose-gold);
    text-decoration: underline;
    padding: .25rem .5rem;
    cursor: pointer;
    min-height: 44px;
}

.newsletter-links button:hover {
    color: var(--color-gold-dark);
}

/* ============================================================
   Admin dashboard
   ============================================================ */
body.rene-admin-open {
    overflow: hidden;
}

.rene-admin {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(10, 10, 10, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: var(--font-body);
}

.rene-admin__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    max-height: 92vh;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: 0 16px 64px rgba(0, 0, 0, .35);
    overflow: hidden;
}

/* The panel is a height-capped column flexbox. Without flex:0 0 auto the
   header and tab strip are treated as shrinkable and get squashed when the
   body content is tall - which clipped the tab labels in half. The body
   needs min-height:0 so it can shrink and scroll instead of pushing the
   chrome out of shape. */
.rene-admin__head,
.rene-admin__tabs {
    flex: 0 0 auto;
}

.rene-admin__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 2px solid var(--color-gold);
}

.rene-admin__title {
    flex: 1;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
}

.rene-admin__close {
    border: none;
    background: none;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-black);
    padding: .25rem .6rem;
    border-radius: var(--radius-sm);
}

.rene-admin__close:hover { background: var(--color-light-beige); }

/* The tab strip scrolls sideways when the five labels don't fit.
   flex-shrink must be 0 on the tabs: with the default of 1 they
   squeeze below their text width instead of overflowing, so the
   labels get clipped AND the bar never becomes scrollable. */
.rene-admin__tabs {
    position: relative;
    display: flex;
    gap: .25rem;
    padding: .75rem 1.5rem 0;
    border-bottom: 1px solid var(--color-beige);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 1.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-beige) transparent;
}

/* A slim, always-visible scrollbar so it's obvious there is more
   to the right (macOS/iOS hide overlay scrollbars until you swipe). */
.rene-admin__tabs::-webkit-scrollbar {
    height: 4px;
}

.rene-admin__tabs::-webkit-scrollbar-track {
    background: transparent;
}

.rene-admin__tabs::-webkit-scrollbar-thumb {
    background: var(--color-beige);
    border-radius: var(--radius-full);
}

.rene-admin__tabs:hover::-webkit-scrollbar-thumb {
    background: var(--color-rose-gold-light);
}

.rene-admin__tab {
    flex: 0 0 auto;              /* never shrink below the label */
    scroll-snap-align: end;
    border: none;
    background: none;
    padding: .6rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-rose-gold-dark);
    border-bottom: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    min-width: 0;                /* beats the global 44px min-width rule */
}

/* Fade on the right edge hinting at the off-screen tabs. It is a
   sticky flex item, so it stays pinned to the visible edge while
   the strip scrolls, and it disappears once you reach the end. */
.rene-admin__tabs::after {
    content: '';
    flex: 0 0 1.5rem;
    align-self: stretch;
    position: sticky;
    right: -1.5rem;
    margin-left: -1.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-white) 75%);
    pointer-events: none;
}

.rene-admin__tab:hover { color: var(--color-gold-dark); }

.rene-admin__tab.is-active {
    color: var(--color-black);
    border-bottom-color: var(--color-gold);
}

.rene-admin__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.25rem 1.5rem 2rem;
    overflow: auto;
}

/* These panels use <section>, which the site-wide `section { padding: 6rem 0 }`
   rule in styles.css would otherwise pad by 96px top and bottom - leaving a
   224px hole between each block inside the dashboard. */
.rene-admin__section {
    padding: 0;
    margin-bottom: 1.75rem;
}

.rene-admin__section:last-child { margin-bottom: 0; }

.rene-admin__section h3 {
    font-size: 1.2rem;
    margin-bottom: .75rem;
}

.rene-admin__section--warning {
    padding: 1rem 1.25rem;
    /* re-stated after the .rene-admin__section padding reset above */
    border-left: 4px solid var(--color-rose-gold);
    background: var(--color-light-beige);
    border-radius: var(--radius-md);
    font-size: .9rem;
}

.rene-admin__empty {
    padding: 2rem 0;
    text-align: center;
    color: var(--color-rose-gold);
}

/* --- Stat cards --- */
.rene-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .75rem;
}

.rene-stat {
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--color-light-beige);
    border-left: 4px solid var(--color-gold);
    text-align: center;
}

.rene-stat__value {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.rene-stat__label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-rose-gold-dark);
}

.rene-stat--pending   { border-left-color: #e0a800; }
.rene-stat--confirmed { border-left-color: #28a745; }
.rene-stat--completed { border-left-color: #2b6cb0; }
.rene-stat--cancelled { border-left-color: #c0392b; }

/* --- Toolbar --- */
.rene-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.rene-toolbar__spacer { flex: 1; }

.rene-toolbar__label { font-size: .85rem; font-weight: 600; }

.rene-toolbar__note { font-size: .8rem; color: var(--color-rose-gold); }

.rene-input {
    border: 2px solid var(--color-beige);
    border-radius: var(--radius-md);
    padding: .5rem .75rem;
    font-size: .9rem;
    font-family: var(--font-body);
    background: var(--color-white);
    color: var(--color-black);
    max-width: 100%;
}

.rene-input:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 .2rem rgba(212, 175, 55, .2);
}

.rene-input.is-invalid { border-color: #c0392b; }

.rene-btn {
    border: 1px solid var(--color-beige);
    background: var(--color-white);
    color: var(--color-black);
    border-radius: var(--radius-full);
    padding: .45rem 1rem;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 38px;
}

.rene-btn:hover:not(:disabled) {
    border-color: var(--color-gold);
    color: var(--color-gold-dark);
}

.rene-btn:disabled { opacity: .5; cursor: not-allowed; }

.rene-btn--sm { padding: .25rem .65rem; font-size: .75rem; min-height: 32px; }

.rene-btn--primary {
    background: var(--gradient-primary);
    border-color: transparent;
    color: var(--color-white);
}

.rene-btn--primary:hover { color: var(--color-white); box-shadow: var(--shadow-gold); }

.rene-btn--danger { color: #a02334; border-color: #f5c6cb; }

.rene-btn--danger:hover { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }

/* --- Tables --- */
.rene-table-wrap { overflow-x: auto; }

.rene-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.rene-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    background: var(--color-light-beige);
    padding: .6rem .5rem;
    border-bottom: 2px solid var(--color-gold);
    white-space: nowrap;
}

.rene-table td {
    padding: .6rem .5rem;
    border-bottom: 1px solid var(--color-beige);
    vertical-align: top;
}

.rene-table tbody tr:hover { background: rgba(212, 175, 55, .07); }

.rene-sort {
    border: none;
    background: none;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    color: inherit;
}

.rene-sort.is-active { color: var(--color-gold-dark); }

.rene-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.rene-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: .82rem;
}

/* --- Detail lists, schedule, today --- */
.rene-detail {
    display: grid;
    grid-template-columns: minmax(100px, 30%) 1fr;
    gap: .4rem 1rem;
    margin: 0;
}

.rene-detail dt { font-weight: 600; color: var(--color-rose-gold-dark); }
.rene-detail dd { margin: 0; word-break: break-word; }

.rene-today {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rene-today li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .5rem;
    border-bottom: 1px solid var(--color-beige);
    font-size: .88rem;
    flex-wrap: wrap;
}

.rene-today li span { flex: 1; }

.rene-schedule {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .4rem;
}

.rene-schedule__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: var(--radius-md);
    background: var(--color-light-beige);
    font-size: .85rem;
}

.rene-schedule__row--full { background: #fdeaec; }
.rene-schedule__row--past { opacity: .55; }
.rene-schedule__time { font-weight: 600; }

/* --- Admin forms --- */
.rene-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.rene-field--full { grid-column: 1 / -1; }

.rene-field label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .35rem;
}

.rene-field .rene-input { width: 100%; }

.rene-field__help {
    font-size: .78rem;
    color: var(--color-rose-gold);
    margin: .35rem 0 0;
}

.rene-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
}

.rene-check input { width: 18px; height: 18px; }

@media (max-width: 767px) {
    .rene-form-grid { grid-template-columns: 1fr; }
}

/* --- Mobile: turn tables into stacked cards --- */
@media (max-width: 767px) {
    .rene-admin { padding: 0; }

    .rene-admin__panel {
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .rene-admin__body { padding: 1rem; }

    /* More of the strip visible before scrolling is needed */
    .rene-admin__tabs {
        gap: .1rem;
        padding: .5rem .75rem 0;
        scroll-padding-inline: .75rem;
    }

    .rene-admin__tab {
        padding: .5rem .6rem;
        font-size: .82rem;
    }

    .rene-admin__tabs::after {
        flex-basis: .75rem;
        right: -.75rem;
        margin-left: -.75rem;
    }

    .rene-admin__head { padding: .9rem 1rem; }
    .rene-admin__title { font-size: 1.2rem; }

    .rene-table thead { display: none; }

    .rene-table tbody tr {
        display: block;
        margin-bottom: .75rem;
        border: 1px solid var(--color-beige);
        border-radius: var(--radius-md);
        padding: .5rem;
    }

    .rene-table td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px dashed var(--color-beige);
        text-align: right;
    }

    .rene-table td:last-child { border-bottom: none; }

    .rene-table td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: var(--color-rose-gold-dark);
    }

    .rene-table td.rene-actions { justify-content: flex-start; }
    .rene-table td.rene-actions::before { display: none; }

    .rene-toolbar .rene-input { flex: 1 1 100%; }
}

/* ============================================================
   Accessibility helpers
   ============================================================ */
.rene-slot:focus-visible,
.rene-btn:focus-visible,
.rene-admin__tab:focus-visible,
.rene-input:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rene-slot,
    .rene-btn { transition: none; }
    .rene-slot:hover:not(:disabled) { transform: none; }
}

/* ============================================================
   Printing a booking confirmation
   ============================================================ */
@media print {
    body.rene-printing > *:not(.modal) { display: none !important; }

    body.rene-printing .modal,
    body.rene-printing .modal-dialog,
    body.rene-printing .modal-content {
        position: static !important;
        display: block !important;
        max-width: 100% !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    body.rene-printing .modal-backdrop,
    body.rene-printing .modal-footer,
    body.rene-printing .btn-close { display: none !important; }

    body.rene-printing .rene-confirmation__ref {
        background: none !important;
        color: #000 !important;
        border: 2px solid #000;
    }
}

/* ============================================================
   PRICE LIST TABLES
   ------------------------------------------------------------
   Desktop: a fixed-layout table so long service names can no
   longer squeeze the price columns into wrapping.
   Mobile:  each row becomes a card - the 5-column table is
   unreadable below ~700px no matter how the widths are tuned.
   ============================================================ */

/* --- Shared --- */
.price-table__table {
    width: 100%;
    margin-bottom: 0;
    table-layout: fixed;          /* widths below are obeyed exactly */
}

.price-table__table th,
.price-table__table td {
    vertical-align: middle;
    word-break: normal;
    overflow-wrap: anywhere;      /* long words wrap instead of overflowing */
    hyphens: auto;
}

/* Service names: readable, never clipped */
.price-service-name {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}

/* Prices and durations sit centred under their headings */
.price-table .price-table__table .price-cell-value {
    text-align: center;
    white-space: nowrap;          /* keeps "€160-190" on one line */
    font-variant-numeric: tabular-nums;
}

.price-table__table thead th {
    text-align: center;
    vertical-align: middle;
}

.price-table__table thead th:first-child {
    text-align: left;
}

/* --- Buttons under each service ---
   The site-wide 44px touch target rule (styles.css) also hits these
   two small links and inflates every row, so it is scoped back here.
   The buttons are still 32px+ tall, which stays comfortably tappable
   because they sit on their own line with space around them. --- */
.price-table .price-list-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.price-table .price-list-buttons a {
    flex: 0 0 auto;               /* was flex:1, which stretched them oddly */
    min-height: 32px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   Desktop & tablet column widths (768px and up)
   ------------------------------------------------------------ */
@media (min-width: 768px) {
    /* Service | Time | Short | Medium | Long */
    .price-table__table--5col th:nth-child(1),
    .price-table__table--5col td:nth-child(1) { width: 40%; }
    .price-table__table--5col th:nth-child(2),
    .price-table__table--5col td:nth-child(2) { width: 14%; }
    .price-table__table--5col th:nth-child(n+3),
    .price-table__table--5col td:nth-child(n+3) { width: 15.33%; }

    /* Service | Time | Price */
    .price-table__table--3col th:nth-child(1),
    .price-table__table--3col td:nth-child(1) { width: 56%; }
    .price-table__table--3col th:nth-child(2),
    .price-table__table--3col td:nth-child(2) { width: 20%; }
    .price-table__table--3col th:nth-child(3),
    .price-table__table--3col td:nth-child(3) { width: 24%; }

    .price-table__table th,
    .price-table__table td { padding: 0.75rem 0.6rem; }

    /* An empty price cell reads better as a dash than as a blank */
    .price-cell-empty::after {
        content: '—';
        color: var(--color-rose-gold);
        opacity: 0.5;
    }
}

/* Narrow desktop / tablet: trim padding before the card switch */
@media (min-width: 768px) and (max-width: 991px) {
    .price-table__table { font-size: 0.85rem; }
    .price-table__table th,
    .price-table__table td { padding: 0.6rem 0.4rem; }
    .price-table .price-list-buttons a {
        font-size: 0.7rem;
        padding: 0.25rem 0.55rem;
    }
}

/* ------------------------------------------------------------
   Mobile: rows become cards (below 768px)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .price-table {
        padding: 1rem 0.85rem;
        margin-bottom: 1.75rem;
    }

    .price-table__table,
    .price-table__table tbody,
    .price-table__table tr,
    .price-table__table td {
        display: block;
        width: auto;
    }

    /* Column headings are replaced by the per-cell labels below */
    .price-table__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .price-table__table tr {
        margin-bottom: 0.85rem;
        padding: 0.9rem 1rem;
        border: 1px solid var(--color-beige);
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.6);
    }

    .price-table__table tr:last-child { margin-bottom: 0; }

    /* Bootstrap's cell borders would draw boxes around each line.
       Selector is deliberately `.price-table .price-table__table td`
       (0,2,1) so it outranks `.table tbody td` (0,1,2) in styles.css,
       which would otherwise re-add 0.5rem padding and indent the
       service name away from the price rows. */
    .price-table .price-table__table td {
        border: none;
        padding: 0;
    }

    /* Service name heads the card */
    .price-table .price-table__table .price-cell-service {
        padding-bottom: 0.6rem;
        margin-bottom: 0.6rem;
        border-bottom: 1px solid var(--color-beige);
    }

    .price-service-name { font-size: 1rem; }

    /* Label / value pairs */
    .price-table .price-table__table .price-cell-value {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.3rem 0;
        text-align: right;
        font-weight: 600;
    }

    .price-table .price-table__table .price-cell-value::before {
        content: attr(data-label);
        font-weight: 500;
        font-size: 0.85rem;
        color: var(--color-rose-gold-dark);
        text-align: left;
    }

    /* A price that doesn't exist for this service is simply omitted */
    .price-table .price-table__table .price-cell-empty { display: none; }

    /* Buttons get full-width halves on a phone */
    .price-table .price-list-buttons {
        gap: 0.5rem;
        margin-top: 0.65rem;
    }

    .price-table .price-list-buttons a {
        flex: 1 1 0;
        min-height: 38px;
        font-size: 0.78rem;
        padding: 0.4rem 0.5rem;
    }

    /* Section headings */
    .price-table-title {
        font-size: 1.15rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .price-table-title small {
        display: block;
        margin-top: 0.3rem;
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .price-table-subtitle { font-size: 0.95rem; }
}

/* Very small phones */
@media (max-width: 380px) {
    .price-table { padding: 0.85rem 0.6rem; }
    .price-table__table tr { padding: 0.8rem 0.75rem; }
    .price-service-name { font-size: 0.95rem; }
    .price-table .price-list-buttons a { font-size: 0.72rem; }
}

/* Price list prints as a clean table, not as cards */
@media print {
    .price-table__table,
    .price-table__table thead,
    .price-table__table tbody,
    .price-table__table tr,
    .price-table__table th,
    .price-table__table td {
        display: revert;
        position: static;
        clip: auto;
    }
    .price-table .price-list-buttons { display: none !important; }
    .price-table {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* ------------------------------------------------------------
   Admin sign-in
   ------------------------------------------------------------
   Shown in place of the dashboard until GET /admin/me confirms
   a session. Narrow column so the two fields do not stretch
   across the full overlay on a desktop screen.
   ------------------------------------------------------------ */
.rene-admin__login {
    max-width: 22rem;
    margin: 2rem auto;
}

.rene-admin__login .rene-field {
    margin-bottom: 1rem;
}

.rene-admin__login .rene-toolbar {
    margin-top: 1.25rem;
}

.rene-admin__login .rene-btn {
    width: 100%;
    justify-content: center;
}

/* Sign-in failures, and any inline field error. */
.rene-field__error {
    font-size: .85rem;
    color: #c0392b;
    background: rgba(192, 57, 43, .08);
    border-left: 3px solid #c0392b;
    border-radius: var(--radius-md);
    padding: .5rem .75rem;
    margin: 0 0 1rem;
}

/* ------------------------------------------------------------
   Dialogs opened from inside the admin overlay
   ------------------------------------------------------------
   .rene-admin sits at z-index 20000, but Bootstrap modals
   default to 1055 (.modal) and 1050 (.modal-backdrop), so a
   booking editor opened from the dashboard rendered UNDERNEATH
   the overlay. Lift both above it.

   The backdrop stays one step below the dialog so the dialog
   is still visually on top of its own dimming layer.
   ------------------------------------------------------------ */
/* Covers both wrappers created in JS - .rene-dialog (booking
   editor and detail view) and .rene-confirm (cancel / delete
   confirmations from ui.js). Scoped to body.rene-admin-open so
   the public booking modal keeps Bootstrap's normal stacking. */
body.rene-admin-open .modal {
    z-index: 20060;
}

/* Bootstrap appends the backdrop to <body>, not inside the
   dialog, so it cannot be scoped to .rene-dialog. While the
   admin overlay is open, every backdrop belongs to a dialog
   raised above it. */
body.rene-admin-open .modal-backdrop {
    z-index: 20050;
}

/* The public booking modal is NOT opened from the overlay, so it
   keeps Bootstrap's default stacking - no rule needed for it. */