/* ============================================================
   Dream Clean - Book a Service page (/book-a-service)
   Loaded ONLY on /book-a-service alongside dcs-global.css
   (which provides the shared .dcs-form* including --dark).

   Two-step booking wizard:
     .dcs-book                - dark wizard card container
     .dcs-book__step          - individual step (hidden unless is-active)
     .dcs-book__question      - centred H2 heading per step
     .dcs-book__hint          - small subtitle under H2
     .dcs-book__select        - styled dropdown (matches step 1 pattern)
     .dcs-book__date          - styled date input, dark-theme calendar
     .dcs-book-times          - grid of time-of-day radio pills
     .dcs-book-nav            - Next / Previous nav
     .dcs-book-progress       - 2-dot progress indicator below card
   ============================================================ */

/* --- Wizard container --- */

.dcs-book {
    max-width: 780px;
    margin: 0 auto;
    background: #0d1613;
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    position: relative;
}

/* Steps: only the active one is visible */
.dcs-book__step {
    display: none;
    animation: dcsBookFade .25s ease-out;
}
.dcs-book__step.is-active {
    display: block;
}

@keyframes dcsBookFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* --- Step headings --- */

.dcs-book__question {
    color: var(--white);
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    margin: 0 0 0.75rem;
}

.dcs-book__hint {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.95rem;
    text-align: center;
    margin: 0 0 2rem;
    line-height: 1.5;
}

/* --- Field group heading (used above date / time-of-day / etc.) --- */

.dcs-book__field-label {
    display: block;
    color: var(--white);
    font-weight: 700;
    font-size: 0.9rem;
    margin: 0 0 0.5rem;
}
.dcs-book__field-label .dcs-form__req {
    color: var(--brand);
}

.dcs-book__field-group {
    margin-bottom: 1.5rem;
}
.dcs-book__field-group:last-of-type {
    margin-bottom: 0;
}

/* --- Service dropdown (grouped by sector) --- */

.dcs-book__select {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.85rem 1rem;
    padding-right: 2.75rem;
    background: var(--white);
    color: var(--charcoal);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23333'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 20px;
}
.dcs-book__select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.25);
}

/* --- Custom on-page dropdown - enhances the native <select> in our own style.
   The real <select> stays in the DOM (visually hidden) so the form still
   submits, validates, and works with no JS. Built by dcs-book.js. --- */
.dcs-select { position: relative; }
/* Native select kept for submit/validation/no-JS, hidden but focusable (not display:none) */
.dcs-select select.is-enhanced {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden;
    pointer-events: none;
}
/* Single tap target: a plain block <button> with NO element children
   (flex children break tap hit-testing on mobile Safari). The chevron is a
   ::after pseudo-element, so the whole box opens on one tap, anywhere. */
.dcs-select__button {
    display: block;
    position: relative;
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.3;
    text-align: left;
    padding: 0.85rem 2.75rem 0.85rem 1rem;
    background: var(--white);
    color: var(--charcoal);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
}
.dcs-select__button:focus-visible,
.dcs-select.is-open .dcs-select__button {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.25);
}
.dcs-select__button[data-placeholder="true"] { color: var(--muted); }
.dcs-select__button::after {
    content: "\f078";                    /* fa-chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8rem;
    color: var(--charcoal);
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .18s var(--ease);
    pointer-events: none;
}
.dcs-select.is-open .dcs-select__button::after { transform: translateY(-50%) rotate(180deg); }
.dcs-select__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--white);
    border: 1px solid var(--grey-line);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding: 0.35rem;
    display: none;
}
.dcs-select.is-open .dcs-select__panel { display: block; }
.dcs-select__group {
    padding: 0.65rem 0.85rem 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.dcs-select__option {
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-md);
    color: var(--charcoal);
    font-size: 0.98rem;
    cursor: pointer;
    touch-action: manipulation;
}
.dcs-select__option:hover,
.dcs-select__option.is-active {
    background: rgba(76, 175, 80, 0.1);
    color: var(--brand-dark);
}
.dcs-select__option[aria-selected="true"] {
    background: var(--brand);
    color: var(--white);
    font-weight: 600;
}

/* --- Date picker (HTML5 native, styled) --- */

.dcs-book__date {
    display: block;
    width: 100%;
    max-width: 320px;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.85rem 1rem;
    padding-right: 2.75rem;   /* room for the custom calendar icon on the right */
    background: var(--white);
    color: var(--charcoal);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
    position: relative;
    color-scheme: light;
    /* Custom calendar glyph on the right - always visible regardless of browser */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 20px;
}
.dcs-book__date:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.25);
}
/* WebKit fallback: stretch the native picker-indicator over the entire
   input so clicking anywhere opens the calendar even if JS is off */
.dcs-book__date::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    color: transparent;
    background: transparent;
    cursor: pointer;
}

/* --- flatpickr overrides - brand the picker to match the site ---
   flatpickr replaces the real <input> with an alt input for display;
   the alt input inherits the .dcs-book__date class, so it already has
   the right base styling. These rules just theme the calendar popover. */

.flatpickr-calendar {
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    border: 1px solid var(--grey-line);
    font-family: inherit;
}

/* Month header + navigation arrows */
.flatpickr-months .flatpickr-month {
    color: var(--charcoal);
    height: 44px;
}
.flatpickr-current-month {
    font-weight: 700;
    padding-top: 8px;
}
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year {
    color: var(--charcoal);
    font-weight: 700;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--charcoal);
    fill: var(--charcoal);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: var(--brand-dark);
    fill: var(--brand-dark);
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
    font-size: 0.85rem;
}

/* Weekday headers */
.flatpickr-weekdays {
    background: transparent;
}
span.flatpickr-weekday {
    color: var(--muted);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: transparent;
}

/* Individual day cells */
.flatpickr-day {
    color: var(--charcoal);
    border-radius: var(--radius-md);
    font-weight: 500;
    max-width: 42px;
    height: 40px;
    line-height: 40px;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: rgba(76, 175, 80, 0.1);
    border-color: transparent;
    color: var(--brand-dark);
}
/* Today's date - brand-green outline before it's selected */
.flatpickr-day.today {
    border-color: var(--brand);
    color: var(--brand-dark);
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: var(--brand);
    color: var(--white);
    border-color: var(--brand);
}
/* Selected date - solid brand green */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--white);
}
/* Disabled dates (past dates blocked via minDate) */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(0, 0, 0, 0.25);
    background: transparent;
}
.flatpickr-day.flatpickr-disabled:hover {
    color: rgba(0, 0, 0, 0.25);
    background: transparent;
    cursor: not-allowed;
}

/* --- Time-of-day pill selector --- */

.dcs-book-times {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.dcs-book-times__item {
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 0.9rem 0.75rem;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
    position: relative;
    min-height: 68px;
    justify-content: center;
}
.dcs-book-times__item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}
.dcs-book-times__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
/* Selected state via :has() */
.dcs-book-times__item:has(.dcs-book-times__input:checked) {
    background: rgba(76, 175, 80, 0.15);
    border-color: var(--brand);
}
.dcs-book-times__item:has(.dcs-book-times__input:focus-visible) {
    outline: 2px dashed var(--brand);
    outline-offset: 2px;
}
.dcs-book-times__label {
    color: var(--white);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
}
.dcs-book-times__hint {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    line-height: 1.3;
}
.dcs-book-times__item:has(.dcs-book-times__input:checked) .dcs-book-times__hint {
    color: rgba(255, 255, 255, 0.75);
}

/* --- Step 2 (contact details) - inputs use shared .dcs-form* dark styles --- */

.dcs-book__details {
    max-width: 720px;
    margin: 0 auto;
}

/* --- Navigation buttons --- */

.dcs-book-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}
.dcs-book-nav__next {
    width: 100%;
    max-width: 520px;
    padding: 1em 1.5em;
    font-size: 1rem;
    font-weight: 700;
    background: var(--brand);
    color: var(--white);
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    transition: background .18s var(--ease), transform .1s var(--ease);
}
.dcs-book-nav__next:hover,
.dcs-book-nav__next:focus {
    background: var(--brand-dark);
}
.dcs-book-nav__next:active {
    transform: translateY(1px);
}
.dcs-book-nav__prev {
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.65);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: color .18s var(--ease);
}
.dcs-book-nav__prev:hover,
.dcs-book-nav__prev:focus {
    color: var(--white);
}

/* --- Progress dots --- */

.dcs-book-progress {
    display: flex;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--grey-line);
    flex-wrap: wrap;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}
.dcs-book-progress__dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--grey);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    transition: background .25s var(--ease), color .25s var(--ease);
}
.dcs-book-progress__dot.is-active {
    background: var(--charcoal);
    color: var(--white);
}
.dcs-book-progress__dot.is-complete {
    background: var(--brand);
    color: var(--white);
}