:root{
    --gold-1:#b56a44;
    --gold-2:#b56a44;
    --gold-3:#b56a44;
    --gold-4:#f3c65a;
    --cream:#fef8ed;
    --cream-2:#fbeed2;
    --ink:#2a2116;
    --muted:#8a7c66;
    --line:#eddcb4;

    --bg-card: #ffffff;
    --primary-red: #FF0059;
    --primary-red-hover: #FF0070;
    --text-dark: #1e293b;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    --border-color: #e2e8f0;
    --green-accent: #10b981;
    --green-bg: #ecfdf5;
    --red-accent: #ef4444;
    --red-bg: #fef2f2;
    --blue-accent: #3b82f6;
    --blue-bg: #eff6ff;

    --green-bg: #ecfdf5;
    --amber-accent: #f59e0b;
    --amber-bg: #fffbeb;

    --orange-1:#FF0059;
    --orange-2:#FF0059;
    --orange-3:#f5a15e;
    --peach:#fdf1e7;
    --peach-2:#fbe4d0;
    --green:#2e8b4f;
    --ink:#26201b;
    --muted:#8a7d6f;
    --line:#f0e3d3;
    --sidebar-w:230px;
  }
  
body {
  font-family:'Plus Jakarta Sans', 'Segoe UI', Roboto, Arial, sans-serif;
  color:var(--ink);
  font-size:.92rem;
  background:var(--cream);
}


a {text-decoration:none;}


  .brand-badge{
    width:48px;height:48px;border-radius:50%;
    background:linear-gradient(135deg,var(--gold-2),var(--gold-4));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.3rem;box-shadow:0 4px 12px rgba(169,114,15,.25);
  }
  .brand-name{font-weight:800;letter-spacing:.5px;color:var(--ink);}
  .brand-name span{color:var(--gold-2);}
  .brand-sub{font-size:.6rem;letter-spacing:2px;color:var(--muted);}

  .flow-header h1{font-weight:800;}
  .pill-badge{
    background:linear-gradient(135deg,var(--gold-2),var(--gold-3));
    color:#fff;padding:.5rem 1.5rem;border-radius:999px;font-weight:600;
    display:inline-block;box-shadow:0 4px 14px rgba(200,137,15,.35);
  }
  .section-label{
    background:linear-gradient(135deg,var(--gold-2),var(--gold-3));
    color:#fff;font-weight:700;font-size:.8rem;letter-spacing:1px;
    padding:.4rem 1.1rem;border-radius:999px;display:inline-block;
  }
  .flow-shell{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:1.75rem 1.5rem;
    box-shadow:0 8px 24px rgba(169,114,15,.06);
  }

  /* Step wizard card */
  .step-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:1.75rem 1.5rem;
    min-height:430px;
    display:flex;flex-direction:column;
  }
  .back-arrow{color:var(--ink);font-size:1.1rem;text-decoration:none;}
  .step-title{font-weight:800;margin-top:.75rem;font-size:1.3rem;}
  .step-desc{color:var(--muted);font-size:.9rem;}
  .form-label{font-weight:600;font-size:.85rem;color:#3a2f1f;}
  .form-control, .form-select{
    border-radius:10px;border:1px solid #e6d7ae;padding:.6rem .8rem;background:#fffdf8;
  }
  .form-control:focus, .form-select:focus{
    border-color:var(--gold-3);box-shadow:0 0 0 .18rem rgba(224,164,34,.2);
  }
  .input-group-text{
    background:#fffdf8;border:1px solid #e6d7ae;border-right:none;border-radius:10px 0 0 10px;color:var(--ink);font-weight:600;
  }
  .btn-gold{
    background:linear-gradient(135deg,var(--orange-1),var(--orange-3));
    color:#fff;font-weight:700;border:none;border-radius:10px;padding:.65rem 1rem;
    box-shadow:0 4px 12px rgba(200,137,15,.3);
  }
  .btn-gold:hover{color:#fff;filter:brightness(1.05);}
  .btn-outline-gold{
    border:1.5px solid var(--gold-3);color:var(--gold-1);font-weight:700;border-radius:10px;background:#fff;
  }
  .btn-outline-gold:hover{background:var(--cream-2);color:var(--gold-1);}
  .link-gold{color:var(--gold-2);font-weight:700;text-decoration:none;cursor:pointer;}
  .link-gold:hover{text-decoration:underline;}
  .hint-box{
    display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem;color:var(--muted);
    background:var(--cream-2);border-radius:10px;padding:.6rem .8rem;margin-top:.5rem;
  }
  .hint-box i{color:var(--gold-2);}

  .otp-box{
    width:44px;height:52px;text-align:center;font-size:1.2rem;font-weight:700;
    border-radius:10px;border:1px solid #e6d7ae;background:#fffdf8;
  }
  .otp-box:focus{border-color:var(--gold-3);box-shadow:0 0 0 .15rem rgba(224,164,34,.2);outline:none;}
  .otp-timer{font-size:.85rem;color:var(--muted);}
  .otp-timer b{color:var(--gold-2);}

  .success-icon{
    width:110px;height:110px;border-radius:50%;
    background:radial-gradient(circle at 50% 40%, #fff2cf, #f6dc9a);
    display:flex;align-items:center;justify-content:center;margin:0 auto;
    box-shadow:0 0 0 10px rgba(224,164,34,.12);
  }
  .success-icon .check{
    width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold-3));
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;
  }

  .progress-dots{display:flex;gap:.4rem;align-items:center;justify-content:center;margin-top:1rem;}
  .progress-dots .dot{
    width:22px;height:22px;border-radius:50%;background:#f1e5c4;color:var(--muted);
    display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;
  }
  .progress-dots .dot.active{background:linear-gradient(135deg,var(--gold-2),var(--gold-3));color:#fff;}
  .progress-dots .bar{width:36px;height:3px;background:#f1e5c4;border-radius:3px;}
  .progress-dots .bar.active{background:var(--gold-3);}

  .step-nav-arrow{
    width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;color:var(--gold-2);
    flex-shrink:0;
  }

  .stepper-track{display:flex;justify-content:center;}
  .stepper-track .step-col{width:100%;max-width:420px;}
  .stepper-track .step-col.hidden-step{display:none;}

  .step-progress{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-bottom:1rem;}
  .step-progress .seg{height:5px;width:38px;border-radius:3px;background:#f1e5c4;}
  .step-progress .seg.done{background:linear-gradient(135deg,var(--gold-2),var(--gold-3));}
  .step-progress .seg.current{background:linear-gradient(135deg,var(--gold-2),var(--gold-3));}
  .step-count{text-align:center;color:var(--muted);font-size:.78rem;font-weight:600;margin-bottom:.75rem;letter-spacing:.5px;}

  .feature-strip{
    background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem 1.5rem;
  }
  .feature-item{display:flex;align-items:center;gap:.7rem;}
  .feature-icon{
    width:42px;height:42px;border-radius:50%;background:var(--cream-2);
    display:flex;align-items:center;justify-content:center;color:var(--gold-2);font-size:1.1rem;flex-shrink:0;
  }
  .feature-item h6{margin:0;font-weight:700;font-size:.85rem;}
  .feature-item small{color:var(--muted);}

  .tab-toggle .btn{font-weight:700;border-radius:999px;padding:.5rem 1.4rem;}
  .fade-step{animation:fadeStep .35s ease;}
  @keyframes fadeStep{from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);}}

  ::-webkit-scrollbar{height:8px;}
  ::-webkit-scrollbar-thumb{background:#e6d19a;border-radius:6px;}



/* ===== Sidebar ===== */
.sidebar{
  width:var(--sidebar-w);
  min-height:100vh;
  background:#fff;
  border-right:1px solid var(--line);
  position:fixed;
  top:0;left:0;bottom:0;
  padding:1.25rem 1rem;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  transition:width .25s ease, transform .25s ease;
  z-index:1040;
}
.main-wrap{transition:margin-left .25s ease;}

body.sidebar-collapsed .sidebar{width:76px;padding-left:.6rem;padding-right:.6rem;}
body.sidebar-collapsed .main-wrap{margin-left:76px;}
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .nav-item-link span,
body.sidebar-collapsed .download-card{display:none;}
body.sidebar-collapsed .nav-item-link{justify-content:center;padding:.6rem;}
body.sidebar-collapsed .nav-item-link i{margin:0;}
body.sidebar-collapsed .brand-row{justify-content:center;}

.collapse-toggle{
  width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--orange-1);
  position:absolute;top:4rem;right:15px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.08);
  font-size:.75rem;
}
.brand-mark{
  width:42px;height:42px;border-radius:10px;
  background:linear-gradient(135deg,var(--orange-1),var(--orange-3));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;
}
.brand-text{font-weight:800;line-height:1.05;color:var(--ink);letter-spacing:.5px;}
.brand-text .accent{color:var(--orange-1);}
.brand-text small{display:block;font-size:.55rem;letter-spacing:2px;color:var(--muted);font-weight:600;}

.nav-item-link{
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .7rem;border-radius:10px;
  color:#5b5044;font-weight:600;font-size:.85rem;
  margin-bottom:.15rem;
}
.nav-item-link i{font-size:1rem;width:20px;text-align:center;}
.nav-item-link:hover{background:var(--peach);color:var(--orange-1);}
.nav-item-link.active{background:var(--peach);color:var(--orange-1);}

.download-card{
  background:var(--peach);
  border-radius:14px;
  padding:1rem;
  margin-top:auto;
}
.download-card h6{color:var(--orange-1);font-weight:800;font-size:.85rem;}
.download-card p{font-size:.72rem;color:var(--muted);}
.qr-box{width:52px;height:52px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--ink);}

/* ===== Main ===== */
.main-wrap{margin-left:var(--sidebar-w);}
.topbar{
  background:#fff;border-bottom:1px solid var(--line);
  padding:.75rem 1.5rem;display:flex;align-items:center;gap:1rem;
  position:sticky;top:0;z-index:10;
}
.sidebar-toggle-btn{
  width:38px;height:38px;border-radius:10px;background:#faf8f5;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0;cursor:pointer;
}
.gold-price-box{
  border:1px solid var(--line);border-radius:10px;padding:.4rem .9rem;
  display:flex;flex-direction:column;
}
.gold-price-box .lbl{font-size:.68rem;color:var(--muted);display:flex;align-items:center;gap:.3rem;}
.gold-price-box .val{font-weight:800;font-size:1rem;display:flex;align-items:center;gap:.4rem;}
.gold-price-box .val .chg{color:var(--green);font-size:.72rem;font-weight:700;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;background:#faf8f5;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink);position:relative;flex-shrink:0;
}
.icon-btn .badge-dot{
  position:absolute;top:-4px;right:-4px;background:var(--orange-1);color:#fff;font-size:.6rem;
  border-radius:999px;padding:0 5px;min-width:16px;text-align:center;font-weight:700;
}
.topbar-label{font-size:.72rem;color:var(--muted);text-align:center;}
.user-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;}
.kyc-badge{color:var(--green);font-size:.72rem;font-weight:700;}

.content-pad{padding:1.25rem 1.5rem 2rem;}

/* Promo carousel */
.promo-side{
  background:var(--peach);border-radius:16px;padding:1.25rem;min-height:230px;position:relative;overflow:hidden;
}
.promo-side h6{color:var(--orange-1);font-weight:800;font-size:.95rem;margin-bottom:.4rem;}
.promo-side p{font-size:.78rem;color:#5b5044;}
.promo-side .side-emoji{font-size:4rem;position:absolute;right:.75rem;bottom:.25rem;}
.btn-brand{
  background:linear-gradient(135deg,var(--orange-1),var(--orange-3));
  color:#fff;font-weight:700;border:none;border-radius:8px;padding:.5rem 1.1rem;font-size:.85rem;
}
.btn-brand:hover{color:#fff;filter:brightness(1.05);}
.btn-outline-brand{
  border:1.5px solid var(--orange-2);color:var(--orange-1);font-weight:700;border-radius:8px;background:#fff;font-size:.85rem;padding:.45rem 1rem;
}
.carousel-dots{display:flex;gap:.35rem;position:absolute;left:50%;bottom:1rem;z-index:3;}
.carousel-dots span{width:7px;height:7px;border-radius:50%;background:#e8c9a8;cursor:pointer;transition:.2s;display:inline-block;}
.carousel-dots span.active{background:var(--orange-1);width:18px;border-radius:4px;}
.carousel-arrow{
  width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.06);
  cursor:pointer;z-index:3;
}
.promo-slides{position:relative;overflow:hidden;border-radius:16px;height:230px;}
.promo-slide{
  position:absolute;top:0;left:0;width:100%;height:100%;
  opacity:0;visibility:hidden;transform:translateX(24px);
  transition:opacity .45s ease, transform .45s ease, visibility .45s;
  padding:1.75rem 3.5rem;display:flex;flex-direction:column;justify-content:center;
  box-sizing:border-box;
}
.promo-slide.active{opacity:1;visibility:visible;transform:translateX(0);z-index:2;}
.promo-slide.bg-a{background:linear-gradient(120deg,var(--peach) 60%,var(--peach-2));}
.promo-slide.bg-b{background:linear-gradient(120deg,#fdeee0 60%,#fbdfc4);}
.promo-slide.bg-c{background:linear-gradient(120deg,#fdf1e4 60%,#fbe6cc);}
.promo-slide.bg-d{background:linear-gradient(120deg,#fdece2 60%,#fbdccb);}
.promo-slide h6{color:var(--orange-1);font-weight:700;margin-bottom:.15rem;}
.promo-slide h2{font-weight:800;font-size:1.6rem;max-width:380px;}
.promo-slide .price-line{color:var(--orange-1);font-weight:800;font-size:1.5rem;}
.promo-emoji{font-size:6.5rem;position:absolute;right:1.5rem;bottom:0;opacity:.95;}

/* Stat cards */
.stat-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.25rem;height:100%;
}
.stat-card .title{color:var(--orange-1);font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:.3rem;}
.stat-card .amount{font-weight:800;font-size:1.4rem;margin-top:.25rem;}
.stat-card .amount .up{color:var(--green);font-size:.8rem;font-weight:700;}
.stat-card .icon-circle{
  width:44px;height:44px;border-radius:12px;background:var(--peach);display:flex;align-items:center;justify-content:center;
  color:var(--orange-1);font-size:1.3rem;
}
.stat-sub{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-top:.75rem;}
.stat-sub b{display:block;color:var(--ink);font-size:.92rem;font-weight:700;}

/* Quick actions */
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;}
.qa-item{
  background:#faf8f5;border:1px solid var(--line);border-radius:12px;padding:.65rem .4rem;text-align:center;
  color:#5b5044;font-size:.68rem;font-weight:700;
}
.qa-item i{display:block;font-size:1.15rem;margin-bottom:.3rem;}
.qa-item.green i{color:#2e8b4f;}
.qa-item.red i{color:#c0392b;}
.qa-item.blue i{color:#2f6fd6;}
.qa-item.yellow i{color:#c8890f;}
.qa-item.purple i{color:#7a4fd6;}
.qa-item.pink i{color:#d64f8a;}

/* Panels */
.panel{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.25rem;height:100%;
}
.panel-title{font-weight:800;font-size:.95rem;}
.time-btns .btn{border-radius:8px;font-size:.72rem;padding:.25rem .6rem;font-weight:600;}
.time-btns .btn.active-time{background:var(--ink);color:#fff;border-color:var(--ink);}
.time-btns .btn:not(.active-time){background:#fff;border:1px solid var(--line);color:#5b5044;}

/* SVG Gold chart */
.gold-chart-wrap{width:100%;height:170px;}
.gold-chart-wrap svg{width:100%;height:100%;display:block;}

/* SVG Donut */
.donut-wrap{position:relative;width:130px;height:130px;flex-shrink:0;}
.donut-wrap svg{width:100%;height:100%;transform:rotate(-90deg);}
.donut-center{
  position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.donut-center .pct{font-weight:800;font-size:1.3rem;}
.donut-center .lbl{font-size:.65rem;color:var(--muted);font-weight:600;}

.plan-item{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--line);}
.plan-item:last-child{border-bottom:none;}
.plan-icon{width:38px;height:38px;border-radius:10px;background:var(--peach);color:var(--orange-1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.plan-item h6{margin:0;font-weight:700;font-size:.85rem;}
.plan-item small{color:var(--muted);font-size:.72rem;}
.badge-active{background:#e6f4ea;color:var(--green);font-weight:700;font-size:.68rem;padding:.25rem .6rem;border-radius:999px;}

/* Transactions table */
.table-transactions thead th{
  color:var(--muted);font-weight:700;font-size:.72rem;text-transform:none;border-bottom:1px solid var(--line);padding:.5rem .4rem;
}
.table-transactions td{padding:.6rem .4rem;font-size:.82rem;border-bottom:1px solid var(--line);vertical-align:middle;}
.tx-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tx-icon.buy{background:#fde8e4;color:#c0392b;}
.tx-icon.sip{background:#e6f4ea;color:var(--green);}
.tx-icon.cash{background:#e9edfc;color:#3355cc;}
.status-success{color:var(--green);font-weight:700;font-size:.78rem;}

/* Help + security */
.help-btn{
  border:1px solid var(--line);border-radius:10px;padding:.5rem .8rem;font-size:.8rem;font-weight:600;color:#5b5044;
  display:flex;align-items:center;gap:.5rem;background:#fff;
}
.sec-item{text-align:center;font-size:.68rem;color:#5b5044;font-weight:600;}
.sec-item i{display:block;font-size:1.4rem;color:var(--orange-1);margin-bottom:.3rem;}

.sidebar-backdrop{display:none;}

@media(max-width:991px){
  .sidebar{transform:translateX(-100%);width:var(--sidebar-w) !important;padding:1.25rem 1rem !important;}
  .sidebar.show{transform:translateX(0);box-shadow:0 0 24px rgba(0,0,0,.15);}
  body.sidebar-collapsed .sidebar{width:var(--sidebar-w);}
  body.sidebar-collapsed .brand-text,
  body.sidebar-collapsed .nav-item-link span,
  body.sidebar-collapsed .download-card{display:block;}
  body.sidebar-collapsed .nav-item-link{justify-content:flex-start;padding:.55rem .7rem;}
  .main-wrap{margin-left:0 !important;}
  .collapse-toggle{display:none;}
  .sidebar-backdrop{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1035;
  }
  .sidebar-backdrop.show{display:block;}
}
@media(min-width:992px){
  .sidebar-toggle-btn.mobile-only{display:none;}
}



/* WORKFLOW CONTAINER */
    .workflow-container {
      max-width: 900px;
      margin: 28px auto;
      /*padding: 0 20px;*/
      width: 100%;
    }

    .page-title {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 28px;
      margin-top: 28px;
    }

    /* STEP PROGRESS BAR */
    .step-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32px;
      position: relative;
      max-width: 650px;
      margin-left: auto;
      margin-right: auto;
    }

    .step-item {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--bg-body);
      padding: 0 8px;
      z-index: 2;
      cursor: pointer;
    }

    .step-number {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background-color: #e2e8f0;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      transition: all 0.3s;
    }

    .step-item.active .step-number {
      background-color: var(--primary-red);
      color: white;
    }

    .step-item.completed .step-number {
      background-color: var(--green-accent);
      color: white;
    }

    .step-line {
      position: absolute;
      top: 40px;
      left: 3%;
      right:17%;
      height: 2px;
      background-color: #e2e8f0;
      z-index: 1;
    }

    .step-line-fill {
      height: 100%;
      background-color: var(--green-accent);
      width: 0%;
      transition: width 0.3s ease;
    }

    /* STEP VIEWS CARD */
    .buy-gold.step-card {
      background: var(--bg-card);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      padding: 28px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
      display: none;
    }

    .buy-gold.step-card.active {
      display: block;
    }

    /* STEP 1: ENTER DETAILS */
    .details-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 24px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    .form-label-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .form-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
    }

    /* MODE TOGGLE SWITCH (Rupees vs Gold Weight) */
    .mode-switch {
      display: flex;
      background-color: #f1f5f9;
      border-radius: 20px;
      padding: 2px;
      gap: 2px;
    }

    .mode-btn {
      border: none;
      background: transparent;
      padding: 4px 10px;
      border-radius: 16px;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s;
    }

    .mode-btn.active {
      background-color: var(--bg-card);
      color: var(--primary-red);
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
    }

    .input-prefix {
      position: absolute;
      left: 14px;
      font-weight: 700;
      font-size: 16px;
      color: var(--text-dark);
    }

    .input-suffix {
      position: absolute;
      right: 14px;
      font-weight: 700;
      font-size: 13px;
      color: var(--text-muted);
    }

    .amount-input {
      width: 100%;
      padding: 12px 36px 12px 32px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 16px;
      font-weight: 700;
      outline: none;
      transition: border-color 0.2s;
    }

    .amount-input:focus {
      border-color: var(--primary-red);
    }

    .presets-container {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    .preset-btn {
      background: #f8fafc;
      border: 1px solid var(--border-color);
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-dark);
      cursor: pointer;
      transition: all 0.2s;
    }

    .preset-btn:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .wallet-info {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 24px;
    }

    .wallet-info strong {
      color: var(--text-dark);
    }

    /* Summary Sidebar inside Step 1 & 2 */
    .summary-box {
      background: #fafafa;
      border: 1px solid #f1f5f9;
      border-radius: 10px;
      padding: 20px;
    }

    .summary-box h5 {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 8px;
      font-weight: 600;
    }

    .summary-box .gold-value {
      font-size: 24px;
      font-weight: 800;
      color: var(--text-dark);
      margin-bottom: 2px;
    }

    .summary-box .approx-text {
      font-size: 11px;
      color: var(--text-light);
      margin-bottom: 16px;
    }

    .summary-row {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      padding: 6px 0;
      color: var(--text-muted);
    }

    .summary-row.total {
      border-top: 1px solid var(--border-color);
      margin-top: 8px;
      padding-top: 10px;
      font-weight: 800;
      font-size: 14px;
      color: var(--text-dark);
    }

    .btn-submit {
      width: 100%;
      background-color: var(--primary-red);
      color: white;
      border: none;
      padding: 12px;
      border-radius: 8px;
      font-size: 13.5px;
      font-weight: 700;
      cursor: pointer;
      margin-top: 24px;
      transition: background 0.2s;
    }

    .btn-submit:hover {
      background-color: var(--primary-red-hover);
    }

    /* STEP 2: PAYMENT METHOD */
    .payment-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 24px;
    }

    .payment-methods {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .payment-option {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: all 0.2s;
    }

    .payment-option:hover, .payment-option.selected {
      border-color: var(--green-accent);
      background-color: #f0fdf4;
    }

    .payment-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .payment-left i {
      font-size: 20px;
      color: var(--text-muted);
    }

    .payment-option.selected .payment-left i {
      color: var(--green-accent);
    }

    .payment-details h6 {
      font-size: 13px;
      font-weight: 700;
    }

    .payment-details p {
      font-size: 11px;
      color: var(--text-muted);
    }

    .secure-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f8fafc;
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 16px;
    }

    /* STEP 3: CONFIRMATION */
    .confirmation-view {
      text-align: center;
      padding: 20px 10px;
    }

    .success-icon-wrapper {
      width: 54px;
      height: 54px;
      background-color: var(--green-accent);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      margin: 0 auto 16px auto;
    }

    .confirmation-view h3 {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .confirmation-view p {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 24px;
    }

  

    .btn-secondary {
      background: white;
      border: 1px solid var(--border-color);
      color: var(--text-dark);
    }

    /* FOOTER TRUST BADGES */
    .footer-trust-bar {
      display: flex;
      justify-content: center;
      gap: 32px;
      margin-top: 32px;
      padding-top: 20px;
      border-top: 1px solid var(--border-color);
    }

    .trust-badge-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
    }

    .trust-badge-item i {
      color: #f59e0b;
      font-size: 14px;
    }

    @media (max-width: 768px) {
      .details-grid, .payment-grid {
        grid-template-columns: 1fr;
      }
      .footer-trust-bar {
        flex-wrap: wrap;
        gap: 16px;
      }
    }


    /* Sell Flow */

     /* STEP 1: ENTER DETAILS */
    .details-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 24px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    .form-label-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .form-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
    }

    /* MODE TOGGLE SWITCH */
    .mode-switch {
      display: flex;
      background-color: #f1f5f9;
      border-radius: 20px;
      padding: 2px;
      gap: 2px;
    }

    .mode-btn {
      border: none;
      background: transparent;
      padding: 4px 10px;
      border-radius: 16px;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s;
    }

    .mode-btn.active {
      background-color: var(--bg-card);
      color: var(--primary-red);
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
    }

    .input-prefix {
      position: absolute;
      left: 14px;
      font-weight: 700;
      font-size: 16px;
      color: var(--text-dark);
      display: none;
    }

    .input-suffix {
      position: absolute;
      right: 14px;
      font-weight: 700;
      font-size: 13px;
      color: var(--text-muted);
    }

    .amount-input {
      width: 100%;
      padding: 12px 36px 12px 14px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 16px;
      font-weight: 700;
      outline: none;
      transition: border-color 0.2s;
    }

    .amount-input:focus {
      border-color: var(--primary-red);
    }

    .presets-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 12px;
    }

    .preset-btn {
      background: #f8fafc;
      border: 1px solid var(--border-color);
      padding: 8px 0;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-dark);
      cursor: pointer;
      text-align: center;
      transition: all 0.2s;
    }

    .preset-btn:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .wallet-info {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 24px;
    }

    .wallet-info strong {
      color: var(--text-dark);
    }

    .rate-alert-banner {
      background: #fff8f6;
      border: 1px solid #ffedd5;
      color: #c2410c;
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 11.5px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 16px;
    }

    /* Summary Box */
    .summary-box {
      background: #fafafa;
      border: 1px solid #f1f5f9;
      border-radius: 10px;
      padding: 20px;
    }

    .summary-box h5 {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 8px;
      font-weight: 600;
    }

    .summary-box .payout-value {
      font-size: 24px;
      font-weight: 800;
      color: var(--text-dark);
      margin-bottom: 2px;
    }

    .summary-box .approx-text {
      font-size: 11px;
      color: var(--text-light);
      margin-bottom: 16px;
    }

    .summary-row {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      padding: 6px 0;
      color: var(--text-muted);
    }

    .summary-row.total {
      border-top: 1px solid var(--border-color);
      margin-top: 8px;
      padding-top: 10px;
      font-weight: 800;
      font-size: 14px;
      color: var(--text-dark);
    }

    .btn-submit {
      width: 100%;
      background-color: var(--primary-red);
      color: white;
      border: none;
      padding: 12px;
      border-radius: 8px;
      font-size: 13.5px;
      font-weight: 700;
      cursor: pointer;
      margin-top: 24px;
      transition: background 0.2s;
    }

    .btn-submit:hover {
      background-color: var(--primary-red-hover);
    }

    /* STEP 2: PAYOUT METHOD */
    .payment-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 24px;
    }

    .payout-methods {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .payout-option {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: all 0.2s;
    }

    .payout-option:hover, .payout-option.selected {
      border-color: var(--green-accent);
      background-color: #f0fdf4;
    }

    .payout-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .payout-left i {
      font-size: 20px;
      color: var(--text-muted);
    }

    .payout-option.selected .payout-left i {
      color: var(--green-accent);
    }

    .payout-details h6 {
      font-size: 13px;
      font-weight: 700;
    }

    .payout-details p {
      font-size: 11px;
      color: var(--text-muted);
    }

    .change-link {
      font-size: 11px;
      font-weight: 700;
      color: #2563eb;
      text-decoration: none;
    }

    /* STEP 3: CONFIRMATION */
    .confirmation-view {
      text-align: center;
      padding: 20px 10px;
    }

    .success-icon-wrapper {
      width: 54px;
      height: 54px;
      background-color: var(--green-accent);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      margin: 0 auto 16px auto;
    }

    .confirmation-view h3 {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .confirmation-view p {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 24px;
    }

  

    /* FOOTER TRUST BADGES */
    .footer-trust-bar {
      display: flex;
      justify-content: center;
      gap: 32px;
      margin-top: 32px;
      padding-top: 20px;
      border-top: 1px solid var(--border-color);
    }

    .trust-badge-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
    }

    .trust-badge-item i {
      color: #f59e0b;
      font-size: 14px;
    }

    @media (max-width: 768px) {
      .details-grid, .payment-grid {
        grid-template-columns: 1fr;
      }
      .footer-trust-bar {
        flex-wrap: wrap;
        gap: 16px;
      }
    }


      /* Transactions History */

    /* STATS ROW */
    .stats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }

    .stat-card {
      background: var(--bg-card);
      border-radius: 12px;
      padding: 16px 20px;
      border: 1px solid var(--border-color);
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
      align-items: center;
      justify-content: space-between;
    }

    .stat-info span {
      font-size: 11.5px;
      color: var(--text-muted);
      font-weight: 600;
      display: block;
      margin-bottom: 4px;
    }

    .stat-info h3 {
      font-size: 20px;
      font-weight: 800;
      color: var(--text-dark);
    }

    .stat-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    /* MAIN TABLE CARD */
    .card-table-wrapper {
      background: var(--bg-card);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
      padding: 20px;
    }

    /* FILTERS BAR */
    .filters-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .filter-pills {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .filter-btn {
      border: 1px solid var(--border-color);
      background: #f8fafc;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s;
    }

    .filter-btn.active, .filter-btn:hover {
      background-color: var(--primary-red);
      color: white;
      border-color: var(--primary-red);
    }

    .search-filter-box {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .table-search-input {
      padding: 8px 12px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 12.5px;
      outline: none;
      width: 200px;
    }

    .table-search-input:focus {
      border-color: var(--primary-red);
    }

    /* TABLE STYLING */
    .table-responsive {
      overflow-x: auto;
    }

    table.transactions-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }

    table.transactions-table th {
      color: var(--text-muted);
      font-weight: 700;
      padding: 12px 10px;
      border-bottom: 1px solid var(--border-color);
      text-align: left;
      background: #f8fafc;
    }

    table.transactions-table td {
      padding: 14px 10px;
      border-bottom: 1px solid var(--border-color);
      text-align: left;
      vertical-align: middle;
    }

    .tx-type-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      margin-right: 8px;
    }

    .tx-buy-icon { background: var(--green-bg); color: var(--green-accent); }
    .tx-sell-icon { background: var(--red-bg); color: var(--red-accent); }
    .tx-sip-icon { background: var(--blue-bg); color: var(--blue-accent); }

    .btn-download-inv {
      background: transparent;
      border: 1px solid var(--border-color);
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-dark);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s;
    }

    .btn-download-inv:hover {
      border-color: var(--primary-red);
      color: var(--primary-red);
      background: #fef2f2;
    }

    /* PAGINATION */
    .pagination-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      font-size: 12px;
      color: var(--text-muted);
    }

    .page-btns {
      display: flex;
      gap: 4px;
    }

    .page-btn {
      border: 1px solid var(--border-color);
      background: white;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
    }

    .page-btn.active {
      background: var(--text-dark);
      color: white;
      border-color: var(--text-dark);
    }

    /* --- INVOICE MODAL --- */
    .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .modal-backdrop.active {
      display: flex;
    }

    .invoice-card {
      background: white;
      width: 100%;
      max-width: 550px;
      border-radius: 12px;
      padding: 28px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.15);
      position: relative;
    }

    .close-modal-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      background: none;
      border: none;
      font-size: 18px;
      color: var(--text-muted);
      cursor: pointer;
    }

    .invoice-header {
      display: flex;
      justify-content: space-between;
      border-bottom: 2px solid var(--border-color);
      padding-bottom: 16px;
      margin-bottom: 20px;
    }

    .invoice-header-brand h4 {
      font-size: 16px;
      font-weight: 800;
      color: #92400e;
    }

    .invoice-header-brand p {
      font-size: 10px;
      color: var(--text-muted);
    }

    .invoice-meta {
      text-align: right;
    }

    .invoice-meta h5 {
      font-size: 14px;
      color: var(--primary-red);
      font-weight: 800;
    }

    .invoice-meta p {
      font-size: 10px;
      color: var(--text-muted);
    }

    .invoice-details-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 20px;
      font-size: 11.5px;
    }

    .invoice-details-grid div p {
      color: var(--text-muted);
      margin-bottom: 2px;
    }

    .invoice-details-grid div strong {
      color: var(--text-dark);
    }

    .invoice-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
      font-size: 11.5px;
    }

    .invoice-table th {
      background: #f8fafc;
      padding: 8px;
      border-bottom: 1px solid var(--border-color);
      text-align: left;
    }

    .invoice-table td {
      padding: 8px;
      border-bottom: 1px solid var(--border-color);
    }

    .invoice-footer-actions {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }

    .btn-modal-action {
      flex: 1;
      padding: 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      border: none;
    }

    .btn-modal-print {
      background: var(--text-dark);
      color: white;
    }

    .btn-modal-download {
      background: var(--primary-red);
      color: white;
    }

    @media (max-width: 768px) {
      .stats-row { grid-template-columns: 1fr; }
      .filters-bar { flex-direction: column; align-items: stretch; }
    }



    /* Profile Settings */
    

    /* PROFILE OVERVIEW CARD */
    .profile-overview-card {
      background: var(--bg-card);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      padding: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }

    .profile-user-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .avatar-wrapper {
      position: relative;
    }

    .avatar-wrapper img {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--border-color);
    }

    .avatar-edit-btn {
      position: absolute;
      bottom: 0;
      right: 0;
      background: var(--primary-red);
      color: white;
      border: none;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      cursor: pointer;
    }

    .user-details-title h3 {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 4px;
    }

    .user-details-title p {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 6px;
    }

    .profile-actions {
      display: flex;
      gap: 10px;
    }

    .btn-outline-sm {
      background: white;
      border: 1px solid var(--border-color);
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-dark);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn-outline-sm:hover {
      background: #f8fafc;
    }

    /* TAB NAVIGATION */
    .settings-tabs {
      display: flex;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 24px;
      gap: 24px;
    }

    .tab-btn {
      background: none;
      border: none;
      padding: 10px 0;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
      position: relative;
      transition: color 0.2s;
    }

    .tab-btn:hover {
      color: var(--text-dark);
    }

    .tab-btn.active {
      color: var(--primary-red);
      font-weight: 700;
    }

    .tab-btn.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--primary-red);
    }

    /* TAB CONTENT PANELS */
    .tab-panel {
      display: none;
      background: var(--bg-card);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      padding: 24px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }

    .tab-panel.active {
      display: block;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-bottom: 20px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-group.full-width {
      grid-column: span 2;
    }

    .form-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
    }

    .form-control {
      padding: 10px 14px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-dark);
      outline: none;
      transition: border-color 0.2s;
    }

    .form-control:focus {
      border-color: var(--primary-red);
    }

    .form-control[readonly] {
      background-color: #f8fafc;
      color: var(--text-muted);
      cursor: not-allowed;
    }

    .btn-submit {
      background-color: var(--primary-red);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s;
    }

    .btn-submit:hover {
      background-color: var(--primary-red-hover);
    }

    /* KYC LIST STYLING */
    .kyc-status-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 24px;
    }

    .kyc-item-card {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .kyc-item-left {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .kyc-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: var(--primary-red);
    }

    .kyc-info h5 {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 2px;
    }

    .kyc-info p {
      font-size: 11px;
      color: var(--text-muted);
    }

    /* LOGIN INFO BANNER */
    .login-info-card {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 10px;
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
    }

    .login-info-card i {
      font-size: 24px;
      color: var(--green-accent);
    }

    .login-info-text h5 {
      font-size: 13.5px;
      font-weight: 700;
      color: #166534;
      margin-bottom: 2px;
    }

    .login-info-text p {
      font-size: 11.5px;
      color: #15803d;
    }

    /* BANK ACCOUNTS CARDS */
    .accounts-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 20px;
    }

    .account-item-card {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .account-item-left {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .account-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: var(--primary-red);
    }

    .account-info h5 {
      font-size: 13px;
      font-weight: 700;
    }

    .account-info p {
      font-size: 11px;
      color: var(--text-muted);
    }

    /* TOGGLE SWITCHES FOR PREFERENCES */
    .setting-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      border-bottom: 1px solid var(--border-color);
    }

    .setting-toggle-row:last-child {
      border-bottom: none;
    }

    .setting-toggle-info h5 {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 2px;
    }

    .setting-toggle-info p {
      font-size: 11px;
      color: var(--text-muted);
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #cbd5e1;
      transition: .3s;
      border-radius: 24px;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .3s;
      border-radius: 50%;
    }

    input:checked + .slider {
      background-color: var(--green-accent);
    }

    input:checked + .slider:before {
      transform: translateX(20px);
    }

    /* MODAL BACKDROP & DIALOG */
    .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .modal-backdrop.active {
      display: flex;
    }

    .modal-card {
      background: white;
      width: 100%;
      max-width: 500px;
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.15);
      position: relative;
    }

    .close-modal-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      background: none;
      border: none;
      font-size: 18px;
      color: var(--text-muted);
      cursor: pointer;
    }

    .badge-green {
      color: var(--green-accent);
      background: var(--green-bg);
      font-weight: 700;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .badge-amber {
      color: var(--amber-accent);
      background: var(--amber-bg);
      font-weight: 700;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
    }

    @media (max-width: 768px) {
      .profile-overview-card { flex-direction: column; align-items: flex-start; gap: 16px; }
      .form-grid { grid-template-columns: 1fr; }
      .form-group.full-width { grid-column: span 1; }
      .settings-tabs { overflow-x: auto; gap: 16px; white-space: nowrap; }
    }


      /* Daily Savings  */

    /* STEP PROGRESS BAR */
    .step-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32px;
      position: relative;
      max-width: 650px;
      margin-left: auto;
      margin-right: auto;
    }

    .step-item {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--bg-body);
      padding: 0 8px;
      z-index: 2;
      cursor: pointer;
    }

    .step-number {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background-color: #e2e8f0;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      transition: all 0.3s;
    }

    .step-item.active .step-number {
      background-color: var(--primary-red);
      color: white;
    }

    .step-item.completed .step-number {
      background-color: var(--green-accent);
      color: white;
    }

    .step-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .step-item.active .step-label {
      color: var(--text-dark);
    }

   
    .ds.step-card {
      background: var(--bg-card);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      padding: 28px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
      display: none;
    }

    .ds.step-card.active {
      display: block;
    }

    /* STEP VIEWS CARD */
    .step-card {
      background: var(--bg-card);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      padding: 28px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    }

    .step-card.active {
      display: block;
    }

    /* STEP 1: SET GOAL */
    .details-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 24px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    .form-label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 8px;
    }

    .select-input, .text-input {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-dark);
      outline: none;
      background: #fff;
      transition: border-color 0.2s;
    }

    .select-input:focus, .text-input:focus {
      border-color: var(--primary-red);
    }

    .custom-goal-wrapper {
      margin-top: 10px;
      display: none;
    }

    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
    }

    .input-prefix {
      position: absolute;
      left: 14px;
      font-weight: 700;
      font-size: 16px;
      color: var(--text-dark);
    }

    .amount-input {
      width: 100%;
      padding: 12px 14px 12px 32px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 16px;
      font-weight: 700;
      outline: none;
      transition: border-color 0.2s;
    }

    .amount-input:focus {
      border-color: var(--primary-red);
    }

    .presets-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 12px;
    }

    .preset-btn {
      background: #f8fafc;
      border: 1px solid var(--border-color);
      padding: 8px 0;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-dark);
      cursor: pointer;
      text-align: center;
      transition: all 0.2s;
    }

    .preset-btn:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    /* Summary Box */
    .summary-box {
      background: #fafafa;
      border: 1px solid #f1f5f9;
      border-radius: 10px;
      padding: 20px;
      position: relative;
      overflow: hidden;
    }

    .summary-box h5 {
      font-size: 13px;
      color: var(--text-dark);
      margin-bottom: 12px;
      font-weight: 700;
    }

    .summary-row {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      padding: 6px 0;
      color: var(--text-muted);
    }

    .summary-row strong {
      color: var(--text-dark);
    }

    .summary-row.highlight {
      border-top: 1px solid var(--border-color);
      margin-top: 8px;
      padding-top: 10px;
    }

    .piggy-icon-bg {
      position: absolute;
      right: -10px;
      bottom: -10px;
      font-size: 80px;
      color: #fca5a5;
      opacity: 0.2;
    }

    .btn-submit {
      width: 100%;
      background-color: var(--primary-red);
      color: white;
      border: none;
      padding: 12px;
      border-radius: 8px;
      font-size: 13.5px;
      font-weight: 700;
      cursor: pointer;
      margin-top: 24px;
      transition: background 0.2s;
    }

    .btn-submit:hover {
      background-color: var(--primary-red-hover);
    }

    /* STEP 2: PAYMENT METHOD */
    .payment-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 24px;
    }

    .payment-methods {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .payment-option {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: all 0.2s;
    }

    .payment-option:hover, .payment-option.selected {
      border-color: var(--green-accent);
      background-color: #f0fdf4;
    }

    .payment-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .payment-left i {
      font-size: 20px;
      color: var(--text-muted);
    }

    .payment-option.selected .payment-left i {
      color: var(--green-accent);
    }

    .payment-details h6 {
      font-size: 13px;
      font-weight: 700;
    }

    .payment-details p {
      font-size: 11px;
      color: var(--text-muted);
    }

    .auto-debit-info {
      background: #fff8f6;
      border: 1px solid #ffedd5;
      border-radius: 10px;
      padding: 16px;
    }

    .bank-card-details {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 10px 14px;
      margin-bottom: 12px;
    }

    .change-link {
      font-size: 11px;
      font-weight: 700;
      color: #2563eb;
      text-decoration: none;
    }

    .pause-notice {
      background: #fffbeb;
      border: 1px solid #fef3c7;
      color: #d97706;
      border-radius: 6px;
      padding: 8px 12px;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* STEP 3: CONFIRMATION */
    .confirmation-view {
      text-align: center;
      padding: 20px 10px;
    }

    .success-icon-wrapper {
      width: 54px;
      height: 54px;
      background-color: var(--green-accent);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      margin: 0 auto 16px auto;
    }

    .confirmation-view h3 {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .confirmation-view p {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 24px;
    }

    .receipt-card {
      background: #fafafa;
      border: 1px dashed var(--border-color);
      border-radius: 10px;
      padding: 16px 20px;
      display: flex;
      justify-content: space-between;
      max-width: 520px;
      margin: 0 auto 28px auto;
      text-align: left;
      flex-wrap: wrap;
    }

    .receipt-item span {
      display: block;
      font-size: 11px;
      color: var(--text-light);
      margin-bottom: 2px;
    }

    .receipt-item strong {
      font-size: 13px;
      color: var(--text-dark);
    }

    .confirm-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
      max-width: 400px;
      margin: 0 auto;
    }

    .confirm-actions button {
      flex: 1;
      padding: 10px;
      border-radius: 8px;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
    }

    .btn-secondary {
      background: white;
      border: 1px solid var(--border-color);
      color: var(--text-dark);
    }

    /* FOOTER TRUST BADGES */
    .footer-trust-bar {
      display: flex;
      justify-content: center;
      gap: 32px;
      margin-top: 32px;
      padding-top: 20px;
      border-top: 1px solid var(--border-color);
    }

    .trust-badge-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
    }

    .trust-badge-item i {
      color: #f59e0b;
      font-size: 14px;
    }

    @media (max-width: 768px) {
      .details-grid, .payment-grid {
        grid-template-columns: 1fr;
      }
      .footer-trust-bar {
        flex-wrap: wrap;
        gap: 16px;
      }
    }


    /* Saving Goals */
        .goals-summary-card {
            background: linear-gradient(135deg, #A34828 0%, #C15C3D 100%);
            color: #FFFFFF;
            border-radius: 16px;
            padding: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            box-shadow: 0 8px 20px rgba(163, 72, 40, 0.15);
        }

        .summary-stat .label {
            font-size: 12px;
            opacity: 0.85;
            margin-bottom: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .summary-stat .value {
            font-size: 24px;
            font-weight: 700;
        }

        .summary-divider {
            width: 1px;
            height: 40px;
            background: rgba(255, 255, 255, 0.2);
        }

        /* Goal List Card */
        .goal-card {
            background: #FFFFFF;
            border: 1px solid #EFE6DC;
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 16px;
            box-shadow: 0 4px 12px rgba(193, 92, 61, 0.03);
        }

        .goal-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
        }

        .goal-info h3 {
            font-size: 16px;
            font-weight: 700;
            color: #1A1A1A;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .status-badge {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 6px;
            text-transform: uppercase;
        }

        .status-badge.active {
            background: #E8F5E9;
            color: #2E7D32;
        }

        .status-badge.paused {
            background: #FFF3E0;
            color: #E65100;
        }

        .goal-info p {
            font-size: 12px;
            color: #7A7A7A;
        }

        .target-amount-box {
            text-align: right;
        }

        .target-amount-box .current {
            font-size: 18px;
            font-weight: 700;
            color: #1A1A1A;
        }

        .target-amount-box .target {
            font-size: 12px;
            color: #8C8C8C;
        }

        /* Progress Bar */
        .progress-container {
            margin-bottom: 20px;
        }

        .progress-bar-bg {
            width: 100%;
            height: 8px;
            background: #F0EAE1;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 6px;
        }

        .progress-bar-fill {
            height: 100%;
            background: #A34828;
            border-radius: 4px;
        }

        .progress-meta {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: #6B6B6B;
            font-weight: 500;
        }

        /* Action Buttons */
        .goal-actions {
            display: flex;
            gap: 12px;
            border-top: 1px solid #F5F1EB;
            padding-top: 16px;
        }

        .btn {
            padding: 10px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            border: none;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .btn-outline {
            background: #FFFFFF;
            border: 1px solid #D8CFC4;
            color: #4A4A4A;
        }

        .btn-outline:hover {
            background: #F9F6F0;
        }

        .btn-primary {
            background: #A34828;
            color: #FFFFFF;
            flex-grow: 1;
        }

        .btn-primary:hover {
            background: #8E3D20;
        }

        .btn-warning {
            background: #FFF3E0;
            color: #E65100;
            border: 1px solid #FFE0B2;
        }

        .btn-warning:hover {
            background: #FFE0B2;
        }




        /* REFERRAL */
    .referral-hero-card {
      background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
      border: 1px solid #fde68a;
      border-radius: 14px;
      padding: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
    }

    .referral-hero-content {
      max-width: 550px;
      z-index: 2;
    }

    .referral-hero-content span {
      font-size: 11px;
      font-weight: 700;
      color: #b45309;
      text-transform: uppercase;
      letter-spacing: 1px;
      display: block;
      margin-bottom: 6px;
    }

    .referral-hero-content h2 {
      font-size: 26px;
      font-weight: 800;
      color: #92400e;
      margin-bottom: 10px;
    }

    .referral-hero-content p {
      font-size: 13px;
      color: #78350f;
      line-height: 1.4;
      margin-bottom: 20px;
    }

    /* SHARE LINK BOX */
    .share-link-box {
      background: white;
      border: 1px solid #fcd34d;
      border-radius: 10px;
      padding: 6px 6px 6px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 450px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }

    .share-link-box input {
      border: none;
      outline: none;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-dark);
      width: 100%;
      background: transparent;
    }

    .btn-copy {
      background: #f59e0b;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s;
      white-space: nowrap;
    }

    .btn-copy:hover {
      background: #d97706;
    }

    .social-share-buttons {
      display: flex;
      gap: 10px;
      margin-top: 14px;
    }

    .btn-social {
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: white;
    }

    .btn-whatsapp { background: #22c55e; }
    .btn-telegram { background: #0ea5e9; }

    .hero-gift-icon {
      font-size: 110px;
      color: #f59e0b;
      opacity: 0.85;
      z-index: 1;
    }

    /* STATS ROW */
    .stats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }

    .stat-card {
      background: var(--bg-card);
      border-radius: 12px;
      padding: 18px 20px;
      border: 1px solid var(--border-color);
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
      align-items: center;
      justify-content: space-between;
    }

    .stat-info span {
      font-size: 11.5px;
      color: var(--text-muted);
      font-weight: 600;
      display: block;
      margin-bottom: 4px;
    }

    .stat-info h3 {
      font-size: 22px;
      font-weight: 800;
      color: var(--text-dark);
    }

    .stat-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: var(--amber-bg);
      color: var(--amber-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    /* HOW IT WORKS CARD */
    .steps-card {
      background: var(--bg-card);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      padding: 24px;
      margin-bottom: 24px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }

    .steps-card h4 {
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 16px;
    }

    .steps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .step-box {
      background: #f8fafc;
      border-radius: 10px;
      padding: 16px;
      border: 1px solid #f1f5f9;
      text-align: center;
    }

    .step-num {
      width: 28px;
      height: 28px;
      background: var(--amber-accent);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      margin: 0 auto 10px auto;
    }

    .step-box h5 {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .step-box p {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.3;
    }

    /* REFERRED FRIENDS TABLE */
    .table-card {
      background: var(--bg-card);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      padding: 24px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }

    .table-card h4 {
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 16px;
    }

    .table-responsive {
      overflow-x: auto;
    }

    table.referral-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }

    table.referral-table th {
      color: var(--text-muted);
      font-weight: 700;
      padding: 10px 8px;
      border-bottom: 1px solid var(--border-color);
      text-align: left;
      background: #f8fafc;
    }

    table.referral-table td {
      padding: 12px 8px;
      border-bottom: 1px solid var(--border-color);
      text-align: left;
    }

    @media (max-width: 768px) {
      .referral-hero-card { flex-direction: column; text-align: center; gap: 20px; }
      .share-link-box { max-width: 100%; }
      .social-share-buttons { justify-content: center; }
      .stats-row, .steps-grid { grid-template-columns: 1fr; }
    }


    /* Hide the small icon by default */
.sidebar .logo-icon {
    display: none;
}

/* Show the full logo by default */
.sidebar .logo-full {
    display: block;
}

/* WHEN SIDEBAR HAS THE 'collapsed' CLASS */
.sidebar.collapsed .logo-full {
    display: none;
}

.sidebar.collapsed .logo-icon {
    display: block;
    margin: 0 auto;
}

/* Optional: Rotate the toggle arrow when collapsed */
.sidebar.collapsed .collapse-toggle i {
    transform: rotate(180deg);
    display: inline-block; /* Required for transform to work on icons */
    transition: transform 0.3s ease;
}


/* Additional styles for frequency selector tabs (adjusted for 3 columns) */
  .frequency-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
  }
  .freq-tab {
    background: #f8f5f0;
    border: 1px solid #e8e2d5;
    border-radius: 8px;
    padding: 10px 6px;
    font-size: 12px;
    font-weight: 600;
    color: #5c554b;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .freq-tab.active {
    background: #a34828;
    color: #ffffff;
    border-color: #a34828;
  }
  .freq-tab:hover:not(.active) {
    background: #f0eae1;
  }

  /* Pulsing animation for the live rate change percentage */
@keyframes pulseRate {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); text-shadow: 0 0 8px rgba(25, 135, 84, 0.4); }
  100% { opacity: 1; transform: scale(1); }
}

.rate-pulse {
  animation: pulseRate 2s infinite ease-in-out;
  display: inline-block;
}

/* Radar-like pulsing effect for the notification dot */
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

.notification-pulse {
  animation: pulseDot 2s infinite;
}

/* Styling and animation for the Live Market dot */
.live-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  animation: liveBlinkDot 1.5s infinite ease-in-out;
}

@keyframes liveBlinkDot {
  0% { 
    opacity: 1; 
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); /* Bootstrap 'danger' red */
  }
  50% { 
    opacity: 0.5; 
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0); 
  }
  100% { 
    opacity: 1; 
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); 
  }
}