/* =============================================================================
 * OX Smart House — CF7 message popup (success / error modal)
 * Replaces the default inline CF7 response with a branded modal.
 * Built/controlled by ox-cf7-modal.js.
 * ========================================================================== */

/* Hide CF7's default bottom summary message (we show it in the popup instead).
 * Per-field validation tips (.wpcf7-not-valid-tip) stay visible. */
.wpcf7 .wpcf7-response-output{
    position:absolute !important;
    width:1px;height:1px;
    margin:-1px;padding:0;border:0;
    clip:rect(0 0 0 0);clip-path:inset(50%);
    overflow:hidden;white-space:nowrap;
}

.ox-cf7-modal{
    --ox-m-accent:#c0e259;
    --ox-m-surface:#14160f;
    --ox-m-text:#f5f6ef;
    --ox-m-muted:#b8bdae;
    position:fixed;inset:0;z-index:999999;
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    opacity:0;visibility:hidden;
    transition:opacity .28s ease, visibility .28s ease;
    font-family:inherit;
}
.ox-cf7-modal.is-open{ opacity:1;visibility:visible; }

.ox-cf7-modal__backdrop{
    position:absolute;inset:0;
    background:rgba(3,5,3,.72);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

.ox-cf7-modal__card{
    position:relative;
    width:100%;max-width:420px;
    background:var(--ox-m-surface);
    border:1px solid rgba(192,226,89,.28);
    border-radius:18px;
    padding:40px 32px 34px;
    text-align:center;
    box-shadow:0 24px 70px rgba(0,0,0,.55);
    transform:translateY(14px) scale(.96);
    opacity:0;
    transition:transform .32s cubic-bezier(.16,1,.3,1), opacity .32s ease;
}
.ox-cf7-modal.is-open .ox-cf7-modal__card{ transform:translateY(0) scale(1);opacity:1; }

.ox-cf7-modal__close{
    position:absolute;top:14px;right:14px;
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    background:transparent;border:0;border-radius:50%;
    color:var(--ox-m-muted);cursor:pointer;
    transition:color .2s ease, background .2s ease;
}
.ox-cf7-modal__close:hover{ color:var(--ox-m-text);background:rgba(255,255,255,.06); }
.ox-cf7-modal__close svg{ width:16px;height:16px; }

.ox-cf7-modal__icon{
    width:74px;height:74px;margin:0 auto 22px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    position:relative;
}
.ox-cf7-modal__icon svg{ width:38px;height:38px;position:relative;z-index:1; }
.ox-cf7-modal__icon::after{
    content:"";position:absolute;inset:0;border-radius:50%;
    animation:ox-m-ping 1.6s ease-out .15s 1;
}

/* success */
.ox-cf7-modal[data-state="success"] .ox-cf7-modal__icon{
    background:rgba(192,226,89,.14);color:var(--ox-m-accent);
}
.ox-cf7-modal[data-state="success"] .ox-cf7-modal__icon::after{ box-shadow:0 0 0 2px rgba(192,226,89,.45); }

/* error / invalid */
.ox-cf7-modal[data-state="error"] .ox-cf7-modal__icon{
    background:rgba(255,107,107,.14);color:#ff8585;
}
.ox-cf7-modal[data-state="error"] .ox-cf7-modal__icon::after{ box-shadow:0 0 0 2px rgba(255,107,107,.4); }

.ox-cf7-modal__msg{
    margin:0;color:var(--ox-m-text);
    font-size:16px;line-height:1.55;font-weight:500;
}

/* auto-dismiss progress bar (success only) */
.ox-cf7-modal__bar{
    position:absolute;left:0;bottom:0;height:3px;width:100%;
    border-radius:0 0 18px 18px;overflow:hidden;
    background:transparent;
}
.ox-cf7-modal__bar span{
    display:block;height:100%;width:100%;
    background:var(--ox-m-accent);
    transform-origin:left center;
    transform:scaleX(0);
}
.ox-cf7-modal.is-counting .ox-cf7-modal__bar span{
    animation:ox-m-countdown var(--ox-m-timeout,4500ms) linear forwards;
}

@keyframes ox-m-countdown{ from{transform:scaleX(1);} to{transform:scaleX(0);} }
@keyframes ox-m-ping{ from{opacity:.9;transform:scale(1);} to{opacity:0;transform:scale(1.5);} }

/* SVG check / cross draw-in */
.ox-cf7-modal__icon svg path,
.ox-cf7-modal__icon svg polyline,
.ox-cf7-modal__icon svg line{
    stroke-dasharray:48;stroke-dashoffset:48;
    animation:ox-m-draw .5s ease .18s forwards;
}
@keyframes ox-m-draw{ to{stroke-dashoffset:0;} }

@media (max-width:480px){
    .ox-cf7-modal__card{ padding:34px 22px 28px;border-radius:16px; }
    .ox-cf7-modal__msg{ font-size:15px; }
}

@media (prefers-reduced-motion:reduce){
    .ox-cf7-modal,.ox-cf7-modal__card,.ox-cf7-modal__icon::after,
    .ox-cf7-modal__icon svg path,.ox-cf7-modal__bar span{ animation:none !important;transition:opacity .15s ease !important; }
    .ox-cf7-modal__icon svg path,.ox-cf7-modal__icon svg polyline{ stroke-dashoffset:0; }
}