/*
 * Quote-request modal (quote-form-modal.php).
 *
 * Self-contained: it borrows the site's color variables where they exist but
 * falls back to literals, so dropping the partial into a page needs nothing
 * else. Everything is namespaced under .quoteModal / .quoteForm to keep it
 * clear of the theme's own form styles in style.css.
 */

.quoteModal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
}

.quoteModal[hidden] {
    display: none;
}

.quoteModal-backdrop {
    position: fixed;
    inset: 0;
    /* Was .78, which dimmed the page so far toward black that a translucent
       panel on top had nothing left to show through. */
    background: rgba(9, 7, 22, .5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .25s ease;
}

.quoteModal-dialog {
    position: relative;
    width: 100%;
    max-width: 660px;
    margin: auto;
    padding: 38px 40px 32px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    /* The original panel colors (#1b1740 -> #120f28), held at 80% so the page
       shows through. Deliberately NO backdrop blur: this panel is the same navy
       as the page behind it, so a blur averages what shows through into a flat
       tone indistinguishable from solid. Left unblurred, the shapes and edges
       behind stay legible through the panel, which is what actually reads as
       transparent. */
    background: linear-gradient(160deg, rgba(27, 23, 64, .80) 0%, rgba(18, 15, 40, .80) 62%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    /* .themeBtn's hover circle is a ::before at z-index:-1. Without a stacking
       context of its own here, that circle would paint behind this dialog's
       background and the hover effect would be invisible - the button would
       just go transparent. Isolating makes the circle paint above the dialog
       background, exactly as it does against the page elsewhere. */
    isolation: isolate;
    color: var(--white, #fff);
    font-family: 'Poppins', Arial, sans-serif;
    opacity: 0;
    transform: translateY(18px) scale(.985);
    transition: opacity .25s ease, transform .25s ease;
}

.quoteModal.is-open .quoteModal-backdrop {
    opacity: 1;
}

.quoteModal.is-open .quoteModal-dialog {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------------------ head -- */

.quoteModal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.quoteModal-close:hover,
.quoteModal-close:focus-visible {
    background: var(--secondary-color, #18c0b0);
    transform: rotate(90deg);
}

.quoteModal-head {
    margin-bottom: 24px;
    padding-right: 34px;
}

.quoteModal-eyebrow {
    margin: 0 0 6px;
    color: var(--secondary-color, #18c0b0);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.quoteModal-head h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
}

.quoteModal-sub {
    margin: 0;
    color: #b9b8c9;
    font-size: 15px;
    line-height: 1.6;
}

/* ------------------------------------------------------------------ form -- */

.quoteForm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.quoteForm-field--full {
    grid-column: 1 / -1;
}

.quoteForm-field label {
    display: block;
    margin-bottom: 7px;
    color: #d7d6e2;
    font-size: 13.5px;
    font-weight: 500;
}

.quoteForm-field label span {
    color: var(--secondary-color, #18c0b0);
}

.quoteForm input,
.quoteForm select,
.quoteForm textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(255, 255, 255, .045);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.quoteForm textarea {
    min-height: 108px;
    resize: vertical;
}

/* Native arrow is lost with appearance:none, so draw one in. */
.quoteForm select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2318c0b0' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 11px;
    padding-right: 40px;
    cursor: pointer;
}

/* The dropdown list itself is drawn by the OS and ignores the dark theme,
   so give the options a readable color of their own. */
.quoteForm select option {
    background: #1b1740;
    color: #fff;
}

.quoteForm input::placeholder,
.quoteForm textarea::placeholder {
    color: #7f7d94;
}

.quoteForm input:focus,
.quoteForm select:focus,
.quoteForm textarea:focus {
    outline: none;
    border-color: var(--secondary-color, #18c0b0);
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 0 0 3px rgba(24, 192, 176, .18);
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.quoteForm-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.quoteForm .formResult {
    display: none;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.5;
}

.quoteForm-actions {
    margin-top: 24px;
}

/* Full width, to line up with the fields above it. Height, padding, color and
   the hover behavior are all left to .themeBtn. */
.quoteForm-actions .themeBtn {
    display: block;
    width: 100%;
    cursor: pointer;
}

/* .themeBtn's hover circle is sized for a compact inline button: it sits at
   left:35% and scales 6x, which spans ~430px - short of this button's ~580px,
   so the sweep would stop before both ends. Centering it and scaling further
   covers the full width. The vertical geometry is untouched (the circle grows
   downward from its own top edge), so the effect still reads exactly as it
   does on the hero button. */
.quoteForm-actions .themeBtn::before {
    left: calc(50% - 36px);
}

.quoteForm-actions .themeBtn:hover::before {
    transform: scale(10);
}

.quoteForm-actions .themeBtn[disabled] {
    opacity: .6;
    cursor: default;
}

.quoteForm-note {
    margin: 14px 0 0;
    color: #8d8ba3;
    font-size: 13px;
    text-align: center;
}

.quoteForm-note a {
    color: var(--secondary-color, #18c0b0);
}

/* Stops the page behind the modal scrolling while it is open. */
body.quoteModal-open {
    overflow: hidden;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 575px) {
    .quoteModal {
        padding: 16px 12px;
    }

    .quoteModal-dialog {
        padding: 32px 20px 24px;
        border-radius: 14px;
    }

    .quoteModal-head h2 {
        font-size: 24px;
    }

    .quoteForm-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {

    .quoteModal-backdrop,
    .quoteModal-dialog,
    .quoteModal-close {
        transition: none;
    }

    .quoteModal-dialog {
        transform: none;
    }
}