/* pardee-showing-modal — "Request a private showing" / "Schedule a Showing" open the
   showing request form in a dialog, on EVERY property detail surface: the MLS
   /listings/ pages and the WP-entered /property/ pages (off-market + international).

   The form itself is the site's existing showing request form (the one the live site
   uses); this file gives it the 2026 chrome. It has to restate the look because the
   theme's Gravity Forms styling (redesign-2026/_forms.scss) is scoped to forms inside
   a Beaver Builder row, and a property template is not a BB row — and because the
   pre-2026 .listing-showing__request rules (peach panel, red pill button) still load
   and would otherwise win. Every value below is a design token, no new numbers.

   Overlay aesthetic mirrors the shared video modal (.pardee-vmodal) and the gallery
   modal (.pardee-gmodal): ink ground, cream panel, clay focus ring, no motion on open.
   Enqueued with assets/js/pardee-showing-modal.js on both detail surfaces. */

/* ── overlay ─────────────────────────────────────────────── */
.pardee-smodal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 48px 16px;
    background: rgba(0, 12, 19, .92);
    font-family: var(--font-body, "Gotham", "Helvetica Neue", Arial, sans-serif);
}
.pardee-smodal[hidden] { display: none; }

/* ── panel ───────────────────────────────────────────────── */
.pardee-smodal .pardee-smodal__panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: auto;
    padding: 34px 34px 30px;
    background: var(--pp-cream, #fff6f0);
    border-radius: var(--r-md, 8px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
    color: var(--pardee-fg, #022534);
}

.pardee-smodal .pardee-smodal__title {
    margin: 0 44px 4px 0;
    font-family: var(--font-display, "bodoni-pt-variable", Georgia, serif);
    font-weight: var(--font-display-weight, 400);
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -.005em;
    color: var(--pardee-fg, #022534);
    text-transform: none;
}
.pardee-smodal .pardee-smodal__addr {
    margin: 0 44px 20px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pp-clay, #624a3e);
}

.pardee-smodal .pardee-smodal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pp-clay, #624a3e);
    font-family: inherit;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.pardee-smodal .pardee-smodal__close:hover { background: rgba(2, 37, 52, .08); }
.pardee-smodal .pardee-smodal__close:focus-visible { outline: 3px solid var(--pp-clay, #8f6336); outline-offset: 2px; }

/* ── the form, on 2026 tokens ────────────────────────────── */
.pardee-smodal .pardee-smodal__panel .gform_wrapper {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    font-family: var(--font-body, "Gotham", "Helvetica Neue", Arial, sans-serif);
}
.pardee-smodal .gform_heading,
.pardee-smodal .gform_required_legend,
.pardee-smodal .gfield_visibility_hidden,
.pardee-smodal .gform_validation_container,
.pardee-smodal .gfield--type-honeypot { display: none !important; }

.pardee-smodal .gform_fields { grid-row-gap: 18px; }
.pardee-smodal .gform_wrapper.gravity-theme .gfield { margin: 0; padding: 0; }
.pardee-smodal .gform_wrapper.gravity-theme .ginput_container { margin-top: 6px; }

/* labels = the kit's .pardee-label-txt (the chain is long enough to beat both
   Gravity's own label rule and the pre-2026 .listing-showing__request block) */
.pardee-smodal .pardee-smodal__panel .gform_wrapper .gfield_label,
.pardee-smodal .pardee-smodal__panel .gform_wrapper .gform-field-label,
.pardee-smodal .pardee-smodal__panel .gform_wrapper legend.gfield_label,
.pardee-smodal .pardee-smodal__panel .gform_wrapper h5 {
    display: block;
    margin: 0;
    padding: 0;
    font-family: var(--font-body, "Gotham", "Helvetica Neue", Arial, sans-serif);
    font-weight: var(--pardee-w-bold, 700);
    font-size: 11px;
    letter-spacing: .18em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--pardee-label-color, #624a3e);
}
.pardee-smodal .gfield_required { color: var(--pp-terracotta, #9a4121); font-style: normal; padding-left: 3px; }

/* section headings the form carries in its own HTML blocks */
.pardee-smodal .gfield_html h4 {
    margin: 0;
    font-family: var(--font-display, "bodoni-pt-variable", Georgia, serif);
    font-weight: var(--font-display-weight, 400);
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -.005em;
    text-transform: none;
    text-align: left;
    color: var(--pardee-fg, #022534);
}

/* text-like inputs — the :not() chain repeats Gravity's own so this wins on
   specificity, not on load order (same technique as redesign-2026/_forms.scss) */
.pardee-smodal .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):not([type=hidden]),
.pardee-smodal .gform_wrapper select,
.pardee-smodal .gform_wrapper textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: var(--pardee-input-h, 48px);
    margin: 0;
    padding: var(--pardee-input-pad, 0 14px);
    background: var(--pardee-input-bg, #fff6f0);
    color: var(--pardee-input-fg, #022534);
    border: var(--pardee-input-border-w, 1px) solid var(--pardee-input-border, #d8c3b2);
    border-radius: var(--pardee-input-radius, 4px);
    font-family: var(--font-body, "Gotham", "Helvetica Neue", Arial, sans-serif);
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
}
.pardee-smodal .gform_wrapper textarea { padding: 12px 14px; }
.pardee-smodal .gform_wrapper input:focus,
.pardee-smodal .gform_wrapper select:focus,
.pardee-smodal .gform_wrapper textarea:focus {
    border-color: var(--pardee-input-focus, #022534);
    box-shadow: var(--pardee-input-focus-ring, 0 0 0 3px rgba(2, 37, 52, .12));
    outline: none;
}
.pardee-smodal .gform_wrapper ::placeholder { color: var(--pardee-input-ph, #6e5a4c); opacity: 1; }

/* consent checkbox */
.pardee-smodal .gform_wrapper .gfield--type-consent .gfield_label { text-transform: none; letter-spacing: 0; font-weight: var(--pardee-w-regular, 400); font-size: 13px; }
.pardee-smodal .gform_wrapper .gchoice { display: flex; align-items: flex-start; gap: 10px; }
.pardee-smodal .gform_wrapper input[type=checkbox] { accent-color: var(--pardee-check-accent, #022534); width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; }
.pardee-smodal .pardee-smodal__panel .gform_wrapper .gfield_consent_description_text {
    border: 0;
    padding: 0;
    margin: 0;
    max-height: none;
    overflow: visible;
    background: transparent;
    font-size: 12px;
    line-height: 1.55;
    color: var(--pardee-fg-muted, #624a3e);
}
.pardee-smodal .pardee-smodal__panel .gform_wrapper .gfield_consent_description {
    border: 0;
    padding: 0;
    margin: 8px 0 0;
    max-height: none;
    overflow: visible;
    background: transparent;
    font-size: 12px;
    line-height: 1.55;
    color: var(--pardee-fg-muted, #624a3e);
}
.pardee-smodal .gform_wrapper .gfield_consent_label,
.pardee-smodal .gform_wrapper .gchoice label { font-size: 13px; line-height: 1.5; color: var(--pardee-fg-muted, #624a3e); text-transform: none; letter-spacing: 0; font-weight: var(--pardee-w-regular, 400); }

/* submit = the kit's .pardee-btn--primary */
.pardee-smodal .gform_wrapper .gform_footer { margin: 22px 0 0; padding: 0; }
.pardee-smodal .gform_wrapper .gform_footer input[type=submit],
.pardee-smodal .gform_wrapper .gform_button,
.pardee-smodal .gform_wrapper .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    height: var(--pardee-btn-h, 48px);
    min-height: var(--pardee-btn-h, 48px);
    padding: 0 var(--pardee-btn-px, 28px);
    margin: 0;
    background: var(--pardee-btn-bg, #022534);
    color: var(--pardee-btn-fg, #fff6f0);
    border: 0;
    border-radius: var(--pardee-r-btn, 4px);
    font-family: var(--font-body, "Gotham", "Helvetica Neue", Arial, sans-serif);
    font-weight: var(--pardee-btn-weight, 700);
    font-size: var(--pardee-btn-fs, 13px);
    letter-spacing: var(--pardee-btn-track, .14em);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease;
}
.pardee-smodal .gform_wrapper .gform_footer input[type=submit]:hover,
.pardee-smodal .gform_wrapper .gform_button:hover,
.pardee-smodal .gform_wrapper .button:hover {
    background: var(--pardee-btn-bg-hover, #001721);
    color: var(--pardee-btn-fg, #fff6f0);
}

/* ── the form's two steps ────────────────────────────────────
   The form splits itself into "when" and "who" (pardee plugin,
   gform_field_container_23_7). The pre-2026 rules laid those out for a narrow
   sidebar — percentage columns that leave the time select at 40% and clipped.
   In the dialog each step is a simple stack. */
.pardee-smodal .pardee-smodal__panel .gform_body,
.pardee-smodal .pardee-smodal__panel .gform_body_2 { display: block; }
.pardee-smodal .pardee-smodal__panel .gform_body > .gfield,
.pardee-smodal .pardee-smodal__panel .gform_body_2 > .gfield {
    flex: none;
    width: auto;
    max-width: none;
    margin: 0 0 18px;
    padding-left: 0;
    padding-right: 0;
}
.pardee-smodal .pardee-smodal__panel .gform_body > .gfield:last-child,
.pardee-smodal .pardee-smodal__panel .gform_body_2 > .gfield:last-child { margin-bottom: 0; }

.pardee-smodal .pardee-smodal__panel .gfield_step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
}
.pardee-smodal .pardee-smodal__panel .gfield_step p {
    margin: 0;
    font-family: var(--font-body, "Gotham", "Helvetica Neue", Arial, sans-serif);
    font-weight: var(--pardee-w-bold, 700);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pardee-label-color, #624a3e);
}
.pardee-smodal .pardee-smodal__panel .gfield_step .gform_next { width: auto; min-width: 180px; }

.pardee-smodal .pardee-smodal__panel .gform_previous {
    display: inline-block;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 14px 0 0;
    padding: 0;
    background: transparent;
    color: var(--pardee-fg-muted, #624a3e);
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: none;
    text-decoration: underline;
}
.pardee-smodal .pardee-smodal__panel .gform_previous:hover { background: transparent; color: var(--pardee-fg, #022534); }

/* validation + confirmation */
.pardee-smodal .gform_wrapper .gform_validation_errors,
.pardee-smodal .gform_wrapper .validation_message {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 6px 0 0;
    color: var(--pp-terracotta, #9a4121);
    font-size: 13px;
}
.pardee-smodal .gform_confirmation_wrapper,
.pardee-smodal .gform_confirmation_message {
    margin: 0 !important;
    padding: 0;
    max-width: none !important;
    background: transparent;
    color: var(--pardee-fg, #022534);
    font-size: 15px;
    line-height: 1.6;
}

/* ── the form's own date strip (Swiper), on 2026 tokens ──── */
.pardee-smodal .pardee-request-showing-date-picker { width: 100%; margin: 0; padding: 0 24px; }
.pardee-smodal .swiper-slide {
    cursor: pointer;
    text-align: center;
    border: 1px solid var(--pardee-line, #e8d8cc);
    border-radius: var(--r-sm, 4px);
    padding: 8px 4px;
    font-family: var(--font-body, "Gotham", "Helvetica Neue", Arial, sans-serif);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pardee-fg-muted, #624a3e);
    background: transparent;
}
.pardee-smodal .swiper-slide span { display: block; font-size: 13px; letter-spacing: .02em; color: var(--pardee-fg, #022534); }
.pardee-smodal .swiper-slide:hover { border-color: var(--pp-clay, #624a3e); }
.pardee-smodal .swiper-slide.selected { background: var(--pardee-btn-bg, #022534); border-color: var(--pardee-btn-bg, #022534); }
.pardee-smodal .swiper-slide.selected,
.pardee-smodal .swiper-slide.selected span { color: var(--pp-cream, #fff6f0); text-decoration: none; }
/* The date strip cannot be swiped (the form's Swiper is built with touch and
   free paging off), so its arrows are the only way past the first four dates —
   they stay visible at every width, where the pre-2026 rules hid them on phones. */
.pardee-smodal .pardee-smodal__panel .swiper-button-prev,
.pardee-smodal .pardee-smodal__panel .swiper-button-next { display: flex; width: 20px; color: var(--pp-clay, #624a3e); }
.pardee-smodal .swiper-button-prev:after,
.pardee-smodal .swiper-button-next:after { font-size: 13px; }
.pardee-smodal .swiper-button-prev { left: 0; }
.pardee-smodal .swiper-button-next { right: 0; }

/* ── phone ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    .pardee-smodal { padding: 24px 12px; }
    .pardee-smodal .pardee-smodal__panel { padding: 28px 20px 24px; border-radius: var(--r-sm, 4px); }
    .pardee-smodal .pardee-smodal__title { font-size: 22px; }
}