/* ==========================================================================
   WebClixs - enquiry modal
   The "Get Instant Query" popup, shared by every page on the site: the v2
   service pages pull it in through includes/service-v2-head.php, the older
   pages link it directly. It used to live in css/service-v2.css, which only
   the v2 pages load - moving it here is what let the rest of the site use the
   same modal instead of the old red #popup block still sitting in style.css.

   Sizing note: every measurement here is deliberately tight. The first cut ran
   1060x669 on a laptop, which is most of a 900px-tall viewport for a
   seven-field form. It is now ~760x460 - about half the area - and the field
   pairs stay two-up at every width, phones included, so the form never turns
   into a fourteen-row column.
   ========================================================================== */

/* The v2 pages define these on body.svbody, but the older pages have no such
   hook, so the modal carries its own copy. Custom properties resolve from the
   nearest ancestor that sets them, so this wins inside the modal either way
   and the two definitions cannot drift apart in what they render. */
.sv-modal,
.sv-modal-shade {
    --sv-red: #c21500;
    --sv-red-dark: #8f1000;
    --sv-ink: #171210;
    --sv-head: #1c1613;
    --sv-body: #5d5551;
    --sv-line: #e9e2df;
    --sv-ease: cubic-bezier(.22, .61, .36, 1);
}

body.sv-modal-open {
    overflow: hidden;
}

.sv-modal-shade {
    position: fixed;
    inset: 0;
    background: rgba(23, 18, 16, .62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    z-index: 999998;
    transition: opacity .3s var(--sv-ease), visibility .3s var(--sv-ease);
}

.sv-modal-shade.is-open {
    opacity: 1;
    visibility: visible;
}

.sv-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 999999;
    display: grid;
    grid-template-columns: 265px 1fr;
    width: 94%;
    max-width: 760px;
    max-height: 92vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(23, 18, 16, .34);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(.96);
    transition: opacity .32s var(--sv-ease), transform .32s var(--sv-ease), visibility .32s var(--sv-ease);
}

.sv-modal.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.sv-modal *,
.sv-modal *:before,
.sv-modal *:after {
    box-sizing: border-box;
}

/* close ------------------------------------------------------------------ */

.sv-modal-x {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 15px;
    color: var(--sv-head);
    background: #f1eae8;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: all .25s var(--sv-ease);
}

.sv-modal-x:hover,
.sv-modal-x:focus-visible {
    color: #fff;
    background: var(--sv-red);
    transform: rotate(90deg);
}

/* left panel ------------------------------------------------------------- */

.sv-modal-aside {
    position: relative;
    padding: 30px 26px;
    background: linear-gradient(158deg, #fdeeeb 0%, #fff7f5 52%, #fce9e5 100%);
    overflow: hidden;
}

/* Faint contour lines top and bottom. Inlined as a data URI rather than an
   image file so the modal stays a two-file change: markup plus this block. */
.sv-modal-aside:before,
.sv-modal-aside:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 160px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23c21500' stroke-opacity='0.16' stroke-width='1.4'%3E%3Cpath d='M-20 30 C 60 -10 140 70 220 30 S 380 -10 440 40'/%3E%3Cpath d='M-20 55 C 60 15 140 95 220 55 S 380 15 440 65'/%3E%3Cpath d='M-20 80 C 60 40 140 120 220 80 S 380 40 440 90'/%3E%3Cpath d='M-20 105 C 60 65 140 145 220 105 S 380 65 440 115'/%3E%3Cpath d='M-20 130 C 60 90 140 170 220 130 S 380 90 440 140'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.sv-modal-aside:before {
    top: 0;
}

.sv-modal-aside:after {
    bottom: 0;
    transform: scale(-1);
}

.sv-modal-aside > * {
    position: relative;
    z-index: 1;
}

.sv-modal-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    font-size: 19px;
    color: var(--sv-red);
    background: #fff;
    border: solid 2px var(--sv-red);
    border-radius: 48% 52% 44% 56% / 54% 46% 54% 46%;
    box-shadow: 0 8px 18px rgba(194, 21, 0, .12);
}

.sv-modal-aside h3 {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.4px;
    color: var(--sv-head);
}

.sv-modal-aside h3 em {
    display: block;
    font-style: normal;
    color: var(--sv-red);
}

.sv-modal-rule {
    display: block;
    width: 38px;
    height: 3px;
    margin: 14px 0 16px;
    background: var(--sv-red);
    border-radius: 2px;
}

.sv-modal-aside p {
    margin: 0 0 16px;
    font-family: "Open Sans", sans-serif;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--sv-body);
}

.sv-modal-usp {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv-modal-usp li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sv-head);
}

.sv-modal-usp li:last-child {
    margin-bottom: 0;
}

.sv-modal-usp span {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 12px;
    color: var(--sv-red);
    background: #fbdfda;
    border-radius: 50%;
}

/* right panel ------------------------------------------------------------ */

.sv-modal-main {
    padding: 30px 30px 32px;
    max-height: 92vh;
    overflow-y: auto;
    font-family: "Open Sans", sans-serif;
}

.sv-modal-main h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding-right: 40px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(16px, 1.6vw, 19px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.25;
    color: var(--sv-head);
}

.sv-modal-main h4 i {
    font-size: 21px;
    color: var(--sv-red);
}

.sv-modal-req {
    margin: 7px 0 16px;
    font-size: 12.5px;
    color: var(--sv-body);
}

.sv-modal-req b {
    color: var(--sv-red);
    font-weight: 600;
}

/* Two up at every width. On a phone this is what keeps the form from turning
   into a fourteen-row column the user has to scroll past. */
.sv-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

/* fields ----------------------------------------------------------------- */

.sv-fld {
    position: relative;
    display: block;
}

.sv-fld-wide {
    grid-column: 1 / -1;
}

.sv-fld > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--sv-red);
    pointer-events: none;
}

.sv-fld-wide > i {
    top: 15px;
    transform: none;
}

.sv-fld input,
.sv-fld textarea {
    width: 100%;
    padding: 11px 12px 11px 38px;
    font-family: "Open Sans", sans-serif;
    font-size: 13.5px;
    color: var(--sv-ink);
    background: #fff;
    border: solid 1.5px var(--sv-line);
    border-radius: 8px;
    outline: none;
    transition: border-color .25s var(--sv-ease), box-shadow .25s var(--sv-ease);
}

.sv-fld textarea {
    min-height: 92px;
    line-height: 1.65;
    resize: vertical;
}

.sv-fld input::placeholder,
.sv-fld textarea::placeholder {
    color: #9b908c;
    opacity: 1;
}

.sv-fld input:focus,
.sv-fld textarea:focus {
    border-color: var(--sv-red);
    box-shadow: 0 0 0 3px rgba(194, 21, 0, .1);
}

/* submit ----------------------------------------------------------------- */

.sv-modal-send {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(100deg, var(--sv-red) 0%, var(--sv-red-dark) 100%);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(194, 21, 0, .24);
    transition: transform .3s var(--sv-ease), box-shadow .3s var(--sv-ease);
}

.sv-modal-send:hover,
.sv-modal-send:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(194, 21, 0, .32);
}

.sv-modal-send i {
    font-size: 15px;
}

.sv-modal-safe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--sv-body);
}

.sv-modal-safe i {
    color: var(--sv-red);
}

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

/* The side-by-side layout needs ~265px for the panel plus room for two field
   columns. Below this the panels stack, but the field pairs stay two-up. */
@media screen and (max-width: 760px) {
    .sv-modal {
        grid-template-columns: 1fr;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* The right pane owns the scroll on the wide layout; once the panels
       stack, the modal itself has to, or the inner scroller traps the form. */
    .sv-modal-main {
        max-height: none;
        overflow: visible;
        padding: 24px 20px 26px;
    }

    /* Stacked full-height, the panel pushed the first field most of a screen
       down. It collapses to a compact header instead: badge beside the title,
       supporting copy dropped, the three promises on one wrapping row. */
    .sv-modal-aside {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "badge title"
            "rule  rule"
            "usp   usp";
        align-items: center;
        gap: 0 14px;
        padding: 22px 20px;
    }

    .sv-modal-badge {
        grid-area: badge;
        width: 46px;
        height: 46px;
        margin-bottom: 0;
        font-size: 18px;
    }

    .sv-modal-aside h3 {
        grid-area: title;
        /* The close button sits over this corner once the panels stack, so the
           title has to wrap before it rather than run underneath. */
        padding-right: 40px;
        font-size: 19px;
    }

    .sv-modal-rule {
        grid-area: rule;
        margin: 14px 0;
    }

    /* Stacked, this paragraph is pure scroll cost between the heading and the
       form the modal exists for. It stays on the side-by-side layout. */
    .sv-modal-aside p {
        display: none;
    }

    .sv-modal-usp {
        grid-area: usp;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .sv-modal-usp li {
        margin-bottom: 0;
        font-size: 12px;
    }

    .sv-modal-usp span {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    /* Half-width fields on a phone leave very little room for the placeholder,
       so the icon gutter and the type both come in. */
    .sv-modal-grid {
        gap: 10px;
    }

    .sv-fld > i {
        left: 12px;
        font-size: 12px;
    }

    .sv-fld input,
    .sv-fld textarea {
        padding: 10px 10px 10px 32px;
        font-size: 13px;
    }

    .sv-fld textarea {
        min-height: 80px;
    }

    .sv-fld-wide > i {
        top: 13px;
    }

    .sv-modal-send {
        padding: 13px;
        font-size: 13px;
    }

    .sv-modal-safe {
        font-size: 11.5px;
        line-height: 1.5;
        text-align: center;
    }
}

/* Narrow phones: "Company Name *" is the longest placeholder and it has to
   survive in a half-width field, so the padding gives up what is left. */
@media screen and (max-width: 380px) {
    .sv-modal-main {
        padding: 22px 14px 24px;
    }

    .sv-modal-aside {
        padding: 20px 14px;
    }

    .sv-modal-grid {
        gap: 8px;
    }

    .sv-fld > i {
        left: 10px;
        font-size: 11px;
    }

    .sv-fld input,
    .sv-fld textarea {
        padding: 10px 8px 10px 28px;
        font-size: 12.5px;
    }
}

/* The open/close transition is a transform, and the reduced-motion block above
   only reaches inside .svpage. The modal sits outside it, so it opts out here. */
@media (prefers-reduced-motion: reduce) {
    .sv-modal,
    .sv-modal-shade {
        transition-duration: .001ms;
    }

    .sv-modal,
    .sv-modal.is-open {
        transform: translate(-50%, -50%);
    }
}