/* REGISTRATION CSS */
.selected-pkg-bar{background:var(--primary);padding:14px 0;position:sticky;top:var(--header-h);z-index:50}
.selected-pkg-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.selected-pkg-info{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.selected-label{font-size:.8rem;color:rgba(255,255,255,.7)}
.selected-pkg-info strong{color:#fff;font-size:.95rem}
.selected-price{background:rgba(255,255,255,.15);color:#fff;padding:3px 12px;border-radius:100px;font-size:.82rem;font-weight:600}
.change-pkg-link{font-size:.82rem;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:6px;transition:color .2s}
.change-pkg-link:hover{color:#fff}
.reg-progress-wrap{background:var(--bg-light);border-bottom:1px solid var(--border);padding:20px 0}
.reg-progress{display:flex;align-items:center;justify-content:center;max-width:560px;margin:0 auto}
.prog-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.prog-circle{width:42px;height:42px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.95rem;transition:all var(--transition);border:2px solid var(--border)}
.prog-step.active .prog-circle{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 0 0 4px rgba(0,86,179,.15)}
.prog-step.done .prog-circle{background:var(--success);color:#fff;border-color:var(--success)}
.prog-step span{font-size:.75rem;font-weight:600;color:var(--text-muted);white-space:nowrap}
.prog-step.active span{color:var(--primary)}
.prog-step.done span{color:var(--success)}
.prog-line{flex:1;height:2px;background:var(--border);margin:0 4px;margin-bottom:20px;transition:background var(--transition)}
.prog-line.done{background:var(--success)}
.reg-section{padding:48px 0 80px;background:var(--bg-section)}
.reg-step{display:none}
.reg-step.active{display:block;animation:fadeInUp .4s ease}
.reg-card{background:#fff;border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow-sm);max-width:900px;margin:0 auto}
.reg-card-header{display:flex;align-items:center;gap:20px;padding:28px 36px;background:var(--dark);border-bottom:1px solid rgba(255,255,255,.08)}
.reg-card-header>i{font-size:2rem;color:var(--accent);flex-shrink:0}
.reg-card-header h2{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:#fff;margin-bottom:4px}
.reg-card-header p{font-size:.87rem;color:rgba(255,255,255,.6)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:32px 36px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group.full{grid-column:1/-1}
label{font-size:.84rem;font-weight:600;color:var(--dark);display:flex;align-items:center;gap:8px}
.req{color:var(--error);font-size:.9rem}
.optional-tag{font-size:.68rem;font-weight:600;background:var(--bg-light);color:var(--text-muted);padding:1px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.06em}
.bio-counter{margin-left:auto;font-size:.75rem;font-weight:500;color:var(--text-muted);font-family:var(--font-body)}
.bio-counter.warning{color:#d97706}
.bio-counter.danger{color:var(--error);font-weight:700}
.input-wrap{position:relative;display:flex;align-items:center}
.input-icon{position:absolute;left:13px;color:var(--text-muted);font-size:.9rem;pointer-events:none;z-index:1}
.input-wrap input,.input-wrap select,.input-wrap textarea{width:100%;padding:11px 40px 11px 38px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.9rem;color:var(--text);background:#fff;transition:all var(--transition);outline:none;-webkit-appearance:none;appearance:none}
.input-wrap textarea{padding:12px 40px 12px 38px;resize:vertical;font-size:.88rem;line-height:1.6}
.select-wrap select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.input-wrap input:focus,.input-wrap select:focus,.input-wrap textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,86,179,.1)}
.input-wrap input.valid,.input-wrap select.valid,.input-wrap textarea.valid{border-color:var(--success)}
.input-wrap input.invalid,.input-wrap select.invalid,.input-wrap textarea.invalid{border-color:var(--error)}
.field-status{position:absolute;right:12px;font-size:.85rem}
.field-status.valid{color:var(--success)}
.field-status.invalid{color:var(--error)}
.toggle-pw{position:absolute;right:12px;background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:.9rem;padding:4px;transition:color .2s}
.toggle-pw:hover{color:var(--primary)}
.field-hint{font-size:.76rem;color:var(--text-muted)}
.field-error{font-size:.76rem;color:var(--error);font-weight:500;display:none}
.field-error.show{display:block}
.pw-strength{display:flex;align-items:center;gap:10px;margin-top:4px}
.pw-bar{flex:1;height:4px;background:var(--border);border-radius:4px;overflow:hidden}
#pw-bar-fill{display:block;height:100%;width:0;border-radius:4px;transition:all .4s}
#pw-strength-label{font-size:.72rem;font-weight:600;white-space:nowrap}
.bio-progress-bar{height:3px;background:var(--border);border-radius:4px;overflow:hidden;margin-top:4px}
#bio-progress-fill{display:block;height:100%;width:0;background:var(--primary);border-radius:4px;transition:all .3s}
.keyword-section-title{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--bg-light);border-radius:var(--radius-sm);border-left:3px solid var(--primary)}
.keyword-section-title>i{color:var(--primary);font-size:1.1rem;margin-top:2px}
.keyword-section-title strong{display:block;font-size:.92rem;color:var(--dark);margin-bottom:2px}
.keyword-section-title span{font-size:.82rem;color:var(--text-muted)}
.textarea-wrap{align-items:flex-start}
.textarea-wrap .input-icon{top:13px}
.textarea-wrap .field-status{top:13px}
.step-nav{display:flex;align-items:center;justify-content:space-between;padding:24px 36px;border-top:1px solid var(--border);background:var(--bg-light)}
.order-summary{background:var(--bg-light);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin:24px 36px}
.order-summary h3{font-size:.95rem;font-weight:700;color:var(--dark);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.order-summary h3 i{color:var(--primary)}
.order-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:.9rem}
.order-row:last-child{border:none}
.order-row.total{font-size:1.05rem;font-weight:700;padding-top:12px}
.order-row.total strong{color:var(--primary);font-size:1.2rem}
.payment-toggle{display:flex;flex-direction:column;gap:14px;margin:0 36px 24px}
.payment-opt{display:flex;align-items:center;gap:16px;padding:18px 20px;border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all var(--transition);flex-wrap:wrap}
.payment-opt:hover,.payment-opt.active{border-color:var(--primary);background:var(--primary-light)}
.opt-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;transition:all var(--transition)}
.payment-opt.active .opt-radio{border-color:var(--primary);background:var(--primary);box-shadow:inset 0 0 0 3px white}
.opt-content{display:flex;align-items:center;gap:14px;flex:1}
.opt-content i{font-size:1.3rem;color:var(--primary)}
.opt-content strong{display:block;font-size:.92rem;font-weight:700;color:var(--dark);margin-bottom:2px}
.opt-content span{font-size:.82rem;color:var(--text-muted)}
.opt-logos{display:flex;gap:8px;margin-left:auto}
.gateway-badge{padding:4px 12px;border-radius:4px;font-size:.72rem;font-weight:700}
.gateway-badge.paystack{background:#0BA4DB22;color:#0077B6}
.gateway-badge.stripe{background:#635BFF22;color:#635BFF}
.payment-panel{display:none;margin:0 36px 24px}
.payment-panel.active{display:block}
.gateway-select{display:flex;gap:16px;flex-wrap:wrap}
.gateway-opt{flex:1;min-width:200px;display:flex;align-items:center;gap:14px;padding:16px 20px;border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition)}
.gateway-opt:has(input:checked),.gateway-opt.active{border-color:var(--primary);background:var(--primary-light)}
.gw-logo{font-size:1rem;font-weight:800;margin-bottom:4px}
.paystack-logo{color:#0BA4DB}
.stripe-logo{color:#635BFF}
.gw-content span{font-size:.8rem;color:var(--text-muted);line-height:1.5}
.bank-transfer-info{background:var(--bg-light);border-radius:var(--radius-sm);padding:24px}
.bank-note{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--text);line-height:1.6;margin-bottom:16px;background:#fff8e6;border:1px solid #f5c842;border-radius:var(--radius-sm);padding:12px 16px}
.bank-note i{color:#c89000;flex-shrink:0;margin-top:2px}
.privacy-check{margin:0 36px 24px}
.checkbox-label{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:.87rem;color:var(--text);line-height:1.6}
.checkbox-label input[type="checkbox"]{display:none}
.checkbox-custom{width:20px;height:20px;border-radius:4px;border:2px solid var(--border);flex-shrink:0;margin-top:2px;background:#fff;transition:all var(--transition);display:flex;align-items:center;justify-content:center}
.checkbox-label input:checked~.checkbox-custom{background:var(--primary);border-color:var(--primary)}
.checkbox-label input:checked~.checkbox-custom::after{content:'✓';color:white;font-size:.75rem;font-weight:700}
.checkbox-label a{color:var(--primary);font-weight:600}
.btn-submit{min-width:240px;justify-content:center}
.security-bar{background:var(--dark);padding:14px 0}
.security-inner{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}
.security-inner span{font-size:.8rem;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:7px}
.security-inner span i{color:var(--success)}
@media(max-width:768px){.form-grid{grid-template-columns:1fr;padding:24px 20px}.form-group.full{grid-column:1}.reg-card-header{padding:20px}.step-nav{padding:18px 20px;flex-direction:column;gap:12px}.step-nav .btn{width:100%;justify-content:center}.order-summary,.payment-toggle,.payment-panel,.privacy-check{margin-left:20px;margin-right:20px}.gateway-select{flex-direction:column}.security-inner{gap:16px}.prog-step span{display:none}}
