/**
 * SteadyBook - Frontend Styles
 */

:root {
    --gbb-primary: #0f3d35;
    --gbb-primary-light: #1d5d52;
    --gbb-accent: #38a576;
    --gbb-bg: #edf4f1;
    --gbb-card-bg: #ffffff;
    --gbb-text: #10211d;
    --gbb-text-light: #5d6863;
    --gbb-border: #d6ddda;
    --gbb-success: #2e9f6f;
    --gbb-error: #f44336;
    --gbb-soft-shadow: 0 12px 35px rgba(10, 30, 26, 0.12);
}

/* Main Container */
.gbb-booking-container {
    font-family: 'Manrope', 'Poppins', 'Segoe UI', sans-serif;
    background:
        radial-gradient(circle at 12% 18%, rgba(56, 165, 118, 0.2), transparent 35%),
        radial-gradient(circle at 92% 8%, rgba(15, 61, 53, 0.14), transparent 30%),
        linear-gradient(160deg, #eef7f3 0%, #e6f1ed 100%);
    padding: 60px 20px;
    min-height: 100vh;
}

.gbb-booking-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    animation: gbb-fade-up 0.5s ease;
}

@keyframes gbb-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.gbb-header {
    text-align: center;
    margin-bottom: 40px;
}

.gbb-header h1 {
    font-size: clamp(32px, 5vw, 54px);
    font-weight: 800;
    color: var(--gbb-text);
    margin: 0 0 16px 0;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.gbb-subtitle {
    font-size: 18px;
    color: var(--gbb-text-light);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Progress Steps — left-aligned, inline (number beside label) with connectors */
.gbb-progress-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-bottom: 50px;
    position: relative;
}

.gbb-step {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

/* Connector line between step groups. */
.gbb-step:not(:last-child)::after {
    content: '';
    width: 48px;
    height: 2px;
    background: rgba(15, 61, 53, 0.15);
    margin-left: 4px;
}

.gbb-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gbb-card-bg);
    border: 2px solid #c9d4cf;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--gbb-text-light);
    transition: all 0.3s ease;
}

.gbb-step-label {
    font-size: 14px;
    color: var(--gbb-text-light);
    font-weight: 500;
}

.gbb-step-active .gbb-step-number {
    background: linear-gradient(135deg, var(--gbb-primary), var(--gbb-primary-light));
    color: white;
    border-color: var(--gbb-primary);
    box-shadow: 0 8px 20px rgba(15, 61, 53, 0.25);
}

.gbb-step-active .gbb-step-label {
    color: var(--gbb-text);
    font-weight: 700;
}

.gbb-step-completed .gbb-step-number {
    background: var(--gbb-success);
    color: white;
    border-color: var(--gbb-success);
    font-size: 0; /* Hide the digit — show only the tick once the step is done. */
}

.gbb-step-completed .gbb-step-number::after {
    content: '✓';
    font-size: 18px;
    line-height: 1;
}

/* Main Content Layout */
.gbb-main-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: start;
}

.gbb-form-section {
    background: var(--gbb-card-bg);
    border: 1px solid rgba(15, 61, 53, 0.08);
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--gbb-soft-shadow);
}

.gbb-step-content h2 {
    font-size: 28px;
    font-weight: 600;
    color: var(--gbb-text);
    margin: 0 0 24px 0;
}

.gbb-instruction {
    font-size: 15px;
    color: var(--gbb-text-light);
    margin-bottom: 20px;
}

/* Calendar */
.gbb-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.gbb-calendar-shell {
    border: 1px solid var(--gbb-border);
    border-radius: 16px;
    padding: 18px;
    /* Transparent, not a white gradient: on a dark preset a hardcoded
       white panel appears inside the dark card. The border already
       separates the calendar from the rest of the step. */
    background: transparent;
}

.gbb-calendar-header {
    display: grid;
    grid-template-columns: 46px 1fr 46px;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.gbb-calendar-title-wrap {
    text-align: center;
}

.gbb-calendar-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--gbb-text);
}

.gbb-calendar-range-note {
    font-size: 12px;
    color: var(--gbb-text-light);
    margin-top: 2px;
}

.gbb-calendar-nav-btn {
    width: 46px;
    height: 46px;
    border: 1px solid var(--gbb-border);
    border-radius: 12px;
    background: var(--gbb-card-bg);
    color: var(--gbb-text);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gbb-calendar-nav-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--gbb-primary);
    color: var(--gbb-primary);
}

.gbb-calendar-nav-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.gbb-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.gbb-calendar-weekdays span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    color: #6e7a75;
}

.gbb-calendar-empty {
    min-height: 84px;
}

.gbb-calendar-day {
    background: var(--gbb-card-bg);
    border: 1px solid var(--gbb-border);
    border-radius: 12px;
    padding: 12px 8px;
    min-height: 84px;
    text-align: center;
    /* Same reason as the duration buttons: this is a <button>, so without an
       explicit colour it uses the UA's black rather than the theme's text. */
    color: var(--gbb-text);
    transition: all 0.2s ease;
}

.gbb-calendar-day-selectable {
    cursor: pointer;
}

.gbb-calendar-day-selectable:hover {
    border-color: var(--gbb-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 61, 53, 0.15);
}

.gbb-calendar-day.gbb-selected {
    background: var(--gbb-primary);
    border-color: var(--gbb-primary);
    color: white;
}

.gbb-calendar-day.gbb-today {
    border-color: var(--gbb-accent);
}

.gbb-calendar-day.gbb-disabled {
    /* Opacity alone, so this reads as "unavailable" on light and dark alike. */
    opacity: 0.45;
}

.gbb-day-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    color: inherit;
}

.gbb-day-number {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 2px;
}

.gbb-day-month {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.gbb-calendar-day.gbb-selected .gbb-day-label,
.gbb-calendar-day.gbb-selected .gbb-day-month {
    color: rgba(255, 255, 255, 0.9);
}

/* Time Slots */
.gbb-time-section {
    margin-top: 40px;
}

.gbb-selected-date {
    color: var(--gbb-accent);
    font-weight: 600;
}

.gbb-time-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}

.gbb-time-slot {
    background: var(--gbb-card-bg);
    border: 1px solid var(--gbb-border);
    border-radius: 8px;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--gbb-text);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.gbb-time-slot:hover:not(.gbb-booked) {
    border-color: var(--gbb-primary);
    transform: translateY(-2px);
}

.gbb-time-slot.gbb-selected {
    background: linear-gradient(135deg, var(--gbb-accent), var(--gbb-selected, var(--gbb-primary)));
    border-color: var(--gbb-accent);
    color: var(--gbb-selected-text, #ffffff);
}

.gbb-time-slot.gbb-booked {
    background: transparent;
    color: var(--gbb-text-light);
    cursor: not-allowed;
    opacity: 0.6;
}

.gbb-slot-status {
    display: block;
    font-size: 10px;
    font-weight: 400;
    margin-top: 2px;
}

/* Bays Grid */
.gbb-bays-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.gbb-bay-card {
    background: var(--gbb-card-bg);
    border: 1px solid var(--gbb-border);
    border-radius: 14px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gbb-bay-card:hover {
    border-color: var(--gbb-primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(11, 35, 30, 0.14);
}

.gbb-bay-card.gbb-selected {
    border-color: var(--gbb-accent);
    border-width: 2px;
    /* Was a fixed mint-white gradient, which on a dark preset turned the
       chosen resource into a white card carrying light text — the selected
       state was the one you could not read. Two declarations on purpose:
       browsers without color-mix() keep the transparent fallback, where the
       accent border still shows the selection. */
    background: transparent;
    background: color-mix(in srgb, var(--gbb-accent) 12%, transparent);
}

.gbb-bay-header {
    margin-bottom: 12px;
}

.gbb-bay-type {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.gbb-bay-type-practice {
    background: #e8f5e9;
    color: #2e7d32;
}

.gbb-bay-type-play {
    background: #e3f2fd;
    color: #1565c0;
}

.gbb-bay-type-social {
    background: #fff3e0;
    color: #e65100;
}

.gbb-bay-type-pro {
    background: #f3e5f5;
    color: #6a1b9a;
}

.gbb-bay-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--gbb-text);
    margin: 8px 0;
}

.gbb-bay-description {
    font-size: 14px;
    color: var(--gbb-text-light);
    line-height: 1.5;
    margin-bottom: 16px;
    min-height: 42px;
}

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

.gbb-bay-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--gbb-text);
}

.gbb-bay-price small {
    font-size: 14px;
    font-weight: 400;
    color: var(--gbb-text-light);
}

.gbb-bay-capacity {
    font-size: 13px;
    color: var(--gbb-text-light);
}

/* Group Options */
.gbb-group-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.gbb-option-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    color: var(--gbb-text);
}

.gbb-number-selector {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f6faf8;
    padding: 8px 16px;
    border-radius: 8px;
}

.gbb-minus,
.gbb-plus {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--gbb-primary);
    color: white;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gbb-minus:hover,
.gbb-plus:hover {
    background: var(--gbb-primary-light);
    transform: scale(1.1);
}

.gbb-number-display {
    font-size: 24px;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
}

.gbb-duration-selector {
    display: flex;
    gap: 8px;
}

.gbb-duration-btn {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid var(--gbb-border);
    background: var(--gbb-card-bg);
    /* Buttons do not inherit colour from the page: without this they fall
       back to the UA's near-black button text, which vanishes on a dark
       preset like Midnight. */
    color: var(--gbb-text);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gbb-duration-btn:hover {
    border-color: var(--gbb-primary);
}

.gbb-duration-btn.gbb-active {
    background: linear-gradient(135deg, var(--gbb-primary), var(--gbb-primary-light));
    border-color: var(--gbb-primary);
    color: white;
}

/* Coaching Option */
.gbb-coaching-option {
    background: linear-gradient(180deg, #f8faf8 0%, #f2f6f4 100%);
    border: 1px solid var(--gbb-border);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.gbb-checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    gap: 12px;
}

.gbb-checkbox-label input[type="checkbox"] {
    display: none;
}

.gbb-checkmark {
    width: 24px;
    height: 24px;
    border: 2px solid var(--gbb-border);
    border-radius: 6px;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
    background: white;
}

.gbb-checkbox-label input[type="checkbox"]:checked + .gbb-checkmark {
    background: var(--gbb-accent);
    border-color: var(--gbb-accent);
}

.gbb-checkbox-label input[type="checkbox"]:checked + .gbb-checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: 700;
}

.gbb-coaching-text {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--gbb-text);
}

.gbb-coaching-text small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--gbb-text-light);
    margin-top: 4px;
}

/* Form Groups */
.gbb-form-group {
    margin-bottom: 20px;
}

.gbb-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    color: var(--gbb-text);
}

.gbb-form-group input,
.gbb-form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--gbb-border);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.2s ease;
    background: var(--gbb-card-bg);
    /* Form controls do not inherit colour from the page. Without this the
       customer's own name and email are typed in the UA's black, which on a
       dark preset is all but invisible against the card. */
    color: var(--gbb-text);
}

/* Firefox dims placeholders on top of the colour, hence opacity: 1. */
.gbb-form-group input::placeholder,
.gbb-form-group textarea::placeholder {
    color: var(--gbb-text-light);
    opacity: 1;
}

.gbb-form-group input:focus,
.gbb-form-group textarea:focus {
    outline: none;
    border-color: var(--gbb-primary);
    /* Tinted from the theme rather than a fixed green, which was left over
       from the original palette and looked wrong on every other preset. */
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gbb-accent) 22%, transparent);
}

.gbb-form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Confirmation Methods */
.gbb-confirmation-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 8px;
}

.gbb-method-btn {
    padding: 14px 20px;
    border: 2px solid var(--gbb-border);
    background: var(--gbb-card-bg);
    /* Buttons do not inherit colour from the page: without this they fall
       back to the UA's near-black button text, which vanishes on a dark
       preset like Midnight. */
    color: var(--gbb-text);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gbb-method-btn:hover {
    border-color: var(--gbb-primary);
}

.gbb-method-btn.gbb-method-active {
    background: linear-gradient(135deg, var(--gbb-primary), var(--gbb-primary-light));
    border-color: var(--gbb-primary);
    color: white;
}

/* Buttons */
.gbb-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

.gbb-btn {
    flex: 1;
    padding: 16px 32px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.gbb-btn-primary {
    background: linear-gradient(135deg, var(--gbb-accent), var(--gbb-primary-light));
    color: var(--gbb-button-text, #fff);
}

.gbb-btn-primary:hover:not(:disabled) {
    background: #2c805b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(47, 142, 100, 0.35);
}

.gbb-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gbb-btn-secondary {
    background: #eff4f2;
    color: var(--gbb-text);
}

.gbb-btn-secondary:hover {
    background: var(--gbb-border);
}

.gbb-arrow {
    font-size: 18px;
}

/* Booking Summary Sidebar */
.gbb-booking-summary {
    background: linear-gradient(165deg, var(--gbb-primary-light) 0%, var(--gbb-primary) 100%);
    color: white;
    border-radius: 20px;
    padding: 32px;
    position: sticky;
    top: 20px;
    box-shadow: var(--gbb-soft-shadow);
}

.gbb-summary-header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.gbb-summary-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gbb-accent);
    display: block;
    margin-bottom: 8px;
}

.gbb-summary-header h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.gbb-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gbb-summary-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.gbb-summary-value {
    font-size: 15px;
    font-weight: 600;
    text-align: right;
}

.gbb-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.gbb-summary-total .gbb-summary-label {
    font-size: 15px;
    font-weight: 600;
    color: white;
}

.gbb-summary-price {
    font-size: 36px;
    font-weight: 700;
    color: #91efbe;
    line-height: 1.1;
    text-align: right;
    /* A long total must never push the label off the panel. */
    min-width: 0;
    white-space: nowrap;
}

/* "peak rate" under the figure, not run into it. */
.gbb-price-note {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .75;
    margin-top: 2px;
    white-space: nowrap;
}

.gbb-summary-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 16px 0 0 0;
}

/* Responsive Design */
@media (max-width: 968px) {
    .gbb-main-content {
        grid-template-columns: 1fr;
    }
    
    .gbb-booking-summary {
        position: relative;
        top: 0;
    }
    
    .gbb-header h1 {
        font-size: 36px;
    }
    
    .gbb-progress-steps {
        gap: 30px;
    }
    
    .gbb-progress-steps::before {
        width: 300px;
    }
}

@media (max-width: 640px) {
    .gbb-booking-container {
        padding: 30px 15px;
    }
    
    .gbb-form-section {
        padding: 24px;
    }
    
    .gbb-header h1 {
        font-size: 28px;
    }
    
    .gbb-subtitle {
        font-size: 16px;
    }
    
    .gbb-calendar-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 8px;
    }

    .gbb-calendar-shell {
        padding: 12px;
    }

    .gbb-calendar-title {
        font-size: 17px;
    }

    .gbb-calendar-nav-btn {
        width: 40px;
        height: 40px;
    }

    .gbb-day-number {
        font-size: 19px;
    }

    .gbb-calendar-empty {
        min-height: 72px;
    }
    
    .gbb-bays-grid {
        grid-template-columns: 1fr;
    }
    
    .gbb-group-options {
        grid-template-columns: 1fr;
    }
    
    .gbb-progress-steps {
        gap: 20px;
    }
    
    .gbb-progress-steps::before {
        width: 200px;
    }
    
    .gbb-step-label {
        font-size: 12px;
    }
}

/* Force plugin styles over aggressive theme CSS */
.gbb-booking-container,
.gbb-booking-container * {
    box-sizing: border-box !important;
}

.gbb-booking-container {
    font-family: 'Manrope', 'Poppins', 'Segoe UI', sans-serif !important;
    background:
        radial-gradient(circle at 12% 18%, rgba(56, 165, 118, 0.2), transparent 35%),
        radial-gradient(circle at 92% 8%, rgba(15, 61, 53, 0.14), transparent 30%),
        linear-gradient(160deg, #eef7f3 0%, #e6f1ed 100%) !important;
    color: var(--gbb-text) !important;
}

.gbb-header h1,
.gbb-step-content h2,
.gbb-bay-name,
.gbb-summary-header h3 {
    color: var(--gbb-text) !important;
    font-weight: 700 !important;
}

.gbb-subtitle,
.gbb-instruction,
.gbb-day-label,
.gbb-day-month,
.gbb-bay-description,
.gbb-bay-capacity,
.gbb-summary-note {
    color: var(--gbb-text-light) !important;
}

.gbb-form-section,
.gbb-calendar-shell,
.gbb-bay-card,
.gbb-time-slot,
.gbb-form-group input,
.gbb-form-group textarea,
.gbb-method-btn,
.gbb-duration-btn,
.gbb-booking-summary {
    border-radius: 12px !important;
}

.gbb-form-section,
.gbb-calendar-shell,
.gbb-bay-card,
.gbb-time-slot,
.gbb-form-group input,
.gbb-form-group textarea,
.gbb-method-btn,
.gbb-duration-btn,
.gbb-calendar-nav-btn {
    border-color: var(--gbb-border) !important;
}

.gbb-form-group input,
.gbb-form-group textarea,
.gbb-duration-btn,
.gbb-method-btn,
.gbb-time-slot,
.gbb-calendar-nav-btn,
.gbb-btn {
    font-family: inherit !important;
}

/* Themes style bare form controls — `input { color: #333 }` is close to
   universal — and those rules match at the same specificity as ours while
   often loading later. Plain declarations lose that race, which left the
   customer typing their name in the theme's dark colour on a dark card. The
   same reason border-color and font-family above are forced. */
.gbb-form-group input,
.gbb-form-group textarea {
    color: var(--gbb-text) !important;
    /* Themes commonly restyle inputs into a borderless underline with little
       or no padding, which left the value and the placeholder sitting on the
       line. The whole box is forced so the field looks the same wherever the
       plugin is dropped, rather than inheriting whichever form style the
       active theme happens to prefer. */
    background: var(--gbb-card-bg) !important;
    border-width: 2px !important;
    border-style: solid !important;
    /* Radius deliberately not forced — it is set above and by the corner-style
       setting, and repeating it here would override both. */
    padding: 14px 16px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}

.gbb-form-group input::placeholder,
.gbb-form-group textarea::placeholder {
    color: var(--gbb-text-light) !important;
    opacity: 1 !important;
}

.gbb-btn-primary,
.gbb-duration-btn.gbb-active,
.gbb-method-btn.gbb-method-active {
    background: linear-gradient(135deg, var(--gbb-accent), var(--gbb-primary-light)) !important;
    border-color: var(--gbb-primary-light) !important;
    color: var(--gbb-button-text, #ffffff) !important;
}

.gbb-btn-primary:hover:not(:disabled) {
    background: var(--gbb-primary) !important;
    color: var(--gbb-button-text, #ffffff) !important;
}

.gbb-btn-secondary {
    background: #eff4f2 !important;
    color: var(--gbb-text) !important;
}

.gbb-calendar-day.gbb-selected,
.gbb-time-slot.gbb-selected,
.gbb-step-active .gbb-step-number,
.gbb-bay-card.gbb-selected {
    border-color: var(--gbb-accent) !important;
}

.gbb-calendar-day.gbb-selected,
.gbb-time-slot.gbb-selected {
    color: #ffffff !important;
}

/* The weekday label/month is forced to --gbb-text-light !important above, so a
   selected day needs an equally-important override to turn white like the number. */
.gbb-calendar-day.gbb-selected .gbb-day-label,
.gbb-calendar-day.gbb-selected .gbb-day-month {
    color: #ffffff !important;
}

.gbb-booking-summary {
    background: linear-gradient(165deg, var(--gbb-primary-light) 0%, var(--gbb-primary) 100%) !important;
    color: #ffffff !important;
}

.gbb-summary-title,
.gbb-summary-price {
    color: var(--gbb-accent) !important;
}

/* ============================================================
   Appearance modifiers — toggled from the Appearance settings page
   ============================================================ */

/* Summary position.
 *
 * Every position carries its own class, including the default. It used to be
 * implied by the absence of one, which left it relying on the base rule up in
 * the layout section — a rule the responsive block below overrode, while
 * .gbb-summary-left and .gbb-summary-below (one class more specific, and
 * declared after it) sailed straight through. So "right" was the single
 * position that could not survive the 968px breakpoint, and "left" was the
 * one that refused to collapse on a phone. */
.gbb-summary-right .gbb-main-content { grid-template-columns: 1fr 400px; }
.gbb-summary-right .gbb-form-section { order: 1; }
.gbb-summary-right .gbb-booking-summary { order: 2; }
.gbb-summary-left .gbb-main-content { grid-template-columns: 400px 1fr; }
.gbb-summary-left .gbb-form-section { order: 2; }
.gbb-summary-left .gbb-booking-summary { order: 1; }
.gbb-summary-below .gbb-main-content { grid-template-columns: 1fr; }

/* Stack on narrow viewports whichever position is set. Matches the specificity
 * of the rules above, and comes after them, so it wins for all three. */
@media (max-width: 968px) {
    .gbb-summary-right .gbb-main-content,
    .gbb-summary-left .gbb-main-content,
    .gbb-summary-below .gbb-main-content { grid-template-columns: 1fr; }
    .gbb-summary-right .gbb-form-section,
    .gbb-summary-right .gbb-booking-summary,
    .gbb-summary-left .gbb-form-section,
    .gbb-summary-left .gbb-booking-summary { order: 0; }
}

/* Corner style */
.gbb-corners-sharp .gbb-form-section,
.gbb-corners-sharp .gbb-booking-summary,
.gbb-corners-sharp .gbb-bay-card,
.gbb-corners-sharp .gbb-time-slot,
.gbb-corners-sharp .gbb-form-group input,
.gbb-corners-sharp .gbb-form-group textarea {
    border-radius: 4px !important;
}

.gbb-corners-pill .gbb-form-section,
.gbb-corners-pill .gbb-booking-summary {
    border-radius: 34px !important;
}

.gbb-corners-pill .gbb-bay-card,
.gbb-corners-pill .gbb-time-slot {
    border-radius: 22px !important;
}

/* Motion */
.gbb-no-anim .gbb-booking-wrapper {
    animation: none !important;
}

/* ============================================================
   Compact layout — fit more of the flow on screen
   ============================================================ */
.gbb-booking-container {
    padding: 28px 18px;
}
.gbb-header {
    margin-bottom: 22px;
}
.gbb-header h1 {
    font-size: clamp(26px, 4vw, 40px);
    margin-bottom: 10px;
}
.gbb-subtitle {
    font-size: 16px;
}
.gbb-progress-steps {
    margin-bottom: 24px;
}

/* Action row: content-sized buttons, Continue on the right, Back on the left. */
.gbb-form-actions {
    justify-content: flex-end;
    align-items: center;
}
.gbb-form-actions .gbb-btn {
    flex: 0 0 auto;
    /* Fully, smoothly rounded ends (pill). */
    border-radius: 999px;
    /* A pill sized only by its label turns into a lozenge on a short one:
       "Back" came out barely wider than it was tall, and sat next to a
       "Continue" half as wide again. A shared minimum width keeps the pair
       the same shape, and trims the height so they read as buttons rather
       than blobs. */
    min-width: 150px;
    padding: 13px 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1.2;
}
.gbb-form-actions .gbb-btn-secondary {
    margin-right: auto;
}

/* Step 3: two fields side by side (Name + Mobile) with a required marker. */
.gbb-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 560px) {
    .gbb-form-row {
        grid-template-columns: 1fr;
    }
}
.gbb-required {
    color: #e11d48;
    font-weight: 700;
    margin-left: 2px;
}

/* ============================================================
   Step 2 surfaces + Back button styling
   ============================================================ */
/* Players selector: transparent & borderless. */
.gbb-number-selector {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    gap: 18px;
}

/* Coaching card: transparent with a dotted border. */
.gbb-coaching-option {
    background: transparent !important;
    border: 2px dotted var(--gbb-border) !important;
}

/* Back button: transparent with a light border; hover fills with the summary
   panel colour. Text colour is configurable (--gbb-back-btn-text). */
.gbb-btn-secondary,
.gbb-form-actions .gbb-btn-secondary {
    background: transparent !important;
    border: 1px solid var(--gbb-border) !important;
    color: var(--gbb-back-btn-text, var(--gbb-text)) !important;
    transition: all 0.2s ease;
}
.gbb-btn-secondary:hover,
.gbb-form-actions .gbb-btn-secondary:hover {
    background: linear-gradient(165deg, var(--gbb-primary-light) 0%, var(--gbb-primary) 100%) !important;
    border-color: var(--gbb-primary) !important;
    color: var(--gbb-button-text, #ffffff) !important;
}

/* Compact bookable-date grid (month-paged; replaces the full month grid) */
/* Let the grid column shrink so the date grid wraps instead of stretching. */
.gbb-form-section {
    min-width: 0;
}
.gbb-calendar,
.gbb-calendar-strip-wrap {
    min-width: 0;
    max-width: 100%;
}
.gbb-calendar-strip-wrap {
    margin-top: 4px;
}
.gbb-calendar-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.gbb-calendar-pager .gbb-calendar-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gbb-text);
}
/* Wrapping grid of only the bookable dates — no horizontal scrolling. */
.gbb-calendar-grid-dates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 10px;
}
.gbb-calendar-grid-dates .gbb-calendar-day {
    min-height: 0;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font: inherit;
    color: var(--gbb-text);
}
.gbb-calendar-grid-dates .gbb-day-label {
    display: block;
    margin-bottom: 0;
}
.gbb-calendar-grid-dates .gbb-day-number {
    display: block;
    font-size: 20px;
    margin-bottom: 0;
}

/* ============================================================
   Unavailable bays + slot hints (surface conflicts earlier)
   ============================================================ */
.gbb-bay-card.gbb-unavailable {
    position: relative;
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.35);
}
.gbb-bay-card.gbb-unavailable:hover {
    border-color: var(--gbb-border);
    transform: none;
    box-shadow: none;
}
.gbb-bay-unavailable-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--gbb-error);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 999px;
}
.gbb-slot-note {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gbb-accent);
}

/* Peak / non-peak price display on bay cards */
.gbb-bay-price-peak {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--gbb-text-light);
    margin-top: 2px;
}
.gbb-peak-days-note {
    font-size: 13px;
    color: var(--gbb-text-light);
    margin: -8px 0 18px;
}
.gbb-peak-days-note strong {
    color: var(--gbb-text);
}

/* ============================================================
   Themed modal (replaces native alert/confirm popups)
   Inherits the appearance CSS variables from .gbb-booking-container.
   ============================================================ */
.gbb-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 20, 18, 0.55);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.gbb-modal-overlay.gbb-modal-open {
    opacity: 1;
}
.gbb-modal {
    width: 100%;
    max-width: 420px;
    background: var(--gbb-card-bg);
    color: var(--gbb-text);
    border-radius: 18px;
    padding: 30px 28px 24px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(10, 30, 26, 0.35);
    transform: translateY(14px) scale(0.97);
    transition: transform 0.18s ease;
}
.gbb-modal-overlay.gbb-modal-open .gbb-modal {
    transform: translateY(0) scale(1);
}
.gbb-modal-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    background: var(--gbb-primary);
}
.gbb-modal-success .gbb-modal-icon {
    background: linear-gradient(135deg, var(--gbb-accent), var(--gbb-primary-light));
}
.gbb-modal-error .gbb-modal-icon {
    background: var(--gbb-error);
}
.gbb-modal-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--gbb-text);
}
.gbb-modal-message {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--gbb-text-light);
}
.gbb-modal-actions {
    display: flex;
    justify-content: center;
}
.gbb-modal-actions .gbb-btn {
    min-width: 140px;
}

/* Respect the chosen corner style. */
.gbb-corners-sharp .gbb-modal { border-radius: 6px; }
.gbb-corners-pill .gbb-modal { border-radius: 30px; }

.gbb-no-anim .gbb-modal-overlay,
.gbb-no-anim .gbb-modal {
    transition: none !important;
}