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