/* ============================================
   BLISSKHARIS WALLET — Frontend Styles
   ============================================ */

:root {
  --bkw-blue:    #1D5EFF;
  --bkw-blue-d:  #0A1628;
  --bkw-blue-l:  #E8EEFF;
  --bkw-green:   #10B981;
  --bkw-green-l: #D1FAE5;
  --bkw-amber:   #F59E0B;
  --bkw-amber-l: #FEF3C7;
  --bkw-red:     #EF4444;
  --bkw-red-l:   #FEE2E2;
  --bkw-purple:  #8B5CF6;
  --bkw-purple-l:#EDE9FE;
  --bkw-grey:    #7A8FB0;
  --bkw-grey-l:  #F0F4FF;
  --bkw-border:  rgba(29,94,255,0.12);
  --bkw-radius:  12px;
  --bkw-shadow:  0 4px 24px rgba(10,22,40,0.08);
}

.bkw-wrap { font-family: 'Inter', system-ui, sans-serif; color: #0A1628; max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }
.bkw-wrap *, .bkw-wrap *::before, .bkw-wrap *::after { box-sizing: border-box; }

/* ── Hero ── */
.bkw-hero {
  background: linear-gradient(135deg, #0D2044 0%, #1038A0 55%, #0A1628 100%);
  border-radius: 20px; padding: 2rem; color: #fff;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.5rem; position: relative; overflow: hidden;
}
.bkw-hero::after { content:''; position:absolute; top:-60px; right:-60px; width:220px; height:220px; background:radial-gradient(circle,rgba(0,212,255,.15),transparent 65%); border-radius:50%; }
.bkw-hero__label { font-size:.75rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; margin-bottom:.4rem; }
.bkw-hero__amount { font-size:2.2rem; font-weight:800; color:#fff; line-height:1; }
.bkw-hero__sub { font-size:.8rem; color:rgba(255,255,255,.4); margin-top:.4rem; }
.bkw-hero__actions { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; z-index:1; }

/* ── Buttons ── */
.bkw-btn { display:inline-flex; align-items:center; gap:.4rem; font-family:inherit; font-size:.85rem; font-weight:600; padding:.6rem 1.2rem; border-radius:8px; border:none; cursor:pointer; transition:all .2s; text-decoration:none; }
.bkw-btn--primary { background:var(--bkw-blue); color:#fff; box-shadow:0 4px 14px rgba(29,94,255,.35); }
.bkw-btn--primary:hover { background:#3D7BFF; transform:translateY(-1px); }
.bkw-btn--outline { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; }
.bkw-btn--outline:hover { background:rgba(255,255,255,.18); }
.bkw-btn--danger { background:var(--bkw-red); color:#fff; }
.bkw-btn--danger:hover { background:#dc2626; }
.bkw-btn--whatsapp { background:#25D366; color:#fff; font-size:1rem; padding:.8rem 1.8rem; }
.bkw-btn--whatsapp:hover { background:#20ba58; }
.bkw-btn--full { width:100%; justify-content:center; }
.bkw-btn--sm { padding:.35rem .75rem; font-size:.78rem; }

/* ── Section head ── */
.bkw-section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; flex-wrap:wrap; gap:.5rem; }
.bkw-section-head h2 { font-size:1.1rem; font-weight:800; color:var(--bkw-blue-d); margin:0; }
.bkw-section-head h3 { font-size:.95rem; font-weight:700; margin:0; }
.bkw-subhead { font-size:.95rem; font-weight:700; color:var(--bkw-blue-d); margin:1.5rem 0 .8rem; }

/* ── Stats ── */
.bkw-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }
.bkw-stat { background:#fff; border:1px solid var(--bkw-border); border-radius:var(--bkw-radius); padding:1.2rem; text-align:center; }
.bkw-stat i { font-size:1.3rem; margin-bottom:.5rem; display:block; }
.bkw-stat span { display:block; font-size:1.1rem; font-weight:800; color:var(--bkw-blue-d); }
.bkw-stat label { font-size:.72rem; color:var(--bkw-grey); font-weight:500; }

/* ── Admin stats ── */
.bkw-admin-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin:1.5rem 0; }
.bkw-admin-stat { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:1.2rem; display:flex; flex-direction:column; align-items:center; box-shadow:var(--bkw-shadow); }
.bkw-stat-val { font-size:1.6rem; font-weight:800; color:var(--bkw-blue-d); }
.bkw-stat-lbl { font-size:.75rem; color:var(--bkw-grey); margin-top:.3rem; }
.bkw-stat--amber .bkw-stat-val { color:var(--bkw-amber); }
.bkw-stat--red    .bkw-stat-val { color:var(--bkw-red); }
.bkw-stat--green  .bkw-stat-val { color:var(--bkw-green); }
.bkw-stat--purple .bkw-stat-val { color:var(--bkw-purple); }

/* ── Services grid ── */
.bkw-services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-bottom:1.5rem; }
.bkw-service-tile { display:flex; flex-direction:column; align-items:center; padding:1.1rem .5rem; border-radius:var(--bkw-radius); border:1px solid var(--bkw-border); cursor:pointer; text-align:center; background:#fafbff; text-decoration:none; transition:all .25s; }
.bkw-service-tile:hover { border-color:var(--bkw-blue); background:#fff; transform:translateY(-3px); box-shadow:0 10px 24px rgba(29,94,255,.1); }
.bkw-svc-icon { width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:.6rem; }
.bkw-svc-blue   { background:var(--bkw-blue-l);   color:var(--bkw-blue); }
.bkw-svc-green  { background:var(--bkw-green-l);  color:var(--bkw-green); }
.bkw-svc-amber  { background:var(--bkw-amber-l);  color:var(--bkw-amber); }
.bkw-svc-purple { background:var(--bkw-purple-l); color:var(--bkw-purple); }
.bkw-svc-red    { background:var(--bkw-red-l);    color:var(--bkw-red); }
.bkw-svc-grey   { background:#f1f5f9; color:var(--bkw-grey); }
.bkw-svc-name   { font-size:.74rem; font-weight:600; color:#3A4D6E; line-height:1.3; }

/* ── Cards ── */
.bkw-card { background:#fff; border:1px solid var(--bkw-border); border-radius:var(--bkw-radius); padding:1.4rem; box-shadow:var(--bkw-shadow); }
.bkw-card h3 { font-size:.95rem; font-weight:700; margin:0 0 1rem; color:var(--bkw-blue-d); }
.bkw-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.2rem; }
.bkw-card__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; }
.bkw-card__title { font-size:.95rem; font-weight:700; color:var(--bkw-blue-d); }
.bkw-card__desc { font-size:.83rem; color:#5A6A8A; line-height:1.6; margin-bottom:.9rem; }
.bkw-card__meta { display:flex; gap:1rem; flex-wrap:wrap; font-size:.78rem; color:var(--bkw-grey); margin-bottom:.8rem; }
.bkw-card__meta span { display:flex; align-items:center; gap:.3rem; }

/* ── Progress bar ── */
.bkw-progress-bar { height:6px; background:var(--bkw-blue-l); border-radius:100px; overflow:hidden; margin-bottom:.3rem; }
.bkw-progress-fill { height:100%; background:linear-gradient(90deg,var(--bkw-blue),#00D4FF); border-radius:100px; transition:width .6s; }
.bkw-progress-label { display:flex; justify-content:space-between; font-size:.72rem; color:var(--bkw-grey); margin-bottom:.8rem; }

/* ── Table ── */
.bkw-table-wrap { overflow-x:auto; }
.bkw-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.bkw-table thead th { background:#F7F9FF; padding:.75rem 1rem; text-align:left; font-size:.72rem; font-weight:700; color:var(--bkw-grey); text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--bkw-border); }
.bkw-table tbody td { padding:.75rem 1rem; border-bottom:1px solid var(--bkw-border); color:var(--bkw-blue-d); vertical-align:middle; }
.bkw-table tbody tr:last-child td { border-bottom:none; }
.bkw-table tbody tr:hover { background:#F7F9FF; }
.bkw-admin-table { font-size:.84rem; }

/* ── Badges ── */
.bkw-badge { display:inline-flex; align-items:center; gap:.25rem; font-size:.68rem; font-weight:700; padding:.2rem .55rem; border-radius:100px; }
.bkw-badge--green  { background:var(--bkw-green-l);  color:var(--bkw-green); }
.bkw-badge--amber  { background:var(--bkw-amber-l);  color:var(--bkw-amber); }
.bkw-badge--red    { background:var(--bkw-red-l);    color:var(--bkw-red); }
.bkw-badge--blue   { background:var(--bkw-blue-l);   color:var(--bkw-blue); }
.bkw-badge--purple { background:var(--bkw-purple-l); color:var(--bkw-purple); }
.bkw-badge--grey   { background:#f1f5f9; color:var(--bkw-grey); }

/* ── Alerts ── */
.bkw-alert { display:flex; align-items:flex-start; gap:.6rem; padding:.9rem 1rem; border-radius:10px; font-size:.85rem; margin-bottom:1rem; }
.bkw-alert i { flex-shrink:0; margin-top:.1rem; }
.bkw-alert--blue   { background:var(--bkw-blue-l);   color:#1038A0; border:1px solid rgba(29,94,255,.2); }
.bkw-alert--amber  { background:var(--bkw-amber-l);  color:#92400E; border:1px solid rgba(245,158,11,.2); }
.bkw-alert--red    { background:var(--bkw-red-l);    color:#991B1B; border:1px solid rgba(239,68,68,.2); }
.bkw-alert--green  { background:var(--bkw-green-l);  color:#065F46; border:1px solid rgba(16,185,129,.2); }

/* ── Messages ── */
.bkw-msg { margin-top:.75rem; font-size:.84rem; font-weight:500; padding:.6rem .9rem; border-radius:8px; display:none; }
.bkw-msg.success { display:block; background:var(--bkw-green-l); color:#065F46; }
.bkw-msg.error   { display:block; background:var(--bkw-red-l); color:#991B1B; }

/* ── Modal ── */
.bkw-modal { display:none; position:fixed; inset:0; background:rgba(10,22,40,.55); z-index:99999; align-items:center; justify-content:center; padding:1rem; }
.bkw-modal.open { display:flex; }
.bkw-modal__box { background:#fff; border-radius:20px; padding:2rem; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; animation:bkwModalIn .3s ease; position:relative; }
@keyframes bkwModalIn { from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:none} }
.bkw-modal__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.bkw-modal__head span { font-size:1.05rem; font-weight:800; color:var(--bkw-blue-d); }
.bkw-modal__head button { background:var(--bkw-blue-l); border:none; width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:1.1rem; color:var(--bkw-grey); display:flex; align-items:center; justify-content:center; }
.bkw-modal__head button:hover { background:var(--bkw-red-l); color:var(--bkw-red); }

/* ── Forms ── */
.bkw-form-group { margin-bottom:1rem; }
.bkw-form-group label { display:block; font-size:.78rem; font-weight:600; color:#3A4D6E; margin-bottom:.4rem; }
.bkw-form-group input, .bkw-form-group select, .bkw-form-group textarea {
  width:100%; padding:.65rem .9rem; border:1px solid rgba(29,94,255,.2); border-radius:9px;
  font-family:inherit; font-size:.88rem; color:var(--bkw-blue-d); background:#F7F9FF;
  transition:border-color .2s, box-shadow .2s; outline:none;
}
.bkw-form-group input:focus, .bkw-form-group select:focus, .bkw-form-group textarea:focus {
  border-color:var(--bkw-blue); box-shadow:0 0 0 3px rgba(29,94,255,.1); background:#fff;
}
.bkw-form-group small { display:block; font-size:.72rem; color:var(--bkw-grey); margin-top:.25rem; }
.bkw-form-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }

/* ── Transactions ── */
.bkw-txn-row { display:flex; align-items:center; gap:.9rem; padding:.75rem 0; border-bottom:1px solid var(--bkw-border); }
.bkw-txn-row:last-child { border-bottom:none; }
.bkw-txn-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; }
.bkw-txn-info { flex:1; min-width:0; }
.bkw-txn-info span { display:block; font-size:.84rem; font-weight:600; color:var(--bkw-blue-d); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bkw-txn-info small { font-size:.72rem; color:var(--bkw-grey); }
.bkw-txn-name { font-size:.84rem; font-weight:600; }
.bkw-credit { color:var(--bkw-green); font-weight:700; font-size:.88rem; white-space:nowrap; }
.bkw-debit  { color:var(--bkw-red);   font-weight:700; font-size:.88rem; white-space:nowrap; }

/* ── Rent offer card ── */
.bkw-offer-card { background:linear-gradient(135deg,#0D2044,#1038A0); color:#fff; border-radius:16px; padding:1.5rem; margin-bottom:1.5rem; }
.bkw-offer-card h3 { font-size:1.1rem; font-weight:800; margin:0 0 1.2rem; }
.bkw-offer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:1rem; margin-bottom:1rem; }
.bkw-offer-grid div span { display:block; font-size:.72rem; color:rgba(255,255,255,.5); margin-bottom:.2rem; }
.bkw-offer-grid div strong { font-size:1rem; font-weight:700; }
.bkw-offer-note { font-size:.83rem; color:rgba(255,255,255,.6); margin-bottom:1rem; }
.bkw-offer-actions { display:flex; gap:.75rem; }

/* ── CAC ── */
.bkw-cac-card { text-align:center; max-width:500px; margin:2rem auto; padding:2.5rem 2rem; background:#fff; border:1px solid var(--bkw-border); border-radius:20px; box-shadow:var(--bkw-shadow); }
.bkw-cac-icon { width:72px; height:72px; background:var(--bkw-red-l); color:var(--bkw-red); border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 1rem; }
.bkw-cac-card h2 { font-size:1.3rem; font-weight:800; margin-bottom:.75rem; }
.bkw-cac-card p { color:#5A6A8A; font-size:.9rem; margin-bottom:1.5rem; line-height:1.6; }
.bkw-cac-list { text-align:left; display:inline-block; margin-bottom:1.5rem; }
.bkw-cac-list li { list-style:none; font-size:.88rem; padding:.3rem 0; color:#3A4D6E; }
.bkw-cac-list li i { color:var(--bkw-green); margin-right:.5rem; }

/* ── Profile ── */
.bkw-profile-card { text-align:center; padding:2rem; background:#fff; border:1px solid var(--bkw-border); border-radius:16px; margin-bottom:1.2rem; }
.bkw-profile-avatar { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--bkw-blue),#00D4FF); display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800; color:#fff; margin:0 auto 1rem; }
.bkw-profile-name { font-size:1.15rem; font-weight:800; color:var(--bkw-blue-d); }
.bkw-profile-email { font-size:.83rem; color:var(--bkw-grey); margin-top:.25rem; }
.bkw-profile-badges { display:flex; justify-content:center; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; }
.bkw-profile-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; }
.bkw-pstat { text-align:center; background:#fff; border:1px solid var(--bkw-border); border-radius:var(--bkw-radius); padding:1rem; }
.bkw-pstat span { display:block; font-size:1rem; font-weight:800; color:var(--bkw-blue-d); }
.bkw-pstat label { font-size:.72rem; color:var(--bkw-grey); margin-top:.2rem; }
.bkw-detail-table { width:100%; font-size:.85rem; border-collapse:collapse; }
.bkw-detail-table td { padding:.6rem .5rem; border-bottom:1px solid var(--bkw-border); }
.bkw-detail-table td:first-child { font-weight:600; color:var(--bkw-grey); width:40%; }
.bkw-detail-table tr:last-child td { border-bottom:none; }

/* ── Misc ── */
.bkw-empty { text-align:center; padding:3rem 1rem; color:var(--bkw-grey); }
.bkw-empty i { font-size:2.5rem; margin-bottom:1rem; display:block; opacity:.4; }
.bkw-empty p { font-size:.9rem; }
.bkw-balance-pill { background:var(--bkw-blue-l); color:var(--bkw-blue); font-size:.8rem; font-weight:700; padding:.3rem .8rem; border-radius:100px; }
.bkw-pagination { display:flex; gap:.5rem; justify-content:center; margin-top:1.5rem; flex-wrap:wrap; }
.bkw-page { padding:.4rem .75rem; border-radius:8px; background:#fff; border:1px solid var(--bkw-border); font-size:.82rem; font-weight:600; color:var(--bkw-blue); text-decoration:none; transition:all .2s; }
.bkw-page:hover, .bkw-page--active { background:var(--bkw-blue); color:#fff; border-color:var(--bkw-blue); }

/* ── Admin wrap ── */
.bkw-admin-wrap h1 { font-size:1.4rem; margin-bottom:1rem; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .bkw-services-grid { grid-template-columns:repeat(3,1fr); }
  .bkw-stats-row { grid-template-columns:1fr 1fr; }
  .bkw-profile-stats { grid-template-columns:1fr 1fr; }
  .bkw-form-row { grid-template-columns:1fr; }
  .bkw-hero { flex-direction:column; }
  .bkw-hero__amount { font-size:1.8rem; }
  .bkw-cards { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
  .bkw-services-grid { grid-template-columns:repeat(3,1fr); gap:.5rem; }
  .bkw-wrap { padding:1rem .75rem; }
  .bkw-stats-row { grid-template-columns:1fr; }
  .bkw-profile-stats { grid-template-columns:1fr 1fr; }
}