/* FRSHRZ — Onboarding Form Styles (colourful theme, matches the dashboards)
   Used by college-onboard.php, partner-onboard.php, student-register.php,
   verify-college-email.php and the student onboarding (profile) form.
   Extends main.css — load after it. Only looks change here: every class
   name the pages and their scripts rely on is kept. */

.ob-page{
  --ob-indigo:#4f46e5; --ob-violet:#7c3aed; --ob-pink:#db2777; --ob-amber:#f59e0b; --ob-green:#059669; --ob-sky:#0284c7;
  --ob-ink:#1d1d1f; --ob-muted:#6b7280; --ob-line:rgba(79,70,229,.18); --ob-soft:#f8f7ff;
  --ob-grad:linear-gradient(115deg,#312e81 0%,#6d28d9 45%,#db2777 78%,#f59e0b 100%);
  --ob-btn:linear-gradient(100deg,#4f46e5,#db2777);
}

/* ── Honeypot (bot trap) — hidden from sighted and screen-reader users alike,
   but present in the DOM/tab order enough that naive bots that fill every
   input still catch it. Do not use display:none/visibility:hidden here —
   some bots specifically skip those. */
.ob-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* ── Page shell: gradient band at the top, soft lavender below ── */
.ob-page{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:34px 16px 60px;color:var(--ob-ink);
  background:
    radial-gradient(circle at 85% 40px,rgba(255,255,255,.20) 0,rgba(255,255,255,0) 220px) no-repeat,
    var(--ob-grad) top center / 100% 330px no-repeat,
    linear-gradient(180deg,#f3f1ff 330px,#f7f7fa 100%);
}
.ob-logo{font-weight:800;font-size:1.25rem;color:#fff;margin-bottom:8px;letter-spacing:-0.01em;text-align:center;}
.ob-logo span{color:#fde68a;}
.ob-logo a{color:inherit;text-decoration:none;}
.ob-tagline{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:5px 14px;text-align:center;margin:0 auto 26px;}

/* ── Progress (step dots) ── */
.ob-progress{width:100%;max-width:640px;margin-bottom:24px;}
.ob-steps{display:flex;align-items:center;justify-content:space-between;position:relative;margin-bottom:10px;}
.ob-steps::before{content:'';position:absolute;top:15px;left:16px;right:16px;height:4px;border-radius:999px;background:rgba(255,255,255,.22);z-index:0;}
.ob-step-fill{position:absolute;top:15px;left:16px;height:4px;border-radius:999px;background:linear-gradient(90deg,#fde68a,#fff);z-index:1;transition:width .4s ease;}
.ob-step-dot{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.8);z-index:2;transition:all .3s;flex-shrink:0;}
.ob-step-dot.done{background:#fde68a;border-color:#fde68a;color:#7c2d12;}
.ob-step-dot.active{background:#fff;border-color:#fff;color:var(--ob-violet);box-shadow:0 0 0 5px rgba(255,255,255,.22);}
.ob-step-labels{display:flex;justify-content:space-between;}
.ob-step-label{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.7);text-align:center;flex:1;letter-spacing:.02em;}
.ob-step-label.active{color:#fff;}
.ob-step-label.done{color:#fde68a;}

/* ── Card ── */
.ob-card{position:relative;overflow:hidden;overflow:clip;background:#fff;border-radius:24px;padding:38px 34px 32px;width:100%;max-width:640px;
         border:1px solid rgba(79,70,229,.10);box-shadow:0 18px 44px rgba(49,46,129,.16);}
.ob-card::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#4f46e5,#7c3aed,#db2777,#f59e0b);}
@media(max-width:500px){.ob-card{padding:28px 18px 24px;border-radius:20px;}}
.ob-card-title{font-size:1.3rem;font-weight:800;letter-spacing:-0.02em;margin-bottom:6px;color:var(--ob-ink);}
.ob-card-sub{font-size:.9rem;color:var(--ob-muted);margin-bottom:26px;line-height:1.55;}
.ob-step-panel{display:none;}
.ob-step-panel.active{display:block;animation:obIn .25s ease;}
@keyframes obIn{from{opacity:.4;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ── Form fields ── */
.ob-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;}
.ob-grid.single{grid-template-columns:1fr;}
.ob-full{grid-column:1/-1;}
.ob-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.ob-field label{font-size:.8rem;font-weight:600;color:#374151;letter-spacing:0;}
.ob-field label .req{color:var(--ob-pink);margin-left:2px;}
.ob-field input:not([type=checkbox]):not([type=radio]):not([type=file]),.ob-field select,.ob-field textarea{
  width:100%;border:1.5px solid var(--ob-line);border-radius:12px;padding:12px 14px;font-size:.93rem;font-family:var(--font,-apple-system,sans-serif);
  color:var(--ob-ink);background:var(--ob-soft);transition:border-color .2s,box-shadow .2s,background .2s;appearance:none;-webkit-appearance:none;}
.ob-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;}
.ob-field input:not([type=checkbox]):not([type=radio]):hover,.ob-field select:hover,.ob-field textarea:hover{border-color:rgba(79,70,229,.35);}
.ob-field input:not([type=checkbox]):not([type=radio]):focus,.ob-field select:focus,.ob-field textarea:focus{outline:none;border-color:var(--ob-indigo);background:#fff;box-shadow:0 0 0 4px rgba(79,70,229,.14);}
.ob-field input::placeholder,.ob-field textarea::placeholder{color:#a1a1b5;}
.ob-field textarea{resize:vertical;min-height:96px;line-height:1.55;}
.ob-field .hint{font-size:.76rem;color:var(--ob-muted);margin-top:2px;line-height:1.45;}
.ob-field .field-error{font-size:.76rem;color:#b91c1c;margin-top:2px;display:none;}
.req-miss{border-color:#e11d48 !important;box-shadow:0 0 0 4px rgba(225,29,72,.10) !important;}

/* ── File upload ── */
.ob-file-zone{border:2px dashed rgba(124,58,237,.35);border-radius:16px;padding:28px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;position:relative;background:linear-gradient(160deg,#f5f3ff 0%,#fff 80%);}
.ob-file-zone:hover{border-color:var(--ob-violet);background:#f5f3ff;}
.ob-file-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.ob-file-icon{font-size:2rem;margin-bottom:8px;}
.ob-file-zone h4{font-size:.94rem;font-weight:700;margin-bottom:4px;color:var(--ob-violet);}
.ob-file-zone p{font-size:.8rem;color:var(--ob-muted);}
.ob-file-selected{display:none;align-items:center;gap:10px;margin-top:12px;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:12px;padding:10px 14px;}
.ob-file-selected.show{display:flex;}
.ob-file-name{font-size:.84rem;font-weight:600;flex:1;color:#065f46;overflow-wrap:anywhere;}
.ob-file-remove{color:#b91c1c;font-size:.78rem;cursor:pointer;font-weight:600;}

/* ── Buttons (scoped to these pages only) ── */
.ob-page .pill-black{background:var(--ob-btn);color:#fff;border:0;font-weight:700;box-shadow:0 8px 20px rgba(79,70,229,.28);}
.ob-page .pill-black:hover{background:var(--ob-btn);filter:brightness(1.07);}
.ob-page .pill-apricot{background:linear-gradient(100deg,#059669,#0284c7);color:#fff;border:0;font-weight:700;box-shadow:0 8px 20px rgba(5,150,105,.28);}
.ob-page .pill-apricot:hover{background:linear-gradient(100deg,#059669,#0284c7);filter:brightness(1.07);}
.ob-page .pill:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;}
.ob-page .pill:focus-visible,.ob-back:focus-visible{outline:3px solid rgba(79,70,229,.35);outline-offset:2px;}

.ob-nav{display:flex;gap:12px;margin-top:30px;align-items:center;}
.ob-next{flex:1;}
.ob-back{background:#fff;border:1.5px solid rgba(79,70,229,.25);color:#4338ca;border-radius:999px;padding:12px 20px;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .2s;min-height:44px;}
.ob-back:hover{background:#eef2ff;}

/* ── Error / info banners ── */
.ob-error{background:#fff1f2;border:1px solid #fecdd3;border-left:4px solid #e11d48;border-radius:12px;padding:11px 14px;font-size:.86rem;color:#9f1239;margin-bottom:18px;}
.ob-info{background:linear-gradient(100deg,#eef2ff,#f5f3ff);border:1px solid #c7d2fe;border-radius:12px;padding:11px 14px;font-size:.85rem;color:#3730a3;line-height:1.55;margin-bottom:20px;}
.ob-info strong{color:#312e81;}
.ob-info a{color:#6d28d9;font-weight:600;}

/* ── Checkbox / radio (real, visible tick-boxes) ── */
.ob-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;background:var(--ob-soft);border:1px solid var(--ob-line);border-radius:12px;padding:12px 14px;}
.ob-check input[type=checkbox],.ob-check input[type=radio]{-webkit-appearance:auto;appearance:auto;width:18px;height:18px;min-width:18px;flex-shrink:0;margin:2px 0 0;accent-color:var(--ob-violet);cursor:pointer;}
.ob-check span{font-size:.86rem;color:var(--ob-ink);line-height:1.55;}
.ob-check span a{color:var(--ob-violet);text-decoration:underline;font-weight:600;}

/* ── Success state ── */
.ob-success{display:none;text-align:center;padding:20px 0;}
.ob-success .check{width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#059669,#0284c7);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:1.8rem;box-shadow:0 10px 24px rgba(5,150,105,.3);}
.ob-success h3{font-size:1.4rem;font-weight:800;letter-spacing:-0.02em;margin-bottom:8px;}
.ob-success p{font-size:.92rem;color:var(--ob-muted);line-height:1.6;max-width:420px;margin:0 auto 20px;}
.ob-success .next-steps{background:linear-gradient(160deg,#f5f3ff 0%,#fff 80%);border:1px solid var(--ob-line);border-radius:16px;padding:18px;text-align:left;margin-top:16px;}
.ob-success .next-steps h4{font-size:.9rem;font-weight:700;margin-bottom:10px;color:var(--ob-violet);}
.ob-success .next-steps li{font-size:.85rem;color:#374151;padding:7px 0;border-top:1px solid rgba(79,70,229,.1);display:flex;align-items:flex-start;gap:8px;line-height:1.5;}
.ob-success .next-steps li::before{content:'→';color:var(--ob-pink);font-weight:700;flex-shrink:0;}

/* ── Password strength ── */
.pw-strength{height:5px;border-radius:999px;background:#ececf4;margin-top:6px;overflow:hidden;}
.pw-fill{height:100%;border-radius:999px;transition:width .3s,background .3s;}
.pw-label{font-size:.74rem;color:var(--ob-muted);margin-top:3px;}

/* ── Password show/hide toggle ── */
.pw-wrap{position:relative;}
.pw-wrap input[type=password],.pw-wrap input[type=text]{padding-right:44px !important;}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;padding:4px;cursor:pointer;color:#8b8ba7;display:flex;align-items:center;}
.pw-toggle:hover{color:var(--ob-violet);}

/* ── Phones ── */
@media(max-width:560px){
  .ob-page{padding-top:26px;background-size:auto,100% 300px,auto;}
  .ob-grid{grid-template-columns:1fr;}
  .ob-nav{flex-wrap:wrap;}
  .ob-step-label{font-size:.62rem;}
}
@media(prefers-reduced-motion:reduce){.ob-step-panel.active{animation:none;} .ob-step-fill{transition:none;}}