/**
 * Consultation form — "Schedule your call" step (#consultScheduleSection)
 * Mobile-first layout: single-column date/time on narrow viewports, compact secondary Back control.
 */

/*
 * CTA section uses overflow:hidden globally — clips absolutely positioned pickers.
 * #contact must allow popovers to extend past the section; also stack above #map-strip
 * (next sibling) or map UI paints over the calendar.
 */
#contact.cta-section {
    overflow: visible !important;
    position: relative;
    z-index: 25;
}

/* Map strip follows #contact in DOM — keep it strictly below */
#map-strip,
section.map-strip {
    position: relative;
    z-index: 1;
}

/* Default .cta-box uses overflow:hidden for radius — clips date/time popovers */
#contact .cta-box {
    overflow: visible;
    position: relative;
    z-index: 2;
}

/* Width + overflow: hero-multistep-form.css aligns max-width with homepage hero */
#contact .cta-box.hero-form-wrap {
    overflow: visible;
}

#contact .cta-box-body,
#contact .cta-form-fields {
    overflow: visible;
}

/*
 * Schedule step must stack above the nav row (later sibling), or the submit
 * bar captures clicks and the time/calendar popovers look "broken".
 */
#consultScheduleSection {
    scroll-margin-top: 0.75rem;
    position: relative;
    z-index: 20;
}

#contact .hero-form-wrap .hero-form-nav {
    position: relative;
    z-index: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.consult-schedule-section {
    overflow: visible;
    min-width: 0;
    padding-top: 0.25rem;
    margin-top: 0.75rem;
}

.consult-schedule-section .consult-schedule-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Prevent uppercase label clipping; spacing owned by .consult-schedule-head gap */
.consult-schedule-section .consult-schedule-head .cta-form-section-title {
    margin: 0;
    padding-top: 0.125rem;
    line-height: 1.35;
}

.consult-schedule-section .consult-back-wrap {
    display: none;
    margin: 0;
}

.consult-schedule-section .consult-form-back {
    width: auto;
    max-width: 100%;
    align-self: flex-start;
    min-height: 44px;
    padding: 0.5rem 1.125rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 10px;
    box-shadow: none;
}

@media (min-width: 480px) {
    .consult-schedule-section .consult-schedule-head {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem 1rem;
        margin-bottom: 0.85rem;
    }

    .consult-schedule-section .consult-schedule-head .cta-form-section-title {
        flex: 1 1 auto;
        min-width: 0;
    }

    .consult-schedule-section .consult-back-wrap {
        flex: 0 0 auto;
    }

    .consult-schedule-section .consult-form-back {
        min-width: 5.5rem;
    }
}

/* Date/time row: one column by default, two from small tablet up */
.consult-schedule-section .cta-schedule-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    min-width: 0;
}

.consult-schedule-section .cta-schedule-field {
    min-width: 0;
}

/* Two columns only when each column is wide enough for calendar (~min 280px usable) */
@media (min-width: 768px) {
    .consult-schedule-section .cta-schedule-fields {
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem;
    }
}

.consult-schedule-section .cta-schedule-block {
    margin-bottom: 0;
    border-left: none;
    padding-left: 0.85rem;
    box-shadow: inset 3px 0 0 var(--gold, #ff6600);
}

/* One focus ring on the trigger (avoid double orange with inset bar + expanded state) */
.consult-schedule-section .cta-picker-trigger[aria-expanded='true'] {
    box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.28);
}

.consult-schedule-section .cta-picker-wrap {
    overflow: visible;
}

/* Triggers: contain text, center icons */
.consult-schedule-section .cta-picker-trigger {
    position: relative;
    min-width: 0;
}

.consult-schedule-section .cta-picker-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.consult-schedule-section .cta-picker-wrap .cta-schedule-input-icon {
    top: 50%;
    transform: translateY(-50%);
}

/*
 * Popovers: full trigger width; high z-index so they stay above map strip & footer.
 */
#contact .consult-schedule-section .cta-picker-dropdown {
    z-index: 10060 !important;
    width: 100% !important;
    max-width: min(100%, calc(100vw - 1.5rem)) !important;
    min-width: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    max-height: none !important;
    background: #fff !important;
    box-shadow: 0 12px 40px rgba(11, 22, 53, 0.18), 0 0 0 1px rgba(11, 22, 53, 0.08) !important;
}

#contact .consult-schedule-section .cta-picker-dropdown-inner {
    min-width: 0;
    overflow: visible;
}

#contact .consult-schedule-section .cta-calendar-card {
    max-height: min(70vh, 520px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid rgba(11, 22, 53, 0.08);
    isolation: isolate;
}

#contact .consult-schedule-section .cta-time-card {
    overflow: hidden;
    max-height: min(55vh, 400px);
    display: flex;
    flex-direction: column;
    background: #fff !important;
    border: 1px solid rgba(11, 22, 53, 0.08);
    isolation: isolate;
}

/* Some inner pages add .cta-calendar-day { opacity: 0.35 } on disabled — keep text readable */
#contact .consult-schedule-section .cta-calendar-card .cta-calendar-day:not(.disabled):not(.other-month) {
    color: #1f2937 !important;
    opacity: 1 !important;
}

#contact .consult-schedule-section .cta-calendar-card .cta-calendar-day.other-month,
#contact .consult-schedule-section .cta-calendar-card .cta-calendar-day.disabled {
    color: #9ca3af !important;
    opacity: 1 !important;
}

#contact .consult-schedule-section .cta-calendar-card .cta-calendar-day.selected {
    color: #fff !important;
}

#contact .consult-schedule-section .cta-calendar-card .cta-calendar-day.today:not(.selected) {
    color: #0b1635 !important;
    background: rgba(255, 102, 0, 0.12) !important;
}

#contact .consult-schedule-section .cta-time-inner {
    max-height: min(220px, 38vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#contact .consult-schedule-section .cta-time-card .cta-time-slot {
    color: #374151 !important;
}