/* ==========================================================================
   Request-a-Quote modal — spacing + scripted dropdowns
   Standalone sheet, enqueued after output.css (see dmc_enqueue_scripts).
   output.css is left untouched, so rolling back is one line in functions.php.
   --------------------------------------------------------------------------
   Every selector here is scoped to #dmc-quote-modal, so the contact form,
   consultation form, list-your-company form and claim-business modal — which
   share .dmc-form-group / .dmc-form-row — are untouched. The only unscoped
   rules are .dmc-select*, a new class that exists nowhere else in the theme.

   Being last in the file, this wins on cascade order; nothing above needs to
   be edited or deleted.

   Fixes
   -----
   1. Uneven control heights. .dmc-form-group controls are declared in three
      places with different metrics — ~5263 (contact form) matches plain
      `input` at 14px padding / 2px border, ~8208 (listing form) matches
      `input[type=text]` at 12px / 1px, ~9239 (this modal) again 12px / 1px.
      A <select> and an <input type="text"> in one row rendered at different
      heights. One rule below covers every control.

   2. Doubled gutters. Those blocks mix `gap` with `margin-bottom`, so both
      applied: 24+20px between rows, 8+8px under labels.

   3. Dead space under labels. `body` sets line-height 1.7; on a 15px label
      that is a 25px line box with ~7px empty. Zeroing the margin leaves it —
      only an explicit line-height clears it.

   4. Textarea, consent row and submit button had no spacing at all: they sit
      in bare .dmc-form-group wrappers with no .dmc-form-row, so a margin on
      .dmc-form-row never reached them. The gap now lives on the form element.

   5. Grid blowout. A grid item defaults to min-width:auto, so a select whose
      longest option exceeded its column pushed the row past the modal edge.

   6. Mobile. The theme's own modal media query is 640px; these rules match
      that breakpoint, drop to one column, and use 16px control text so iOS
      Safari does not zoom the page on focus.
   ========================================================================== */

/* The form owns the vertical rhythm — reaches rows, textarea, consent, button. */
#dmc-quote-modal #dmc-quote-form {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    max-width: 100%;
}

/* min-width:0 is load-bearing — see (5). */
#dmc-quote-modal .dmc-form-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

/* minmax(0,1fr), not 1fr: plain 1fr resolves to minmax(auto,1fr) and lets a
   wide control expand the track beyond the container. */
#dmc-quote-modal .dmc-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.75rem;
    margin-bottom: 0;
}

#dmc-quote-modal .dmc-form-group-full {
    grid-column: span 2;
}

/* line-height is what actually removes the space under the label — see (3). */
#dmc-quote-modal .dmc-form-group > label {
    display: block;
    margin: 0 0 0.25rem;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-dark);
}

/* One box for every control so fields in a row line up exactly — see (1). */
#dmc-quote-modal .dmc-form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#dmc-quote-modal .dmc-form-group select,
#dmc-quote-modal .dmc-form-group textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0.6875rem 0.875rem;
    font-size: 15px;
    line-height: 1.4;
    height: auto;
    min-height: 0;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    background: #fff;
    color: var(--text-dark);
}

#dmc-quote-modal .dmc-form-group textarea {
    min-height: 130px;
    resize: vertical;
}

/* If a placeholder still outgrows its half-width column, end it with an
   ellipsis rather than slicing a word in half. */
#dmc-quote-modal .dmc-form-group input::placeholder {
    text-overflow: ellipsis;
}

/* Consent row is horizontal — it must not inherit the column layout. */
/* The label sits inside a .dmc-form-group, which is a flex COLUMN, so this row
   must set its own direction — and `gap` is unusable here because the parent
   column would apply it vertically; the spacing goes on margin-right instead.

   align-items:center, not flex-start: this sentence is one line, and
   flex-start pins a 17px box to the top of a 21px line box, leaving it
   visibly high against the text. Centre matches the optical baseline. */
#dmc-quote-modal .dmc-form-consent {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
}

#dmc-quote-modal .dmc-form-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0 0.5625rem 0 0;
    accent-color: var(--primary, #2b4c7e);
    cursor: pointer;
}

#dmc-quote-modal .dmc-form-consent > span {
    flex: 1 1 auto;
    min-width: 0;
}

/* margin-top here stacked on the form gap and left the consent row with 18px
   above it but 28px below. The form gap alone keeps both sides equal. */
#dmc-quote-modal .dmc-modal-actions {
    margin-top: 0;
}

/* Header padding-bottom + header margin-bottom + body padding-top were
   stacking to ~64px under the title. */
#dmc-quote-modal .dmc-modal-header {
    margin-bottom: 0;
    padding: 1.5rem 1.75rem 1.125rem;
    border-bottom: 1px solid #e1e5e9;
}

#dmc-quote-modal .dmc-modal-body {
    padding: 1.5rem 1.75rem 1.75rem;
    overflow-x: hidden;
}

#dmc-quote-modal .dmc-modal-content {
    overflow: hidden;
}

/* ==========================================================================
   SCRIPTED DROPDOWN — replaces the native <select> open list
   --------------------------------------------------------------------------
   A native <select> hands its open list to the operating system: that popup
   is drawn outside the page, ignores the modal's bounds and cannot be styled.
   This is the pattern already shipping on /consultation/
   (page-consultation.php ~1383), reused here.

   The key detail is `position: relative` on the panel rather than absolute —
   the list pushes the fields below it down instead of floating over them, so
   it can never overflow the modal or be clipped by its overflow:hidden.

   .dmc-select* is a new class; nothing else in the theme uses it, so these
   rules are safe to leave unscoped.
   ========================================================================== */

.dmc-select {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    padding: 0.6875rem 0.875rem;
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-dark);
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dmc-select:hover {
    border-color: var(--primary, #2b4c7e);
}

.dmc-select:focus-visible {
    outline: none;
    border-color: var(--primary, #2b4c7e);
    box-shadow: 0 0 0 3px rgba(43, 76, 126, 0.12);
}

.dmc-select.is-invalid {
    border-color: #e74c3c;
}

/* Placeholder stays muted until a value is chosen. */
.dmc-select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted, #6b7280);
}

.dmc-select.has-value .dmc-select-value {
    color: var(--text-dark);
}

.dmc-select-arrow {
    flex-shrink: 0;
    color: var(--text-muted, #9ca3af);
    transition: transform 0.2s;
}

.dmc-select-arrow.is-open {
    transform: rotate(180deg);
}

/* relative, not absolute: the panel reflows the form instead of floating. */
.dmc-select-dropdown {
    position: relative;
    margin-top: 4px;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    overflow: visible;
}

/* Caret tying the panel back to the control above it. */
.dmc-select-dropdown::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 16px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-top: 1px solid #e1e5e9;
    border-left: 1px solid #e1e5e9;
    transform: rotate(45deg);
}

/* No max-height: every option is visible at once. The panel is in normal flow,
   so it lengthens the form; the modal body scrolls if it outgrows the screen. */
.dmc-select-dropdown-inner {
    overflow: hidden;
    border-radius: 8px;
}

.dmc-select-option {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-dark);
    cursor: pointer;
    transition: background 0.12s;
}

.dmc-select-option:hover,
.dmc-select-option:focus-visible {
    outline: none;
    background: var(--bg-light, #f8f9fb);
}

.dmc-select-option.is-active {
    background: rgba(43, 76, 126, 0.08);
    color: var(--primary-dark, #1a365d);
    font-weight: 600;
}

.dmc-select-option + .dmc-select-option {
    border-top: 1px solid #f0f0f0;
}

/* ==========================================================================
   MOBILE — matches the theme's own 640px modal breakpoint (~9344) so these
   rules land after it in source order and actually win.
   ========================================================================== */

@media (max-width: 640px) {
    #dmc-quote-modal {
        padding: 0.75rem;
    }

    #dmc-quote-modal .dmc-modal-content {
        max-height: calc(100vh - 1.5rem);
        border-radius: 14px;
    }

    #dmc-quote-modal #dmc-quote-form {
        gap: 0.875rem;
    }

    /* One column: two 1fr columns squeezed the selects and date unreadably. */
    #dmc-quote-modal .dmc-form-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.875rem 0;
    }

    #dmc-quote-modal .dmc-form-group-full {
        grid-column: span 1;
    }

    #dmc-quote-modal .dmc-form-group > label {
        font-size: 14px;
        margin-bottom: 0.25rem;
    }

    #dmc-quote-modal .dmc-form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    #dmc-quote-modal .dmc-form-group select,
    #dmc-quote-modal .dmc-form-group textarea,
    #dmc-quote-modal .dmc-select {
        padding: 0.6875rem 0.875rem;
        /* 16px stops iOS Safari zooming the page when a control is tapped. */
        font-size: 16px;
        border-radius: 9px;
    }

    #dmc-quote-modal .dmc-select-option {
        font-size: 16px;
        padding: 0.6875rem 0.875rem;
    }

    #dmc-quote-modal .dmc-form-group textarea {
        min-height: 104px;
    }

    #dmc-quote-modal .dmc-modal-header {
        margin-bottom: 0;
        padding: 1.125rem 1.25rem 0.875rem;
    }

    #dmc-quote-modal .dmc-modal-title {
        font-size: 17px;
        line-height: 1.3;
    }

    #dmc-quote-modal .dmc-modal-body {
        padding: 1.125rem 1.25rem 1.25rem;
    }

    /* No padding here: the body already insets the form, and this padding was
       shrinking the full-width button away from the edges. */
    #dmc-quote-modal .dmc-modal-actions {
        padding: 0;
        margin-top: 0;
    }

    #dmc-quote-modal .dmc-btn-block {
        width: 100%;
        padding: 0.875rem 1rem;
        font-size: 15px;
    }

    #dmc-quote-modal .dmc-form-consent {
        align-items: center;
        gap: 0;
        font-size: 14px;
    }

    #dmc-quote-modal .dmc-form-consent input[type="checkbox"] {
        margin: 0 0.5rem 0 0;
    }
}