/* ===== CircuitX – Trainer Registration (Elegant White, mobile-tuned) ===== */
:root{
  --cx-red:#BB2323; --ink:#0B0B0B; --muted:#6B7280; --ring:#E5E7EB;
  --bg:#fff; --field:#fff; --hint:#9CA3AF;

  --cx-control-h:46px;
  --cx-ph:#9CA3AF;
  --cx-ink-strong:#111827;
  --cx-card:#F7F7F8;
  --cx-border:#E5E7EB;

  /* page padding for full-bleed calc */
  --page-pad:16px;
}

*,*::before,*::after{ box-sizing:border-box }

.cxtr-wrap{max-width:1080px;margin:36px auto;padding:0 var(--page-pad);font-family:Poppins,system-ui,sans-serif}

/* Form shell */
.cxtr-form{
  padding:28px;border:1px solid var(--ring);background:var(--bg);
  border-radius:24px;color:var(--ink);box-shadow:0 8px 28px rgba(9,11,16,.06)
}

/* Top kicker + title */
.cxtr-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font:700 11px/1 Poppins; letter-spacing:.16em; text-transform:uppercase;
  color:#9A1D1D; background:#FEE2E2; border:1px solid #FECACA;
  padding:8px 10px; border-radius:999px; margin-bottom:12px
}
.cxtr-h{margin:0 0 6px;font-size:clamp(26px,3.6vw,36px);font-weight:900}
.cxtr-sub{margin:0 0 18px;color:var(--muted)}

/* Sections grid wrapper */
.cxtr-sections{display:grid;gap:18px}

/* Card section */
.cxtr-card{
  background:var(--cx-card); border:1px solid var(--cx-border);
  border-radius:18px; padding:18px; box-shadow:0 4px 14px rgba(15,23,42,.05)
}

/* Optional: make a card go edge-to-edge on small screens */
@media (max-width:920px){
  .cxtr-bleed{
    margin-left:calc(-1 * var(--page-pad));
    margin-right:calc(-1 * var(--page-pad));
    border-radius:0;
    border-left:none;border-right:none;
  }
}

.cxtr-card-h{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font:700 13px/1 Poppins; letter-spacing:.06em; text-transform:uppercase; color:#111827
}

/* Centered number chip — bulletproof */
.chip{
  width:24px;height:24px;border-radius:999px;
  display:grid; place-items:center;
  background:#111827;color:#fff;font:700 12px/1 Poppins;
  text-align:center; line-height:0; font-variant-numeric:tabular-nums;
}

/* Small icon tile */
.ico{
  width:28px;height:28px;border-radius:10px;background:#FFF1F2;color:#9A1D1D;
  display:grid;place-items:center; line-height:1;
}

/* Grids */
.cxtr-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cxtr-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* When rows stack to 1×1, increase vertical rhythm */
@media (max-width:920px){
  .cxtr-row,.cxtr-row-3{grid-template-columns:1fr}
  .cxtr-card .cxtr-row + .cxtr-row,
  .cxtr-card .cxtr-row-3 + .cxtr-row-3{ margin-top:14px }
}

/* Fields */
.cxtr-field{display:flex;flex-direction:column;gap:6px}
.cxtr-label{font-size:13px;font-weight:600;color:#0F172A}
.cxtr-req{color:var(--cx-red)}
.cxtr-hint{font-size:11px;color:var(--hint);margin-top:-2px}

/* Add bottom breathing space between fields when stacked on mobile */
@media (max-width:920px){
  .cxtr-row > .cxtr-field,
  .cxtr-row-3 > .cxtr-field{ padding-bottom:6px }
}

/* Controls (Unified) */
.cxtr-input,
.cxtr-text,
.cxtr-select{
  width:100%; border:1px solid var(--ring);
  border-radius:12px; font-size:14px; color:var(--cx-ink-strong);
  transition:border-color .12s ease, box-shadow .12s ease, transform .04s ease;
  background:var(--field);
}

/* Input heights */
.cxtr-input{ height:var(--cx-control-h); padding:0 14px; line-height:calc(var(--cx-control-h) - 2px); }

/* Force same look */
.cxtr-input[type="url"],
.cxtr-input[type="email"],
.cxtr-input[type="text"],
.cxtr-input[type="tel"],
.cxtr-input[type="search"]{
  background:var(--field) !important;
  color:var(--cx-ink-strong);
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
}

/* Textarea */
.cxtr-text{ min-height:120px; padding:12px 12px; line-height:1.45; }

/* Placeholder */
.cxtr-input::placeholder,
.cxtr-text::placeholder{ color:var(--cx-ph); opacity:1; font-weight:500; }

/* Select with arrow + placeholder state */
.cxtr-select{
  height:var(--cx-control-h); padding:0 42px 0 14px;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background:
    var(--field)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'><path d='M5 7l5 5 5-5' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 12px center;
}
.cxtr-select.placeholder{ color:var(--cx-ph); }

/* Hover/Focus */
.cxtr-input:hover,.cxtr-text:hover,.cxtr-select:hover{ border-color:#D1D5DB }
.cxtr-input:focus,.cxtr-text:focus,.cxtr-select:focus{
  border-color:var(--cx-red); box-shadow:0 0 0 3px rgba(187,35,35,.16); outline:0
}

/* WebKit AUTOFILL: keep controls white */
.cxtr-input:-webkit-autofill,
.cxtr-input:-webkit-autofill:hover,
.cxtr-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--cx-ink-strong);
  -webkit-box-shadow:0 0 0 1000px var(--field) inset;
  box-shadow:0 0 0 1000px var(--field) inset;
  transition:background-color 99999s ease-in-out 0s;
}

/* File input */
.cxtr-file input[type="file"]{
  height:var(--cx-control-h);
  padding:0 0 0 12px;
  border:1px dashed var(--cx-border);
  background:#FAFAFA; border-radius:12px; color:var(--cx-ink-strong);
}
.cxtr-file input[type="file"]::-webkit-file-upload-button,
.cxtr-file input[type="file"]::file-selector-button{
  margin:0; height:calc(var(--cx-control-h) - 8px);
  padding:0 14px; border:1px solid var(--cx-border);
  background:#FFFFFF; border-radius:10px; cursor:pointer; font-weight:600;
}
.cxtr-file input[type="file"]:hover::-webkit-file-upload-button,
.cxtr-file input[type="file"]:hover::file-selector-button{ background:#F3F4F6 }
.cxtr-file .preview{margin-top:8px;display:flex;align-items:center;gap:10px}
.cxtr-file .preview img{width:48px;height:48px;border-radius:12px;object-fit:cover;border:1px solid #eee}

/* Validation helpers */
.cxtr-field.success .cxtr-input,
.cxtr-field.success .cxtr-select{border-color:#10B981}
.cxtr-field.error .cxtr-input,
.cxtr-field.error .cxtr-select{border-color:#EF4444; box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.cxtr-field .msg{font-size:11px;margin-top:2px}
.cxtr-field .msg.err{color:#B91C1C}
.cxtr-field .msg.ok{color:#065F46}

/* Actions */
.cxtr-actions{
  margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap
}
.cxtr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--cx-red);
  border:0;color:#fff;border-radius:12px;padding:12px 22px;font-weight:700;cursor:pointer;
  transition:transform .12s ease, filter .12s ease; min-width:140px
}
.cxtr-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.cxtr-btn i{font-size:14px}
.cxtr-btn--ghost{ background:#fff;border:1px solid #E5E7EB;color:#0F172A }
.cxtr-btn--ghost:hover{ background:#F9FAFB }

/* Mobile tweaks:
   - remove sticky actions
   - fit both buttons on one row and make them a bit smaller */
@media (max-width:920px){
  .cxtr-actions{
    position:static; padding-top:0; background:transparent;
  }
  .cxtr-btn{ padding:8px 14px; border-radius:10px; min-width:0; flex:1 1 0 }
  .cxtr-actions .cxtr-btn,
  .cxtr-actions .cxtr-btn--ghost{ flex-basis:calc(50% - 5px) }
}
/* ===== Agreement styles ===== */
.cxtr-agreement { display:grid; gap:16px }
.cxtr-agreement-box{
  border:1px solid var(--cx-border);
  background:#fff; border-radius:14px; overflow:hidden;
}
.cxtr-agreement-inner{
  max-height:220px; overflow:auto; padding:14px 14px;
}
.cxtr-agreement-inner h4{ margin:0 0 8px; font-size:15px }
.cxtr-agreement-inner p{ margin:8px 0; color:#374151; font-size:13px; line-height:1.5 }

.cxtr-checks{ display:grid; gap:10px }
.cxtr-check{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:#111827 }
.cxtr-check input{ transform:translateY(3px) }

@media (max-width:920px){
  .cxtr-agreement-inner{ max-height:180px }
}
/* ===== Thank You Page ===== */
.cxtr-thanks{display:grid;place-items:center;padding:24px}
.cxtr-thanks-card{
  width:min(880px,100%);
  background:#fff;border:1px solid var(--ring);border-radius:24px;
  box-shadow:0 10px 32px rgba(9,11,16,.06);
  padding:28px; text-align:center;
}
.cxtr-thanks-icon{
  width:64px;height:64px;margin:0 auto 12px; border-radius:50%;
  display:grid;place-items:center;background:#ECFDF5;color:#059669; font-size:28px
}
.cxtr-thanks-title{margin:8px 0 6px;font-size:clamp(24px,3.2vw,34px);font-weight:900}
.cxtr-thanks-sub{margin:0 auto 18px;max-width:720px;color:var(--muted)}

/* Email pill + copy */
.cxtr-email-pill{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--cx-border); background:#F9FAFB; color:#111827;
  padding:10px 12px; border-radius:999px; margin:6px 0 14px;
}
.cxtr-email-ico{width:22px;height:22px;display:grid;place-items:center}
.cxtr-email-text{font-weight:600}
.cxtr-copy-btn{
  border:1px solid var(--cx-border); background:#fff; padding:6px 10px; border-radius:999px;
  cursor:pointer; font-weight:700; transition:transform .12s ease, filter .12s ease;
}
.cxtr-copy-btn:hover{filter:brightness(1.03); transform:translateY(-1px)}
.cxtr-copy-toast{
  margin-left:6px; font-size:12px; color:#059669; opacity:0; transform:translateY(-2px);
  transition:opacity .15s ease, transform .15s ease;
}
.cxtr-copy-toast.show{opacity:1; transform:translateY(0)}

.cxtr-thanks-steps{display:grid;gap:14px;margin:14px auto 8px;max-width:720px;text-align:left}
.cxtr-step{display:flex;gap:12px;align-items:flex-start;background:#F9FAFB;border:1px solid var(--cx-border);border-radius:14px;padding:12px}
.cxtr-step-ico{width:32px;height:32px;border-radius:10px;background:#FFF1F2;color:#9A1D1D;display:grid;place-items:center}
.cxtr-step-h{font-weight:700;color:#111827;margin-bottom:2px}
.cxtr-step-p{color:#4B5563}

.cxtr-thanks-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0 6px}
.cxtr-thanks-actions .cxtr-btn{min-width:160px}

.cxtr-thanks-meta{
  margin-top:6px;color:#6B7280;font-size:12px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center
}
.cxtr-meta-item{display:flex;align-items:center;gap:6px}

@media (max-width:920px){
  .cxtr-thanks-card{padding:20px;border-radius:18px}
  .cxtr-email-text{max-width:56vw;overflow:hidden;text-overflow:ellipsis}
}
.cxtr-alert{padding:12px 14px;border-radius:8px;margin:10px 0}
.cxtr-alert--error{background:#fff3f3;border:1px solid #ffd2d2;color:#7a1111}
.cxtr-error{color:#b00020;font-size:12px;margin-top:6px}
.cxtr-input[aria-invalid="true"],
.cxtr-select[aria-invalid="true"],
.cxtr-text[aria-invalid="true"]{
  border-color:#b00020 !important; box-shadow:0 0 0 2px rgba(176,0,32,.08) !important;
}