/* ==========================================================================
   LAST LAYER - loaded after studio.css, so these win
   ========================================================================== */

/* --- 1. FOOTER SEPARATION -------------------------------------------------
   studio.css paints the footer #0e1013 while the page canvas is #0b0c0e.
   Those two differ by a contrast ratio of 1.03, so the footer read as one
   flat black block. It now sits on its own lighter plane with a lit edge. */
.site-footer{
  position:relative;
  background:#14171c !important;
  border-top:1px solid #2a2f37 !important;
  margin-top:70px;
}
.site-footer::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#ff7a18 22%,#ff7a18 78%,transparent);
  opacity:.55;
}
.site-footer .footer-grid h2{
  color:#f4f6f8 !important;text-transform:uppercase;letter-spacing:.09em !important;
}
.site-footer .footer-grid>div>a:not(.brand){color:#96a0ac !important;}
.site-footer .footer-grid>div>a:not(.brand):hover{color:#ff7a18 !important;}
.site-footer .footer-grid>div>a.contact-link{color:#ff9d4d !important;}
.site-footer .footer-grid>div>p{color:#96a0ac !important;}
.site-footer .footer-bottom{
  border-top:1px solid #2a2f37 !important;
  color:#8d97a3 !important;
}
.site-footer .footer-bottom a{color:#ff9d4d !important;font-weight:600;}
.site-footer .footer-bottom a:hover{color:#ff7a18 !important;}

/* --- 2. CHROME AUTOFILL --------------------------------------------------
   Chrome paints a white pill over any remembered field, which is why the
   login dialog's inputs stayed white on a dark panel. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:#f4f6f8 !important;
  -webkit-box-shadow:0 0 0 60px #1b1e23 inset !important;
          box-shadow:0 0 0 60px #1b1e23 inset !important;
  caret-color:#f4f6f8 !important;
  border:1px solid #2f343c !important;
  border-radius:10px !important;
  transition:background-color 9999s ease-in-out 0s;
}
input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 60px #1b1e23 inset,0 0 0 3px #ff7a1826 !important;
  border-color:#ff7a18 !important;
}

/* --- 3. LOGIN DIALOG FIELDS ---------------------------------------------- */
#login .modal-content,.modal-body-login{background:#15171b !important;}
#login .form-control,#login input[type=text],#login input[type=email],
#login input[type=password],.modal-body-login input{
  background:#1b1e23 !important;color:#f4f6f8 !important;
  border:1px solid #2f343c !important;border-radius:10px !important;
  box-shadow:none !important;
}
#login .form-control:focus,.modal-body-login input:focus{
  border-color:#ff7a18 !important;box-shadow:0 0 0 3px #ff7a1826 !important;
}
#login .input-group-text,#login .input-group-prepend .input-group-text{
  background:#22262d !important;border:1px solid #2f343c !important;
  color:#9aa3ad !important;border-radius:10px 0 0 10px !important;
}
#login .input-group>.form-control{border-radius:0 10px 10px 0 !important;}
#login a{color:#ff9d4d !important;}
#login .custom-control-label,.modal-body-login label{color:#b7bfc9 !important;}
#login .btn,#login button[type=submit],.modal-body-login .btn-primary{
  background:#ff7a18 !important;border-color:#ff7a18 !important;
  color:#1a0d03 !important;font-weight:700 !important;border-radius:10px !important;
}
#login .btn:hover,.modal-body-login .btn-primary:hover{
  background:#e85d04 !important;border-color:#e85d04 !important;
}

/* --- 4. LOGGED-IN HEADER --------------------------------------------------
   The account menus are Dhru's own <ul class="navbar-nav">. Outside a
   .navbar-expand-lg parent Bootstrap lays .navbar-nav out as a COLUMN, which
   is what stretched the header into a tall empty block after login. */
.header-actions .account-menus{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:6px;margin:0 !important;padding:0 !important;list-style:none;
  width:auto !important;height:auto !important;
}
.header-actions .account-menus>li{
  position:relative;list-style:none;float:none !important;
  width:auto !important;margin:0 !important;
}
/* the mobile duplicates of each menu never belong in the desktop bar */
.header-actions .account-menus>li>a.d-block.d-lg-none,
.header-actions .account-menus>li.d-block.d-lg-none{display:none !important;}
.header-actions .account-menus .nav-link{
  padding:.45rem .7rem !important;color:#dfe5ec !important;
  font-size:13px !important;font-weight:600;white-space:nowrap;
  display:flex;align-items:center;gap:8px;border-radius:10px;
}
.header-actions .account-menus .nav-link:hover{color:#ff9d4d !important;}
.header-actions .account-menus .avatar-img img{
  width:26px;height:26px;border-radius:50%;display:block;
}
.header-actions .account-menus .user-balance{
  font-size:11px;line-height:1.2;margin-top:2px;
}
.header-actions .account-menus .user-balance .text-success,
.header-actions .account-menus .user-balance small{color:#ff9d4d !important;}
.header-actions .account-menus .dropdown-menu{
  position:absolute !important;right:0 !important;left:auto !important;
  top:100% !important;margin-top:8px;min-width:220px;
  background:#15171b !important;border:1px solid #262a31 !important;
  border-radius:12px !important;box-shadow:0 20px 50px #000000a6 !important;
  padding:8px !important;
}
.header-actions .account-menus .dropdown-item{
  color:#b7bfc9 !important;border-radius:8px;padding:.5rem .7rem !important;font-size:13px;
}
.header-actions .account-menus .dropdown-item:hover{
  background:#1f232a !important;color:#fff !important;
}
/* keep the bar itself a normal height whatever Dhru injects */
.site-header .header-row{min-height:0 !important;align-items:center !important;}
.site-header .header-row>*{flex:0 0 auto;}
.site-header .header-row nav{flex:1 1 auto;}

/* --- 5. FOOTER BOTTOM ----------------------------------------------------
   theme.css:2549 sets `.footer-bottom{background:#000;color:white}`, which
   cut a hard black band across the footer. */
.site-footer .footer-bottom,
footer .footer-bottom,
.footer-bottom{
  background:transparent !important;
  color:#8d97a3 !important;
}
.site-footer .footer-bottom{
  border-top:1px solid #2a2f37 !important;
  padding:20px 0 !important;
  display:flex !important;flex-wrap:wrap;gap:10px;
  justify-content:space-between;align-items:center;
  font-size:12.5px !important;
}
.site-footer .footer-bottom span{color:#8d97a3 !important;}
.site-footer .footer-bottom a{color:#ff9d4d !important;font-weight:700;}
.site-footer .footer-bottom a:hover{color:#ff7a18 !important;text-decoration:underline;}

/* the platform's own credit line: inline styles carry !important for colour,
   size and offsets, so only position, flow and background can be reclaimed. */
.cn{
  position:static !important;
  background:transparent !important;
  text-align:center !important;
  width:100% !important;
  margin:0 !important;
  border-top:1px solid #1d2128 !important;
  opacity:.4 !important;
  letter-spacing:.08em;
}
.cn a{text-decoration:none !important;}

/* --- 6. ACCOUNT DROPDOWN MUST STAY CLOSED --------------------------------
   Bootstrap hides .dropdown-menu through .navbar styles that only apply
   inside .navbar-expand-*. Outside that context the menu rendered open and
   spilled over the page, so the closed state is restated here. */
.header-actions .account-menus .dropdown-menu{display:none !important;}
.header-actions .account-menus .dropdown-menu.show,
.header-actions .account-menus .dropdown.show>.dropdown-menu,
.header-actions .account-menus .nav-item.show>.dropdown-menu{display:block !important;}
.header-actions .account-menus .dropdown-toggle{cursor:pointer;}
.header-actions .account-menus .dropdown-menu-right{right:0 !important;left:auto !important;}
.header-actions{position:relative;z-index:60;}
.site-header{z-index:70;}

/* --- 7. NO HOVER LIFT ----------------------------------------------------
   Cards across the ported templates and studio.css all translate on hover,
   so whole sections appeared to jump. The motion is dropped; hover now only
   lights the border. */
.card:hover,.panel:hover,.box:hover,
.product-card:hover,.preview-card:hover,.spotlight-card:hover,
.plan-card:hover,.category-card:hover,.social-card:hover,
.support-contact-card:hover,.contact-pill:hover,
.banner-promo:hover,.banner-slide:hover,
.raaz-card:hover,.gc-card:hover,.hot-service-item:hover,
.card-product:hover,.service-card:hover,.premium-card:hover,
.filter-row:hover,.tool-window:hover,
main .card:hover,main .panel:hover,
[class*="-card"]:hover,[class*="card-"]:hover{
  transform:none !important;
  translate:none !important;
  box-shadow:none !important;
}
/* the light border it gets instead */
.card:hover,.panel:hover,
.product-card:hover,.preview-card:hover,.spotlight-card:hover,
.plan-card:hover,.category-card:hover,.social-card:hover,
.support-contact-card:hover,.contact-pill:hover,
.banner-promo:hover,.raaz-card:hover,.gc-card:hover,
.card-product:hover,.premium-card:hover,
main .card:hover,[class*="-card"]:hover{
  border-color:#3a4049 !important;
  transition:border-color .18s ease !important;
}
/* images inside a card should sit still too */
.product-card:hover img,.banner-promo:hover img,
.raaz-card:hover img,.preview-card:hover img,
[class*="-card"]:hover img{transform:none !important;}

/* --- 8. BANNER GRID HEIGHT ----------------------------------------------
   .banner-carousel is sized by aspect-ratio, but the three promo cards can
   grow past that height on their own text, which stretched the grid row and
   letterboxed the main banner. The column is now bound to the carousel. */
.banner-hero{align-items:stretch !important;}
.banner-promos{height:100% !important;min-height:0 !important;}
.banner-promo{
  min-height:0 !important;
  padding:12px 16px !important;
  overflow:hidden !important;
  justify-content:center;
}
.banner-promo strong{
  font-size:clamp(14px,1.35vw,23px) !important;
  line-height:1.06 !important;
}
.banner-promo small{font-size:8px !important;letter-spacing:.13em !important;}
.banner-promo span.promo-desc{font-size:clamp(9px,.72vw,11px) !important;}
.banner-promo em{font-size:8px !important;margin-top:2px !important;}
.banner-promo-copy{gap:2px !important;}
/* the main banner should fill its frame rather than sit letterboxed */
.banner-slide img{object-fit:cover !important;}

@media (max-width:991px){
  .banner-promos{height:auto !important;}
  .banner-promo{min-height:120px !important;}
}

/* --- 9. RESELLER PRICING / SERVICE LISTS ---------------------------------
   These templates arrived from a light theme and carry ~9 KB of inline CSS
   each (#ffffff surfaces, #4e14b4 purple accents). Remapped here. */
.filter-row,.premium-card{
  background:#15171b !important;
  border:1px solid #262a31 !important;
  color:#f4f6f8 !important;
}
.search-box,.custom-select-ui{
  background:#1b1e23 !important;
  border:1px solid #2f343c !important;
  color:#f4f6f8 !important;
}
.search-box input,.custom-select-ui,.custom-select-ui option{
  background:transparent !important;color:#f4f6f8 !important;
}
.custom-select-ui option{background:#0f1216 !important;}
.search-box input::placeholder{color:#6b737d !important;}
.search-btn-icon{background:#ff7a18 !important;color:#1a0d03 !important;border:0 !important;}
.search-btn-icon:hover{background:#e85d04 !important;}
.custom-check-input{accent-color:#ff7a18 !important;}

/* group header bar */
.custom-header-bg,.custom-header-bg th,.th-price{
  background:#1b1e23 !important;color:#f4f6f8 !important;
  border-color:#262a31 !important;
}
.count-dot{background:#ff7a18 !important;color:#1a0d03 !important;}

/* service rows */
tr.service,tr.service td{background:transparent !important;color:#c9d0d9 !important;}
tr.service:hover,tr.service:hover td{background:#1b1e23 !important;}
tr.service td,.premium-card table td,.premium-card table th{
  border-bottom:1px solid #262a31 !important;
}
.id-tag{
  background:#2a1a0e !important;color:#ffa557 !important;
  border:1px solid #3a2a17 !important;
}
tr.service:hover .id-tag{
  background:#ff7a18 !important;color:#1a0d03 !important;border-color:#ff7a18 !important;
}
.time-text{
  background:#22262d !important;color:#c9d0d9 !important;
  border:1px solid #2f343c !important;
}
.price-text{color:#ff7a18 !important;font-weight:700 !important;}

/* --- 10. LOADER OVERLAY --------------------------------------------------
   #loader is a full-screen fixed transparent div that Dhru shows during AJAX.
   Nothing ever hides it, so it swallowed every click on the page. */
#loader.loader{pointer-events:none !important;}
#loader.loader.show,#loader.loader.active,#loader.loader.d-block{pointer-events:auto !important;}

/* --- 11. PROMO TEXT ALIGNMENT --------------------------------------------
   Section 8 added justify-content:center, which centred the copy on the
   horizontal axis. Column direction keeps it vertically centred but left
   aligned. */
.banner-promo{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:left !important;
  padding:12px 18px !important;
}
.banner-promo-copy{
  align-items:flex-start !important;
  text-align:left !important;
  max-width:70% !important;
}
.banner-promo small,.banner-promo strong,
.banner-promo span.promo-desc,.banner-promo em{text-align:left !important;}

/* --- 12. STUCK PRE-LOADER ------------------------------------------------
   <html> ships with both `no-js` and `js`, so `.no-js.js .page-pre-loader`
   (0,3,0) outranked `.js .page-pre-loader` (0,2,0) and the dimming spinner
   overlay never went away. Belt and braces alongside the template fix. */
html.no-js.js .page-pre-loader,
.no-js.js .page-pre-loader,
.page-pre-loader{display:none !important;}
html.loading .page-pre-loader{display:flex !important;}

/* --- 3b. LOGIN DIALOG + CHROME AUTOFILL ------------------------------------
   Section 3 sets `box-shadow:none !important` on #login inputs. Its ID beats
   the plain `input:-webkit-autofill` rule in section 2, so a remembered email
   or password lost the dark inset and showed Chrome's pale-blue autofill fill
   under white text — unreadable. Repeat the inset with #login specificity. */
#login input:-webkit-autofill,
#login input:-webkit-autofill:hover,
#login input:-webkit-autofill:active,
.modal-body-login input:-webkit-autofill,
.modal-body-login input:-webkit-autofill:hover,
.modal-body-login input:-webkit-autofill:active{
  -webkit-text-fill-color:#f4f6f8 !important;
  -webkit-box-shadow:0 0 0 60px #1b1e23 inset !important;
          box-shadow:0 0 0 60px #1b1e23 inset !important;
  caret-color:#f4f6f8 !important;
  border:1px solid #2f343c !important;
  transition:background-color 9999s ease-in-out 0s;
}
#login input:-webkit-autofill:focus,
.modal-body-login input:-webkit-autofill:focus{
  -webkit-text-fill-color:#f4f6f8 !important;
  -webkit-box-shadow:0 0 0 60px #1b1e23 inset,0 0 0 3px #ff7a1826 !important;
          box-shadow:0 0 0 60px #1b1e23 inset,0 0 0 3px #ff7a1826 !important;
  border-color:#ff7a18 !important;
}

/* --- 4. HEADER MENU HOVER --------------------------------------------------
   theme.css turns a hovered menu link black
   (.header-bottom.header-middle .navbar-expand-lg .navbar-nav .nav-link:hover),
   which out-ranks the white hover in header.tpl — dark text on the grey pill.
   Match its chain and keep the text white on a faint orange wash. */
html body header .header-bottom.header-middle .navbar-expand-lg .navbar-nav .nav-link:hover,
html body header .header-bottom.header-middle .navbar-expand-lg .navbar-nav .nav-link:focus,
html body header .header-bottom.header-middle .navbar-expand-lg .navbar-nav .nav-item:hover > .nav-link,
html body header .navbar-mastermenu .nav-item > .nav-link.dropdown-item:hover,
html body header .navbar-mastermenu .nav-item > .nav-link.dropdown-item:focus{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background-color:rgba(255,122,24,.14) !important;
}

/* --- 5. "YOUR EVERYDAY TOOLKIT" TICKER --------------------------------------
   service-ticker.css paints it pale green on the dark page. */
html body .raaz-ticker-wrap{
  background:#15171b !important;
  border:1px solid #262a31 !important;
}
html body .raaz-ticker-wrap .ticker-label{color:#8b939e !important;}
html body .raaz-ticker-wrap .raaz-ticker-item{color:#9aa3ad !important;}
html body .raaz-ticker-wrap .highlight-text{color:#f4f6f8 !important;}
html body .raaz-ticker-wrap .highlight-dot{color:#ff7a18 !important;}
html body .raaz-ticker-wrap .ticker-toggle{
  background:#22262d !important;border:1px solid #2f343c !important;color:#e8eaee !important;
}
html body .raaz-ticker-wrap .ticker-toggle:hover{
  background:#2a2f37 !important;border-color:#ff7a18 !important;color:#ffffff !important;
}

/* --- 6. ADD-FUNDS FLASH POPUP (.ax-pop, HTML lives in Dhru settings) --------
   Theme link colours carry !important, so every colour here does too — the
   old inline `color:#000` on the WhatsApp button lost to them. */
html body .ax-pop{
  padding:34px 30px 28px !important;text-align:center;
  font-family:Inter,-apple-system,"Segoe UI",sans-serif;color:#e8eaee;
}
html body .ax-pop .ax-pop-icon{
  width:64px;height:64px;margin:0 auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#F3BA2F;color:#15171b !important;font-size:30px;font-weight:800;line-height:1;
}
html body .ax-pop .ax-pop-rate{
  display:inline-block;margin:0 0 14px;padding:6px 14px;border-radius:999px;
  background:rgba(243,186,47,.12);border:1px solid rgba(243,186,47,.4);
  color:#F3BA2F !important;font-size:14px;font-weight:700;letter-spacing:.02em;
}
html body .ax-pop .ax-pop-title{
  margin:0 0 10px;color:#ffffff !important;font-size:22px;font-weight:800;line-height:1.3;
}
html body .ax-pop .ax-pop-text{
  max-width:430px;margin:0 auto 18px;color:#b7bfc9 !important;font-size:15px;line-height:1.65;
}
html body .ax-pop .ax-pop-text strong{color:#F3BA2F !important;font-weight:700;}
html body .ax-pop .ax-pop-warn{
  max-width:430px;margin:0 auto 18px;padding:12px 14px;border-radius:10px;
  background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);
  color:#fca5a5 !important;font-size:14px;font-weight:600;line-height:1.5;
}
html body .ax-pop .ax-pop-methods{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 22px;
}
html body .ax-pop .ax-pop-methods span{
  padding:5px 12px;border-radius:8px;background:#22262d;border:1px solid #2f343c;
  color:#e8eaee !important;font-size:13px;font-weight:600;
}
html body .ax-pop a.ax-pop-cta,
html body .ax-pop a.ax-pop-cta:visited{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;max-width:380px;margin:0 auto;padding:15px 20px;border-radius:12px;
  background:#25D366 !important;color:#052e14 !important;-webkit-text-fill-color:#052e14 !important;
  font-size:16px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;text-decoration:none !important;
  transition:background-color .2s ease,transform .2s ease;
}
html body .ax-pop a.ax-pop-cta:hover,
html body .ax-pop a.ax-pop-cta:focus{
  background:#2ee676 !important;color:#052e14 !important;transform:translateY(-1px);
}
html body .ax-pop a.ax-pop-cta i{font-size:20px;color:inherit !important;}
html body .ax-pop .ax-pop-foot{
  margin:18px 0 0;color:#8b939e !important;font-size:13px;font-weight:500;
}
@media (max-width:575px){
  html body .ax-pop{padding:28px 18px 22px !important;}
  html body .ax-pop .ax-pop-title{font-size:19px;}
  html body .ax-pop a.ax-pop-cta{font-size:14px;padding:14px 16px;}
}

/* Theme paragraph rules left-align p; the popup reads centred. */
html body .ax-pop p,html body .ax-pop h2,html body .ax-pop .ax-pop-text,html body .ax-pop .ax-pop-foot{text-align:center !important;}
html body .ax-pop .ax-pop-text{margin-left:auto !important;margin-right:auto !important;}

/* --- 7. TICKER: label and Pause button removed (the strip pauses on hover). */
html body .raaz-ticker-wrap .ticker-label,
html body .raaz-ticker-wrap .ticker-toggle{display:none !important;}

/* --- 8. "FOR ANY SERVICE, CONTACT US" ----------------------------------------
   Centred heading, a brand-coloured icon per channel, white values. */
html body .support-contacts .support-contact-heading{
  text-align:center !important;margin:0 auto 26px !important;max-width:640px;
}
html body .support-contacts .sc-eyebrow{
  display:inline-block;margin-bottom:10px;padding:4px 12px;border-radius:999px;
  background:rgba(255,122,24,.12);border:1px solid rgba(255,122,24,.35);
  color:#ff9d4d !important;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
html body .support-contacts .support-contact-heading h2{
  margin:0 0 8px !important;color:#ffffff !important;font-size:30px !important;
  font-weight:800 !important;letter-spacing:-.02em;text-align:center !important;
}
html body .support-contacts .support-contact-heading p{
  margin:0 !important;color:#9aa3ad !important;font-size:15px !important;text-align:center !important;
}
html body .support-contacts .support-contact-grid{
  display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px !important;
}
html body .support-contacts a.support-contact-card{
  --sc:#ff7a18;
  display:flex !important;align-items:center;gap:14px;padding:16px 18px !important;
  border-radius:14px !important;background:#15171b !important;border:1px solid #262a31 !important;
  text-decoration:none !important;transition:border-color .2s ease,transform .2s ease,background-color .2s ease;
}
html body .support-contacts a.support-contact-card.sc-wa{--sc:#25D366;}
html body .support-contacts a.support-contact-card.sc-tg{--sc:#2AABEE;}
html body .support-contacts a.support-contact-card.sc-msg{--sc:#A34BFF;}
html body .support-contacts a.support-contact-card:hover,
html body .support-contacts a.support-contact-card:focus-visible{
  border-color:var(--sc) !important;background:#1a1d22 !important;transform:translateY(-2px);
}
html body .support-contacts .sc-icon{
  flex:0 0 46px;width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--sc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--sc) 35%,transparent);
  color:var(--sc) !important;font-size:21px;
}
html body .support-contacts .sc-icon i{color:var(--sc) !important;}
html body .support-contacts .sc-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
html body .support-contacts .sc-body small{
  color:#8b939e !important;font-size:12px !important;font-weight:600;letter-spacing:.02em;
}
html body .support-contacts .sc-body strong{
  color:#f4f6f8 !important;font-size:16px !important;font-weight:700 !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html body .support-contacts .sc-arrow{
  flex:0 0 auto;color:#5c646e !important;font-size:18px;transition:color .2s ease,transform .2s ease;
}
html body .support-contacts a.support-contact-card:hover .sc-arrow{color:var(--sc) !important;transform:translate(2px,-2px);}
@media (max-width:991px){
  html body .support-contacts .support-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:575px){
  html body .support-contacts .support-contact-grid{grid-template-columns:1fr;}
  html body .support-contacts .support-contact-heading h2{font-size:24px !important;}
}

/* --- 9. ORDER PAGE (order style 1): taller service list, smaller text ------
   .col-left only got its parent's height, so the list stopped halfway down
   the screen; give it the viewport instead, and tighten the type. */
@media (min-width:992px){
  html body .col-lg-4.col-left.overflow{
    height:calc(100vh - 130px) !important;
    max-height:calc(100vh - 130px) !important;
    overflow-y:auto !important;
  }
}
html body .col-left .service-list .card{padding:16px 16px 8px !important;margin-bottom:14px !important;}
html body .col-left .service-list .group h4{
  font-size:15px !important;line-height:1.4 !important;font-weight:700 !important;
  padding-bottom:10px !important;letter-spacing:0;
}
html body .col-left .service-list .service .searchme{font-size:13px !important;line-height:1.5 !important;}
html body .col-left .service-list .service .text-muted{font-size:11.5px !important;}
html body .col-left .service-list .service .id-tag-style{font-size:10px !important;padding:1px 5px !important;}
html body .col-left .service-list .service .py-3{padding-top:9px !important;padding-bottom:9px !important;}
html body .col-left .service-list .service .px-4{padding-left:12px !important;padding-right:12px !important;}
html body .col-left .service-list .service .no-wrap{font-size:13px !important;}

/* --- 10. DEFAULT AVATAR ---------------------------------------------------- */
html body .glass-avatar-ring img.profile-img,
html body img.drawer-avatar{background:#1f2329;object-fit:cover;}

/* --- 11. SERVICE INFORMATION ON A DARK PAGE ---------------------------------
   Service descriptions are pasted HTML with inline colours written for a white
   page (#000, #141414, #212529 headings; #0000ff, #800080, #008000 accents).
   Lift them inside the order-page detail panel and service popups only. */
html body :is(.card-servicedetail, .service-information, .modal .service-information){color:#c9ced6 !important;}
html body :is(.card-servicedetail, .service-information) :is(h1,h2,h3,h4,h5,h6,blockquote,p,li,div){color:inherit;}
html body :is(.card-servicedetail, .service-information) :is(h1,h2,h3,h4,h5,h6,strong,b){color:#f4f6f8;}
html body :is(.card-servicedetail, .service-information) blockquote{color:#c9ced6 !important;}

/* Black / near-black text → near-white */
html body :is(.card-servicedetail, .service-information) :is(
  [style*="color: #000000"],[style*="color:#000000"],[style*="color: #000;"],[style*="color:#000;"],
  [style*="color: #141414"],[style*="color:#141414"],[style*="color: #212529"],[style*="color:#212529"],
  [style*="color: #333"],[style*="color:#333"],[style*="color: black"],[style*="color:black"],
  [style*="color: rgb(0, 0, 0)"],[style*="color: rgb(33, 37, 41)"],[style*="color: rgb(20, 20, 20)"]
){color:#f4f6f8 !important;}

/* Dark accents → brighter versions of the same hue */
html body :is(.card-servicedetail, .service-information) :is([style*="color: #0000ff"],[style*="color:#0000ff"],[style*="color: blue"]){color:#7aa7ff !important;}
html body :is(.card-servicedetail, .service-information) :is([style*="color: #800080"],[style*="color:#800080"],[style*="color: purple"]){color:#c792ff !important;}
html body :is(.card-servicedetail, .service-information) :is([style*="color: #008000"],[style*="color:#008000"],[style*="color: green"]){color:#3ddc84 !important;}
html body :is(.card-servicedetail, .service-information) :is([style*="color: #3366ff"],[style*="color:#3366ff"]){color:#7aa7ff !important;}
/* Pure red is harsh and slightly dim on #15171b; a lighter red reads better. */
html body :is(.card-servicedetail, .service-information) :is([style*="color: #ff0000"],[style*="color:#ff0000"],[style*="color: red"]){color:#ff5f5f !important;}

/* Links inside descriptions */
html body :is(.card-servicedetail, .service-information) a{color:#ff9d4d !important;text-decoration:underline;}

/* --- 12. ORDER PAGES: breathing room under the header ------------------ */
html body .card.card-search{margin-top:18px !important;}
@media (max-width:991px){html body .card.card-search{margin-top:12px !important;}}

/* --- 13. ACCOUNT BUTTON + PROFILE DROPDOWN ----------------------------------
   Was purple/magenta/cyan; now the site's dark surfaces with the orange accent.
   menu-profile.tpl's own <style> sits later in the page, hence !important. */
html body .profile-wrapper .glass-profile-btn{
  background:#15171b !important;border:1px solid #2f343c !important;border-radius:12px !important;
}
html body .profile-wrapper .glass-profile-btn:hover,
html body .profile-wrapper .glass-profile-btn[aria-expanded="true"]{
  background:#1b1e23 !important;border-color:#ff7a18 !important;box-shadow:none !important;
}
html body .profile-wrapper .glass-avatar-ring{background:#ff7a18 !important;border-color:#ff7a18 !important;}
html body .profile-wrapper .glass-name{color:#f4f6f8 !important;}
html body .profile-wrapper .glass-badge{
  background:rgba(255,122,24,.14) !important;border:1px solid rgba(255,122,24,.4) !important;
  color:#ff9d4d !important;
}
html body .profile-wrapper .glass-balance{color:#3ddc84 !important;}
html body .profile-wrapper .glass-chevron{color:#9aa3ad !important;}
html body .profile-wrapper .glass-add-funds-btn{background:#ff7a18 !important;color:#1a0d03 !important;box-shadow:none !important;}
html body .profile-wrapper .glass-add-funds-btn:hover{background:#ff9d4d !important;color:#1a0d03 !important;}

/* Dropdown panel */
html body .profile-wrapper .modern-glass-menu{
  width:300px !important;padding:0 !important;overflow:hidden;
  background:#15171b !important;border:1px solid #2a2f37 !important;border-radius:14px !important;
  box-shadow:0 18px 40px rgba(0,0,0,.45) !important;
}
html body .profile-wrapper .modern-glass-menu .menu-header{
  background:linear-gradient(180deg,#1d2026 0%,#15171b 100%) !important;
  border-bottom:1px solid #262a31 !important;padding:16px 16px 14px !important;
}
html body .profile-wrapper .header-name{color:#ffffff !important;letter-spacing:-.3px !important;}
html body .profile-wrapper .header-email{color:#8b939e !important;}
html body .profile-wrapper .glass-balance-card{
  background:#1f2329 !important;border:1px solid #2f343c !important;border-radius:12px !important;
  padding:12px 14px !important;
}
html body .profile-wrapper .gb-label{color:#8b939e !important;letter-spacing:.08em;}
html body .profile-wrapper .gb-amount{color:#ffffff !important;font-size:1.25rem !important;}
html body .profile-wrapper .gb-topup-btn{
  background:#ff7a18 !important;border:1px solid #ff7a18 !important;color:#1a0d03 !important;
  font-weight:700 !important;border-radius:9px !important;
}
html body .profile-wrapper .gb-topup-btn:hover{background:#ff9d4d !important;border-color:#ff9d4d !important;color:#1a0d03 !important;}

/* Menu list */
html body .profile-wrapper .menu-scroll-area{padding:8px 8px 10px !important;}
html body .profile-wrapper .menu-label{color:#6b737d !important;letter-spacing:.12em !important;}
html body .profile-wrapper .modern-link{
  height:38px !important;padding:6px 10px !important;border-radius:9px !important;
  color:#d7dbe0 !important;font-size:13.5px !important;
}
html body .profile-wrapper .modern-link .icon-box{
  width:28px !important;height:28px;margin-right:10px !important;border-radius:8px;
  background:#1f2329;color:#9aa3ad !important;font-size:13px !important;
}
html body .profile-wrapper .modern-link:hover{
  background:rgba(255,122,24,.1) !important;color:#ffffff !important;padding-left:10px !important;
}
html body .profile-wrapper .modern-link:hover .icon-box{background:rgba(255,122,24,.18);color:#ff9d4d !important;}
html body .profile-wrapper .menu-divider{background:#262a31 !important;border-color:#262a31 !important;}
html body .profile-wrapper .last-login-wrap{height:auto !important;padding:10px !important;}
html body .profile-wrapper .last-login-wrap:hover{background:#1b1e23 !important;}
html body .profile-wrapper .last-login-wrap .ll-label{color:#d7dbe0 !important;}
html body .profile-wrapper .last-login-wrap .ll-date{color:#8b939e !important;}
html body .profile-wrapper .last-login-wrap .ll-ip{background:#1f2329 !important;color:#9aa3ad !important;border-radius:6px;}

/* Footer */
html body .profile-wrapper .menu-footer{background:#15171b !important;border-top:1px solid #262a31 !important;padding:10px !important;}
html body .profile-wrapper .modern-logout-btn{
  display:flex !important;align-items:center;justify-content:center;gap:8px;
  background:rgba(239,68,68,.1) !important;border:1px solid rgba(239,68,68,.35) !important;
  color:#fca5a5 !important;border-radius:10px !important;font-weight:700 !important;
}
html body .profile-wrapper .modern-logout-btn:hover{background:#ef4444 !important;border-color:#ef4444 !important;color:#ffffff !important;}
html body .profile-wrapper .menu-scroll-area::-webkit-scrollbar-thumb{background:#ff7a18 !important;}

/* --- 14. PROFILE DROPDOWN: LAST-LOGIN CARD ---------------------------------- */
html body .profile-wrapper .modern-link.last-login-wrap{
  display:flex !important;align-items:center;gap:10px;height:auto !important;
  margin:6px 2px 2px !important;padding:10px 12px !important;
  background:#1b1e23 !important;border:1px solid #262a31;border-radius:11px !important;
}
html body .profile-wrapper .modern-link.last-login-wrap:hover{
  background:#1f2329 !important;border-color:rgba(255,122,24,.45);padding-left:12px !important;
}
html body .profile-wrapper .last-login-wrap .ll-icon{
  flex:0 0 30px;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,122,24,.14);color:#ff9d4d !important;font-size:13px;
}
html body .profile-wrapper .last-login-wrap .ll-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;line-height:1.2;}
html body .profile-wrapper .last-login-wrap .ll-label{
  font-size:10.5px !important;font-weight:700 !important;letter-spacing:.08em;text-transform:uppercase;color:#8b939e !important;
}
html body .profile-wrapper .last-login-wrap .ll-date{font-size:13px !important;font-weight:600;color:#f4f6f8 !important;}
html body .profile-wrapper .last-login-wrap .ll-ip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:4px 8px !important;
  background:#15171b !important;border:1px solid #2f343c;border-radius:7px !important;
  font:600 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace !important;color:#b7bfc9 !important;
}
html body .profile-wrapper .last-login-wrap .ll-ip i{color:#6b737d;font-size:10px;}

/* --- 15. CLIENT DASHBOARD: orange actions instead of purple ---------------- */
html body .buy-cred-btn,
html body .unpaid-btns-mob a.btn:not(.view-btn-mob),
html body .alert-card a.btn.btn-dark{
  background:#ff7a18 !important;border:1px solid #ff7a18 !important;color:#1a0d03 !important;
  box-shadow:none !important;backdrop-filter:none !important;font-weight:700 !important;
}
html body .buy-cred-btn:hover,
html body .unpaid-btns-mob a.btn:not(.view-btn-mob):hover,
html body .alert-card a.btn.btn-dark:hover{
  background:#ff9d4d !important;border-color:#ff9d4d !important;color:#1a0d03 !important;transform:translateY(-1px);
}
html body .buy-cred-btn i{color:#1a0d03 !important;}
html body .unpaid-btns-mob a.btn.view-btn-mob{
  background:transparent !important;border:1px solid #ff7a18 !important;color:#ff9d4d !important;box-shadow:none !important;
}
html body .unpaid-btns-mob a.btn.view-btn-mob:hover{background:#ff7a18 !important;color:#1a0d03 !important;}
html body .alert-icon-circle.info{background:#ff7a18 !important;color:#1a0d03 !important;}
html body .border-left-info{border-left-color:#ff7a18 !important;}

/* --- 16. NEWS & UPDATES: say so when there is nothing to show --------------
   The list is filled by AJAX from tbl_quick_news, which is empty; without
   this the card is just a blank panel. */
html body .announcement-scroll-area:not(:has(> :not(script)))::before{
  content:"No news yet. Updates from the AnyUnlocker team will appear here.";
  display:flex;align-items:center;justify-content:center;height:100%;min-height:160px;padding:24px;
  text-align:center;color:#8b939e;font-size:14px;line-height:1.6;
}

/* --- 17. PAGE SCROLLBAR HIDDEN -----------------------------------------------
   The page still scrolls (wheel, touch, keys); the back-to-top ring shows
   where you are instead. Inner scroll areas keep their own bars. */
html{scrollbar-width:none;}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0 !important;height:0 !important;display:none;}

/* --- 18. BACK-TO-TOP WITH SCROLL-PROGRESS RING ----------------------------- */
html body .back-top{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:50px !important;height:50px !important;padding:0;border:0 !important;border-radius:50% !important;
  background:#15171b !important;color:#ff9d4d !important;box-shadow:0 8px 20px rgba(0,0,0,.4) !important;
  cursor:pointer;transition:background-color .2s ease,transform .2s ease;
}
html body .back-top:not([hidden]){display:grid !important;place-items:center;}
html body .back-top .bt-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
html body .back-top .bt-ring circle{fill:none;stroke-width:3;}
html body .back-top .bt-track{stroke:#2a2f37;}
html body .back-top .bt-progress{stroke:#ff7a18;stroke-linecap:round;transition:stroke-dashoffset .12s linear;}
html body .back-top .bt-arrow{position:relative;font-size:19px;font-weight:700;line-height:1;}
html body .back-top:hover,html body .back-top:focus-visible{background:#ff7a18 !important;color:#1a0d03 !important;transform:translateY(-2px);}
html body .back-top:hover .bt-track{stroke:#ff9d4d;}
html body .back-top:hover .bt-progress{stroke:#1a0d03;}
@media (max-width:700px){html body .back-top{right:14px;bottom:14px;width:44px !important;height:44px !important;}}
@media (prefers-reduced-motion:reduce){html body .back-top .bt-progress{transition:none;}}

/* --- 19. GEAR MENU: order-style picker in site colours (was purple/cyan). */
html body .dropdown-menu .custom-theme-box{background:#1f2329 !important;border:2px solid #2f343c !important;box-shadow:none !important;}
html body .dropdown-menu .custom-theme-box:hover{border-color:#ff9d4d !important;box-shadow:none !important;}
html body .dropdown-menu .custom-theme-box.active{border-color:#ff7a18 !important;background:rgba(255,122,24,.12) !important;box-shadow:0 0 0 3px rgba(255,122,24,.18) !important;}
html body .dropdown-menu .custom-theme-box img{opacity:.85;}
html body .dropdown-menu .custom-theme-box.active img{opacity:1;}