/* ============================================
   USER SIGNUP CSS - Knowledge Wave India
   Colors: #7AC74F #FDFFFC #F7B32B #FF2E00 #140F2D
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: #FDFFFC; padding-top: 80px; min-height: 100vh; }
.container { max-width: 700px; margin: 0 auto; padding: 0 15px; }
img { max-width: 100%; height: auto; }

/* ========== PROGRESS BAR ========== */
.progress-bar { display: flex; justify-content: center; align-items: center; gap: 0; padding: 30px 0 20px; flex-wrap: wrap; }
.step-dot { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.step-dot:not(:last-child)::after { content: ''; position: absolute; top: 18px; left: 50%; width: 80px; height: 2px; background: #e0e0e0; z-index: 0; }
.step-dot.active::after, .step-dot.done::after { background: #7AC74F; }
.dot-circle { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #e0e0e0; background: #FDFFFC; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #aaa; z-index: 1; transition: all .3s; }
.step-dot.active .dot-circle { border-color: #7AC74F; background: #7AC74F; color: #FDFFFC; }
.step-dot.done .dot-circle { border-color: #7AC74F; background: #7AC74F; color: #FDFFFC; }
.dot-label { font-size: 11px; font-weight: 600; color: #aaa; white-space: nowrap; }
.step-dot.active .dot-label { color: #7AC74F; }

/* ========== CARD ========== */
.auth-card { background: #FDFFFC; border-radius: 20px; padding: 35px; box-shadow: 0 8px 40px rgba(0,0,0,0.08); border: 1px solid rgba(122, 199, 79, 0.1); margin-bottom: 40px; }
.step-section { display: none; }
.step-section.active { display: block; }
.card-title { font-size: 22px; font-weight: 800; color: #140F2D; margin-bottom: 6px; }
.card-sub { font-size: 14px; color: #888; margin-bottom: 24px; }

/* ========== PACKAGE GRID ========== */
.pkg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.pkg-card { border: 2px solid #e8e8e8; border-radius: 14px; padding: 16px; cursor: pointer; transition: all .25s; text-align: center; background: #fafafa; }
.pkg-card:hover { border-color: #7AC74F; background: #f0fbe8; }
.pkg-card.selected { border-color: #7AC74F; background: linear-gradient(135deg,#f0fbe8,#e0f5d0); box-shadow: 0 4px 16px rgba(122, 199, 79, 0.2); }
.pkg-icon { font-size: 28px; margin-bottom: 8px; }
.pkg-name { font-size: 15px; font-weight: 700; color: #140F2D; }
.pkg-price { font-size: 13px; color: #7AC74F; font-weight: 600; margin-top: 3px; }
.pkg-old { text-decoration: line-through; color: #bbb; font-size: 11px; margin-right: 4px; }
.pkg-note { font-size: 11px; color: #888; margin-top: 4px; font-weight: 500; }

/* ========== FORM ========== */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: 13px; font-weight: 600; color: #140F2D; }
.inp-wrap { position: relative; display: flex; align-items: center; }
.inp-wrap i.lead { position: absolute; left: 14px; color: #aaa; font-size: 13px; z-index: 1; }
.inp-wrap input, .inp-wrap select { width: 100%; padding: 13px 14px 13px 40px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 14px; font-family: 'Inter', sans-serif; outline: none; background: #FDFFFC; transition: all .3s; color: #333; }
.inp-wrap select { appearance: none; cursor: pointer; }
.inp-wrap input:focus, .inp-wrap select:focus { border-color: #7AC74F; background: #FDFFFC; box-shadow: 0 0 0 3px rgba(122, 199, 79, 0.1); }
.inp-wrap .arrow { position: absolute; right: 12px; color: #aaa; font-size: 11px; pointer-events: none; }
.inp-wrap input.err, .inp-wrap select.err { border-color: #FF2E00; }
.err-msg { font-size: 11px; color: #FF2E00; display: none; }
.err-msg.show { display: block; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.eye-btn { position: absolute; right: 12px; color: #aaa; cursor: pointer; font-size: 13px; z-index: 2; }
.eye-btn:hover { color: #7AC74F; }

/* ========== SPONSOR BADGE ========== */
.sponsor-badge { display: none; align-items: center; gap: 10px; background: linear-gradient(135deg,#f0fbe8,#e8f5d0); border: 1px solid rgba(122, 199, 79, 0.4); border-radius: 10px; padding: 12px 16px; margin-top: -8px; margin-bottom: 16px; }
.sponsor-badge.show { display: flex; }
.sponsor-avatar { width: 38px; height: 38px; border-radius: 50%; background: #7AC74F; display: flex; align-items: center; justify-content: center; color: #FDFFFC; font-weight: 700; font-size: 16px; }
.sponsor-name { font-weight: 700; font-size: 14px; color: #140F2D; }
.sponsor-rank { font-size: 11px; color: #140F2D; font-weight: 500; }
.sponsor-loading { display: none; align-items: center; gap: 8px; font-size: 13px; color: #888; margin-top: -8px; margin-bottom: 16px; }
.sponsor-loading.show { display: flex; }

/* ========== POLICY ========== */
.check-wrap { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #555; margin-bottom: 10px; cursor: pointer; }
.check-wrap input { width: 16px; height: 16px; min-width: 16px; accent-color: #7AC74F; margin-top: 2px; cursor: pointer; }
.check-wrap a { color: #7AC74F; font-weight: 600; text-decoration: none; }
.check-wrap a:hover { text-decoration: underline; }

/* ========== BUTTONS ========== */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #7AC74F; color: #FDFFFC; font-weight: 700; font-size: 15px; padding: 14px 28px; border: 2px solid #7AC74F; border-radius: 50px; cursor: pointer; transition: all .3s; font-family: 'Inter', sans-serif; width: 100%; }
.btn-primary:hover { background: transparent; color: #7AC74F; border-color: #7AC74F; transform: translateY(-2px); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-back { background: none; border: 2px solid #e0e0e0; color: #666; font-size: 14px; font-weight: 600; padding: 10px 22px; border-radius: 50px; cursor: pointer; font-family: 'Inter', sans-serif; transition: all .3s; }
.btn-back:hover { border-color: #7AC74F; color: #7AC74F; }
.btn-row { display: flex; gap: 12px; align-items: center; margin-top: 20px; }

/* ========== TOAST ========== */
.toast { position: fixed; top: 95px; right: 20px; padding: 14px 22px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #FDFFFC; z-index: 99999; transform: translateX(130%); transition: transform .4s cubic-bezier(.175,.885,.32,1.275); max-width: 300px; box-shadow: 0 6px 24px rgba(0,0,0,.15); }
.toast.show { transform: translateX(0); }
.toast.success { background: #7AC74F; }
.toast.error { background: #FF2E00; }

/* ========== SCROLL TOP ========== */
.scroll-top { position: fixed; bottom: 30px; right: 30px; width: 48px; height: 48px; background: #7AC74F; color: #FDFFFC; border: none; border-radius: 50%; cursor: pointer; font-size: 18px; z-index: 999; display: none; box-shadow: 0 4px 16px rgba(122, 199, 79, 0.4); transition: all .3s; }
.scroll-top.show { display: flex; align-items: center; justify-content: center; }
.scroll-top:hover { background: #140F2D; color: #7AC74F; transform: translateY(-5px); }

/* ========== RESPONSIVE ========== */
@media (max-width: 500px) {
    .pkg-grid { grid-template-columns: 1fr; }
    .two-col { grid-template-columns: 1fr; }
    .step-dot:not(:last-child)::after { width: 40px; }
    .auth-card { padding: 25px 18px; }
    .card-title { font-size: 19px; }
}