/* ===== Amelia Booking Pro — Frontend Widget ===== */

.abp-booking-widget {
    max-width: 1000px;
    margin: 0 auto;
    font-family: inherit;
    font-size: 14px;
    color: #333;
}

/* ----- Wizard shell ----- */
.abp-wizard {
    background: #fff;
}

.abp-body {
    padding: 24px 0;
}

/* ----- Progress bar (desktop) ----- */
.abp-progress {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.abp-progress-step {
    flex: 1;
    position: relative;
    padding-bottom: 8px;
    border-bottom: 4px solid #d4d4d4;
    color: #888;
    font-size: 14px;
}

.abp-progress-step.active {
    border-bottom-color: #97c459;
    color: #97c459;
    font-weight: 600;
}

.abp-progress-step.completed {
    border-bottom-color: #97c459;
    color: #97c459;
}

.abp-progress-step.clickable {
    cursor: pointer;
}

.abp-progress-num {
    display: none; /* desktop hides number, shows label */
}

.abp-progress-label {
    display: block;
}

/* ----- Mobile: circular dots ----- */
@media (max-width: 640px) {
    .abp-progress {
        gap: 4px;
        justify-content: center;
        margin-bottom: 16px;
    }

    .abp-progress-step {
        flex: 0 0 auto;
        border-bottom: none;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .abp-progress-step:not(:last-child)::after {
        content: '';
        display: inline-block;
        width: 16px;
        height: 1px;
        background: #d4d4d4;
    }

    .abp-progress-step.completed::after {
        background: #97c459;
    }

    .abp-progress-num {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid #d4d4d4;
        font-size: 13px;
        color: transparent; /* hide number inside dot — clean look */
    }

    .abp-progress-step.active .abp-progress-num {
        background: #97c459;
        border-color: #97c459;
    }

    .abp-progress-step.completed .abp-progress-num {
        background: #97c459;
        border-color: #97c459;
    }

    .abp-progress-label {
        display: none;
    }
}

/* ----- Common headings ----- */
.abp-step-heading {
    margin: 0 0 8px;
    font-size: 14px;
    color: #333;
}

.abp-step-subhead {
    margin: 0 0 24px;
    font-size: 14px;
    color: #666;
}

.abp-section-label {
    margin: 16px 0 8px;
    color: #97c459;
    font-weight: 600;
    font-size: 14px;
}

/* ----- Form grid (Step 1: Category / Service / Practitioner side by side) ----- */
.abp-step-service .abp-field {
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .abp-step-service > .abp-field:nth-of-type(1),
    .abp-step-service > .abp-field:nth-of-type(2),
    .abp-step-service > .abp-field:nth-of-type(3) {
        display: inline-block;
        width: calc(33.333% - 12px);
        vertical-align: top;
        margin-right: 12px;
    }
    .abp-step-service > .abp-field:nth-of-type(3) {
        margin-right: 0;
    }
}

/* Details step uses 3-column on desktop */
.abp-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .abp-form-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* ----- Form primitives ----- */
.abp-field {
    margin-bottom: 16px;
}

.abp-label {
    display: block;
    margin-bottom: 6px;
    color: #97c459;
    font-weight: 600;
    font-size: 13px;
}

.abp-input,
.abp-select,
.abp-textarea {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    background: #fff;
    color: #333;
    box-sizing: border-box;
    font-family: inherit;
}

/* Placeholders must never read as entered text (v0.7.3). The phone field's
   example number was dark enough that people thought it was filled in. */
.abp-input::placeholder,
.abp-textarea::placeholder {
    color: #b5b5b5;
    opacity: 1;
    font-style: italic;
}

.abp-input.abp-input-error {
    border-color: #c9302c;
    box-shadow: 0 0 0 2px rgba(201, 48, 44, .15);
}

.abp-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20fill%3D%22%23999%22%20d%3D%22M2.5%205l4.5%204.5L11.5%205z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

.abp-input:focus,
.abp-select:focus,
.abp-textarea:focus {
    outline: none;
    border-color: #97c459;
    box-shadow: 0 0 0 2px rgba(151, 196, 89, 0.2);
}

.abp-textarea {
    resize: vertical;
    min-height: 80px;
}

.abp-date-input {
    max-width: 180px;
}

/* ----- Checkboxes and radios ----- */
.abp-checkbox,
.abp-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    cursor: pointer;
    font-size: 14px;
}

.abp-checkbox input,
.abp-radio input {
    margin: 0;
}

.abp-radio-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

/* ----- Buttons ----- */
.abp-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.abp-nav:has(.abp-btn:only-child) {
    justify-content: flex-start;
}

.abp-btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: inherit;
}

.abp-btn-primary {
    background: #97c459;
    color: #fff;
}

.abp-btn-primary:hover:not(:disabled) {
    background: #88b347;
}

.abp-btn-primary:disabled {
    background: #c8d8a8;
    cursor: not-allowed;
}

.abp-btn-secondary {
    background: #97c459;
    color: #fff;
}

.abp-btn-secondary:hover {
    background: #88b347;
}

/* ----- Step 2: Time ----- */
.abp-time-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .abp-time-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* ----- Calendar ----- */
.abp-calendar {
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    padding: 12px;
    background: #fff;
    position: relative;
}

.abp-calendar.abp-cal-loading::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.55);
    border-radius: 4px;
    pointer-events: none;
}

.abp-calendar.abp-cal-loading::before {
    content: '...';
    position: absolute;
    top: 12px;
    right: 18px;
    color: #97c459;
    font-weight: bold;
    z-index: 2;
}

.abp-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.abp-cal-nav {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 12px;
    color: #666;
}

.abp-cal-nav:hover {
    color: #97c459;
}

.abp-cal-month {
    font-weight: 600;
    text-transform: capitalize;
}

.abp-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 6px;
    text-align: center;
    font-size: 12px;
    color: #666;
    font-weight: 600;
}

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

.abp-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #999;
    border-radius: 3px;
}

.abp-cal-day.other-month {
    color: #ccc;
}

.abp-cal-day.available {
    color: #97c459;
    cursor: pointer;
    font-weight: 600;
}

.abp-cal-day.available:hover {
    background: #f0f6e6;
}

.abp-cal-day.selected {
    background: #97c459;
    color: #fff;
}

/* Searched, but no availability that day — normal text, not clickable. */
.abp-cal-day.empty {
    color: #333;
}

/* Past days. */
.abp-cal-day.past {
    color: #ddd;
}

/* NOT YET LOADED — visually distinct from "no availability". Hatched/greyed
   so the customer reads it as "come back after loading more", not "booked". */
.abp-cal-day.unsearched {
    color: #bbb;
    background: repeating-linear-gradient(
        45deg, #f7f7f7, #f7f7f7 4px, #efefef 4px, #efefef 8px
    );
    border-radius: 4px;
    cursor: default;
}

.abp-cal-loadmore {
    display: block;
    width: 100%;
    margin: 14px 0 6px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #97c459;
    color: #5f8a2e;
    font-weight: 600;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    min-height: 44px;
}
.abp-cal-loadmore:hover:not(:disabled) {
    background: #f0f6e6;
}
.abp-cal-loadmore:disabled {
    opacity: 0.6;
    cursor: default;
}
.abp-cal-loadmore-hint {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

/* ----- Time slot list ----- */
.abp-slots-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.abp-selected-day-header {
    background: #97c459;
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    font-weight: 600;
    margin-bottom: 8px;
}

.abp-slot-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.abp-slot-btn:hover {
    border-color: #97c459;
    background: #f8fbf2;
}

.abp-slot-btn.selected {
    background: #97c459;
    color: #fff;
    border-color: #97c459;
}

.abp-slot-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #ccc;
    flex-shrink: 0;
}

.abp-slot-btn.selected .abp-slot-dot {
    border-color: #fff;
    background: #fff;
}

.abp-hint {
    color: #888;
    font-size: 13px;
    padding: 12px;
    text-align: center;
}

/* ----- Step 3: Details ----- */
.abp-summary-strip {
    background: #f8fbf2;
    border-left: 3px solid #97c459;
    padding: 12px 16px;
    margin-bottom: 24px;
    font-size: 14px;
    border-radius: 0 4px 4px 0;
}

.abp-outstanding-banner {
    background: #fff4e5;
    border-left: 3px solid #f0a040;
    color: #663300;
    padding: 12px 16px;
    margin-bottom: 24px;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
}

.abp-code-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.abp-code-row .abp-input {
    flex: 1;
}

.abp-btn-apply {
    padding: 8px 18px;
    background: #97c459;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: inherit;
    white-space: nowrap;
}

.abp-btn-apply:hover:not(:disabled) { background: #88b347; }
.abp-btn-apply:disabled { opacity: 0.6; cursor: wait; }
.abp-btn-apply.abp-btn-remove { background: #b04040; }
.abp-btn-apply.abp-btn-remove:hover { background: #9a3030; }

.abp-code-success {
    color: #2e7d2e;
    font-size: 13px;
    margin-top: 6px;
    padding: 6px 0;
}

.abp-code-error {
    color: #b04040;
    font-size: 13px;
    margin-top: 6px;
    padding: 6px 0;
}

/* ----- Couples banner ----- */
.abp-couples-banner {
    background: #eef4f7;
    border-left: 3px solid #4a90b0;
    color: #2c4f60;
    padding: 10px 14px;
    margin: 16px 0;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
}

/* ----- Provider description ----- */
/* Renders Amelia's WYSIWYG description for the selected/assigned therapist.
   Bookly used to call this "Info". Muted styling so it informs without
   competing with form fields. */
.abp-provider-description {
    font-size: 13px;
    color: #666;
    margin: 6px 0 16px;
    font-style: italic;
    line-height: 1.5;
}
.abp-provider-description p { margin: 0 0 6px; }
.abp-provider-description p:last-child { margin-bottom: 0; }
.abp-provider-description a { color: inherit; text-decoration: underline; }

/* ----- Step 4: Done ----- */
.abp-step-done {
    text-align: center;
    padding: 40px 0;
}

.abp-redirecting {
    color: #666;
    font-size: 16px;
}

.abp-redirecting::before {
    content: '✓';
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    background: #97c459;
    color: #fff;
    font-size: 18px;
    margin-right: 12px;
    vertical-align: middle;
    font-weight: bold;
}

/* ----- Generic states ----- */
.abp-loading {
    padding: 60px 20px 80px;
    text-align: center;
    color: #666;
}

.abp-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 20px;
    border: 3px solid #e5e5e5;
    border-top-color: #97c459;
    border-radius: 50%;
    animation: abp-spin 0.9s linear infinite;
}

@keyframes abp-spin {
    to { transform: rotate(360deg); }
}

.abp-loading-primary {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.abp-loading-secondary {
    font-size: 13px;
    color: #888;
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.5;
}

.abp-error-banner {
    background: #fdecea;
    border-left: 3px solid #d04040;
    color: #802020;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
}

/* Actionable "your browser is blocking us" panel */
.abp-error-blocked {
    background: #fff8e6;
    border-left-color: #e0a200;
    color: #6b4e00;
}
.abp-error-blocked .abp-error-title {
    font-weight: 600;
    margin-bottom: 6px;
}
.abp-error-blocked .abp-error-intro {
    margin: 0 0 8px;
}
.abp-error-blocked .abp-error-steps {
    margin: 0 0 8px;
    padding-left: 18px;
}
.abp-error-blocked .abp-error-steps li {
    margin-bottom: 4px;
    line-height: 1.4;
}
.abp-error-blocked .abp-error-contact {
    margin: 8px 0 0;
    font-weight: 500;
}
.abp-error-blocked .abp-error-contact a {
    color: #6b4e00;
    text-decoration: underline;
    white-space: nowrap;
}

/* Fallback booking button — the primary recovery action when slots fail.
   Deliberately prominent: this is what keeps the booking instead of losing it. */
.abp-fallback-btn {
    display: inline-block;
    margin: 4px 0 2px;
    padding: 12px 22px;
    background: #7cb342;
    color: #fff !important;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none !important;
    border-radius: 4px;
    min-height: 44px;      /* comfortable tap target on mobile */
    box-sizing: border-box;
}
.abp-fallback-btn:hover,
.abp-fallback-btn:focus {
    background: #6aa136;
    color: #fff !important;
}
@media (max-width: 640px) {
    .abp-fallback-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px 16px;
    }
}

.abp-empty-state {
    padding: 40px;
    text-align: center;
    color: #888;
}

/* ----- Cancellation page ----- */
.abp-cancel-page {
    max-width: 600px;
    margin: 40px auto;
    padding: 0 16px;
}
.abp-cancel-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.abp-cancel-card h2 {
    margin: 0 0 20px;
    font-size: 24px;
}
.abp-cancel-details {
    margin: 20px 0;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 4px;
}
.abp-cancel-details p {
    margin: 0 0 8px;
    font-size: 14px;
}
.abp-cancel-details p:last-child {
    margin-bottom: 0;
}
.abp-cancel-fee {
    margin: 20px 0;
    padding: 16px;
    border-radius: 4px;
}
.abp-cancel-fee-warning {
    background: #fff7e6;
    border-left: 4px solid #f5a623;
}
.abp-cancel-fee-warning h3 {
    margin: 0 0 8px;
    font-size: 16px;
    color: #b8741b;
}
.abp-cancel-fee-free {
    background: #e8f5e9;
    border-left: 4px solid #66a356;
    color: #2e6a30;
}
.abp-cancel-fee-free p {
    margin: 0;
}
.abp-cancel-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    flex-wrap: wrap;
}
.abp-btn-danger {
    background: #d9534f;
    color: #fff;
    border: 1px solid #c9302c;
}
.abp-btn-danger:hover {
    background: #c9302c;
}
.abp-cancel-success {
    background: #e8f5e9;
    border-left: 4px solid #66a356;
    padding: 16px;
    border-radius: 4px;
}
.abp-cancel-success h3 {
    margin: 0 0 8px;
    color: #2e6a30;
    font-size: 18px;
}
.abp-fee-outstanding {
    margin-top: 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid #f5a623;
    border-radius: 4px;
    color: #b8741b;
    font-weight: 500;
}
.abp-cancel-error,
.abp-cancel-error-inline {
    background: #ffe5e5;
    border-left: 4px solid #d9534f;
    padding: 16px;
    border-radius: 4px;
}
.abp-cancel-error-inline {
    margin-top: 16px;
}
.abp-cancel-error h2 {
    color: #c9302c;
}

/* ----- Settle fees page ----- */
.abp-settle-page {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 16px;
}
.abp-settle-success {
    background: #e8f5e9;
    border-left: 4px solid #66a356;
    color: #2e6a30;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
}
.abp-incident-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    margin: 12px 0;
    background: #f8f9fa;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    gap: 16px;
    flex-wrap: wrap;
}
.abp-incident-details {
    flex: 1;
    min-width: 200px;
}
.abp-incident-details p {
    margin: 0 0 4px;
}
.abp-incident-actions {
    text-align: right;
    min-width: 140px;
}
.abp-incident-amount {
    font-size: 20px;
    font-weight: 600;
    color: #b8741b;
    margin: 0 0 8px;
}
.abp-incident-actions form {
    margin: 0;
}

/* ----- Couples pair picker ----- */
.abp-couples-pair-picker {
    margin: 16px 0 24px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
}
.abp-couples-pair-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.abp-couples-pair-card {
    background: #fff;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-align: left;
}
.abp-couples-pair-card:hover {
    border-color: #66a356;
    box-shadow: 0 2px 8px rgba(102, 163, 86, .15);
    transform: translateY(-1px);
}
.abp-couples-pair-card:active {
    transform: translateY(0);
}
.abp-couples-pair-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}
.abp-couples-pair-provider {
    flex: 1;
    text-align: center;
    min-width: 0;
}
.abp-couples-pair-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 6px;
    display: block;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.abp-couples-pair-photo-initials {
    background: #d9e3d4;
    color: #2e6a30;
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.abp-couples-pair-name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    word-wrap: break-word;
}
.abp-couples-pair-amp {
    font-size: 20px;
    font-weight: 300;
    color: #999;
    flex-shrink: 0;
}

/* ===== Returning-customer banner (items 7+8) ===== */
.abp-welcome-banner {
    background: #f0f6e6;
    border-left: 3px solid #97c459;
    color: #3e5522;
    padding: 12px 16px;
    margin-bottom: 24px;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
}

/* ===== Mobile polish (item 5) =====
   Two goals on narrow viewports:
   1. Tap targets ≥ 44px (Apple HIG / Android touch guidance) — slots,
      calendar days, nav buttons, inputs.
   2. 16px font-size on text inputs — anything smaller makes iOS Safari
      zoom the whole page on focus, which is the single biggest "the form
      feels broken on my phone" complaint. */
@media (max-width: 640px) {

    .abp-body {
        padding: 16px 0;
    }

    /* Inputs: iOS no-zoom size + comfortable touch height */
    .abp-input,
    .abp-select,
    .abp-textarea {
        font-size: 16px;
        min-height: 44px;
        padding: 10px 12px;
    }
    .abp-select {
        background-position: right 12px center;
    }

    /* Nav buttons: full-width row, big targets, Next on the right stays
       dominant. flex:1 keeps Back/Next balanced without wrapping. */
    .abp-nav {
        gap: 10px;
    }
    .abp-nav .abp-btn {
        flex: 1;
        min-height: 48px;
        font-size: 15px;
    }

    /* Time slots: taller rows, roomier text, centred dot */
    .abp-slot-btn {
        min-height: 48px;
        padding: 12px 16px;
        font-size: 15px;
    }

    /* Calendar: slightly larger day cells + text. aspect-ratio keeps them
       square; the grid width means ~44px cells on a 360-390px viewport. */
    .abp-cal-grid,
    .abp-cal-weekdays {
        gap: 3px;
    }
    .abp-cal-day {
        font-size: 15px;
        border-radius: 4px;
    }
    .abp-cal-nav {
        min-width: 44px;
        min-height: 44px;
        font-size: 20px;
    }

    /* Code row: keep input + Apply on one line but give the button height */
    .abp-btn-apply {
        min-height: 44px;
    }

    /* Banners: tighter margins so they don't dominate a small screen */
    .abp-summary-strip,
    .abp-outstanding-banner,
    .abp-welcome-banner,
    .abp-couples-banner {
        margin-bottom: 16px;
        padding: 10px 14px;
    }

    /* Selected-day header above the slot list */
    .abp-selected-day-header {
        padding: 12px 10px;
        font-size: 15px;
    }
}

/* Very narrow phones (SE, Fold cover screens): give the slot list its own
   breathing room under the calendar rather than fighting for width. */
@media (max-width: 400px) {
    .abp-time-grid {
        gap: 16px;
    }
    .abp-progress {
        margin-bottom: 12px;
    }
}