/* Theme isolation: keep global WordPress theme styles from changing the booking UI. */
.ccb-booking-app,
.ccb-booking-app *,
.ccb-booking-app *::before,
.ccb-booking-app *::after {
    box-sizing: border-box;
}

.ccb-booking-app {
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
}

.ccb-booking-app button,
.ccb-booking-app input,
.ccb-booking-app select,
.ccb-booking-app textarea {
    font-family: inherit;
}

.ccb-booking-app button {
    margin: 0;
    text-transform: none;
}

.ccb-booking-app h1,
.ccb-booking-app h2,
.ccb-booking-app h3,
.ccb-booking-app h4,
.ccb-booking-app h5,
.ccb-booking-app h6,
.ccb-booking-app p,
.ccb-booking-app label,
.ccb-booking-app strong,
.ccb-booking-app small {
    max-width: none;
}

.ccb-booking-app {
    --ccb-primary: #3158d8;
    --ccb-primary-dark: #2445b5;
    --ccb-text: #20252d;
    --ccb-muted: #6d7480;
    --ccb-border: #e3e6eb;
    --ccb-background: #f6f7f9;
    --ccb-card: #ffffff;
    --ccb-available: #5d9b4d;
    --ccb-selected: #3158d8;
    --ccb-booked: #c94c4c;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    color: var(--ccb-text);
    font-family: inherit;
}

.ccb-booking-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(520px, 1.28fr);
    gap: 28px;
    align-items: start;
}

.ccb-booking-page-heading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
}

.ccb-booking-info-column,
.ccb-booking-main-column {
    min-width: 0;
}

.ccb-booking-layout--no-info {
    grid-template-columns: minmax(0, 1fr);
}

.ccb-booking-layout--no-info .ccb-booking-main-column {
    width: 100%;
    max-width: 100%;
    grid-column: 1 / -1;
}

.ccb-booking-page-title {
    margin: 0;
    color: var(--ccb-text);
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.ccb-booking-page-heading__logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 9px;
    flex: 0 0 auto;
}

.ccb-booking-layout--no-info .ccb-booking-page-heading {
    max-width: 1280px;
}

.ccb-booking-info,
.ccb-booking-panel {
    background: var(--ccb-card);
    border: 1px solid var(--ccb-border);
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(25, 35, 55, 0.06);
}

.ccb-booking-info {
    overflow: hidden;
}

.ccb-booking-intro {
    padding: 30px;
    background: linear-gradient(135deg, #f4f6ff, #ffffff);
}

.ccb-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--ccb-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ccb-booking-intro h2,
.ccb-booking-header h2 {
    margin: 0 0 10px;
    color: var(--ccb-text);
    font-size: 28px;
    line-height: 1.2;
}

.ccb-booking-intro p {
    margin: 0 0 10px;
    color: var(--ccb-muted);
    line-height: 1.7;
}

.ccb-booking-intro p:last-child {
    margin-bottom: 0;
}

.ccb-info-card {
    border-top: 1px solid var(--ccb-border);
}

.ccb-info-toggle {
    width: 100%;
    padding: 18px 22px;
    border: 0;
    background: transparent;
    color: var(--ccb-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.ccb-info-toggle:hover {
    background: #fafbfc;
}

.ccb-info-content {
    padding: 0 22px 20px;
    color: var(--ccb-muted);
    line-height: 1.65;
}

.ccb-info-content p {
    margin: 0;
}

.ccb-booking-panel {
    padding: 30px;
}

.ccb-booking-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 26px;
}

.ccb-booking-user {
    padding: 9px 13px;
    border-radius: 999px;
    background: #f0f3f9;
    color: #505867;
    font-size: 13px;
    font-weight: 700;
}

.ccb-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
}

.ccb-field select {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid #d7dbe2;
    border-radius: 10px;
    background: #fff;
    color: var(--ccb-text);
    font: inherit;
}

.ccb-date-toolbar {
    display: grid;
    grid-template-columns: 46px 1fr 46px;
    gap: 10px;
    align-items: center;
    margin: 26px 0 14px;
    padding: 12px;
    border: 1px solid var(--ccb-border);
    border-radius: 14px;
    background: #fafbfc;
}

.ccb-selected-date {
    text-align: center;
    font-weight: 800;
    text-transform: capitalize;
}

.ccb-today-button {
    display: block;
    margin: 5px auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ccb-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.ccb-icon-button {
    width: 46px;
    height: 46px;
    border: 1px solid #d5dbe5;
    border-radius: 10px;
    background: #fff;
    color: var(--ccb-primary);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.ccb-icon-button:hover {
    border-color: var(--ccb-primary);
}

.ccb-hidden-date-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ccb-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 26px;
    color: var(--ccb-muted);
    font-size: 13px;
}

.ccb-status-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ccb-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ccb-dot-available { background: var(--ccb-available); }
.ccb-dot-selected { background: var(--ccb-selected); }
.ccb-dot-booked { background: var(--ccb-booked); }

.ccb-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 14px;
}

.ccb-section-heading h3 {
    margin: 0 0 4px;
    font-size: 18px;
}

.ccb-section-heading p {
    margin: 0;
    color: var(--ccb-muted);
    font-size: 13px;
}

.ccb-loading {
    color: var(--ccb-muted);
    font-size: 13px;
}

.ccb-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ccb-slot {
    min-height: 52px;
    padding: 10px 12px;
    border: 1px solid #cbd4e3;
    border-radius: 10px;
    background: #fff;
    color: var(--ccb-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .15s ease;
}

.ccb-slot:hover:not(:disabled) {
    border-color: var(--ccb-primary);
    transform: translateY(-1px);
}

.ccb-slot-booked {
    border-color: #f0c5c5;
    background: #fff4f4;
    color: #b84b4b;
    cursor: not-allowed;
    opacity: .75;
}

.ccb-slot.is-selected {
    border-color: var(--ccb-primary);
    background: var(--ccb-primary);
    color: #fff;
    box-shadow: 0 5px 14px rgba(49, 88, 216, .22);
}

.ccb-slot-placeholder {
    grid-column: 1 / -1;
    padding: 24px;
    border: 1px dashed #d5dbe4;
    border-radius: 12px;
    background: #fafbfc;
    color: var(--ccb-muted);
    text-align: center;
}

.ccb-booking-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 24px;
    padding: 22px;
    border: 1px solid #d8e0f5;
    border-radius: 14px;
    background: #f5f7ff;
}

.ccb-booking-summary__content {
    width: 100%;
}

.ccb-summary-label {
    display: block;
    margin-bottom: 4px;
    color: var(--ccb-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ccb-booking-summary strong,
.ccb-booking-summary span:last-child {
    display: block;
}

.ccb-booking-summary span:last-child {
    margin-top: 3px;
    color: var(--ccb-muted);
    font-size: 13px;
}

.ccb-primary-button {
    display: inline-flex;
    min-height: 46px;
    padding: 0 20px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: var(--ccb-primary);
    color: #fff !important;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.ccb-primary-button:hover {
    background: var(--ccb-primary-dark);
}

.ccb-primary-button:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.ccb-primary-button.is-completed {
    opacity: 1;
    cursor: default;
}

.ccb-feedback {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.ccb-feedback-success {
    background: #edf8ea;
    color: #3d7133;
}

.ccb-feedback-error {
    background: #fff0f0;
    color: #a33f3f;
}

.ccb-login-required,
.ccb-empty-state {
    padding: 60px 30px;
    text-align: center;
}

.ccb-login-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef2ff;
    color: var(--ccb-primary);
    font-size: 25px;
    font-weight: 800;
}

.ccb-login-required h2,
.ccb-empty-state h2 {
    margin: 0 0 10px;
    font-size: 24px;
}

.ccb-login-required p,
.ccb-empty-state p {
    max-width: 520px;
    margin: 0 auto 24px;
    color: var(--ccb-muted);
    line-height: 1.6;
}

@media (max-width: 850px) {
    .ccb-booking-layout {
        grid-template-columns: 1fr;
    }

    .ccb-booking-page-title {
        margin-bottom: 18px;
        font-size: clamp(34px, 9vw, 46px);
    }

    .ccb-booking-panel {
        padding: 22px;
    }
}

@media (max-width: 560px) {
    .ccb-booking-intro {
        padding: 22px;
    }

    .ccb-booking-header {
        flex-direction: column;
    }

    .ccb-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ccb-booking-summary {
        flex-direction: column;
        align-items: stretch;
    }

    .ccb-primary-button {
        width: 100%;
    }
}


.ccb-day-booking-option,
.ccb-day-unavailable {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    min-height: 92px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #cbd4e3;
    border-radius: 14px;
    background: #fff;
    color: var(--ccb-text);
    font: inherit;
    text-align: left;
}

.ccb-day-booking-option {
    cursor: pointer;
    transition: .15s ease;
}

.ccb-day-booking-option:hover {
    border-color: var(--ccb-primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(49, 88, 216, .08);
}

.ccb-day-booking-option.is-selected {
    border-color: var(--ccb-primary);
    background: #f1f4ff;
    box-shadow: 0 0 0 2px rgba(49, 88, 216, .12);
}

.ccb-day-booking-option strong,
.ccb-day-unavailable strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
}

.ccb-day-booking-option small,
.ccb-day-unavailable span:last-child {
    display: block;
    color: var(--ccb-muted);
    font-size: 13px;
}

.ccb-day-status-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #edf8ea;
    color: var(--ccb-available);
    font-size: 21px;
    font-weight: 800;
}

.ccb-day-unavailable {
    border-color: #f0c5c5;
    background: #fff6f6;
}

.ccb-day-unavailable .ccb-day-status-icon {
    background: #fde8e8;
    color: var(--ccb-booked);
}

/* Enhanced date picker */
.ccb-date-picker {
    position: relative;
    margin: 26px 0 14px;
}

.ccb-date-trigger {
    width: 100%;
    min-height: 68px;
    display: grid;
    grid-template-columns: 42px 1fr 24px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--ccb-border);
    border-radius: 14px;
    background: #fff;
    color: var(--ccb-text);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ccb-date-trigger:hover,
.ccb-date-trigger[aria-expanded="true"] {
    border-color: var(--ccb-primary);
    box-shadow: 0 0 0 3px rgba(49, 88, 216, .09);
}

.ccb-date-trigger-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eef2ff;
    color: var(--ccb-primary);
    font-size: 19px;
}

.ccb-date-trigger small {
    display: block;
    margin-bottom: 3px;
    color: var(--ccb-muted);
    font-size: 12px;
    font-weight: 600;
}

.ccb-date-trigger strong {
    display: block;
    font-size: 16px;
    text-transform: capitalize;
}

.ccb-date-trigger-chevron {
    color: var(--ccb-muted);
    font-size: 20px;
    text-align: center;
}

.ccb-date-popover {
    position: absolute;
    z-index: 50;
    top: calc(100% + 10px);
    left: 0;
    width: min(390px, 100%);
    padding: 18px;
    border: 1px solid var(--ccb-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(25, 35, 55, .16);
}

.ccb-date-picker-header {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.ccb-calendar-month-controls {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 6px;
}

.ccb-calendar-month-controls select {
    min-width: 0;
    height: 40px;
    padding: 0 8px;
    border: 1px solid #d9dde5;
    border-radius: 9px;
    background: #fff;
    color: var(--ccb-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
}

.ccb-calendar-nav {
    width: 40px;
    height: 40px;
    border: 1px solid #d9dde5;
    border-radius: 9px;
    background: #fff;
    color: var(--ccb-primary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.ccb-calendar-nav:hover:not(:disabled) {
    border-color: var(--ccb-primary);
    background: #f5f7ff;
}

.ccb-calendar-nav:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.ccb-calendar-weekdays,
.ccb-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.ccb-calendar-weekdays {
    margin-bottom: 5px;
}

.ccb-calendar-weekdays span {
    padding: 4px 0;
    color: var(--ccb-muted);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--ccb-text);
    font-family: inherit;
    font-size: 13px;
    font-style: normal;
    font-weight: 650;
    line-height: 1;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    overflow: hidden;
    cursor: pointer;
}


.ccb-booking-app .ccb-date-popover .ccb-calendar-weekdays span {
    min-width: 0;
    margin: 0;
    padding: 4px 0;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    line-height: 1;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-nav,
.ccb-booking-app .ccb-date-popover .ccb-calendar-close {
    box-sizing: border-box;
    margin: 0;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    text-transform: none;
}

.ccb-calendar-day:hover:not(:disabled) {
    border-color: #cbd4ef;
    background: #f3f6ff;
}

.ccb-calendar-day.is-outside {
    color: #b9bec7;
}

.ccb-calendar-day.is-disabled {
    color: #d1d4da;
    cursor: not-allowed;
}

.ccb-calendar-day.is-today {
    border-color: var(--ccb-primary);
    color: var(--ccb-primary);
}

.ccb-calendar-day.is-selected {
    border-color: var(--ccb-primary);
    background: var(--ccb-primary);
    color: #fff;
}

.ccb-calendar-day.is-selected.is-today {
    box-shadow: inset 0 0 0 2px #fff;
}

.ccb-calendar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--ccb-border);
}

.ccb-calendar-footer .ccb-today-button {
    margin: 0;
}

.ccb-calendar-close {
    padding: 7px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ccb-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.ccb-calendar-close:hover {
    background: #f3f4f6;
    color: var(--ccb-text);
}

@media (max-width: 640px) {
    .ccb-date-popover {
        width: 100%;
    }
}

/* Multi-date booking */
.ccb-multi-date-control {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid #e2e7f0;
    border-radius: 14px;
    background: #f8faff;
}

.ccb-multi-date-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    cursor: pointer;
}

.ccb-multi-date-toggle input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.ccb-multi-date-help {
    display: block;
    margin: 7px 0 0 28px;
    color: #70788a;
    font-size: 13px;
}

.ccb-selected-dates {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid #dce4f4;
    border-radius: 14px;
    background: #fff;
}

.ccb-selected-dates-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #2c3444;
}

.ccb-selected-dates-header span {
    min-width: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #315be5;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.ccb-selected-dates-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ccb-selected-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #d5def3;
    border-radius: 999px;
    background: #f5f7ff;
    color: #27324a;
    cursor: pointer;
    font: inherit;
}

.ccb-selected-date-chip:hover {
    border-color: #315be5;
    background: #eef2ff;
}

.ccb-selected-date-chip span:last-child {
    color: #71809b;
    font-size: 16px;
    line-height: 1;
}

.ccb-calendar-day.is-selected {
    border: 2px solid #315be5;
    background: #315be5;
    color: #fff;
    font-weight: 700;
}

.ccb-calendar-day.is-selected.is-today {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}

.ccb-day-unavailable ul {
    margin: 10px 0 0;
    padding-left: 20px;
}

/* Booking type selector */
.ccb-booking-type-control {
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px solid #e2e7f0;
    border-radius: 14px;
    background: #f8faff;
}

.ccb-control-label {
    display: block;
    margin-bottom: 9px;
    color: var(--ccb-text);
    font-size: 13px;
    font-weight: 800;
}

.ccb-booking-type-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ccb-booking-type-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #d7deea;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.ccb-booking-type-option.is-selected {
    border-color: var(--ccb-primary);
    background: #f1f4ff;
    box-shadow: 0 0 0 2px rgba(49, 88, 216, .08);
}

.ccb-booking-type-option input {
    margin: 0;
}

.ccb-booking-type-option strong,
.ccb-booking-type-option small {
    display: block;
}

.ccb-booking-type-option small {
    margin-top: 2px;
    color: var(--ccb-muted);
    font-size: 12px;
}

/* Calendar availability */
.ccb-calendar-day.is-booked,
.ccb-calendar-day.is-booked:hover,
.ccb-calendar-day.is-booked.is-selected {
    border-color: #d34d4d;
    background: #fbeaea;
    color: #c63f3f;
    cursor: not-allowed;
    font-weight: 800;
    box-shadow: none;
}

.ccb-calendar-day.is-booked::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    margin: 2px auto 0;
    border-radius: 50%;
    background: #d34d4d;
}

.ccb-calendar-day.is-outside-window,
.ccb-calendar-day.is-outside-window:hover {
    color: #d5d8de;
    background: #f7f7f8;
    cursor: not-allowed;
}

.ccb-selection-warning {
    min-height: 88px;
}

.ccb-selection-warning > span:last-child {
    min-width: 0;
}

.ccb-selection-warning small,
.ccb-selection-warning em {
    display: block;
}

.ccb-selection-warning em {
    margin-top: 5px;
    color: #b14b4b;
    font-size: 12px;
    font-style: normal;
}

@media (max-width: 640px) {
    .ccb-booking-type-options {
        grid-template-columns: 1fr;
    }
}


.ccb-calendar-day.is-closed,
.ccb-calendar-day.is-closed:hover,
.ccb-calendar-day.is-closed.is-selected {
    border-color: #d34d4d;
    background: #fbeaea;
    color: #c63f3f;
    cursor: not-allowed;
    font-weight: 800;
    box-shadow: none;
}
.ccb-calendar-day.is-closed::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    margin: 2px auto 0;
    border-radius: 50%;
    background: #d34d4d;
}


/* Past dates are disabled but informational: gray, never red. */
.ccb-calendar-day.is-past,
.ccb-calendar-day.is-past:hover,
.ccb-calendar-day.is-past.is-selected {
    border-color: transparent;
    background: transparent;
    color: #c7cbd2;
    cursor: not-allowed;
    font-weight: 650;
    box-shadow: none;
}

.ccb-calendar-day.is-past::after {
    display: none;
}

.ccb-customer-form {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid #dce3f4;
    border-radius: 18px;
    background: #fff;
}

.ccb-customer-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ccb-customer-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ccb-customer-field label {
    font-weight: 600;
}

.ccb-customer-field input,
.ccb-customer-field textarea,
.ccb-customer-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #cfd6e3;
    border-radius: 10px;
    background: #fff;
    font: inherit;
}

.ccb-customer-field textarea {
    resize: vertical;
}

.ccb-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ccb-radio-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
}

.ccb-summary-booking-section {
    margin-top: 12px;
}

.ccb-summary-section-heading {
    margin-bottom: 12px;
}

.ccb-summary-section-heading h3 {
    margin: 0;
    color: var(--ccb-text);
    font-size: 18px;
    line-height: 1.3;
}

.ccb-summary-section-heading p {
    margin: 4px 0 0;
    color: var(--ccb-muted);
    font-size: 13px;
}

.ccb-summary-resource {
    font-size: 19px;
    font-weight: 750;
    color: var(--ccb-text);
}

.ccb-summary-datetime {
    margin-top: 4px;
    color: var(--ccb-muted);
    font-size: 14px;
}

.ccb-summary-price-lines {
    margin-top: 14px;
    display: grid;
    gap: 0;
    max-width: 760px;
    border-top: 1px solid #dfe5f0;
}

.ccb-summary-price-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding: 11px 0;
    border-bottom: 1px solid #dfe5f0;
    font-size: 14px;
}

.ccb-summary-price-line span {
    color: #4e596d;
}

.ccb-summary-price-line strong {
    color: var(--ccb-text);
    font-size: 14px;
    white-space: nowrap;
}

.ccb-summary-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 2px solid #cfd8eb;
}

.ccb-summary-total-row > span {
    margin: 0 !important;
    color: var(--ccb-text) !important;
    font-size: 17px !important;
    font-weight: 750;
}

.ccb-summary-total {
    display: block;
    margin: 0;
    color: var(--ccb-text);
    font-size: 21px;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .ccb-customer-fields {
        grid-template-columns: 1fr;
    }
}

/* Booking step flow */
.ccb-booking-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 0 24px;
    padding: 8px;
    border: 1px solid #dfe5f0;
    border-radius: 16px;
    background: #f7f9ff;
}

.ccb-booking-step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    border-radius: 11px;
    color: #70798a;
    font-size: 14px;
}

.ccb-booking-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e9edf5;
    font-weight: 700;
}

.ccb-booking-step.is-active {
    background: #3159df;
    color: #fff;
}

.ccb-booking-step.is-active span,
.ccb-booking-step.is-complete span {
    background: #fff;
    color: #3159df;
}

.ccb-booking-flow-step {
    display: block;
}

.ccb-booking-flow-step[hidden] {
    display: none !important;
}

.ccb-step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}

.ccb-step-actions-next {
    justify-content: flex-end;
}

.ccb-secondary-button {
    appearance: none;
    border: 1px solid #cbd4e5;
    background: #fff;
    color: #273246;
    border-radius: 10px;
    padding: 13px 22px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ccb-secondary-button:hover {
    background: #f6f8fc;
}

.ccb-primary-button:disabled {
    cursor: not-allowed;
}

.ccb-summary-actions.is-completed {
    justify-content: flex-end;
}

.ccb-return-to-booking {
    min-width: 220px;
}

.ccb-summary-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #dce3f0;
}

.ccb-customer-quick-fill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #dfe5f0;
    border-radius: 12px;
    background: #f8faff;
}

.ccb-customer-quick-fill__copy {
    display: grid;
    gap: 3px;
}

.ccb-customer-quick-fill__copy strong {
    font-size: 14px;
}

.ccb-customer-quick-fill__copy span {
    color: #70798a;
    font-size: 12px;
}

.ccb-customer-quick-fill__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.ccb-quick-button {
    appearance: none;
    border: 0;
    border-radius: 8px;
    padding: 9px 12px;
    background: #3159df;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.ccb-quick-button--secondary {
    border: 1px solid #cbd4e5;
    background: #fff;
    color: #273246;
}

.ccb-quick-button--text {
    background: transparent;
    color: #6f7888;
}

.ccb-summary-customer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #dce3f0;
}

.ccb-summary-customer > strong {
    display: block;
    margin-bottom: 10px;
}

.ccb-summary-customer > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 7px 0;
    font-size: 14px;
}

.ccb-summary-customer > div span {
    color: #6f7888;
}

@media (max-width: 640px) {
    .ccb-booking-steps {
        gap: 5px;
    }

    .ccb-booking-step {
        gap: 5px;
        font-size: 12px;
    }

    .ccb-booking-step span {
        width: 24px;
        height: 24px;
    }

    .ccb-step-actions,
    .ccb-summary-actions {
        width: 100%;
    }

    .ccb-customer-quick-fill {
        align-items: flex-start;
        flex-direction: column;
    }

    .ccb-customer-quick-fill__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .ccb-step-actions .ccb-primary-button,
    .ccb-step-actions .ccb-secondary-button,
    .ccb-summary-actions .ccb-primary-button,
    .ccb-summary-actions .ccb-secondary-button {
        flex: 1;
    }
}


/* =========================================================
   ClubConnect subtle branding
   ========================================================= */

.ccb-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: var(--ccb-text);
    text-decoration: none;
}

.ccb-brand:hover {
    color: var(--ccb-text);
    text-decoration: none;
}

.ccb-brand__logo {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: cover;
    border-radius: 7px;
}

.ccb-brand__name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.ccb-powered-by {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 18px auto 0;
    padding: 12px 10px 4px;
    color: var(--ccb-muted);
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

.ccb-powered-by__brand {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #596273;
    font-weight: 700;
    text-decoration: none;
}

.ccb-powered-by__brand:hover {
    color: var(--ccb-primary);
}

.ccb-powered-by__logo {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
}

.ccb-powered-by__separator {
    color: #b0b7c3;
}

.ccb-powered-by > a:last-child {
    color: #697386;
    text-decoration: none;
}

.ccb-powered-by > a:last-child:hover {
    color: var(--ccb-primary);
    text-decoration: underline;
}

@media (max-width: 560px) {
    .ccb-powered-by {
        padding-left: 8px;
        padding-right: 8px;
    }
}

.ccb-booking-intro__text a { color: var(--ccb-primary); }
.ccb-booking-intro__text strong { color: var(--ccb-text); }

@media (max-width: 900px) {
    .ccb-booking-page-heading {
        grid-column: 1;
    }

    .ccb-booking-layout--no-info {
        display: block;
    }
}

/* The WordPress page title is replaced by the plugin-managed title so it
   can stay aligned with the information panel or booking panel. */
body.ccb-booking-page .entry-title,
body.ccb-booking-page .page-title,
body.ccb-booking-page .wp-block-post-title,
body.ccb-booking-page h1.entry-title {
    display: none !important;
}

.ccb-powered-by {
    width: 100%;
    box-sizing: border-box;
}

.ccb-captcha{margin-top:20px;padding:16px;border:1px solid #e4e7ec;border-radius:12px;background:#fafbfc}.ccb-captcha__title{font-weight:700;margin-bottom:10px}.ccb-captcha img{display:block;width:180px;height:54px;border-radius:8px;margin-bottom:8px}.ccb-captcha input{display:block;max-width:220px;margin-top:8px;padding:10px;border:1px solid #ccd1d9;border-radius:8px;text-transform:uppercase}.ccb-captcha [data-simple-captcha]{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.ccb-captcha [data-turnstile-captcha]{margin-top:8px}

/* Optional resource add-ons */
.ccb-addons-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid #e2e7f0; }
.ccb-addons-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.ccb-addon-card { border:1px solid #d8dfec; border-radius:16px; background:#fff; padding:18px; transition:border-color .15s, box-shadow .15s, background .15s; }
.ccb-addon-card.is-selected { border-color:#3158df; background:#f5f7ff; box-shadow:0 0 0 2px rgba(49,88,223,.08); }
.ccb-addon-card__body { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.ccb-addon-card h4 { margin:0 0 5px; font-size:18px; }
.ccb-addon-card p { margin:0 0 8px; color:#697386; font-size:14px; line-height:1.45; }
.ccb-addon-card strong { font-size:14px; }
.ccb-addon-card__quantity { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.ccb-addon-card__quantity button { width:36px; height:36px; border:1px solid #cbd5e5; border-radius:10px; background:#fff; font-size:22px; cursor:pointer; }
.ccb-addon-card__quantity span { min-width:20px; text-align:center; font-weight:700; }
.ccb-summary-addons { margin-top:20px; padding:16px 0 2px; border-top:1px solid #dfe5f0; }
.ccb-summary-addons h3 { margin:0; font-size:18px; }
.ccb-summary-addon-line { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:10px 0; border-bottom:1px solid #dfe5f0; }
.ccb-summary-addon-line span { color:#4e596d; }
.ccb-summary-addon-line strong { color:var(--ccb-text); white-space:nowrap; }
@media (max-width: 640px) { .ccb-addons-grid { grid-template-columns:1fr; } .ccb-addon-card__body { align-items:flex-start; } }


/* Theme-safe blocked-day treatment: blocked dates are shown as full red tiles.
   Keep this selector scoped to the booking calendar so theme button rules cannot
   turn the state into a red marker/dot only. */
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-closed,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-closed:hover,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-closed.is-selected,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-booked,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-booked:hover,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-booked.is-selected {
    border: 1px solid #ef6b6b !important;
    background: #fbeaea !important;
    color: #c63f3f !important;
    box-shadow: none !important;
    font-weight: 800 !important;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-closed::after,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-booked::after {
    content: none !important;
    display: none !important;
}

/* Final datepicker theme isolation.
 * WordPress themes frequently apply global styles to buttons/selects and can
 * change font-weight, appearance, padding, line-height or inline alignment.
 * Keep every datepicker control visually deterministic without changing the
 * surrounding site's typography.
 */
.ccb-booking-app .ccb-date-popover,
.ccb-booking-app .ccb-date-popover * {
    box-sizing: border-box;
}

.ccb-booking-app .ccb-date-popover .ccb-date-picker-header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 8px;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-month-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 6px;
    min-width: 0;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-month-controls select,
.ccb-booking-app .ccb-date-popover .ccb-calendar-month-controls select:focus {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 1px solid #d9dde5 !important;
    border-radius: 9px !important;
    background-color: #fff !important;
    color: var(--ccb-text) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-month-controls select option {
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-nav,
.ccb-booking-app .ccb-date-popover .ccb-calendar-nav:hover,
.ccb-booking-app .ccb-date-popover .ccb-calendar-nav:focus,
.ccb-booking-app .ccb-date-popover .ccb-calendar-nav:active {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #d9dde5 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: var(--ccb-primary) !important;
    font-family: inherit !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    box-shadow: none !important;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-nav:hover:not(:disabled) {
    border-color: var(--ccb-primary) !important;
    background: #f5f7ff !important;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-nav:disabled {
    opacity: .35 !important;
    cursor: not-allowed !important;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin: 0 0 5px !important;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-weekdays span {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    color: var(--ccb-muted) !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    min-width: 0;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day:hover,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day:focus,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day:active {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 9px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-selected,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-selected:hover,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-selected:focus,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-selected:active {
    font-weight: 700 !important;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-booked,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-closed,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-booked:hover,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-closed:hover,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-booked:focus,
.ccb-booking-app .ccb-date-popover .ccb-calendar-grid .ccb-calendar-day.is-closed:focus {
    font-weight: 800 !important;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-footer .ccb-today-button,
.ccb-booking-app .ccb-date-popover .ccb-calendar-footer .ccb-calendar-close {
    margin: 0 !important;
    padding: 7px 11px !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-footer .ccb-today-button {
    font-weight: 700 !important;
}

.ccb-booking-app .ccb-date-popover .ccb-calendar-footer .ccb-calendar-close {
    font-weight: 700 !important;
}

.ccb-booking-app .ccb-booking-type-selection {
    margin: 18px 0;
    padding: 18px;
    border: 1px solid #d7dce5;
    border-radius: 14px;
    background: #fff;
}

.ccb-booking-app .ccb-booking-type-selection__options {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.ccb-booking-app .ccb-resource-booking-type-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #d7dce5;
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
}

.ccb-booking-app .ccb-resource-booking-type-option.is-selected {
    border-color: #3159d9;
    background: #f4f7ff;
}

.ccb-booking-app .ccb-resource-booking-type-option > input {
    flex: 0 0 auto;
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin: 2px 0 0;
    padding: 0;
    box-sizing: border-box;
}

.ccb-booking-app .ccb-resource-booking-type-option__content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ccb-booking-app .ccb-resource-booking-type-option__content strong,
.ccb-booking-app .ccb-resource-booking-type-option__content small,
.ccb-booking-app .ccb-resource-booking-type-option__content em {
    display: block;
    margin: 0;
    line-height: 1.35;
}

.ccb-booking-app .ccb-resource-booking-type-option__content strong {
    font-weight: 600;
}

.ccb-booking-app .ccb-resource-booking-type-option__content small {
    font-size: .92em;
    opacity: .72;
}

.ccb-booking-app .ccb-resource-booking-type-option__content em {
    font-style: normal;
    font-weight: 600;
}

.ccb-booking-app .ccb-summary-booking-type {
    margin-top: 4px;
    font-size: .94em;
    font-weight: 600;
    opacity: .78;
}