/* FD-225 appointment booking module (order step 2).
   Values from Figma: page frame 245:327 (section container, layout) + dev spec
   258:2 (component states): Montserrat, orange #FB9201, borders #E8E8E8,
   radius 8 (cells) / 6 (chips & banners), cell 70x89, chip 146x44,
   banner tint #FDEBD3, error tint #FDECEA / #C80015, section bg #FFFDF8. */

.appt-module {
    background: #FFFDF8;
    border: 1px dashed #FB9201;
    border-radius: 8px;
    padding: 24px;
    margin: 8px 0 24px;
}

.appt-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.appt-header h4 {
    margin: 0;
}

.appt-price-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #FB9201;
    border-radius: 6px;
    padding: 8px 14px;
}

.appt-price-chip strong {
    font-size: 20px;
    font-weight: 700;
    color: #2F2F2F;
    line-height: 1;
}

.appt-price-chip .appt-price-chip-note {
    font-size: 13px;
    font-weight: 500;
    color: #6D6D6D;
}

.appt-explainer {
    font-size: 13px;
    color: #6D6D6D;
    margin: 16px 0 0;
}

.appt-error {
    background: #FDECEA;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #C80015;
    margin-top: 16px;
}

.appt-strip-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 12px;
}

.appt-strip-head > label {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 500;
    color: #2F2F2F;
}

/* ‹   June 2026   › — bare glyphs either side of the month, no boxes */
.appt-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.appt-month {
    font-size: 14px;
    font-weight: 500;
    color: #6D6D6D;
}

.appt-nav-btn {
    background: none;
    border: none;
    padding: 0 6px;
    font-size: 20px;
    line-height: 1;
    color: #6D6D6D;
    cursor: pointer;
}

.appt-nav-btn:hover:not(:disabled),
.appt-nav-btn:focus-visible {
    color: #FB9201;
    outline: none;
}

.appt-nav-btn:disabled {
    color: #D8D8D8;
    cursor: default;
}

.appt-strip {
    display: flex;
    gap: 6px;
    justify-content: space-between;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px;
}

.appt-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 70px;
    min-width: 70px;
    height: 89px;
    padding: 10px 0;
    border-radius: 8px;
    border: 1px solid #E8E8E8;
    background: #fff;
    cursor: pointer;
}

.appt-day:hover:not(.appt-day--disabled),
.appt-day:focus-visible {
    border-color: #FB9201;
    outline: none;
}

.appt-day-name {
    font-size: 11px;
    font-weight: 500;
    color: #6D6D6D;
    line-height: normal;
}

.appt-day-num {
    font-size: 20px;
    font-weight: 600;
    color: #2F2F2F;
    line-height: 1.1;
}

.appt-day-sub {
    font-size: 10px;
    font-weight: 500;
    color: #6D6D6D;
    line-height: normal;
}

.appt-badge {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #fff;
    background: #FB9201;
    border-radius: 8px;
    padding: 2px 6px;
    line-height: normal;
}

/* Faster (+£29.99): tinted cell, orange border */
.appt-day--faster {
    background: #FDEBD3;
    border-color: #FB9201;
}

/* Fastest (+£49.99): solid orange cell, white text, inverted badge */
.appt-day--fastest {
    background: #FB9201;
    border-color: #FB9201;
}

.appt-day--fastest .appt-day-name,
.appt-day--fastest .appt-day-num,
.appt-day--fastest .appt-day-sub {
    color: #fff;
}

.appt-day--fastest .appt-badge {
    background: #fff;
    color: #FB9201;
}

/* Selected: 2px #222 border on any tier */
.appt-day--selected {
    border: 2px solid #222222 !important;
}

/* Disabled (today/past, weekend, after cut-off) */
.appt-day--disabled {
    background: #F3F4F2;
    border-color: #F3F4F2;
    cursor: default;
}

.appt-day--disabled .appt-day-name,
.appt-day--disabled .appt-day-num,
.appt-day--disabled .appt-day-sub {
    color: #B9B9B9;
}

.appt-day--disabled .appt-badge {
    background: #B9B9B9;
    color: #fff;
}

.appt-swipe-note {
    display: none;
    font-size: 12px;
    color: #6D6D6D;
    margin: 8px 0 0;
}

.appt-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin: 16px 0 0;
}

.appt-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6D6D6D;
}

.appt-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    display: inline-block;
}

.appt-dot--standard {
    background: #fff;
    border: 1px solid #E8E8E8;
}

.appt-dot--faster {
    background: #FDEBD3;
    border: 1px solid #FB9201;
}

.appt-dot--fastest {
    background: #FB9201;
}

.appt-banner {
    background: #FDEBD3;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #2F2F2F;
    margin-top: 16px;
}

.appt-windows-label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #2F2F2F;
    margin: 16px 0 12px;
}

.appt-windows {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
}

.appt-window {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 146px;
    height: 44px;
    border-radius: 6px;
    border: 1px solid #E8E8E8;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #2F2F2F;
    cursor: pointer;
}

.appt-window:hover:not(:disabled),
.appt-window:focus-visible {
    border-color: #FB9201;
    outline: none;
}

.appt-window--selected {
    background: #FFF7EA;
    border: 2px solid #FB9201;
    color: #FB9201;
}

.appt-windows-note {
    font-size: 12px;
    color: #6D6D6D;
    margin: 8px 0 0;
}

/* ── Review page (order-epc-3) appointment line ───────────────────────────── */
.appt-review-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #FDF4E6;          /* pale tint (Standard) */
    border: 1px solid #F1E1C6;
}

/* Paid tiers: stronger tint + orange border */
.appt-review-line--paid {
    background: #FDEBD3;
    border: 1px solid #FB9201;
}

.appt-review-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.appt-review-badge {
    align-self: flex-start;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #fff;
    background: #B9B9B9;
    border-radius: 8px;
    padding: 2px 7px;
    margin-bottom: 2px;
}

.appt-review-badge--faster { background: #FB9201; }
.appt-review-badge--fastest { background: #FB9201; }

.appt-review-title {
    font-size: 15px;
    font-weight: 600;
    color: #2F2F2F;
}

.appt-review-promise {
    font-size: 12px;
    color: #6D6D6D;
}

.appt-review-price {
    font-size: 15px;
    font-weight: 700;
    color: #2F2F2F;
    white-space: nowrap;
}

.appt-review-cardtotal {
    font-weight: 700;
    color: #2F2F2F;
}

/* Mobile: chip drops under the title, strip swipes (left-aligned, swipe note
   shown), chips wrap 2-up */
@media (max-width: 575.98px) {
    .appt-module {
        padding: 16px;
    }

    .appt-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .appt-strip {
        justify-content: flex-start;
    }

    /* Hide the month label + prev/next arrows on mobile — users scroll the
       strip instead (paging is a desktop affordance). */
    .appt-nav {
        display: none;
    }

    .appt-swipe-note {
        display: block;
    }

    .appt-window {
        width: calc(50% - 6px);
    }

    .appt-windows {
        justify-content: flex-start;
    }
}