/* GWG Form – Frontend CSS v2.3.1
   Accessible but visually natural.
   - WCAG AA: text 4.5:1, UI components 3:1 (borders etc.)
   - Labels visible without being heavy
   - Soft focus rings that don't feel aggressive
   - Fine-print privacy
   - Inherits theme font/color unless overridden
*/

.gwg-form-wrap {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  font-size: inherit;
  font-family: inherit;
  line-height: 1.6;
  color: inherit;
  box-sizing: border-box;
}

.gwg-step { display: none; }
.gwg-step.active { display: block; }

.gwg-step-title {
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px;
  color: inherit;
}
.gwg-sub {
  font-size: 1rem;
  margin: 0 0 28px;
}

/* ── Progress dots ── */
.gwg-progress { display:flex; gap:8px; justify-content:center; margin-bottom:24px; }
.gwg-dot { width:8px; height:8px; border-radius:50%; background:#d1d5db; transition:background .2s; }
.gwg-dot.active { background:#1d4ed8; }
.gwg-dot.done   { background:#9ca3af; }

/* ── Field wrapper + label ── */
.gwg-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 16px;
}

/* Label: slightly smaller than body, medium weight — readable not heavy */
.gwg-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: inherit;
  opacity: .85;
  line-height: 1.4;
}

.gwg-req { color: #e53e3e; margin-left: 2px; }

/* ── Inputs ──
   Border: #aab on white ≈ 3.1:1 — passes WCAG AA non-text (3:1 threshold)
   Soft enough to not look stark, clear enough to be useful
*/
.gwg-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.5;
  border: 1.5px solid #aab0bb;
  border-radius: 6px;
  color: inherit;
  background: transparent;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}

.gwg-input::placeholder { color: inherit; opacity: .4; }

/* Focus: soft blue glow — visible without being alarming */
.gwg-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}

.gwg-input.gwg-error  { border-color: #e53e3e; }
.gwg-input.gwg-error:focus { box-shadow: 0 0 0 3px rgba(229,62,62,.15); }

/* ── Choice groups ── */
.gwg-choice-group { border:none; padding:0; margin:0 0 16px; }
.gwg-choice-legend {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: inherit;
  opacity: .85;
  margin-bottom: 10px;
  padding: 0;
  width: 100%;
}

/* ── Card grid ── */
.gwg-grid { display:grid; gap:12px; margin-bottom:8px; }
.gwg-grid-2 { grid-template-columns: repeat(2,1fr); }
.gwg-grid-3 { grid-template-columns: repeat(3,1fr); }
@media (max-width:500px) {
  .gwg-grid-2, .gwg-grid-3 { grid-template-columns:1fr 1fr; }
}

/* Card buttons — border matches input for visual consistency */
.gwg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  background: transparent;
  border: 1.5px solid #aab0bb;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.925rem;
  font-weight: 500;
  color: inherit;
  text-align: center;
  transition: border-color .15s, background .15s;
  font-family: inherit;
  line-height: 1.35;
}
.gwg-card:hover { border-color: #6b7280; background: rgba(0,0,0,.03); }
.gwg-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
  border-color: #3b82f6;
}
.gwg-card.selected {
  border-color: #1d4ed8;
  background: rgba(29,78,216,.06);
  font-weight: 600;
}

.gwg-icon { font-size:1.75rem; line-height:1; display:block; }

.gwg-card.gwg-card-text {
  flex-direction: row;
  justify-content: center;
  padding: 13px 16px;
}

.gwg-other {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 2px;
  background: none;
  border: none;
  color: inherit;
  opacity: .6;
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .15s;
}
.gwg-other:hover { opacity: 1; }
.gwg-other:focus-visible { outline: 2px solid #3b82f6; outline-offset: 3px; border-radius: 2px; opacity: 1; }
.gwg-other.selected { opacity: 1; font-weight: 600; text-decoration: none; }

/* ── Privacy — fine print ── */
.gwg-privacy {
  margin: 20px 0 12px;
  color: inherit;
}
.gwg-privacy,
.gwg-privacy small {
  display: block;
  font-size: 0.72rem;
  line-height: 1.65;
  color: #555e6d;  /* explicit mid-dark — readable on white without being harsh */
  opacity: 1;
}
.gwg-privacy a { color: inherit; opacity: .9; text-decoration: underline; }
.gwg-privacy a:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: 2px; }

/* ── Nav ── */
.gwg-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.gwg-back-btn {
  background: none;
  border: 1.5px solid #aab0bb;
  border-radius: 8px;
  color: inherit;
  opacity: .75;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 500;
  padding: 11px 22px;
  cursor: pointer;
  transition: opacity .15s, border-color .15s;
}
.gwg-back-btn:hover { opacity:1; border-color:#6b7280; }
.gwg-back-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(59,130,246,.2); border-color:#3b82f6; opacity:1; }

.gwg-primary-btn {
  margin-left: auto;
  background: #1d4ed8;
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 700;
  padding: 13px 32px;
  cursor: pointer;
  transition: background .15s;
  letter-spacing: .01em;
}
.gwg-primary-btn:hover   { background: #1e40af; }
.gwg-primary-btn:focus-visible { outline: 3px solid rgba(59,130,246,.5); outline-offset: 3px; }
.gwg-primary-btn:disabled { opacity:.55; cursor:not-allowed; }

/* ── Messages ── */
.gwg-msg { font-size:0.875rem; font-weight:500; margin:10px 0 4px; min-height:1.4em; }
.gwg-msg.error { color:#e53e3e; }
.gwg-msg.info  { color:#1d4ed8; }

/* ── Success ── */
.gwg-success { text-align:center; padding:40px 20px; }
.gwg-success-icon { font-size:3rem; margin-bottom:16px; display:block; }
.gwg-success h2 { font-size:1.75rem; font-weight:700; margin:0 0 10px; color:inherit; }
.gwg-success p  { font-size:1rem; opacity:.7; margin:0; }

/* ── Spinner ── */
.gwg-spinner {
  display:inline-block; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:gwg-spin .7s linear infinite;
  vertical-align:middle; margin-right:8px;
}
@keyframes gwg-spin { to { transform:rotate(360deg); } }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .gwg-card,.gwg-input,.gwg-primary-btn,.gwg-back-btn { transition:none; }
  .gwg-spinner { animation:none; opacity:.7; }
}

/* ── Dark mode — auto-adjust where needed ── */
@media (prefers-color-scheme: dark) {
  .gwg-input,
  .gwg-card,
  .gwg-back-btn,
  .gwg-other { opacity: .5; }

  .gwg-input:focus,
  .gwg-card:focus-visible,
  .gwg-back-btn:focus-visible { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.2); }

  .gwg-card.selected  { background:rgba(96,165,250,.12); border-color:#60a5fa; }
  .gwg-primary-btn    { background:#2563eb; }
  .gwg-primary-btn:hover { background:#3b82f6; }
}

/* ── Windows High Contrast ── */
@media (forced-colors: active) {
  .gwg-input  { border:2px solid ButtonText; }
  .gwg-card   { border:2px solid ButtonText; }
  .gwg-card.selected { border:3px solid Highlight; }
  .gwg-primary-btn { border:2px solid ButtonText; }
}

/* ── Thank You Action Buttons ── */
.gwg-action-buttons { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:24px; }
.gwg-action-btn { text-decoration:none; min-width:140px; text-align:center; }

/* ── Field-level validation errors ── */
.gwg-field-error { display:block; color:#dc2626; font-size:.8rem; margin-top:4px; }

/* ── Map block responsive height ── */
.gwg-map-wrap {
  height: clamp(220px, 38vw, 420px) !important;
}
@media (max-width: 600px) {
  .gwg-map-wrap {
    height: clamp(180px, 55vw, 260px) !important;
  }
}