/* ----------------------------------------------------------
   NikoC — Contactmodal (includes/contact-modal.php)

   Eén bron voor alle modules. Stond eerder viervoudig gekopieerd
   in trails/style.css, 360/overview.css, assets/css/stories.css en
   inline in index.php — die kopieën zijn verwijderd.

   Kleuren komen uit de per-module CSS-variabelen. Sommige modules
   gebruiken --fog-2, andere --muted voor dezelfde grijstint; de
   fallback in var() vangt dat op zonder de modules aan te passen.
---------------------------------------------------------- */

.cm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;z-index:5000;padding:20px}
.cm-overlay.open{display:flex}

.cm-panel{width:min(440px,100%);max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--ink-2);border:1px solid var(--line-l,rgba(240,237,230,.15));
  border-radius:8px;padding:28px;position:relative}

.cm-close{position:absolute;top:14px;right:14px;background:none;border:none;
  color:var(--fog-2,var(--muted,#8C9185));font-size:20px;line-height:1;cursor:pointer;
  padding:4px;min-width:32px;min-height:32px}
.cm-close:hover{color:var(--paper)}

.cm-eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.cm-title{font-family:'Playfair Display',serif;font-size:24px;color:var(--paper);margin-bottom:20px}

.cm-field{display:block;margin-bottom:14px}
.cm-lbl{display:block;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fog-2,var(--muted,#8C9185));margin-bottom:6px}

.cm-field input,.cm-field textarea,.cm-field select{width:100%;
  background:var(--ink-3);border:1px solid var(--line-l,rgba(240,237,230,.15));border-radius:4px;
  padding:9px 12px;font-family:'Barlow',sans-serif;font-size:13px;font-weight:300;
  color:var(--paper);outline:none;transition:border-color .15s;resize:vertical}
.cm-field input:focus,.cm-field textarea:focus,.cm-field select:focus{border-color:rgba(200,168,75,.4)}

/* Select: eigen pijl, want de native pijl is onleesbaar op donker */
.cm-field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C9185' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.cm-field select option{background:var(--ink-2);color:var(--paper)}

.cm-honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.cm-submit{width:100%;padding:11px;background:var(--gold);color:var(--ink);border:none;
  border-radius:999px;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .15s;min-height:44px}
.cm-submit:hover{background:var(--gold-l,var(--gold-d,#D8BC6A))}
.cm-submit:disabled{opacity:.5;cursor:not-allowed}

.cm-status{font-size:12px;margin-top:12px;text-align:center;min-height:16px}
.cm-status.ok{color:var(--moss-l)}
.cm-status.err{color:#C0392B}