/*
 * Enquiry popup — the "no suburb found" fallback on the Areas We Serve hero search.
 *
 * Ported from the sibling theme's Free Quote modal
 * (metrobuildsuppliers assets/css/style.css:1389-1510 and its three responsive blocks), but
 * rewritten rather than copied. Three things did not survive the move:
 *
 *   - **fancybox.** Metro's popup is `display: none` and fancybox does the showing, the panel
 *     padding and the close button (`.fancybox-content`, `.fancybox-close-small`). This theme has no
 *     fancybox and deliberately did not gain one — see decisions.md, both the 2026-08-25 gallery
 *     lightbox entry and this one. Everything fancybox supplied is in this file instead, driven by
 *     `.is-open` from assets/js/enquiry-popup.js.
 *   - **Metro's class names.** `.footer-contact__text` does not exist here, and the `.footer-contact*`
 *     classes that do are unscoped in footer.css:127-152 and coloured for the dark footer. The block
 *     carries its own `.enquiry-popup__*` names; see its docblock.
 *   - **Metro's tokens.** `--yellow` is metro's gold and has no counterpart here.
 *
 * The form inside is styled by assets/css/contact-form.css, which is scoped on `.contact-form` and
 * loads immediately before this file. Nothing here restyles a CF7 control — if a field looks wrong
 * it is wrong on the contact page too, and belongs in that file.
 */

.enquiry-popup {
    position: fixed;
    inset: 0;
    /* Above --z-search (110), the highest thing the header puts on screen. */
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
}

/* [hidden] is on the element in the markup so the popup cannot flash before the stylesheet lands;
   the script removes it. Both are needed — the attribute alone would be overridden by `display: flex`
   the moment .is-open is added, and `display: none` alone leaves it in the accessibility tree. */
.enquiry-popup[hidden] {
    display: none;
}

.enquiry-popup.is-open {
    display: flex;
}

.enquiry-popup__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
}

.enquiry-popup__box {
    position: relative;
    z-index: 1;
    width: 1130px;
    max-width: 100%;
    max-height: calc(100vh - var(--space-40));
    overflow-y: auto;
    background-color: var(--white);
    border-radius: var(--radius-md);
}

.enquiry-popup__close {
    position: absolute;
    top: var(--space-20);
    right: var(--space-20);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-round);
    cursor: pointer;
    transition: var(--transition);
}

.enquiry-popup__close:hover {
    border-color: var(--primary);
}

.enquiry-popup__close img {
    width: 14px;
    height: 14px;
}

.enquiry-popup__body {
    display: flex;
    flex-wrap: wrap;
}

/* ==========================================================================
   Left — contact details and trust factors
   ========================================================================== */

.enquiry-popup__left {
    width: calc(100% - 560px);
    padding: 50px 60px;
}

.enquiry-popup__contact-title {
    margin-bottom: var(--space-24);
}

.enquiry-popup__details {
    position: relative;
    margin: 0 0 var(--space-40);
    padding: 0 0 var(--space-40);
    list-style: none;
    border-bottom: 1px solid var(--border-color);
}

.enquiry-popup__detail {
    display: flex;
    align-items: flex-start;
    gap: var(--space-12);
}

.enquiry-popup__detail + .enquiry-popup__detail {
    margin-top: var(--space-20);
}

/* Operating Hours has no icon — see the block's docblock. Keep its text on the same left edge as
   every row above it rather than letting it slide under the icon column. */
.enquiry-popup__detail--no-icon {
    padding-left: calc(20px + var(--space-12));
}

.enquiry-popup__icon {
    flex-shrink: 0;
    width: 20px;
    height: auto;
    margin-top: 2px;
}

.enquiry-popup__label {
    margin-bottom: 3px;
    font-weight: var(--fw-semibold);
    color: var(--heading);
}

.enquiry-popup__value,
.enquiry-popup__value a {
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-color);
}

.enquiry-popup__value a:hover {
    color: var(--primary);
}

.enquiry-popup__usps {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-16);
    row-gap: var(--space-24);
    margin: 0;
    padding: 0;
    list-style: none;
}

.enquiry-popup__usp {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    width: calc(50% - var(--space-8));
    margin-bottom: 0;
}

.enquiry-popup__usp img {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.enquiry-popup__usp span {
    font-size: 15px;
    line-height: 1.3;
    color: var(--heading);
}

/* ==========================================================================
   Right — the enquiry form
   ========================================================================== */

.enquiry-popup__right {
    width: 560px;
    padding: 50px 60px;
    background-color: var(--bg-alt);
}

.enquiry-popup__intro {
    margin-bottom: var(--space-20);
}

.enquiry-popup__intro [class*="heading-"] {
    margin-bottom: var(--space-10);
}

.enquiry-popup__intro p {
    font-size: 16px;
    line-height: 1.32;
}

/* CF7 wraps every form in its own <div class="wpcf7">, which is a block box the design never drew —
   assets/css/newsletter.css carries the same note for the footer's form. */
.enquiry-popup__form .wpcf7 {
    margin: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199.98px) {
    .enquiry-popup__left,
    .enquiry-popup__right {
        padding: var(--space-40);
    }

    .enquiry-popup__right {
        width: 480px;
    }

    .enquiry-popup__left {
        width: calc(100% - 480px);
    }

    .enquiry-popup__usp span {
        font-size: 14px;
    }
}

/* The left column goes, not wraps: metro drops it at this width too. Below 992px the panel is
   roughly phone-width, and stacking contact details above the form pushes the first input off
   screen — the form is the entire point of the popup. The same details are in the page footer. */
@media (max-width: 991.98px) {
    .enquiry-popup__left {
        display: none;
    }

    .enquiry-popup__right {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .enquiry-popup {
        padding: var(--space-8);
    }

    .enquiry-popup__right {
        padding: var(--space-30) var(--space-20);
    }

    .enquiry-popup__close {
        top: var(--space-12);
        right: var(--space-12);
    }
}