/* =========================================================
   Estimate popup modal
   Loaded separately from main.css so it can be dropped into
   any theme without pulling in the rest of the design system.
   Relies on the same CSS custom properties defined in style.css
   (--color-purple, --color-navy, --color-line, etc.) — if you're
   integrating this into a different theme, either copy those
   :root variables too, or replace var(--color-*) below with
   literal color values.
   ========================================================= */

.estimate-modal-overlay{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 20, 43, 0.72);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.estimate-modal-overlay[hidden]{
    display: flex; /* keep display:flex so the closing transition can play */
    pointer-events: none;
}

.estimate-modal-overlay.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.estimate-modal{
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    padding: 40px 32px 32px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    transform: translateY(24px) scale(.97);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}

.estimate-modal-overlay.is-open .estimate-modal{
    transform: translateY(0) scale(1);
}

.estimate-modal-close{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--color-mist, #f5f4f8);
    color: var(--color-navy, #14142b);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
}
.estimate-modal-close:hover{ background: var(--color-line, #e4e1ec); }

.estimate-modal-header h2{
    font-family: 'Manrope', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 24px;
    margin: 0 0 8px;
    color: var(--color-navy, #14142b);
    padding-right: 32px;
}
.estimate-modal-header p{
    font-size: 14.5px;
    color: #63636f;
    margin: 0 0 24px;
}

/* Contact Form 7 field styling (also applies to the theme's fallback form) */
.estimate-modal-body .wpcf7-form,
.estimate-modal-body .cube-fallback-form{
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.estimate-modal-body input[type="text"],
.estimate-modal-body input[type="email"],
.estimate-modal-body input[type="tel"],
.estimate-modal-body select,
.estimate-modal-body textarea{
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-line, #e4e1ec);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}
.estimate-modal-body textarea{ min-height: 100px; resize: vertical; }
.estimate-modal-body input:focus,
.estimate-modal-body select:focus,
.estimate-modal-body textarea:focus{
    outline: none;
    border-color: var(--color-purple, #5b2e8c);
    box-shadow: 0 0 0 3px rgba(91,46,140,.15);
}
.estimate-modal-body .wpcf7-submit,
.estimate-modal-body button[type="submit"]{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 8px;
    border: none;
    background: var(--color-purple, #5b2e8c);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background-color .15s ease;
}
.estimate-modal-body .wpcf7-submit:hover,
.estimate-modal-body button[type="submit"]:hover{
    background: var(--color-purple-dark, #3d1f63);
}

/* CF7's own validation / response messaging */
.estimate-modal-body .wpcf7-response-output{
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    border: 1px solid var(--color-line, #e4e1ec);
}
.estimate-modal-body form.sent .wpcf7-response-output{
    border-color: var(--color-green, #6fa23c);
    color: var(--color-green, #6fa23c);
}
.estimate-modal-body form.invalid .wpcf7-response-output,
.estimate-modal-body form.failed .wpcf7-response-output{
    border-color: #c0392b;
    color: #c0392b;
}
.estimate-modal-body .wpcf7-not-valid-tip{
    color: #c0392b;
    font-size: 12.5px;
    margin-top: 4px;
    display: block;
}

/* Lock page scroll while the modal is open (class toggled on <body> by JS) */
body.estimate-modal-open{
    overflow: hidden;
}

@media (max-width: 480px){
    .estimate-modal{ padding: 32px 20px 24px; border-radius: 12px; }
    .estimate-modal-header h2{ font-size: 20px; }
}

@media (prefers-reduced-motion: reduce){
    .estimate-modal-overlay,
    .estimate-modal{ transition: none !important; }
}