/* Soccer Kicks – shared styles. Page layout styles come from the approved Claude Design files. */
:root {
  --brand: #1F51FF;
  --brand-deep: #1740CC;
  --brand-darker: #12309A;
  --navy: #0A1030;
  --ink-muted: #4A5275;
  --surface-200: #F1F4FF;
  --border: #D5DCF5;
  --border-strong: #6B78B8;
  --success: #0F7A4A;
  --footer-muted: #AAB3D6;
  --error: #C62828;
}

/* From the design */
body{margin:0;background:#ffffff}
a{color:#1F51FF}a:hover{color:#1740CC}
.wrap{max-width:1200px;margin:0 auto;padding-left:clamp(16px,4vw,32px);padding-right:clamp(16px,4vw,32px);box-sizing:border-box}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:13px;line-height:18px;font-weight:600;color:#0A1030}
.field input,.field select,.field textarea{font:inherit;font-size:16px;line-height:22px;color:#0A1030;background:#ffffff;border:1px solid #6B78B8;border-radius:8px;padding:10px 12px;min-height:44px;box-sizing:border-box;width:100%}
.btn-primary:hover{background:#1740CC !important}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #1F51FF;outline-offset:1px;border-color:#1F51FF}
.step{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.step legend{padding:0;margin-bottom:10px;display:flex;align-items:center;gap:10px;font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:800;text-transform:uppercase;font-size:22px;line-height:26px;color:#0A1030}
.tile{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 12px;border:1px solid #6B78B8;border-radius:8px;cursor:pointer;background:#ffffff;min-height:44px;box-sizing:border-box;font-size:15px;line-height:20px;font-weight:700;color:#0A1030}
.tile:hover{background:#F1F4FF}
.tile input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.tile:has(input:checked){border-color:#1F51FF;background:#1F51FF;color:#ffffff}
.tile:has(input:focus-visible){outline:2px solid #1F51FF;outline-offset:2px}
.tick{position:absolute;top:50%;margin-top:-9px;right:12px;width:18px;height:18px;border-radius:999px;border:1.5px solid #6B78B8;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.tick svg{opacity:0}
.tile:has(input:checked) .tick{background:#1F51FF;border-color:#1F51FF}
.tile:has(input:checked) .tick svg{opacity:1}
.social:hover{background:#ffffff !important;color:#0A1030 !important}
.prog:hover{border-color:#1F51FF !important}

/* Accessibility: visible keyboard focus everywhere */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Forms: spam honeypot, inline errors, status and thank-you message */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.field.invalid input,
.field.invalid textarea { border-color: var(--error); }
.field-error { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--error); }
.form-status { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; text-align: center; }
.form-status:empty { display: none; }
.form-status.err { color: var(--error); }
.form-status a { color: inherit; }
button[type="submit"]:disabled { opacity: 0.6; cursor: wait; }
.form-thanks { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; min-height: 240px; }
.form-thanks h3 { margin: 0; font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 800; text-transform: uppercase; font-size: 32px; line-height: 34px; color: var(--navy); }
.form-thanks p { margin: 0; font-size: 17px; line-height: 26px; color: var(--ink-muted); max-width: 420px; }
.form-thanks .tick-circle { width: 56px; height: 56px; border-radius: 999px; background: var(--brand); display: flex; align-items: center; justify-content: center; }