/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT / FREE TRIAL MODAL
   ───────────────────────────────────────────────────────────────────────────
   A native <dialog>: showModal() gives the top layer, the backdrop, focus
   containment and Esc-to-close for free. Opened by any [data-contact] link.

   TO REMOVE: delete this file, contact.js, their two tags in index.html, the
   #contactModal dialog, and the `contact` blocks in i18n.js — then point the
   [data-contact] buttons somewhere else.
   ═══════════════════════════════════════════════════════════════════════════ */

html.cm-lock{overflow:hidden}

.cm{
  width:min(600px, calc(100% - 32px));max-height:calc(100dvh - 32px);
  margin:auto;padding:0;border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--panel);color:var(--ink);
  box-shadow:var(--shadow-lg);
  overflow:auto;overscroll-behavior:contain;
}
.cm::backdrop{
  background:rgba(13,19,26,.48);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.cm[open]{animation:cm-in .34s var(--ease-out)}
.cm[open]::backdrop{animation:cm-fade .3s linear}
@keyframes cm-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes cm-fade{from{opacity:0}to{opacity:1}}

.cm-in{position:relative;padding:clamp(24px,4vw,36px)}

.cm-x{
  position:absolute;inset-block-start:14px;inset-inline-end:14px;
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid transparent;border-radius:var(--r);
  color:var(--ink-3);background:transparent;
  transition:background-color .2s linear, color .2s linear, border-color .2s linear;
}
.cm-x:hover{background:var(--panel-2);color:var(--ink);border-color:var(--line)}

.cm-head{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;padding-inline-end:40px}
.cm-head .h-s{font-size:clamp(1.35rem,2.4vw,1.6rem)}

/* ---------- the form ---------- */
.cm-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
.cm-wide{grid-column:1 / -1}
.cm-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.cm-field label{font-size:.875rem;font-weight:600;color:var(--ink)}
.cm-field label b{color:var(--err);font-weight:600}
.cm-field label i{font-style:normal;font-weight:400;color:var(--ink-3)}

.cm-field input,
.cm-field select,
.cm-field textarea{
  width:100%;font:inherit;font-size:.9688rem;color:var(--ink);
  padding:11px 14px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--ground);
  transition:border-color .2s linear, box-shadow .2s linear;
}
.cm-field textarea{resize:vertical;min-height:88px;line-height:1.5}
.cm-field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-inline-end:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-size:5px 5px;background-repeat:no-repeat;
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%;
}
/* the options are number ranges — keep "51–200" from flipping to "200–51" */
[dir="rtl"] .cm-field select{
  direction:ltr;text-align:right;text-align-last:right;
  padding-inline:40px 14px;background-position:15px 50%, 20px 50%;
}
.cm-field input:hover,.cm-field select:hover,.cm-field textarea:hover{border-color:var(--ink-3)}
.cm-field input:focus,.cm-field select:focus,.cm-field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash-2);
}

.cm-err{display:none;font-size:.8125rem;color:var(--err-text)}
.cm-field.bad input{border-color:var(--err)}
.cm-field.bad input:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--err) 22%, transparent)}
.cm-field.bad .cm-err{display:block}

.cm-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:6px}
.cm-actions .btn{width:100%}
.cm-actions .btn[disabled]{opacity:.7;cursor:progress}
.cm-note{font-size:.8125rem;color:var(--ink-3);text-align:center}

/* ---------- sent ---------- */
.cm-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding-block:24px 8px}
.cm-done[hidden]{display:none}
.cm-tick{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px;
  color:var(--ok-text);background:var(--ok-wash);
}
.cm-done .small{max-width:38ch}
.cm-done .btn{margin-top:10px;min-width:140px}

@media (max-width:560px){
  .cm-form{grid-template-columns:minmax(0,1fr)}
  .cm{border-radius:var(--r-lg)}
}

@media (prefers-reduced-motion:reduce){
  .cm[open],.cm[open]::backdrop{animation:none}
}