/* =========================================================
   Contact Modal — CONSISTENT TYPOGRAPHY (Option A) + No Glow
   ========================================================= */

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-smooth: always; /* Safe non-standard property */
}

/* === Overlay base === */
#contactOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.55);
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Force consistent, smooth rendering for all form text */
#contactOverlay,
#contactOverlay .contact-modal,
#contactOverlay .contact-title,
#contactOverlay label,
#contactOverlay input,
#contactOverlay textarea,
#contactOverlay .thankyou {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Full-screen overlay dots */
#contactOverlay #contactOverlayDots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* === Modal shell (defaults dark) === */
#contactOverlay .contact-modal {
  position: relative;
  z-index: 1;
  width: min(680px, calc(100% - 32px));
  max-width: 680px;
  background: #0d1117;
  color: #f0f6fc;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  overflow: hidden; /* clip modal canvas to radius */
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

/* Dots inside modal */
#contactOverlay .contact-modal #contactDots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Header/body above modal dots */
#contactOverlay .contact-header,
#contactOverlay .contact-body {
  position: relative;
  z-index: 1;
}

/* Header – default dark */
#contactOverlay .contact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(145,148,158,0.8);
  background: #000000;
}

/* Title — Option A */
#contactOverlay .contact-title {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
}

#contactOverlay .contact-close {
  background: transparent;
  border: 0;
  color: #cbd5e1;
  font-size: 1.1rem;
  cursor: pointer;
}

/* Body */
#contactOverlay .contact-body {
  padding: 16px 18px 10px;
}

/* Labels — Option A */
#contactOverlay label {
  display: block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.25;
  margin-bottom: 4px;
  font-weight: 400;
}

/* Inputs / Textareas — Option A */
#contactOverlay input,
#contactOverlay textarea {
  width: 100%;
  padding: 10px 12px;
  background: #191a20;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #f0f6fc;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 400;
  caret-color: #f0f6fc;
}

/* NO GLOW: kill browser focus ring + box-shadow */
#contactOverlay input:focus,
#contactOverlay textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: #30363d; /* keep steady; no color jump */
}

/* Optional: consistent placeholder */
#contactOverlay ::placeholder {
  color: rgba(240,246,252,0.7);
}

/* Layout helpers */
#contactOverlay .form-row {
  margin-bottom: 10px;
}
#contactOverlay .form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* === Base Buttons (used by ALL themes) === */
#contactOverlay .btn-primary {
  padding: 7px 18px;
  border-radius: 10px;
  background: #1f6feb;
  border: 1px solid rgba(56,139,253,.35);
  color: #ffffff;
  font-weight: 450;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition:
    background .25s ease,
    border-color .25s ease,
    transform .2s ease,
    box-shadow .25s ease;
}
#contactOverlay .btn-primary:hover {
  background: #388bfd;
  border-color: rgba(56,139,253,.6);
  transform: translateY(-1px);
}

#contactOverlay .btn-ghost {
  padding: 7px 18px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid #30363d;
  color: #cbd5e1;
  cursor: pointer;
}

/* Thank you */
#contactOverlay .thankyou {
  margin: 12px 2px 2px;
}
.hidden {
  display: none !important;
}
#contactOverlay .cf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* =========================
   THEME: SEO (blue)
   ========================= */
#contactOverlay.contact-theme-seo .contact-modal,
#contactOverlay .contact-modal.contact-theme-seo {
  background: #0b2b7a;
  color: #ffffff;
  border-color: rgba(255,255,255,.20);
}
#contactOverlay.contact-theme-seo .contact-modal .contact-header,
#contactOverlay .contact-modal.contact-theme-seo .contact-header {
  background: #071f5e;
  border-bottom-color: rgba(255,255,255,.30);
}
/* Fields */
#contactOverlay.contact-theme-seo input,
#contactOverlay.contact-theme-seo textarea,
#contactOverlay .contact-modal.contact-theme-seo input,
#contactOverlay .contact-modal.contact-theme-seo textarea {
  background: #071f5e;
  border: 1px solid rgba(255,255,255,.28);
  color: #ffffff;
}
/* Buttons */
#contactOverlay.contact-theme-seo .btn-primary,
#contactOverlay .contact-modal.contact-theme-seo .btn-primary {
  background: #ffffff;
  color: #0b2b7a;
  border-color: rgba(255,255,255,.65);
}
#contactOverlay.contact-theme-seo .btn-primary:hover,
#contactOverlay .contact-modal.contact-theme-seo .btn-primary:hover {
  background: #eaf2ff;
  color: #0a2d6b;
  border-color: rgba(255,255,255,.85);
}
/* Typography — ensure Option A (weight 400) */
#contactOverlay.contact-theme-seo .contact-title,
#contactOverlay.contact-theme-seo label,
#contactOverlay.contact-theme-seo input,
#contactOverlay.contact-theme-seo textarea,
#contactOverlay.contact-theme-seo .thankyou,
#contactOverlay .contact-modal.contact-theme-seo .contact-title,
#contactOverlay .contact-modal.contact-theme-seo label,
#contactOverlay .contact-modal.contact-theme-seo input,
#contactOverlay .contact-modal.contact-theme-seo textarea,
#contactOverlay .contact-modal.contact-theme-seo .thankyou {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
}

/* =========================
   THEME: PPC (green)
   ========================= */
#contactOverlay.contact-theme-ppc .contact-modal,
#contactOverlay .contact-modal.contact-theme-ppc {
  background: #0c2d24;
  color: #e8fff5;
  border-color: rgba(232,255,245,0.40);
}
#contactOverlay.contact-theme-ppc .contact-header,
#contactOverlay .contact-modal.contact-theme-ppc .contact-header {
  background: #062119;
  border-bottom-color: rgba(232,255,245,0.55);
}
#contactOverlay.contact-theme-ppc input,
#contactOverlay.contact-theme-ppc textarea,
#contactOverlay .contact-modal.contact-theme-ppc input,
#contactOverlay .contact-modal.contact-theme-ppc textarea {
  background: #062119;
  border-color: rgba(232,255,245,0.40);
  color: #e8fff5;
}
#contactOverlay.contact-theme-ppc .btn-primary,
#contactOverlay .contact-modal.contact-theme-ppc .btn-primary {
  background: #f4b000;
  border-color: #f4b000;
  color: #0c2d24;
}
#contactOverlay.contact-theme-ppc .btn-primary:hover,
#contactOverlay .contact-modal.contact-theme-ppc .btn-primary:hover {
  background: #ffd166;
  border-color: #ffd166;
}

/* =========================
   THEME: CRO (purple)
   ========================= */
#contactOverlay.contact-theme-cro .contact-modal,
#contactOverlay .contact-modal.contact-theme-cro {
  background: #1a0226;
  color: #fce7ff;
  border-color: rgba(248,208,255,0.35);
}
#contactOverlay.contact-theme-cro .contact-header,
#contactOverlay .contact-modal.contact-theme-cro .contact-header {
  background: #2b063d;
  border-bottom-color: rgba(248,208,255,0.55);
}
#contactOverlay.contact-theme-cro input,
#contactOverlay.contact-theme-cro textarea,
#contactOverlay .contact-modal.contact-theme-cro input,
#contactOverlay .contact-modal.contact-theme-cro textarea {
  background: #2b063d;
  border-color: rgba(248,208,255,0.45);
  color: #fce7ff;
}
#contactOverlay.contact-theme-cro .btn-primary,
#contactOverlay .contact-modal.contact-theme-cro .btn-primary {
  background: #f472ff;
  border-color: #f472ff;
  color: #220021;
}
#contactOverlay.contact-theme-cro .btn-primary:hover,
#contactOverlay .contact-modal.contact-theme-cro .btn-primary:hover {
  background: #f9a8ff;
  border-color: #f9a8ff;
}

/* =========================
   THEME: Analytics (orange)
   ========================= */
#contactOverlay.contact-theme-analytics .contact-modal,
#contactOverlay .contact-modal.contact-theme-analytics {
  background: #7a3410;
  color: #fff7ed;
  border-color: rgba(254,243,199,0.45);
}
#contactOverlay.contact-theme-analytics .contact-header,
#contactOverlay .contact-modal.contact-theme-analytics .contact-header {
  background: #9a4312;
  border-bottom-color: rgba(254,243,199,0.7);
}
#contactOverlay.contact-theme-analytics input,
#contactOverlay.contact-theme-analytics textarea,
#contactOverlay .contact-modal.contact-theme-analytics input,
#contactOverlay .contact-modal.contact-theme-analytics textarea {
  background: #9a4312;
  border-color: rgba(254,243,199,0.6);
  color: #fff7ed;
}
#contactOverlay.contact-theme-analytics .btn-primary,
#contactOverlay .contact-modal.contact-theme-analytics .btn-primary {
  background: #fed7aa;
  border-color: #fed7aa;
  color: #7a2e0f;
}
#contactOverlay.contact-theme-analytics .btn-primary:hover,
#contactOverlay .contact-modal.contact-theme-analytics .btn-primary:hover {
  background: #ffedd5;
  border-color: #ffedd5;
}

/* =========================
   THEME: A.I. Coding (dark blue / graphite)
   ========================= */
#contactOverlay.contact-theme-ai-coding .contact-modal,
#contactOverlay .contact-modal.contact-theme-ai-coding {
  background: #0f172a;
  color: #e5e7eb;
  border-color: rgba(148,163,184,0.45);
}
#contactOverlay.contact-theme-ai-coding .contact-header,
#contactOverlay .contact-modal.contact-theme-ai-coding .contact-header {
  background: #020617;
  border-bottom-color: rgba(148,163,184,0.65);
}
#contactOverlay.contact-theme-ai-coding input,
#contactOverlay.contact-theme-ai-coding textarea,
#contactOverlay .contact-modal.contact-theme-ai-coding input,
#contactOverlay .contact-modal.contact-theme-ai-coding textarea {
  background: #020617;
  border-color: rgba(148,163,184,0.7);
  color: #e5e7eb;
}
#contactOverlay.contact-theme-ai-coding .btn-primary,
#contactOverlay .contact-modal.contact-theme-ai-coding .btn-primary {
  background: #1f6feb;
  border-color: #1f6feb;
  color: #ffffff;
}
#contactOverlay.contact-theme-ai-coding .btn-primary:hover,
#contactOverlay .contact-modal.contact-theme-ai-coding .btn-primary:hover {
  background: #2a7fff;
  border-color: #2a7fff;
}

/* =========================
   Optional LIGHT theme
   ========================= */
#contactOverlay.contact-theme-light .contact-modal,
#contactOverlay .contact-modal.contact-theme-light {
  background: #ffffff;
  color: #111827;
  border-color: #e5e7eb;
}

/* Mobile */
@media (max-width: 640px) {
  #contactOverlay .contact-modal {
    width: calc(100% - 24px);
  }
}

/* ===== OLD PPC block (legacy safety) ===== */
.contact-overlay[data-theme="ppc"] {
  background: rgba(0, 0, 0, 0.55);
}
.contact-overlay[data-theme="ppc"] .contact-panel {
  background: #0c2d24;
  color: #e8fff5;
}
.contact-overlay[data-theme="ppc"] .contact-panel input,
.contact-overlay[data-theme="ppc"] .contact-panel textarea,
.contact-overlay[data-theme="ppc"] .contact-panel select {
  border-color: rgba(232, 255, 245, 0.35);
  background: rgba(0, 0, 0, 0.25);
  color: #e8fff5;
}
.contact-overlay[data-theme="ppc"] .contact-submit {
  background: #f4b000;
  border-color: #f4b000;
  color: #0c2d24;
}
.contact-overlay[data-theme="ppc"] .contact-submit:hover {
  background: #ffd166;
  border-color: #ffd166;
}