/* apply.ochst.edu.ng: the original application site's look (navy + gold, Inter, split panel, profile layout).
   Every navy surface uses var(--grad-navy), the same gradient as the Sign in button. */
.area-apply{background:var(--paper)}

/* ---------- Guest pages: split panel ---------- */
.split{display:flex;min-height:100vh}
.split-left{flex:1.15;display:flex;align-items:center;position:relative;color:#fff;padding:clamp(1.5rem,4vw,3.25rem);background:var(--grad-navy);overflow:hidden}
.split-left::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 6%,rgba(243,189,0,.16),transparent 42%),radial-gradient(circle at 90% 96%,rgba(255,255,255,.09),transparent 50%);pointer-events:none}
.split-left::after{content:"";position:absolute;width:520px;height:520px;right:-220px;top:-200px;border-radius:50%;border:70px solid rgba(255,255,255,.05);pointer-events:none}
.split-left>div{position:relative;max-width:620px;margin:0 auto;width:100%}
.lockup{display:flex;gap:1rem;align-items:center;margin-bottom:2rem}
.lockup img{width:84px;height:auto;background:#fff;border-radius:50%;padding:9px;border:3px solid var(--accent);box-shadow:0 8px 24px rgba(0,0,0,.25);flex:none}
.lockup h1{color:#fff;font-size:1.45rem;margin:0}
.lockup p{margin:.2rem 0 0;color:var(--accent);font-weight:600;font-size:.95rem}
.lead{font-size:1.05rem;color:#dbe7f5;max-width:52ch}
.features{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:1.75rem 0}
.feature{display:flex;gap:.8rem;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:.95rem;backdrop-filter:blur(6px)}
.feature i{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:10px;background:rgba(243,189,0,.2);color:var(--accent)}
.feature svg{width:1.2rem;height:1.2rem}
.feature h4{margin:0;color:#fff;font-size:.95rem} .feature p{margin:.15rem 0 0;font-size:.84rem;color:#c9d9ee}
.notice{background:rgba(0,0,0,.2);border-left:4px solid var(--accent);border-radius:10px;padding:1rem 1.15rem;font-size:.88rem;color:#dbe7f5}
.notice h4{margin:0 0 .4rem;color:#fff;font-size:.95rem} .notice p{margin:0 0 .5rem;max-width:none}
.notice ol{margin:0 0 .6rem;padding-left:1.2rem}
.split-right{flex:1;display:grid;place-items:center;padding:clamp(1.25rem,4vw,3rem);background:linear-gradient(180deg,#f8fafc,#eef3fa)}
.auth-card{width:100%;max-width:460px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:2rem;box-shadow:var(--shadow-lg);border-top:4px solid var(--accent)}
.auth-card .mini-logo{display:none;height:56px;margin-bottom:1rem}
.auth-card h2{font-size:1.4rem;margin-bottom:.25rem}
.auth-card .sub{color:var(--muted);margin-bottom:1.5rem}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:4px;margin-bottom:1.5rem}
.auth-tabs a{text-align:center;padding:.5rem;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:600;font-size:.92rem}
.auth-tabs a.on{background:var(--grad-navy);color:#fff;box-shadow:var(--shadow-sm)}
.auth-card .actions{margin-top:.5rem}
.cta-row{display:grid;gap:.75rem;margin:1.25rem 0}
.programmes{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.5rem}
.programmes li{padding:.7rem .9rem;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;background:var(--paper);font-weight:600;color:var(--ink)}
.how{display:grid;gap:.6rem;margin:1.25rem 0 0;padding:0;list-style:none;counter-reset:s}
.how li{counter-increment:s;display:flex;gap:.75rem;align-items:center;font-size:.92rem;color:var(--ink)}
.how li::before{content:counter(s);flex:none;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--grad-navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem}

/* ---------- Signed in: header, profile sidebar, content area (as on the original dashboard) ---------- */
.ap{max-width:1400px;margin:0 auto;padding:20px}
.ap-top{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;background:var(--grad-navy);color:#fff;padding:14px 26px;border-radius:var(--radius);margin-bottom:26px;box-shadow:var(--shadow-lg)}
.ap-top::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(243,189,0,.14),transparent 50%),radial-gradient(circle at 80% 90%,rgba(255,255,255,.08),transparent 50%);pointer-events:none}
.ap-top>*{position:relative}
.ap-brand{display:flex;align-items:center;gap:16px;color:#fff;text-decoration:none}
.ap-brand .logo{width:52px;height:52px;border-radius:50%;background:#fff;border:2px solid var(--accent);display:grid;place-items:center;flex:none}
.ap-brand .logo img{width:36px;height:auto}
.ap-brand b{display:block;font-size:1.1rem;font-weight:650;line-height:1.25;color:#fff}
.ap-brand small{display:flex;align-items:center;gap:.35rem;color:rgba(255,255,255,.88);font-size:.84rem}
.ap-right{display:flex;align-items:center;gap:12px}
.session-badge{display:flex;align-items:center;gap:10px;padding:7px 16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:50px;backdrop-filter:blur(8px)}
.session-badge svg{width:1.3rem;height:1.3rem;color:var(--accent)}
.session-badge small{display:block;font-size:.72rem;opacity:.85;line-height:1.2} .session-badge b{display:block;font-size:.9rem;line-height:1.2}
.btn-out{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:8px;border:0;background:var(--bad);color:#fff;font:500 .9rem var(--sans);cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn-out:hover{transform:translateY(-2px);box-shadow:var(--shadow);background:#dc2626}
.btn-out svg{width:1.05em;height:1.05em}

.ap-grid{display:grid;grid-template-columns:310px minmax(0,1fr);gap:26px;align-items:start}
.ap-side{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;position:sticky;top:20px}
.ap-profile{padding:28px 20px 24px;text-align:center;background:var(--grad-navy);color:#fff;position:relative}
.ap-profile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--accent),#ffe27a,var(--accent))}
.avatar{width:104px;height:104px;border-radius:50%;margin:0 auto 14px;overflow:hidden;background:#fff;border:4px solid var(--accent);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--primary)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar svg{width:44px;height:44px}
.ap-profile h3{color:#fff;font-size:1.1rem;margin:0 0 .25rem}
.ap-profile p{margin:0 0 .9rem;font-size:.86rem;opacity:.92;display:flex;gap:.4rem;align-items:center;justify-content:center;overflow-wrap:anywhere}
.ap-profile p svg{width:.95rem;height:.95rem;flex:none}
.pill{display:inline-block;padding:.3rem .95rem;border-radius:50px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--accent);color:var(--primary-dark)}
.pill.ok{background:#34d399;color:#053b27}
.ap-progress{padding:18px 20px;border-top:1px solid var(--line)}
.ap-progress h4{display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:var(--muted);margin:0 0 .8rem;font-weight:600}
.ap-progress .row{display:flex;justify-content:space-between;font-size:.82rem;margin-bottom:.35rem;color:var(--ink)}
.bar-track{height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:4px}
.ap-nav{padding:10px 12px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.ap-nav a,.ap-nav button{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border-radius:9px;border:0;background:none;color:var(--text);font:600 .9rem var(--sans);text-decoration:none;cursor:pointer;text-align:left;width:100%}
.ap-nav svg{width:1.1rem;height:1.1rem;color:var(--primary-light);flex:none}
.ap-nav a:hover,.ap-nav button:hover{background:var(--info-tint);color:var(--primary)}
.ap-nav a[aria-current=page]{background:var(--grad-navy);color:#fff}
.ap-nav a[aria-current=page] svg{color:var(--accent)}
.ap-nav .print{background:var(--accent);color:var(--primary-dark);margin-top:6px} .ap-nav .print svg{color:var(--primary-dark)}
.ap-nav .print:hover{background:#ffd54f;color:var(--primary-dark)}
.ap-content{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:30px;min-width:0}
.ap-foot{max-width:none;text-align:center;color:var(--muted);font-size:.82rem;padding:1.5rem 0 .5rem}

.ap-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:26px;padding-bottom:18px;border-bottom:2px solid var(--line)}
.ap-head h1{display:flex;align-items:center;gap:.6rem;margin:0;font-size:1.5rem;color:var(--primary-dark)}
.ap-head h1 svg{width:1.4rem;height:1.4rem;color:var(--accent)}
.idpill{background:var(--paper);border:1px solid var(--line);padding:.45rem 1rem;border-radius:50px;font-size:.86rem;color:var(--muted)}
.idpill strong{color:var(--primary);margin-left:.3rem}

/* Notices from the school */
.notes{display:grid;gap:.7rem;margin-bottom:1.5rem}
.note{display:flex;gap:.8rem;padding:.9rem 1.1rem;border-radius:10px;background:var(--info-tint);border-left:4px solid var(--primary-light);color:var(--primary-dark)}
.note svg{width:1.2rem;height:1.2rem;flex:none;margin-top:.15rem}
.note b{display:block;color:var(--ink)} .note p{margin:.15rem 0 0;font-size:.92rem;max-width:none}
.note.important{background:var(--warn-tint);border-left-color:var(--accent);color:#5c4700}
.note.urgent{background:var(--bad-tint);border-left-color:var(--bad);color:var(--bad)}

/* Payment required (the original's gold card) */
.pay-card{background:linear-gradient(135deg,#fef9e7,#fff 70%);border:2px solid var(--accent);border-radius:20px;padding:2.25rem 1.75rem;text-align:center;box-shadow:var(--shadow-lg)}
.lock{width:68px;height:68px;margin:0 auto 1rem;border-radius:50%;background:var(--grad-navy);color:var(--accent);display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,64,128,.3)}
.lock svg{width:30px;height:30px}
.pay-card h2{font-size:1.5rem;color:var(--primary-dark);margin-bottom:.4rem}
.pay-card>p{margin:0 auto 1rem;color:var(--muted)}
.price{font:800 2.8rem var(--sans);color:var(--primary-dark);letter-spacing:-.02em;margin:.5rem 0 1rem}
.methods{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem}
.methods span{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:.8rem;font-weight:600;color:var(--muted)}
.methods svg{width:1rem;height:1rem;color:var(--primary-light)}
.pay-card .btn{font-size:1.05rem;padding:.9rem 2.4rem}
.pay-card>p.secure,.secure{margin:1.25rem 0 0;display:flex;gap:.4rem;align-items:center;justify-content:center;font-size:.82rem;color:var(--muted);max-width:none}
.secure svg{width:1rem;height:1rem;color:var(--ok)}
.verify{margin-top:1.5rem;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px}
.verify summary{cursor:pointer;padding:.9rem 1.1rem;font-weight:600;color:var(--primary);display:flex;gap:.5rem;align-items:center;list-style:none}
.verify summary::-webkit-details-marker{display:none}
.verify[open] summary{border-bottom:1px solid var(--line)}
.verify form{padding:1rem 1.1rem}
.verify .row{display:flex;gap:.6rem;flex-wrap:wrap}
.verify input{flex:1;min-width:14rem}
.locked-note{display:flex;gap:.6rem;align-items:center;justify-content:center;margin-top:1.25rem;padding:.9rem;border-radius:10px;background:var(--paper);color:var(--muted);font-size:.92rem}
.locked-note svg{width:1.1rem;height:1.1rem}

/* Journey */
.journey{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:j}
.journey li{position:relative;text-align:center;padding:0 .4rem;counter-increment:j}
.journey li::before{content:counter(j);position:relative;z-index:1;width:2.4rem;height:2.4rem;margin:0 auto .6rem;border-radius:50%;display:grid;place-items:center;font-weight:700;background:#fff;border:2px solid var(--line);color:var(--muted)}
.journey li::after{content:"";position:absolute;top:1.15rem;left:calc(50% + 1.4rem);right:calc(-50% + 1.4rem);height:3px;background:var(--line)}
.journey li:last-child::after{display:none}
.journey li.done::before{content:"\2713";background:var(--grad-navy);border-color:var(--primary-dark);color:#fff}
.journey li.done::after{background:var(--primary-light)}
.journey li.now::before{background:var(--accent);border-color:var(--accent);color:var(--primary-dark);box-shadow:0 0 0 6px rgba(243,189,0,.22)}
.journey b{display:block;font-size:.88rem;color:var(--ink)} .journey small{color:var(--muted);font-size:.78rem}
.journey li:not(.done):not(.now) b{color:var(--muted)}

.next{border-radius:16px;padding:1.6rem 1.75rem;background:var(--grad-navy);color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.next::before{content:"";position:absolute;right:-60px;top:-80px;width:240px;height:240px;border-radius:50%;background:rgba(243,189,0,.18);filter:blur(8px)}
.next>*{position:relative}
.next h2{color:#fff;margin-bottom:.35rem;font-size:1.3rem}
.next p{color:#dbe7f5;margin-bottom:1.1rem}
.next small{display:block;color:var(--accent);font-weight:700;margin-bottom:.35rem;letter-spacing:.02em}
.next.gold{background:linear-gradient(135deg,#ffe27a,var(--accent) 60%,#e0a800);color:#2b2000}
.next.gold h2,.next.gold p,.next.gold small{color:#2b2000}
.next.good{background:linear-gradient(135deg,#0f7a4d,#0a5c3a)}
.next .btn.ghost{border-color:transparent}
.next .btn.light{background:#fff;color:var(--primary-dark);border-color:#fff}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem;margin-top:1.5rem}
.fact{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.9rem 1.05rem}
.fact span{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.15rem} .fact b{color:var(--ink);font-size:.98rem;overflow-wrap:anywhere}

/* Form pages inside the content area */
.steps-nav{display:flex;gap:.45rem;margin-bottom:1.5rem;flex-wrap:wrap}
.steps-nav span{display:inline-block;padding:.4rem 1rem;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:.86rem;font-weight:600;color:var(--muted)}
.steps-nav a span:hover{border-color:var(--primary-light);color:var(--primary)}
.steps-nav span.on{background:var(--grad-navy);color:#fff;border-color:var(--primary-dark)}
.steps-nav span.locked{opacity:.55}
.ap-content .panel{box-shadow:none;background:#fff;border:1px solid var(--line);border-top:3px solid var(--accent)}
.ap-content .panel h2{color:var(--primary-dark);padding-bottom:.6rem;border-bottom:1px solid var(--line);margin-bottom:1rem}
.ap-content>h1{font-size:1.45rem;color:var(--primary-dark)}
.ap-content>h1+p{margin-bottom:1.4rem}
.offer{border:1px solid #a6dcc0;background:linear-gradient(135deg,#f0fbf5,#e3f6ec);border-radius:16px;padding:2rem;box-shadow:var(--shadow-sm)}
.offer h1{margin-bottom:.35em;color:var(--ok)}

@media (max-width:1040px){
  .ap-grid{grid-template-columns:1fr} .ap-side{position:static;display:grid;grid-template-columns:1fr}
  .ap-profile{display:grid;grid-template-columns:auto 1fr;gap:0 1rem;text-align:left;align-items:center;padding:18px}
  .ap-profile .avatar{grid-row:1/span 3;margin:0;width:78px;height:78px}
  .ap-profile p{justify-content:flex-start;margin:0 0 .5rem} .ap-profile .pill{justify-self:start}
  .ap-nav{flex-direction:row;flex-wrap:wrap} .ap-nav a,.ap-nav button{width:auto}
}
@media (max-width:980px){
  .split{flex-direction:column-reverse} .split-left{padding-bottom:2rem} .features{grid-template-columns:1fr}
  .split-right{padding:1.5rem 1rem 2rem} .auth-card .mini-logo{display:block}
}
@media (max-width:760px){
  .ap{padding:12px} .ap-content{padding:18px 16px} .ap-top{padding:12px 16px}
  .session-badge{display:none}
  .journey{grid-template-columns:1fr;gap:.9rem} .journey li{display:flex;text-align:left;align-items:center;gap:.8rem;padding:0}
  .journey li::before{margin:0;flex:none} .journey li::after{display:none}
  .price{font-size:2.2rem}
}
@media (max-width:520px){
  .split-left{padding:1.5rem 1.1rem} .lockup img{width:64px} .lockup h1{font-size:1.2rem}
  .auth-card{padding:1.4rem 1.15rem;border-radius:14px}
  .ap-profile{grid-template-columns:1fr;text-align:center} .ap-profile .avatar{grid-row:auto;margin:0 auto}
  .ap-profile p{justify-content:center} .ap-profile .pill{justify-self:center}
  .ap-nav a,.ap-nav button{flex:1 1 calc(50% - .5rem);min-height:46px}
  .pay-card{padding:1.1rem} .steps-nav{overflow-x:auto;flex-wrap:nowrap;margin-inline:-.25rem;padding:.1rem .25rem .6rem;scrollbar-width:none;-webkit-overflow-scrolling:touch} .steps-nav::-webkit-scrollbar{display:none} .steps-nav>*,.steps-nav span{flex:none;white-space:nowrap}
}
@media print{.ap-top,.ap-side,.ap-foot{display:none!important} .ap-grid{display:block} .ap-content{box-shadow:none;padding:0}}