/* ═══════════════════════════════════════════════════════════════════════
   MDYD Group Registration — Form Styles
   Mirrors the registration/exhibitor/scholarship/volunteer design language.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --gr-yellow:   #ffe100;
  --gr-pink:     #e9008a;
  --gr-cyan:     #00d8ff;
  --gr-muted:    #c7c6d2;
  --gr-error:    #ff4d6d;
  --gr-line:     rgba(255,255,255,.16);
  --gr-input-bg: rgba(0,0,0,.45);
  --gr-panel:    rgba(255,255,255,.045);
  --gr-display:  Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --gr-body:     Arial, Helvetica, sans-serif;
  --gr-trans:    .18s ease;
}

.mdyd-gr-wrap { font-family: var(--gr-body); color: #fff; max-width: 760px; margin: 0 auto; }

/* ── Form shell ────────────────────────────────────────────────────────────── */
.gr-form {
  border: 1px solid var(--gr-line);
  background: var(--gr-panel);
  padding: 40px 44px 36px;
  position: relative;
}
.gr-form::before,.gr-form::after { content:""; position:absolute; width:32px; height:32px; pointer-events:none; }
.gr-form::before { top:-1px; left:-1px; border-top:3px solid var(--gr-yellow); border-left:3px solid var(--gr-yellow); }
.gr-form::after  { bottom:-1px; right:-1px; border-bottom:3px solid var(--gr-pink); border-right:3px solid var(--gr-pink); }

/* ── Sections ──────────────────────────────────────────────────────────────── */
.gr-section { padding-bottom:28px; border-bottom:1px solid var(--gr-line); margin-bottom:28px; }
.gr-section:last-of-type { border-bottom:none; padding-bottom:0; margin-bottom:0; }

.gr-section-title {
  font-family: var(--gr-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--gr-yellow);
  margin: 0 0 20px;
}

.gr-sublabel {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gr-muted);
  margin: 18px 0 12px;
}

/* ── Grid rows ─────────────────────────────────────────────────────────────── */
.gr-row-two   { display:grid; grid-template-columns:1fr 1fr;     gap:18px; margin-bottom:18px; }
.gr-row-three { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-bottom:18px; }
.gr-row-two:last-child,.gr-row-three:last-child { margin-bottom:0; }

/* ── Fields ────────────────────────────────────────────────────────────────── */
.gr-field { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.gr-field:last-child { margin-bottom:0; }
.gr-row-two .gr-field,.gr-row-three .gr-field { margin-bottom:0; }

.gr-field label:not(.gr-radio):not(.gr-checkbox) {
  font-size:.82rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--gr-muted); line-height: 1.4;
}
.gr-req { color:var(--gr-pink); margin-left:2px; }
.gr-optional { color: rgba(199,198,210,.55); font-weight: 400; text-transform: none; letter-spacing: 0; }

.gr-field input[type="text"],
.gr-field input[type="email"],
.gr-field input[type="tel"],
.gr-field input[type="number"],
.gr-field select,
.gr-field textarea {
  background:var(--gr-input-bg); border:1px solid rgba(255,255,255,.2); color:#fff;
  font-family:var(--gr-body); font-size:.96rem; padding:12px 14px;
  outline:none; width:100%; box-sizing:border-box; border-radius:0; -webkit-appearance:none;
  transition:border-color var(--gr-trans), box-shadow var(--gr-trans);
}
.gr-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23c7c6d2' d='M7 9 0 0h14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.gr-field select option { background: #1a1a2e; color: #fff; }
.gr-field input::placeholder,.gr-field textarea::placeholder { color:rgba(199,198,210,.3); }
.gr-field input:focus,.gr-field select:focus,.gr-field textarea:focus {
  border-color:var(--gr-cyan); box-shadow:0 0 0 3px rgba(0,216,255,.1);
}
.gr-field input.is-error,.gr-field select.is-error,.gr-field textarea.is-error {
  border-color:var(--gr-error) !important; box-shadow:0 0 0 3px rgba(255,77,109,.1) !important;
}
.gr-field textarea { min-height: 90px; resize: vertical; }

/* ── Calculated display box ──────────────────────────────────────────────── */
.gr-total-display { margin-top: 4px; }
.gr-calc-box {
  background: rgba(255,225,0,.08);
  border: 1px solid rgba(255,225,0,.35);
  color: var(--gr-yellow);
  font-family: var(--gr-display);
  font-size: 1.6rem;
  padding: 10px 16px;
  text-align: center;
  letter-spacing: .02em;
}

/* ── Radio / checkbox groups ──────────────────────────────────────────────── */
.gr-radio-group { display:flex; gap:20px; align-items:center; padding:6px 0; flex-wrap:wrap; }
.gr-radio { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:.92rem; color:var(--gr-muted); }
.gr-radio input[type="radio"] { width:17px; height:17px; accent-color:var(--gr-yellow); cursor:pointer; flex-shrink:0; }

.gr-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 6px;
}
.gr-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--gr-line);
  background: rgba(0,0,0,.22);
  cursor: pointer;
  font-size: .88rem;
  color: var(--gr-muted);
  line-height: 1.4;
  transition: border-color var(--gr-trans), background var(--gr-trans);
}
.gr-checkbox:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.04); }
.gr-checkbox input[type="checkbox"] { width:17px; height:17px; accent-color:var(--gr-yellow); cursor:pointer; flex-shrink:0; margin-top: 1px; }
.gr-checkbox.is-checked { border-color: rgba(0,216,255,.45); background: rgba(0,216,255,.06); color: #fff; }

/* ── Age count rows ────────────────────────────────────────────────────────── */
.gr-age-counts { display: flex; flex-direction: column; gap: 12px; }
.gr-age-count-row { flex-direction: row; align-items: center; gap: 14px; margin-bottom: 0; }
.gr-age-count-row label { white-space: nowrap; min-width: 140px; }
.gr-age-count-row input { max-width: 120px; }

/* ── Notice block ──────────────────────────────────────────────────────────── */
.gr-notice {
  border-left: 3px solid var(--gr-cyan);
  background: rgba(0,216,255,.06);
  padding: 14px 18px;
  font-size: .9rem;
  color: #fff;
  line-height: 1.6;
  margin-bottom: 20px;
}
.gr-notice--yellow {
  border-left-color: var(--gr-yellow);
  background: rgba(255,225,0,.06);
}

/* ── Errors ─────────────────────────────────────────────────────────────────── */
.gr-error { font-size:.8rem; color:var(--gr-error); min-height:1em; display:block; }
.gr-error:empty { display:none; }

/* ── Submit ─────────────────────────────────────────────────────────────────── */
.gr-submit-row { margin-top:32px; padding-top:24px; border-top:1px solid var(--gr-line); }
.gr-btn-submit {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 40px; background:var(--gr-yellow); color:#050507;
  border:2px solid var(--gr-yellow); font-family:var(--gr-display);
  font-size:1.1rem; text-transform:uppercase; letter-spacing:.05em;
  box-shadow:6px 6px 0 var(--gr-pink); cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease; min-height:54px;
}
.gr-btn-submit:hover:not(:disabled) { transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--gr-pink); }
.gr-btn-submit:disabled { opacity:.6; cursor:not-allowed; }
.gr-btn__spinner { display:flex; align-items:center; }

/* ── Alert ──────────────────────────────────────────────────────────────────── */
.gr-alert--error {
  background:rgba(255,77,109,.1); border:1px solid var(--gr-error);
  border-left:4px solid var(--gr-error); color:#fff;
  padding:14px 18px; font-size:.9rem; line-height:1.55; margin-top:16px;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .gr-form { padding: 24px 18px 20px; }
  .gr-row-two,.gr-row-three { grid-template-columns: 1fr; }
  .gr-checkbox-grid { grid-template-columns: 1fr; }
  .gr-age-count-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .gr-age-count-row label { min-width: auto; }
  .gr-btn-submit { width: 100%; justify-content: center; }
}