/* ══════════════════════════════════════════════════════════════════════════
   eStorePoint — Contact Us (contact.php).
   Loaded by contact.php ($head_css = ['contact'], $foot_js = ['contact']).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── "What happens after you write" strip ──────────────────────────────── */
.contact-promises{padding-top:44px;padding-bottom:0;}
.promise-row{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;
}
.promise{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:1.1rem 1.15rem;border-radius:18px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.promise-ico{
  flex:none;width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center;
  background:var(--green-50);color:var(--green-600);
}
.promise-body{display:flex;flex-direction:column;gap:.22rem;min-width:0;}
.promise-body b{font-size:.95rem;color:var(--green-900);font-weight:700;line-height:1.3;}
.promise-sub{font-size:.83rem;color:var(--muted);line-height:1.5;}

/* ── Form card ─────────────────────────────────────────────────────────── */
.contact-card-title{font-size:1.35rem;margin:0 0 .3rem;}
.contact-card-lead{margin:0 0 1.2rem;}

.contact-legal-note{
  margin:.8rem 0 0;font-size:.8rem;color:var(--muted);line-height:1.55;
}

/* ── Inline field validation ─────────────────────────────────────────────
   The form is novalidate, so the browser's own bubbles are off and these
   messages are the only signal. `hidden` has to be restated: a later
   `display` declaration on the same selector would otherwise win and leave
   every error permanently visible. */
.field-err{
  margin:.35rem 0 0;font-size:.78rem;font-weight:600;color:#c0392b;
}
.field-err[hidden]{display:none;}
.field.is-invalid > input,
.field.is-invalid > textarea{
  border-color:#e0736a;
  box-shadow:0 0 0 4px rgba(192,57,43,.10);
}
.field.is-invalid > label{color:#c0392b;}

/* ── Subject quick-picks ─────────────────────────────────────────────────
   They prefill rather than select: the input stays a normal text field so
   the user can still type anything at all. */
.subj-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem;}
.subj-chip{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  font-family:inherit;font-size:.76rem;font-weight:600;line-height:1;
  padding:.4rem .7rem;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--muted);
  transition:border-color .15s,color .15s,background .15s,transform .15s;
}
.subj-chip:hover{border-color:var(--green-500);color:var(--green-700);background:var(--green-50);}
.subj-chip:active{transform:translateY(1px);}
.subj-chip:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(29,153,65,.18);}
.subj-chip.is-active{
  border-color:var(--green-600);background:var(--green-600);color:#fff;
}

/* ── Message counter ───────────────────────────────────────────────────── */
.msg-meta{
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;margin-top:.4rem;flex-wrap:wrap;
}
.msg-meta .field-err{margin:0;}
.msg-count{
  margin-left:auto;font-size:.76rem;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;   /* stops the digits jittering */
}
.msg-count.is-warn{color:#b45309;}
.msg-count.is-full{color:#c0392b;}

/* ── "Before you write" quick links ────────────────────────────────────── */
.contact-quicklinks{list-style:none;margin:.6rem 0 .9rem;padding:0;display:flex;flex-direction:column;gap:.1rem;}
.contact-quicklinks a{
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem .6rem;margin:0 -.6rem;border-radius:10px;
  font-size:.88rem;font-weight:600;color:var(--green-700);
  text-decoration:none;transition:background .15s;
}
.contact-quicklinks a svg{flex:none;opacity:.7;}
.contact-quicklinks a:hover{background:var(--green-50);color:var(--green-800);}
.contact-quicklinks a:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(29,153,65,.18);}
/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:820px){
  .promise-row{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:640px){
  .contact-promises{padding-top:32px;}
  .promise{padding:.95rem 1rem;}
  .subj-chip{font-size:.78rem;padding:.45rem .75rem;}
}