.booking-process {
    width: 100%;
    display: grid;
    gap: var(--space-5);
}

.booking-intro { margin-bottom: var(--space-7); }

.booking-step {
    min-width: 0;
    margin: 0;
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    transition: border-color 150ms ease;
}

.booking-step legend {
    width: auto;
    margin: 0;
    padding: 0 var(--space-3);
    border: 0;
    color: var(--color-text);
    font-size: 1.15rem;
}

.booking-step-number {
    width: 1.8rem;
    height: 1.8rem;
    display: inline-grid;
    place-items: center;
    margin-right: var(--space-2);
    background: var(--color-surface-muted);
    border-radius: 50%;
    font-size: 0.875rem;
}

.booking-step--active { border-color: var(--color-accent); box-shadow: var(--shadow-soft); }
.booking-step--completed { background: #fbfdfb; border-color: #8baa91; }
.booking-step--completed .booking-step-number { background: #e5eee7; color: #365b3e; }
.booking-step--locked { background: rgba(255, 255, 255, 0.55); }
.booking-step--locked legend,
.booking-step--locked .booking-step-placeholder { color: var(--color-text-muted); }
.booking-step-content { padding-top: var(--space-5); }
.booking-step-content .form-grid { margin-bottom: var(--space-5); }
.booking-step-placeholder { margin: var(--space-3) 0 0; }
.booking-step-back { margin-bottom: var(--space-5); }

.booking-data-grid {
    grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(135px, 0.72fr)) minmax(190px, 1fr);
    align-items: start;
}
.booking-guests-label {
    min-height: 1.25rem;
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.booking-guests-label label { margin: 0; }
.booking-guests-label small { color: var(--color-text-muted); font-size: 0.82rem; font-weight: 400; white-space: nowrap; }

.booking-label-with-help {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}
.booking-help {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}
.booking-help-button {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    min-height: 1.25rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
    color: #6f7478;
    background: #f1f2f2;
    border: 1px solid #aeb2b5;
    border-radius: 50%;
    font: 700 0.82rem/1 sans-serif;
    cursor: help;
}
.booking-help-button:hover,
.booking-help-button:focus-visible,
.booking-help[data-open="true"] .booking-help-button {
    color: #4f5457;
    background: #e2e4e5;
    border-color: #7f8589;
}
.booking-help-button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.booking-help-tooltip {
    position: absolute;
    z-index: 20;
    right: 50%;
    bottom: calc(100% + 0.6rem);
    width: min(19rem, calc(100vw - 2rem));
    padding: 0.7rem 0.8rem;
    color: #fff;
    background: #555b5f;
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-soft);
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(50%) translateY(0.25rem);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}
.booking-help-tooltip::after {
    position: absolute;
    top: 100%;
    right: calc(50% - 0.35rem);
    width: 0;
    height: 0;
    border: 0.35rem solid transparent;
    border-top-color: #555b5f;
    content: "";
}
.booking-help:hover .booking-help-tooltip,
.booking-help:focus-within .booking-help-tooltip,
.booking-help[data-open="true"] .booking-help-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(50%) translateY(0);
}

.booking-message { min-height: 1.65em; margin: var(--space-4) 0 0; font-weight: 500; }
.booking-message--success { color: #365b3e; }
.booking-message--error { color: #963d2c; }
.booking-message:empty,
.booking-inline-message:empty,
.booking-field-error:empty { display: none; }
.booking-price {
    margin-top: var(--space-4);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-divider);
    color: var(--color-text);
    font-size: 1.15rem;
    font-weight: 400;
}

.booking-alternatives { margin-top: var(--space-6); }
.booking-alternatives section + section { margin-top: var(--space-6); }
.booking-alternatives h2 { margin-bottom: var(--space-3); font-size: 1.15rem; }
.booking-alternative-list { margin: 0; padding: 0; border-top: 1px solid var(--color-divider); list-style: none; }
.booking-alternative {
    padding: var(--space-4) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: 1px solid var(--color-divider);
}
.booking-alternative-copy { margin: 0; color: var(--color-text); }
.booking-alternative-meta { display: block; color: var(--color-text-muted); font-size: 0.9rem; }
.booking-gap-label { color: #365b3e; font-weight: 600; }
.booking-alternative button { flex: 0 0 auto; }

.booking-extras-grid {
    margin-bottom: var(--space-5);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}
.booking-extra-section {
    min-width: 0;
    padding: var(--space-5);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-small);
}
.booking-extra-section--wide { grid-column: 1 / -1; }
.booking-extra-section h2,
.booking-price-summary h2 { margin-bottom: var(--space-3); font-size: 1.15rem; }
.booking-extra-section p { margin-bottom: 0; }
.booking-section-heading,
.booking-option-row,
.booking-option-total { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.booking-section-heading { align-items: flex-start; margin-bottom: var(--space-4); }
.booking-section-heading h2 { margin-bottom: var(--space-1); }
.booking-section-heading p { font-size: 0.9rem; }
.booking-option-row .checkbox-field { flex: 1; }
.booking-option-row label span { display: block; color: var(--color-text-muted); font-size: 0.9rem; font-weight: 400; }
.booking-option-row > strong,
.booking-option-total strong { white-space: nowrap; color: var(--color-text); font-weight: 400; text-align: right; }
.booking-inline-message { min-height: 1.5em; margin-top: var(--space-3) !important; color: #963d2c; font-size: 0.9rem; }
.booking-fee-note { margin-top: var(--space-3) !important; font-size: 0.9rem; }
.booking-fee-note strong { font-weight: 400; }
.booking-option-total { margin-top: var(--space-4); color: var(--color-text); }
.booking-parking-footer { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); }

.booking-parking-rows { display: grid; gap: var(--space-1); }
.booking-parking-row {
    padding: var(--space-2) var(--space-4);
    display: grid;
    grid-template-columns: minmax(145px, 1fr) minmax(145px, 1fr) minmax(90px, 0.5fr) auto;
    gap: var(--space-3);
    align-items: end;
    background: var(--color-surface-muted);
    border-radius: var(--radius-small);
}
.booking-parking-row label { margin: 0; }
.booking-parking-row label span { display: block; margin-bottom: var(--space-1); }
.booking-parking-remove { min-height: 46px; }

.booking-price-summary { margin: 0 0 var(--space-5); padding: var(--space-5); background: var(--color-surface-muted); border: 1px solid var(--color-divider); border-radius: var(--radius-small); }
.booking-price-summary dl { margin: 0; }
.booking-price-summary dl > div { padding-block: var(--space-2); display: flex; justify-content: space-between; gap: var(--space-5); }
.booking-price-summary dt { color: var(--color-text-muted); }
.booking-price-summary dd { margin: 0; color: var(--color-text); font-variant-numeric: tabular-nums; text-align: right; }
.booking-price-summary-total { margin-top: var(--space-2); padding-top: var(--space-4) !important; border-top: 1px solid var(--color-border); font-size: 1.15rem; font-weight: 600; }
.booking-price-summary-total dt,
.booking-price-summary-total dd { color: var(--color-text) !important; }

.booking-price-breakdown { width: 100%; display: grid; gap: var(--space-1); }
.booking-price-breakdown > span { display: flex; justify-content: space-between; gap: var(--space-5); }
.booking-price-breakdown strong { flex: 0 0 auto; font-weight: 400; text-align: right; }
.booking-price-breakdown-total { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-divider); }

.form-hint { display: block; margin-top: var(--space-1); color: var(--color-text-muted); }
.booking-personal-section { padding-block: var(--space-6); border-top: 1px solid var(--color-divider); }
.booking-personal-section:first-of-type { padding-top: 0; border-top: 0; }
.booking-personal-section:last-of-type { padding-bottom: var(--space-5); }
.booking-personal-section h2 { margin-bottom: var(--space-4); font-size: 1.15rem; }
.booking-personal-section .form-grid { margin-bottom: 0; }
.form-optional { color: var(--color-text-muted); font-weight: 400; }
.booking-address-grid { grid-template-columns: minmax(150px, 0.8fr) minmax(130px, 0.65fr) minmax(210px, 1.2fr); }
.booking-street-field { grid-column: 1 / 3; }
.booking-house-number-field { grid-column: 3; }
.booking-field-error { min-height: 1.35em; margin: var(--space-1) 0 0; color: #963d2c; font-size: 0.85rem; }
[aria-invalid="true"] { border-color: #963d2c; }
.booking-children-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.booking-children-row label { margin: 0; }
.booking-children-row input { width: 5.5rem; }
.booking-baby-cot { margin-top: var(--space-4); }
.booking-baby-cot label span { color: var(--color-text-muted); font-weight: 400; }
.booking-personal-section textarea { min-height: 120px; }
.booking-summary-card { display: grid; gap: var(--space-4); }
.booking-summary-card .booking-step-back { justify-self: start; margin-bottom: 0; }
.booking-summary-apartment { margin: var(--space-2) 0 0; font-size: clamp(1.35rem, 3vw, 1.75rem); }
.booking-summary-line { margin: 0; color: var(--color-text); }
.booking-summary-total { margin-block: var(--space-3); padding-block: var(--space-4); border-block: 1px solid var(--color-divider); }
.booking-summary-total span { display: block; color: var(--color-text-muted); }
.booking-summary-total strong { display: block; margin-top: var(--space-1); color: var(--color-text); font-size: clamp(1.7rem, 5vw, 2.35rem); }
.booking-summary-terms { align-items: flex-start; }
.booking-summary-terms label { line-height: 1.55; }
.booking-summary-terms a { position: relative; z-index: 1; }
.booking-final-submit { justify-self: start; }
.booking-success { padding-top: var(--space-5); text-align: center; }
.booking-success h2 { color: #365b3e; }

@media (max-width: 820px) {
    .booking-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .booking-data-apartment,
    .booking-data-grid .form-field:last-child { grid-column: 1 / -1; }
    .booking-address-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .booking-address-grid .form-field:nth-child(3) { grid-column: 1 / -1; }
    .booking-street-field { grid-column: 1; }
    .booking-house-number-field { grid-column: 2; }
}

@media (max-width: 760px) {
    .booking-extras-grid,
    .booking-data-grid,
    .booking-address-grid { grid-template-columns: 1fr; }
    .booking-extra-section--wide,
    .booking-data-apartment,
    .booking-data-grid .form-field:last-child,
    .booking-address-grid .form-field:nth-child(3),
    .booking-street-field,
    .booking-house-number-field { grid-column: auto; }
    .booking-alternative { align-items: stretch; flex-direction: column; }
    .booking-alternative button { width: 100%; }
    .booking-section-heading { align-items: stretch; flex-direction: column; }
    .booking-section-heading .btn { width: 100%; }
    .booking-parking-row { grid-template-columns: 1fr; }
    .booking-parking-remove { width: 100%; }
    .booking-parking-footer { align-items: stretch; flex-direction: column; gap: var(--space-3); }
    .booking-parking-footer .booking-option-total { margin-top: 0; }
    .booking-guests-label .booking-help-tooltip {
        right: auto;
        left: 0;
        transform: translateY(0.25rem);
    }
    .booking-guests-label .booking-help:hover .booking-help-tooltip,
    .booking-guests-label .booking-help:focus-within .booking-help-tooltip,
    .booking-guests-label .booking-help[data-open="true"] .booking-help-tooltip { transform: translateY(0); }
    .booking-guests-label .booking-help-tooltip::after { right: auto; left: 0.3rem; }
    .booking-help--align-end .booking-help-tooltip { right: 0; transform: translateY(0.25rem); }
    .booking-help--align-end:hover .booking-help-tooltip,
    .booking-help--align-end:focus-within .booking-help-tooltip,
    .booking-help--align-end[data-open="true"] .booking-help-tooltip { transform: translateY(0); }
    .booking-help--align-end .booking-help-tooltip::after { right: 0.3rem; }
}

@media (max-width: 600px) {
    .booking-option-row { align-items: stretch; flex-direction: column; }
    .booking-step-back { width: 100%; }
    .booking-final-submit { width: 100%; }
}

@media (max-width: 420px) {
    .booking-step,
    .booking-extra-section,
    .booking-price-summary { padding: var(--space-4); }
}
