/* Register page – minimal, no overrides to your global CSS */

/* Layout: aside (help) + form */
.reg-layout{
  display:grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(16px, 4vw, 40px);
  margin: 28px auto;
}
@media (max-width: 1000px){
  .reg-layout{ grid-template-columns: 1fr; }
}

/* Aside cards */
.reg-aside{ display:grid; gap:14px; align-content:start; }
.reg-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 8px 22px rgba(15,27,45,.07);
  padding:16px 18px;
}
.reg-card__title{
  margin:0 0 .4rem 0; color:var(--ink);
  font-weight:800; font-size: clamp(1rem, .9vw + .9rem, 1.2rem);
}
.reg-list, .reg-list--ol{ margin:.25rem 0 0 0; padding-left:1.1rem; }
.reg-list li{ margin:.25rem 0; }
.reg-list--ol{ list-style:decimal; }
.reg-list--ol li{ margin:.35rem 0; }

/* Form shell */
.reg-form-wrap{ align-self:start; }
.reg-form{
  background:#fff;
  border:1px solid #e9eef5;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(15,27,45,.08);
  padding:20px;
  display:grid;
  gap:14px;
}

/* Fieldset */
.reg-fieldset{
  border:0;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}
.reg-fieldset > legend{
  font-weight:800;
  color:var(--ink);
  margin-bottom:.25rem;
  font-size: clamp(1.02rem, .9vw + .95rem, 1.25rem);
}

/* Inputs */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 680px){ .grid-2{ grid-template-columns:1fr; } }

.reg-input{ display:grid; gap:.35rem; }
.reg-input > span{ font-weight:700; color:var(--ink); font-size:.96rem; }
.reg-input input,
.reg-input select,
.reg-input textarea{
  border:1px solid var(--line);
  border-radius:10px;
  padding:.65rem .75rem;
  font:inherit;
  color:var(--ink);
  background:#fff;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.reg-input textarea{ resize:vertical; }
.reg-input input:focus,
.reg-input select:focus,
.reg-input textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(35,132,198,.15);
}

/* Checks */
.reg-check{ display:flex; align-items:flex-start; gap:.55rem; }
.reg-check input{ margin-top:.25rem; }

/* Actions */
.reg-actions{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:.2rem; }
.reg-small{ margin:.35rem 0 0 0; font-size:.95rem; color:var(--muted); }

/* === Inline error styles === */
.reg-input .reg-error {
  color:#b00020;
  font-size:.92rem;
  margin-top:.25rem;
}
.reg-input [aria-invalid="true"]{
  border-color:#b00020 !important;
  box-shadow:0 0 0 3px rgba(176,0,32,.12) !important;
}

/* Success modal visibility (as we set earlier) */
.reg-success{ display:none; }
.reg-success[hidden]{ display:none !important; }
.reg-success.is-open{
  position:fixed; inset:0; z-index:3000;
  background:rgba(0,0,0,.45);
  display:grid; place-items:center; padding:16px;
}
.reg-success__card{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 40px rgba(15,27,45,.22);
  width:min(560px, 92vw);
  padding:22px 20px; text-align:center;
}
.reg-success__icon{
  width:56px; height:56px; line-height:56px; margin-inline:auto; margin-bottom:.5rem;
  border-radius:50%; background:#e7f4ff; color:var(--primary); font-weight:900; font-size:1.4rem;
  box-shadow:inset 0 0 0 2px #cfe7fb;
}
.reg-success h3{ margin:.2rem 0 .4rem 0; color:var(--ink); font-weight:800; }

/* Policy block inside success */
.reg-policy{ margin:.9rem 0 0; padding:14px 16px; background:#f7fafc; border:1px solid var(--line); border-radius:12px; text-align:left; }
.reg-policy h4{ margin:0 0 .4rem; color:var(--ink); font-weight:800; font-size:clamp(1rem,.9vw + .85rem,1.1rem); }
.reg-policy h4 .em{ color:var(--primary-600); }
.reg-policy ul{ margin:0 0 .45rem; padding-left:1.1rem; }
.reg-policy li{ margin:.25rem 0; }
.reg-policy .reg-note{ margin:.25rem 0 0; font-size:.94rem; color:#6f8196; }

/* Pay modal */
.pay-modal{ display:none; }
.pay-modal[hidden]{ display:none !important; }
.pay-modal.is-open{
  position:fixed; inset:0; z-index:3050;
  background:rgba(0,0,0,.45);
  display:grid; place-items:center; padding:16px;
}
.pay-card{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 40px rgba(15,27,45,.22);
  width:min(680px, 94vw); padding:20px 18px;
}
.pay-card h3{ margin:.2rem 0 1rem; font-weight:800; color:var(--ink); text-align:center; }
.pay-grid{
  display:grid; grid-template-columns: 1fr; gap:12px;
}
@media (min-width:700px){
  .pay-grid{ grid-template-columns: 1fr 1fr 1fr; }
}
.pay-item{
  border:1px solid var(--line); border-radius:12px; padding:14px; background:#fff;
}
.pay-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.pay-logo{ width:32px; height:32px; object-fit:contain; }
.pay-name{ font-weight:800; color:var(--ink); }
.pay-ussd,.pay-merchant{ margin:.15rem 0; }
.pay-accounts{ list-style:none; margin:.15rem 0 .35rem; padding:0; display:grid; gap:.2rem; }
.pay-accounts .label{ color:#6f8196; margin-right:.35rem; }
.pay-small{ margin:.15rem 0 0; font-size:.92rem; color:#6f8196; }
.pay-note{
  margin:12px 0 6px; padding:12px; border:1px solid var(--line); background:#f7fafc; border-radius:12px; text-align:center;
}