/* =============================================================================
   ServerSpark — WHMCS ↔ Playhost bridge
   =============================================================================
   WHMCS's markup is Bootstrap 4; the site is Bootstrap 5. Loading both breaks
   forms, modals, tables and the cart, so instead this sheet restyles WHMCS's
   BS4 components to match the Playhost design.

   Brand values are taken verbatim from the live site:
     page      #1E1F22   (--bg-dark-1)
     panel     #252629   (--bg-dark-2)
     body text #ADB7BE   (--dark-body-font-color)
     accent    #E89123   (--primary-color)
     body font Manrope   title font Oxanium
   ========================================================================== */

:root {
  --ss-bg-1: #1E1F22;
  --ss-bg-2: #252629;
  --ss-line: rgba(255,255,255,.10);
  --ss-text: #ADB7BE;
  --ss-heading: #ffffff;
}

/* ---------- page shell ---------------------------------------------------- */
body.dark-scheme,
body.primary-bg-color {
  background: var(--ss-bg-1) !important;
  color: var(--ss-text);
  font-family: var(--body-font, "Manrope", Helvetica, Arial, sans-serif);
}
#main-body { padding: 40px 0 80px; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: var(--title-font, "Oxanium", Helvetica, Arial, sans-serif);
  color: var(--ss-heading);
}
a { color: var(--primary-color, #E89123); }
a:hover { color: var(--secondary-color, #C9791F); }
hr { border-color: var(--ss-line); }

/* ---------- header --------------------------------------------------------
   header.transparent is Playhost's own component and style.css handles it.
   Only the bits that differ inside WHMCS are set here. */
#header.transparent { position: relative; }
#header .logo-mobile { display: none; }

.ss-topbar {
  background: rgba(0,0,0,.28);
  border-bottom: 1px solid var(--ss-line);
  font-size: 13px; padding: 6px 0; margin: -14px 0 14px;
}
.ss-topbar a, .ss-topbar-btn { color: var(--ss-text); text-decoration: none; }
.ss-topbar a:hover { color: var(--primary-color, #E89123); }
.ss-topbar-account > a { margin-left: 10px; }
.ss-topbar-account > a:first-of-type { color: #fff; font-weight: 600; }

/* main menu — Playhost markup, so most styling comes from style.css.
   These only fix what changes when the menu sits in WHMCS. */
#mainmenu { margin-bottom: 0; }
#mainmenu li.ss-secondary-nav > a { opacity: .85; }
.menu_side_area .ss-cart { white-space: nowrap; }

/* mobile menu (our stand-in JS toggles body.menu-open) */
@media (max-width: 992px) {
  #mainmenu { display: none; }
  body.menu-open #mainmenu {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ss-bg-2); padding: 10px 20px;
    border-top: 1px solid var(--ss-line);
    max-height: 70vh; overflow-y: auto;
  }
  #mainmenu li > ul { display: none; }
  #mainmenu li.open > ul { display: block; padding-left: 14px; }
}

/* ---------- #subheader ----------------------------------------------------
   Same page-title band the site uses. The site animates the image with
   jarallax; we use a plain cover background to the same visual effect. */
#subheader.ss-subheader {
  padding: 150px 0 90px;
  position: relative;
  /* Same treatment as the homepage hero (.swiper-inner in serverspark.css):
     nebula photo + the amber radial + the navy wash, in that order. This is
     the client panel wearing the HOMEPAGE's styling, not the inner-page band. */
  background-image:
    linear-gradient(135deg, rgba(18,23,42,.72) 0%, rgba(27,36,64,.62) 55%, rgba(36,27,16,.60) 100%),
    radial-gradient(1100px 600px at 78% -8%, rgba(240,168,60,.28), transparent 55%),
    url("../images/background/nebula.webp");
  background-size: cover, cover, cover;
  background-position: center, center, center;
}
/* the homepage's faint grid overlay, masked out toward the bottom */
#subheader.ss-subheader::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 78%);
}
#subheader.ss-subheader .container { position: relative; z-index: 2; }
#subheader.ss-subheader .subtitle {
  color: var(--primary-color, #E89123);
  text-transform: uppercase; letter-spacing: .2em; font-size: 13px; font-weight: 700;
}
#subheader.ss-subheader h2 {
  color: #fff;
  font-size: clamp(34px, 5vw, 60px);
  letter-spacing: -.03em; line-height: 1.05;
}
.master-breadcrumb .breadcrumb { background: none; padding: 0; margin: 0; font-size: 13px; }
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a { color: var(--ss-text); }
.master-breadcrumb .breadcrumb-item.active { color: var(--primary-color, #E89123); }
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.3); }

/* ---------- panels / cards ------------------------------------------------ */
.card, .panel, .well, .list-group-item, .modal-content, .tab-content {
  background: var(--ss-bg-2);
  border: 1px solid var(--ss-line);
  border-radius: 10px;
  color: var(--ss-text);
}
.card-header, .panel-heading, .modal-header, .modal-footer {
  background: rgba(255,255,255,.03);
  border-color: var(--ss-line);
  color: #fff;
  font-family: var(--title-font, "Oxanium", sans-serif);
}
.card-footer { background: rgba(255,255,255,.02); border-color: var(--ss-line); }
.card-title, .panel-title { color: #fff; }

/* ---------- buttons ------------------------------------------------------- */
.btn {
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: box-shadow .2s ease, background .2s ease, transform .15s ease;
}
.btn-primary, .btn-success, .modal-submit {
  background: var(--primary-color, #E89123);
  border-color: var(--primary-color, #E89123);
  color: #17110A;
}
.btn-primary:hover, .btn-success:hover, .modal-submit:hover {
  background: var(--secondary-color, #C9791F);
  border-color: var(--secondary-color, #C9791F);
  color: #17110A;
  box-shadow: 2px 2px 20px 0 rgba(var(--primary-color-rgb, 232,145,35), .5);
}
.btn-default, .btn-secondary {
  background: rgba(255,255,255,.07);
  border-color: var(--ss-line);
  color: #fff;
}
.btn-default:hover, .btn-secondary:hover { background: rgba(255,255,255,.14); color: #fff; }
.btn-link { color: var(--primary-color, #E89123); }

/* ---------- light-background utilities ------------------------------------
   WHMCS's markup hardcodes .bg-white / .bg-light in several places (the domain
   search band on the homepage is `home-domain-search bg-white`). On a dark
   portal these punch a white hole through the page — and because the inputs
   are styled with a translucent black, they came out grey on white instead of
   dark. Neutralise them; the portal has no light surfaces. */
.bg-white, .bg-light {
  background-color: var(--ss-bg-2) !important;
  color: var(--ss-text) !important;
}
.home-domain-search { border-top: 1px solid var(--ss-line); border-bottom: 1px solid var(--ss-line); }
.home-domain-search h2, .home-domain-search h3, .bg-white h2, .bg-white h3 { color: #fff !important; }
.text-dark { color: var(--ss-text) !important; }

/* ---------- outline buttons ----------------------------------------------
   BS5's .btn-outline-primary is its own blue, not ours. */
.btn-outline-primary {
  color: var(--primary-color, #E89123);
  border-color: var(--primary-color, #E89123);
  background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: var(--primary-color, #E89123);
  border-color: var(--primary-color, #E89123);
  color: #17110A;
}
.btn-outline-secondary { color: var(--ss-text); border-color: var(--ss-line); }
.btn-outline-secondary:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ---------- forms --------------------------------------------------------- */
.form-control, .custom-select, select, textarea, input[type="text"],
input[type="email"], input[type="password"], input[type="number"] {
  background: rgba(0,0,0,.28);
  border: 1px solid var(--ss-line);
  color: #fff;
  border-radius: 6px;
}
.form-control:focus, select:focus, textarea:focus {
  background: rgba(0,0,0,.35);
  border-color: var(--primary-color, #E89123);
  color: #fff;
  box-shadow: 0 0 0 .18rem rgba(var(--primary-color-rgb, 232,145,35), .22);
}
.form-control::placeholder { color: rgba(173,183,190,.55); }
.input-group-text {
  background: rgba(255,255,255,.06);
  border-color: var(--ss-line);
  color: var(--ss-text);
}
label, .col-form-label { color: #fff; }
.form-text, .help-block, small { color: rgba(173,183,190,.8); }

/* ---------- tables -------------------------------------------------------- */
.table { color: var(--ss-text); }
.table thead th {
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--ss-line);
  color: #fff;
  font-family: var(--title-font, "Oxanium", sans-serif);
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
.table td, .table th { border-color: var(--ss-line); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02); }
.table-hover tbody tr:hover { background: rgba(232,145,35,.07); color: #fff; }

/* ---------- alerts / badges ---------------------------------------------- */
.alert { border-radius: 8px; border-width: 1px; background: var(--ss-bg-2); color: var(--ss-text); }
.alert-success { border-color: rgba(63,191,127,.5); }
.alert-danger  { border-color: rgba(226,84,84,.5); }
.alert-warning { border-color: rgba(232,145,35,.5); }
.alert-info    { border-color: rgba(78,155,230,.5); }
.badge-info, .badge-primary { background: var(--primary-color, #E89123); color: #17110A; }

/* ---------- sidebar ------------------------------------------------------- */
.sidebar .list-group-item {
  background: var(--ss-bg-2);
  border-color: var(--ss-line);
  color: var(--ss-text);
}
.sidebar .list-group-item.active,
.sidebar .list-group-item:hover {
  background: rgba(232,145,35,.12);
  border-color: rgba(232,145,35,.4);
  color: #fff;
}
.sidebar .panel-heading, .sidebar .card-header { color: #fff; }

/* ---------- tabs / pagination -------------------------------------------- */
.nav-tabs { border-bottom-color: var(--ss-line); }
.nav-tabs .nav-link { color: var(--ss-text); border: none; }
.nav-tabs .nav-link.active {
  background: none; color: #fff;
  border-bottom: 2px solid var(--primary-color, #E89123);
}
.page-link { background: var(--ss-bg-2); border-color: var(--ss-line); color: var(--ss-text); }
.page-item.active .page-link {
  background: var(--primary-color, #E89123);
  border-color: var(--primary-color, #E89123);
  color: #17110A;
}

/* ---------- footer -------------------------------------------------------- */
#footer { background: var(--ss-bg-2); border-top: 1px solid var(--ss-line); padding-top: 60px; }
#footer, #footer p, #footer a { color: var(--ss-text); }
#footer h5 { color: #fff; margin-bottom: 16px; }
#footer a:hover { color: var(--primary-color, #E89123); }
#footer .widget ul { list-style: none; padding: 0; }
#footer .widget ul li { padding: 4px 0; }
#footer .subfooter {
  border-top: 1px solid var(--ss-line);
  margin-top: 40px; padding: 22px 0; font-size: 14px;
}
#footer .menu-simple { list-style: none; padding: 0; margin: 0; }
#footer .menu-simple li { display: inline-block; margin-left: 18px; }

/* ---------- shopping cart ------------------------------------------------- */
.cart-sidebar, .order-summary, #order-standard_cart .product,
#order-standard_cart .products .product {
  background: var(--ss-bg-2);
  border: 1px solid var(--ss-line);
  border-radius: 10px;
  color: var(--ss-text);
}
#order-standard_cart .product h3, #order-standard_cart .product .price { color: #fff; }
#order-standard_cart .product.selected, #order-standard_cart .product:hover {
  border-color: rgba(232,145,35,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ---------- misc ---------------------------------------------------------- */
.popover, .dropdown-menu {
  background: var(--ss-bg-2);
  border: 1px solid var(--ss-line);
  color: var(--ss-text);
}
.dropdown-item { color: var(--ss-text); }
.dropdown-item:hover { background: rgba(232,145,35,.12); color: #fff; }
.close { color: #fff; text-shadow: none; opacity: .7; }
.close:hover { color: var(--primary-color, #E89123); opacity: 1; }

/* ---------- logo ---------------------------------------------------------
   SVG wordmark needs an explicit height or it collapses in the flex header. */
#logo .logo-main { height: 42px; width: auto; max-width: none; }
#logo .logo-mobile { display: none; }
@media (max-width: 992px) {
  #logo .logo-main { display: none; }
  #logo .logo-mobile { display: inline-block; height: 38px; width: auto; }
}

/* =============================================================================
   WHMCS component styles orphaned by dropping theme.min.css
   =============================================================================
   These are WHMCS's OWN classes (not Bootstrap's). They were defined in
   theme.min.css, which we no longer load, so without this block they render
   unstyled — or worse, visible. Counted across this theme's .tpl files:
     w-hidden 46, field-icon 17, field 17, prepend-icon 16,
     toggle-switch-success 3, no-icheck 3, password-strength-meter 2,
     client-alerts 1, btn-sm-block 1
   ========================================================================== */

/* w-hidden is WHMCS's "hide this" utility. Without it, 46 elements that are
   supposed to be hidden — validation alerts, notification popovers, the
   full-page overlay — render as stray empty boxes. This one matters most. */
.w-hidden { display: none !important; }

/* .field is WHMCS's input class; many inputs carry it INSTEAD of .form-control
   (e.g. both password fields on register), so they need the same treatment. */
.field {
  display: block; width: 100%;
  padding: .375rem .75rem;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--ss-line);
  color: #fff;
  border-radius: 6px;
  line-height: 1.5;
}
.field:focus {
  background: rgba(0,0,0,.35);
  border-color: var(--primary-color, #E89123);
  color: #fff; outline: 0;
  box-shadow: 0 0 0 .18rem rgba(var(--primary-color-rgb, 232,145,35), .22);
}
.field::placeholder { color: rgba(173,183,190,.55); }

/* Icon-prefixed fields: the icon is an absolutely-positioned <label> overlaying
   the input's left padding. Without this the icons stack ABOVE each field. */
.form-group.prepend-icon { position: relative; }
.form-group.prepend-icon .field-icon {
  position: absolute; left: 0; top: 0;
  width: 42px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  margin: 0; z-index: 2; pointer-events: none;
  color: rgba(173,183,190,.75);
}
.form-group.prepend-icon .field,
.form-group.prepend-icon .form-control { padding-left: 42px; }
.form-group { margin-bottom: 1rem; }

/* bootstrap-switch — markup is generated by WHMCS's scripts.min.js at runtime,
   so it exists only in the rendered DOM, not in any .tpl. */
.bootstrap-switch {
  display: inline-block; position: relative; overflow: hidden;
  vertical-align: middle; cursor: pointer;
  border: 1px solid var(--ss-line); border-radius: 6px;
  line-height: 1.4;
}
.bootstrap-switch .bootstrap-switch-container {
  display: inline-flex; transform: translate3d(0,0,0); border-radius: 5px;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 12px; font-size: 13px; font-weight: 600;
  white-space: nowrap;           /* stops "Yes" wrapping to "Ye/s" */
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
  background: #3FBF7F; color: #0B1F14;
}
.bootstrap-switch .bootstrap-switch-handle-off {
  background: rgba(255,255,255,.08); color: var(--ss-text);
}
.bootstrap-switch .bootstrap-switch-label { background: var(--ss-bg-2); color: var(--ss-text); }
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container { transition: margin-left .25s ease; }

/* password strength meter */
.password-strength-meter .progress {
  height: 8px; background: rgba(255,255,255,.08);
  border-radius: 4px; overflow: hidden;
}
.password-strength-meter .progress-bar { transition: width .3s ease; }

.btn-sm-block { display: inline-block; }
@media (max-width: 576px) { .btn-sm-block { display: block; width: 100%; } }

.client-alerts { list-style: none; padding: 0; margin: 0; }
.client-alerts li { padding: 8px 12px; border-bottom: 1px solid var(--ss-line); }
.client-alerts li:last-child { border-bottom: none; }

.logo-img { max-height: 42px; width: auto; }

/* all.min.css ships its own .bootstrap-switch-label (white). Beat it on
   specificity rather than load order. */
.bootstrap-switch .bootstrap-switch-container .bootstrap-switch-label {
  background: var(--ss-bg-2) !important;
  color: var(--ss-text) !important;
  border: none !important;
}
.bootstrap-switch .bootstrap-switch-container .bootstrap-switch-handle-off {
  background: rgba(255,255,255,.08) !important;
  color: var(--ss-text) !important;
}

/* Bootstrap 5 defaults that survive everything above because the cart marks
   them up directly: the checkout CTA is .btn-success (BS5 green) and the active
   cart sidebar item is .list-group-item.active (BS5 blue). */
.btn-success, .btn-checkout, #checkout {
  background-color: var(--primary-color, #E89123) !important;
  border-color: var(--primary-color, #E89123) !important;
  color: #17110A !important;
}
.btn-success:hover, .btn-checkout:hover, #checkout:hover {
  background-color: var(--secondary-color, #C9791F) !important;
  border-color: var(--secondary-color, #C9791F) !important;
}
.list-group-item.active, .list-group-item-action.active {
  background-color: rgba(232,145,35,.15) !important;
  border-color: rgba(232,145,35,.45) !important;
  color: #fff !important;
}
.order-summary .summary-container, .order-summary h3, .order-summary .panel-heading {
  background-color: rgba(255,255,255,.05) !important;
  color: #fff !important;
}
hr { border-top-color: var(--ss-line) !important; }

/* card-accent-* are WHMCS's per-tile accent stripes (gold/green/red/blue/teal/
   pomegranate/sun-flower/asbestos/midnight-blue...). They set the colour via a
   `border-top: 3px solid #xxx` SHORTHAND, which slips past the generator's
   colour strip (that only matches border-*-color). Left alone they render as a
   random rainbow above the homepage tiles. One brand colour instead. */
[class*="card-accent-"] { border-top-color: var(--primary-color, #E89123) !important; }

/* Domain search row: the TLD/length dropdowns, "Safe Search" checkbox and the
   Search/Transfer buttons are laid out in one input-group and collide at
   desktop widths. Let it wrap and give the field room. */
.home-domain-search .input-group,
.home-domain-search .input-group-wrapper {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  justify-content: center;
}
.home-domain-search .input-group > .form-control,
.home-domain-search input[type="text"] { flex: 1 1 320px; min-width: 260px; }
.home-domain-search .multiselect { flex: 0 0 auto; }
.home-domain-search label { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 0 0; white-space: nowrap; }
.home-domain-search .btn { flex: 0 0 auto; }

/* ---------- portal home ---------------------------------------------------
   Section rhythm to match serverspark.nl, plus the help tiles used by
   homepage.tpl (a lighter component than the product boxes above them). */
#main-body section { padding: 70px 0; }
#main-body section.no-top { padding-top: 0; }
#main-body section .subtitle {
  color: var(--primary-color, #E89123);
  text-transform: uppercase; letter-spacing: .2em;
  font-size: 13px; font-weight: 700;
}
#main-body section h2 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.01em; }
#main-body section img.mb20 { max-height: 74px; width: auto; }
#main-body section h4 { margin-bottom: .5rem; }

.ss-help-tile {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 30px 18px;
  background: var(--ss-bg-2);
  border: 1px solid var(--ss-line);
  border-radius: 12px;
  color: var(--ss-text) !important;
  text-decoration: none !important;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.ss-help-tile i { font-size: 26px; color: var(--primary-color, #E89123); }
.ss-help-tile span { font-weight: 600; }
.ss-help-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(232,145,35,.45);
  background: rgba(232,145,35,.06);
  color: #fff !important;
}