.ccbe-booking-root {
    position: relative;
    width: 100%;
    font-family: var(--ccbe-font), monospace;
    color: var(--ccbe-text);
}

.ccbe-booking-root *,
.ccbe-booking-root *::before,
.ccbe-booking-root *::after { box-sizing: border-box; }

.ccbe-panel {
    position: relative;
    display: grid;
    gap: 30px;
    width: min(100%, 760px);
    margin: 0 auto;
    min-height: max(var(--ccbe-container-min-height, 0px), var(--ccbe-runtime-stage-height, 0px));
    padding: var(--ccbe-padding-top, 40px) var(--ccbe-padding-right, 40px) var(--ccbe-padding-bottom, 40px) var(--ccbe-padding-left, 40px);
    border: 0;
    border-radius: var(--ccbe-radius);
    background: var(--ccbe-surface);
    color: var(--ccbe-text);
    box-shadow: var(--ccbe-shadow);
    overflow: hidden;
}

.ccbe-panel::after { content: none; }

.ccbe-panel > * { position: relative; z-index: 1; }

.ccbe-form-header { display: grid; gap: 9px; }
.ccbe-title {
    margin: 0;
    color: var(--ccbe-text);
    font: inherit;
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.ccbe-description { font-size: 13px; line-height: 1.55; }
.ccbe-description p { margin: 0 0 8px; }

.ccbe-section { display: grid; gap: 14px; }
.ccbe-section-title,
.ccbe-field > label {
    margin: 0;
    color: var(--ccbe-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .015em;
    text-transform: uppercase;
}

.ccbe-dynamic-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.ccbe-field { display: grid; align-content: start; gap: 9px; min-width: 0; }
.ccbe-field-textarea,
.ccbe-field-checkbox_group,
.ccbe-field-radio,
.ccbe-field-checkbox,
.ccbe-field-upload { grid-column: auto; }

.ccbe-field input:not([type="checkbox"]):not([type="radio"]),
.ccbe-field textarea,
.ccbe-field select {
    width: 100%;
    min-height: 42px;
    padding: 8px 2px 7px;
    border: 0;
    border-bottom: var(--ccbe-border-width) solid var(--ccbe-border);
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--ccbe-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: none;
}
.ccbe-field input::placeholder,
.ccbe-field textarea::placeholder { color: var(--ccbe-text); opacity: .38; }
.ccbe-field input:focus,
.ccbe-field textarea:focus,
.ccbe-field select:focus { border-bottom-color: var(--ccbe-primary); }

.ccbe-field textarea {
    min-height: 116px;
    padding-top: 5px;
    line-height: 36px;
    resize: vertical;
    border-bottom: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 35px,
        var(--ccbe-border) 35px,
        var(--ccbe-border) 36px
    );
    background-attachment: local;
}

.ccbe-description-text {
    color: var(--ccbe-text);
    font-size: 11px;
    line-height: 1.45;
    opacity: .58;
}

.ccbe-options,
.ccbe-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 22px;
}

.ccbe-check-option,
.ccbe-checkbox-label,
.ccbe-service-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    color: var(--ccbe-text);
    font: inherit;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
}
.ccbe-check-option > input,
.ccbe-checkbox-label > input,
.ccbe-service-card > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ccbe-faux-check {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    border: 1px solid var(--ccbe-border);
    background: transparent;
    margin-top: -1px;
}
.ccbe-check-option > input:checked + .ccbe-faux-check,
.ccbe-checkbox-label > input:checked + .ccbe-faux-check,
.ccbe-service-card > input:checked + .ccbe-faux-check {
    box-shadow: inset 0 0 0 4px var(--ccbe-surface);
    background: var(--ccbe-primary);
    border-color: var(--ccbe-primary);
}
.ccbe-check-option:focus-within .ccbe-faux-check,
.ccbe-checkbox-label:focus-within .ccbe-faux-check,
.ccbe-service-card:focus-within .ccbe-faux-check { outline: 2px solid var(--ccbe-accent); outline-offset: 2px; }

.ccbe-service-content { display: grid; gap: 5px; min-width: 0; }
.ccbe-service-name { font-size: 13px; font-weight: 700; }
.ccbe-service-price { display: inline-flex; gap: 6px; align-items: baseline; font-size: 12px; }
.ccbe-service-description { font-size: 11px; line-height: 1.45; opacity: .68; }
.ccbe-meta-label { opacity: .62; }

.ccbe-calendar {
    display: grid;
    gap: 10px;
    width: 100%;
    padding-top: 2px;
}
.ccbe-calendar-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ccbe-border);
}
.ccbe-calendar-month {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}
.ccbe-calendar-nav {
    display: grid;
    place-items: center;
    width: 34px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ccbe-text);
    cursor: pointer;
}
.ccbe-calendar-nav svg { width: 19px; height: 19px; }
.ccbe-calendar-nav:hover { color: var(--ccbe-primary); }
.ccbe-calendar-weekdays,
.ccbe-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}
.ccbe-calendar-weekdays span {
    padding: 7px 2px 5px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: .6;
}
.ccbe-calendar-day,
.ccbe-calendar-empty {
    aspect-ratio: 1.3 / 1;
    min-height: 38px;
}
.ccbe-calendar-day {
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ccbe-border) 38%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--ccbe-text);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.ccbe-calendar-day:hover:not(:disabled) { color: var(--ccbe-primary); border-bottom-color: var(--ccbe-primary); }
.ccbe-calendar-day.is-selected {
    background: var(--ccbe-primary);
    color: var(--ccbe-on-primary);
    border-bottom-color: var(--ccbe-primary);
}
.ccbe-calendar-day:disabled { opacity: .23; cursor: not-allowed; }

.ccbe-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
    gap: 8px 10px;
    min-height: 22px;
}
.ccbe-slot {
    min-height: 39px;
    padding: 7px 9px;
    border: 1px solid var(--ccbe-border);
    border-radius: 0;
    background: transparent;
    color: var(--ccbe-text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.ccbe-slot:hover { border-color: var(--ccbe-primary); color: var(--ccbe-primary); }
.ccbe-slot.is-selected { background: var(--ccbe-primary); border-color: var(--ccbe-primary); color: var(--ccbe-on-primary); }

.ccbe-form-footer { display: grid; gap: 12px; padding-top: 4px; }
.ccbe-submit {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    align-items: center;
    width: 100%;
    min-height: 58px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--ccbe-radius);
    background: var(--ccbe-primary);
    color: var(--ccbe-text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
}
.ccbe-submit-icon { display: grid; place-items: center; grid-column: 1; }
.ccbe-submit-icon svg { width: 31px; height: 31px; }
.ccbe-submit-text { grid-column: 2; text-align: center; }
.ccbe-submit:hover { filter: brightness(1.04); }
.ccbe-submit:disabled { opacity: .55; cursor: wait; }

.ccbe-status {
    min-height: 18px;
    color: var(--ccbe-text);
    font-size: 11px;
    line-height: 1.4;
    text-transform: uppercase;
}
.ccbe-status.is-error { color: var(--ccbe-error); }

.ccbe-field.has-error > label,
.ccbe-field.has-error .ccbe-description-text { color: var(--ccbe-error); opacity: 1; }
.ccbe-field.has-error input:not([type="checkbox"]):not([type="radio"]),
.ccbe-field.has-error textarea,
.ccbe-field.has-error select { border-color: var(--ccbe-error); }

[hidden] { display: none !important; }

.ccbe-selection-summary {
    display: grid;
    gap: 7px;
    padding: 13px 0 14px;
    border-top: 1px solid var(--ccbe-border);
    border-bottom: 1px solid var(--ccbe-border);
}
.ccbe-summary-row {
    display: grid;
    grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
    font-size: 13px;
}
.ccbe-summary-label {
    font-weight: 700;
    text-transform: uppercase;
}
.ccbe-summary-value { text-align: right; font-weight: 700; }
.ccbe-summary-price .woocommerce-Price-amount { font: inherit; }

.ccbe-invoice-section { gap: 11px; }
.ccbe-invoice-subtitle {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.ccbe-invoice-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
}
.ccbe-invoice-nip { margin-top: 4px; }

.ccbe-booking-picker {
    min-height: 290px;
    transition: min-height .2s ease;
}
.ccbe-slot-step {
    display: grid;
    gap: 18px;
    animation: ccbe-step-in .2s ease both;
}
.ccbe-slot-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ccbe-border);
}
.ccbe-picker-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ccbe-text);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}
.ccbe-picker-back:hover { color: var(--ccbe-primary); }
.ccbe-picker-back svg { display: block; width: 16px; height: 16px; }
.ccbe-selected-date {
    font-size: 12px;
    text-align: right;
    text-transform: uppercase;
}
.ccbe-slots-loading {
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    min-height: 190px;
}
.ccbe-slot-loading-message,
.ccbe-no-slots {
    grid-column: 1 / -1;
    padding: 28px 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}
@keyframes ccbe-step-in {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: translateX(0); }
}

.ccbe-payment-loader {
    position: absolute;
    z-index: 20;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 18px;
    padding: 28px;
    background: var(--ccbe-background);
    color: var(--ccbe-text);
    text-align: center;
}
.ccbe-payment-loader-visual {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
}
.ccbe-payment-loader-visual img {
    display: block;
    max-width: 92px;
    max-height: 92px;
    animation: ccbe-loader-rotate 1.35s linear infinite;
    transform-origin: center;
}
.ccbe-css-spinner {
    display: block;
    width: 64px;
    height: 64px;
    border: 2px solid color-mix(in srgb, var(--ccbe-border) 25%, transparent);
    border-top-color: var(--ccbe-primary);
    border-radius: 50%;
    animation: ccbe-loader-rotate .85s linear infinite;
}
.ccbe-payment-loader-text,
.ccbe-payment-result-text {
    max-width: 420px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.ccbe-payment-result {
    display: grid;
    min-height: max(var(--ccbe-container-min-height, 260px), var(--ccbe-runtime-stage-height, 0px));
    align-content: center;
    justify-items: center;
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 38px;
    background: var(--ccbe-surface, transparent);
    color: var(--ccbe-text);
}
@keyframes ccbe-loader-rotate { to { transform: rotate(360deg); } }

.ccbe-boot-skeleton {
    display: grid;
    gap: 18px;
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 36px;
    background: transparent;
}
.ccbe-boot-skeleton span {
    display: block;
    height: 16px;
    background: color-mix(in srgb, var(--ccbe-text) 12%, transparent);
    animation: ccbe-pulse 1.15s ease-in-out infinite alternate;
}
.ccbe-boot-skeleton span:nth-child(1) { width: 42%; }
.ccbe-boot-skeleton span:nth-child(2) { width: 100%; height: 74px; }
.ccbe-boot-skeleton span:nth-child(3) { width: 72%; }
@keyframes ccbe-pulse { to { opacity: .45; } }

.ccbe-elementor-placeholder {
    display: grid;
    gap: 6px;
    padding: 18px;
    border: 1px dashed #777;
    background: #f3f1ec;
    color: #26231f;
    font-family: monospace;
    font-size: 12px;
}

@media (max-width: 680px) {
    .ccbe-panel { gap: 25px; }
    .ccbe-dynamic-fields { grid-template-columns: 1fr; }
    .ccbe-field-textarea,
    .ccbe-field-checkbox_group,
    .ccbe-field-radio,
    .ccbe-field-checkbox,
    .ccbe-field-upload { grid-column: auto; }
    .ccbe-options,
    .ccbe-service-grid,
    .ccbe-invoice-choices { grid-template-columns: 1fr; }
    .ccbe-summary-row { grid-template-columns: 1fr; gap: 3px; }
    .ccbe-summary-value { text-align: left; }
    .ccbe-slot-step-head { align-items: flex-start; flex-direction: column; gap: 9px; }
    .ccbe-selected-date { text-align: left; }
    .ccbe-calendar-day,
    .ccbe-calendar-empty { min-height: 34px; }
    .ccbe-submit { grid-template-columns: 46px minmax(0, 1fr) 46px; min-height: 56px; font-size: 13px; }
}

/* Embedded WooCommerce payment step (1.5.0). */
.ccbe-payment-panel {
    animation: ccbe-step-in .22s ease both;
}
.ccbe-embedded-payment {
    gap: 22px;
}
.ccbe-payment-title {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ccbe-border);
}
.ccbe-payment-summary {
    display: grid;
    gap: 8px;
    padding: 14px 0;
    border-top: 1px solid var(--ccbe-border);
    border-bottom: 1px solid var(--ccbe-border);
}
.ccbe-payment-total-row {
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px dashed color-mix(in srgb, var(--ccbe-border) 55%, transparent);
}
.ccbe-payment-total {
    font-size: 16px;
}
.ccbe-payment-total .woocommerce-Price-amount {
    font: inherit;
}
.ccbe-payment-method-label {
    color: var(--ccbe-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .015em;
    text-transform: uppercase;
}
.ccbe-payment-methods {
    display: grid;
    gap: 10px;
}
.ccbe-payment-method {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid var(--ccbe-border);
    color: var(--ccbe-text);
    cursor: pointer;
}
.ccbe-payment-method > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ccbe-payment-method > input:checked + .ccbe-faux-check {
    box-shadow: inset 0 0 0 4px var(--ccbe-surface);
    background: var(--ccbe-primary);
    border-color: var(--ccbe-primary);
}
.ccbe-payment-method:focus-within .ccbe-faux-check {
    outline: 2px solid var(--ccbe-accent);
    outline-offset: 2px;
}
.ccbe-payment-method-content {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.ccbe-payment-method-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ccbe-payment-method-title {
    font-size: 13px;
    line-height: 1.35;
    text-transform: uppercase;
}
.ccbe-payment-method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}
.ccbe-payment-method-icon img {
    display: block;
    width: auto;
    max-width: 110px;
    max-height: 30px;
}
.ccbe-payment-method-description {
    display: block;
    font-size: 11px;
    line-height: 1.5;
    opacity: .68;
}
.ccbe-payment-method-description p {
    margin: 0;
}
.ccbe-payment-actions {
    display: grid;
    gap: 12px;
    padding-top: 4px;
}
.ccbe-payment-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-self: start;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ccbe-text);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}
.ccbe-payment-back svg {
    width: 17px;
    height: 17px;
}
.ccbe-payment-back:hover {
    color: var(--ccbe-primary);
}
.ccbe-payment-back:disabled {
    opacity: .45;
    cursor: wait;
}
.ccbe-payment-loader {
    background: color-mix(in srgb, var(--ccbe-background) 96%, transparent);
}

@media (max-width: 680px) {
    .ccbe-payment-method-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
    .ccbe-payment-method-icon {
        justify-content: flex-start;
    }
}


/* Dedicated customer identity + legal acceptance on embedded payment step (1.6.0). */
.ccbe-payment-customer {
    display: grid;
    gap: 14px;
    padding: 2px 0 4px;
}
.ccbe-payment-customer-types { margin-bottom: 2px; }
.ccbe-payment-customer-field { gap: 7px; }
.ccbe-payment-customer-field[hidden] { display: none !important; }
.ccbe-payment-terms {
    align-items: flex-start;
    padding: 12px 0 4px;
    border-top: 1px solid color-mix(in srgb, var(--ccbe-border) 45%, transparent);
    line-height: 1.5;
}
/* Keep the legal-acceptance row fully inside the form content box.
   The required hint is a real third column instead of being pushed past the
   available flex width by the terms copy. */
.ccbe-payment-terms {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr) 20px;
    column-gap: 11px;
    row-gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.ccbe-payment-terms > .ccbe-faux-check {
    grid-column: 1;
    align-self: start;
}
.ccbe-payment-terms .ccbe-terms-copy {
    grid-column: 2;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.ccbe-payment-terms > .ccbe-required-hint {
    grid-column: 3;
    align-self: start;
    justify-self: end;
    margin-left: 0;
}
.ccbe-payment-terms .ccbe-terms-copy p { margin: 0; }
.ccbe-payment-terms .ccbe-terms-copy a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ccbe-payment-terms.has-error .ccbe-faux-check,
.ccbe-payment-customer [data-payment-field].has-error input {
    border-color: var(--ccbe-error) !important;
}
.ccbe-payment-terms.has-error .ccbe-terms-copy,
.ccbe-payment-customer [data-payment-field].has-error > label {
    color: var(--ccbe-error);
}
.ccbe-payment-panel { overflow-y: auto; }

/* Payment ergonomics: invisible scrollbar + persistent payment CTA (1.7.1). */
.ccbe-payment-panel {
    overflow-y: auto;
    overscroll-behavior: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.ccbe-payment-panel::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.ccbe-embedded-payment {
    min-height: 100%;
    align-content: start;
}
.ccbe-payment-actions {
    position: sticky;
    z-index: 12;
    bottom: calc(-1 * var(--ccbe-padding-bottom, 40px));
    margin: 4px 0 calc(-1 * var(--ccbe-padding-bottom, 40px));
    padding: 14px 0 var(--ccbe-padding-bottom, 40px);
    border-top: 1px solid color-mix(in srgb, var(--ccbe-border) 42%, transparent);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.ccbe-pay-submit {
    position: relative;
    z-index: 2;
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--ccbe-border) 12%, transparent);
}

/* Post-payment order confirmation inside the same booking container (1.8.0). */
.ccbe-confirmation-panel {
    overflow-y: auto;
    overscroll-behavior: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
    animation: ccbe-step-in .22s ease both;
}
.ccbe-confirmation-panel::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.ccbe-confirmation {
    align-content: start;
    gap: 22px;
    min-height: 100%;
}
.ccbe-confirmation-hero {
    display: grid;
    justify-items: start;
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ccbe-border);
}
.ccbe-confirmation-check {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--ccbe-primary);
    color: var(--ccbe-primary);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.ccbe-confirmation-title {
    margin: 0;
    color: var(--ccbe-text);
    font: inherit;
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .025em;
    text-transform: uppercase;
}
.ccbe-confirmation-intro,
.ccbe-confirmation-next-copy {
    max-width: 760px;
    color: var(--ccbe-text);
    font-size: 13px;
    line-height: 1.65;
    opacity: .82;
}
.ccbe-confirmation-intro p,
.ccbe-confirmation-next-copy p {
    margin: 0;
}
.ccbe-confirmation-card,
.ccbe-confirmation-next {
    display: grid;
    gap: 0;
    padding: 16px 0 4px;
    border-top: 1px solid var(--ccbe-border);
}
.ccbe-confirmation-card-title {
    margin: 0 0 10px;
    color: var(--ccbe-text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.ccbe-confirmation-row {
    display: grid;
    grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr);
    gap: 18px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--ccbe-border) 52%, transparent);
}
.ccbe-confirmation-row:last-child {
    border-bottom: 0;
}
.ccbe-confirmation-label {
    color: var(--ccbe-text);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .035em;
    text-transform: uppercase;
    opacity: .62;
}
.ccbe-confirmation-value {
    min-width: 0;
    color: var(--ccbe-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    text-align: right;
    overflow-wrap: anywhere;
}
.ccbe-confirmation-row.is-emphasis .ccbe-confirmation-value {
    color: var(--ccbe-primary);
    font-size: 14px;
}
.ccbe-confirmation-value .woocommerce-Price-amount {
    font: inherit;
}
.ccbe-confirmation-next-copy ol,
.ccbe-confirmation-next-copy ul {
    display: grid;
    gap: 9px;
    margin: 2px 0 0;
    padding-left: 22px;
}
.ccbe-confirmation-next-copy li {
    padding-left: 3px;
}
.ccbe-confirmation-next-copy a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ccbe-confirmation-email {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    padding: 14px 0;
    border-top: 1px solid var(--ccbe-border);
    border-bottom: 1px solid var(--ccbe-border);
    color: var(--ccbe-text);
    font-size: 12px;
    line-height: 1.5;
}
.ccbe-confirmation-email strong {
    overflow-wrap: anywhere;
}
.ccbe-confirmation-actions {
    display: grid;
    gap: 10px;
    padding-top: 4px;
}
.ccbe-confirmation-reset {
    width: 100%;
}
.ccbe-confirmation-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.ccbe-confirmation-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    color: var(--ccbe-text);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .025em;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-transform: uppercase;
}

@media (max-width: 680px) {
    .ccbe-confirmation-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .ccbe-confirmation-value {
        text-align: left;
    }
}

/* Failed/cancelled gateway attempts return to the booking step with a visible,
   form-scoped notice. The copy is persisted in the form configuration. */
.ccbe-payment-failure-notice {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin: 0 0 22px;
    padding: 14px 0;
    border-top: 1px solid color-mix(in srgb, var(--ccbe-error) 55%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--ccbe-error) 55%, transparent);
    color: var(--ccbe-error);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
}
.ccbe-payment-failure-mark {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
}

/* 1.10.0 — explicit inline validation feedback. The palette is entirely
   derived from persisted theme variables rather than hard-coded frontend colors. */
.ccbe-error-tooltip {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: fit-content;
    max-width: min(100%, 520px);
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--ccbe-error) 55%, transparent);
    border-radius: max(2px, calc(var(--ccbe-radius) * .7));
    background: color-mix(in srgb, var(--ccbe-error) 8%, var(--ccbe-surface));
    color: var(--ccbe-error);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .01em;
    text-transform: none;
}
.ccbe-error-tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 14px;
    width: 8px;
    height: 8px;
    border-top: 1px solid color-mix(in srgb, var(--ccbe-error) 55%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--ccbe-error) 55%, transparent);
    background: color-mix(in srgb, var(--ccbe-error) 8%, var(--ccbe-surface));
    transform: rotate(45deg);
}
.ccbe-error-tooltip-icon {
    display: grid;
    place-items: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
}
.ccbe-error-tooltip-text { min-width: 0; }

/* Failed/cancelled payment is a full form step instead of a banner above the
   original booking form. */
.ccbe-failure-panel {
    overflow: hidden;
    animation: ccbe-step-in .22s ease both;
}
.ccbe-failure-screen {
    min-height: 100%;
    align-content: center;
    justify-items: stretch;
    gap: 28px;
}
.ccbe-failure-hero {
    display: grid;
    justify-items: center;
    gap: 14px;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}
.ccbe-failure-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--ccbe-error);
    border-radius: 50%;
    color: var(--ccbe-error);
    font-size: 27px;
    line-height: 1;
}
.ccbe-failure-title {
    margin: 0;
    color: var(--ccbe-error);
    font: inherit;
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.ccbe-failure-intro {
    max-width: 600px;
    font-size: 13px;
    line-height: 1.7;
}
.ccbe-failure-intro p { margin: 0 0 10px; }
.ccbe-failure-intro p:last-child { margin-bottom: 0; }
.ccbe-failure-retry { margin-top: 4px; }

/* Required-field hint is visible before submission and expands like a tooltip
   on hover/focus. Its copy comes from the persisted form settings. */
.ccbe-required-hint {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    min-height: 18px;
    margin-left: 6px;
    border: 1px solid color-mix(in srgb, var(--ccbe-accent) 55%, var(--ccbe-border));
    border-radius: 50%;
    color: var(--ccbe-accent);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    outline: none;
}
.ccbe-required-hint-tooltip {
    position: absolute;
    z-index: 20;
    left: 50%;
    bottom: calc(100% + 9px);
    width: max-content;
    max-width: min(240px, 72vw);
    padding: 7px 9px;
    border: 1px solid var(--ccbe-border);
    border-radius: max(2px, calc(var(--ccbe-radius) * .65));
    background: var(--ccbe-surface);
    color: var(--ccbe-text);
    box-shadow: var(--ccbe-shadow);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity .14s ease, transform .14s ease;
}
.ccbe-required-hint-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 1px solid var(--ccbe-border);
    border-bottom: 1px solid var(--ccbe-border);
    background: var(--ccbe-surface);
    transform: translate(-50%, -4px) rotate(45deg);
}
.ccbe-required-hint:hover .ccbe-required-hint-tooltip,
.ccbe-required-hint:focus .ccbe-required-hint-tooltip,
.ccbe-required-hint:focus-visible .ccbe-required-hint-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* The legal checkbox hint sits at the far right of the row. Anchor its bubble
   to that edge so neither the bubble nor its arrow is clipped by the panel. */
.ccbe-payment-terms > .ccbe-required-hint .ccbe-required-hint-tooltip {
    left: auto;
    right: 0;
    transform: translate(0, 4px);
}
.ccbe-payment-terms > .ccbe-required-hint .ccbe-required-hint-tooltip::after {
    left: auto;
    right: 6px;
    transform: translate(0, -4px) rotate(45deg);
}
.ccbe-payment-terms > .ccbe-required-hint:hover .ccbe-required-hint-tooltip,
.ccbe-payment-terms > .ccbe-required-hint:focus .ccbe-required-hint-tooltip,
.ccbe-payment-terms > .ccbe-required-hint:focus-visible .ccbe-required-hint-tooltip {
    transform: translate(0, 0);
}

/* Slot errors are rendered next to the actual time picker so a race/stale
   session is not mistaken for a generic form error. */
.ccbe-slot-error-tooltip {
    position: relative;
    margin-top: 12px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--ccbe-error) 55%, transparent);
    border-radius: max(2px, calc(var(--ccbe-radius) * .7));
    background: color-mix(in srgb, var(--ccbe-error) 8%, var(--ccbe-surface));
    color: var(--ccbe-error);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}