/*
===============================================================================
 FILE: /css/contact-modal.css
 VERSION: 3.9
 PROJECT: ОКНА ORIGINAL — универсальная форма обратной связи
 DATE: 2026-08-31

 CHANGES v3.9:
 - адаптивное модальное окно в стиле сайта;
 - фирменные REHAU-акценты #E32636 / #4ECDC4 / #363636;
 - стили отправки, ошибок и успешного подтверждения.
===============================================================================
*/
:root{
    --contact-red:#E32636;
    --contact-turquoise:#4ECDC4;
    --contact-anthracite:#363636;
    --contact-ink:#172231;
    --contact-muted:#687789;
    --contact-line:#dfe7ee;
}

body.contact-modal-open{overflow:hidden}

.contact-modal[hidden]{display:none!important}
.contact-modal{
    position:fixed;
    inset:0;
    z-index:10000;
    display:grid;
    place-items:center;
    padding:22px;
}
.contact-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(7,16,25,.72);
    backdrop-filter:blur(8px);
    animation:contactFade .2s ease both;
}
.contact-modal__dialog{
    position:relative;
    z-index:1;
    width:min(100%,560px);
    max-height:min(92vh,760px);
    overflow:auto;
    border:1px solid rgba(255,255,255,.45);
    border-radius:28px;
    background:#fff;
    box-shadow:0 30px 90px rgba(5,17,29,.34);
    animation:contactRise .28s cubic-bezier(.2,.72,.22,1) both;
}
.contact-modal__brand-line{
    position:absolute;
    inset:0 0 auto;
    height:5px;
    background:linear-gradient(90deg,var(--contact-red) 0 33.333%,var(--contact-turquoise) 33.333% 66.666%,var(--contact-anthracite) 66.666%);
}
.contact-modal__close{
    position:absolute;
    z-index:3;
    top:18px;
    right:18px;
    width:42px;
    height:42px;
    border:1px solid var(--contact-line);
    border-radius:50%;
    background:rgba(255,255,255,.94);
    cursor:pointer;
    transition:.2s ease;
}
.contact-modal__close:hover{transform:rotate(5deg);border-color:#c9d6e1;background:#f7fafc}
.contact-modal__close span{position:absolute;top:20px;left:12px;width:18px;height:2px;border-radius:3px;background:#26384a}
.contact-modal__close span:first-child{transform:rotate(45deg)}
.contact-modal__close span:last-child{transform:rotate(-45deg)}
.contact-modal__content{padding:45px 44px 38px}
.contact-modal__head{padding-right:42px}
.contact-modal__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#5d7185;
    font-size:10px;
    font-weight:900;
    letter-spacing:.13em;
}
.contact-modal__eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--contact-turquoise)}
.contact-modal h2{margin:9px 0 8px;color:var(--contact-ink);font-size:clamp(30px,5vw,42px);line-height:1.02;letter-spacing:-.035em}
.contact-modal__head>p{margin:0;color:var(--contact-muted);font-size:14px;line-height:1.6}
.contact-modal__request{
    display:inline-flex;
    margin-top:16px;
    padding:7px 11px;
    border:1px solid rgba(78,205,196,.35);
    border-radius:999px;
    background:rgba(78,205,196,.09);
    color:#176d68;
    font-size:11px;
    font-weight:800;
}
.contact-form{display:grid;gap:15px;margin-top:25px}
.contact-field{display:grid;gap:7px}
.contact-field>span{color:#394d60;font-size:12px;font-weight:800}
.contact-field em{color:var(--contact-red);font-style:normal}
.contact-field input,.contact-field textarea{
    width:100%;
    box-sizing:border-box;
    border:1px solid var(--contact-line);
    border-radius:14px;
    outline:0;
    background:#f9fbfc;
    color:var(--contact-ink);
    font:inherit;
    font-size:15px;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.contact-field input{height:50px;padding:0 15px}
.contact-field textarea{min-height:92px;padding:13px 15px;resize:vertical;line-height:1.5}
.contact-field input:focus,.contact-field textarea:focus{border-color:var(--contact-turquoise);background:#fff;box-shadow:0 0 0 4px rgba(78,205,196,.11)}
.contact-field input.is-invalid{border-color:var(--contact-red);box-shadow:0 0 0 4px rgba(227,38,54,.08)}
.contact-consent{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;color:#718092;font-size:11px;line-height:1.45;cursor:pointer}
.contact-consent input{width:16px;height:16px;margin-top:1px;accent-color:#398e94}
.contact-consent a{color:#426177}
.contact-form__message{min-height:0;color:var(--contact-red);font-size:12px;font-weight:700;line-height:1.4}
.contact-form__message:empty{display:none}
.contact-form__submit{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    min-height:52px;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg,#325f79,#398e94);
    color:#fff;
    font:inherit;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 12px 26px rgba(57,142,148,.18);
    transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
}
.contact-form__submit:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(57,142,148,.24)}
.contact-form__submit:disabled{cursor:wait;opacity:.72;transform:none}
.contact-form__spinner{display:none;width:15px;height:15px;border:2px solid rgba(255,255,255,.38);border-top-color:#fff;border-radius:50%;animation:contactSpin .7s linear infinite}
.contact-form.is-loading .contact-form__spinner{display:block}
.contact-form__footnote{margin:-3px 0 0;text-align:center;color:#8b98a5;font-size:10px}
.contact-form__honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact-modal__success{padding:62px 44px 48px;text-align:center}
.contact-success__icon{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 20px;border-radius:50%;background:rgba(78,205,196,.14);color:#25827d;font-size:32px;font-weight:900}
.contact-modal__success .contact-modal__eyebrow{justify-content:center}
.contact-modal__success p{max-width:390px;margin:0 auto 25px;color:var(--contact-muted);font-size:14px;line-height:1.6}
.contact-form__submit--secondary{max-width:220px;margin:0 auto;background:#1d3042;box-shadow:none}

@keyframes contactFade{from{opacity:0}to{opacity:1}}
@keyframes contactRise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes contactSpin{to{transform:rotate(360deg)}}

@media(max-width:620px){
    .contact-modal{padding:10px}
    .contact-modal__dialog{border-radius:22px;max-height:95vh}
    .contact-modal__content{padding:40px 22px 26px}
    .contact-modal__success{padding:58px 24px 36px}
    .contact-modal__close{top:13px;right:13px}
    .contact-modal__head{padding-right:36px}
}

@media(prefers-reduced-motion:reduce){
    .contact-modal__backdrop,.contact-modal__dialog,.contact-form__spinner{animation:none}
}