/* The Contact Us form, a popup shared by the sign-in page and the subscription plans. Its markup comes from contact.js. */
.contact-dlg{
  --signal:#1ce783; --ink:#e9f0f4; --ink-2:#a9b8c3; --ink-3:#6f8190; --rule:#24313b; --red:#ff5c5c;
  --panel:#141c23; --panel-2:#1a242c; --bg-2:#10171d;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.contact-dlg{width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:30px 30px 24px;border:1px solid var(--rule);border-radius:18px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));color:var(--ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.contact-dlg::backdrop{background:rgba(5,9,12,.72);backdrop-filter:blur(3px)}
.contact-dlg h2{margin:0 0 4px;font-size:22px;letter-spacing:-.3px}
.cf-sub{margin:0 0 20px;color:var(--ink-2);font-size:14px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:480px){ .cf-row{grid-template-columns:1fr;gap:0} }
.cf-field{display:block;margin-bottom:16px;min-width:0}
.cf-field span{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink)}
.cf-field em{font-style:normal;font-weight:500;font-size:12px;color:var(--ink-3)}
.cf-field em.over{color:var(--red)}
.cf-field input,.cf-field select,.cf-field textarea{width:100%;border-radius:10px;border:1px solid var(--rule);background:var(--bg-2);color:var(--ink);
  font:15px var(--sans);outline:none;transition:border-color .15s,box-shadow .15s}
.cf-field input,.cf-field select{height:46px;padding:0 14px}
.cf-field textarea{padding:12px 14px;resize:vertical;min-height:110px;line-height:1.45}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{border-color:var(--signal);box-shadow:0 0 0 4px rgba(28,231,131,.14)}
.cf-field select:invalid{color:var(--ink-3)}
.cf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:6px}
.cf-actions .btn{width:auto;min-width:120px;padding:0 24px}
.cf-done p{color:var(--ink-2);margin:0 0 18px}
.contact-dlg .btn{display:flex;align-items:center;justify-content:center;gap:10px;height:44px;border-radius:10px;border:0;
  font:700 15px var(--sans);cursor:pointer;transition:transform .08s,filter .15s,background .15s}
.contact-dlg .btn:active{transform:translateY(1px)}
.contact-dlg .btn[disabled]{opacity:.7;cursor:progress}
.contact-dlg .btn.primary{background:var(--signal);color:#04150c}
.contact-dlg .btn.primary:hover{filter:brightness(1.07)}
.contact-dlg .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.contact-dlg .btn.ghost:hover{background:var(--panel-2)}
.contact-dlg .err{font-size:13px;color:#ffd0d0;background:rgba(255,92,92,.12);border:1px solid rgba(255,92,92,.45);border-radius:10px;padding:10px 12px;margin:0 0 16px}
@media (prefers-reduced-motion:reduce){ .contact-dlg *{transition:none !important} }