/***********************/
/*** INTERFACE BASE STYLES ***/
/* Base styles for all public interface microsites */
/* Team-specific CSS overrides these variables */

:root {
    --color-body: #27282A;
    --color-primary: #00A1BE;
    --color-secondary: #646464;
    --color-tertiary: #FF4A11;
    --color-rfv: #FF4A11;
    --color-icons: #FF4A11;
    --color-links: #00A1BE;
    --color-links-hover: #0789A0;
    --font-primary: muli, sans-serif;
    --font-secondary: gotham, sans-serif;
    --font-headings: gotham, sans-serif;
    --font-subheadings: muli, sans-serif;
    --font-controls: normal 1em muli, sans-serif;
    --color-buttons: #00A1BE;
    --color-buttons-hover: #0789A0;
    --color-buttons-text: #FFFFFF;
    --color-buttons-text-hover: #FFFFFF;
    --font-buttons: muli, sans-serif;
    --shadow: 0 2px 12px 0 rgba(40,40,40,.09);
}

/* Layout */
.interface-layout {font-family: var(--font-primary); color: var(--color-body); min-height: 100vh; background-color: #F7F7F7}

/* Header — fixed header, body-scrolling main (no overflow:auto so dropdowns aren't clipped) */
@media (max-width: 576px) {
.interface-header {position: fixed; top: 0; left: 0; right: 0; height: 7em; background-color: #FFF; border: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; padding: .5em; z-index: 7000}
.interface-main {padding-top: 7em; width: 100%}
.interface-main .container {width: 100% !important; max-width: 100% !important; padding: 2em !important; border: none !important; box-shadow: none; margin: 0 !important}
}

@media (min-width: 576.1px) and (max-width: 992px) {
.interface-header {position: fixed; top: .1em; left: 1em; right: 1em; height: 12em; padding: .5em; background-color: #FFF; border: 1px solid #DEE2E6; border-radius: 0.375rem; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; z-index: 7000}
.interface-header img {max-height: 9em !important; max-width: 100% !important; object-fit: contain !important; width: auto !important; height: auto !important}
.interface-main {padding-top: 13em; padding-left: .25em; padding-right: .25em}
.interface-main .container {width: 100% !important; max-width: 100% !important; border: 1px solid #DEE2E6; border-radius: 0.375rem; box-shadow: var(--shadow); padding: 2em; background-color: #FFF; margin: 0 !important}
}

@media (min-width: 992.1px) {
.interface-header {position: fixed; top: .1em; left: 1em; right: 1em; height: 12em; padding: .5em; background-color: #FFF; border: 1px solid #DEE2E6; border-radius: 0.375rem; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; z-index: 7000}
.interface-header img {max-height: 9em !important; max-width: 80% !important; object-fit: contain !important; width: auto !important; height: auto !important}
.interface-main {padding-top: 13.5em; margin: .5em}
.interface-main .container {border: 1px solid #DEE2E6; border-radius: 0.375rem; box-shadow: var(--shadow); padding: 2em; background-color: #FFF}
}

/* Logo sizing — header is 12em tall, so logo gets up to 9em of vertical room with
   ~1.5em padding above + below (1em CSS padding + .5em header padding) so it never
   touches the border. max-width and object-fit:contain protect against banner-style
   logos that are much wider than tall: they scale down to fit instead of overflowing. */
.interface-logo {padding: 1em; max-height: 9em; max-width: 80%; object-fit: contain; width: auto; height: auto}

/* Typography */
h1 {font-family: var(--font-headings); font-size: 150%}
h2 {font-family: var(--font-headings); font-size: 120%}
a {font-family: var(--font-buttons); color: var(--color-links); text-decoration: none}
a:hover {color: var(--color-links-hover); text-decoration: none}

/* Form Controls */
.interface-layout .form-control {font-family: var(--font-primary) !important; font-weight: 700 !important; font-size: 1rem !important; color: #464646 !important}
.interface-layout .form-control::placeholder {font-weight: 400 !important; color: #999 !important}
/* All form-control elements share the same visible height - inputs, selects, date pickers, custom selects */
.interface-layout input.form-control,
.interface-layout select.form-control {height: 48px !important; min-height: 48px !important}
.interface-layout textarea.form-control {min-height: 48px !important}
.interface-layout input.form-control:focus, .interface-layout select.form-control:focus, .interface-layout textarea.form-control:focus {box-shadow: none !important; border-color: #ccc !important}
.interface-layout .form-title {font-size: 1.05rem; margin-bottom: .35rem}
.interface-layout .ptb-input {height: 48px !important; min-height: 48px !important; font-size: 1rem !important}

/* Custom Dropdown (interfaces only - grays only, no primary blue anywhere) */
.interface-layout .interface-select {position: relative; width: 100%}
.interface-layout .interface-select-btn {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 0 .75rem; background: #FFF; border: 1px solid #ced4da; border-radius: .375rem; font-family: var(--font-primary); font-size: 1rem; font-weight: 700; color: #464646; cursor: pointer; text-align: left}
.interface-layout .interface-select-btn:hover {border-color: #adb5bd}
.interface-layout .interface-select-btn:focus {outline: none; border-color: #adb5bd; box-shadow: none}
.interface-layout .interface-select-btn:disabled {background: #e9ecef; cursor: not-allowed}
.interface-layout .interface-select-btn:disabled:hover {border-color: #ced4da}
.interface-layout .interface-select-btn .interface-select-placeholder {color: #999; font-weight: 400; background: transparent; opacity: 1}
.interface-layout .interface-select-btn i {color: #999; font-size: .8rem; margin-left: .5rem}
.interface-layout .interface-select-panel {position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #FFF; border: 1px solid #ced4da; border-radius: .375rem; box-shadow: 0 4px 12px rgba(0,0,0,.12); max-height: 300px; overflow-y: auto; z-index: 9000; padding: .25rem 0; list-style: none; margin: 0}
.interface-layout .interface-select-option {padding: .6rem .75rem; cursor: pointer; color: #464646; font-size: 1rem; font-weight: 700; background: #FFF}
.interface-layout .interface-select-option:hover {background: #F1F1F1}
.interface-layout .interface-select-option.selected {background: #646464; color: #FFFFFF}
.interface-layout .interface-select-option.kbd-active {background: #646464; color: #FFF}
.interface-layout .interface-select-backdrop {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 8999; background: transparent}

/* ==========================================================================
   FGC BAKE-REQUEST WIZARD — public-interface styling.
   The shared <BakeWizard> is styled with cp-* classes that live in
   customer-portal.css (scoped to .customer-portal-layout), so under the public
   InterfaceLayout the wizard rendered unstyled (broken cards, naked buttons).
   These rules restore the original FGC public-form look (pink cake-cards, FGC
   buttons, review card) scoped to .interface-layout so the portal is untouched.
   Added 2026-06-27 (Adam) after Christine caught the unstyled public form.
   ========================================================================== */

/* Dropdown option list must never be centered (it was inheriting text-align
   from a .text-center wrapper — Christine 2026-06-27). */
.interface-layout .interface-select-panel, .interface-layout .interface-select-option {text-align: left}

/* The unselected gender/age pills (btn-special) must look distinct from the coral
   selected pill (btn-primary). app.css forces EVERY .btn coral with !important AND
   high specificity (~0,10,0): ":not(.notification-window-footer) > .btn:not(...)".
   To win we out-specify it with harmless :not() guards (each adds specificity but
   matches everything), giving unselected pills the original FGC selector-btn outline
   look (white bg, pink border, dark text). Selected pills (btn-primary) and the
   wizard Back/Cancel buttons stay coral — app.css already colors those. */
.interface-layout .bake-wizard .flex-wrap .btn {border-radius: 50px !important; padding: .4rem 1rem !important}
.interface-layout .bake-wizard .flex-wrap .btn-special:not(._g1):not(._g2):not(._g3):not(._g4):not(._g5):not(._g6):not(._g7):not(._g8):not(._g9) {background-color: #FFF !important; border-color: var(--color-buttons-hover, #F5D6D5) !important; color: #333 !important}
.interface-layout .bake-wizard .flex-wrap .btn-special:not(._g1):not(._g2):not(._g3):not(._g4):not(._g5):not(._g6):not(._g7):not(._g8):not(._g9):hover {background-color: #FFF !important; border-color: var(--color-buttons, #EE7779) !important; color: var(--color-buttons, #EE7779) !important}

/* Choice cards (celebration / individual-vs-group / bake-type) — the original
   FGC pink "cake-card" look: big coral text labels, NO icons. */
.interface-layout .cp-choice-row {display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin: 1.5rem 0}
.interface-layout .cp-choice-card {display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 340px; max-width: 100%; min-height: 220px; background: #F5D6D5; border-radius: 2rem; padding: 2em 1.5em; border: 0; cursor: pointer; text-decoration: none !important; color: #EE7771; font-weight: 700; font-size: 2.25rem; line-height: 1.1; transition: box-shadow 120ms ease}
.interface-layout .cp-choice-card:hover {box-shadow: 0 0 0 3px #EE7771 inset; color: #EE7771}
/* The original FGC form has NO Font Awesome icons on the choice cards. */
.interface-layout .cp-choice-card i {display: none}
.interface-layout .cp-choice-card img {margin-bottom: .5rem}
/* Subtitle line under the big label stays small (matches the WebForms form-text). */
.interface-layout .cp-choice-card span {display: block; font-size: 1rem; font-weight: 400; margin-top: .6rem; line-height: 1.35}
/* Image celebration cards get the big lowercase label like the original. */
.interface-layout .cp-choice-card:has(img) {font-size: 3rem; text-transform: lowercase}

/* Wizard nav button row (Back / Next). */
.interface-layout .cp-wizard-nav {display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem}

/* Review card. */
.interface-layout .cp-card {border: 1px solid #e2e2e2; border-radius: .5rem; box-shadow: var(--shadow, 0 2px 12px 0 rgba(40,40,40,.09)); overflow: hidden; background: #fff}
.interface-layout .cp-card-body {padding: 1rem}
.interface-layout .cp-mini-label {font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #888; margin-bottom: .1rem; font-weight: 700}

/* Checkboxes in the bake wizard render as coral toggle sliders — Christine's
   standard (no plain browser checkboxes); the original FGC form used .switch/.slider. */
.interface-layout .bake-wizard input.form-check-input[type=checkbox] {appearance: none; -webkit-appearance: none; position: relative; width: 2.6rem; height: 1.5rem; min-width: 2.6rem; border-radius: 1rem; background: #ccc; border: none; cursor: pointer; transition: background .2s; flex-shrink: 0; margin: 0; vertical-align: middle}
.interface-layout .bake-wizard input.form-check-input[type=checkbox]::after {content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.5rem - 4px); height: calc(1.5rem - 4px); background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s}
.interface-layout .bake-wizard input.form-check-input[type=checkbox]:checked {background: var(--color-primary, #EE7779)}
.interface-layout .bake-wizard input.form-check-input[type=checkbox]:checked::after {transform: translateX(1.1rem)}
.interface-layout .bake-wizard input.form-check-input[type=checkbox]:focus {outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #EE7779) 20%, transparent)}

/* Every step header and subheader is CENTERED in the original FGC form
   (Christine 2026-06-27); several rebuilt form steps had drifted to left-aligned. */
.interface-layout .bake-wizard h1, .interface-layout .bake-wizard h3, .interface-layout .bake-wizard h4, .interface-layout .bake-wizard p, .interface-layout .bake-wizard .text-muted {text-align: center}

/* Buttons */
.interface-layout .btn-primary {background: var(--color-buttons); color: var(--color-buttons-text); font-family: var(--font-buttons); outline: none; box-shadow: none; border: none}
.interface-layout .btn-primary:hover {background: var(--color-buttons-hover); color: var(--color-buttons-text-hover)}
.interface-layout .btn-primary:focus, .interface-layout .btn-primary:active {background: var(--color-buttons-hover); color: var(--color-buttons-text-hover); box-shadow: none; outline: none}

/* Language toggle (public interface i18n switch) — prominent segmented control so the
   English/Español switch is obvious; both options read in the brand color (clearly
   clickable), active option is brand-color filled. */
.interface-layout .lang-toggle-row {display: flex; justify-content: flex-end; margin-bottom: 1.25rem}
.interface-layout .lang-toggle {display: inline-flex; align-items: center; gap: .25rem; background: #FFF; border: 2px solid var(--color-buttons); border-radius: 2rem; padding: .3rem .4rem; box-shadow: 0 .125rem .35rem rgba(0,0,0,.08)}
.interface-layout .lang-toggle-icon {color: var(--color-buttons); font-size: 1rem; margin: 0 .35rem 0 .45rem}
.interface-layout .lang-opt {border: none; background: transparent; color: var(--color-buttons); font-family: var(--font-buttons); font-weight: 700; font-size: .95rem; line-height: 1; padding: .5rem 1.15rem; border-radius: 2rem; cursor: pointer; transition: all .2s}
.interface-layout .lang-opt:hover {background: rgba(0,0,0,.05)}
.interface-layout .lang-opt.active {background: var(--color-buttons); color: var(--color-buttons-text)}
.interface-layout .lang-opt.active:hover {background: var(--color-buttons); color: var(--color-buttons-text)}

/* Utility */
.interface-layout .form-title {font-family: var(--font-primary); font-size: 1.0rem; font-weight: bold}
.interface-layout .form-field {font-family: var(--font-primary); font-weight: bold; margin-bottom: 1.25rem}
.interface-layout .rfv {font-size: .5rem; margin-right: .25rem; vertical-align: text-top; margin-bottom: .25rem; padding-top: .30rem; color: var(--color-rfv)}
.interface-layout .border-card {display: block; border: 1px solid #DEE2E6; border-radius: 0.375rem; box-shadow: var(--shadow); padding: 1rem; background-color: #FFF; overflow: visible}
.interface-layout .error {color: #CC3333 !important; font-weight: bold}

/* Session Cards */
.session-list {margin-top: 1rem}
.date-group-header {font-family: var(--font-headings); font-size: 1.1rem; font-weight: 700; color: var(--color-primary); padding: .75rem 0 .25rem; border-bottom: 1px solid #eee; margin-bottom: .5rem; margin-top: 1rem}
.date-group-header:first-child {margin-top: 0}

.session-card {display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border: 2px solid #DEE2E6; border-radius: .5rem; margin-bottom: .5rem; cursor: pointer; transition: all .2s; background: #FFF}
.session-card:hover {border-color: var(--color-buttons); background: rgba(0,0,0,.02)}
.session-card.selected {border-color: var(--color-buttons); background: var(--color-buttons); color: #FFF}
.session-card.selected .session-time {color: #FFF}
.session-card.selected .session-name {color: rgba(255,255,255,.85)}
.session-card.selected .session-location {color: rgba(255,255,255,.7)}

.session-time {font-family: var(--font-primary); font-weight: 700; font-size: 1.05rem}
.session-name {font-size: .9rem; color: #666; margin-top: .15rem}
.session-location {font-size: .8rem; color: #999; margin-top: .15rem}

.session-check {display: none; font-size: 1.5rem}
.session-card.selected .session-check {display: block; color: #FFF}

/* Selected Session Summary (Step 2) */
.selected-session-summary {display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid #f0f0f0}
.selected-session-summary:last-child {border-bottom: none}
.session-name-small {font-size: .85rem; color: #999; margin-left: .5rem}

/* Confirmed Session (Step 3) */
.confirmed-session {display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid #f0f0f0}
.confirmed-session:last-child {border-bottom: none}
.confirmed-session i {font-size: 1.25rem; margin-top: .15rem}

/* Wizard Progress Bar (matches WebForms .wizard-nav) */
.interface-layout .wizard-steps {display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; position: relative}
.interface-layout .wizard-step {display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; flex: 1}
.interface-layout .wizard-step-circle {width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; color: #FFF; background: #CCC; transition: background .3s}
.interface-layout .wizard-step.active .wizard-step-circle {background: var(--color-buttons)}
.interface-layout .wizard-step.completed .wizard-step-circle {background: var(--color-buttons)}
.interface-layout .wizard-step-label {margin-top: .35rem; font-size: .75rem; color: #CCC; font-weight: 600; transition: color .3s; text-align: center}
.interface-layout .wizard-step.active .wizard-step-label {color: var(--color-buttons); font-weight: 700}
.interface-layout .wizard-step.completed .wizard-step-label {color: var(--color-buttons)}
.interface-layout .wizard-line {position: absolute; top: 18px; left: 0; right: 0; height: 3px; background: #CCC; z-index: 0}
.interface-layout .wizard-line-fill {height: 3px; background: var(--color-buttons); transition: width .4s}

/* Inline checkbox grids (Volunteer Interest Form: areas of interest, skills) - 2 columns desktop, 1 on mobile */
.interface-layout .check-grid {display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem}
@media (max-width: 640px) {.interface-layout .check-grid {grid-template-columns: 1fr}}
.interface-layout .check-grid label {display: flex; align-items: center; gap: .5rem; font-size: .95rem; cursor: pointer; margin: 0}
.interface-layout .check-grid input[type="checkbox"] {accent-color: var(--color-primary); width: 18px; height: 18px; flex-shrink: 0}

/* Checkbox groups (Accessibility, Communication, Sensory) */
.interface-layout .check-group {display: flex; flex-wrap: wrap; gap: .5rem .75rem}
.interface-layout .check-group label {display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border: 1px solid #DEE2E6; border-radius: .375rem; background: #FFF; cursor: pointer; font-weight: 600; font-size: .9rem; color: #464646; margin-bottom: 0}
.interface-layout .check-group label:hover {border-color: #adb5bd; background: #F1F1F1}
.interface-layout .check-group input[type="checkbox"] {accent-color: var(--color-buttons); width: 1rem; height: 1rem; cursor: pointer}
.interface-layout .check-group label.checked {border-color: var(--color-buttons); background: var(--color-buttons); color: #FFF}
.interface-layout .check-group label.checked input[type="checkbox"] {accent-color: #FFF}

/* Radio group (Photo Release) */
.interface-layout .radio-group {display: flex; gap: .75rem}
.interface-layout .radio-group label {flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1rem; border: 1px solid #DEE2E6; border-radius: .375rem; background: #FFF; cursor: pointer; font-weight: 600; color: #464646; margin-bottom: 0}
.interface-layout .radio-group label:hover {border-color: #adb5bd; background: #F1F1F1}
.interface-layout .radio-group label.checked {border-color: var(--color-buttons); background: var(--color-buttons); color: #FFF}
.interface-layout .radio-group input[type="radio"] {accent-color: var(--color-buttons); cursor: pointer}
.interface-layout .radio-group label.checked input[type="radio"] {accent-color: #FFF}

/* Slider switch — works on EVERY interface page (ported from gnomesurf .booking-wrap, scoped to .interface-layout). Use for boolean toggles AND "check all that apply" multi-selects. */
.interface-layout .switch {position: relative; display: inline-block; width: 52px; height: 28px; flex-shrink: 0; margin: 0}
.interface-layout .switch input {opacity: 0; width: 0; height: 0; position: absolute}
.interface-layout .switch .slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #CCC; transition: .3s; border-radius: 28px}
.interface-layout .switch .slider:before {position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background-color: #FFF; transition: .3s; border-radius: 50%}
.interface-layout .switch input:checked + .slider {background-color: var(--color-buttons)}
.interface-layout .switch input:focus + .slider {box-shadow: none}
.interface-layout .switch input:checked + .slider:before {transform: translateX(24px)}
.interface-layout .slider-label {cursor: pointer; min-width: 0; overflow-wrap: break-word}
/* On phones the 2-across switch grids are tight, so shrink the switch to give labels room. */
@media (max-width: 767.98px) {
.interface-layout .switch {width: 34px; height: 20px}
.interface-layout .switch .slider {border-radius: 20px}
.interface-layout .switch .slider:before {height: 14px; width: 14px; left: 3px; bottom: 3px}
.interface-layout .switch input:checked + .slider:before {transform: translateX(14px)}
}

/* Toggle inline */
.interface-layout .toggle-inline {display: inline-flex; align-items: center; gap: .5rem; font-weight: 600}
.interface-layout .toggle-inline input[type="checkbox"] {accent-color: var(--color-buttons); width: 1.1rem; height: 1.1rem}

/* Required Documents (open-to-unlock pattern from WebForms booking) */
.interface-layout .doc-card {border: 2px solid var(--color-icons); background: #FFF8F5; border-radius: .5rem; padding: 1rem; margin-bottom: 1.5rem}
.interface-layout .doc-card.docs-complete {border-color: var(--color-secondary) !important; background: rgba(0,204,120,.04) !important; transition: all .3s}
.interface-layout .doc-btn {display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.25rem; border: 2px solid var(--color-buttons); border-radius: .5rem; margin-bottom: .75rem; cursor: pointer; transition: all .2s; background: #FFF}
.interface-layout .doc-btn:hover {background: var(--color-buttons); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.1)}
.interface-layout .doc-btn:hover .doc-btn-label, .interface-layout .doc-btn:hover .doc-btn-icon, .interface-layout .doc-btn:hover .doc-btn-arrow {color: #FFF}
.interface-layout .doc-btn-opened {border-color: #00CC78 !important; background: rgba(0,204,120,.03) !important}
.interface-layout .doc-btn-opened:hover {background: rgba(0,204,120,.08) !important}
.interface-layout .doc-btn-opened:hover .doc-btn-label, .interface-layout .doc-btn-opened:hover .doc-btn-icon, .interface-layout .doc-btn-opened:hover .doc-btn-arrow {color: var(--color-body)}
.interface-layout .doc-btn-left {display: flex; align-items: center; gap: .65rem}
.interface-layout .doc-btn-icon {font-size: 1.3rem; color: var(--color-buttons); transition: color .2s}
.interface-layout .doc-btn-opened .doc-btn-icon {color: var(--color-secondary)}
.interface-layout .doc-btn-label {font-size: .95rem; font-weight: 700; color: var(--color-buttons); transition: color .2s}
.interface-layout .doc-btn-opened .doc-btn-label {color: var(--color-body)}
.interface-layout .doc-btn-arrow {font-size: .7rem; color: var(--color-buttons); opacity: .6; transition: color .2s}
.interface-layout .doc-btn-opened .doc-btn-arrow {color: var(--color-secondary)}
.interface-layout .doc-btn-right {flex-shrink: 0; margin-left: .75rem}
.interface-layout .doc-badge {display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 2rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase}
.interface-layout .doc-badge-pending {background: #FEF2F2; color: #CC3333; border: 1px solid #FECACA}
.interface-layout .doc-badge-opened {background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0}

/* Required-document modal — the waiver / photo release render HERE, on the page, never in a new tab.
   A new tab backgrounds the booking page, and on a phone the browser then discards and reloads it, which
   kills the Blazor circuit and dumps the family back at Step 1 with everything they typed gone. The body
   scrolls internally (dvh, so an iOS toolbar cannot swallow the footer button) and the footer stays put. */
.interface-layout .doc-modal-backdrop {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(39,40,42,.6); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1rem}
.interface-layout .doc-modal {display: flex; flex-direction: column; width: 100%; max-width: 820px; max-height: 90dvh; background: #FFF; border-radius: .5rem; box-shadow: 0 .5rem 2rem rgba(0,0,0,.3); overflow: hidden}
.interface-layout .doc-modal-head {display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid #DEE2E6; flex-shrink: 0}
.interface-layout .doc-modal-title {font-family: var(--font-headings); font-size: 1.05rem; font-weight: 700; color: var(--color-buttons); display: flex; align-items: center; gap: .5rem}
.interface-layout .doc-modal-x {background: none; border: none; font-size: 1.35rem; line-height: 1; color: var(--color-body); opacity: .55; cursor: pointer; padding: .25rem .5rem}
.interface-layout .doc-modal-x:hover {opacity: 1}
.interface-layout .doc-modal-body {overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.25rem; font-size: .9rem; line-height: 1.6}
.interface-layout .doc-modal-body h2 {font-size: 1.15rem}
.interface-layout .doc-modal-body h3 {font-size: 1rem; margin-top: 1.25rem}
.interface-layout .doc-modal-foot {padding: 1rem 1.25rem; border-top: 1px solid #DEE2E6; text-align: center; flex-shrink: 0}
@media (max-width: 575.98px) {
.interface-layout .doc-modal-backdrop {padding: .5rem}
.interface-layout .doc-modal {max-height: 94dvh}
.interface-layout .doc-modal-body {padding: 1rem; font-size: .85rem}
.interface-layout .doc-modal-foot .btn {width: 100%}
}

/* Waiver/Photo agreement sections (locked until document opened) */
.interface-layout .waiver-section {position: relative; background: #F8F9FA; border: 1px solid #DEE2E6; border-radius: .5rem; padding: 1rem; margin-bottom: 1.5rem}
.interface-layout .waiver-locked-overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(248,249,250,.9); border-radius: .5rem; display: flex; align-items: center; justify-content: center; z-index: 10; font-size: .9rem; font-weight: 600; color: #999; gap: .5rem; cursor: not-allowed}
.interface-layout .waiver-locked-overlay i {font-size: 1rem; color: #CCC}
.interface-layout .waiver-section.waiver-unlocked .waiver-locked-overlay {display: none}
.interface-layout .waiver-title {font-size: .9rem; font-weight: 700; color: var(--color-body); margin-bottom: .5rem}
.interface-layout .waiver-text {font-size: .8rem; color: var(--color-secondary); line-height: 1.5; margin-bottom: .75rem}
.interface-layout .waiver-check {display: flex; align-items: flex-start; gap: .5rem}
.interface-layout .waiver-check input[type="checkbox"] {width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-buttons); cursor: pointer; flex-shrink: 0}
.interface-layout .waiver-check input[type="checkbox"]:focus {outline: none; box-shadow: none}
.interface-layout .waiver-check label {font-size: .85rem; color: var(--color-body); cursor: pointer}
.interface-layout .radio-option {display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; padding: .6rem .75rem; border: 1px solid #DEE2E6; border-radius: .375rem; background: #FFF; transition: all .2s; cursor: pointer}
.interface-layout .radio-option:hover {border-color: #CCC; background: #F1F1F1}
.interface-layout .radio-option.checked {border-color: var(--color-buttons); background: rgba(0,161,190,.04)}
.interface-layout .radio-option input[type="radio"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; width: 18px; height: 18px; border: 2px solid #CCC; border-radius: 50%; margin: 0; margin-top: 2px; cursor: pointer; position: relative; transition: all .2s; flex-shrink: 0}
.interface-layout .radio-option input[type="radio"]:checked {border-color: var(--color-buttons); border-width: 2px}
.interface-layout .radio-option input[type="radio"]:checked::after {content: ''; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-buttons)}
.interface-layout .radio-option input[type="radio"]:focus {outline: none; box-shadow: none}
.interface-layout .radio-option label {font-size: .85rem; color: var(--color-body); cursor: pointer; margin-bottom: 0}

/* Waiver/Photo document pages */
.interface-layout .waiver-doc {font-size: .9rem; line-height: 1.7}
.interface-layout .waiver-doc h3 {font-family: var(--font-headings); font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .5rem; text-transform: uppercase}
.interface-layout .waiver-doc p {margin-bottom: 1rem}
.interface-layout .waiver-doc ul, .interface-layout .waiver-doc ol {margin: 0 0 1rem 1.5rem; padding: 0}
.interface-layout .waiver-doc ul li, .interface-layout .waiver-doc ol li {margin-bottom: .75rem; padding-left: .25rem}
.interface-layout .photo-release-doc {font-size: .9rem; line-height: 1.7}
.interface-layout .photo-release-doc p {margin-bottom: 1rem}

/* Review summary rows */
.interface-layout .review-row {display: flex; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid #F0F0F0}
.interface-layout .review-row:last-child {border-bottom: none}
.interface-layout .review-label {flex: 0 0 40%; font-weight: 700; color: #646464; font-size: .9rem}
.interface-layout .review-value {flex: 1; color: #464646; font-size: .9rem}
.interface-layout .review-section-heading {font-family: var(--font-headings); font-size: 1.05rem; font-weight: 700; color: var(--color-buttons); margin-top: 1rem; margin-bottom: .25rem}
.interface-layout .review-edit-link {font-size: .85rem; font-weight: 600; color: var(--color-buttons); text-decoration: none; cursor: pointer; white-space: nowrap}
.interface-layout .review-edit-link:hover {color: var(--color-buttons-hover); text-decoration: underline}
.interface-layout .review-edit-link i {margin-right: .25rem}

/* Age Gate — 18+ confirmation before the participant form is revealed */
.interface-layout .age-gate {background: #FFF; border: 1px solid #DEE2E6; border-radius: .75rem; box-shadow: var(--shadow); padding: 2.5rem 2rem; text-align: center; max-width: 640px; margin: 0 auto 1.5rem; animation: age-gate-in .35s ease-out both}
.interface-layout .age-gate-icon {display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: color-mix(in srgb, var(--color-secondary) 28%, #FFF); color: var(--color-tertiary); font-size: 2rem; margin-bottom: 1.1rem}
.interface-layout .age-gate-title {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.75rem; font-weight: 700; margin: 0 0 .5rem; letter-spacing: .01em}
.interface-layout .age-gate-question {font-family: var(--font-primary); font-size: 1.1rem; color: var(--color-body); margin: 0 0 .5rem; line-height: 1.45}
.interface-layout .age-gate-question strong {color: var(--color-tertiary); font-weight: 700}
.interface-layout .age-gate-sub {font-family: var(--font-primary); font-size: .9rem; color: #6B6B6B; margin: 0 auto 1.75rem; max-width: 460px; line-height: 1.55}
.interface-layout .age-gate-actions {display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center}
.interface-layout .age-gate-btn {min-width: 210px; padding: .85rem 1.5rem; font-family: var(--font-buttons); font-weight: 600; font-size: 1rem; letter-spacing: .01em; border-radius: .5rem; transition: all .2s ease}
.interface-layout .age-gate-btn-yes {box-shadow: 0 2px 8px rgba(0,0,0,.08)}
.interface-layout .age-gate-btn-yes:hover {transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.14)}
.interface-layout .age-gate-btn-no {background: transparent; color: #6B6B6B; border: 1.5px solid #D9D9D9}
.interface-layout .age-gate-btn-no:hover {background: #F5F5F5; color: #464646; border-color: #BFBFBF}

.interface-layout .age-gate-confirmed {display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1rem; background: rgba(0,204,120,.08); border: 1px solid rgba(0,204,120,.25); border-radius: .5rem; color: #1b8d54; font-family: var(--font-primary); font-size: .88rem; font-weight: 600; margin-bottom: 1rem; animation: age-gate-in .3s ease-out both}
.interface-layout .age-gate-confirmed i {font-size: 1rem}

@keyframes age-gate-in {
    from {opacity: 0; transform: translateY(8px)}
    to {opacity: 1; transform: translateY(0)}
}

/* Under-18 apology modal */
.age-modal-backdrop {position: fixed; inset: 0; z-index: 10000; background: rgba(32,32,36,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: age-modal-fade .25s ease-out both}
.age-modal {background: #FFF; border-radius: .85rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); max-width: 480px; width: 100%; padding: 2.25rem 1.75rem 1.75rem; text-align: center; font-family: var(--font-primary, muli, sans-serif); color: var(--color-body, #27282A); animation: age-modal-pop .3s cubic-bezier(.2,.9,.3,1.15) both}
.age-modal-icon {display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--color-secondary, #F9CB9C) 40%, #FFF); color: var(--color-tertiary, #FF4A11); font-size: 1.75rem; margin-bottom: 1rem}
.age-modal-title {font-family: var(--font-headings, optima-lt-pro, sans-serif); font-size: 1.65rem; font-weight: 700; color: var(--color-primary, #27282A); margin: 0 0 .85rem}
.age-modal-body {font-size: .95rem; line-height: 1.6; margin: 0 auto .75rem; max-width: 420px; color: #464646}
.age-modal-body strong {color: var(--color-tertiary, #FF4A11); font-weight: 700}
.age-modal-body-soft {color: #6B6B6B; font-size: .9rem; margin-bottom: 1.5rem}
.age-modal-btn {min-width: 180px; padding: .8rem 1.5rem; font-weight: 600; border-radius: .5rem}

@keyframes age-modal-fade {
    from {opacity: 0}
    to {opacity: 1}
}
@keyframes age-modal-pop {
    from {opacity: 0; transform: scale(.92) translateY(6px)}
    to {opacity: 1; transform: scale(1) translateY(0)}
}

/* Responsive */
@media (max-width: 576px) {
    .session-card {flex-direction: column; align-items: flex-start; gap: .35rem}
    .selected-session-summary {flex-direction: column; gap: .25rem}
    .session-name-small {margin-left: 0}
    .interface-layout .wizard-step-label {display: none}
    .interface-layout .review-row {flex-direction: column; gap: .15rem}
    .interface-layout .review-label {flex: 0 0 auto}
    .interface-layout .age-gate {padding: 1.75rem 1.25rem}
    .interface-layout .age-gate-title {font-size: 1.4rem}
    .interface-layout .age-gate-btn {min-width: 100%; width: 100%}
    .age-modal {padding: 1.75rem 1.25rem 1.25rem}
    .age-modal-title {font-size: 1.35rem}
}

/* ============================================================
   Argenta Branded Footer — used across interface pages.
   Clean, modern, centered. Subtle gradient separator above.
   ============================================================ */
.interface-argenta-footer {
    margin-top: 3rem;
    padding: 1.75rem 1rem 1.25rem;
    text-align: center;
    position: relative;
}
.interface-argenta-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(320px, 80%);
    height: 1px;
    background: linear-gradient(to right, transparent, #D9DEE3 20%, #D9DEE3 80%, transparent);
}
.interface-argenta-footer-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    text-decoration: none !important;
    color: #8A8F94 !important;
    font-family: var(--font-primary), muli, sans-serif;
    transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.interface-argenta-footer-link:hover,
.interface-argenta-footer-link:focus-visible {
    background: #F5F7FA;
    color: #27282A !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 40, 40, .07);
    outline: none;
}
.interface-argenta-footer-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #A8AEB5;
    transition: color .18s ease;
}
.interface-argenta-footer-link:hover .interface-argenta-footer-label {
    color: #6C737A;
}
.interface-argenta-footer-logo {
    width: 200px;
    height: auto;
    opacity: .85;
    transition: opacity .18s ease;
}
.interface-argenta-footer-link:hover .interface-argenta-footer-logo {
    opacity: 1;
}
@media (max-width: 480px) {
    .interface-argenta-footer {margin-top: 2rem; padding: 1.25rem .75rem 1rem}
    .interface-argenta-footer-logo {width: 160px}
    .interface-argenta-footer-label {font-size: .68rem}
}

/* ===== Honeypot bot trap field — invisible to real users ===== */
/* Off-screen positioning (NOT display:none — bots skip those). Scroll-anchored */
/* so it doesn't move the page if focus accidentally lands on it. */
.hp-trap {position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none}
.hp-trap-input {width: 1px; height: 1px}

/* ============================================================================
   PUBLIC PAYMENT FORM — refined minimalism, team-brand-aware
   All colors driven by the team's CSS variables (--color-primary etc.).
   ============================================================================ */

/* Outer wrapper — gives the form a slight breathing room from the container */
.pf-shell {animation: pf-fade-in .5s ease both}

/* Step indicator (Information → Payment → Confirmation) */
.pf-stepper {display: flex; align-items: center; justify-content: center; gap: 0; margin: .5rem 0 2.25rem; flex-wrap: nowrap}
.pf-step {display: flex; flex-direction: column; align-items: center; gap: .55rem; min-width: 7rem; position: relative}
.pf-step-dot {width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #FFF; border: 2px solid #E5E7EB; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 600; color: #9CA3AF; transition: all .35s ease; box-shadow: 0 1px 2px rgba(0,0,0,.04)}
.pf-step-dot i {font-size: .85rem}
.pf-step-label {font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #9CA3AF; font-weight: 600; transition: color .35s ease; white-space: nowrap}
.pf-step.active .pf-step-dot {background: var(--color-primary); border-color: var(--color-primary); color: #FFF; box-shadow: 0 6px 18px -8px var(--color-primary)}
.pf-step.active .pf-step-label {color: var(--color-primary)}
.pf-step.done .pf-step-dot {background: var(--color-secondary, #00CC78); border-color: var(--color-secondary, #00CC78); color: #FFF}
.pf-step.done .pf-step-label {color: var(--color-secondary, #00CC78)}
.pf-step-rail {flex: 1; height: 2px; background: #E5E7EB; margin: 0 .25rem; align-self: flex-start; margin-top: 1.0625rem; min-width: 1.5rem; max-width: 4rem; position: relative; overflow: hidden}
.pf-step-rail.filled::after {content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--color-secondary, #00CC78); animation: pf-rail-fill .5s ease both}

/* Header text */
.pf-header {text-align: center; margin-bottom: 2rem}
.pf-eyebrow {font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--color-primary); font-weight: 700; margin-bottom: .5rem}
.pf-title {font-family: var(--font-headings); font-size: 2.25rem; font-weight: 700; color: var(--color-body); margin: 0 0 .55rem; letter-spacing: -.015em; line-height: 1.1}
.pf-subtitle {color: #6B7280; font-size: 1.02rem; max-width: 38rem; margin: 0 auto; line-height: 1.5}

/* Two-column layout */
.pf-grid {display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; align-items: start}
@media (max-width: 880px) {
.pf-grid {grid-template-columns: 1fr}
}

/* Generic card */
.pf-card {background: #FFF; border: 1px solid #ECECEC; border-radius: 14px; padding: 1.75rem; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.08); animation: pf-fade-in-up .55s ease both}
.pf-card-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid #F3F4F6}
.pf-card-title {font-family: var(--font-headings); font-size: 1.05rem; font-weight: 700; color: var(--color-body); margin: 0; letter-spacing: -.005em}
.pf-card-meta {font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #9CA3AF; font-weight: 600}

/* Inner section — used for the political block sub-cards */
.pf-section {padding: 1.25rem; background: #FAFAFA; border: 1px solid #F0F0F0; border-radius: 10px; margin-top: 1.25rem}
.pf-section-title {font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #6B7280; font-weight: 700; margin: 0 0 .85rem; display: flex; align-items: center; gap: .45rem}
.pf-section-title i {color: var(--color-primary); font-size: .9rem}

/* Field labels — uppercase, small, refined */
.pf-label {display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #6B7280; font-weight: 700; margin: 0 0 .5rem}
.pf-label .rfv {color: var(--color-rfv); margin-right: .25rem; font-size: .55rem; vertical-align: middle}
.pf-help {font-size: .78rem; color: #6B7280; margin: .35rem 0 0}
.pf-error-inline {color: var(--color-rfv); font-size: .82rem; margin-top: .4rem; display: flex; align-items: center; gap: .35rem}

/* Field row spacing */
.pf-row {display: grid; gap: 1rem; margin-bottom: 1rem}
.pf-row-2 {grid-template-columns: 1fr 1fr}
.pf-row-3 {grid-template-columns: 1fr 1fr 1fr}
@media (max-width: 600px) {
.pf-row-2, .pf-row-3 {grid-template-columns: 1fr}
}

/* Better inputs — refined neutral, brand-color focus */
.pf-input, .pf-textarea {width: 100%; height: 48px; padding: 0 .9rem; background: #FFF; border: 1px solid #E5E7EB; border-radius: 8px; font-size: .98rem; color: var(--color-body); font-family: var(--font-primary); transition: border-color .2s, box-shadow .2s, background .2s}
.pf-textarea {height: auto; padding: .75rem .9rem; min-height: 96px; resize: vertical; line-height: 1.5}
.pf-input:hover, .pf-textarea:hover {border-color: #D1D5DB}
.pf-input:focus, .pf-textarea:focus {outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent); background: #FFF}
.pf-input:disabled, .pf-textarea:disabled {background: #F9FAFB; color: #9CA3AF; cursor: not-allowed}
.pf-input::placeholder, .pf-textarea::placeholder {color: #C2C7CF}

/* Segmented control — for Individual/Organization, Yes/No invoice toggles, etc. */
.pf-segmented {display: inline-flex; padding: 4px; background: #F3F4F6; border-radius: 10px; gap: 2px}
.pf-segmented-btn {flex: 1; min-width: 8.5rem; padding: .55rem 1.1rem; border: 0; background: transparent; color: #6B7280; font-size: .9rem; font-weight: 600; font-family: var(--font-primary); border-radius: 7px; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; display: inline-flex; align-items: center; justify-content: center; gap: .45rem}
.pf-segmented-btn i {font-size: .85rem}
.pf-segmented-btn:hover:not(.active):not(:disabled) {color: var(--color-body)}
.pf-segmented-btn.active {background: #FFF; color: var(--color-primary); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 4px 10px -6px rgba(15,23,42,.12)}
.pf-segmented-btn:disabled {cursor: not-allowed; opacity: .5}

/* Funding source choice — stacked cards (richer than radios) */
.pf-choice-stack {display: grid; gap: .75rem}
.pf-choice {display: flex; gap: .85rem; padding: 1rem 1.1rem; background: #FFF; border: 1.5px solid #E5E7EB; border-radius: 10px; cursor: pointer; transition: border-color .2s, background .2s, transform .15s}
.pf-choice:hover {border-color: #C7CCD3}
.pf-choice.selected {border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 4%, #FFF)}
.pf-choice-radio {width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C7CCD3; flex-shrink: 0; margin-top: .15rem; position: relative; transition: border-color .2s}
.pf-choice.selected .pf-choice-radio {border-color: var(--color-primary)}
.pf-choice.selected .pf-choice-radio::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary)}
.pf-choice-body {flex: 1; line-height: 1.45}
.pf-choice-title {display: block; font-size: .85rem; font-weight: 700; color: var(--color-body); margin-bottom: .25rem; letter-spacing: .015em}
.pf-choice-text {font-size: .8rem; color: #6B7280}
.pf-choice:has(input:disabled) {cursor: not-allowed; opacity: .6}

/* Compliance card */
.pf-compliance {background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 4%, #FFF) 0%, #FFF 70%); border-color: color-mix(in srgb, var(--color-primary) 18%, #ECECEC)}

/* Retired toggle — turns into a soft pill chip */
.pf-chip {display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; background: #FFF; border: 1.5px solid #E5E7EB; border-radius: 999px; cursor: pointer; transition: all .2s; font-size: .85rem; font-weight: 600; color: #6B7280; user-select: none}
.pf-chip:hover {border-color: #C7CCD3}
.pf-chip i {font-size: .8rem}
.pf-chip.checked {background: color-mix(in srgb, var(--color-primary) 8%, #FFF); border-color: var(--color-primary); color: var(--color-primary)}

/* Right-column Payment Summary card — the hero */
/* NOTE: overflow MUST stay visible so Stripe Elements popovers (autofill, errors) aren't clipped. */
.pf-summary {position: sticky; top: 11rem; background: #FFF; border: 1px solid #ECECEC; border-radius: 16px; padding: 1.75rem 1.6rem 1.5rem; box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 12px 32px -16px rgba(15,23,42,.12); animation: pf-fade-in-up .55s ease .12s both}
.pf-summary::before {content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-primary), var(--color-tertiary)); border-radius: 16px 16px 0 0}

/* Pay state — collapse to centered single column so Stripe Elements has room.
   The Information card collapses to a thin "Paying as" summary inside the payment card. */
.pf-grid.pf-grid-paying {grid-template-columns: 1fr; max-width: 36rem; margin-left: auto; margin-right: auto}
.pf-grid.pf-grid-paying > .pf-card {display: none}
.pf-grid.pf-grid-paying .pf-summary {position: static}

/* "Paying as" compact identity summary, shown only during pay state */
.pf-paying-as {display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; background: #FAFAFA; border: 1px solid #F0F0F0; border-radius: 10px; margin-bottom: 1.15rem; font-size: .85rem; color: var(--color-body); line-height: 1.3}
.pf-paying-as i {color: var(--color-primary); font-size: 1.05rem; flex-shrink: 0}
.pf-paying-as-name {font-weight: 600; display: block}
.pf-paying-as-email {color: #6B7280; font-size: .78rem; display: block; margin-top: .15rem; word-break: break-word}

.pf-summary-pay-to {font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #9CA3AF; font-weight: 700; margin-bottom: .35rem}
.pf-summary-org {font-family: var(--font-headings); font-size: 1.1rem; font-weight: 700; color: var(--color-body); margin-bottom: 1.5rem; line-height: 1.3}

.pf-amount-display {display: flex; align-items: baseline; gap: .15rem; margin-bottom: .25rem; min-height: 3.5rem}
.pf-amount-currency {font-size: 1.5rem; color: #9CA3AF; font-weight: 500; align-self: flex-start; margin-top: .85rem}
.pf-amount-whole {font-family: var(--font-headings); font-size: 3.4rem; font-weight: 800; color: var(--color-body); line-height: 1; letter-spacing: -.025em; transition: color .25s}
.pf-amount-decimal {font-family: var(--font-headings); font-size: 1.6rem; font-weight: 700; color: #9CA3AF; align-self: flex-start; margin-top: 1rem; letter-spacing: -.01em}
.pf-amount-display.pf-amount-zero .pf-amount-whole {color: #D1D5DB}
.pf-amount-display.pf-amount-zero .pf-amount-currency {color: #D1D5DB}

.pf-summary-detail {font-size: .82rem; color: #6B7280; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px dashed #E5E7EB; min-height: 1.2em}
.pf-summary-detail strong {color: var(--color-body); font-weight: 600}

/* Toggle group inside summary card */
.pf-summary-toggle-label {font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #6B7280; font-weight: 700; margin: 0 0 .55rem}
.pf-summary-toggle-label.tight {margin-top: .1rem}
.pf-summary .pf-segmented {width: 100%; display: flex; margin-bottom: 1.1rem}
.pf-summary .pf-segmented-btn {flex: 1; min-width: 0}

.pf-summary-input-wrap {margin-bottom: 1.1rem}

/* Big amount input — sits below display, smaller (display IS the amount) */
.pf-amount-input-wrap {position: relative; margin-bottom: 1.25rem}
.pf-amount-input-wrap .pf-amount-prefix {position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #9CA3AF; font-size: 1rem; font-weight: 600; pointer-events: none}
.pf-amount-input-wrap input {padding-left: 2rem; font-size: 1.1rem; font-weight: 600; height: 52px; text-align: right; padding-right: 1rem}

/* Submit / pay button — full-width, brand-color, premium */
.pf-button {display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; height: 56px; padding: 0 1.5rem; border: 0; border-radius: 12px; background: var(--color-primary); color: #FFF; font-family: var(--font-buttons, var(--font-primary)); font-size: 1rem; font-weight: 700; letter-spacing: .015em; white-space: nowrap; cursor: pointer; transition: transform .15s, box-shadow .25s, background .25s; box-shadow: 0 6px 16px -8px var(--color-primary)}
.pf-button:hover:not(:disabled) {background: var(--color-buttons-hover, var(--color-primary)); transform: translateY(-1px); box-shadow: 0 10px 22px -10px var(--color-primary)}
.pf-button:active:not(:disabled) {transform: translateY(0)}
.pf-button:disabled {opacity: .65; cursor: not-allowed; transform: none; box-shadow: none}

.pf-button-secondary {background: transparent; color: #6B7280; border: 1.5px solid #E5E7EB; box-shadow: none; height: 44px; font-size: .9rem}
.pf-button-secondary:hover:not(:disabled) {background: #F9FAFB; color: var(--color-body); border-color: #D1D5DB; transform: none; box-shadow: none}

/* Trust strip below the button */
.pf-trust {display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: 1rem; padding-top: 1.1rem; border-top: 1px solid #F3F4F6; font-size: .76rem; color: #6B7280; font-weight: 500}
.pf-trust i {color: var(--color-primary); font-size: .9rem}

/* Stripe Elements container */
.pf-stripe-frame {margin: 1.25rem 0 .25rem; padding: 1.1rem; background: #FAFAFA; border: 1px solid #ECECEC; border-radius: 10px}
.pf-stripe-frame:focus-within {border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent)}

/* Pay-state action row */
.pf-pay-actions {display: flex; gap: .75rem; margin-top: 1rem}
.pf-pay-actions .pf-button {flex: 1}
.pf-pay-actions .pf-button-secondary {flex: 0 0 auto; width: auto; min-width: 7rem}

/* Locked overlay on the info card while paying */
.pf-card.locked {position: relative; overflow: hidden}
.pf-card.locked::after {content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.5); pointer-events: none; backdrop-filter: blur(.5px); -webkit-backdrop-filter: blur(.5px); transition: opacity .3s; border-radius: 14px}
.pf-card.locked .pf-input, .pf-card.locked .pf-textarea {opacity: .6}

/* Inline validation banner */
.pf-validation {background: color-mix(in srgb, var(--color-rfv) 5%, #FFF); border: 1px solid color-mix(in srgb, var(--color-rfv) 25%, #ECECEC); border-radius: 10px; padding: 1rem 1.15rem; margin-bottom: 1.25rem; animation: pf-shake .4s ease}
.pf-validation-title {color: var(--color-rfv); font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem}
.pf-validation ul {margin: 0; padding-left: 1.4rem; color: #4B5563; font-size: .88rem; line-height: 1.55}

/* Confirmation state */
.pf-confirm {text-align: center; max-width: 32rem; margin: 1rem auto 0; animation: pf-fade-in-up .55s ease both}
.pf-confirm-checkring {width: 6.5rem; height: 6.5rem; border-radius: 50%; background: color-mix(in srgb, var(--color-secondary, #00CC78) 12%, #FFF); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; position: relative; animation: pf-pop .5s cubic-bezier(.18,.89,.32,1.28) both}
.pf-confirm-checkring::before {content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-secondary, #00CC78) 30%, transparent); animation: pf-ripple 1.6s ease-out infinite}
.pf-confirm-svg {width: 3rem; height: 3rem; stroke: var(--color-secondary, #00CC78); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; fill: none}
.pf-confirm-svg path {stroke-dasharray: 60; stroke-dashoffset: 60; animation: pf-draw .55s ease .25s forwards}
.pf-confirm-eyebrow {font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--color-secondary, #00CC78); font-weight: 700; margin-bottom: .55rem}
.pf-confirm-title {font-family: var(--font-headings); font-size: 2rem; font-weight: 700; color: var(--color-body); margin: 0 0 .35rem; letter-spacing: -.01em}
.pf-confirm-amount {font-family: var(--font-headings); font-size: 2.6rem; font-weight: 800; color: var(--color-body); margin: 1.25rem 0 .5rem; letter-spacing: -.02em}
.pf-confirm-text {color: #6B7280; font-size: 1rem; line-height: 1.55; margin: 0 0 1.25rem}
.pf-confirm-text strong {color: var(--color-body); font-weight: 600}
.pf-confirm-receipt {display: inline-flex; align-items: center; gap: .55rem; padding: .65rem 1.1rem; background: #F9FAFB; border: 1px solid #ECECEC; border-radius: 999px; font-size: .82rem; color: #6B7280; font-weight: 500; margin-top: .25rem}
.pf-confirm-receipt i {color: var(--color-primary)}

/* Animations */
@keyframes pf-fade-in {from {opacity: 0} to {opacity: 1}}
@keyframes pf-fade-in-up {from {opacity: 0; transform: translateY(8px)} to {opacity: 1; transform: translateY(0)}}
@keyframes pf-rail-fill {from {width: 0} to {width: 100%}}
@keyframes pf-pop {0% {transform: scale(.5); opacity: 0} 70% {transform: scale(1.05); opacity: 1} 100% {transform: scale(1); opacity: 1}}
@keyframes pf-ripple {0% {transform: scale(.92); opacity: .55} 100% {transform: scale(1.18); opacity: 0}}
@keyframes pf-draw {to {stroke-dashoffset: 0}}
@keyframes pf-shake {0%,100% {transform: translateX(0)} 25% {transform: translateX(-3px)} 75% {transform: translateX(3px)}}

/* Mobile tightening */
@media (max-width: 600px) {
.pf-title {font-size: 1.75rem}
.pf-amount-whole {font-size: 2.6rem}
.pf-amount-decimal {font-size: 1.25rem}
.pf-summary {position: static}
.pf-step {min-width: 5rem}
.pf-step-rail {min-width: .5rem}
.pf-step-label {font-size: .6rem}
.pf-card {padding: 1.4rem}
/* Stack the Back + primary action so the primary (Donate/Pay) never gets crushed off-screen on phones */
.pf-pay-actions {flex-direction: column-reverse}
.pf-pay-actions .pf-button, .pf-pay-actions .pf-button-secondary {width: 100%; flex: none}
}

/* Honor "prefers-reduced-motion" — keep transitions but kill the showy stuff */
@media (prefers-reduced-motion: reduce) {
.pf-shell, .pf-card, .pf-summary, .pf-confirm {animation: none !important}
.pf-confirm-checkring::before {animation: none}
.pf-confirm-svg path {stroke-dashoffset: 0; animation: none}
}

/* ==========================================================================
   PUBLIC MEMBERSHIP FORM — level chooser cards
   Shared across MembershipForms/MembershipCSTONE.razor and future per-team
   membership pages. Uses the existing .pf-* tokens for fonts/colors so it
   inherits each team's runtime CSS (--color-primary etc.).
   ========================================================================== */
.mem-levels {display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1rem}
.mem-level {display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: .85rem 1rem; border: 1.5px solid #ECECEC; background: #FFF; border-radius: 12px; cursor: pointer; transition: border-color .18s, background .18s, transform .12s; text-align: left; font-family: inherit}
.mem-level:hover:not(:disabled) {border-color: color-mix(in srgb, var(--color-primary) 35%, #ECECEC); background: color-mix(in srgb, var(--color-primary) 3%, #FFF)}
.mem-level:disabled {cursor: not-allowed; opacity: .65}
.mem-level.active {border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 7%, #FFF); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent)}
.mem-level-icon {width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--color-primary) 10%, #FFF); color: var(--color-primary); font-size: 1.05rem; flex-shrink: 0}
.mem-level.active .mem-level-icon {background: var(--color-primary); color: #FFF}
.mem-level-body {min-width: 0}
.mem-level-name {font-family: var(--font-headings); font-weight: 700; font-size: .95rem; color: var(--color-body); line-height: 1.25}
.mem-level-desc {font-size: .8rem; color: #6B7280; line-height: 1.35; margin-top: .2rem}
.mem-level-amount {font-family: var(--font-headings); font-weight: 700; font-size: 1.1rem; color: var(--color-body); letter-spacing: -.005em; flex-shrink: 0}

/* Funding-source choice (political teams) */
.mem-funding {display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1rem}
.mem-funding-opt {display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.15rem; border: 1.5px solid #ECECEC; background: #FFF; border-radius: 12px; cursor: pointer; transition: border-color .18s, background .18s; text-align: left; font-family: inherit}
.mem-funding-opt:hover:not(:disabled) {border-color: color-mix(in srgb, var(--color-primary) 35%, #ECECEC); background: color-mix(in srgb, var(--color-primary) 3%, #FFF)}
.mem-funding-opt:disabled {cursor: not-allowed; opacity: .65}
.mem-funding-opt.active {border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 7%, #FFF); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent)}
.mem-funding-opt strong {font-family: var(--font-headings); font-size: .85rem; color: var(--color-body); letter-spacing: .04em}
.mem-funding-opt span {font-size: .82rem; color: #6B7280; line-height: 1.45}

/* Pledge / acknowledgement card */
.mem-pledge {border: 1px solid #ECECEC; border-radius: 12px; padding: 1rem 1.15rem; background: #FAFAFA}
.mem-pledge .pf-checkbox span {font-size: .82rem; color: #4B5563; line-height: 1.55}

/* =========================================================================
   Donation Form-specific styles (DonationForm.razor + InterfaceProgressGauge)
   ========================================================================= */

/* InterfaceProgressGauge - Bootstrap-based replacement for Telerik RadLinearGauge */
.progress-gauge{margin:1.25rem 0 1.5rem; padding:1.1rem 1.25rem; background:#FFFFFF; border:1px solid #E5E7EB; border-radius:.75rem; box-shadow:0 1px 3px rgba(15,23,42,.04)}
.progress-gauge-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:.65rem}
.progress-gauge-label{display:flex; align-items:center; gap:.5rem; color:#475569; font-size:.85rem; font-weight:600}
.progress-gauge-label i{color:var(--color-primary)}
.progress-gauge-percent{color:var(--color-primary); font-size:1.05rem; font-weight:700; letter-spacing:.02em}
.progress-gauge-track{position:relative; height:14px; background:#F1F5F9; border-radius:999px; overflow:hidden}
.progress-gauge-fill{position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg, var(--color-primary), var(--color-secondary)); border-radius:999px; transition:width .8s cubic-bezier(.4,0,.2,1)}
.progress-gauge-numbers{display:flex; align-items:baseline; justify-content:space-between; margin-top:.6rem; font-size:.78rem}
.progress-gauge-raised{display:flex; flex-direction:column; align-items:flex-start}
.progress-gauge-raised-amount{color:var(--color-body); font-size:1.05rem; font-weight:700}
.progress-gauge-raised-label{color:#94A3B8; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; margin-top:-.1rem}
.progress-gauge-goal{display:flex; flex-direction:column; align-items:flex-end}
.progress-gauge-goal-amount{color:#64748B; font-size:1.05rem; font-weight:600}
.progress-gauge-goal-label{color:#94A3B8; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; margin-top:-.1rem}

/* DonationForm header block (campaign/team hero + headline + content) */
/* Header + content run the full container width so the editable content lines up with the donation form grid below (Christine 2026-07-13). */
.pf-donate-header{margin:0 auto 1.5rem; max-width:none; text-align:center}
.pf-donate-hero{display:block; max-width:100%; height:auto; margin:0 auto 1.25rem; border-radius:.75rem; box-shadow:0 6px 24px rgba(15,23,42,.08)}
.pf-donate-headline{font-size:1.85rem; line-height:1.2; font-weight:700; color:var(--color-primary); margin:.25rem 0 .75rem}
.pf-donate-content{color:#475569; font-size:.98rem; line-height:1.55; max-width:none; margin:0 auto}
.pf-donate-content p{margin:.5rem 0}
/* Neutralize Content-Manager editor chrome that leaks onto the public form: the resize wrapper's dashed outline + handle box, AND editor.css's `.editor-table-responsive td/th` 1px gridline border (editor.css is loaded globally). Christine's rule: the public form NEVER shows a border around tables/content. The C# EditorContentSanitizer also strips the handle span + contenteditable from the saved HTML. */
.pf-donate-content .table-resize-wrapper{outline:none !important; display:block !important}
.pf-donate-content .table-resize-handle{display:none !important}
.pf-donate-content table, .pf-donate-content td, .pf-donate-content th{border:none !important}

/* Amount preset grid - 3 cols x 2 rows + Other button below */
.pf-amount-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.55rem; margin-top:1rem}
.pf-amount-btn{appearance:none; cursor:pointer; padding:.85rem 0; border:1.5px solid #E2E8F0; background:#FFFFFF; color:var(--color-primary); font-family:var(--font-primary); font-size:1.05rem; font-weight:600; border-radius:.5rem; transition:all .15s ease}
.pf-amount-btn:hover:not(:disabled){border-color:var(--color-primary); transform:translateY(-1px); box-shadow:0 4px 12px rgba(15,23,42,.08)}
.pf-amount-btn.selected{background:var(--color-primary) !important; color:#FFFFFF !important; border-color:var(--color-primary) !important; box-shadow:0 2px 8px rgba(15,23,42,.15)}
.pf-amount-btn:disabled{opacity:.55; cursor:not-allowed}
.pf-amount-btn-other{grid-column:1 / -1; padding:.75rem 0; font-size:.95rem; font-weight:500; color:#64748B}
.pf-amount-btn-other.selected{font-weight:600}

/* Recurrence toggle - 3 wide segments */
.pf-recurrence{display:flex; max-width:none}
.pf-recurrence .pf-segmented-btn{flex:1 1 0; min-width:0}

/* Fee + anonymous toggle rows */
.pf-fee-row{margin-bottom:.65rem}
.pf-fee-label{display:flex; align-items:flex-start; gap:.6rem; cursor:pointer; padding:.55rem .7rem; border-radius:.5rem; transition:background .12s ease}
.pf-fee-label:hover{background:#F8FAFC}
.pf-fee-label input[type=checkbox]{margin-top:.18rem; accent-color:var(--color-primary); width:1.05rem; height:1.05rem; flex-shrink:0; cursor:pointer}
.pf-fee-text{color:#475569; font-size:.85rem; line-height:1.4}

/* Honor-of toggle inside the tribute card - tighter than the main segmented */
.pf-section .pf-segmented{max-width:14rem}

@media (max-width:768px){
.pf-amount-grid{grid-template-columns:1fr 1fr}
.pf-donate-headline{font-size:1.45rem}
.progress-gauge-numbers{font-size:.72rem}
}

/* Demo banner — shown above the donation form when the team has no
   StripeClientID configured. Soft amber tone so it reads as a notice,
   not an error. */
.pf-demo-banner{max-width:64rem; margin:0 auto 1.25rem; padding:.85rem 1.1rem; background:#FFF7ED; border:1px solid #FBD38D; border-radius:.55rem; color:#7B341E; font-size:.92rem; line-height:1.5; display:flex; align-items:flex-start; gap:.7rem}
.pf-demo-banner i{flex-shrink:0; margin-top:.18rem; color:#C05621; font-size:1.05rem}
.pf-demo-banner strong{color:#7B341E}

/* CSS mockup of Stripe Payment Element for demo-mode teams (no Stripe
   configured). Renders in place of the real Stripe iframe so prospects
   see what donors will see. Fields are disabled visually — no real input,
   no charge. */
.pf-stripe-mock{margin:0 -.25rem 1rem; padding:.85rem 1rem; background:#FFFFFF; border:1px solid #E5E7EB; border-radius:.5rem}
.pf-stripe-mock-tabs{display:flex; gap:1.25rem; border-bottom:1px solid #E5E7EB; margin:-.85rem -1rem .85rem; padding:.7rem 1rem 0}
.pf-stripe-mock-tab{padding:.5rem .25rem; font-size:.88rem; color:#6B7280; cursor:default}
.pf-stripe-mock-tab.active{color:#0570DE; font-weight:600; border-bottom:2px solid #0570DE; margin-bottom:-1px}
.pf-stripe-mock-body{display:flex; flex-direction:column; gap:.85rem}
.pf-stripe-mock-row{display:grid; grid-template-columns:1fr 1fr; gap:.85rem}
.pf-stripe-mock-field label{display:block; font-size:.78rem; color:#4B5563; margin-bottom:.3rem}
.pf-stripe-mock-field input, .pf-stripe-mock-field select{width:100%; padding:.6rem .7rem; font-size:.95rem; line-height:1.4; color:#1F2937; background:#FAFAFA; border:1px solid #D1D5DB; border-radius:.35rem; box-shadow:inset 0 1px 2px rgba(0,0,0,.04); cursor:not-allowed}
.pf-stripe-mock-field input:disabled, .pf-stripe-mock-field select:disabled{opacity:.85}
.pf-stripe-mock-field input::placeholder{color:#9CA3AF}

/* =========================================================================
   PUBLIC AUCTION INTERFACE — landing, item grid, item details + bidding.
   Shared across ALL teams (AuctionHome / AuctionItems / AuctionItemDetails).
   Structural only; all colors come from the team's CSS variables.
   ========================================================================= */

/* NumericTextBox (bid amount) — match the shared 48px control height (mandatory rule) */
.interface-layout .ntb-wrapper {width: 100%}
.interface-layout .ntb-input-group {position: relative; width: 100%}
.interface-layout .ntb-input {height: 48px !important; min-height: 48px !important; width: 100%; padding: 0 .75rem; font-family: var(--font-primary) !important; font-weight: 700 !important; font-size: 1rem !important; color: #464646 !important; background: #FFF; border: 1px solid #ced4da; border-radius: .375rem}
.interface-layout .ntb-input.has-prefix {padding-left: 1.6rem}
.interface-layout .ntb-input:focus {outline: none; border-color: #adb5bd; box-shadow: none}
.interface-layout .ntb-prefix {position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: #777; font-weight: 700; z-index: 2; pointer-events: none}

/* Page titles */
.interface-layout .auction-title {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.9rem; font-weight: 700; margin: 0 0 1.25rem; text-align: center}
@media (min-width: 992px) {.interface-layout .auction-title {text-align: left}}

/* Generic bordered box (replaces legacy .border-all .rounded) */
.interface-layout .auction-box {border: 1px solid #E5E7EB; border-radius: .75rem; background: #FFF; padding: 1.25rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); margin-bottom: 1.25rem}

/* ---- Landing (AuctionHome) ---- */
.interface-layout .auction-sidebar {position: sticky; top: 13.5rem}
@media (max-width: 992px) {.interface-layout .auction-sidebar {position: static}}
.interface-layout .auction-cta {width: 100%; padding: .85rem 1rem; font-weight: 700; font-size: 1.02rem; border-radius: .6rem; margin-bottom: 1.25rem}
.interface-layout .auction-closed-badge {display: flex; align-items: center; justify-content: center; width: 100%; padding: .8rem 1rem; margin-bottom: 1.25rem; border-radius: .6rem; background: color-mix(in srgb, var(--color-tertiary) 10%, #FFF); border: 1px solid color-mix(in srgb, var(--color-tertiary) 30%, #FFF); color: var(--color-tertiary); font-weight: 700; font-size: 1.05rem; text-align: center}

.interface-layout .auction-dt {text-align: center; padding: .75rem 0; border-bottom: 1px dashed #E5E7EB}
.interface-layout .auction-dt:first-child {padding-top: 0}
.interface-layout .auction-dt-label {font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #6B7280; font-weight: 700; margin-bottom: .25rem}
.interface-layout .auction-dt-value {font-size: .98rem; color: var(--color-body); font-weight: 600}
.interface-layout .auction-raised {text-align: center; padding-top: 1rem}
.interface-layout .auction-raised-label {font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-secondary); font-weight: 700; margin-bottom: .15rem}
.interface-layout .auction-raised-amount {font-family: var(--font-headings); font-size: 2.3rem; font-weight: 800; color: var(--color-primary); line-height: 1.1; letter-spacing: -.02em}

.interface-layout .auction-banner {width: 100%; border-radius: .75rem; margin-bottom: 1.5rem; box-shadow: 0 6px 24px rgba(15,23,42,.08)}
.interface-layout .auction-description {font-size: 1rem; line-height: 1.6; color: var(--color-body)}
.interface-layout .auction-description img {max-width: 100%; height: auto}

.interface-layout .auction-sponsors-heading {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.4rem; font-weight: 700; text-align: center; margin: 2rem 0 1rem}
.interface-layout .auction-sponsors-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 1rem}
@media (max-width: 575px) {.interface-layout .auction-sponsors-grid {grid-template-columns: 1fr}}
.interface-layout .auction-sponsor-card {border: 1px solid #E5E7EB; border-radius: .75rem; background: #FFF; padding: 1rem; text-align: center; box-shadow: 0 1px 2px rgba(15,23,42,.04)}
.interface-layout .auction-sponsor-logo {max-height: 100px; max-width: 100%; object-fit: contain}
.interface-layout .auction-sponsor-name {margin-top: .5rem; font-size: .95rem; font-weight: 600; color: var(--color-body)}

/* ---- Empty / unavailable states ---- */
.interface-layout .auction-unavailable, .interface-layout .auction-empty {text-align: center; padding: 3rem 1rem; color: #6B7280}
.interface-layout .auction-unavailable i, .interface-layout .auction-empty i {font-size: 2.75rem; color: var(--color-primary); margin-bottom: 1rem; opacity: .8}
.interface-layout .auction-unavailable h2 {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.4rem; font-weight: 700; margin-bottom: .5rem}

/* ---- Items grid header / toolbar (AuctionItems + details header) ---- */
.interface-layout .auction-items-header {display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid #E5E7EB; margin-bottom: 1.25rem}
.interface-layout .auction-items-title {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.5rem; font-weight: 700; margin: 0}
.interface-layout .auction-nav-icons {display: flex; gap: .75rem; flex-shrink: 0}
.interface-layout .auction-nav-icon {display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--color-tertiary); font-size: 1.15rem; cursor: pointer; transition: background .15s}
.interface-layout .auction-nav-icon:hover {background: #F1F1F1; color: var(--color-tertiary)}

.interface-layout .auction-items-toolbar {display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem}
.interface-layout .auction-items-count {font-weight: 600; color: #6B7280}
.interface-layout .auction-search {display: flex; gap: .5rem; flex-wrap: nowrap}
.interface-layout .auction-search .form-control {min-width: 12rem}
@media (max-width: 575.98px) {.interface-layout .auction-search {flex-wrap: wrap; width: 100%} .interface-layout .auction-search .form-control {min-width: 0; flex: 1 1 100%}}
.interface-layout .auction-btn-clear {background: #F3F4F6; color: #6B7280; border: 1px solid #E5E7EB; font-weight: 600}
.interface-layout .auction-btn-clear:hover {background: #E5E7EB; color: var(--color-body)}

/* ---- Items grid ---- */
.interface-layout .auction-items-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem}
@media (max-width: 992px) {.interface-layout .auction-items-grid {grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 575px) {.interface-layout .auction-items-grid {grid-template-columns: 1fr}}
.interface-layout .auction-item-card {border: 1px solid #E5E7EB; border-radius: .75rem; background: #FFF; padding: 1rem; cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .12s; box-shadow: 0 1px 2px rgba(15,23,42,.04); display: flex; flex-direction: column}
.interface-layout .auction-item-card:hover {border-color: color-mix(in srgb, var(--color-primary) 40%, #E5E7EB); box-shadow: 0 8px 24px -12px rgba(15,23,42,.18); transform: translateY(-2px)}
.interface-layout .auction-item-photo {display: flex; align-items: center; justify-content: center; height: 200px; margin-bottom: .85rem; overflow: hidden; border-radius: .5rem; background: #FAFAFA}
.interface-layout .auction-item-photo img {max-height: 200px; max-width: 100%; object-fit: contain}
.interface-layout .auction-item-noimg {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #D1D5DB; font-size: 2.5rem}
.interface-layout .auction-item-noimg-lg {height: 220px}
.interface-layout .auction-item-name {font-family: var(--font-headings); font-weight: 700; font-size: 1.05rem; color: var(--color-primary); text-align: center; margin-bottom: .5rem}
.interface-layout .auction-item-desc {font-size: .85rem; color: #6B7280; line-height: 1.45; margin-bottom: .75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden}
.interface-layout .auction-item-desc img {max-width: 100%; height: auto}
.interface-layout .auction-item-meta {display: flex; align-items: center; justify-content: space-between; font-size: .82rem; padding: .15rem 0; margin-top: auto}
.interface-layout .auction-meta-label {color: var(--color-secondary); font-weight: 700; text-transform: lowercase}
.interface-layout .auction-meta-value {color: var(--color-body); font-weight: 600}

/* ---- Item details ---- */
.interface-layout .auction-detail-side {position: sticky; top: 13.5rem}
@media (max-width: 992px) {.interface-layout .auction-detail-side {position: static}}
.interface-layout .auction-photo-box {border: 1px solid #E5E7EB; border-radius: .75rem; background: #FAFAFA; padding: 1rem; text-align: center; margin-bottom: 1rem}
.interface-layout .auction-photo-box img {max-height: 320px; max-width: 100%; object-fit: contain; border-radius: .5rem}
.interface-layout .auction-value-box {border: 1px solid #E5E7EB; border-radius: .75rem; background: #FFF; padding: 1rem; text-align: center; box-shadow: 0 1px 2px rgba(15,23,42,.04)}
.interface-layout .auction-value-label {font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-secondary); font-weight: 700; margin-bottom: .15rem}
.interface-layout .auction-value-amount {font-family: var(--font-headings); font-size: 1.8rem; font-weight: 800; color: var(--color-primary); line-height: 1.1}
.interface-layout .auction-item-heading {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.7rem; font-weight: 700; margin: 0 0 1rem; text-align: center}
@media (min-width: 768px) {.interface-layout .auction-item-heading {text-align: left}}

.interface-layout .auction-bid-info-grid {display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap}
.interface-layout .auction-info-row {display: flex; align-items: center; gap: .75rem; padding: .25rem 0}
.interface-layout .auction-info-label {font-weight: 700; color: var(--color-body); min-width: 9.5rem}
.interface-layout .auction-info-value {color: var(--color-body)}
.interface-layout .auction-bid-window {text-align: right; min-width: 12rem}
@media (max-width: 575px) {.interface-layout .auction-bid-window {text-align: left}}

.interface-layout .auction-bid-form {border-color: color-mix(in srgb, var(--color-primary) 35%, #E5E7EB)}
.interface-layout .auction-bid-actions {display: flex; gap: .75rem; justify-content: flex-end; margin-top: .5rem}
.interface-layout .auction-bid-actions .btn {min-width: 9rem; padding: .65rem 1.25rem; font-weight: 700}

.interface-layout .auction-detail-block {margin-top: 1.5rem}
.interface-layout .auction-detail-label {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.1rem; font-weight: 700; margin-bottom: .35rem}
.interface-layout .auction-detail-body {font-size: .95rem; line-height: 1.6; color: var(--color-body)}
.interface-layout .auction-detail-body img {max-width: 100%; height: auto}

/* ---- Bid confirmation ---- */
.interface-layout .auction-confirm {text-align: center; padding: 1.5rem 1rem; animation: pf-fade-in-up .5s ease both}
.interface-layout .auction-confirm-icon {display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%; background: color-mix(in srgb, var(--color-secondary) 14%, #FFF); color: var(--color-secondary); font-size: 2.25rem; margin-bottom: 1rem}
.interface-layout .auction-confirm h2 {font-family: var(--font-headings); color: var(--color-secondary); font-size: 1.85rem; font-weight: 700; margin-bottom: .25rem}
.interface-layout .auction-confirm-sub {color: #6B7280; font-size: 1.05rem; margin-bottom: 1.5rem}
.interface-layout .auction-confirm-stats {display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap}
.interface-layout .auction-confirm-stat {display: flex; flex-direction: column; gap: .15rem; min-width: 6rem}
.interface-layout .auction-confirm-stat-label {font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-secondary); font-weight: 700}
.interface-layout .auction-confirm-stat-value {font-family: var(--font-headings); font-size: 1.5rem; font-weight: 700; color: var(--color-body)}

/* Bidder registration consent checkbox */
.interface-layout .auction-consent {display: flex; align-items: flex-start; gap: .6rem; margin: 1rem 0 1.25rem; padding: .85rem 1rem; background: #FAFAFA; border: 1px solid #F0F0F0; border-radius: 10px; font-size: .85rem; line-height: 1.45; color: #4B5563; cursor: pointer}
.interface-layout .auction-consent input[type="checkbox"] {margin-top: .15rem; width: 1.05rem; height: 1.05rem; accent-color: var(--color-primary); flex-shrink: 0; cursor: pointer}
.interface-layout .auction-consent strong {color: var(--color-body)}

/* "Bidding as" summary on the gated bid form */
.interface-layout .auction-bidder-summary {display: flex; align-items: center; gap: .65rem; padding: .75rem 1rem; background: #FAFAFA; border: 1px solid #F0F0F0; border-radius: 10px; margin-bottom: 1rem; font-size: .9rem; color: var(--color-body)}
.interface-layout .auction-bidder-summary i {color: var(--color-primary); font-size: 1.1rem; flex-shrink: 0}
.interface-layout .auction-bidder-name {font-weight: 700; display: block}
.interface-layout .auction-bidder-card {color: #6B7280; font-size: .82rem; display: block; margin-top: .1rem}

/* Bid amount input — $ prefix, commits on every keystroke (no blur race) */
.interface-layout .auction-bid-amount-wrap {position: relative}
.interface-layout .auction-bid-amount-prefix {position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: #777; font-weight: 700; pointer-events: none; z-index: 2}
.interface-layout .auction-bid-amount-input {padding-left: 1.6rem !important}

/***********************/
/*** VOLUNTEER TASK CALENDAR (vtc) ***/
/* Public Volunteer Task Calendar interface — structural only; all colors come from team tokens */

/* Task-group header (banner + title + description) */
.interface-layout .vtc-group-header {text-align: center; margin-bottom: 1.5rem}
.interface-layout .vtc-group-banner {width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; margin-bottom: 1rem}
.interface-layout .vtc-group-title {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.6rem; font-weight: 700; margin-bottom: .5rem}
.interface-layout .vtc-group-desc {color: #4B5563; font-size: 1rem; line-height: 1.5; max-width: 720px; margin: 0 auto}

/* Hero */
.interface-layout .vtc-hero {text-align: center; margin: .5rem 0 1.75rem}
.interface-layout .vtc-hero-title {font-family: var(--font-headings); color: var(--color-primary); font-size: 2rem; font-weight: 700; margin-bottom: .35rem}
.interface-layout .vtc-hero-sub {color: #6B7280; font-size: 1.05rem; margin: 0}

/* Filter bar */
.interface-layout .vtc-filters {display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem}
.interface-layout .vtc-filter-search {position: relative; flex: 1 1 240px; min-width: 200px}
.interface-layout .vtc-filter-search i {position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #9CA3AF; pointer-events: none; z-index: 2}
.interface-layout .vtc-filter-search input.form-control {padding-left: 2.4rem}
.interface-layout .vtc-filter-select {flex: 0 1 200px; min-width: 170px}
.interface-layout .vtc-filter-category {flex: 2 1 300px; min-width: 240px}

/* Count line */
.interface-layout .vtc-count {color: #6B7280; font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem}

/* Date heading */
.interface-layout .vtc-date-heading {font-family: var(--font-headings); color: var(--color-body); font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 .75rem; padding-bottom: .4rem; border-bottom: 2px solid #EEF0F2}

/* Task card */
.interface-layout .vtc-card {display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding: 1.1rem 1.25rem; margin-bottom: .85rem; background: #FFF; border: 1px solid #EBEDF0; border-radius: 14px; box-shadow: 0 1px 3px rgba(16,24,40,.04); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease}
.interface-layout .vtc-card:hover {box-shadow: 0 6px 20px rgba(16,24,40,.10); transform: translateY(-2px); border-color: #DDE1E6}
.interface-layout .vtc-card-main {min-width: 0; flex: 1 1 auto}
.interface-layout .vtc-card-title {font-weight: 700; font-size: 1.1rem; color: var(--color-body); margin-bottom: .4rem}
.interface-layout .vtc-card-meta {display: flex; align-items: center; gap: .5rem; color: #5B6470; font-size: .92rem; margin-top: .2rem}
.interface-layout .vtc-card-meta i {color: var(--color-primary); width: 1rem; text-align: center; flex-shrink: 0}
.interface-layout .vtc-card-location {color: #5B6470; text-decoration: underline; text-underline-offset: 2px}
.interface-layout .vtc-card-location:hover {color: var(--color-primary)}
.interface-layout .vtc-card-action {flex-shrink: 0}
.interface-layout .vtc-card-action .btn {min-width: 120px}

/* Empty / no-match states */
.interface-layout .vtc-empty {text-align: center; padding: 3rem 1rem; color: #6B7280}
.interface-layout .vtc-empty-icon {font-size: 3rem; color: var(--color-primary); opacity: .7; margin-bottom: 1rem; display: block}
.interface-layout .vtc-empty h3 {color: var(--color-body); font-weight: 700; margin-bottom: .35rem}
.interface-layout .vtc-empty p {margin-bottom: 1rem}

/* Sign-up modal */
.interface-layout .vtc-modal-backdrop {position: fixed; inset: 0; background: rgba(16,24,40,.55); display: flex; align-items: flex-start; justify-content: center; padding: 2.5rem 1rem; z-index: 9500; overflow-y: auto}
.interface-layout .vtc-modal {position: relative; background: #FFF; width: 100%; max-width: 640px; border-radius: 16px; box-shadow: 0 24px 60px rgba(16,24,40,.28); padding: 1.75rem; margin: auto}
.interface-layout .vtc-modal-close {position: absolute; top: .85rem; right: 1rem; background: none; border: none; color: #9CA3AF; font-size: 1.3rem; cursor: pointer; line-height: 1; padding: .25rem}
.interface-layout .vtc-modal-close:hover {color: var(--color-body)}
.interface-layout .vtc-modal-title {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.5rem; font-weight: 700; margin-bottom: .75rem}
.interface-layout .vtc-modal-task {background: #F8F9FB; border: 1px solid #EEF0F2; border-radius: 12px; padding: 1rem 1.15rem; margin-bottom: 1.25rem}
.interface-layout .vtc-modal-task-title {font-weight: 700; font-size: 1.1rem; color: var(--color-body); margin-bottom: .4rem}
.interface-layout .vtc-modal-task-meta {display: flex; align-items: center; gap: .5rem; color: #5B6470; font-size: .9rem; margin-top: .25rem}
.interface-layout .vtc-modal-task-meta i {color: var(--color-primary); width: 1rem; text-align: center; flex-shrink: 0}
.interface-layout .vtc-modal-task-desc {margin-top: .65rem; padding-top: .65rem; border-top: 1px dashed #E2E5E9; color: #4B5563; font-size: .9rem; line-height: 1.5}
.interface-layout .vtc-modal-task-contact {margin-top: .65rem; padding-top: .65rem; border-top: 1px dashed #E2E5E9; color: #5B6470; font-size: .85rem; display: flex; flex-wrap: wrap; gap: .35rem}
.interface-layout .vtc-modal-contact-label {font-weight: 700; color: var(--color-body)}
.interface-layout .vtc-modal-actions {display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #EEF0F2}
.interface-layout .vtc-btn-cancel {background: #F1F3F5; color: #41464B; border: 1px solid #E2E5E9}
.interface-layout .vtc-btn-cancel:hover {background: #E6E9EC; color: #41464B}

/* Thank-you state */
.interface-layout .vtc-thankyou {text-align: center; padding: 1rem .5rem .5rem}
.interface-layout .vtc-thankyou-icon {font-size: 3.25rem; color: var(--color-secondary); margin-bottom: .75rem; display: block}
.interface-layout .vtc-thankyou h2 {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.6rem; font-weight: 700; margin-bottom: .5rem}
.interface-layout .vtc-thankyou p {color: #5B6470; max-width: 420px; margin: 0 auto 1.25rem}
.interface-layout .vtc-thankyou-task {background: #F8F9FB; border: 1px solid #EEF0F2; border-radius: 12px; padding: 1rem 1.15rem; margin-bottom: 1.5rem; text-align: left}

/* Mobile */
@media (max-width: 575.98px) {
.interface-layout .vtc-card {flex-direction: column; align-items: stretch; gap: .75rem}
.interface-layout .vtc-card-action .btn {width: 100%}
.interface-layout .vtc-filter-select {flex: 1 1 100%}
.interface-layout .vtc-modal {padding: 1.25rem}
.interface-layout .vtc-modal-actions {flex-direction: column-reverse}
.interface-layout .vtc-modal-actions .btn {width: 100%}
}

/* ===================================================================== */
/*  EVENT SESSION SIGN UP (ess-*)  — generic public event sign-up flow    */
/*  Structural only; colors/fonts come from the per-team brand tokens.    */
/* ===================================================================== */

/* Event banner + hero (session-list screen) */
.interface-layout .ess-banner {width: 100%; max-height: 340px; object-fit: cover; border-radius: 14px; margin-bottom: 1.25rem; box-shadow: 0 1px 3px rgba(16,24,40,.06)}
.interface-layout .ess-hero {margin: .25rem 0 1.5rem}
.interface-layout .ess-event-title {font-family: var(--font-headings); color: var(--color-primary); font-size: 2rem; font-weight: 700; margin-bottom: .5rem}
.interface-layout .ess-event-desc {color: #4B5563; font-size: 1rem; line-height: 1.55}
.interface-layout .ess-event-desc img {max-width: 100%; height: auto}

.interface-layout .ess-section-label {font-family: var(--font-headings); color: var(--color-body); font-size: 1.15rem; font-weight: 700; margin: 1.75rem 0 1rem}

/* Search */
.interface-layout .ess-search {position: relative; margin-bottom: 1.25rem; max-width: 420px}
.interface-layout .ess-search i {position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #9CA3AF; pointer-events: none}
.interface-layout .ess-search .form-control {padding-left: 2.4rem}

/* Date grouping + session cards */
.interface-layout .ess-date-heading {font-family: var(--font-headings); color: var(--color-body); font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 .75rem; padding-bottom: .4rem; border-bottom: 2px solid #EEF0F2}

.interface-layout .ess-card {display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding: 1.1rem 1.25rem; margin-bottom: .85rem; background: #FFF; border: 1px solid #EBEDF0; border-radius: 14px; box-shadow: 0 1px 3px rgba(16,24,40,.04); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease}
.interface-layout .ess-card:hover {box-shadow: 0 6px 20px rgba(16,24,40,.10); transform: translateY(-2px); border-color: #DDE1E6}
.interface-layout .ess-card-main {min-width: 0; flex: 1 1 auto}
.interface-layout .ess-card-title {font-weight: 700; font-size: 1.1rem; color: var(--color-body); margin-bottom: .4rem}
.interface-layout .ess-card-meta {display: flex; align-items: center; gap: .5rem; color: #5B6470; font-size: .92rem; margin-top: .2rem}
.interface-layout .ess-card-meta i {color: var(--color-primary); width: 1rem; text-align: center; flex-shrink: 0}
.interface-layout .ess-card-location {color: #5B6470; text-decoration: underline; text-underline-offset: 2px}
.interface-layout .ess-card-location:hover {color: var(--color-primary)}
.interface-layout .ess-card-spots {display: inline-block; margin-top: .5rem; font-size: .8rem; font-weight: 600; color: #5B6470; background: #F1F3F5; border-radius: 999px; padding: .15rem .65rem}
.interface-layout .ess-card-spots-low {color: #FFF; background: var(--color-tertiary)}
.interface-layout .ess-card-action {flex-shrink: 0}
.interface-layout .ess-card-action .btn {min-width: 120px}

/* Empty / notice states */
.interface-layout .ess-empty {text-align: center; padding: 3rem 1rem; color: #6B7280}
.interface-layout .ess-empty-icon {font-size: 3rem; color: var(--color-primary); opacity: .7; margin-bottom: 1rem; display: block}
.interface-layout .ess-empty h3 {color: var(--color-body); font-weight: 700; margin-bottom: .35rem}
.interface-layout .ess-empty p {margin-bottom: 1rem}

/* Sign-up screen */
.interface-layout .ess-back {display: inline-flex; align-items: center; gap: .45rem; color: var(--color-primary); font-weight: 600; text-decoration: none; margin-bottom: 1rem; cursor: pointer}
.interface-layout .ess-back:hover {text-decoration: underline}
.interface-layout .ess-signup-heading {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem}

.interface-layout .ess-detail-card {background: #F8F9FB; border: 1px solid #EEF0F2; border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 1.5rem}
.interface-layout .ess-detail-event {font-weight: 700; font-size: 1.05rem; color: var(--color-body); margin-bottom: .5rem}
.interface-layout .ess-detail-meta {display: flex; align-items: center; gap: .5rem; color: #5B6470; font-size: .92rem; margin-top: .25rem}
.interface-layout .ess-detail-meta i {color: var(--color-primary); width: 1rem; text-align: center; flex-shrink: 0}
.interface-layout .ess-detail-meta a {color: #5B6470; text-decoration: underline; text-underline-offset: 2px}
.interface-layout .ess-detail-meta a:hover {color: var(--color-primary)}
.interface-layout .ess-detail-instructions {margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed #E2E5E9; color: #4B5563; font-size: .92rem; line-height: 1.55}
.interface-layout .ess-detail-contact {margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed #E2E5E9; color: #5B6470; font-size: .88rem}
.interface-layout .ess-detail-contact-label {font-weight: 700; color: var(--color-body); margin-right: .35rem}
.interface-layout .ess-detail-contact a {color: var(--color-primary)}
.interface-layout .ess-detail-spots {margin-top: .75rem; font-size: .9rem; font-weight: 600; color: var(--color-secondary); display: flex; align-items: center; gap: .45rem}
.interface-layout .ess-detail-spots i {width: 1rem; text-align: center}

/* Individual / Organization toggle */
.interface-layout .ess-toggle {display: inline-flex; border: 1px solid #D7DBE0; border-radius: 10px; overflow: hidden; margin-bottom: 1.25rem}
.interface-layout .ess-toggle-btn {background: #FFF; border: none; padding: .6rem 1.4rem; font-size: 1rem; color: #5B6470; cursor: pointer; display: flex; align-items: center; gap: .5rem; transition: background .12s ease, color .12s ease}
.interface-layout .ess-toggle-btn + .ess-toggle-btn {border-left: 1px solid #D7DBE0}
.interface-layout .ess-toggle-btn.active {background: var(--color-primary); color: #FFF}
.interface-layout .ess-toggle-btn:not(.active):hover {background: #F1F1F1}

.interface-layout .ess-phone-field {max-width: 320px}

/* Actions */
.interface-layout .ess-actions {display: flex; gap: .75rem; align-items: center; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid #EEF0F2}
.interface-layout .ess-actions .btn {min-width: 200px}

/* Confirmation + notice panels */
.interface-layout .ess-confirm {text-align: center; padding: 2rem 1rem .5rem}
.interface-layout .ess-confirm-icon {font-size: 3.25rem; color: var(--color-secondary); margin-bottom: .75rem; display: block}
.interface-layout .ess-confirm h2 {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.6rem; font-weight: 700; margin-bottom: .5rem}
.interface-layout .ess-confirm p {color: #5B6470; max-width: 460px; margin: 0 auto 1.25rem}
.interface-layout .ess-confirm-summary {background: #F8F9FB; border: 1px solid #EEF0F2; border-radius: 12px; padding: 1rem 1.15rem; margin: 0 auto 1.5rem; max-width: 460px; text-align: left}
.interface-layout .ess-confirm-session {font-weight: 700; font-size: 1.05rem; color: var(--color-body); margin-bottom: .4rem}
.interface-layout .ess-confirm-meta {display: flex; align-items: center; gap: .5rem; color: #5B6470; font-size: .9rem; margin-top: .25rem}
.interface-layout .ess-confirm-meta i {color: var(--color-primary); width: 1rem; text-align: center; flex-shrink: 0}

.interface-layout .ess-notice {text-align: center; padding: 2.5rem 1rem .5rem; color: #6B7280}
.interface-layout .ess-notice-icon {font-size: 3rem; color: var(--color-tertiary); opacity: .85; margin-bottom: 1rem; display: block}
.interface-layout .ess-notice h2 {font-family: var(--font-headings); color: var(--color-body); font-weight: 700; margin-bottom: .5rem}
.interface-layout .ess-notice p {margin-bottom: 1.25rem}

/* Mobile */
@media (max-width: 575.98px) {
.interface-layout .ess-card {flex-direction: column; align-items: stretch; gap: .75rem}
.interface-layout .ess-card-action .btn {width: 100%}
.interface-layout .ess-actions {flex-direction: column-reverse}
.interface-layout .ess-actions .btn {width: 100%}
.interface-layout .ess-toggle {width: 100%}
.interface-layout .ess-toggle-btn {flex: 1 1 50%; justify-content: center}
.interface-layout .ess-phone-field {max-width: 100%}
}

/* SOAM (49620): the square-ish logo rendered small against the 9em cap + 1em internal padding.
   Fill the header's available height instead. Header itself stays 12em (size unchanged). */
@media (min-width: 576.1px) {
.interface-layout[data-team="49620"] .interface-logo {padding: .25em; max-height: 11em !important}
}

/* Diocese of La Crosse (49870): same small-logo issue as SOAM — fill the header's available
   height like Fairfax's does naturally. Header itself stays 12em (size unchanged). */
@media (min-width: 576.1px) {
.interface-layout[data-team="49870"] .interface-logo {padding: .25em; max-height: 11em !important}
}
@media (max-width: 576px) {
.interface-layout[data-team="49870"] .interface-logo {padding: .25em; max-height: 6.5em !important}
}