:root {
    --font-family: "Segoe UI", sans-serif;
    --page-background: linear-gradient(180deg, #f5f1eb 0%, #f7f5f1 100%);
    --text-color: #1f2937;
    --muted-text-color: #6b5d4c;
    --soft-text-color: #5d4f3d;
    --panel-background: rgba(255, 255, 255, 0.92);
    --card-background: #ffffff;
    --card-border-color: #ece5db;
    --input-border-color: #d9d4cb;
    --phone-prefix-background: #f2ede5;
    --active-group-background: #efe4d4;
    --active-group-border-color: #d5b694;
    --bookable-accent: #c87b4a;
    --waitlist-background: #f1eadf;
    --waitlist-accent: #b2a28d;
    --selected-outline: #1f2937;
    --success-accent: #6b9f6b;
    --error-accent: #b85c4b;
    --field-error-color: #b42318;
    --waitlist-submit-context-color: #b42318;
    --primary-button-background: #1f2937;
    --primary-button-text: #ffffff;
    --secondary-button-background: #e9dfd2;
    --secondary-button-text: #433629;
    --radius-large: 28px;
    --radius-medium: 24px;
    --radius-small: 18px;
    --pill-radius: 999px;
    --panel-shadow: 0 10px 30px rgba(38, 33, 28, 0.08);
    --card-shadow: 0 8px 20px rgba(38, 33, 28, 0.06);
    --active-card-shadow: 0 10px 24px rgba(38, 33, 28, 0.08);
    --selected-card-shadow: 0 12px 26px rgba(38, 33, 28, 0.12);
    --content-width: 1120px;
    --page-gutter: 32px;
    --desktop-left-column: 320px;
    --desktop-right-column: 1fr;
    --header-logo-size: 96px;
    --header-gap: 16px;
    --header-top-padding: 32px;
    --header-bottom-padding: 24px;
    --header-top-padding-large: 56px;
    --header-title-bottom-margin: 12px;
    --header-title-size: 3rem;
    --header-body-max-width: 720px;
    --header-body-size: 1rem;
    --header-body-line-height: 1.6;
    --page-bottom-padding: 32px;
    --footer-bottom-margin: 24px;
    --panel-padding: 24px;
    --panel-gap: 24px;
    --section-gap: 16px;
    --form-section-bottom-margin: 24px;
    --card-list-gap: 14px;
    --panel-copy-bottom-margin: 18px;
    --panel-title-bottom-margin: 12px;
    --result-title-bottom-margin: 6px;
    --result-message-paragraph-gap: 8px;
    --panel-title-size: 1.5rem;
    --panel-copy-size: 1rem;
    --month-heading-margin-top: 10px;
    --month-heading-margin-horizontal: 6px;
    --month-heading-size: 1.25rem;
    --card-padding-vertical: 18px;
    --card-padding-horizontal: 20px;
    --time-group-gap: 6px;
    --time-group-day-size: 1rem;
    --time-group-time-size: 1.55rem;
    --workshop-card-gap: 16px;
    --workshop-card-inner-gap: 6px;
    --workshop-date-size: 1rem;
    --workshop-title-size: 1.15rem;
    --workshop-price-size: 1rem;
    --workshop-state-size: 1rem;
    --waitlist-hint-gap: 10px;
    --waitlist-hint-size: 0.92rem;
    --field-gap: 12px;
    --embedded-form-bottom-padding: 8px;
    --summary-grid-gap: 14px;
    --summary-label-size: 0.9rem;
    --summary-value-size: 1.05rem;
    --form-label-size: 1rem;
    --field-error-size: 0.875rem;
    --submit-context-size: 1rem;
    --submit-context-margin-top: 10px;
    --submit-context-margin-bottom: 10px;
    --button-padding-vertical: 14px;
    --button-padding-horizontal: 20px;
    --button-gap: 12px;
    --result-payment-button-margin-top: 8px;
    --result-restart-button-margin-top: 12px;
    --button-text-size: 1rem;
    --footer-padding-vertical: 20px;
    --footer-text-size: 1rem;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-family);
    background: var(--page-background);
    color: var(--text-color);
}

button,
input {
    font: inherit;
}

.page-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-header,
.page-content,
.site-footer {
    width: min(var(--content-width), calc(100% - var(--page-gutter)));
    margin: 0 auto;
}

.site-header {
    padding: var(--header-top-padding) 0 var(--header-bottom-padding);
    display: grid;
    gap: var(--header-gap);
}

.logo-mark,
.site-footer,
.placeholder-card,
.summary-card,
.booking-form,
.state-card,
.card-panel {
    background: var(--panel-background);
    border-radius: var(--radius-large);
    box-shadow: var(--panel-shadow);
}

.logo-mark {
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    font-weight: 700;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.logo-home-link {
    color: inherit;
    text-decoration: none;
}

.site-logo {
    display: block;
    width: auto;
    max-width: 360px;
    height: auto;
    max-height: calc(var(--header-logo-size) * 1.5);
    object-fit: contain;
}

.header-copy h1 {
    margin: 0 0 var(--header-title-bottom-margin);
    font-size: var(--header-title-size);
    line-height: 0.95;
}

.header-copy p {
    margin: 0;
    font-size: var(--header-body-size);
    line-height: var(--header-body-line-height);
}

.page-content {
    flex: 1;
    padding-bottom: var(--page-bottom-padding);
}

.desktop-selection-layout {
    display: grid;
    gap: var(--panel-gap);
    margin-bottom: var(--panel-gap);
}

.placeholder-card,
.summary-card,
.booking-form,
.state-card,
.card-panel {
    padding: var(--panel-padding);
}

.placeholder-card h2,
.summary-card h2,
.card-panel h2,
.state-card h2 {
    margin-top: 0;
    margin-bottom: var(--panel-title-bottom-margin);
    font-size: var(--panel-title-size);
}

.summary-card h2 {
    text-align: center;
}

.panel-copy {
    margin: 0 0 var(--panel-copy-bottom-margin);
    color: var(--muted-text-color);
    font-size: var(--panel-copy-size);
}

.time-group-list {
    display: grid;
    gap: var(--card-list-gap);
}

.time-group-card {
    width: 100%;
    border: 0;
    border-radius: var(--radius-medium);
    padding: var(--card-padding-vertical) var(--card-padding-horizontal);
    background: var(--card-background);
    box-shadow: inset 0 0 0 1px var(--card-border-color), var(--card-shadow);
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: var(--time-group-gap);
}

.time-group-card.is-active {
    background: var(--active-group-background);
    box-shadow: inset 0 0 0 2px var(--active-group-border-color), var(--active-card-shadow);
}

.time-group-day {
    font-size: var(--time-group-day-size);
    color: var(--muted-text-color);
}

.time-group-time {
    font-size: var(--time-group-time-size);
    font-weight: 700;
    color: var(--text-color);
}

.workshop-card-list {
    display: grid;
    gap: var(--card-list-gap);
}

.load-more-button {
    margin-top: var(--panel-gap);
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
}

.load-more-button[hidden] {
    display: none !important;
}

.primary-button[hidden],
.secondary-button[hidden] {
    display: none !important;
}

.month-group-heading {
    margin: var(--month-heading-margin-top) var(--month-heading-margin-horizontal) 0;
    color: var(--muted-text-color);
    font-size: var(--month-heading-size);
}

.month-group-heading[hidden] {
    display: none !important;
}

.workshop-card {
    border-radius: var(--radius-medium);
    padding: var(--card-padding-vertical) var(--card-padding-horizontal);
    background: var(--card-background);
    box-shadow: inset 0 0 0 1px var(--card-border-color), var(--card-shadow);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--workshop-card-gap);
}

.workshop-card[hidden] {
    display: none !important;
}

.summary-card[hidden],
.booking-form[hidden],
.state-card[hidden],
.form-section[hidden],
.desktop-selection-layout[hidden] {
    display: none !important;
}

.workshop-card.is-bookable {
    border-left: 6px solid var(--bookable-accent);
}

.workshop-card.is-waitlist {
    background: var(--waitlist-background);
    border-left: 6px solid var(--waitlist-accent);
}

.workshop-card.is-selected {
    box-shadow: inset 0 0 0 2px var(--selected-outline), var(--selected-card-shadow);
    transform: translateY(-1px);
}

.workshop-card-main,
.workshop-card-side {
    display: grid;
    gap: var(--workshop-card-inner-gap);
}

.workshop-date-row {
    display: flex;
    align-items: center;
    gap: var(--waitlist-hint-gap);
    flex-wrap: wrap;
}

.workshop-card-side {
    justify-items: end;
    align-content: center;
}

.workshop-date,
.workshop-title,
.workshop-price,
.workshop-state {
    margin: 0;
}

.workshop-date {
    font-size: var(--workshop-date-size);
}

.workshop-date,
.workshop-state {
    color: var(--muted-text-color);
}

.waitlist-status {
    color: var(--soft-text-color);
    font-size: var(--waitlist-hint-size);
}

.waitlist-hint {
    color: var(--soft-text-color);
    font-size: var(--waitlist-hint-size);
    margin: 0;
}

.workshop-title {
    font-size: var(--workshop-title-size);
}

.workshop-price {
    font-weight: 700;
    font-size: var(--workshop-price-size);
}

.workshop-state {
    font-size: var(--workshop-state-size);
}

.form-section {
    display: grid;
    gap: var(--section-gap);
    margin-bottom: var(--form-section-bottom-margin);
}

.selected-summary-preview-wrap {
    display: flex;
    justify-content: center;
}

.booking-form-embedded {
    margin-top: var(--panel-gap);
    box-shadow: none;
    background: transparent;
    padding: 0 0 var(--embedded-form-bottom-padding);
}

.summary-label,
.summary-value {
    margin: 0;
}

.summary-label {
    color: var(--muted-text-color);
    font-size: var(--summary-label-size);
}

.summary-value {
    font-size: var(--summary-value-size);
    font-weight: 600;
}

.selected-workshop-preview {
    width: min(100%, 560px);
    cursor: default;
}

.field-row label {
    font-size: var(--form-label-size);
}

.booking-form {
    display: grid;
    gap: var(--field-gap);
}

.field-row {
    display: flex;
    justify-content: flex-start;
    gap: var(--field-gap);
    align-items: baseline;
    flex-wrap: wrap;
}

.field-error {
    color: var(--field-error-color);
    font-size: var(--field-error-size);
    text-align: left;
    font-weight: 600;
}

input[type="text"] {
    width: 100%;
    border: 1px solid var(--input-border-color);
    border-radius: var(--radius-small);
    padding: var(--button-padding-vertical) 16px;
    background: var(--card-background);
}

.phone-input {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    border: 1px solid var(--input-border-color);
    border-radius: var(--radius-small);
    background: var(--card-background);
    overflow: hidden;
}

.phone-input span {
    padding: var(--button-padding-vertical) 16px;
    background: var(--phone-prefix-background);
    font-weight: 600;
}

.phone-input input {
    border: 0;
}

.submit-context {
    margin: var(--submit-context-margin-top) 0 var(--submit-context-margin-bottom);
    color: var(--soft-text-color);
    font-size: var(--submit-context-size);
    text-align: center;
}

.submit-context.is-waitlist {
    color: var(--waitlist-submit-context-color);
}

.state-card.is-success {
    border-left: 6px solid var(--success-accent);
}

.state-card.is-error {
    border-left: 6px solid var(--error-accent);
}

#result-state {
    display: grid;
    justify-items: center;
}

#result-state h2 {
    margin-bottom: var(--result-title-bottom-margin);
}

#result-message {
    margin: 0;
}

#result-message p {
    margin: 0 0 var(--result-message-paragraph-gap);
}

#result-message p:last-child {
    margin-bottom: 0;
}

#result-payment-link {
    margin-top: var(--result-payment-button-margin-top);
}

#result-restart-link {
    margin-top: var(--result-restart-button-margin-top);
}

.primary-button,
.secondary-button {
    border: 0;
    border-radius: var(--pill-radius);
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    cursor: pointer;
}

.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    background: var(--primary-button-background);
    color: var(--primary-button-text);
    min-height: 52px;
    font-size: var(--button-text-size);
}

.secondary-button {
    background: var(--secondary-button-background);
    color: var(--secondary-button-text);
    font-size: var(--button-text-size);
}

.button-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--primary-button-text);
    border-radius: 50%;
    display: none;
}

.primary-button.is-submitting .button-spinner {
    display: inline-block;
    animation: spin 0.8s linear infinite;
}

.primary-button.is-submitting .button-label {
    opacity: 0.75;
}

.site-footer {
    margin-bottom: var(--footer-bottom-margin);
    padding: var(--footer-padding-vertical) var(--panel-padding);
    font-size: var(--footer-text-size);
    text-align: center;
}

.site-footer p {
    margin: 0;
}

.site-footer-address {
    font-weight: 600;
}

.site-footer-contacts {
    margin-top: 10px;
    display: grid;
    gap: 4px;
}

.site-footer-website {
    margin-top: 14px !important;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 768px) {
    .site-header {
        padding-top: var(--header-top-padding-large);
    }

    .logo-mark {
        justify-content: center;
    }
}

@media (min-width: 960px) {
    .desktop-selection-layout {
        grid-template-columns: var(--desktop-left-column) var(--desktop-right-column);
    }
}