/* ===================== Contact Modal — Glassy, Modern (scoped) ===================== */
.contact-modal{
    --panel: rgba(17,25,40,.62);
    --panel-2: rgba(17,25,40,.52);
    --outline: rgba(255,255,255,.14);
    --text: #e7eaf7;
    --muted:#a6b2c7;
    --primary-a:#2563eb;
    --primary-b:#6d28d9;
    --radius:14px;

    position: relative;
    width: min(720px, 92vw);
    margin: 0 auto;
    border-radius: var(--radius);
    border: 1px solid var(--outline);
    padding: 16px;
    color: var(--text);
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
      var(--panel);
    box-shadow: 0 24px 64px rgba(2,8,20,.45), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
}

.contact-modal::before{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background:
      radial-gradient(120% 70% at -15% -20%, rgba(37,117,252,.25), transparent 60%),
      radial-gradient(120% 70% at 120% -15%, rgba(139,92,246,.25), transparent 62%);
    opacity:.45;
}

.contact-modal h2{
    margin: 0 0 8px; font-size: 1.25rem; letter-spacing:.2px;
}

.contact-modal .modal-close{
    position:absolute; top:8px; right:10px;
    width:36px; height:36px; border-radius:10px;
    border:1px solid var(--outline);
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
      var(--panel-2);
    color:var(--text); font-size:20px; line-height:1;
    display:grid; place-items:center; cursor:pointer;
    transition: filter .15s, transform .06s;
}
.contact-modal .modal-close:hover{ filter:brightness(1.06); }
.contact-modal .modal-close:active{ transform: translateY(1px); }

.contact-modal form{
    display:grid; gap: 12px; margin-top: 6px;
}

.contact-modal label{
    display:block; font-size:.95rem; color:var(--muted);
}
.contact-modal .control{
    width:100%; margin-top:6px;
    border-radius: 12px;
    border: 1px solid var(--outline);
    padding: 10px 12px;
    color: var(--text);
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
      var(--panel-2);
    outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition: box-shadow .18s, border-color .18s, background .18s;
}
.contact-modal .control:focus{
    border-color: color-mix(in oklab, var(--primary-a), white 12%);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-a), transparent 78%);
}

.contact-modal textarea.control{ min-height: 120px; resize: vertical; }

/* Buttons (harmonized with app style) */
.contact-modal .btn{
    appearance:none; border-radius:10px; padding:10px 14px;
    font-weight:700; cursor:pointer; transition: filter .15s, transform .06s, box-shadow .18s;
    border:1px solid transparent;
}
.contact-modal .btnPrimary{
    color:#fff; 
    background: linear-gradient(135deg, var(--primary-a), var(--primary-b));
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 14px 28px rgba(37,117,252,.30), inset 0 1px 0 rgba(255,255,255,.18);
}
.contact-modal .btnSecondary{
    color:#eaf1ff;
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
      var(--panel-2);
    border-color: var(--outline);
}
.contact-modal .btn:hover{ filter:brightness(1.06); }
.contact-modal .btn:active{ transform: translateY(1px); }

.contact-modal .modal-footer{
    display:flex; gap:8px; justify-content:flex-end; margin-top: 4px;
}

/* Alerts */
.contact-modal .alert{
    display:none;
}

.contact-modal .alert.error{
    padding:.75rem .9rem; border-radius:12px; border:1px solid rgba(239,68,68,.30);
    background: linear-gradient(180deg, rgba(239,68,68,.15), rgba(239,68,68,.08));
    color:#ffd7d7;
}

.contact-modal .alert.success{
    padding:.75rem .9rem; border-radius:12px; border:1px solid rgba(34,197,94,.30);
    background: linear-gradient(180deg, rgba(34,197,94,.15), rgba(34,197,94,.08));
    color:#d1fadd;
}

/* Light theme adjustments */
:root[data-theme="light"] .contact-modal{
    border-color: rgba(10,20,40,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)), #fff;
    color:#0f1527;
    box-shadow: 0 24px 64px rgba(20,30,45,.18), inset 0 1px 0 rgba(255,255,255,.9);
}
:root[data-theme="light"] .contact-modal::before{
    opacity:.55;
}
:root[data-theme="light"] .contact-modal .control{
    border-color: rgba(10,20,40,.12);
    background: linear-gradient(180deg, #fff, #f7f8fb);
    color:#0f1527;
}
:root[data-theme="light"] .contact-modal .btnSecondary{
    color:#0f172a; background: linear-gradient(180deg, #fff, #f6f7fb);
    border-color: rgba(10,20,40,.14);
}

/* Responsive tweaks */
@media (max-width: 520px){
    .contact-modal{ padding: 14px; }
    .contact-modal .modal-footer{ flex-wrap: wrap; }
}