/*!
 * BariFollow — Design System v2
 * Built on Bootstrap v3.3.7 grid
 * New aesthetic: refined purple-accent SaaS dashboard
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --accent:          #5f4dee;
  --accent-dark:     #4535c7;
  --accent-light:    #ede9ff;
  --text-dark:       #0d1117;
  --text-mid:        #4b5563;
  --text-light:      #9ca3af;
  --bg-white:        #ffffff;
  --bg-soft:         #f8f7ff;
  --bg-dark:         #0d1117;
  --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;

  /* Legacy mapping — keeps Bootstrap overrides working */
  --color-1:              var(--text-dark);
  --color-2:              var(--bg-soft);
  --color-3:              var(--bg-white);
  --color-4:              var(--bg-soft);
  --color-5:              #d1d5db;
  --color-6:              #ef4444;
  --color-7:              var(--text-mid);
  --white:                var(--bg-white);
  --color-9:              var(--border-color);
  --color-10:             #fee2e2;
  --color-11:             var(--bg-soft);
  --color-12:             var(--accent);
  --td-range-bg:          var(--accent);
  --color-btn-primary:    var(--accent);
  --color-btn-primary-hover: var(--accent-dark);
  --button-color:         #ffffff;
  --body-background:      var(--bg-soft);
  --table-striped:        #f5f3ff;
  --border:               1px solid var(--border-color);
  --border-radius:        var(--radius-sm);
  --shadow:               var(--shadow-md);
  --shadow-2:             var(--shadow-sm);
  --code-color:           var(--accent);
  --code-back:            var(--accent-light);
  --reload-1s:            linear-gradient(110deg,#ede9ff 8%,#f5f3ff 18%,#ede9ff 33%);
  --btn-disabled:         #d1d5db;
  --btn-disabled-text:    #9ca3af;
  --color-bg:             var(--bg-soft);
  --color-1-10:           rgba(95,77,238,.10);
  --color-1-20:           rgba(95,77,238,.20);
  --color-1-30:           rgba(95,77,238,.30);
  --color-2-70:           rgba(248,247,255,.70);
}

/* ============================================================
   NORMALIZE / RESET (unchanged logic, updated refs)
   ============================================================ */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body { margin: 0; }
article,aside,details,figcaption,figure,footer,header,
hgroup,main,menu,nav,section,summary { display: block; }
audio,canvas,progress,video { display:inline-block; vertical-align:baseline; }
audio:not([controls]) { display:none; height:0; }
[hidden],template { display:none; }
a { background-color:transparent; }
a:active,a:hover { outline:0; }
abbr[title] { border-bottom:1px dotted; }
b,strong { font-weight:bold; }
dfn { font-style:italic; }
h1 { margin:.67em 0; font-size:2em; }
mark { color:#000; background:#ff0; }
small { font-size:80%; }
sub,sup { position:relative; font-size:75%; line-height:0; vertical-align:baseline; }
sup { top:-.5em; }
sub { bottom:-.25em; }
img { border:0; }
svg:not(:root) { overflow:hidden; margin-top:0; }
figure { margin:1em 40px; }
hr { height:0; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; }
pre { overflow:auto; }
code,kbd,pre,samp { font-size:1em; }
button,input,optgroup,select,textarea { margin:0; font:inherit; color:inherit; }
button { overflow:visible; }
button,select { text-transform:none; }
button,html input[type="button"],input[type="reset"],input[type="submit"] {
  -webkit-appearance:button; cursor:pointer;
}
button[disabled],html input[disabled] { cursor:default; }
button::-moz-focus-inner,input::-moz-focus-inner { padding:0; border:0; }
input { line-height:normal; }
input[type="checkbox"],input[type="radio"] {
  -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
  box-sizing:border-box; padding:0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { height:auto; }
input[type="search"] {
  -webkit-box-sizing:content-box; -moz-box-sizing:content-box;
  box-sizing:content-box; -webkit-appearance:textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance:none; }
fieldset { padding:.35em .625em .75em; margin:0 2px; border:1px solid #c0c0c0; }
legend { padding:0; border:0; }
textarea { overflow:auto; }
optgroup { font-weight:bold; }
table { border-spacing:0; border-collapse:collapse; }
td,th { padding:0; }

*,*:before,*:after {
  -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
html { font-size:10px; -webkit-tap-highlight-color:rgba(0,0,0,0); }

body {
  font-family: 'Nunito', 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 25px;
  color: var(--text-mid);
  background-color: var(--body-background);
  letter-spacing: 0.005rem;
}

h1,.h1 { font-size:3rem; color:var(--text-dark); }
h2,.h2 { font-size:24px; }
h3,.h3 { font-size:20px; }
h4,.h4 { font-size:18px; line-height:1.4; color:var(--text-dark); }
h5,.h5 { font-size:15px; color:var(--text-dark); }
h6,.h6 { font-size:14px; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-weight:600; line-height:1.2; color:inherit;
}
h4.widget-title {
  margin-top:0; font-size:20px; font-weight:700;
  color:var(--text-dark); margin-bottom:20px;
}
p { margin:.25rem 0 .75rem; }

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover,a:focus { color:var(--accent-dark); text-decoration:underline; }
a:focus { outline:5px auto -webkit-focus-ring-color; outline-offset:-2px; }

figure { margin:0; }
img { vertical-align:middle; border:0; }
img.footer-logo { width:190px; margin-bottom:20px; }
img.welcome__img { width:100%; }

hr { margin-top:20px; margin-bottom:20px; border:0; border-top:1px solid var(--border-color); }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}
[role="button"] { cursor:pointer; }

small,.small { font-size:85%; }
mark,.mark { padding:.2em; background-color:#fcf8e3; }
.text-left   { text-align:left; }
.text-right  { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }
.text-nowrap  { white-space:nowrap; }
.text-lowercase { text-transform:lowercase; }
.text-uppercase { text-transform:uppercase; }
.text-capitalize { text-transform:capitalize; }
.text-muted { color:var(--text-light); }
.text-primary { color:var(--accent); }
.text-success { color:#15803d; }
.text-info    { color:#0e7490; }
.text-warning { color:#92400e; }
.text-danger  { color:#ef4444; }

code {
  padding:2px 6px;
  font-size:90%;
  color:var(--accent);
  background-color:var(--accent-light);
  border-radius:6px;
  line-height:25px;
}
pre {
  display:block; padding:12px 16px; margin:0 0 10px;
  font-size:13px; line-height:1.6;
  color:var(--text-dark);
  background-color:var(--bg-soft);
  border:var(--border); border-radius:var(--radius-sm);
}
pre code { padding:0; font-size:inherit; color:inherit; background:transparent; border-radius:0; }
kbd {
  padding:2px 6px; font-size:90%; color:#fff;
  background-color:var(--text-dark); border-radius:6px;
}
@media (min-width: 1300px) {
    .navbar-header {
        float: left;
    }
}
/* ============================================================
   LAYOUT — GRID (Bootstrap 3 preserved)
   ============================================================ */
.container {
  padding-right:15px; padding-left:15px;
  margin-right:auto; margin-left:auto;
}
@media(min-width:1500px) { .container { width:1400px; } }
.container-fluid { padding-right:15px; padding-left:15px; margin-right:auto; margin-left:auto; }
.row { margin-right:-15px; margin-left:-15px; }

.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,
.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,
.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,
.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,
.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,
.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,
.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,
.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,
.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,
.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,
.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,
.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12 {
  position:relative; min-height:1px; padding-right:10px; padding-left:10px;
}

/* XS */
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,
.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 { float:left; }
.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}
.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}
.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}
.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}

/* MD */
@media(min-width:850px){
  .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,
  .col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 { float:left; }
  .col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}
  .col-md-9{width:75%}.col-md-8{width:66.666666%;margin-top:0}
  .col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:33.333%;margin-top:103px}
  .col-md-4{width:33.33333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}
  .col-md-offset-8{margin-left:4.666667%}
  .col-md-offset-2{}
  .col-md-8.col-md-offset-2.signup{margin-left:16.6%}
  .col-md-8.col-md-offset-2.login{width:100%;text-align:center;display:flex;align-items:center}
  .col-md-8.col-md-offset-2.login.b1{width:66%;text-align:left}
  .col-md-6.login{width:100%}
  .col-md-8.col-md-offset-2.new{width:55%}
  .col-md-4.col-md-offset-2.new{width:31%}
  .col-md-3.col-md-offset-2.new{width:14%}
  .col-md-offset-1{margin-left:8.33333333%}
  .col-md-offset-0{margin-left:0}
}

/* LG */
@media(min-width:990px){
  .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,
  .col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12 { float:left; }
  .col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}
  .col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}
  .col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}
  .col-lg-3{width:25%}.col-lg-3.col-md-6.col-12{width:50%}
  .col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}
  .col-lg-12.new{width:86%}
}
@media(min-width:1100px){ .col-lg-3.col-md-6.col-12{width:25%} }
@media(min-width:990px){ .col-lg-3.col-md-6.col-12{width:33.33%} }

/* SM */
@media(min-width:1300px){
  .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,
  .col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 { float:left; }
  .col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}
  .col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}
  .col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}
  .col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}
}

/* Clearfix */
.clearfix:before,.clearfix:after,
.container:before,.container:after,
.container-fluid:before,.container-fluid:after,
.row:before,.row:after,
.nav:before,.nav:after,
.navbar:before,.navbar:after,
.navbar-header:before,.navbar-header:after,
.navbar-collapse:before,.navbar-collapse:after,
.panel-body:before,.panel-body:after,
.modal-header:before,.modal-header:after,
.modal-footer:before,.modal-footer:after { display:table; content:" "; }

.clearfix:after,.container:after,.container-fluid:after,.row:after,
.nav:after,.navbar:after,.navbar-header:after,.navbar-collapse:after,
.panel-body:after,.modal-header:after,.modal-footer:after { clear:both; }

.center-block { display:block; margin-right:auto; margin-left:auto; }
.pull-right { float:right !important; }
.pull-left  { float:left  !important; }
.hide { display:none !important; }
.show { display:block !important; }
.hidden { display:none !important; }
.invisible { visibility:hidden; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  margin-bottom: 0;
  border: none;
  background: var(--bg-white);
  box-shadow: 0 1px 0 var(--border-color), var(--shadow-sm);
  border-bottom: 1px solid var(--border-color);
  min-height: 60px;
}

.navbar-default {
  background-color: var(--bg-white);
  width: 100%;
  position: sticky;
  top: 0;
}

.navbar-brand {
  float: left;
  padding: 0 18px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 19px;
  display: flex;
  align-items: center;
  height: 60px;
  line-height: 20px;
  color: var(--text-dark);
  text-decoration: none;
}
.navbar-brand:hover,.navbar-brand:focus {
  color: var(--accent);
  text-decoration: none;
  background: transparent;
}
.navbar-brand img {
  display: inline-block;
  max-width: 100%;
  max-height: clamp(28px, 6vw, 40px);
  vertical-align: middle;
}

.navbar-nav { margin: 0; }
.navbar-nav > li > a {
  padding: 8px 10px;
  color: var(--text-mid);
  font-weight: 500;
  font-size: 13px;
  transition: color .15s, background .15s;
  border-radius: 0px;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
  color: var(--accent);
  background: var(--accent-light);
  text-decoration: none;
}
.navbar-default .navbar-nav > li > a { color: var(--text-mid); font-weight: 500;padding: 9px; }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { color: var(--accent); background: var(--accent-light); }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: var(--accent);
  background: var(--accent-light);
  border-radius: var(--radius-sm);
}

.navbar-toggle {
  margin-right: 0px;
  background: transparent;
  background-image: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: none;
  padding: 0px;
  border-radius: var(--radius-sm);
}
.navbar-toggle:hover,.navbar-toggle:focus {
  background: var(--accent-light);
}
.navbar-toggle .icon-bar {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--text-dark);
}
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }

@media(min-width:1300px){
  .navbar-toggle { display: none; }
  li.navbar-badge.list-button { display: none; }
  .navbar-nav { float: right; margin: 0; }
  .navbar-nav > li { float: left; }
  .navbar-nav > li > a { padding-top:8px; padding-bottom:8px; margin-top:10px; margin-bottom:10px; }
  .navbar-right { float: right !important; margin-right:-15px; }
  .navbar-left  { float: left  !important; }
}

@media(max-width:1300px){
  .navbar-nav .open .dropdown-menu {
    float: none; width: 100%; margin-top: 0; border: none;
    box-shadow: none; padding: 0;
    background: var(--bg-soft);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }
  .navbar-nav .open .dropdown-menu > li > a { padding: 10px 15px; color: var(--text-mid); }
  .navbar-nav .open .dropdown-menu > li > a:hover { background: var(--accent-light); color: var(--accent); }
}

.navbar-header { margin-top: 0; }
.navbar-collapse {
  padding-right: 15px;
  padding-left: 15px;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border-color);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
@media(min-width:1300px){
  .navbar-collapse {
    width: auto; border-top: 0; box-shadow: none;
  }
  .navbar-collapse.collapse { display:block !important; height:auto !important; overflow:visible !important; }
}

/* Nav badges / header items */
li.navbar-badge {
  padding: 0 8px;
  color: var(--text-dark);
  float: right;
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
  border-radius: var(--radius-sm);
  border: var(--border);
  transition: border-color .15s, background .15s;
}
li.navbar-badge:hover { border-color: var(--accent); background: var(--accent-light); }
li.navbar-badge > a {
  text-decoration: none;
  margin: 0;
  font-size: 14px;
  line-height: 1.1;
  color: var(--text-dark);
}
li.navbar-badge > a > i { font-size: 17px; }
li.navbar-badge > a:hover { color: var(--accent); }
li.navbar-badge.list-button { margin-right: 10px; }

ul.app-header-menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0 5px;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
}

.title.user-balance {
  cursor: pointer;
  font-weight: 700;
  color: var(--text-dark);
}
.title.user-balance.funds { color: var(--text-dark); margin-right: 15px; }
li.funds { display: flex; align-items: center; justify-content: space-between; }

/* Dropdown */
.dropdown-menu {
  position: absolute;
  left: auto;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 200px;
  padding: 8px;
  margin: 4px 0 0;
  text-align: left;
  list-style: none;
  background-color: var(--bg-white);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.dropdown-menu > li > a {
  display: block;
  padding: 9px 14px;
  clear: both;
  font-weight: 500;
  line-height: 1.42857;
  color: var(--text-dark);
  white-space: nowrap;
  font-size: 13px;
  border-radius: 8px;
  transition: background .12s, color .12s;
}
.dropdown-menu > li > a:hover { background: var(--accent-light); color: var(--accent); text-decoration: none; }
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover { color: var(--accent); background: var(--accent-light); }
.dropdown-menu > .disabled > a { color: var(--text-light); cursor: not-allowed; }
.dropdown-menu .divider { height:1px; margin:6px 0; overflow:hidden; background-color:var(--border-color); }
.dropdown-header { display:block; padding:4px 14px; font-size:11px; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:.05em; }
.open > .dropdown-menu { display: block; right: 0; }
.dropdown-menu.pull-right { right:0; left:auto; }
.dropdown-menu-right { right:0; left:auto; }
.dropdown-max-height { max-height:300px; overflow-y:auto; }
ul.dropdown-menu.services { overflow-x:auto; overflow-y:auto; min-width:300px; max-height:600px; left:0; }
ul.dropdown-menu.orders { left:0; }
.dropdown-menu li { float:none; display:block; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  padding: 9px 16px;
  margin-bottom: 0;
  font-size: 13px;
  height: 41px;
  font-weight: 600;
  line-height: 1.428571;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .08s;
  letter-spacing: .01em;
}
.btn:hover,.btn:focus,.btn.focus { color: var(--button-color); text-decoration: none; }
.btn:active,.btn.active { background-image:none; outline:0; box-shadow:inset 0 2px 4px rgba(0,0,0,.1); }
.btn.disabled,.btn[disabled],fieldset[disabled] .btn {
  cursor:not-allowed; box-shadow:none; opacity:.5;
}

.btn-default {
  color: var(--text-dark);
  background-color: var(--bg-soft);
  border: var(--border);
}
.btn-default:hover,.btn-default:focus {
  color: var(--accent);
  background-color: var(--accent-light);
  border-color: var(--accent);
}

.btn-primary {
  color: var(--button-color);
  background-color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(95,77,238,.3);
}
.btn-primary:hover,.btn-primary:focus {
  color: var(--button-color);
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: 0 4px 12px rgba(95,77,238,.35);
  transform: translateY(-1px);
}
.btn-primary:active,.btn-primary.active {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(0);
  box-shadow: none;
}
.btn-primary:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(95,77,238,.25) !important; }
.btn-primary.disabled:hover,.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover { background-color: var(--btn-disabled); border-color: var(--btn-disabled); }
.btn-primary .badge { color: var(--accent); background-color: var(--bg-white); }

.btn-success { color:#fff; background-color:#16a34a; border-color:#16a34a; }
.btn-success:hover { color:#fff; background-color:#15803d; border-color:#15803d; }

.btn-info { color:#fff; background-color:#0891b2; border-color:#0891b2; }
.btn-info:hover { color:#fff; background-color:#0e7490; border-color:#0e7490; }

.btn-warning { color:#fff; background-color:#d97706; border-color:#d97706; }
.btn-warning:hover { color:#fff; background-color:#b45309; border-color:#b45309; }

.btn-danger { color:#fff; background-color:#dc2626; border-color:#dc2626; }
.btn-danger:hover { color:#fff; background-color:#b91c1c; border-color:#b91c1c; }

.btn-link { font-weight:normal; color:var(--accent); border-radius:0; background:transparent; box-shadow:none; border-color:transparent; }
.btn-link:hover { color:var(--accent-dark); text-decoration:underline; background:transparent; }

.btn-lg,.btn-group-lg > .btn { padding:10px 20px; font-size:16px; border-radius:var(--radius); height:auto; }
.btn-sm,.btn-group-sm > .btn { padding:5px 12px; font-size:12px; border-radius:8px; height:auto; }
.btn-xs,.btn-group-xs > .btn { padding:2px 8px; font-size:12px; line-height:1.5; border-radius:6px; height:auto; }
.btn-block { display:block; width:100%; }
.btn-block + .btn-block { margin-top:5px; }

button.btn.btn-primary.login { width: 100%; }

a.btn.btn-primary.reorder {
  padding: 3px 7px; font-weight:500; height:auto;
  color:#fff; background-color:var(--accent);
  border:none; width:100%;
}
a.btn.btn-xs.btn-primary {
  background: var(--accent); width:100%; border: none;
}
a.btn.btn-xs.btn-primary:hover {
  background:transparent; color:var(--accent); border:1px solid var(--accent);
}
a.btn.btn-xs.btn-default {
  background: #dc2626; border-color:#dc2626; width:100%; color:#fff;
}
a.btn.btn-sm.btn-primary { line-height:2.32; }
button.btn.btn-xs.btn-primary.disabled {
  color: var(--btn-disabled-text); background-color: var(--btn-disabled); width:100%;
}

/* ============================================================
   FORMS
   ============================================================ */
label { display:inline-block; max-width:100%; margin-bottom:4px; font-weight:600; font-size:12px; color:var(--text-mid); }
.form-group { margin-bottom: 8px; }
.form-group.login { display:flex; align-items:center; gap:1.2rem; flex-direction:row; }
.form-row { display:flex; flex-wrap:wrap; margin-right:-5px; margin-left:-5px; }
@media(max-width:1300px){ .form-row { flex-direction:column; } }

.form-control {
  display: block;
  width: 100%;
  height: 41px;
  padding: 9px 14px;
  font-size: 13px;
  line-height: 1.42857;
  color: var(--text-dark);
  background-color: var(--bg-white);
  background-image: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
  border-color: var(--accent);
  outline: 0;
  color: var(--text-dark);
  box-shadow: 0 0 0 3px rgba(95,77,238,.15);
}
.form-control::placeholder { color: var(--text-light); }
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {
  background-color: var(--bg-soft); opacity:1; border:none; color: var(--text-light);
}
.form-control[disabled] { cursor:not-allowed; }
textarea.form-control { height:auto; min-height:80px; field-sizing:content; }
.form-control.login { background:none; padding:10px; }
.form-control[readonly]:focus { box-shadow:none; }

.has-error .form-control { border-color:#ef4444; }
.has-error .form-control:focus { border-color:#dc2626; box-shadow:0 0 0 3px rgba(239,68,68,.15); }
.has-success .form-control { border-color:#22c55e; }
.has-warning .form-control { border-color:#f59e0b; }

.help-block { display:block; margin-top:4px; margin-bottom:8px; font-size:12px; color:var(--text-light); }

.input-group { position:relative; display:table; border-collapse:separate; }
.input-group .form-control { position:relative; z-index:2; float:left; width:100%; margin-bottom:0; }
.input-group-addon {
  padding:6px 14px; font-size:13px; color:var(--text-mid);
  text-align:center; background-color:var(--bg-soft);
  border:1px solid var(--border-color); border-radius:var(--radius-sm);
}
.input-group .form-control:first-child,.input-group-addon:first-child,
.input-group-btn:first-child > .btn { border-top-right-radius:0; border-bottom-right-radius:0; }
.input-group .form-control:last-child,.input-group-addon:last-child,
.input-group-btn:last-child > .btn { border-top-left-radius:0; border-bottom-left-radius:0; }
.input-group-addon:first-child { border-right:0; }
.input-group-addon:last-child { border-left:0; }
.input-group-btn { position:relative; font-size:0; white-space:nowrap; width:1%; vertical-align:middle; }
.input-group-btn > .btn { position:relative; }
.input-group-btn > .btn + .btn { margin-left:-1px; }
.input-group-btn:last-child > .btn { z-index:2; margin-left:-1px; padding:9px 14px; }
.input-group-addon,.input-group-btn,.input-group .form-control { display:table-cell; }

.form-group__password { position:relative; }
.forgot-password { position:absolute; right:29px; }

/* ============================================================
   NAVIGATION — PILLS & TABS
   ============================================================ */
.nav { padding-left:0; margin-bottom:0; list-style:none; }
.nav > li { position:relative; display:block; }
.nav > li > a { position:relative; display:block; padding:6px 10px; font-size:13px; }
.nav > li > a:hover,.nav > li > a:focus {
  text-decoration:none; background:var(--accent-light); color:var(--accent);
}
.nav > li.disabled > a { color:var(--text-light); cursor:not-allowed; }

.nav-pills > li { float:left; }
.nav-pills > li > a { border-radius: var(--radius-sm); color:var(--text-mid); font-weight:500; }
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.nav-tabs { border-bottom:2px solid var(--border-color); }
.nav-tabs > li { float:left; margin-bottom:-2px; }
.nav-tabs > li > a { margin-right:4px; line-height:1.4; border:none; border-radius:8px 8px 0 0; padding:8px 16px; color:var(--text-mid); font-weight:500; }
.nav-tabs > li > a:hover { border-color:transparent; color:var(--accent); background:var(--accent-light); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--accent); cursor:default; background:transparent;
  border-bottom:2px solid var(--accent); font-weight:600;
}
.tab-content > .tab-pane { display:none; }
.tab-content > .active { display:block; }

.nav-stacked > li { float:none; }
.nav-stacked > li + li { margin-top:2px; margin-left:0; }

.nav-pills { margin-bottom:12px; padding-right:0; padding-left:0; }
ul.nav.nav-pills.pull-right { padding-right:0; padding-left:0; }
ul.nav.nav-pills { padding-right:0; padding-left:0; }

.list.nav.nav-pills {
  padding: 4px;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  border: var(--border);
}
.list.nav.nav-pills .neworder-item { flex:1; list-style:none; margin:0px;
}

/* ============================================================
   WELL (card-like containers)
   ============================================================ */
.well {
  min-height: 20px;
  padding: 18px;
  margin-bottom: 16px;
  background-color: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: var(--border);
}
.well.user { margin-bottom:15px; }
.well.blog { padding:28px 20px; background:var(--bg-white); }
.well.login { }
.well.well-float { overflow-x:auto; width:100%; padding:0; }
.well.social { padding:8px 15px; }
.well blockquote { border-color:var(--border-color); }
.well-lg { padding:24px; border-radius:var(--radius); }
.well-sm { padding:10px; border-radius:var(--radius-sm); }

/* ============================================================
   TABLE
   ============================================================ */
table { background-color:transparent; }
caption { padding-top:8px; padding-bottom:8px; color:var(--text-light); text-align:left; }
th { text-align:left; font-weight:600; color:var(--text-dark); }

.table { width:100%; max-width:100%; margin-bottom:0; }
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 10px 12px;
  line-height: 1.5;
  vertical-align: top;
  border-bottom: 1px solid var(--border-color);
}
.table > thead > tr > th { vertical-align:bottom; border-bottom:0px solid var(--border-color); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-light); }
.table > tbody + tbody { border-top:2px solid var(--border-color); }
.table-striped > tbody > tr:nth-of-type(odd) { background-color:#f8f7ff; }
.table-hover > tbody > tr:hover { background-color:var(--accent-light); }
.table-bordered { border:var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td { border:1px solid var(--border-color); }
.table-responsive { min-height:.01%; overflow-x:auto; }
td.service-name { width:100%; }
td.width-40 a { color:var(--accent); }
td[data-status="in progress"] { color:var(--accent); font-weight:600; }

/* ============================================================
   PANELS
   ============================================================ */
.panel {
  margin-bottom:20px;
  background-color:var(--bg-white);
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.panel-body { padding:16px; }
.panel-heading { padding:14px 18px; border-bottom:var(--border); border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); background:var(--bg-soft); }
.panel-title { margin:0; font-size:16px; font-weight:600; }
.panel-footer { padding:12px 18px; background-color:var(--bg-soft); border-top:var(--border); border-radius:0 0 var(--radius) var(--radius); }
.panel-default { border-color:var(--border-color); }
.panel-default > .panel-heading { background:var(--bg-soft); border-color:var(--border-color); }
.panel-primary > .panel-heading { background:var(--accent); border-color:var(--accent); color:#fff; }
.panel-success > .panel-heading { background:#dcfce7; border-color:#bbf7d0; color:#15803d; }
.panel-danger > .panel-heading { background:#fee2e2; border-color:#fecaca; color:#dc2626; }
.panel-group { margin-bottom:20px; }
.panel-group .panel { margin-bottom:0; border-radius:var(--radius); }
.panel-group .panel + .panel { margin-top:6px; }
.panel-group .panel-heading { border-bottom:0; }
.panel-group .panel-heading + .panel-collapse > .panel-body { border-top:var(--border); }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  padding:14px 16px;
  margin-bottom:16px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-size:13px;
}
.alert h4 { margin-top:0; color:inherit; font-weight:600; }
.alert-success  { color:#15803d; background-color:#dcfce7; border-color:#bbf7d0; }
.alert-info     { color:#0e7490; background-color:#e0f2fe; border-color:#bae6fd; }
.alert-warning  { color:#92400e; background-color:#fef3c7; border-color:#fde68a; }
.alert-danger   { color:#dc2626; background-color:#fee2e2; border-color:#fecaca; }
.alert-dismissable,.alert-dismissible { padding-right:35px; }
.alert-dismissable .close,.alert-dismissible .close { position:relative; top:-2px; right:-21px; color:inherit; }

/* ============================================================
   BADGES & LABELS
   ============================================================ */
.badge {
  display: inline-block;
  min-width: 10px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
  white-space: nowrap;
  border-radius: 20px;
  border: var(--border);
  background: var(--bg-soft);
  line-height: 1.4;
}
.dropdown-toggle span.badge { border:none; }
.badge:empty { display:none; }

.label {
  display:inline; padding:.2em .6em .3em;
  font-size:75%; font-weight:700; color:#fff;
  text-align:center; white-space:nowrap;
  vertical-align:baseline; border-radius:20px;
}
.label-default { background:var(--text-light); }
.label-primary { background:var(--accent); }
.label-success { background:#22c55e; }
.label-info    { background:#0891b2; }
.label-warning { background:#f59e0b; }
.label-danger  { background:#ef4444; }

/* ============================================================
   MODALS
   ============================================================ */
.modal {
  position:fixed; top:0; right:0; bottom:0; left:0;
  z-index:1050; display:none; overflow:hidden;
  -webkit-overflow-scrolling:touch; outline:0;
}
.modal.fade .modal-dialog { transition:transform .25s ease-out; transform:translate(0,-30px); }
.modal.in .modal-dialog { transform:translate(0,0); }
.modal-open .modal { overflow-x:hidden; overflow-y:auto; }
.modal-dialog { position:relative; width:auto; margin:16px; }
.modal-content {
  position:relative; background:var(--bg-white);
  border:var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); outline:0;
}
.modal-backdrop { position:fixed; top:0; right:0; bottom:0; left:0; z-index:1040; background:#0d111780; }
.modal-backdrop.fade { opacity:0; }
.modal-backdrop.in  { opacity:.5; }
.modal-header { padding:18px 20px; border-bottom:var(--border);}
.modal-title { margin:0; font-size:16px; font-weight:700; color:var(--text-dark); }
.modal-body { position:relative; padding:20px; }
.modal-footer { padding:16px 20px; text-align:right; border-top:var(--border); }
.modal-footer .btn + .btn { margin-bottom:0; margin-left:8px; }
@media(min-width:1300px){ .modal-dialog { width:560px; margin:40px auto; } .modal-sm { width:300px; } }
@media(min-width:992px) { .modal-lg { width:900px; } }
.modal-body-scroller { max-height:500px; overflow:auto; border-radius:var(--radius); }

/* Close */
.close {
  float:right; font-size:20px; line-height:1; color:var(--text-light);
  text-shadow:none; filter:none; cursor:pointer; background:transparent;
  border:0; padding:4px; border-radius:6px; transition:color .12s, background .12s;
}
.close:hover,.close:focus { color:var(--text-dark); background:var(--bg-soft); opacity:1; }

/* ============================================================
   PAGINATION & PAGER
   ============================================================ */
.pagination {
  display:inline-block; padding-left:0; margin:16px 0; border-radius:var(--radius-sm);
}
.pagination > li { display:inline; }
.pagination > li > a,
.pagination > li > span {
  position:relative; float:left; padding:6px 14px; margin-left:4px;
  line-height:1.42857; color:var(--text-dark); text-decoration:none;
  background:var(--bg-white); border:var(--border); border-radius:var(--radius-sm) !important;
  font-weight:500; transition:background .12s, color .12s;
}
.pagination > li > a:hover,.pagination > li > span:hover { background:var(--accent-light); color:var(--accent); border-color:var(--accent); }
.pagination > .active > a,.pagination > .active > span,
.pagination > .active > a:hover,.pagination > .active > span:hover {
  z-index:3; color:#fff; cursor:default; background:var(--accent); border-color:var(--accent);
}
.pagination > .disabled > a,.pagination > .disabled > span { color:var(--text-light); cursor:not-allowed; background:var(--bg-soft); }

/* ============================================================
   MOBILE NAV
   ============================================================ */
.mob-nav {
  z-index:5000; position:fixed; right:0; bottom:0; left:0; margin:0 auto; display:none;
}
@media screen and(max-width:767px) { .mob-nav { display:block; } }
ul.mob-nav-link {
  position:relative; width:100%; list-style:none; padding:5px !important;
  margin:0 !important; display:flex; align-items:flex-start; z-index:2000;
  background:var(--bg-white); border-top:var(--border);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 20px rgba(95,77,238,.10);
}
.mob-nav-link li {
  flex:1; padding:8px 2px; transition:all .2s;
  box-shadow:inset 0 3px transparent;
  border-radius:var(--radius-sm);
}
.mob-nav-link li.active { background:var(--accent-light); border-radius:var(--radius-sm); }
.mob-nav-link li a {
  text-decoration:none !important; outline:none !important;
  display:flex; flex-direction:column; justify-content:center;
  align-items:center; font-size:10px; font-weight:600;
  color:var(--text-mid); text-align:center;
}
.mob-nav-link li a span { line-height:18px; font-weight:500; }
.mob-nav-link li a svg { height:21px; }
i.mob-nav-icon { font-size:19px; }

/* ============================================================
   SIDEBAR / USER DETAILS
   ============================================================ */
.userDetails {
  display:flex; align-items:center; padding:14px;
  background-color:var(--bg-white);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  border:var(--border);
}
.ud-row {
  display:grid; gap:6px;
  grid-template-columns: repeat(2,1fr);
}
@media(min-width:768px) and (max-width:1023px) { .ud-row { grid-template-columns:repeat(4,1fr); } }
@media(min-width:850px) { .ud-row { grid-template-columns:1fr; flex-direction:column; } }
.ud-text h6 { color:var(--accent); font-weight:600; font-size:13px;     margin-top: 0px;}
.ud-textspan { font-size:13px; }

/* ============================================================
   PLATFORM BUTTONS (social icons row)
   ============================================================ */
.platform-buttons {
  overflow-x:auto; overflow-y:hidden;
  display:flex; gap:6px;
  -webkit-overflow-scrolling:touch;
  align-items:center;
  -ms-overflow-style:none; scrollbar-width:none;
  mask-image:linear-gradient(to right,transparent 0%,black 5%,black 90%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 5%,black 90%,transparent 100%);
  padding-right:40px;
}
.platform-buttons button {
  background-color: var(--bg-white);
  border: var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  transition: border-color .15s, background .15s, box-shadow .15s;
  font-weight: 500;
  color: var(--text-mid);
}
.platform-buttons button:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.platform-buttons button i { font-size:15px; transition:color .2s; }
.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 button:hover { border-color:var(--accent); border-style:solid; }
.platform-buttons.social { flex-direction:row; overflow-x:auto; overflow-y:hidden; }
.platform-selection { text-align:center; margin:0; position:relative; }
.platform-selection.social { margin:1px 0; }

/* ============================================================
   STEP BOX
   ============================================================ */
.stepbox .sboxes { position:relative; margin:12px 0; }
.stepbox .sboxes .barea {
  z-index:23; position:relative; transition:.2s ease;
  border-radius:var(--radius); background:var(--bg-soft);
}
.stepbox .sboxes .barea .sbbody {
  padding:24px; min-height:140px; border:var(--border);
  border-radius:var(--radius-sm); background:var(--bg-white);
  transition:.2s ease;
}
.stepbox .sboxes .barea .sbbody:hover { box-shadow:var(--shadow-md); }
.stepbox .sboxes .barea .sbtext { font-size:13px; line-height:22px; transition:.2s; }
.stepbox .sboxes .barea .sbicon i { font-size:22px; transition:.2s; color:var(--accent); }
.stepbox .sboxes .barea .sbtitle { font-size:16px; line-height:22px; font-weight:700; padding-left:12px; color:var(--text-dark); }

/* Step box variants */
.sbbody.signin-1 { border:1px solid rgba(255,106,0,.2) !important; }
.sbbody.signin-2 { border:1px solid rgba(245,58,139,.2) !important; }
.sbbody.signin-3 { border:1px solid rgba(123,64,228,.2) !important; }
.sbbody.signin-4 { border:1px solid rgba(61,155,252,.2) !important; }
.benefit__card_img.signin-1 { background:#FF6A00; }
.benefit__card_img.signin-2 { background:#F53A8B; }
.benefit__card_img.signin-3 { background:#7B40E4; }
.benefit__card_img.signin-4 { background:#3D9BFC; }

/* ============================================================
   BENEFIT CARDS
   ============================================================ */
.benefit { padding:6.4rem 1.6rem; margin-bottom:6.4rem; background-color:var(--bg-soft); }
@media(min-width:1300px){ .benefit { padding:9.6rem 4rem 7.5rem; margin-bottom:4.3rem; margin-top:50px; } }
.benefit__inner { position:relative; }
.benefit__top { margin-bottom:4rem; display:flex; gap:1.6rem; flex-wrap:wrap; }
@media(min-width:932px){ .benefit__top { grid-template-columns:minmax(458px,1fr) minmax(372px,1fr); } }
.benefit__grid {
  position:relative; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  grid-auto-rows:minmax(200px,1fr); gap:20px; z-index:1;
}
.benefit__card {
  border-radius:var(--radius); display:flex; flex-direction:column;
  gap:1.2rem; padding:1.4rem;
  background:var(--bg-white); border:var(--border);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s, transform .2s;
}
.benefit__card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.benefit__card_img {
  width:40px; height:40px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.benefit__card_img > img { height:18px; }
.benefit__card_content { display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
.benefit__card_title { font-size:14px; line-height:1.5rem; font-weight:700; color:var(--text-dark); }
.text-small { font-size:1.2rem; line-height:1.9rem; color:var(--text-mid); font-weight:400; }

/* ============================================================
   WHY US
   ============================================================ */
.why-us { padding:6.4rem 1.6rem; background-color:var(--bg-soft); position:relative; }
@media(min-width:1300px){ .why-us { padding:6.4rem 4rem; } }
.why-us__inner { display:flex; flex-direction:column-reverse; gap:3.2rem; }
@media(min-width:932px){ .why-us__inner { flex-direction:row; gap:6rem; } }
.why-us__left { display:grid; align-items:center; gap:1.6rem; position:relative; z-index:1; }
@media(min-width:1300px){ .why-us__left { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:stretch; } }
.why-us__right { display:flex; flex-direction:column; align-items:center; }
@media(min-width:1300px){ .why-us__right { align-items:flex-start; } }
.why-us__text { margin-bottom:3.2rem; text-align:center; max-width:600px; }
@media(min-width:1300px){ .why-us__text { margin-bottom:4rem; text-align:left; } }
.why-us__reason {
  background-color:var(--bg-white); border-radius:var(--radius);
  display:flex; flex-direction:column; gap:1rem;
  border:var(--border); padding:1.4rem 2rem;
  box-shadow:var(--shadow-sm); transition:box-shadow .2s;
}
.why-us__reason:hover { box-shadow:var(--shadow-md); }
.why-us__reason_img {
  width:34px; height:34px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; border-radius:50%;
}

/* ============================================================
   SUPTITLE / SECTION HEADINGS
   ============================================================ */
.suptitle {
  font-size:22px; margin-top:8px; line-height:1.2;
  margin-bottom:1rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1.5px;
  text-align:center;
  background:linear-gradient(135deg, var(--accent) 0%, #a78bfa 50%, var(--accent-dark) 100%);
  background-clip:text; -webkit-text-fill-color:transparent;
  padding:0 12px;
}
.suptitle .subline { display:inline-block; font-size:.68em; line-height:1.2; }

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

/* ============================================================
   FOOTER
   ============================================================ */
footer { padding:6rem 0; }
.footer {
  background-color:var(--text-dark); padding:3.2rem;
}
@media(min-width:1300px){ .footer { padding:2rem 4rem; } }
.footer__inner {
  display:flex; flex-direction:column-reverse;
  align-items:center; gap:3rem; justify-content:space-between;
}
@media(min-width:827px){ .footer__inner { flex-direction:row; gap:2rem; } }
ul.follow-us { padding:0; list-style:none; display:flex; gap:6px; }
.follow-us li a {
  text-decoration:none; width:34px; height:34px; display:flex;
  background:rgba(255,255,255,.1); border-radius:50%; margin:0;
  transition:all .2s ease; justify-content:center; align-items:center;
  color:#fff; border:1px solid rgba(255,255,255,.2);
}
.follow-us li a:hover { background:var(--accent); border-color:var(--accent); }
.footer-nav { padding:0; list-style:none; }
.footer-nav li a { color:var(--text-mid); line-height:34px; display:block; text-decoration:none; font-weight:500; }
.footer-nav li a:hover { color:var(--accent); }
ul.footer-nav.6 { display:flex; justify-content:flex-start; flex-wrap:wrap; gap:10px; }

/* ============================================================
   SOCIAL BRAND ICONS
   ============================================================ */
span.fab.fa-snapchat-ghost { color:#fffc00; background:#000; padding:2px; border-radius:4px; }
span.fab.fa-google { color:#4285F4; }
span.fab.fa-telegram-plane { color:#0088cc; }
span.fab.fa-discord { color:#5865f2; }
span.fab.fa-linkedin-in { color:#0a66c2; }
span.fab.fa-kickstarter-k { color:#4ae014; }
span.fab.fa-youtube { color:#CD201F; }
span.fab.fa-facebook-f { color:#1567d2; }
span.fab.fa-twitch { color:#9146ff; }
span.fab.fa-instagram-square {
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
span.fab.fa-instagram {
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  -webkit-text-fill-color:transparent; -webkit-background-clip:text; padding-right:1px;
}
span.fas.fa-star { color:var(--accent); }
span.help { font-size:12px; color:var(--text-light); }
span.nowrap { text-align:center; border-radius:11px; display:block; }

/* ============================================================
   MISCELLANEOUS UTILITY
   ============================================================ */
.flex { display:flex; }
.w-full { width:100%; }
.justify-center { justify-content:center; }
.align-items-center { align-items:center !important; display:flex; }
.mt-4,.my-4 { margin-top:1.5rem !important; }
.mb-3,.my-3 { margin-bottom:1.5rem !important; }
.mb-1 { margin-bottom:.25rem; }
.mb-6 { margin-bottom:3rem; }
.mb-8 { margin-bottom:2rem; }
.mr-2 { margin-right:.5rem; }
.p-1 { padding:.25rem; }
.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; }
.overflow-hidden { overflow:hidden; }
.rounded-2xl { border-radius:var(--radius); }
.rounded-3xl { border-radius:var(--radius); }
.rounded-full { border-radius:9999px; }
.relative { position:relative; }
.absolute { position:absolute; }
.block { display:block; }
.self-center { align-self:center; }
.bg-white { background-color:var(--bg-white); }
.border { border-width:1px; }

.nowrap { white-space:nowrap; }
.width-40 { width:40% !important; word-break:break-all; min-width:125px; }
td.width-40 { max-width:50px !important; }
.width-service-name { min-width:200px; }
.service-description { word-break:break-word; }
.service-description table { width:auto !important; }
.service-description__th { width:40% !important; word-break:break-all; }
.a1 { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; width:90%; }
.link { word-break:break-all; min-width:200px; }
.search { width:230px; }
.pagination { margin:0; }
.pull-right-middle { line-height:40px; text-align:right !important; width:48%; }
.border-solid { border:1px solid var(--border-color); }
.border-rounded {
  border-radius:var(--radius-sm); overflow-wrap:break-word; word-wrap:break-word;
  background-color:var(--bg-soft); border:none;
}
.well.well-float { float:left; width:100%; }
.order-actions { width:92px; }
@media(max-width:1200px){ .order-actions { width:auto; } .order-actions .btn { margin-bottom:2px; } }

/* 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);
}
.alert-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.alert-header h4 { margin:0; color:var(--text-dark); font-size:16px; font-weight:700; }
.close-btn { background:none; border:none; cursor:pointer; padding:4px; color:var(--text-light); border-radius:6px; transition:color .12s, background .12s; }
.close-btn:hover { color:var(--text-dark); background:var(--border-color); }
.alert-content { display:grid; gap:4px; }
.info-row { display:flex; align-items:flex-start; color:var(--text-dark); line-height:1.3; word-break:break-all; font-weight:400; }
.info-row .label-new { font-weight:600; color:var(--text-light); min-width:70px; font-size:12px; }
.info-row a { color:var(--accent); text-decoration:none; word-break:break-all; }
.info-row a:hover { text-decoration:underline; }
.alert-footer { margin-top:0; text-align:right; }

/* 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%; } }

/* Status badges */
.status {
  margin-bottom:0; text-align:center; padding:4px 10px;
  border-radius:20px; color:#fff; font-size:12px; font-weight:600; 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; }

/* Order status layout */
.order-status-wrap { display:flex; flex-wrap:wrap; align-items:flex-start; min-height:80px; }
.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; }

/* Features section */
#features { padding:70px 0; background-color:var(--bg-white); }
#features.features4 .features-slide { min-height:270px; }
#features.features4 .title { text-align:center; font-size:32px !important; font-weight:700 !important; margin-bottom:36px; }
#features.features4 .features-title { color:var(--text-dark); font-size:22px; font-weight:700; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border-color); }
.features-slide {
  min-height:360px; background-color:var(--bg-soft); padding:22px;
  border-radius:var(--radius); margin:0 12px; transition:.3s ease;
  border:var(--border);
}
.features-slide:hover { box-shadow:var(--shadow-md); }
.features-title { transition:.3s ease; }
p.features-txt { line-height:1.5; transition:.3s ease; color:var(--text-mid); }
.features-slider-nav,.features-slider1-nav,.features-slider2-nav { margin-top:24px; text-align:center; }

/* Video section */
.video-section { padding:6rem 20px; text-align:center; background:var(--bg-soft); }
.vertical-video-container { display:flex; justify-content:center; position:relative; max-width:300px; margin:16px auto 0; }
.responsive-video-vertical { position:relative; width:100%; padding-bottom:177.77%; height:0; overflow:hidden; box-shadow:var(--shadow-lg); border-radius:var(--radius); }
.responsive-video-vertical iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }

/* FAQ */
#faq { margin:36px 0; }
#faq .title { margin-bottom:40px; }
#faq h4 { font-size:1.8rem; font-weight:800; text-align:center; margin-bottom:36px; display:table; margin-left:auto; margin-right:auto; padding-bottom:10px; border-bottom:3px solid var(--accent); }
.faq-item { border-bottom:1px solid var(--border-color); padding:22px 0; }
.faq-item:last-child { border-bottom:none; }
.faq-item h5 { font-weight:700; margin:0 0 10px; }
.faq-item p { line-height:1.6; margin:0; color:var(--text-mid); }
#faq .panel-heading { border:0; padding:0; }
#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;
}
#faq .panel-heading a:hover { background:var(--accent-light); color:var(--accent); }
#faq .panel-body {
  margin-top:10px; padding:18px; border-radius:var(--radius-sm);
  font-size:13px; line-height:1.5; color:var(--text-mid);
  background:var(--bg-soft); border:var(--border);
}
#faq .panel-default { background:0 0; border:0; margin-bottom:6px; }

/* Payment */
.payment-container { padding:20px 0; width:100%; display:flex; justify-content:center; }
.payment-card { border-radius:var(--radius); padding:0; width:100%; max-width:500px; }
.payment-header { margin-bottom:20px; text-align:center; }
.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 16px; border-radius:var(--radius-sm);
  text-decoration:none; font-weight:600; transition:all .2s;
  border:var(--border);
}
.pay-btn:hover { background:var(--accent); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); text-decoration:none; }
.pay-btn i { font-size:12px; opacity:.4; }
.payment-footer { text-align:center; border-top:var(--border); padding-top:18px; }
.ticket-link {
  background:var(--bg-soft); padding:4px 14px; border-radius:var(--radius-sm);
  text-decoration:none; font-weight:600; margin:0 4px; border:var(--border);
  color:var(--text-dark); transition:all .15s;
}
.ticket-link:hover { background:var(--accent); color:#fff; text-decoration:none; }
.amount-button {
  display:inline-block; background:var(--accent); color:#fff;
  padding:.75rem .75rem 7.5px; border-radius:var(--radius-sm);
  text-decoration:none; font-weight:600; transition:background .15s; text-align:center; margin-bottom:3px;
}
a.amount-button:hover { background:var(--accent-dark); color:#fff; }

/* Payment grid / forms */
.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:6px; 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); }
.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:#f8f9fa; padding:4px; }
.payment-name { font-weight:600; line-height:1.2; color:var(--text-dark); }

/* 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; }
.low-balance-text span { font-size:12px; opacity:.9; }
.low-balance-btn {
  background:var(--accent); color:#fff; padding:8px 16px; 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; }

/* 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); }
.accordion-header {
  background:var(--bg-soft); padding:14px 18px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  font-weight:600; font-size:15px; color:var(--text-dark);
  transition:background .15s; border-radius:var(--radius-sm);
}
.accordion-header:hover { background:var(--accent-light); color:var(--accent); }
.accordion-item.active .accordion-header { background:var(--accent); color:#fff; }
.accordion-content { padding:14px; background:var(--bg-white); border:var(--border); display:none; border-radius:0 0 var(--radius-sm) var(--radius-sm); }

/* RTL */
.rtl-navbar { direction:rtl; }
.rtl-navbar .navbar-header { float:right; }
.rtl-navbar .navbar-right { float:left !important; margin-right:-15px; }
.rtl-navbar .navbar-nav { float:right; padding-right:5px; margin-right:15px; }
.rtl-navbar .navbar-nav li { float:right; }
.rtl-navbar .navbar-toggle { float:left; }
.rtl-navbar .navbar-brand { float:right; padding-right:15px; }
.rtl-form { direction:rtl; }
.rtl-form input { direction:rtl; text-align:right; }
.rtl-content { direction:rtl; }
.rtl-table { direction:rtl; }
.rtl-table th,.rtl-table td { text-align:right; }
.rtl-h { direction:rtl; text-align:right; }
.rtl-btn { float:right; }
.rtl-ul { text-align:right; direction:rtl; padding-right:15px; }
.rtl-alert { text-align:right; direction:rtl; }
.rtl-alert .close { float:left; }
.rtl-pagination { float:right; }
.rtl-nav { float:none; direction:rtl; width:auto; padding-right:0; }
.rtl-nav li { float:right; }
.rtl-nav input.form-control { border-radius:0 var(--radius-sm) var(--radius-sm) 0 !important; }
.rtl-modal { direction:rtl; }
.rtl-modal .close { float:left; }
.rtl-modal .modal-footer { text-align:left; }

/* Tooltip */
.tooltip {
  position:absolute; z-index:1070; display:block;
  font-size:12px; opacity:0; filter:alpha(opacity=0);
}
.tooltip.in { opacity:.95; }
.tooltip-inner { max-width:200px; padding:4px 10px; color:#fff; text-align:center; background:var(--text-dark); border-radius:8px; font-size:12px; }
.tooltip-arrow { position:absolute; width:0; height:0; border-color:transparent; border-style:solid; }

/* Popover */
.popover {
  position:absolute; top:0; left:0; z-index:1060; display:none;
  max-width:280px; padding:1px; font-size:13px;
  background-color:var(--bg-white); border:var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
}
.popover-title { padding:10px 16px; margin:0; font-size:14px; font-weight:600; background:var(--bg-soft); border-bottom:var(--border); border-radius:var(--radius) var(--radius) 0 0; }
.popover-content { padding:10px 16px; }

/* Carousel */
.carousel { position:relative; }
.carousel-inner { position:relative; width:100%; overflow:hidden; }
.carousel-inner > .item { position:relative; display:none; transition:.5s ease-in-out left; }
.carousel-inner > .active,.carousel-inner > .next,.carousel-inner > .prev { display:block; }
.carousel-inner > .active { left:0; }
.carousel-inner > .next { left:100%; }
.carousel-inner > .prev { left:-100%; }
.carousel-inner > .next.left,.carousel-inner > .prev.right { left:0; }
.carousel-inner > .active.left { left:-100%; }
.carousel-inner > .active.right { left:100%; }
.carousel-control { position:absolute; top:0; bottom:0; left:0; width:15%; font-size:20px; color:#fff; text-align:center; opacity:.5; }
.carousel-indicators { position:absolute; bottom:10px; left:50%; z-index:15; width:60%; padding-left:0; margin-left:-30%; text-align:center; list-style:none; }
.carousel-indicators li { display:inline-block; width:8px; height:8px; margin:1px; cursor:pointer; background-color:rgba(255,255,255,.5); border:none; border-radius:50%; }
.carousel-indicators .active { width:24px; border-radius:4px; background:var(--accent); }

/* Collapse */
.collapse { display:none; }
.collapse.in { display:block; }
.collapsing { position:relative; height:0; overflow:hidden; transition:height .3s ease; }
.fade { opacity:0; transition:opacity .15s linear; }
.fade.in { opacity:1; }

/* Select2 overrides */
.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; color:var(--accent); }
span.select2-selection__text { color:var(--text-dark); }

/* Copy toast */
.copy-toast {
  position:fixed; left:50%; bottom:40px;
  transform:translateX(-50%) translateY(20px);
  background:var(--bg-white); color:var(--text-dark);
  border:var(--border); border-radius:var(--radius); padding:12px 18px;
  box-shadow:var(--shadow-lg);
  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; }

/* Platform info */
.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,.brand-x { color:var(--text-dark); }
.brand-fb { color:#1877F2; }
.brand-yt { color:#FF0000; }
.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; }
.brand-pi { color:#BD081C; }
.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:8px; 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:10px; transition:.15s; border:var(--border); }
.service-list li:hover { background:var(--accent-light); color:var(--accent); }
.service-list li i { font-size:13px; color:var(--accent); width:14px; }

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

/* i icons 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;
}

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

/* Dark mode toggle */
.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; 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; transition:.3s; border-radius:34px; }
.slider.round:before {
  position:absolute; content:""; height:26px; width:50%; left:4px; bottom:4px;
  transition:.3s; border-radius:24px; background:var(--bg-white);
  box-shadow:var(--shadow-sm);
}
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); }
.light-label { left:10px; }
.dark-label { right:10px; }

/* Ticket */
.titcket-title { font-size:17px; padding-bottom:10px; margin-bottom:10px; font-weight:700; }
.ticket-message-right .ticket-message,
.ticket-message-left .ticket-message {
  border-radius:var(--radius-sm); padding:14px; background:var(--bg-soft); border:var(--border);
}
.ticket-message-block { margin-bottom:14px; }
.ticket-message { word-break:break-word; }
.ticket-message p,.ticket-message blockquote,.ticket-message li { white-space:pre-wrap; margin:0; }
.ticket-message blockquote { font-size:13px; border-left:3px solid var(--accent); padding:2px 10px; margin-bottom:10px; }
.ticket-message hr { border-top:var(--border); }

/* Breadcrumb */
.breadcrumb { padding:8px 14px; margin-bottom:16px; list-style:none; background:var(--bg-soft); border-radius:var(--radius-sm); }
.breadcrumb > li { display:inline-block; }
.breadcrumb > li + li:before { padding:0 6px; color:var(--text-light); content:"/\00a0"; }
.breadcrumb > .active { color:var(--text-light); }

/* Filter */
.filter-header { display:flex; justify-content:space-between; align-items:center; padding:5px; }
.filter-header h2 { font-size:17px; color:var(--text-dark); }
@media(max-width:1300px){ .filter-header h2 { font-size:15px; } }
#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;
}

/* 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:700; font-size:16px; color:var(--text-dark); }
.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:700; color:var(--text-dark); margin-bottom:10px; }
.prefs-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(32%,1fr)); gap:2px; max-height:280px; overflow:auto; padding-right:4px; }
.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, transform .05s; border:var(--border); margin:3px; }
.prefs-item:hover { background:var(--accent-light); border-color:var(--accent); }
.prefs-item.is-active { border-color:var(--accent); box-shadow:0 0 0 3px rgba(95,77,238,.12); }
.prefs-left { display:flex; align-items:center; gap:10px; }
.prefs-text { font-weight:600; color:var(--text-dark); }
.prefs-muted { color:var(--text-light); font-weight:500; }
.prefs-check { color:#22c55e; font-weight:900; }
.prefs-special { background-color:#fffbeb; }
a.prefs-item.prefs-special .prefs-text { color:#92400e; }
.prefs-special:hover { background:#fef3c7; border-color:#fde68a; }

/* Sections */
section.block1 { padding:46px 0; }
section.block2 { margin:0; }
#features { padding:80px 0; background-color:var(--bg-white); }
.row.block1 { margin-top:50px; }

/* Confirm email */
.confirm-email { margin-top:30px; }
.confirm-email__description { margin-bottom:24px; }

/* Navbar fixed positions */
@media(max-width:1300px){
  ul.nav.navbar-nav.navbar-left-block {
    width:260px; left:0; overflow:auto !important;
    position:fixed; bottom:0; top:60px;
    padding-right:0; background:var(--bg-white);
    border-right:var(--border);
    z-index:2000;
  }
}
@media(max-width:767px){
  ul.nav.navbar-nav.navbar-left-block { }
}

/* Misc nav */
li.navbar-badge.open { position:relative; }
#currencies-list { position:absolute; top:100%; left:0; z-index:1050; display:block; min-width:160px; border-radius:var(--radius-sm); }
#currencies-list:not(.show) { display:none; }
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:500; }
ul#currencies-list > li > a.active { background:var(--accent); color:#fff; }
i#mode-icon { color:var(--text-dark); }
a#dark-mode-button { text-decoration:none; }
a.dropdown-toggle { text-decoration:none; }
a.nav-logout-btn { color:#dc2626 !important; }

/* Showcase */
.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:700; }
.showcase-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.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); }
.image-box img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .4s ease; }
.image-box:hover img { transform:scale(1.05); }
.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 18px; 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; } }

/* Neworder */
.neworder-item a {
  display:inline-flex !important; align-items:center; gap:4px; width:100%;
  padding:6px 10px; font-weight:500; color:var(--text-dark);
  border-radius:var(--radius-sm); transition:background .12s, color .12s;
}
.neworder-item a:hover { background:var(--accent-light); color:var(--accent); }
.neworder-item a svg { height:15px; width:15px; }

/* List group */
.list-group { padding-left:0; margin-bottom:16px; }
.list-group-item { position:relative; display:block; padding:12px 16px; margin-bottom:-1px; background:var(--bg-white); border:1px solid var(--border-color); }
.list-group-item:first-child { border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); }
.list-group-item:last-child { margin-bottom:0; border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius); }
li.list-group-item { background:transparent; }
li.list-group-item > a { color:var(--text-dark); }
.list-group-item.active { z-index:2; color:#fff; background:var(--accent); border-color:var(--accent); }

/* Misc */
.col-md-8.col-md-offset-2.blog { width:100%; display:flex; gap:10px; }
.well.blog { width:50%; }
.bg-pink-100,.bg-red-100,.text-blue-500 { background-color:var(--accent-light); color:var(--accent); }
.bg-gradient-to-b { background-image:linear-gradient(to bottom,var(--tw-gradient-stops)); }
.font-bold { font-weight:700; }
.font-medium { font-size:16px; text-align:center; font-weight:500; }
.h2-glorify { font-size:32px; font-weight:600; }
.home-title p { text-align:center; }
.text-3xl { font-size:16px; line-height:2.25rem; }
.text-4xl { font-size:2rem; line-height:2.5rem; }
.text-5xl { font-size:2.8rem; line-height:1; }
.max-w-full { margin-top:20px; }
.info { margin-bottom:14px; }
@media(max-width:500px){ .info { margin-left:15px; margin-right:15px; } }
.text-sm.text-slate-600.leading-relaxed { text-align:center; font-size:14px; font-weight:500; padding:10px; color:var(--text-mid); }

/* Responsive tweaks */
@media(max-width:850px){ .list.nav.nav-pills { width:max-content; } }
@media(max-width:991px){ .well-float { width:auto; min-width:100%; } }
@media(min-width:991px){ .service-name { max-width:320px; word-break:break-word; } .text-md-right { text-align:right; } }
@media(max-width:500px){
  .well { border-radius:var(--radius-sm) !important; border:none; }
  .well.well-float { border-radius:0; }
  .container.relative.z-10.mx-auto.px-4 { padding:0; }
  ul.nav.nav-pills { margin-left:15px; margin-right:15px; }
  .low-balance-box { border-radius:0 !important; }
  h1 { padding:0 15px; }
  .well.blog { margin:15px 0; }
  .list.nav.nav-pills { border:none; }
  .col-lg-12,.col-md-8.col-md-offset-2,.col-md-8.col-md-offset-2.new,
  .col-md-4.col-md-offset-2.new,.col-md-3.col-md-offset-2.new,
  .col-md-4.col-md-offset-2,.col-lg-8.col-lg-offset-2,
  .col-md-10.col-md-offset-1,.col-md-6.col-md-offset-2,
  .col-md-3.col-md-offset-2.new { padding:0; }
}

/* Print */
@media print {
  *,*:before,*:after { color:#000 !important; text-shadow:none !important; background:transparent !important; box-shadow:none !important; }
  a,a:visited { text-decoration:underline; }
  a[href]:after { content:" (" attr(href) ")"; }
  pre,blockquote { border:1px solid #999; page-break-inside:avoid; }
  thead { display:table-header-group; }
  tr,img { page-break-inside:avoid; }
  img { max-width:100% !important; }
  p,h2,h3 { orphans:3; widows:3; }
  h2,h3 { page-break-after:avoid; }
  .navbar { display:none; }
  .hidden-print { display:none !important; }
  .rtl { float:right; direction:rtl; }
}

/* Stripe */
.StripeElement { box-sizing:border-box; height:41px; padding:10px 14px; border:var(--border); border-radius:var(--radius-sm); background:var(--bg-white); box-shadow:var(--shadow-sm); transition:box-shadow .15s; }
.StripeElement--focus { box-shadow:0 0 0 3px rgba(95,77,238,.15); border-color:var(--accent); }
.StripeElement--invalid { border-color:#ef4444; }

/* Feature table */
.feature-table { margin:20px 0; overflow-x:auto; border-radius:var(--radius); box-shadow:var(--shadow-sm); border:var(--border); }
.feature-table table { width:100%; border-collapse:collapse; text-align:left; }
.feature-table th { font-weight:700; padding:14px 16px; text-transform:uppercase; font-size:11px; letter-spacing:.05em; color:var(--text-light); background:var(--bg-soft); }
.feature-table td { padding:14px 16px; line-height:1.5; color:var(--text-mid); border-top:var(--border); }
.feature-table tbody tr:hover { background:var(--accent-light); }

/* Jumbotron */
.jumbotron { padding:36px; margin-bottom:24px; background:var(--bg-soft); border-radius:var(--radius); border:var(--border); }
.jumbotron h1,.jumbotron .h1 { color:var(--text-dark); }
.jumbotron p { margin-bottom:14px; font-size:18px; }

/* Thumbnail */
.thumbnail { display:block; padding:4px; margin-bottom:18px; background:var(--bg-white); border:var(--border); border-radius:var(--radius-sm); transition:border .15s; }
a.thumbnail:hover,a.thumbnail:focus,a.thumbnail.active { border-color:var(--accent); box-shadow:var(--shadow-sm); }

/* Section why */
section#why-yoursite > h4 {
  font-size:1.8rem; font-weight:800; text-align:center; margin-bottom:36px;
  display:table; margin-left:auto; margin-right:auto; padding-bottom:10px;
  border-bottom:3px solid var(--accent);
}

/* Collapsible btn group */
.btn-group,.btn-group-vertical { position:relative; display:inline-block; vertical-align:middle; }
.btn-group > .btn,.btn-group-vertical > .btn { position:relative; float:left; }
.btn-group > .btn:first-child { margin-left:0; }
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-top-right-radius:0; border-bottom-right-radius:0; }
.btn-group > .btn:last-child:not(:first-child) { border-top-left-radius:0; border-bottom-left-radius:0; }
.btn-group.open .dropdown-toggle { box-shadow:inset 0 2px 4px rgba(0,0,0,.1); }
.btn-group-justified { display:table; width:100%; table-layout:fixed; border-collapse:separate; }
.btn-group-justified > .btn,.btn-group-justified > .btn-group { display:table-cell; float:none; width:1%; }

/* Visibility */
.visible-xs,.visible-sm,.visible-md,.visible-lg { display:none !important; }
@media(max-width:767px){ .visible-xs { display:block !important; } .hidden-xs { display:none !important; } }
@media(min-width:1200px){ .visible-lg { display:block !important; } .hidden-lg { display:none !important; } }
@media(min-width:992px) and (max-width:1199px){ .visible-md { display:block !important; } .hidden-md { display:none !important; } }
@media(min-width:576px){ .col-sm-12 { flex:0 0 100%; max-width:100%; } }

/* Embed */
.embed-responsive { position:relative; display:block; height:0; padding:0; overflow:hidden; }
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,.embed-responsive embed,.embed-responsive video {
  position:absolute; top:0; bottom:0; left:0; width:100%; height:100%; border:0;
}
.embed-responsive-16by9 { padding-bottom:56.25%; }

/* Progress */
.progress { height:8px; margin-bottom:16px; overflow:hidden; background:var(--bg-soft); border-radius:4px; border:var(--border); }
.progress-bar { float:left; width:0; height:100%; font-size:12px; line-height:8px; color:#fff; background:var(--accent); transition:width .5s ease; border-radius:4px; }
.progress-bar-success { background:#22c55e; }
.progress-bar-info    { background:#0891b2; }
.progress-bar-warning { background:#f59e0b; }
.progress-bar-danger  { background:#ef4444; }

i.fa-regular.fa-copy { background:rgba(95,77,238,.1); padding:5px; border-radius:4px; cursor:pointer; }
i.fa-regular.fa-copy:hover { background:var(--accent); color:#fff; }

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:500; transition:background .15s;
}
a.btn-payments:hover { background:var(--accent-light); color:var(--accent); border-color:var(--accent); }

.checkbox { width:fit-content; }
.checkbox label { display:flex; align-items:center; gap:4px; font-weight:400; }

button.navbar-toggle.collapsed:hover { background:var(--accent-light); }

/* Toggle password */
#toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); cursor:pointer; font-size:13px; color:var(--accent); user-select:none; }

/* Form group login */
@media(min-width:1300px){
  .form-group.login { display:flex; margin-bottom:10px; padding:0 8px; flex:0 0 33%; width:33%; }
}

/* Kbd */
kbd { padding:2px 6px; font-size:90%; color:#fff; background:var(--text-dark); border-radius:6px; }
kbd kbd { padding:0; font-size:100%; font-weight:bold; box-shadow:none; }
.btn .caret {
    margin-left: 0;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}