/* ============================================================
   JPMate — contact page (form + side panel)
   Loads on top of legal.css (shares brand tokens & nav/footer).
   ============================================================ */

.contact-wrap{ max-width:1000px; padding-bottom:64px; }
.contact-grid{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:28px; margin-top:36px; align-items:start;
}

/* ---- form card ---- */
.cform{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:30px 30px 26px; box-shadow:0 1px 2px rgba(20,28,48,.04), 0 18px 40px rgba(20,28,48,.06);
}
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:block; margin-bottom:16px; }
.field .lbl{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.3px;
  color:var(--ink); margin-bottom:7px;
}
.cform input[type=text],
.cform input[type=email],
.cform textarea,
.cform select{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:#fbfaf7; border:1.5px solid var(--line); border-radius:12px;
  padding:12px 14px; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  -webkit-appearance:none; appearance:none;
}
.cform textarea{ resize:vertical; min-height:130px; line-height:1.55; }
.cform input::placeholder,
.cform textarea::placeholder{ color:var(--muted); }
.cform input:focus,
.cform textarea:focus,
.cform select:focus{
  outline:none; border-color:var(--jp); background:#fff;
  box-shadow:0 0 0 4px rgba(23,109,138,.12);
}
.cform input:user-invalid,
.cform textarea:user-invalid{ border-color:#e3624a; box-shadow:0 0 0 4px rgba(227,98,74,.12); }

/* custom select chevron */
.selwrap{ position:relative; }
.selwrap::after{
  content:""; position:absolute; right:16px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.cform select{ cursor:pointer; padding-right:38px; }

/* honeypot — visually & SR hidden, off-screen (not display:none so bots fill it) */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

/* turnstile widget spacing */
.cf-turnstile{ margin:4px 0 18px; min-height:65px; }

/* submit button */
.cbtn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--primary); color:#fff; font-family:inherit; font-size:15px; font-weight:700;
  border:none; border-radius:12px; padding:13px 26px; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.cbtn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(99,102,241,.34); }
.cbtn:active{ transform:translateY(0); }
.cbtn[disabled]{ opacity:.62; cursor:default; transform:none; box-shadow:none; }
.cbtn-spin{
  width:16px; height:16px; border-radius:50%; display:none;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:cspin .7s linear infinite;
}
.cform.sending .cbtn-spin{ display:inline-block; }
.cform.sending .cbtn{ pointer-events:none; opacity:.7; }
@keyframes cspin{ to{ transform:rotate(360deg); } }

/* status + fine print */
.cform-status{
  margin-top:16px; font-size:14.5px; font-weight:600; line-height:1.5;
  border-radius:12px; padding:0; max-height:0; overflow:hidden;
  opacity:0; transform:translateY(-4px);
  transition:opacity .25s ease, transform .25s ease, max-height .25s ease, padding .25s ease;
}
.cform-status.show{ opacity:1; transform:none; max-height:200px; padding:12px 14px; }
.cform-status.ok{ background:#e9f6ef; color:#15795a; border:1px solid #bfe6d3; }
.cform-status.err{ background:#fdecea; color:#b23a26; border:1px solid #f3c9c0; }
.cform-status.info{ background:#eef2fb; color:#3f49b8; border:1px solid #d2d9f4; }
.cform-fine{ margin-top:16px; font-size:12.5px; color:var(--muted); line-height:1.5; }
.cform-fine a{ color:var(--jp); }

/* ---- side panel ---- */
.cside{ display:flex; flex-direction:column; gap:16px; }
.cside-card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 22px; }
.cside-card h2{ font-size:13px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.cmeans{ display:flex; align-items:center; gap:13px; text-decoration:none; padding:10px 0; transition:transform .15s ease; }
.cmeans + .cmeans{ border-top:1px solid var(--line-soft, #f1f1f3); }
.cmeans:hover{ transform:translateX(2px); }
.cm-ic{
  flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:#eaf2f5; color:var(--jp);
}
.cm-ic svg{ width:19px; height:19px; }
.cm-t{ display:block; font-size:14.5px; font-weight:700; color:var(--ink); }
.cm-d{ display:block; font-size:13.5px; color:var(--ink2); }
.cside-note p{ font-size:14.5px; color:var(--ink2); line-height:1.6; }
.cside-note a{ color:var(--jp); text-decoration:underline; text-underline-offset:2px; }

/* ---- responsive ---- */
@media(max-width:820px){
  .contact-grid{ grid-template-columns:1fr; gap:22px; }
  .cside{ order:2; }
}
@media(max-width:520px){
  .cform{ padding:22px 18px 22px; border-radius:16px; }
  .frow{ grid-template-columns:1fr; gap:0; }
  .cbtn{ width:100%; }
  .contact-wrap{ padding-left:20px; padding-right:20px; }
}
@media(prefers-reduced-motion:reduce){
  .cbtn-spin{ animation:none; }
  .cform-status{ transition:none; }
  .cmeans, .cbtn{ transition:none; }
}