/* ==========================================================
   CLASS LIST / BOOKING / TWO ADMIN CONTROLS
   Only the components used by this site are included.
   ========================================================== */
:root {
    --lieben_classes_paper: #f7f4ec;
    --lieben_classes_ink: #26362d;
    --lieben_classes_line: rgba(38, 54, 45, .22);
    --lieben_classes_card: #fffdf8;
    --lieben_classes_sage: #e1e7d5;
}

.classes-background { background: var(--lieben_classes_paper); color: var(--lieben_classes_ink); }
.classes-page { margin-top: 42px; line-height: 1.6; }
.classes-page :is(h1, h2, h3, h4) { font-weight: 400; text-wrap: balance; }
.classes-page h1 { font: 400 clamp(34px, 5vw, 52px)/1.08 Georgia, serif; letter-spacing: -.04em; margin: 0 0 30px; }
.classes-list-heading { margin-bottom: 35px; }
.classes-list-heading h2, .classes-reading-card h2, .classes-owner-heading h2 { margin: 0 0 22px; font: 400 clamp(34px, 5vw, 48px)/1.08 Georgia, serif; letter-spacing: -.04em; }
.classes-eyebrow { margin: 0 0 15px; font-size: 10px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; }
.classes-rows, .class-list { padding: 0; margin: 0; list-style: none; }
.classes-list-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) 100px; align-items: center; gap: 26px; padding: 26px 0; border-top: 1px solid var(--lieben_classes_line); }
.classes-list-row:last-child { border-bottom: 1px solid var(--lieben_classes_line); }
.classes-date-block { display: flex; flex-direction: column; align-items: center; font-size: 20px; line-height: 1.3; text-transform: uppercase; }
.classes-date-block strong { font: 400 46px/1.05 Georgia, serif; letter-spacing: -.06em; }
.classes-list-row :is(h2, h3) { margin: 0 0 9px; font: 400 26px/1.15 Georgia, serif; letter-spacing: -.025em; }
.classes-row-content, .classes-list-row article { min-width: 0; overflow-wrap: anywhere; }
.classes-list-row p { margin: 4px 0; font-size: 13px; line-height: 1.7; }
.classes-row-action, .classes-list-book { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; }
.classes-today { display: inline-block; align-self: center; margin-top: 10px; padding: 3px 8px; background: #a3ff4a; color: #193619; font: 700 10px/1.5 Arial, sans-serif; letter-spacing: .07em; box-shadow: 0 0 8px #8aff6766, 0 0 19px #8aff6733; }
.classes-empty { padding: 30px 0; }

.classes-button, .classes-page button:not(.classes-text-button) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--lieben_classes_ink); border-radius: 0; background: var(--lieben_classes_ink); color: white; font: 400 13px/1.5 Arial, sans-serif; text-decoration: none; text-align: center; cursor: pointer; }
.classes-button:hover, .classes-page button:not(.classes-text-button):hover { background: #3c5143; text-decoration: none; }
.classes-page button:disabled { opacity: .55; cursor: default; }
.classes-text-button, .classes-text-link, .classes-back-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: inherit; font: 400 13px/1.7 Arial, sans-serif; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
.classes-back-link { margin-bottom: 16px; }
.classes-fine-print { font-size: 12px; line-height: 1.7; }
.classes-notice, .classes-alert, .classes-success { padding: 15px 18px; margin: 20px 0 30px; border: 1px solid var(--lieben_classes_line); background: #ececdd; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.classes-alert { background: #f1e2d9; color: #693322; }
.classes-success { background: #e1eadc; }

/* Class details remain above the form on phones. */
.classes-booking-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: start; }
.classes-booking-summary h2 { margin: 0 0 24px; font: 400 clamp(34px, 5vw, 52px)/1.08 Georgia, serif; letter-spacing: -.035em; }
.classes-booking-summary p { font-size: 15px; }
.classes-page .classes-booking-venue { font: 400 clamp(25px, 3vw, 32px)/1.2 Georgia, serif; margin: 23px 0 10px; letter-spacing: -.02em; }
.classes-booking-price, .classes-payment-total { font: 400 36px/1.2 Georgia, serif; margin: 26px 0; }
.classes-booking-price small, .classes-payment-total small { display: block; margin-top: 8px; font: 12px/1.5 Arial, sans-serif; }
.classes-walk-ins { font-size: 13px !important; margin-top: 25px; }
.classes-booking-form-card, .classes-reservation-card, .classes-reading-card, .classes-roster-card { border: 1px solid var(--lieben_classes_line); background: var(--lieben_classes_card); padding: 30px; }
.classes-booking-form-card h3, .classes-reservation-card h3 { margin: 0 0 24px; font: 400 30px/1.1 Georgia, serif; letter-spacing: -.03em; }
.classes-reading-card { max-width: 480px; margin-inline: auto; }
.classes-reservation-card { max-width: 620px; margin: 0 auto 30px; }
.classes-reservation-card h2 { font: 400 40px/1.1 Georgia, serif; letter-spacing: -.035em; margin: 0 0 30px; }
.classes-reservation-card h3 { font-size: 27px; }
.classes-payment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin: 25px 0; }

.classes-form { display: grid; gap: 19px; }
.classes-form label { display: grid; gap: 7px; font-size: 13px; }
.classes-form :is(input, textarea, select), .classes-page select { min-width: 0; width: 100%; padding: 11px 12px; border: 1px solid #aab0a6; background: white; color: inherit; font: 16px/1.5 Arial, sans-serif; border-radius: 0; }
.classes-form textarea { resize: vertical; min-height: 120px; }
.classes-form button { justify-self: start; }
.classes-form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.classes-form .classes-checkbox { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.6; }
.classes-checkbox input { flex: 0 0 auto; margin-top: 4px; width: 18px; height: 18px; accent-color: var(--lieben_classes_ink); }
.classes-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* The owner area has exactly two working sections. */
.classes-owner-heading { display: flex; justify-content: space-between; align-items: start; gap: 24px; }
.classes-admin-navigation { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 35px; }
.classes-admin-navigation a[aria-current="page"] { background: transparent; color: var(--lieben_classes_ink); }
.classes-owner-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: 50px; }
.classes-owner-grid > *, .classes-owner-session { min-width: 0; }
.classes-owner-grid h2 { font: 400 34px/1.1 Georgia, serif; letter-spacing: -.03em; margin: 0 0 24px; }
.classes-owner-grid h3 { margin: 0 0 13px; font: 400 25px/1.15 Georgia, serif; }
.classes-owner-session { border-top: 1px solid var(--lieben_classes_line); padding: 23px 0; }
.classes-owner-session p { font-size: 13px; }
.classes-owner-session nav, .classes-owner-actions { display: flex; flex-wrap: wrap; gap: 8px 23px; }
.classes-admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.classes-admin-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 7px 13px; border: 1px solid var(--lieben_classes_line); font-size: 12px; }
.classes-admin-tabs a[aria-current="page"] { color: white; background: var(--lieben_classes_ink); }
.classes-schedule-path { font: 12px/1.5 monospace; overflow-wrap: anywhere; }
.classes-roster-card { margin: 25px 0; }
.classes-roster-card p { margin: 8px 0; overflow-wrap: anywhere; }
.classes-roster-card h3, .classes-roster-name { font: 400 25px/1.2 Georgia, serif; margin: 0 0 12px; }
.classes-roster-token { font: 13px/1.6 monospace; overflow-wrap: anywhere; }
.classes-roster-card details { border-top: 1px solid var(--lieben_classes_line); margin-top: 20px; padding-top: 12px; }
.classes-roster-card summary { cursor: pointer; min-height: 44px; }
.classes-roster-card .classes-form { margin-top: 20px; }
.classes-roster-person { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.classes-roster-person > div { min-width: 0; }

@media (max-width: 800px) {
    .classes-booking-layout { grid-template-columns: minmax(0, 1fr); gap: 35px; }
    .classes-owner-grid { grid-template-columns: minmax(0, 1fr); gap: 45px; }
}
@media (max-width: 600px) {
    .classes-list-row { grid-template-columns: 62px minmax(0, 1fr) 68px; gap: 14px; }
    .classes-date-block { font-size: 17px; }
    .classes-date-block strong { font-size: 42px; }
    .classes-list-row :is(h2, h3) { font-size: 23px; }
    .classes-list-row p { font-size: 12px; }
    .classes-row-action .classes-button { padding: 10px 9px; font-size: 12px; }
    .classes-booking-form-card, .classes-reservation-card, .classes-reading-card, .classes-roster-card { padding: 24px 20px; }
    .classes-owner-heading { flex-direction: column; gap: 0; }
    .classes-form-pair { gap: 12px; }
}
@media (max-width: 360px) {
    .classes-list-row { grid-template-columns: 53px minmax(0, 1fr); gap: 13px; }
    .classes-row-action { grid-column: 2; align-items: flex-start; flex-direction: row; }
    .classes-form-pair { grid-template-columns: minmax(0, 1fr); }
}

/* A closed/full label must remain words, even in the compact booking column. */
.classes-row-action .classes-notice {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: normal;
    text-align: center;
}
.admin-page > .classes-form { max-width: 480px; }