/* ============================================================
   DhanBharat Customer Portal – Brand Theme
   Logo Colors:
     Orange  : #F47920  (primary accent / orange circle)
     Blue    : #1B3A8C  (main dark blue)
     Green   : #2A9D3A  (₹ rupee symbol)
     Light-bg: #FFF8F2  (warm off-white)
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --db-orange       : #F47920;
  --db-orange-dark  : #D4630F;
  --db-orange-light : #FFF0E3;
  --db-blue         : #1B3A8C;
  --db-blue-dark    : #122870;
  --db-blue-light   : #E8EEF9;
  --db-green        : #2A9D3A;
  --db-green-dark   : #1E7A2B;
  --db-green-light  : #E6F5E9;
  --db-white        : #FFFFFF;
  --db-light        : #FFF8F2;
  --db-text         : #2D2D2D;
  --db-muted        : #6B7280;
  --db-border       : #E5E7EB;
  --db-shadow       : 0 4px 24px rgba(0,0,0,0.08);
  --db-radius       : 10px;
}

/* ── Global Body ───────────────────────────────────────────── */
body {
  background-color: #F5F7FA !important;
  color: var(--db-text) !important;
  font-family: 'Open Sans', sans-serif !important;
}

/* ── LOGIN PAGE ────────────────────────────────────────────── */
.background-webcolor {
  background: linear-gradient(135deg, var(--db-blue) 0%, #0F2460 45%, var(--db-orange-dark) 100%) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.background-webcolor .card {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.20) !important;
  overflow: hidden;
  max-width: 440px;
  width: 100%;
}

.background-webcolor .card-body {
  padding: 40px 36px !important;
  background: #fff;
}

.background-webcolor .card-body::before {
  content: '';
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--db-orange) 0%, var(--db-blue) 60%, var(--db-green) 100%);
  margin: -40px -36px 28px -36px;
}

.background-webcolor h3 {
  color: var(--db-blue) !important;
  font-size: 1.4rem !important;
  margin-bottom: 22px !important;
}

.background-webcolor .form-control {
  border: 1.5px solid var(--db-border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.background-webcolor .form-control:focus {
  border-color: var(--db-orange) !important;
  box-shadow: 0 0 0 3px rgba(244,121,32,0.15) !important;
  outline: none !important;
}

/* LOGIN button */
.background-webcolor button.btn.btn-primary,
.background-webcolor .btn-primary {
  background: linear-gradient(90deg, var(--db-orange) 0%, var(--db-orange-dark) 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  padding: 12px !important;
  font-size: 1rem !important;
  transition: opacity 0.2s, transform 0.15s;
}

.background-webcolor button.btn.btn-primary:hover,
.background-webcolor .btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.background-webcolor p.small a,
.background-webcolor a {
  color: var(--db-orange) !important;
  font-weight: 600;
}

.background-webcolor p.small a:hover,
.background-webcolor a:hover {
  color: var(--db-blue) !important;
  text-decoration: underline;
}

.background-webcolor hr {
  border-color: var(--db-border) !important;
}

/* ── SIDEBAR / SIDE-PANEL ──────────────────────────────────── */
#side-panel {
  background: linear-gradient(180deg, var(--db-blue) 0%, #0F2460 100%) !important;
  border-right: 3px solid var(--db-orange) !important;
}

#side-panel .side-panel-wrap {
  background: transparent !important;
}

#side-panel .logo {
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 16px;
  margin-bottom: 16px !important;
}

/* User name & mobile in sidebar */
#side-panel nav p {
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.9rem;
}

#side-panel nav hr {
  border-color: rgba(255,255,255,0.15) !important;
}

/* Sidebar menu links */
#side-panel #mainMenu nav ul li a {
  color: rgba(255,255,255,0.80) !important;
  font-size: 0.9rem;
  padding: 10px 14px !important;
  border-radius: 8px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}

#side-panel #mainMenu nav ul li a i {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  color: var(--db-orange);
  transition: color 0.2s;
}

#side-panel #mainMenu nav ul li a:hover {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}

#side-panel #mainMenu nav ul li a:hover i {
  color: var(--db-orange) !important;
}

/* Close panel button */
#side-panel #close-panel > i {
  color: #fff !important;
  background: var(--db-orange) !important;
}

/* Logout link – distinct color */
#side-panel #mainMenu nav ul li:last-child a {
  color: #FFCBA4 !important;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 6px;
  padding-top: 12px !important;
}

/* ── HEADER BAR ────────────────────────────────────────────── */
#header .header-inner {
  background: #fff !important;
  border-bottom: 2px solid var(--db-orange-light) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
}

#header .toggle-item i {
  color: var(--db-blue) !important;
  font-size: 1.4rem;
}

@media (max-width: 991px) {
  #header #side-panel-trigger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 10px 0;
    padding: 0 !important;
    position: relative;
    z-index: 200;
  }

  #header #side-panel-trigger > i {
    box-sizing: border-box;
    display: block;
    width: 22px;
    height: 18px;
    color: var(--db-orange) !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  #header #side-panel-trigger > i:first-child {
    position: relative !important;
    visibility: visible !important;
    background: linear-gradient(
      to bottom,
      var(--db-orange) 0 2px,
      transparent 2px 8px,
      var(--db-orange) 8px 10px,
      transparent 10px 16px,
      var(--db-orange) 16px 18px
    );
  }

  #header #side-panel-trigger > i:first-child::before {
    content: none !important;
    display: none !important;
  }

  #header #side-panel-trigger > i:nth-of-type(2) {
    position: absolute !important;
    visibility: hidden !important;
    width: 28px;
    height: 28px;
  }

  #header #side-panel-trigger > i:nth-of-type(2)::before {
    content: "\00d7" !important;
    display: block;
    color: var(--db-orange) !important;
    font-family: Arial, sans-serif !important;
    font-size: 28px !important;
    line-height: 28px;
    text-align: center;
  }

  #header #side-panel-trigger.toggle-active > i:first-child {
    position: absolute !important;
    visibility: hidden !important;
  }

  #header #side-panel-trigger.toggle-active > i:nth-of-type(2) {
    position: relative !important;
    visibility: visible !important;
  }
}

/* ── PAGE TITLE BAR ────────────────────────────────────────── */
#page-title.background-dark,
section#page-title.background-dark {
  background: linear-gradient(90deg, var(--db-blue) 0%, var(--db-blue-dark) 60%, #0A1C52 100%) !important;
  border-left: 5px solid var(--db-orange) !important;
  padding: 16px 0 !important;
}

#page-title .page-title h4 {
  color: #fff !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

#page-title .page-title h4 i {
  color: var(--db-orange) !important;
  font-size: 1.2rem;
}

/* ── CONTENT CARDS ─────────────────────────────────────────── */
#page-content .card {
  border: none !important;
  border-radius: var(--db-radius) !important;
  box-shadow: var(--db-shadow) !important;
  background: #fff !important;
  margin-bottom: 20px;
  transition: box-shadow 0.2s;
}

#page-content .card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}

/* counter cards on dashboard */
#page-content .card .counter {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--db-orange) !important;
  line-height: 1;
}

#page-content .card h6 {
  color: var(--db-muted) !important;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 6px;
}

/* Dashboard counter card top accent */
#page-content .col-lg-4 .card {
  border-top: 4px solid var(--db-orange) !important;
}
#page-content .col-lg-4:nth-child(2) .card {
  border-top-color: var(--db-blue) !important;
}
#page-content .col-lg-4:nth-child(3) .card {
  border-top-color: var(--db-green) !important;
}

/* ── FORMS inside content area ─────────────────────────────── */
#page-content .form-control,
#page-content select.form-control {
  border: 1.5px solid var(--db-border) !important;
  border-radius: 8px !important;
  font-size: 0.92rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#page-content .form-control:focus,
#page-content select.form-control:focus {
  border-color: var(--db-orange) !important;
  box-shadow: 0 0 0 3px rgba(244,121,32,0.12) !important;
}

#page-content label {
  font-weight: 600 !important;
  color: var(--db-text) !important;
  font-size: 0.87rem;
}

/* process / bordered form panels */
.process.border-top-dark {
  border-top: 4px solid var(--db-orange) !important;
  border-radius: var(--db-radius) !important;
  background: #fff !important;
  padding: 24px !important;
  box-shadow: var(--db-shadow) !important;
}

.process h4 {
  color: var(--db-blue) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  margin-bottom: 16px !important;
}

/* ── BUTTONS ───────────────────────────────────────────────── */

/* Primary (orange) */
button.btn.btn-primary,
.btn:not(.close):not(.mfp-close).btn-primary,
a.btn:not([href]):not([tabindex]).btn-primary {
  background: linear-gradient(90deg, var(--db-orange) 0%, var(--db-orange-dark) 100%) !important;
  border-color: var(--db-orange) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  transition: opacity 0.2s, transform 0.15s !important;
}

button.btn.btn-primary:hover,
.btn:not(.close):not(.mfp-close).btn-primary:hover,
a.btn:not([href]):not([tabindex]).btn-primary:hover {
  opacity: 0.90 !important;
  transform: translateY(-1px) !important;
  background: linear-gradient(90deg, var(--db-orange-dark) 0%, var(--db-orange) 100%) !important;
}

/* Dark buttons → Blue */
button.btn.btn-dark,
.btn:not(.close):not(.mfp-close).btn-dark,
a.btn:not([href]):not([tabindex]).btn-dark {
  background-color: var(--db-blue) !important;
  border-color: var(--db-blue) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: background 0.2s, transform 0.15s !important;
}

button.btn.btn-dark:hover,
.btn:not(.close):not(.mfp-close).btn-dark:hover,
a.btn:not([href]):not([tabindex]).btn-dark:hover {
  background-color: var(--db-blue-dark) !important;
  border-color: var(--db-blue-dark) !important;
  transform: translateY(-1px) !important;
}

/* Icon / small buttons */
.btn-icon.btn-sm {
  color: var(--db-orange) !important;
  border: 1px solid var(--db-orange) !important;
  border-radius: 6px !important;
  font-size: 0.8rem;
  background: transparent !important;
  padding: 4px 10px !important;
  gap: 4px;
  display: inline-flex;
  align-items: center;
}

.btn-icon.btn-sm:hover {
  background: var(--db-orange) !important;
  color: #fff !important;
}

/* Copy button */
.input-group-btn .btn-light {
  background: var(--db-blue) !important;
  border-color: var(--db-blue) !important;
  color: #fff !important;
  border-radius: 0 8px 8px 0 !important;
  font-weight: 600;
}

.input-group-btn .btn-light:hover {
  background: var(--db-blue-dark) !important;
}

/* ── REFER & EARN FORM ─────────────────────────────────────── */
form.p-cb h4 {
  color: var(--db-blue) !important;
}

/* ── BLOCKQUOTE / INFO BOX ─────────────────────────────────── */
.blockquote {
  border-left: 4px solid var(--db-orange) !important;
  background: var(--db-light) !important;
  border-radius: 0 var(--db-radius) var(--db-radius) 0 !important;
  padding: 20px 24px !important;
}

.blockquote h4 {
  color: var(--db-blue) !important;
  font-weight: 700;
}

.blockquote a {
  color: var(--db-orange) !important;
  font-weight: 600;
}

/* ── ALERTS ────────────────────────────────────────────────── */
.alert-danger {
  background: #FFF3F0 !important;
  border-color: #F47920 !important;
  color: #C0440A !important;
  border-radius: 8px !important;
}

/* ── TABLES ────────────────────────────────────────────────── */
.table > thead > tr > th {
  background: var(--db-blue) !important;
  color: #fff !important;
  border: none !important;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 10px !important;
}

.table-hover tbody tr:hover {
  background: var(--db-blue-light) !important;
  cursor: default;
}

.table > tbody > tr > td {
  font-size: 0.9rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--db-border) !important;
  padding: 10px !important;
}

/* ── DATATABLE OVERRIDES ───────────────────────────────────── */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--db-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--db-blue-light) !important;
  color: var(--db-blue) !important;
  border: 1px solid var(--db-border) !important;
  border-radius: 6px !important;
}

.dt-buttons .dt-button {
  background: var(--db-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 0.82rem;
  padding: 6px 14px !important;
  margin-right: 4px;
}

.dt-buttons .dt-button:hover {
  background: var(--db-blue-dark) !important;
}

/* ── ACCORDION ─────────────────────────────────────────────── */
.accordion .ac-item .ac-title {
  background: var(--db-blue-light) !important;
  color: var(--db-blue) !important;
  border-left: 4px solid var(--db-orange) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-weight: 700;
  font-size: 0.95rem;
}

.accordion .ac-item .ac-title:hover {
  background: var(--db-blue) !important;
  color: #fff !important;
}

/* ── SUPPORT PAGE CARD ─────────────────────────────────────── */
#page-content .card.process.border-top-dark {
  border-top: 4px solid var(--db-green) !important;
}

/* contact info links */
#page-content .card i.bi {
  color: var(--db-orange) !important;
}

.text-info {
  color: var(--db-green) !important;
}

/* ── FOOTER ────────────────────────────────────────────────── */
#footer {
  background: var(--db-blue) !important;
  margin-top: 40px;
}

#footer .copyright-content {
  background: var(--db-blue-dark) !important;
  padding: 14px 0 !important;
}

#footer .copyright-text {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.85rem;
}

/* ── SCROLL TO TOP ─────────────────────────────────────────── */
a#scrollTop {
  background: var(--db-orange) !important;
  border-radius: 8px !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(244,121,32,0.35) !important;
}

a#scrollTop:hover {
  background: var(--db-orange-dark) !important;
}

/* ── FORGET PASSWORD PAGE ──────────────────────────────────── */
.background-webcolor .card-body h3.text-center {
  font-size: 1.2rem !important;
}

/* ── REFERRAL SECTION ──────────────────────────────────────── */
#page-content .input-group .form-control[id^="target"] {
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
}

/* ── LINKS ─────────────────────────────────────────────────── */
#page-content a:not(.btn) {
  color: var(--db-orange) !important;
}

#page-content a:not(.btn):hover {
  color: var(--db-blue) !important;
  text-decoration: underline;
}

/* ── RESPONSIVE TWEAKS ─────────────────────────────────────── */
@media (max-width: 768px) {
  .background-webcolor .card-body {
    padding: 28px 20px !important;
  }

  #page-title.background-dark {
    border-left: 3px solid var(--db-orange) !important;
  }

  .process.border-top-dark {
    padding: 16px !important;
  }

  #side-panel #mainMenu nav ul li a {
    font-size: 0.85rem;
    padding: 8px 10px !important;
  }
}

/* ── SPINNER / LOADING OVERRIDE ────────────────────────────── */
.spinner-border {
  color: #fff !important;
}


/* ── SIDEBAR ICON ONLY ─────────────────────────────────────── */
#side-panel .side-panel-wrap .logo {
  text-align: center;
  padding: 18px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 14px !important;
}

#side-panel .side-panel-wrap .logo img {
  width: 70px !important;
  height: 70px !important;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(244,121,32,0.30);
  border: 2px solid rgba(255,255,255,0.15);
}

/* ── MEMBERSHIP CARD – DhanBharat Brand Redesign ───────────── */
.credit__part.gold-card {
  background-image: none !important;
  background: linear-gradient(135deg, #1B3A8C 0%, #0F2460 40%, #122870 70%, #1a1a2e 100%) !important;
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 6px 20px rgba(244,121,32,0.15) !important;
}

/* Gold shimmer top border */
.credit__part.gold-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #F47920, #FFD700, #F47920, #FFD700);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
  z-index: 1;
}

/* Decorative circle pattern */
.credit__part.gold-card::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,121,32,0.18) 0%, transparent 70%);
  z-index: 0;
}

@keyframes shimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* Card head area – logo and brand name */
.credit__part.gold-card .credit__head {
  position: relative;
  z-index: 2;
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: auto !important;
  margin-bottom: 8px;
}

.credit__part.gold-card .credit__head::before {
  content: 'ध';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F47920, #D4630F);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 900;
  font-family: serif;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(244,121,32,0.4);
}

.credit__part.gold-card .credit__head::after {
  content: 'dhanbharat';
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: lowercase;
}

/* Card type label top-right */
.credit__part.gold-card .credit__front {
  position: relative;
  z-index: 2;
  padding: 20px 28px !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Card number */
.credit__part.gold-card .credit_numer {
  color: rgba(255,255,255,0.92) !important;
  font-size: 1.3rem !important;
  letter-spacing: 3px;
  font-weight: 600;
  margin: 10px 0 8px !important;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Valid date and holder name */
.credit__part.gold-card .credit__space-full {
  position: relative;
  z-index: 2;
}

.credit__part.gold-card .credit__label {
  color: rgba(255,215,0,0.80) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 4px;
}

.credit__part.gold-card .credit__info {
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Membership type badge */
.credit__part.gold-card .credit__front::after {
  content: 'ROYAL MEMBERSHIP';
  position: absolute;
  top: 22px; right: 24px;
  color: rgba(255,215,0,0.85);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  z-index: 3;
}

/* Bottom right brand watermark */
.credit__part.gold-card .credit__front::before {
  content: 'dhanbharat.com';
  position: absolute;
  bottom: 14px; right: 24px;
  color: rgba(255,255,255,0.25);
  font-size: 0.65rem;
  letter-spacing: 1px;
  z-index: 3;
}

/* Chip decoration */
.credit__part.gold-card .credit__head > img {
  display: none !important;  /* hide any old logo img if uncommented */
}


/* ── MEMBERSHIP CARD – logo img visible, hide CSS pseudo brand ─ */
.credit__part.gold-card .credit__head {
  position: relative;
  z-index: 2;
  display: flex !important;
  align-items: center;
  height: 70px !important;
}

/* Hide the CSS-generated ध icon and text since real logo is shown */
.credit__part.gold-card .credit__head::before,
.credit__part.gold-card .credit__head::after {
  display: none !important;
}

.credit__part.gold-card .credit__front-logo {
  height: 55px !important;
  width: auto !important;
  object-fit: contain;
  /* logo on dark card – add a subtle drop shadow for readability */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.40)) brightness(1.1);
}

/* ── SIDEBAR icon – keep only dhan.png icon, clean centering ── */
#side-panel .side-panel-wrap .logo img {
  width: 70px !important;
  height: 70px !important;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(244,121,32,0.30);
  border: 2px solid rgba(255,255,255,0.15);
}

/* ── LOGIN / FORGOT PASSWORD – full logo display ──────────── */
.background-webcolor .card-body .logo img {
  width: 220px !important;
  height: auto !important;
  object-fit: contain;
}