/**
 * Showing scheduler widget — matches the rest of the listing page's
 * visual language (clean white cards with subtle gray borders, like
 * the unit cards and the contact form). Orange is reserved for
 * action accents: icon tile, step-pill active state, slot-active
 * state, summary chip, primary CTA.
 *
 * Mobile breakpoint: 768px (collapses two-column body to one,
 * shrinks step pills, tightens slot grid).
 *
 * Variants:
 *   .sw-section            — page-level (max-width 880px, generous margin)
 *   .sw-section-modal      — embedded in the unit-detail modal
 *                            (zero margin, no max-width, lighter card)
 */

/* Page-level section sizes to its parent (the property-page container)
   instead of imposing its own max-width — matches .pd-contact-section
   sitting directly below it so the two cards line up. */
.sw-section {
    margin: 32px 0;
}
.sw-section[hidden] { display: none; }

.sw-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sw-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.sw-header-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fff7ed;
    color: #FEA327;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border: 1px solid #fed7aa;
}
.sw-title {
    margin: 0 0 2px 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: #111827;
}
.sw-sub {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
}

/* ---- step progress bar ---- */
.sw-steps-bar {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    gap: 8px;
}
.sw-step-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #9ca3af;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.sw-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 700;
    flex: 0 0 auto;
}
.sw-step-pill.sw-step-active {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #c2410c;
}
.sw-step-pill.sw-step-active .sw-step-num {
    background: #FEA327;
    color: #fff;
}
/* Completed steps share the same warm Lotly tone as the active step,
   just slightly dimmer so the "active" pill still pops. Avoids the
   green/orange clash that was previously on screen. */
.sw-step-pill.sw-step-done {
    background: #fffaf2;
    border-color: #fde2bf;
    color: #b87108;
}
.sw-step-pill.sw-step-done .sw-step-num {
    background: #FEA327;
    color: #fff;
    opacity: 0.85;
}

/* ---- body two-column ---- */
.sw-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 24px;
    align-items: start;
}
.sw-step { min-width: 0; }

.sw-label {
    display: block;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.sw-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #111827;
    background: #fff;
    box-sizing: border-box;
    font-family: inherit;
}
.sw-input:focus {
    outline: none;
    border-color: #FEA327;
    box-shadow: 0 0 0 3px rgba(254, 163, 39, 0.15);
}
.sw-textarea {
    min-height: 80px;
    resize: vertical;
}

/* ---- date input with icon ---- */
.sw-date-wrap {
    position: relative;
    margin-top: 8px;
}
.sw-date-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #FEA327;
    pointer-events: none;
    font-size: 0.95rem;
}
.sw-date {
    padding-left: 36px;
}

/* ---- date dropdown button (replaces native <input type=date>) ---- */
.sw-date-wrap {
    position: relative;
}
.sw-date-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-size: 0.9375rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sw-date-btn:hover {
    border-color: #FEA327;
}
.sw-date-btn:focus,
.sw-date-btn[aria-expanded="true"] {
    outline: none;
    border-color: #FEA327;
    box-shadow: 0 0 0 3px rgba(254, 163, 39, 0.15);
}
.sw-date-btn-icon { color: #FEA327; font-size: 0.95rem; }
.sw-date-btn-text { flex: 1; }
.sw-date-btn-chev {
    color: #9ca3af;
    font-size: 0.75rem;
    transition: transform 0.2s;
}
.sw-date-btn[aria-expanded="true"] .sw-date-btn-chev {
    transform: rotate(180deg);
}

/* Dropdown calendar popup — clean Lotly look:
   soft white surface, Lotly-orange on hover/selected, Outfit/Inter
   font stack inherited from the rest of the listings page. */
.sw-cal-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    width: 320px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(28, 28, 28, 0.10), 0 2px 6px rgba(28, 28, 28, 0.04);
    padding: 16px;
    font-family: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.sw-cal-pop[hidden] { display: none; }
/* Flip-up variant: when there isn't enough vertical room below the
   trigger to render the full calendar (e.g. user opens the picker near
   the bottom of the viewport inside the unit-detail modal), JS adds
   .sw-cal-pop-up which anchors the popup ABOVE the button instead. */
.sw-cal-pop.sw-cal-pop-up {
    top: auto;
    bottom: calc(100% + 8px);
    box-shadow: 0 -16px 40px rgba(28, 28, 28, 0.10), 0 -2px 6px rgba(28, 28, 28, 0.04);
}
.sw-cal-pop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.sw-cal-pop-title {
    flex: 1;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.sw-cal-pop-nav {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
    background: #fafafa;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s, transform 0.06s;
}
.sw-cal-pop-nav:hover:not(:disabled) {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #FEA327;
    transform: translateY(-1px);
}
.sw-cal-pop-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.sw-cal-pop-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 6px;
}
.sw-cal-pop-weekdays span {
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 0;
}
.sw-cal-pop-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.sw-cal-pop-day {
    aspect-ratio: 1 / 1;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #cbd5e1;         /* unavailable / dim by default */
    cursor: not-allowed;
    padding: 0;
    font-family: inherit;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s, transform 0.06s;
}
.sw-cal-pop-day-empty { visibility: hidden; }
.sw-cal-pop-day-loading {
    color: #e5e7eb;
}
.sw-cal-pop-day-open {
    color: #111827;
    background: #fff7ed;
    border-color: #fed7aa;
    cursor: pointer;
    font-weight: 600;
}
.sw-cal-pop-day-open:hover {
    background: #FEA327;
    border-color: #FEA327;
    color: #fff;
    transform: translateY(-1px);
}
.sw-cal-pop-day-today {
    outline: 1px dashed #9ca3af;
    outline-offset: -3px;
}
.sw-cal-pop-day-today.sw-cal-pop-day-open {
    outline-color: #FEA327;
}
.sw-cal-pop-day-selected,
.sw-cal-pop-day-open.sw-cal-pop-day-selected {
    background: #FEA327;
    border-color: #FEA327;
    color: #fff;
    box-shadow: 0 2px 6px rgba(254, 163, 39, 0.35);
}
.sw-cal-pop-empty {
    margin: 12px 0 0 0;
    text-align: center;
    color: #94a3b8;
    font-size: 0.75rem;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px dashed #f1f5f9;
    border-radius: 8px;
}

.sw-hint {
    margin: 8px 0 0 0;
    color: #6b7280;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sw-hint::before {
    content: "\f017"; /* fa-clock */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 400;
    color: #9ca3af;
    font-size: 0.75rem;
}

/* ---- slot grid ---- */
.sw-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    min-height: 80px;
}
.sw-slots-placeholder {
    grid-column: 1 / -1;
    color: #9ca3af;
    font-size: 0.875rem;
    font-style: italic;
    margin: 0;
    padding: 16px 12px;
    text-align: center;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
}
.sw-slot-btn {
    padding: 10px 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, transform 0.1s;
    font-family: inherit;
}
.sw-slot-btn:hover {
    border-color: #FEA327;
    background: #fff7ed;
}
.sw-slot-btn:active { transform: scale(0.97); }
.sw-slot-btn.sw-slot-active {
    background: #FEA327;
    border-color: #FEA327;
    color: #fff;
}
.sw-empty {
    color: #6b7280;
    font-style: italic;
    margin: 8px 0 0 0;
    font-size: 0.875rem;
}

/* ---- form ---- */
.sw-step-form {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f3f4f6;
}
/* Stack all form fields vertically. The previous two-column layout
   put "Full name" and "Email" side-by-side, which prospects read as a
   first-name / last-name pair and typed their surname into the email
   field. Single-column gives each labeled input its own row so the
   field's purpose is unambiguous. */
.sw-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.sw-form-group {
    display: flex;
    flex-direction: column;
}
.sw-form-group > span {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}
.sw-optional {
    color: #9ca3af;
    font-weight: 400;
    font-size: 0.8rem;
}

.sw-summary {
    margin: 16px 0 12px 0;
    padding: 10px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #9a3412;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sw-summary-icon { color: #FEA327; font-size: 1rem; }

.sw-submit {
    width: 100%;
    padding: 12px 16px;
    background: #FEA327;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.1s;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.sw-submit:hover { background: #e8911f; }
.sw-submit:active { transform: scale(0.99); }
.sw-submit:disabled {
    background: #d1d5db;
    cursor: not-allowed;
}

.sw-form-status {
    margin: 12px 0 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
}
.sw-form-status.sw-error   { background: #fee2e2; color: #991b1b; }
.sw-form-status.sw-success { background: #d1fae5; color: #065f46; }

/* ---- success state ---- */
.sw-step-success {
    text-align: center;
    padding: 28px 0 12px 0;
}
/* Lotly-orange success icon inside a soft orange pill so the final
   state matches the active/done step pills above it. */
.sw-success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #FEA327;
    font-size: 1.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sw-success-title {
    margin: 0 0 8px 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: #111827;
}
.sw-success-msg {
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto;
}
.sw-success-msg strong {
    color: #111827;
    font-weight: 700;
}
.sw-success-email {
    color: #b87108;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    padding: 1px 8px;
    border-radius: 6px;
    display: inline-block;
    margin: 0 2px;
}
.sw-success-note {
    margin: 14px auto 0;
    max-width: 420px;
    font-size: 0.8125rem;
    color: #9ca3af;
}

/* ---- modal-embedded variant ---- *
 * The widget inside the unit-detail modal needs to feel like a
 * section of the modal body, not a card-on-card. Strip the outer
 * card chrome and tighten spacing.
 */
.sw-section-modal {
    margin: 16px 0 0 0;
    padding: 0;
}
.sw-section-modal .sw-card {
    background: transparent;
    border: 0;
    border-top: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 20px 0 0 0;
    max-width: none;
    box-shadow: none;
}

/* ---- modal collapsed trigger ----
   The unit-detail modal opens with just a single tappable CTA row for
   the showing scheduler — the .sw-card below it is hidden until the
   user clicks the trigger. Keeps the modal's primary action buttons
   above the fold. The collapse mechanism lives entirely in the modal
   variant; the page-level widget is always expanded. */
.sw-modal-trigger {
    display: none; /* hidden by default — only the modal variant shows it */
}
.sw-section-modal .sw-modal-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 16px 0 0;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color 0.15s, border-color 0.15s;
}
.sw-section-modal .sw-modal-trigger:hover {
    background: #fff7ed;
    border-color: #FEA327;
}
.sw-modal-trigger-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #fff7ed;
    color: #FEA327;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.sw-modal-trigger-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.sw-modal-trigger-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #111827;
}
.sw-modal-trigger-sub {
    font-size: 0.8125rem;
    color: #6b7280;
}
.sw-modal-trigger-chev {
    flex: 0 0 auto;
    color: #9ca3af;
    transition: transform 0.2s ease;
}
.sw-section-modal.sw-modal-open .sw-modal-trigger-chev {
    transform: rotate(180deg);
}

/* While collapsed, hide the card AND the section's top border (the card
   carries that border in the modal variant). The trigger itself has its
   own border so it reads as the active element. */
.sw-section-modal .sw-card {
    display: none;
}
.sw-section-modal.sw-modal-open .sw-card {
    display: block;
    margin-top: 12px;
    border-top: 0;
    padding-top: 0;
}
.sw-section-modal.sw-modal-open .sw-modal-trigger {
    border-color: #FEA327;
    background: #fff7ed;
}
.sw-section-modal.sw-modal-open .sw-header {
    display: none; /* trigger already shows title + subtitle */
}
.sw-section-modal .sw-title {
    font-size: 1.125rem;
}
.sw-section-modal .sw-header { margin-bottom: 16px; }
.sw-section-modal .sw-header-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
}
.sw-section-modal .sw-row {
    grid-template-columns: 1fr;
    gap: 14px;
}

/* ---- mobile ---- */
@media (max-width: 768px) {
    .sw-card {
        padding: 18px;
        border-radius: 12px;
    }
    .sw-header { gap: 12px; margin-bottom: 14px; }
    .sw-header-icon { width: 36px; height: 36px; font-size: 1rem; }
    .sw-title { font-size: 1.125rem; }
    .sw-steps-bar { gap: 4px; margin-bottom: 16px; }
    .sw-step-pill { padding: 7px 6px; font-size: 0.6875rem; gap: 4px; }
    .sw-step-num { width: 18px; height: 18px; font-size: 0.6875rem; }
    .sw-row { grid-template-columns: 1fr; gap: 18px; }
    .sw-form-grid { grid-template-columns: 1fr; }
    .sw-slots-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
    .sw-slot-btn { padding: 12px 6px; font-size: 0.9rem; }
}