/*
 * BariFollow — Theme v2
 * Light / Dark mode + custom components
 * Design system: refined purple-accent SaaS
 */

/* ============================================================
   FONT IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
   LIGHT MODE (default)
   ============================================================ */
:root.white-mode {
  --color-1:              #0d1117;
  --color-2:              #f8f7ff;
  --color-3:              #ffffff;
  --color-4:              #f5f3ff;
  --color-5:              #e5e7eb;
  --color-6:              #ef4444;
  --color-7:              #4b5563;
  --white:                #ffffff;
  --color-9:              #e5e7eb;
  --shadow:               0 4px 20px rgba(95,77,238,.10), 0 1px 4px rgba(0,0,0,.06);
  --shadow-2:             0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-500:           0 2px 8px rgba(95,77,238,.08), 0 1px 3px rgba(0,0,0,.05);
  --border:               1px solid #e5e7eb;
  --color-10:             #fee2e2;
  --color-11:             #f8f7ff;
  --color-12:             #5f4dee;
  --td-range-bg:          #5f4dee;
  --color-btn-primary:    #5f4dee;
  --color-btn-text-primary: #ffffff;
  --color-btn-primary-hover: #4535c7;
  --body-background:      #f8f7ff;
  --table-striped:        #f5f3ff;
  --button-color:         #ffffff;
  --reload-1s:            linear-gradient(110deg,#ede9ff 8%,#f5f3ff 18%,#ede9ff 33%);
  --border-radius:        10px;
  --code-color:           #5f4dee;
  --code-back:            #ede9ff;
  --color-1-10:           rgba(95,77,238,.10);
  --btn-disabled:         #d1d5db;
  --btn-disabled-text:    #9ca3af;
  --color-bg:             #f8f7ff;

  /* New tokens */
  --accent:               #5f4dee;
  --accent-dark:          #4535c7;
  --accent-light:         #ede9ff;
  --text-dark:            #0d1117;
  --text-mid:             #4b5563;
  --text-light:           #9ca3af;
  --bg-white:             #ffffff;
  --bg-soft:              #f8f7ff;
  --border-color:         #e5e7eb;
  --shadow-sm:            0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:            0 4px 20px rgba(95,77,238,.10), 0 1px 4px rgba(0,0,0,.06);
  --shadow-lg:            0 10px 40px rgba(95,77,238,.15), 0 2px 8px rgba(0,0,0,.08);
  --radius:               16px;
  --radius-sm:            10px;
}

/* ============================================================
   DARK MODE
   ============================================================ */
:root.dark-mode {
  --color-1:              #f1f5f9;
  --color-2:              #0a0a0f;
  --color-3:              #13131a;
  --color-4:              #0d0d14;
  --color-5:              #2d2d3d;
  --color-6:              #f87171;
  --color-7:              #94a3b8;
  --white:                #13131a;
  --color-9:              #1e1e2e;
  --shadow:               0 4px 20px rgba(95,77,238,.20), 0 1px 4px rgba(0,0,0,.3);
  --shadow-2:             inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.04);
  --border:               1px solid #1e1e2e;
  --color-10:             rgba(239,68,68,.15);
  --color-11:             #0d0d14;
  --color-12:             #7c6cf0;
  --td-range-bg:          #7c6cf0;
  --color-btn-primary:    #7c6cf0;
  --color-btn-text-primary: #ffffff;
  --color-btn-primary-hover: #6b5de0;
  --color-a:              #a78bfa;
  --body-background:      #0a0a0f;
  --table-striped:        #0f0f18;
  --button-color:         #ffffff;
  --reload-1s:            linear-gradient(110deg,#1a1a2e 8%,#252540 18%,#1a1a2e 33%);
  --border-radius:        10px;
  --code-color:           #a78bfa;
  --code-back:            rgba(167,139,250,.15);
  --color-1-10:           rgba(124,108,240,.15);
  --btn-disabled:         #2d2d3d;
  --btn-disabled-text:    #64748b;
  --color-bg:             #0a0a0f;

  /* New tokens dark */
  --accent:               #7c6cf0;
  --accent-dark:          #6b5de0;
  --accent-light:         rgba(124,108,240,.15);
  --text-dark:            #f1f5f9;
  --text-mid:             #94a3b8;
  --text-light:           #64748b;
  --bg-white:             #13131a;
  --bg-soft:              #0d0d14;
  --border-color:         #1e1e2e;
  --shadow-sm:            0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:            0 4px 20px rgba(124,108,240,.20), 0 1px 6px rgba(0,0,0,.3);
  --shadow-lg:            0 10px 40px rgba(124,108,240,.25), 0 2px 10px rgba(0,0,0,.4);
  --radius:               16px;
  --radius-sm:            10px;
}

/* ============================================================
   ARABIC FONT
   ============================================================ */
:lang(ar) {
  font-family: 'Cairo', 'Nunito', sans-serif;
}

/* ============================================================
   SOCIAL BRAND COLORS (logo icons)
   ============================================================ */
.brand-pi, span.fab.fa-pinterest { color:#BD081C; }
i.fab.fa-tiktok.brand-tt, i.fab.fa-twitter.brand-x { color:var(--text-dark); }

/* ============================================================
   PREFS MODAL
   ============================================================ */
.prefs-modal {
  border-radius:var(--radius);
  border:0;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  background:var(--bg-white);
}
.prefs-header {
  padding:16px 20px;
  border-bottom:var(--border);
  background:var(--bg-white);
}
.prefs-title {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:16px;
  color:var(--text-dark);
}
.prefs-emoji { font-size:18px; }
.prefs-close { font-size:26px; opacity:.6; cursor:pointer; }
.prefs-close:hover { opacity:1; }
.prefs-body { padding:18px; background:var(--bg-soft); }
.prefs-card {
  background:var(--bg-white);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:14px;
  border:var(--border);
  box-shadow:var(--shadow-sm);
}
.prefs-card-title { font-weight:800; color:var(--text-dark); margin-bottom:10px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.prefs-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(32%,1fr));
  gap:2px;
  max-height:280px;
  overflow:auto;
  padding-right:4px;
  -webkit-overflow-scrolling:touch;
}
.prefs-list::-webkit-scrollbar { width:6px; }
.prefs-list::-webkit-scrollbar-track { background:var(--bg-soft); border-radius:6px; }
.prefs-list::-webkit-scrollbar-thumb { background:var(--accent); border-radius:6px; }
.prefs-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  text-decoration:none !important;
  color:var(--text-dark);
  transition:background .12s ease, transform .05s ease, border-color .12s;
  border:var(--border);
  margin:3px;
  cursor:pointer;
}
.prefs-item:hover {
  background:var(--accent-light);
  border-color:var(--accent);
  transform:translateY(-1px);
}
.prefs-item:active { transform:scale(0.995); }
.prefs-left { display:flex; align-items:center; gap:10px; }
.prefs-flag { width:22px; display:inline-flex; justify-content:center; opacity:.9; }
.prefs-text { font-weight:600; color:var(--text-dark); font-size:13px; }
.prefs-muted { color:var(--text-light); font-weight:500; font-size:12px; }
.prefs-check { color:#22c55e; font-weight:900; }
.prefs-item.is-active {
  border-color:var(--accent);
  background:var(--accent-light);
  box-shadow:0 0 0 3px rgba(95,77,238,.12);
}
.prefs-special { background-color:#fffbeb; }
a.prefs-item.prefs-special .prefs-text { color:#92400e; }
.prefs-special:hover { background:#fef3c7; border-color:#fde68a; }

/* ============================================================
   MOBILE — responsive edge fixes
   ============================================================ */
@media(max-width:500px) {
  .well { box-shadow:var(--shadow-500); }
  p.bf-sub { padding:0 10px; }
  .alert.alert-dismissible.alert-danger.below { border-radius:0; }
  .col-md-6.col-md-offset-2 { padding:0; }
  .low-balance-box { border-radius:0 !important; }
}

/* ============================================================
   BUTTON MICRO-INTERACTIONS
   ============================================================ */
button.navbar-toggle.collapsed:hover { background:var(--accent-light); }
.checkbox label { display:flex; align-items:center; gap:4px; }

a.btn.btn-xs.btn-primary:hover {
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent);
}
.btn:focus { outline:none; }

/* ============================================================
   TICKET STYLES
   ============================================================ */
a.ticket.view {
  text-decoration:none;
  color:var(--accent);
  padding:2px 0;
  border-radius:8px;
  white-space:nowrap;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:600;
}

/* ============================================================
   COLUMN OVERRIDES (desktop)
   ============================================================ */
@media(min-width:850px){
  .col-md-8.col-md-offset-2.new.\32 { width:85.666666%; margin-top:0; }
  .col-lg-3.col-md-6.col-12 { width:33.33%; }
}

/* ============================================================
   PAYMENT CARD STYLES
   ============================================================ */
.payment-container {
  padding:24px 0;
  width:100%;
  display:flex;
  justify-content:center;
}
.payment-card {
  border-radius:var(--radius);
  width:100%;
  max-width:500px;
}
.payment-header { margin-bottom:20px; text-align:center; }
.payment-header h3 { margin:0 0 8px; color:var(--text-dark); font-weight:800; }
.payment-header p { margin:0; color:var(--text-mid); }

.amount-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.pay-btn {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--bg-white);
  color:var(--text-dark);
  padding:14px 18px;
  border-radius:var(--radius-sm);
  text-decoration:none;
  font-weight:600;
  transition:all .2s ease;
  border:var(--border);
  box-shadow:var(--shadow-sm);
}
.pay-btn:hover {
  background:var(--accent);
  color:#fff;
  transform:translateY(-2px);
  text-decoration:none;
  box-shadow:var(--shadow-md);
  border-color:var(--accent);
}
.pay-btn i { font-size:12px; opacity:.4; }
.payment-footer { text-align:center; border-top:var(--border); padding-top:20px; }
.payment-footer p { margin-bottom:14px; color:var(--text-mid); }
.ticket-link {
  background:var(--bg-soft);
  padding:5px 14px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  margin:0 4px;
  border:var(--border);
  color:var(--text-dark);
  transition:all .15s;
  font-size:13px;
}
.ticket-link:hover { background:var(--accent); color:#fff; text-decoration:none; border-color:var(--accent); }
.payment-methods-img {
  box-shadow:var(--shadow-sm);
  height:auto;
  border-radius:8px;
  filter:grayscale(20%);
  transition:filter .3s;
}
.payment-methods-img:hover { filter:grayscale(0%); }

/* ============================================================
   BALANCE / FUNDS DISPLAY
   ============================================================ */
.title.user-balance.funds { color:var(--text-dark); margin-right:14px; font-weight:800; }
li.funds { display:flex; align-items:center; justify-content:space-between; }

/* ============================================================
   SHOWCASE / PANEL
   ============================================================ */
.panel-showcase { padding:56px 15px; background:var(--bg-white); }
.showcase-container { max-width:1200px; margin:0 auto; }
.showcase-header { text-align:center; margin-bottom:36px; }
.showcase-header h2 { font-size:26px; font-weight:800; color:var(--text-dark); }
.showcase-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.showcase-item { text-align:center; }
.image-box {
  position:relative; width:100%; aspect-ratio:4/3;
  border-radius:var(--radius); overflow:hidden;
  border:var(--border); box-shadow:var(--shadow-sm);
  cursor:pointer; background:var(--bg-soft);
  transition:box-shadow .2s;
}
.image-box:hover { box-shadow:var(--shadow-md); }
.image-box img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .4s ease; }
.image-box:hover img { transform:scale(1.04); }
.overlay {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:rgba(13,17,23,.45); display:flex;
  align-items:center; justify-content:center; opacity:0; transition:opacity .3s;
}
.overlay span { color:#fff; border:1px solid rgba(255,255,255,.8); padding:8px 20px; border-radius:20px; font-size:13px; font-weight:600; }
.image-box:hover .overlay { opacity:1; }
.showcase-item h3 { margin-top:14px; font-size:16px; font-weight:700; color:var(--text-dark); }
@media(max-width:600px){ .showcase-grid { grid-template-columns:1fr; } }

/* Platform brand */
.platform-info { display:flex; align-items:center; gap:14px; font-weight:700; font-size:15px; }
.platform-info i { font-size:15px; }
.brand-ig { color:#E1306C; }
.brand-tt { color:var(--text-dark); }
.brand-fb { color:#1877F2; }
.brand-yt { color:#FF0000; }
.brand-x  { color:var(--text-dark); }
.brand-tg { color:#26A5E4; }
.brand-sp { color:#1DB954; }
.brand-db { color:#5865F2; }
.brand-li { color:#0A66C2; }
.brand-tw { color:#9146FF; }
.brand-sc { color:#FFFC00; text-shadow:0 0 1px #000; }

/* ============================================================
   SKELETON LOADER
   ============================================================ */
.skeleton {
  background:var(--reload-1s);
  background-size:200% 100%;
  animation:shine 1.5s linear infinite;
  color:transparent !important;
  border-radius:var(--radius-sm);
  min-height:1em;
  will-change:background-position;
  transform:translateZ(0);
}
@keyframes shine { to { background-position-x:-200%; } }

/* ============================================================
   FOOTER NAV
   ============================================================ */
ul.footer-nav.6 {
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px;
}

/* ============================================================
   PLATFORM BUTTONS SERVICES
   ============================================================ */
button.services-list-filter i { width:20px; }
.platform-buttons.social {
  grid-template-columns:none;
  overflow-x:auto;
  overflow-y:hidden;
  display:flex;
  gap:7px;
}
.platform-selection.social { margin:1px 0; }
.well.social { padding:8px 15px; }
.fa-spotify { color:#1DB954; }

/* ============================================================
   SERVICE LIST
   ============================================================ */
.service-list { list-style:none; padding:0; margin:0; gap:4px; display:grid; grid-template-columns:1fr 1fr; }
.service-list li {
  padding:9px 10px;
  background:var(--bg-soft);
  border-radius:var(--radius-sm);
  font-size:13px;
  font-weight:500;
  color:var(--text-mid);
  display:flex;
  align-items:center;
  gap:12px;
  transition:.15s;
  border:var(--border);
}
.service-list li:hover { background:var(--accent-light); color:var(--accent); border-color:var(--accent); }
.service-list li i { font-size:13px; color:var(--accent); width:14px; }

/* ============================================================
   DROPDOWN — MENU DROPDOWN
   ============================================================ */
.dropdown-menu li { float:none; display:block; }

/* ============================================================
   PAYMENT METHODS
   ============================================================ */
.payment-methods {
  list-style:none;
  padding:0;
  margin-top:14px;
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.payment-methods li img {
  height:26px;
  transition:opacity .2s;
  border-radius:6px;
  border:var(--border);
  background:var(--bg-soft);
}
.payment-methods li img:hover { opacity:.85; }

/* ============================================================
   MOBILE NAV ACTIVE STATE
   ============================================================ */
.mob-nav-link li.active {
  background:var(--accent-light);
  border-radius:var(--radius-sm);
}
i.mob-nav-icon { font-size:19px; }

/* ============================================================
   WELL + SHADOW MOBILE
   ============================================================ */
@media(max-width:500px){
  .well { box-shadow:var(--shadow-500); }
}

/* ============================================================
   NAV PILLS — NEWORDER TABS
   ============================================================ */
.list.nav.nav-pills {
  padding:4px;
  box-shadow:var(--shadow-sm);
  border-radius:var(--radius-sm);
  background:var(--bg-white);
  border:var(--border);
}
@media(max-width:850px){ .list.nav.nav-pills { width:max-content; } }
.list.nav.nav-pills .neworder-item { flex:1; list-style:none; margin:1px; }
@media (min-width: 850px) {
    .list.nav.nav-pills .neworder-item {
        width: -webkit-fill-available;
    }
}
/* ============================================================
   ORDER WRAP
   ============================================================ */
.order-status-wrap { display:flex; flex-wrap:wrap; align-items:flex-start; min-height:72px; }
.order-status-wrap .order-status-left { flex:0 0 25%; max-width:25%; padding-right:10px; }
.order-status-wrap .order-status-right { flex:0 0 75%; max-width:75%; padding-left:10px; }
.status { margin-bottom:0; text-align:center; padding:5px 10px; border-radius:20px; color:#fff; font-size:12px; font-weight:700; display:inline-block; }
.status-pending    { background:#f59e0b; }
.status-in-progress { background:var(--accent); }
.status-refund     { background:#f97316; }
.status-completed  { background:#22c55e; }
.status-procesing  { background:#0891b2; }
.status-canceled   { background:#ef4444; }
.status-partial    { background:#14b8a6; }

/* ============================================================
   CURRENCIES DROPDOWN
   ============================================================ */
.navbar-badge.open { position:relative; }
#currencies-list {
  position:absolute; top:82%; left:0; z-index:1050;
  display:block; min-width:160px; border-radius:var(--radius-sm);
}
#currencies-list:not(.show) { display:none; }
.dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
.open .dropdown-menu {
  display:block !important; top:100%; right:0; border-radius:0px;
}
.title.user-balance { cursor:pointer; }
@media(min-width:1300px){
.navbar-default .navbar-nav > li > a:hover{ border-radius: 10px; }
}
/* ============================================================
   NAVBAR COLLAPSED SIDEBAR (mobile)
   ============================================================ */
@media(max-width:1300px){
  .navbar-collapsed { overflow:auto !important; position:fixed; }
  .navbar-collapse { position:fixed; }
 
  .navbar-default .navbar-nav > .active > a { border-radius:0; }
}


/* ============================================================
   FAQ PANEL OVERRIDES
   ============================================================ */
.max-w-full { margin-top:20px; }
#faq .title { margin-bottom:40px; }
.text-center { text-align:center; }
@media(max-width:767px){ #faq .panel-heading a { padding-right:40px; } }
#faq .panel-heading a {
  display:block; padding:14px 18px; font-size:15px; font-weight:600;
  position:relative; text-decoration:none !important;
  background:var(--bg-soft); border:var(--border); border-radius:var(--radius-sm);
  color:var(--text-dark); transition:background .15s, color .15s;
}
#faq .panel-heading a:hover { background:var(--accent-light); color:var(--accent); }
.panel-title { margin:0; font-size:17px; color:var(--text-dark); font-weight:700; }
#faq .panel-heading { border:0; padding:0; }
#faq .panel-body {
  margin-top:10px; padding:18px; border-radius:var(--radius-sm);
  font-size:13px; line-height:1.55; color:var(--text-mid);
  background:var(--bg-soft); border:var(--border);
}
#faq .panel-default { background:0 0; border:0; margin-bottom:6px; }

/* ============================================================
   AMOUNT BUTTON
   ============================================================ */
.amount-button {
  display:inline-block; background:var(--accent); color:#fff;
  padding:.75rem 1rem 7.5px; border-radius:var(--radius-sm);
  text-decoration:none; font-weight:700; transition:background .15s; text-align:center; margin-bottom:4px;
}
a.amount-button:hover { color:#fff; background:var(--accent-dark); text-decoration:none; }
i.navbar-icon.far.fa-external-link { font-size:11px; }

/* ============================================================
   PLATFORM BUTTONS - SERVICES COLUMN
   ============================================================ */
.platform-buttons.services { display:flex; flex-direction:column; align-items:flex-start; }
.platform-buttons.services button { justify-content:space-between; border:1px dashed var(--border-color); }
.platform-buttons.services .service-icon { font-size:13px; margin-right:8px; color:var(--accent); line-height:1; }
.platform-buttons.services .service-text { overflow:hidden; text-overflow:ellipsis; text-align:left; white-space:nowrap; font-size:12px; }
.platform-buttons.services button:hover { border-color:var(--accent); border-style:solid; background:var(--accent-light); }
@media(max-width:1024px){ .platform-buttons.services { grid-template-columns:repeat(1,1fr); } }

/* ============================================================
   TABLE STRIPED
   ============================================================ */
.table-striped > li:nth-of-type(odd) { background:var(--table-striped); }
.table-striped > tr:nth-of-type(odd) { background:var(--table-striped); }

/* ============================================================
   FORM CONTROL READONLY
   ============================================================ */
.form-control[readonly]:focus { box-shadow:none; }

/* ============================================================
   BTN SM PRIMARY
   ============================================================ */
a.btn.btn-sm.btn-primary { line-height:2.32; }

/* ============================================================
   COLUMN RESPONSIVE AT 1100PX
   ============================================================ */
@media(min-width:1100px){ .col-lg-3.col-md-6.col-12 { width:25%; } }

/* ============================================================
   SMALL SCREEN PADDING ZERO
   ============================================================ */
@media(max-width:500px){
  .col-md-8.col-md-offset-2.new { padding:0; }
  .container.relative.z-10.mx-auto.px-4 { padding:0; }
  .rounded-3xl { border-radius:0; }
  .well { border-radius:0 !important; border:none; }
  .col-md-3.col-md-offset-2.new { padding:0; }
  .col-md-4.col-md-offset-2.new { padding:0; }
  ul.nav.nav-pills { margin-left:14px; margin-right:14px; }
  .col-lg-12 { padding:0; }
  .well.well-float { border-radius:0; }
  .col-md-8.col-md-offset-2 { padding:0; }
  .col-md-4.col-md-offset-2 { padding:0; }
  .col-lg-8.col-lg-offset-2 { padding:0; }
  .col-md-10.col-md-offset-1 { padding:0; }
  .row.kpi-row { width:100%; }
  h1 { padding:0 14px; }
  .well.blog { margin:14px 0; }
  .alert-success,.alert-info { margin-right:14px; margin-left:14px; }
  .list.nav.nav-pills { border:none; }
}

/* ============================================================
   DARK MODE TOGGLE SWITCH
   ============================================================ */
.dark-mode-toggle-container { padding:0 10px; display:flex; align-items:center; justify-content:center; margin-top:6px; }
.toggle-switch {
  position:relative; display:inline-block; width:140px; height:34px; margin:5px 0;
  cursor:pointer; background:var(--bg-soft);
  border-radius:34px; transition:background .3s; border:var(--border); box-shadow:var(--shadow-sm);
}
.toggle-switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:transparent; transition:.3s; border-radius:34px; }
.slider.round:before {
  position:absolute; content:""; height:26px; width:50%; left:4px; bottom:4px;
  transition:.3s; border-radius:24px; box-shadow:var(--shadow-sm);
  color:var(--text-dark); background:var(--bg-white);
}
input:checked + .slider.round:before { transform:translateX(65px); background:var(--accent); }
.mode-label { position:absolute; top:50%; transform:translateY(-50%); font-size:12px; font-weight:700; color:var(--text-light); transition:opacity .3s, color .3s; }
.light-label { left:10px; }
.dark-label  { right:10px; opacity:0; }

/* ============================================================
   GLOBAL LINK + IMG RESET
   ============================================================ */
*,:after,:before { box-sizing:border-box; border:0 solid var(--border-color); }

a { text-decoration:inherit; color:var(--accent); }
a:hover { text-decoration:none; }

input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
  -webkit-appearance:button; background-color:transparent; background-image:none;
}

img,svg { vertical-align:middle; }
img { max-width:100%; height:auto; }
img.social-network { height:16px; margin:10px; }

/* ============================================================
   UTILITIES (Tailwind-like)
   ============================================================ */
.absolute { position:absolute; }
.relative { position:relative; }
.bottom-\[-10px\] { bottom:-10px; }
.bottom-\[-20px\] { bottom:-20px; }
.bottom-\[-5px\] { bottom:-5px; }
.left-0 { left:0; }
.left-\[-15px\] { left:-15px; }
.left-\[-1px\] { left:-1px; }
.left-\[-5px\] { left:-5px; }
.right-\[-15px\] { right:-15px; }
.right-\[-5px\] { right:-5px; }
.top-\[-10px\] { top:-10px; }
.top-\[-5px\] { top:-5px; }
.mb-1 { margin-bottom:.25rem; }
.mb-6 { margin-bottom:3rem; }
.mb-8 { margin-bottom:2rem; }
.mr-2 { margin-right:.5rem; }
.mt-\[-40px\] { margin-top:-40px; }
.block { display:block; }
.space-y-2>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse:0;
  margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(.5rem * var(--tw-space-y-reverse));
  border:none; background-color:var(--bg-white);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
}
.self-center { align-self:center; }
.overflow-hidden { overflow:hidden; }
.rounded-2xl { border-radius:var(--radius); }
.rounded-3xl { border-radius:var(--radius); }
.rounded-full { border-radius:9999px; }
.border { border-width:1px; }
.bg-white { background-color:var(--bg-white); }
.bg-pink-100,.bg-red-100 { background-color:var(--accent-light); color:var(--accent); }
.text-blue-500 { color:var(--accent); }

.bg-gradient-to-b { background-image:linear-gradient(to bottom,var(--tw-gradient-stops)); }
.to-40\% { --tw-gradient-to-position:40%; }
.p-1 { padding:.25rem; }
.p-1\.5 { padding:.375rem; }
.p-2 { padding:.5rem; }
.p-4 { padding:1rem; }
.p-6 { padding:1.5rem; }
.px-2 { padding-left:.5rem; padding-right:.5rem; }
.pb-8 { padding-bottom:2rem; }
.pt-\[65px\] { padding-top:60px; }
.text-center { text-align:center; }
.text-2xl { font-size:1.5rem; line-height:2rem; }
.text-3xl { font-size:16px; line-height:2.25rem; }
.text-4xl { font-size:2.25rem; line-height:2.5rem; }
.text-5xl { font-size:3rem; line-height:1; }
.font-bold { font-weight:700; }
.font-medium { font-weight:500; font-size:16px; text-align:center; }

a.flex.items-center.gap-2.bg-brand { text-decoration:none; }

/* ============================================================
   GUIDE / ACCORDION
   ============================================================ */
.guide-container {
  max-width:900px; margin:40px auto; padding:20px;
  background:var(--bg-white); border-radius:var(--radius);
  border:var(--border); box-shadow:var(--shadow-sm);
}
.guide-header h1 { font-size:26px; color:var(--text-dark); border-bottom:2px solid var(--border-color); padding-bottom:14px; margin-bottom:28px; font-weight:800; }
.accordion-item { margin-bottom:10px; border-radius:var(--radius-sm); overflow:hidden; }
.accordion-header {
  background:var(--bg-soft); padding:14px 18px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  font-weight:700; font-size:15px; color:var(--text-dark); transition:background .15s;
  border:var(--border); border-radius:var(--radius-sm);
}
.accordion-header:hover { background:var(--accent-light); color:var(--accent); border-color:var(--accent); }
.accordion-icon { font-size:20px; transition:transform .25s; }
.accordion-item.active .accordion-header { background:var(--accent); color:#fff; border-color:var(--accent); }
.accordion-item.active .accordion-icon { transform:rotate(45deg); }
.accordion-content { padding:16px; background:var(--bg-white); border:var(--border); border-top:0; display:none; border-radius:0 0 var(--radius-sm) var(--radius-sm); }
.accordion-content p { line-height:1.6; margin-bottom:10px; color:var(--text-mid); }
.tip-box { background:#fffbeb; color:#92400e; padding:14px; border-radius:6px; margin-top:14px; border-left:4px solid #f59e0b; }
.accordion-content ol { padding-left:20px; }
.accordion-content li { margin-bottom:10px; color:var(--text-mid); }

/* ============================================================
   LIST GROUP ITEMS
   ============================================================ */
li.list-group-item { background:transparent; }
li.list-group-item > a { color:var(--text-dark); font-weight:500; }

/* ============================================================
   PAYMENT GRID
   ============================================================ */
.payment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
@media(min-width:768px){ .payment-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.payment-form {
  width:100%; border:var(--border); background:transparent;
  border-radius:var(--radius-sm); padding:8px;
  display:flex; align-items:center; gap:10px; cursor:pointer; text-align:left;
  transition:transform .08s ease, box-shadow .15s, border-color .15s;
}
.payment-form:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); border-color:var(--accent); }
.payment-form.is-active { border-color:var(--accent); box-shadow:0 0 0 3px rgba(95,77,238,.12); }
.payment-logo { width:36px; height:36px; object-fit:contain; border-radius:8px; background:var(--bg-soft); padding:4px; }
.payment-logo-fallback { width:36px; height:36px; border-radius:8px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; font-weight:700; }
.payment-name { font-weight:700; line-height:1.2; color:var(--text-dark); font-size:13px; }

/* Scrollbar styling */
.prefs-list::-webkit-scrollbar { width:6px; }
.prefs-list::-webkit-scrollbar-track { background:var(--bg-soft); border-radius:6px; }
.prefs-list::-webkit-scrollbar-thumb { background:var(--accent); border-radius:6px; }
.prefs-list::-webkit-scrollbar-thumb:hover { background:var(--accent-dark); }

textarea#message { min-height:80px; field-sizing:content; }
textarea#field-orderform-fields-comment::-webkit-scrollbar { width:6px; }
textarea#field-orderform-fields-comment::-webkit-scrollbar-track { background:var(--bg-soft); border-radius:0 var(--radius-sm) 0 0; }
textarea#field-orderform-fields-comment::-webkit-scrollbar-thumb { background:var(--accent); border-radius:6px; }

#toggle {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  cursor:pointer; font-size:13px; color:var(--accent); user-select:none; font-weight:600;
}

/* ============================================================
   COPY TOAST
   ============================================================ */
.copy-toast {
  position:fixed; left:50%; bottom:40px;
  transform:translateX(-50%) translateY(20px);
  background:var(--bg-white); color:var(--text-dark);
  border-radius:var(--radius); padding:12px 18px;
  box-shadow:var(--shadow-lg); border:var(--border);
  display:flex; flex-direction:row; align-items:center;
  gap:10px; opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; z-index:999999;
}
.copy-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.copy-toast-icon { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#22c55e; color:#fff; font-weight:700; font-size:14px; }
.copy-toast-text { font-size:14px; font-weight:600; white-space:nowrap; color:var(--text-dark); }

i.fa-regular.fa-copy { background:var(--accent-light); padding:5px; border-radius:4px; cursor:pointer; color:var(--accent); }
i.fa-regular.fa-copy:hover { background:var(--accent); color:#fff; }

/* ============================================================
   AUTH STYLES
   ============================================================ */
.auth-link { color:var(--accent); text-decoration:underline; text-underline-offset:3px; font-weight:600; }
.auth-bottom { text-align:center; margin:14px 0 0; color:var(--text-mid); font-size:13px; }

/* ============================================================
   MISC OVERRIDES
   ============================================================ */
i.fab.fa-tiktok.brand-tt, i.fab.fa-twitter.brand-x { color:var(--text-dark); }

/* Social methods title */
.SocialMethods_socials__title__Grtm2 {
  width:100%; display:flex; flex-direction:row; flex-wrap:nowrap;
  align-items:center; column-gap:28px; margin-top:0;
}
.SocialMethods_socials__title__Grtm2 .SocialMethods_title__line__lARwK { height:1px; width:100%; background:var(--border-color); }
.SocialMethods_socials__title__Grtm2 p { white-space:nowrap; color:var(--text-light); font-size:12px; font-weight:600; }

/* Select2 */
.select2-container--default .select2-results > .select2-results__options { max-height:440px !important; overflow-y:auto; border-radius:0 0 var(--radius-sm) var(--radius-sm); }
.select2-container--default .select2-results__option[aria-selected=true] { background-color:var(--accent-light) !important; }
.select2-container .select2-selection__id-3 { min-width:20px !important; }
span.select2-selection__text { color:var(--text-dark); }
span.select2-selection__id.select2-selection__id-4.badge { min-width:34px; width:50px; }

/* Nav pills */
ul.nav.nav-pills.pull-right { padding-right:0; padding-left:0; }
ul.nav.nav-pills { padding-right:0; padding-left:0; }

/* Best seller */
.best-seller-header { font-size:1.05em; margin-top:14px; margin-bottom:8px; font-weight:800; display:flex; align-items:center; color:var(--text-dark); gap:8px; }

/* Service list filter active */
.services-list-filter.active { border-color:var(--accent); font-weight:700; background:var(--accent-light); color:var(--accent); }

/* ul currencies */
ul#currencies-list > li > a { margin:4px 8px; padding:3px 14px; background:var(--bg-soft); border-radius:20px; display:block; color:var(--text-dark); font-weight:600; font-size:13px; }
ul#currencies-list > li > a.active { background:var(--accent); color:#fff; }

/* Mode icon */
i#mode-icon { color:var(--text-dark); }
a#dark-mode-button { text-decoration:none; }
a.dropdown-toggle { text-decoration:none; }

/* Logout */
a.nav-logout-btn { color:#ef4444 !important; font-weight:600; }

/* Disabled btn */
button.btn.btn-xs.btn-primary.disabled { color:var(--btn-disabled-text); background-color:var(--btn-disabled); width:100%; }

/* Focus resets */
.btn.btn-default:focus,.btn.btn-default:active:focus {
  outline:none !important; box-shadow:0 0 0 3px rgba(95,77,238,.15) !important;
  color:var(--button-color); background-color:var(--accent-dark); border-color:var(--accent-dark);
}
.btn-primary:focus,.btn-primary:active:focus {
  outline:none !important; box-shadow:0 0 0 3px rgba(95,77,238,.20) !important;
  color:var(--button-color); background-color:var(--accent-dark); border-color:var(--accent-dark);
}

/* Info margin */
.info { margin-bottom:14px; }
@media(max-width:500px){ .info { margin-left:14px; margin-right:14px; } }

/* Text styles */
.text-sm.text-slate-600.leading-relaxed { text-align:center; font-size:14px; font-weight:500; padding:10px; color:var(--text-mid); }
.h2-glorify { font-size:32px; font-weight:700; }
.home-title p { text-align:center; }

/* Icon with bg */
i.fad.fa-key,i.fad.fa-user {
  font-size:15px; color:var(--button-color); background:var(--accent);
  border-radius:var(--radius-sm); width:37px; height:35px;
  align-items:center; display:flex; justify-content:center;
}

/* Favorite btn */
button.btn.btn-primary.btn-favorite { padding:0 10px; height:21px; margin-left:auto; background:var(--accent); border:none; }
span.fas.fa-star { color:var(--accent-light); }

/* Neworder item */
.neworder-item a { display:inline-flex !important; align-items:center; gap:4px; width:100%; }
.neworder-item a svg { height:15px; width:15px; }
@media(max-width:850px){ .list.nav.nav-pills { width:max-content; } }

/* Column md-6 login */
.col-md-6.login { display:flex; justify-content:center; }

/* Whatsapp btn */
.whatsapp-button { bottom:7px !important; right:7px !important; position:absolute; }

/* Btn payments */
a.btn-payments {
  display:inline-block; background:var(--bg-white); color:var(--text-dark);
  border:var(--border); padding:.375rem 1rem; border-radius:var(--radius-sm);
  text-decoration:none; font-weight:600; transition:all .15s;
}
a.btn-payments:hover { background:var(--accent-light); color:var(--accent); border-color:var(--accent); }

/* Select2 container */
.select2-container--default .select2-results__option[aria-selected=true] { background-color:var(--accent-light) !important; }

/* Table status */
td[data-status="in progress"] { color:var(--accent); font-weight:700; }

/* Alert modern */
.alert-modern { border-radius:var(--radius-sm); padding:14px; margin-bottom:16px; box-shadow:var(--shadow-sm); background-color:var(--bg-soft); border:var(--border); }

/* Details btn */
.details-btn:active { transform:translateY(0); }

/* a btn default */
a.btn.btn-xs.btn-default { background:#ef4444; border-color:#ef4444; width:100%; color:#fff; }

/* Flex */
.flex { display:flex; }
.w-full { width:100%; }
.justify-center { justify-content:center; }

a.flex.items-center.justify-center.w-full.px-3.py-2.space-x-1 { text-decoration:none; display:flex; align-items:center; }
.flex.text-sm.font-medium.border-b.divide-x.sa_border.sa_divide { padding:9px; margin:0 0 10px; border-radius:var(--radius-sm); }

/* Social frame */
.social-media-frame { border:var(--border); border-radius:var(--radius-sm); padding:12px; background:var(--bg-white); margin-bottom:16px; color:var(--text-light); }

/* Pull right middle */
.pull-right-middle .fa-arrow-right { color:var(--accent); }

/* Nav open */
.nav .open > a,.nav .open > a:hover,.nav .open > a:focus { background:var(--accent-light); border-color:var(--accent); }

/* Navbar open dropdown */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus { color:var(--text-dark); background:var(--bg-soft); }

/* Mobile navbar states */
@media(max-width:767px){
  .navbar-default .navbar-nav .open .dropdown-menu > li > a { color:var(--text-mid); }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { color:var(--accent); background:var(--accent-light); }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a { background:var(--bg-soft); }
}

/* Navbar collapsed before */
.navbar-collapsed-before .navbar-toggle { display:block; }
.navbar-collapsed-before .navbar-nav { width:100%; }
.navbar-collapsed-before .navbar-nav li { width:100%; }
.navbar-collapsed-before .navbar-nav li a { padding-top:10px; padding-bottom:10px; margin:0; }
.navbar-collapsed-before .navbar-right { width:100%; float:left !important; }

/* Navbar toggle animation */
.navbar-toggle[aria-expanded="true"] i.fa-list::before { content:"\f00d"; }
.navbar-toggle i { transition:transform .25s ease-in-out; }
.navbar-toggle[aria-expanded="true"] i { transform:rotate(90deg); }

/* Mass alert */
.mass-alert { margin-bottom:18px; }
.mass-alert .alert { margin-bottom:0; border-radius:0; }
.mass-alert .alert:first-child { border-top-left-radius:var(--radius-sm); border-top-right-radius:var(--radius-sm); }
.mass-alert .alert:last-child { border-bottom-right-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm); }

/* RTL nav input */
.rtl-nav input.form-control { border-radius:0 var(--radius-sm) var(--radius-sm) 0 !important; }

/* Section h2 */
section h2 { text-align:center; font-size:26px; font-weight:800; color:var(--text-dark); }

/* Low balance box mobile */
@media(max-width:500px){ .low-balance-box { border-radius:0 !important; } }

/* Well user */
.well.user { margin-bottom:14px; }

/* Column lg12 new */
.col-lg-12.new { width:100%; }
@media (min-width: 990px) {
    .col-lg-12.new {
        width: 86%;
    }
}
/* RTL navbar mobile */
@media(max-width:1300px){
  .rtl-navbar .navbar-nav { float:right !important; width:100%; margin-right:0; }
  .rtl-navbar .navbar-nav li { width:100%; }
  .rtl-navbar .navbar-header { float:none; margin-right:0; }
  .rtl-navbar .navbar-brand { float:right; padding-right:15px; }
}

/* Filter header */
.filter-header { display:flex; justify-content:space-between; align-items:center; padding:5px; }
.filter-header h2 { font-size:17px; color:var(--text-dark); font-weight:700; }
@media(max-width:1300px){ .filter-header h2 { font-size:14px; } }
@media(max-width:1300px){
  #toggleFilterButton { font-size:12px; padding:5px 10px; }
}
#filterSection { transition:max-height .4s; overflow:hidden; max-height:500px; }
.filter-toggle {
  background:var(--text-dark); color:#fff; border:none;
  border-radius:var(--radius-sm); padding:5px 16px; cursor:pointer;
  font-size:13px; display:flex; align-items:center; gap:6px;
}
.filter-toggle i { margin-left:6px; }
.fa-chevron-up:before { content:"\f077"; }

/* Low balance */
.low-balance-box {
  background:#fffbeb; border:1px solid #fde68a; border-radius:var(--radius-sm);
  padding:16px; display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:16px;
}
.low-balance-text { display:flex; flex-direction:column; color:#92400e; }
.low-balance-text strong { font-size:14px; font-weight:800; }
.low-balance-text span { font-size:12px; }
.low-balance-btn { background:var(--accent); color:#fff; padding:9px 18px; border-radius:8px; font-weight:700; text-decoration:none; white-space:nowrap; transition:all .15s; }
.low-balance-btn:hover { background:var(--accent-dark); color:#fff; text-decoration:none; }



@media screen and (max-width: 767px) {
    .mob-nav {
        display: block;
    }
}
.mob-nav {
    display: none;
}
@media screen and (max-width: 767px) {
    .mob-nav {
        display: block;
    }
}
.mob-nav {
    z-index: 5000;
    position: fixed;
    right: 0;
    bottom: 0rem;
    left: 0;
    margin: 0 auto;
}
.mob-nav {
    display: none;
}
@media screen and (max-width: 767px) {
    .mob-nav {
        display: block;
    }
}
.mob-nav {
    padding: 0px;
}
ul.mob-nav-link {
    position: relative;
    width: 100%;
    list-style: none;
    padding: 5px !important;
    margin: 0px !important;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: flex-start;
    z-index: 2000;
    background: var(--color-3);
    box-shadow: ;
    border-radius: ;
    border-top: var(--border);
}


/* ── How It Works Section ── */
.how-section {
  background: var(--bg-dark);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.how-section::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(95,77,238,0.18) 0%, transparent 70%);
  top: -100px; right: -100px;
  border-radius: 50%;
  pointer-events: none;
}
.how-section .section-title { color: #fff; }
.how-section .section-label { color: #a78bfa; }
.how-section .section-desc  { color: rgba(255,255,255,0.6); }

/* Step cards */
.step-card {
  text-align: center;
  padding: 20px;
  position: relative;
}
.step-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5f4dee;
  margin-bottom: 1rem;
}
.step-circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(95,77,238,0.15);
  border: 2px dashed rgba(95,77,238,0.4);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 28px; color: #a78bfa;
  transition: all 0.3s;
}
.step-card:hover .step-circle {
  background: #5f4dee;
  border-color: #5f4dee;
  color: #fff;
  animation: spin-slow 3s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
.step-card h5 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px; font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.step-card p {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  margin: 0;
}

/* Connecting line between steps */
.step-connector {
  position: absolute;
  top: 60px; right: -15%;
  width: 30%;
  height: 2px;
  background: linear-gradient(to right, rgba(95,77,238,0.4), transparent);
}
@media (max-width: 768px) {
  .step-connector { display: none; }
}
/* ── Testimonials ── */
.testimonials-section {
  background: #fff;
  padding: 100px 0;
}
.testimonial-card {
  background: #f8f7ff;
  border-radius: 14px;
  padding: 32px 28px;
  border: 1.5px solid #e9e9f0;
  height: 100%;
  transition: all 0.25s;
}
.testimonial-card:hover {
  border-color: #5f4dee;
  box-shadow: 0 8px 30px rgba(95,77,238,0.12);
}
.stars {
  color: #f59e0b;
  font-size: 14px;
  margin-bottom: 1rem;
  letter-spacing: 2px;
}
.testimonial-card p {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 1.5rem;
}
.t-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.t-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5f4dee, #a78bfa);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 15px;
  flex-shrink: 0;
}
.t-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 700;
  color: #0d1117;
}
.t-role {
  font-size: 12px;
  color: #9ca3af;
}