.sctb-booking {
    --sctb-ink: #172033;
    --sctb-muted: #667085;
    --sctb-line: #e4e8ef;
    --sctb-soft: #f7f8fb;
    --sctb-white: #fff;
    --sctb-primary: #2563eb;
    --sctb-primary-dark: #1d4ed8;
    --sctb-primary-soft: #eff6ff;
    --sctb-success: #16855d;
    --sctb-danger: #c92e48;
    width: 100%;
    max-width: var(--sctb-embed-width, 1120px);
    margin: 24px auto;
    color: var(--sctb-ink);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
}

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

.sctb-shell {
    display: grid;
    grid-template-columns: minmax(270px, .75fr) minmax(0, 1.85fr);
    min-height: 650px;
    overflow: hidden;
    border: 1px solid var(--sctb-line);
    border-radius: var(--sctb-card-radius, 14px);
    background: var(--sctb-white);
    box-shadow: 0 18px 55px rgba(18, 28, 48, .11);
}

.sctb-event-summary {
    position: relative;
    padding: 38px 32px;
    border-right: 1px solid var(--sctb-line);
    background: linear-gradient(165deg, #fbfaff 0%, #f5f4ff 54%, #fafbfe 100%);
}

.sctb-event-summary::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(91,77,227,.12), rgba(91,77,227,0) 68%);
    pointer-events: none;
}

.sctb-host-avatar {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 15px;
    background: linear-gradient(145deg, #7367f0, #4636c8);
    color: #fff;
    font-size: 17px;
    font-weight: 750;
    letter-spacing: .03em;
    box-shadow: 0 8px 22px rgba(91,77,227,.24);
}

.sctb-host-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.sctb-font-system { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.sctb-host-label { display: block; margin-bottom: 5px; color: #7266df; font-size: 12px; font-weight: 700; }
.sctb-event-summary h2 { margin: 0; color: var(--sctb-ink); font-size: clamp(23px, 2.2vw, 31px); line-height: 1.22; letter-spacing: -.025em; }
.sctb-event-description { margin: 18px 0 0; color: #566176; font-size: 14px; line-height: 1.65; }
.sctb-event-description p { margin: 0 0 10px; }
.sctb-event-summary-meta { position: relative; z-index: 1; display: grid; gap: 13px; margin-top: 28px; }
.sctb-event-summary-meta > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 9px; color: #526078; font-size: 13px; font-weight: 550; }

.sctb-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; color: currentColor; }
.sctb-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sctb-booking-content { min-width: 0; padding: 27px 30px 30px; background: #fff; }
.sctb-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 24px; }
.sctb-progress > div { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 7px; color: #98a2b3; }
.sctb-progress > div:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(50% + 26px); right: calc(-50% + 14px); height: 1px; background: #e5e8ee; }
.sctb-progress > div.is-complete:not(:last-child)::after { background: #a9a0f5; }
.sctb-progress > div > span { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #dce0e8; border-radius: 50%; background: #fff; font-size: 11px; font-weight: 700; }
.sctb-progress > div > small { overflow: hidden; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.sctb-progress > div.is-active { color: var(--sctb-primary); }
.sctb-progress > div.is-active > span { border-color: var(--sctb-primary); background: var(--sctb-primary); color: #fff; box-shadow: 0 0 0 4px var(--sctb-primary-soft); }
.sctb-progress > div.is-complete { color: #7469df; }
.sctb-progress > div.is-complete > span { border-color: #a59cf2; background: var(--sctb-primary-soft); color: var(--sctb-primary); }

.sctb-public-heading { margin-bottom: 18px; }
.sctb-public-heading h3 { margin: 0; color: var(--sctb-ink); font-size: 22px; line-height: 1.3; letter-spacing: -.015em; }
.sctb-public-heading p { margin: 5px 0 0; color: var(--sctb-muted); font-size: 13px; }

.sctb-picker { display: grid; grid-template-columns: minmax(330px, 1.15fr) minmax(210px, .72fr); min-height: 410px; overflow: hidden; border: 1px solid var(--sctb-line); border-radius: 11px; background: #fff; }
.sctb-calendar-panel { min-width: 0; padding: 19px 20px 14px; }
.sctb-times-panel { min-width: 0; padding: 19px 16px; border-left: 1px solid var(--sctb-line); background: #fafbfc; }
.sctb-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; margin-bottom: 9px; }
.sctb-calendar-head h3 { margin: 0; color: var(--sctb-ink); font-size: 17px; font-weight: 700; }
.sctb-month-controls { display: flex; gap: 4px; }
.sctb-month-nav { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #5d687c; cursor: pointer; }
.sctb-month-nav:hover:not(:disabled) { background: var(--sctb-soft); color: var(--sctb-primary); }
.sctb-month-nav:disabled { color: #c9ced8; cursor: not-allowed; }
.sctb-month-nav .sctb-icon { width: 18px; height: 18px; }

.sctb-weekdays,
.sctb-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sctb-weekdays { margin-bottom: 4px; }
.sctb-weekdays span { display: grid; place-items: center; height: 28px; color: #8992a4; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.sctb-month-grid { gap: 3px; }
.sctb-day { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1 / .88; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #344054; font: inherit; font-size: 13px; cursor: pointer; }
.sctb-day:hover:not(:disabled) { border-color: #c9c3fa; background: #f7f5ff; color: var(--sctb-primary); }
.sctb-day:disabled { color: #c2c7d0; cursor: default; }
.sctb-day.is-other-month { visibility: hidden; }
.sctb-day.has-times { background: #f3f4f7; color: #253047; font-weight: 650; }
.sctb-day.has-times:hover { background: var(--sctb-primary-soft); }
.sctb-day.is-selected { border-color: var(--sctb-primary); background: var(--sctb-primary) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(91,77,227,.22); }
.sctb-day.is-today:not(.is-selected) { border-color: #b9b1f4; color: var(--sctb-primary); }
.sctb-day i { position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--sctb-primary); transform: translateX(-50%); }
.sctb-day.is-selected i { background: #fff; }

.sctb-picker-status { min-height: 25px; padding: 7px 2px 0; color: var(--sctb-muted); font-size: 11px; text-align: center; }
.sctb-picker-status.is-loading::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px; border: 2px solid #dad6fb; border-top-color: var(--sctb-primary); border-radius: 50%; vertical-align: -2px; animation: sctb-spin .7s linear infinite; }
.sctb-picker-status.is-error { color: var(--sctb-danger); }
@keyframes sctb-spin { to { transform: rotate(360deg); } }

.sctb-timezone { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); align-items: center; gap: 7px; min-height: 38px; margin-top: 4px; padding-top: 11px; border-top: 1px solid #edf0f4; color: #657087; font-size: 11px; font-weight: 650; }
.sctb-timezone .sctb-icon { width: 17px; height: 17px; }
.sctb-timezone-select { min-width: 0; width: 100%; height: 32px; padding: 3px 26px 3px 7px; border: 1px solid #dce0e8; border-radius: 6px; background-color: #fff; color: #3d485c; font: inherit; font-weight: 550; }

.sctb-times-empty { display: grid; place-items: center; min-height: 350px; color: var(--sctb-muted); text-align: center; }
.sctb-times-empty .sctb-icon { width: 38px; height: 38px; margin-bottom: 8px; color: #a4acbb; }
.sctb-times-empty h3 { margin: 4px 0; color: #475467; font-size: 14px; }
.sctb-times-empty p { max-width: 150px; margin: 0; font-size: 11px; }
.sctb-times-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin: 1px 2px 14px; }
.sctb-times-heading { display: flex; align-items: baseline; gap: 4px; margin: 0; }
.sctb-times-heading span,
.sctb-times-heading strong { color: var(--sctb-ink); font-size: 12px; font-weight: 700; }
.sctb-clock-toggle { display: inline-flex; padding: 3px; border: 1px solid #d9dde6; border-radius: 8px; background: #fff; }
.sctb-clock-toggle button { min-width: 34px; min-height: 29px; padding: 3px 7px; border: 0; border-radius: 6px; background: transparent; color: #344054; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.sctb-clock-toggle button.is-active { background: #e9edf3; color: #172033; }
.sctb-time-list { display: grid; gap: 7px; max-height: 332px; padding-right: 2px; overflow-y: auto; scrollbar-width: thin; }
.sctb-time-option { display: grid; place-items: center; min-height: 43px; padding: 7px 9px; border: 1px solid #d9dde6; border-radius: 7px; background: #fff; color: #344054; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.sctb-time-option:hover { border-color: #a59cf2; color: var(--sctb-primary); }
.sctb-time-option.is-selected { border-color: var(--sctb-primary); background: var(--sctb-primary); color: #fff; box-shadow: 0 4px 12px rgba(91,77,227,.18); }
.sctb-time-option small { margin-top: 1px; color: #8a93a3; font-size: 9px; font-weight: 550; }
.sctb-time-option.is-selected small { color: rgba(255,255,255,.82); }
.sctb-no-times { padding: 18px 10px; border: 1px dashed #d9dde6; border-radius: 8px; color: var(--sctb-muted); font-size: 12px; text-align: center; }

.sctb-step-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.sctb-primary-action,
.sctb-back-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 18px;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.sctb-primary-action { border: 1px solid var(--sctb-primary); background: var(--sctb-primary); color: #fff; box-shadow: 0 5px 14px rgba(91,77,227,.2); }
.sctb-primary-action:hover:not(:disabled) { border-color: var(--sctb-primary-dark); background: var(--sctb-primary-dark); }
.sctb-primary-action:disabled { border-color: #d2d6de; background: #d2d6de; box-shadow: none; cursor: not-allowed; }
.sctb-primary-action .sctb-icon,
.sctb-back-action .sctb-icon { width: 17px; height: 17px; }
.sctb-back-action { border: 1px solid #d9dde6; background: #fff; color: #536075; box-shadow: none; }
.sctb-back-action:hover { border-color: #bec5d1; color: var(--sctb-ink); }

/* Page builders frequently apply global button colors with high specificity.
   These controls own their complete state palette so unavailable days and
   navigation arrows cannot inherit the surrounding page's CTA treatment. */
.sctb-booking button.sctb-month-nav,
.sctb-booking button.sctb-day,
.sctb-booking button.sctb-time-option,
.sctb-booking .sctb-clock-toggle button,
.sctb-booking button.sctb-primary-action,
.sctb-booking button.sctb-back-action {
    font-family: inherit !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    text-transform: none !important;
}
.sctb-booking button.sctb-month-nav {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #5d687c !important;
    box-shadow: none !important;
}
.sctb-booking button.sctb-month-nav:hover:not(:disabled) { background: var(--sctb-soft) !important; color: var(--sctb-primary) !important; }
.sctb-booking button.sctb-month-nav:disabled { background: transparent !important; color: #c9ced8 !important; opacity: 1 !important; }
.sctb-booking button.sctb-day {
    min-width: 0 !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #344054 !important;
    box-shadow: none !important;
}
.sctb-booking button.sctb-day:disabled { border-color: transparent !important; background: transparent !important; color: #c2c7d0 !important; opacity: 1 !important; }
.sctb-booking button.sctb-day.has-times:not(:disabled) { background: #f3f4f7 !important; color: #253047 !important; }
.sctb-booking button.sctb-day:hover:not(:disabled) { border-color: var(--sctb-primary) !important; background: var(--sctb-primary-soft) !important; color: var(--sctb-primary-dark) !important; }
.sctb-booking button.sctb-day.is-today:not(.is-selected) { border-color: var(--sctb-primary) !important; color: var(--sctb-primary) !important; }
.sctb-booking button.sctb-day.is-selected { border-color: var(--sctb-primary) !important; background: var(--sctb-primary) !important; color: #fff !important; box-shadow: 0 4px 10px color-mix(in srgb, var(--sctb-primary) 24%, transparent) !important; }
.sctb-booking button.sctb-time-option {
    min-height: 43px !important;
    padding: 7px 9px !important;
    border: 1px solid #d9dde6 !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #344054 !important;
    box-shadow: none !important;
}
.sctb-booking button.sctb-time-option:hover { border-color: var(--sctb-primary) !important; background: var(--sctb-primary-soft) !important; color: var(--sctb-primary-dark) !important; }
.sctb-booking button.sctb-time-option.is-selected { border-color: var(--sctb-primary) !important; background: var(--sctb-primary) !important; color: #fff !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--sctb-primary) 20%, transparent) !important; }
.sctb-booking .sctb-clock-toggle button { min-width: 34px !important; min-height: 29px !important; padding: 3px 7px !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: #344054 !important; box-shadow: none !important; }
.sctb-booking .sctb-clock-toggle button.is-active { background: #e9edf3 !important; color: #172033 !important; }
.sctb-booking button.sctb-primary-action {
    min-height: 44px !important;
    padding: 9px 18px !important;
    border: 1px solid var(--sctb-primary) !important;
    border-radius: 8px !important;
    background: var(--sctb-primary) !important;
    color: #fff !important;
}
.sctb-booking button.sctb-primary-action:hover:not(:disabled) { border-color: var(--sctb-primary-dark) !important; background: var(--sctb-primary-dark) !important; color: #fff !important; }
.sctb-booking button.sctb-primary-action:disabled { border-color: #d2d6de !important; background: #d2d6de !important; color: #687386 !important; box-shadow: none !important; opacity: 1 !important; }
.sctb-booking button.sctb-back-action { min-height: 44px !important; padding: 9px 18px !important; border: 1px solid #d9dde6 !important; border-radius: 8px !important; background: #fff !important; color: #536075 !important; box-shadow: none !important; }
.sctb-booking button.sctb-back-action:hover { border-color: #bec5d1 !important; background: #f8fafc !important; color: var(--sctb-ink) !important; }
.sctb-booking select.sctb-timezone-select { border: 1px solid #dce0e8 !important; background-color: #fff !important; color: #3d485c !important; box-shadow: none !important; }

.sctb-details-form { display: grid; gap: 18px; }
.sctb-selection-summary { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid #dcd7ff; border-radius: 8px; background: #f7f5ff; }
.sctb-selection-summary > .sctb-icon { display: grid; place-items: center; width: 35px; height: 35px; padding: 8px; border-radius: 8px; background: var(--sctb-primary-soft); color: var(--sctb-primary); }
.sctb-selection-summary > div { display: grid; gap: 2px; }
.sctb-selection-summary strong { color: #302958; font-size: 13px; }
.sctb-selection-summary span { color: #6c629a; font-size: 11px; }
.sctb-location-choices { min-width: 0; margin: 0; padding: 0; border: 0; }
.sctb-location-choices legend { margin-bottom: 7px; color: #344054; font-size: 12px; font-weight: 700; }
.sctb-location-choice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sctb-location-choice { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 44px; padding: 9px 11px; border: 1px solid #d9dde6; border-radius: 8px; background: #fff; color: #475467; font-size: 12px; font-weight: 650; cursor: pointer; }
.sctb-location-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sctb-location-choice .sctb-icon { width: 18px; height: 18px; color: #7b8495; }
.sctb-location-choice:hover { border-color: #b9b1f4; background: #faf9ff; }
.sctb-location-choice.is-selected { border-color: #9187ee; background: var(--sctb-primary-soft); color: #403578; box-shadow: 0 0 0 2px rgba(91,77,227,.06); }
.sctb-location-choice.is-selected .sctb-icon { color: var(--sctb-primary); }
.sctb-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sctb-layout-compact .sctb-details-grid { grid-template-columns: 1fr; }
.sctb-field { display: grid; align-content: start; gap: 6px; color: #344054; font-size: 12px; font-weight: 650; }
.sctb-field input,
.sctb-field select,
.sctb-field textarea { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #d6dbe5; border-radius: 7px; background: #fff; color: #172033; font: inherit; font-size: 13px; box-shadow: 0 1px 2px rgba(16,24,40,.03); }
.sctb-field textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
.sctb-phone-control { display: grid; grid-template-columns: minmax(126px, .34fr) minmax(0, 1fr); width: 100%; }
.sctb-field .sctb-phone-control select,
.sctb-field .sctb-phone-control input { min-width: 0; margin: 0; }
.sctb-field .sctb-phone-control select { border-radius: 7px 0 0 7px; background-image: none; background-color: #eef1f5; }
.sctb-field .sctb-phone-control input { border-left: 0; border-radius: 0 7px 7px 0; }
.sctb-field .sctb-phone-control:focus-within { border-radius: 7px; box-shadow: 0 0 0 3px rgba(91,77,227,.11); }
.sctb-field .sctb-phone-control:focus-within select,
.sctb-field .sctb-phone-control:focus-within input { border-color: #8175ef; box-shadow: none; }
.sctb-field input:focus,
.sctb-field select:focus,
.sctb-field textarea:focus { border-color: #8175ef; outline: none; box-shadow: 0 0 0 3px rgba(91,77,227,.11); }
.sctb-checkbox-field { grid-template-columns: 22px minmax(0, 1fr); align-items: center; }
.sctb-checkbox-field > span { grid-column: 2; grid-row: 1; }
.sctb-checkbox-field > input { grid-column: 1; grid-row: 1; width: 18px; min-height: 18px; }
.sctb-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.sctb-form-status { min-height: 20px; color: var(--sctb-muted); font-size: 12px; }
.sctb-form-status.is-error { color: var(--sctb-danger); }
.sctb-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* The light booking card owns its readable colors even when a page theme globally uses white form text. */
.sctb-booking.sctb-theme-light { color-scheme: light; color: #172033 !important; }
.sctb-booking.sctb-theme-light .sctb-public-heading h3,
.sctb-booking.sctb-theme-light .sctb-event-summary h2,
.sctb-booking.sctb-theme-light .sctb-field,
.sctb-booking.sctb-theme-light .sctb-field > span,
.sctb-booking.sctb-theme-light .sctb-location-choices legend { color: #344054 !important; }
.sctb-booking.sctb-theme-light .sctb-public-heading p,
.sctb-booking.sctb-theme-light .sctb-form-status { color: #667085 !important; }
.sctb-booking.sctb-theme-light .sctb-selection-summary strong { color: #302958 !important; }
.sctb-booking.sctb-theme-light .sctb-selection-summary span { color: #6c629a !important; }
.sctb-booking.sctb-theme-light .sctb-location-choice { color: #475467 !important; }
.sctb-booking.sctb-theme-light .sctb-location-choice.is-selected { color: #403578 !important; }
.sctb-booking.sctb-theme-light .sctb-event-description,
.sctb-booking.sctb-theme-light .sctb-event-description * { color: #566176 !important; }
.sctb-booking.sctb-theme-light .sctb-field input,
.sctb-booking.sctb-theme-light .sctb-field select,
.sctb-booking.sctb-theme-light .sctb-field textarea {
    background-color: #fff !important;
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
    caret-color: #172033 !important;
}
.sctb-booking.sctb-theme-light .sctb-field .sctb-phone-country { background-color: #eef1f5 !important; }
.sctb-booking.sctb-theme-light .sctb-field input::placeholder,
.sctb-booking.sctb-theme-light .sctb-field textarea::placeholder {
    color: #98a2b3 !important;
    -webkit-text-fill-color: #98a2b3 !important;
    opacity: 1 !important;
}

.sctb-confirmation-card { display: grid; place-items: center; min-height: 450px; padding: 38px; text-align: center; }
.sctb-confirmation-icon { display: grid; place-items: center; width: 70px; height: 70px; margin-bottom: 16px; border-radius: 50%; background: #e9f8f1; color: var(--sctb-success); box-shadow: 0 0 0 10px #f4fbf8; }
.sctb-confirmation-icon .sctb-icon { width: 33px; height: 33px; }
.sctb-confirmation-card h2,
.sctb-confirmation-card h3 { margin: 8px 0; color: var(--sctb-ink); font-size: 24px; }
.sctb-confirmation-card > p { max-width: 520px; margin: 0 0 22px; color: var(--sctb-muted); }
.sctb-confirmation-summary { display: grid; gap: 3px; min-width: min(100%, 420px); padding: 15px 20px; border: 1px solid var(--sctb-line); border-radius: 9px; background: var(--sctb-soft); }
.sctb-confirmation-summary strong { color: #344054; }
.sctb-confirmation-summary span { color: var(--sctb-muted); font-size: 12px; }

.sctb-public-error,
.sctb-notice,
.sctb-error { max-width: 740px; margin: 20px auto; padding: 16px; border: 1px solid #f0bac3; border-radius: 8px; background: #fff3f5; color: #972338; }

.sctb-ff-shell { overflow: hidden; border: 1px solid var(--sctb-line); border-radius: 11px; background: #fff; box-shadow: 0 8px 28px rgba(18,28,48,.07); }
.sctb-ff-heading { display: flex; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--sctb-line); background: #fbfcfe; }
.sctb-ff-heading > div { display: grid; gap: 3px; }
.sctb-ff-heading strong { color: var(--sctb-ink); font-size: 15px; }
.sctb-ff-heading span { color: var(--sctb-muted); font-size: 11px; }
.sctb-ff-locations { padding: 14px 18px; border-bottom: 1px solid var(--sctb-line); }
.sctb-ff-shell .sctb-picker { border: 0; border-radius: 0; }
.sctb-ff-selection { padding: 11px 16px; border-top: 1px solid var(--sctb-line); background: #fafbfc; color: var(--sctb-muted); font-size: 12px; }
.sctb-ff-selection.has-selection { background: #edf9f4; color: #166e50; font-weight: 650; }

.sctb-manage-card { max-width: 820px; margin: 30px auto; padding: 30px; border: 1px solid var(--sctb-line); border-radius: 13px; background: #fff; box-shadow: 0 15px 45px rgba(18,28,48,.1); }
.sctb-manage-card h2 { margin: 4px 0 6px; color: var(--sctb-ink); }
.sctb-manage-card > p { margin: 0 0 22px; color: var(--sctb-muted); }
.sctb-manage-card > .sctb-primary-action { margin-top: 12px; }
.sctb-reschedule-card { max-width: 920px; }
.sctb-danger-action { border-color: var(--sctb-danger); background: var(--sctb-danger); }
.sctb-danger-action:hover:not(:disabled) { border-color: #a91f36; background: #a91f36; }

.sctb-landing-page,
.sctb-manage-page { width: 100%; padding: 30px 18px; background: #f7f8fb; }
.sctb-landing-shell,
.sctb-manage-shell { width: 100%; max-width: 1180px; margin: 0 auto; }

/* Optional Fluent-style presentation: start as a centered two-column card and
   reveal the time column only after the attendee chooses a date. */
.sctb-booking.sctb-layout-compact { max-width: calc(var(--sctb-embed-width, 800px) + 240px); }
.sctb-layout-compact .sctb-shell {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    width: 100%;
    max-width: var(--sctb-embed-width, 800px);
    min-height: 515px;
    margin: 0 auto;
    transition: max-width .2s ease;
}
.sctb-layout-compact .sctb-shell.sctb-has-date { max-width: calc(var(--sctb-embed-width, 800px) + 240px); }
.sctb-layout-compact .sctb-event-summary { padding: 30px 20px; background: var(--sctb-white); }
.sctb-layout-compact .sctb-event-summary::after { display: none; }
.sctb-layout-compact .sctb-booking-content { padding: 24px 20px; }
.sctb-layout-compact .sctb-picker { grid-template-columns: 1fr; min-height: 405px; }
.sctb-layout-compact .sctb-picker:not(.has-selected-date) .sctb-times-panel { display: none; }
.sctb-layout-compact .sctb-picker.has-selected-date { grid-template-columns: minmax(390px, 1fr) minmax(220px, 240px); }
.sctb-layout-compact .sctb-picker.has-selected-date .sctb-times-panel { display: block; }
.sctb-layout-compact .sctb-step-actions .sctb-primary-action:disabled { visibility: hidden; }

.sctb-theme-dark {
    --sctb-ink: #f5f7fb;
    --sctb-muted: #aeb7c6;
    --sctb-line: #354052;
    --sctb-soft: #202a39;
    --sctb-white: #141c29;
    color-scheme: dark;
}
.sctb-theme-dark .sctb-shell,
.sctb-theme-dark .sctb-booking-content,
.sctb-theme-dark .sctb-picker,
.sctb-theme-dark .sctb-calendar-panel,
.sctb-theme-dark .sctb-details-form,
.sctb-theme-dark .sctb-confirmation-card { background: var(--sctb-white); }
.sctb-theme-dark .sctb-event-summary { background: linear-gradient(165deg, #182233, #111925); }
.sctb-theme-dark .sctb-times-panel { background: #111925; }
.sctb-theme-dark .sctb-host-label,
.sctb-theme-dark .sctb-times-heading span { color: var(--sctb-primary); }
.sctb-theme-dark .sctb-event-description,
.sctb-theme-dark .sctb-event-summary-meta > div,
.sctb-theme-dark .sctb-public-heading p,
.sctb-theme-dark .sctb-picker-status,
.sctb-theme-dark .sctb-timezone { color: var(--sctb-muted); }
.sctb-theme-dark button.sctb-month-nav { color: #bac3d1 !important; }
.sctb-theme-dark button.sctb-month-nav:disabled { color: #5e697a !important; }
.sctb-theme-dark button.sctb-day { color: #d7deea !important; }
.sctb-theme-dark button.sctb-day:disabled { background: transparent !important; color: #5f6a7b !important; }
.sctb-theme-dark button.sctb-day.has-times:not(:disabled) { background: #263143 !important; color: #f4f7fb !important; }
.sctb-theme-dark button.sctb-time-option { border-color: #3c485a !important; background: #1b2534 !important; color: #eef2f7 !important; }
.sctb-theme-dark .sctb-clock-toggle { border-color: #3b4658; background: #1b2534; }
.sctb-theme-dark .sctb-clock-toggle button { color: #cbd5e1 !important; }
.sctb-theme-dark .sctb-clock-toggle button.is-active { background: #344155 !important; color: #fff !important; }
.sctb-theme-dark button.sctb-back-action,
.sctb-theme-dark select.sctb-timezone-select,
.sctb-theme-dark .sctb-field input,
.sctb-theme-dark .sctb-field select,
.sctb-theme-dark .sctb-field textarea,
.sctb-theme-dark .sctb-location-choice { border-color: #3b4658 !important; background: #1b2534 !important; color: #edf2f7 !important; }
.sctb-theme-dark .sctb-selection-summary,
.sctb-theme-dark .sctb-confirmation-summary { border-color: #3a4658; background: #202a39; }

@media (max-width: 900px) {
    .sctb-shell { grid-template-columns: 1fr; }
    .sctb-layout-compact .sctb-shell,
    .sctb-layout-compact .sctb-shell.sctb-has-date { grid-template-columns: 1fr; max-width: var(--sctb-embed-width, 800px); }
    .sctb-event-summary { padding: 26px; border-right: 0; border-bottom: 1px solid var(--sctb-line); }
    .sctb-host-avatar { width: 46px; height: 46px; margin-bottom: 12px; }
    .sctb-event-summary-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
    .sctb-booking-content { padding: 24px; }
}

@media (max-width: 680px) {
    .sctb-booking { margin: 10px auto; font-size: 14px; }
    .sctb-shell { min-height: 0; border-radius: 10px; }
    .sctb-event-summary { padding: 22px 20px; }
    .sctb-event-description { display: none; }
    .sctb-event-summary-meta { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
    .sctb-event-summary-meta > div { font-size: 11px; }
    .sctb-booking-content { padding: 19px 16px 22px; }
    .sctb-progress > div { grid-template-columns: 24px minmax(0,1fr); }
    .sctb-progress > div > span { width: 24px; height: 24px; }
    .sctb-progress > div > small { font-size: 9px; }
    .sctb-progress > div:not(:last-child)::after { top: 12px; }
    .sctb-picker { grid-template-columns: 1fr; }
    .sctb-layout-compact .sctb-picker.has-selected-date { grid-template-columns: 1fr; }
    .sctb-layout-compact .sctb-picker.has-selected-date .sctb-times-panel { border-top: 1px solid var(--sctb-line); border-left: 0; }
    .sctb-calendar-panel { padding: 15px 13px 12px; }
    .sctb-times-panel { min-height: 210px; padding: 15px 13px; border-top: 1px solid var(--sctb-line); border-left: 0; }
    .sctb-times-empty { min-height: 175px; }
    .sctb-time-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
    .sctb-day { min-height: 39px; aspect-ratio: auto; }
    .sctb-details-grid { grid-template-columns: 1fr; }
    .sctb-location-choice-list { grid-template-columns: 1fr; }
    .sctb-form-actions { align-items: stretch; flex-direction: column-reverse; }
    .sctb-form-actions button,
    .sctb-step-actions button { width: 100%; }
    .sctb-confirmation-card { min-height: 360px; padding: 24px 10px; }
    .sctb-ff-shell .sctb-time-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sctb-manage-card { padding: 22px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .sctb-picker-status.is-loading::before { animation-duration: 1.6s; }
}