/* ============================================================
   GovindRajbhar — Extended UI Styles v2
   Includes: Kit Selector, Wallet Page, Checkout, Order Timeline,
             User Sidebar, Admin Wallet, Dashboard Stats
   ============================================================ */

/* ORDER TIMELINE */
.order-status-track { display:flex; gap:0; align-items:flex-start; }
.track-step { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
.track-step:not(:last-child)::after { content:''; position:absolute; top:8px; left:50%; width:100%; height:2px; background:#e2e8f0; z-index:0; }
.track-step.done:not(:last-child)::after { background:#16a34a; }
.track-dot { width:18px; height:18px; border-radius:50%; background:#e2e8f0; border:2px solid #e2e8f0; z-index:1; position:relative; flex-shrink:0; }
.track-step.done .track-dot { background:#16a34a; border-color:#16a34a; }
.track-label { font-size:0.62rem; font-weight:700; color:#94a3b8; margin-top:4px; text-align:center; line-height:1.2; }
.track-step.done .track-label { color:#16a34a; }

/* KIT SELECTOR */
.kit-selector-hero { background:linear-gradient(135deg,#f0fdf4,#dcfce7 50%,#ecfdf5); padding:4rem 0 3rem; text-align:center; border-bottom:1px solid #d1fae5; }
.problem-selector { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media(max-width:600px){ .problem-selector { grid-template-columns:1fr; } }
.problem-option { background:white; border:2px solid #e2e8f0; border-radius:1rem; padding:1.5rem; cursor:pointer; text-align:center; transition:all 0.2s ease; }
.problem-option:hover { border-color:#16a34a; box-shadow:0 4px 20px rgba(22,163,74,.15); transform:translateY(-2px); }
.problem-option.selected { border-color:#16a34a; background:#f0fdf4; box-shadow:0 0 0 3px rgba(22,163,74,.15); }
.problem-icon { font-size:2.5rem; margin-bottom:0.75rem; }
.problem-name { font-weight:800; font-size:1rem; color:#14532d; margin-bottom:0.25rem; }
.problem-desc { font-size:0.82rem; color:#64748b; }
.recommend-highlight { background:linear-gradient(135deg,#14532d,#16a34a); color:white; border-radius:1.5rem; padding:2.5rem; text-align:center; margin-bottom:2rem; }
.recommend-label { display:inline-block; background:rgba(255,255,255,.2); padding:0.3rem 1rem; border-radius:999px; font-size:0.82rem; font-weight:700; margin-bottom:1rem; }

/* KIT CARDS */
.kit-card { background:white; border-radius:1.25rem; padding:1.75rem; border:2px solid #e2e8f0; transition:all 0.25s; position:relative; display:flex; flex-direction:column; gap:1rem; }
.kit-card:hover { border-color:#16a34a; transform:translateY(-3px); box-shadow:0 10px 30px rgba(22,163,74,.15); }
.kit-card.recommended { border-color:#16a34a; box-shadow:0 0 0 3px rgba(34,197,94,.2),0 10px 30px rgba(22,163,74,.2); }
.kit-badge { position:absolute; top:-1px; right:1rem; background:#f0fdf4; color:#16a34a; font-size:0.72rem; font-weight:800; padding:0.25rem 0.75rem; border-radius:0 0 0.5rem 0.5rem; border:1px solid #d1fae5; border-top:none; }
.kit-badge.popular { background:#dbeafe; color:#1d4ed8; border-color:#bfdbfe; }
.kit-badge.best { background:#16a34a; color:white; border-color:#15803d; }
.kit-icon { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 0.75rem; }
.kit-name { font-weight:900; font-size:1.1rem; color:#1e293b; }
.kit-price { font-size:2rem; font-weight:900; color:var(--dark-green,#14532d); }
.kit-original-price { font-size:1rem; color:#94a3b8; text-decoration:line-through; }
.kit-discount-badge { background:#fee2e2; color:#dc2626; font-size:0.72rem; font-weight:800; padding:0.15rem 0.5rem; border-radius:4px; }
.kit-features { list-style:none; padding:0; display:flex; flex-direction:column; gap:0.5rem; }
.kit-features li { display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; color:#475569; }
.kit-features li i { color:#16a34a; font-size:0.82rem; flex-shrink:0; }
.kit-duration-badge { display:inline-flex; align-items:center; gap:0.4rem; padding:0.3rem 0.75rem; background:#f0fdf4; color:#166534; border:1px solid #d1fae5; border-radius:999px; font-size:0.75rem; font-weight:700; }

/* CHECKOUT */
.checkout-container { padding-top:2rem; padding-bottom:4rem; }
.cart-summary-box { display:flex; align-items:center; gap:1rem; background:#f8fafc; border:1px solid #e2e8f0; border-radius:0.75rem; padding:1rem; margin-bottom:1.5rem; }
.payment-method-card { display:flex; align-items:center; gap:1rem; padding:1rem; border:2px solid #e2e8f0; border-radius:0.75rem; cursor:pointer; transition:all 0.2s; background:white; }
.payment-method-card input[type="radio"] { position:absolute; opacity:0; width:0; height:0; }
.payment-method-card:hover,.payment-method-card.selected { border-color:#16a34a; background:#f0fdf4; }
.payment-method-card.selected { box-shadow:0 0 0 3px rgba(22,163,74,.1); }
.payment-method-icon { font-size:1.5rem; width:40px; text-align:center; flex-shrink:0; }
.payment-method-name { font-weight:700; font-size:0.92rem; color:#1e293b; }
.payment-method-desc { font-size:0.78rem; color:#64748b; }
.payment-method-badge { font-size:0.7rem; font-weight:800; padding:0.2rem 0.5rem; border-radius:4px; flex-shrink:0; }
.wallet-balance-inline { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; background:#f3e8ff; border:1px solid #ddd6fe; padding:0.75rem 1rem; border-radius:0.5rem; font-size:0.85rem; color:#6b21a8; }
.wallet-balance-inline.insufficient { background:#fee2e2; border-color:#fecaca; color:#991b1b; }
.form-input-with-icon { position:relative; }
.form-input-with-icon > i { position:absolute; left:0.85rem; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:0.9rem; pointer-events:none; }
.form-input-with-icon input,.form-input-with-icon textarea { padding-left:2.5rem !important; }
.btn-cta { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; background:linear-gradient(135deg,#16a34a,#15803d); color:white; border:none; padding:0.9rem 2rem; border-radius:0.75rem; font-weight:800; font-size:1rem; cursor:pointer; transition:all 0.2s; box-shadow:0 4px 15px rgba(22,163,74,.35); }
.btn-cta:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(22,163,74,.4); }

/* WALLET PAGE */
.wallet-balance-card { background:linear-gradient(135deg,#14532d,#166534 50%,#16a34a); color:white; border-radius:1.5rem; padding:2rem; position:relative; overflow:hidden; }
.wallet-label { font-size:0.85rem; font-weight:600; opacity:0.8; margin-bottom:0.5rem; display:flex; align-items:center; gap:0.4rem; }
.wallet-amount { font-size:clamp(2.5rem,8vw,4rem); font-weight:900; line-height:1; margin-bottom:1.25rem; }
.wallet-action-row { display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:1.5rem; }
.wallet-btn { display:inline-flex; align-items:center; gap:0.4rem; background:rgba(255,255,255,.15); color:white; border:1px solid rgba(255,255,255,.25); padding:0.65rem 1.25rem; border-radius:0.5rem; font-weight:700; font-size:0.88rem; cursor:pointer; text-decoration:none; transition:all 0.2s; }
.wallet-btn:hover { background:rgba(255,255,255,.25); color:white; }
.wallet-btn.solid { background:rgba(255,255,255,.9); color:#14532d; }
.wallet-btn.solid:hover { background:white; color:#14532d; }
.wallet-tx-row { display:flex; align-items:center; gap:1rem; padding:0.875rem 0; border-bottom:1px solid #f1f5f9; }
.wallet-tx-row:last-child { border-bottom:none; }
.wallet-tx-icon { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; }
.wallet-tx-icon.credit { background:#dcfce7; color:#16a34a; }
.wallet-tx-icon.debit { background:#fee2e2; color:#dc2626; }
.wallet-tx-desc { flex:1; min-width:0; }
.wallet-tx-title { font-weight:700; font-size:0.88rem; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wallet-tx-date { font-size:0.75rem; color:#94a3b8; margin-top:0.15rem; }
.wallet-tx-amount { font-weight:900; font-size:1rem; text-align:right; }
.wallet-tx-amount.credit { color:#16a34a; }
.wallet-tx-amount.debit { color:#dc2626; }

/* ADMIN BUTTONS */
.btn-approve { display:flex; align-items:center; gap:0.4rem; background:#16a34a; color:white; padding:0.5rem 0.75rem; border-radius:0.5rem; font-size:0.82rem; font-weight:700; text-decoration:none; border:none; cursor:pointer; white-space:nowrap; transition:background 0.2s; }
.btn-approve:hover { background:#15803d; color:white; }
.btn-reject { display:flex; align-items:center; gap:0.4rem; background:#dc2626; color:white; padding:0.5rem 0.75rem; border-radius:0.5rem; font-size:0.82rem; font-weight:700; text-decoration:none; border:none; cursor:pointer; white-space:nowrap; transition:background 0.2s; }
.btn-reject:hover { background:#b91c1c; color:white; }

/* DASHBOARD STATS */
.dash-stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; }
.stat-card { display:flex; align-items:center; gap:1rem; }
.stat-icon { width:48px; height:48px; border-radius:0.5rem; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.stat-label { font-size:0.78rem; text-transform:uppercase; font-weight:700; color:#64748b; margin-bottom:0.25rem; }
.stat-value { font-size:1.75rem; font-weight:900; color:#1e293b; line-height:1; }
.kit-filter-bar { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.5rem; }
.kit-filter-btn { display:inline-flex; align-items:center; gap:0.4rem; padding:0.5rem 1rem; border-radius:999px; background:#f1f5f9; color:#475569; font-weight:700; font-size:0.82rem; text-decoration:none; border:1px solid #e2e8f0; transition:all 0.15s; }
.kit-filter-btn:hover,.kit-filter-btn.active { background:#16a34a; color:white; border-color:#16a34a; }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; flex-wrap:wrap; gap:1rem; }
.panel-title { display:flex; align-items:center; gap:0.5rem; font-size:1.35rem; font-weight:900; color:#1e293b; margin:0; }

/* USER SIDEBAR */
.user-sidebar { background:white; border-radius:1rem; border:1px solid #e2e8f0; overflow:hidden; align-self:start; position:sticky; top:80px; }
.sidebar-user-header { background:linear-gradient(135deg,#14532d,#16a34a); padding:1.5rem; color:white; text-align:center; }
.sidebar-avatar { width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:1.75rem; font-weight:900; color:white; margin:0 auto 0.75rem; border:2px solid rgba(255,255,255,.3); }
.sidebar-name { font-weight:800; font-size:1rem; }
.sidebar-role { font-size:0.8rem; opacity:0.75; margin-top:0.25rem; }
.sidebar-nav { display:flex; flex-direction:column; padding:0.75rem; }
.sidebar-nav a { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1rem; color:#475569; text-decoration:none; border-radius:0.5rem; font-weight:600; font-size:0.9rem; transition:all 0.15s; }
.sidebar-nav a:hover { background:#f0fdf4; color:#16a34a; }
.sidebar-nav a.active { background:#16a34a; color:white; }
.sidebar-nav a i { width:18px; text-align:center; }
.mobile-sidebar-btn { display:none; background:#14532d; color:white; border:none; padding:0.75rem 1.25rem; border-radius:0.5rem; font-weight:700; font-size:0.9rem; cursor:pointer; margin-bottom:1rem; align-items:center; gap:0.5rem; }
@media(max-width:992px) {
    .mobile-sidebar-btn { display:flex !important; }
    .user-sidebar { position:fixed; top:0; left:-300px; height:100vh; width:280px; border-radius:0; z-index:1001; overflow-y:auto; transition:left 0.3s ease; box-shadow:4px 0 20px rgba(0,0,0,.15); }
    .user-sidebar.open { left:0; }
    .user-layout { grid-template-columns:1fr !important; }
}

/* QR BOX & UPLOAD ZONE */
.qr-box { background:#f0fdf4; border:2px dashed #86efac; border-radius:1rem; padding:1.5rem; text-align:center; }
.upload-zone { border:2px dashed #d1fae5; border-radius:0.75rem; padding:1.5rem; text-align:center; cursor:pointer; background:#f0fdf4; transition:all 0.2s; }
.upload-zone:hover { border-color:#16a34a; background:#dcfce7; }
.upload-icon { font-size:2rem; color:#22c55e; margin-bottom:0.5rem; }
.upload-text-main { font-weight:700; color:#16a34a; font-size:0.9rem; }

/* STEP INDICATOR */
.step-indicator { display:inline-flex; background:rgba(255,255,255,.9); border-radius:999px; padding:0.35rem; gap:0.25rem; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.step-pill { display:inline-flex; align-items:center; gap:0.4rem; padding:0.4rem 1rem; border-radius:999px; font-size:0.82rem; font-weight:700; color:#94a3b8; transition:all 0.2s; }
.step-pill.active { background:#16a34a; color:white; }

/* ALERTS */
.alert-warning { background:#fffbeb; border:1px solid #fcd34d; color:#92400e; padding:0.875rem 1rem; border-radius:0.5rem; display:flex; align-items:flex-start; gap:0.5rem; }

/* PROGRESS LINE (checkout) */
.checkout-progress { display:flex; align-items:center; justify-content:center; margin-bottom:2rem; }
.progress-step { display:flex; flex-direction:column; align-items:center; gap:0.4rem; flex:1; position:relative; }
.progress-step:not(:last-child)::after { content:''; position:absolute; top:16px; left:50%; width:100%; height:2px; background:#e2e8f0; }
.step-circle { width:32px; height:32px; border-radius:50%; background:#e2e8f0; display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:800; color:#94a3b8; z-index:1; position:relative; }
.step-circle.active { background:var(--primary-green,#22c55e); color:white; }
.step-label { font-size:0.72rem; font-weight:600; color:#94a3b8; }
.step-label.active { color:#16a34a; }