/* *****************************************************

    ** CoreV Studio brand skin — WHMCS "Six" theme **

    Scope: dark chrome (header, nav, hero, footer) + peach/gold
    accents + Montserrat/Bebas type. Content panels, forms, tables
    and invoices stay light for readability.

    Selectors mirror Six's own (section#header, ul.top-nav, etc.)
    so this file — which loads last — wins on source order.
    Only this file is customized; no core theme files are touched.
    Brand tokens mirror corevstudio.com.

***************************************************** */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700&display=swap');

:root {
  --corev-navy:        #182030; /* dark chrome background */
  --corev-navy-2:      #1e2838; /* slightly lifted panel / hero */
  --corev-navy-3:      #26324a; /* hover surfaces on dark */
  --corev-peach:       #F3B56F; /* primary accent */
  --corev-peach-light: #F7CBA0;
  --corev-peach-hover: #eca752;
  --corev-gold-dark:   #9c5c14; /* accessible link color on white */
  --corev-ink:         #E8E8E0; /* light text on dark chrome */
  --corev-muted:       #9aa4b2; /* muted light text */
  --corev-border:      rgba(255,255,255,.09);
}

/* ============================================================
   1. Base type
   ============================================================ */
body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
h1, h2, h3, .h1, .h2, .h3 {
  font-family: 'Bebas Neue', 'Montserrat', sans-serif;
  letter-spacing: .02em;
  font-weight: 400;
}
h4, h5, h6, .h4, .h5, .h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

/* Content links (on light backgrounds) — bronze for contrast */
#main-body a:not(.btn) {
  color: var(--corev-gold-dark);
}
#main-body a:not(.btn):hover,
#main-body a:not(.btn):focus {
  color: var(--corev-navy);
}

/* ============================================================
   2. Header (logo bar + top nav)
   ============================================================ */
section#header {
  background-color: var(--corev-navy);
}
section#header .logo-text {
  color: #fff;
}
section#header .logo img {
  max-height: 50px;
  width: auto;
}
/* Top-nav links */
ul.top-nav > li > a {
  color: var(--corev-ink);
}
ul.top-nav > li:hover > a,
ul.top-nav > li:focus > a,
ul.top-nav > li > a:focus {
  color: var(--corev-peach);
}
/* Primary action pill (View Cart / Logout) */
ul.top-nav > li.primary-action > a.btn {
  background-color: var(--corev-peach);
  border-color: var(--corev-peach);
  color: var(--corev-navy);
  font-weight: 600;
}
ul.top-nav > li.primary-action > a.btn:hover,
ul.top-nav > li.primary-action > a.btn:focus {
  background-color: var(--corev-peach-hover);
  border-color: var(--corev-peach-hover);
  color: var(--corev-navy);
}

/* ============================================================
   3. Main navigation
   ============================================================ */
section#main-menu {
  background-color: var(--corev-navy);
}
section#main-menu .navbar-default,
.navbar-default.navbar-main {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--corev-border);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.navbar-default .navbar-nav > li > a {
  color: var(--corev-ink);
  font-weight: 500;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--corev-peach);
  background: rgba(255,255,255,.05);
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: var(--corev-peach);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 -2px 0 var(--corev-peach);
}
/* Dropdown menus off the dark nav */
.navbar-default .dropdown-menu {
  background: var(--corev-navy-2);
  border: 1px solid var(--corev-border);
}
.navbar-default .dropdown-menu > li > a {
  color: var(--corev-ink);
}
.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .dropdown-menu > li > a:focus {
  background: var(--corev-navy-3);
  color: var(--corev-peach);
}
/* Mobile toggle */
.navbar-default .navbar-toggle {
  border-color: rgba(255,255,255,.2);
}
.navbar-default .navbar-toggle .icon-bar {
  background: var(--corev-ink);
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background: rgba(255,255,255,.08);
}

/* ============================================================
   4. Homepage hero + shortcuts
   ============================================================ */
section#home-banner {
  background: linear-gradient(160deg, var(--corev-navy) 0%, var(--corev-navy-2) 100%);
  color: #fff;
}
section#home-banner h2 {
  color: #fff;
  font-size: 2.6rem;
}
/* Hero search = primary CTA (peach) */
section#home-banner .btn.search {
  background-color: var(--corev-peach);
  border-color: var(--corev-peach);
  color: var(--corev-navy);
  font-weight: 600;
}
section#home-banner .btn.search:hover,
section#home-banner .btn.search:focus {
  background-color: var(--corev-peach-hover);
  border-color: var(--corev-peach-hover);
  color: var(--corev-navy);
}
/* Hero transfer = secondary CTA (ghost/outline) */
section#home-banner .btn.transfer {
  background-color: transparent;
  border-color: var(--corev-peach);
  color: var(--corev-peach);
  font-weight: 600;
}
section#home-banner .btn.transfer:hover,
section#home-banner .btn.transfer:focus {
  background-color: rgba(243,181,111,.14);
  border-color: var(--corev-peach);
  color: var(--corev-peach-light);
}
/* Quick-link shortcut bar */
.home-shortcuts {
  background: var(--corev-navy-2);
  border-top: 1px solid var(--corev-border);
}
.home-shortcuts .lead,
.home-shortcuts li a p {
  color: var(--corev-ink);
}
.home-shortcuts li a i {
  color: var(--corev-peach);
}
.home-shortcuts li a span {
  color: var(--corev-peach);
}
.home-shortcuts li a:hover p {
  color: var(--corev-peach);
}

/* ============================================================
   5. Buttons + accents (content area)
   ============================================================ */
.btn-primary,
.modal .btn-primary {
  background-color: var(--corev-peach);
  border-color: var(--corev-peach);
  color: var(--corev-navy);
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:active:hover, .btn-primary:active:focus {
  background-color: var(--corev-peach-hover);
  border-color: var(--corev-peach-hover);
  color: var(--corev-navy);
}
.btn-primary.disabled, .btn-primary:disabled {
  background-color: var(--corev-peach-light);
  border-color: var(--corev-peach-light);
}
a.text-primary, .text-primary { color: var(--corev-gold-dark) !important; }

/* Focus rings on inputs */
.form-control:focus {
  border-color: var(--corev-peach);
  box-shadow: 0 0 0 .18rem rgba(243,181,111,.28);
}

/* Content accents that echo the brand without going full-dark */
.panel-primary > .panel-heading {
  background: var(--corev-navy);
  border-color: var(--corev-navy);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background: var(--corev-navy);
  border-color: var(--corev-navy);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border-top: 2px solid var(--corev-peach);
  color: var(--corev-navy);
  font-weight: 600;
}

/* ============================================================
   6. Footer
   ============================================================ */
section#footer {
  background-color: var(--corev-navy);
  border-top: 1px solid var(--corev-border);
}
section#footer p {
  color: var(--corev-muted);
}
section#footer a { color: var(--corev-peach); }
section#footer a:hover { color: var(--corev-peach-light); }
section#footer .back-to-top {
  background: var(--corev-peach);
  color: var(--corev-navy);
}
section#footer .back-to-top:hover {
  background: var(--corev-peach-hover);
}

/* ============================================================
   7. Order forms (universal_slider)
   These stylesheets load AFTER custom.css, so !important is
   required for the slider + order button to take the brand.
   ============================================================ */
/* Order Now button — peach, kill the blue gradient */
.order-button {
  background-image: none !important;
  background-color: var(--corev-peach) !important;
  border: 0 !important;
  color: var(--corev-navy) !important;
  font-weight: 600;
}
.order-button:hover,
.order-button:focus {
  background-image: none !important;
  background-color: var(--corev-peach-hover) !important;
  color: var(--corev-navy) !important;
}
/* Ion range slider — navy segments, peach grid ticks, navy labels */
.irs-line { background: var(--corev-navy-3) !important; }
.irs-line-left,
.irs-line-right { background: var(--corev-navy) !important; }
.irs-line-mid,
.irs-line-left.last.color-last { background: var(--corev-navy-3) !important; }
.irs-grid-pol { background: var(--corev-peach) !important; }
.irs-single,
.irs-from,
.irs-to {
  background: var(--corev-navy) !important;
  color: #fff !important;
}
/* Plan price emphasis */
.price-container { color: var(--corev-navy) !important; }

/* ============================================================
   8. Pill buttons + gradient + icon tiles (match corevstudio.com)
   ============================================================ */
/* Pill radius on all buttons like the main site */
.btn { border-radius: 50rem; }

/* Primary-type buttons = peach gradient + near-black text (site match) */
.btn-primary,
.modal .btn-primary,
.order-button,
ul.top-nav > li.primary-action > a.btn,
section#home-banner .btn.search {
  background-image: linear-gradient(0deg, var(--corev-peach-light) 0%, var(--corev-peach) 100%) !important;
  background-color: var(--corev-peach) !important;
  border: 0 !important;
  color: #0F1521 !important;
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.modal .btn-primary:hover,
.order-button:hover, .order-button:focus,
ul.top-nav > li.primary-action > a.btn:hover,
ul.top-nav > li.primary-action > a.btn:focus,
section#home-banner .btn.search:hover,
section#home-banner .btn.search:focus {
  background-image: linear-gradient(0deg, var(--corev-peach) 0%, var(--corev-peach-hover) 100%) !important;
  color: #0F1521 !important;
}

/* Order-form button is .order-button (not .btn) — pill it explicitly */
.order-button { border-radius: 50rem !important; }
/* universal_slider sets `#order-universal_slider .product-container .order-button
   { color:#fff !important }` (id-level) — beat it with a body-prefixed selector
   so the peach button gets the near-black text like the main site. */
body #order-universal_slider .product-container .order-button,
body #order-universal_slider .product-container .order-button:hover {
  color: #0F1521 !important;
  text-shadow: none !important;
  border-radius: 50rem !important;
}

/* Keep other attached input-groups tidy */
.input-group .btn { border-radius: 0; }

/* Hero domain search → DETACHED pill input + pill button, matching
   corevstudio.com. Break Bootstrap's table layout into a flex row so the
   input and buttons become separate pills with a gap. Six scopes these
   with section#home-banner (id-level), so match that specificity. */
section#home-banner .input-group {
  display: flex !important;
  align-items: stretch;
  gap: 12px;
}
section#home-banner .input-group > .form-control {
  flex: 1 1 auto;
  width: auto;
  height: auto;
  border-radius: 50rem !important;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  padding: 12px 24px;
  box-shadow: none;
}
section#home-banner .input-group > .form-control::placeholder { color: rgba(255,255,255,.5); }
section#home-banner .input-group > .form-control:focus {
  background: rgba(255,255,255,.08);
  border-color: var(--corev-peach);
  box-shadow: 0 0 0 .18rem rgba(243,181,111,.25);
}
section#home-banner .input-group > .input-group-btn {
  display: flex !important;
  align-items: stretch;
  gap: 10px;
  width: auto !important;
}
section#home-banner .input-group .btn.search { border-radius: 50rem !important; }
/* Transfer = detached ghost pill so it doesn't look orphaned */
section#home-banner .btn.transfer {
  border-radius: 50rem !important;
}

/* Homepage shortcut icons → white glyph in a frosted rounded-square tile
   (mirrors the main site's service-icon treatment) */
.home-shortcuts li a i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 8px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--corev-border);
  color: #fff !important;
  font-size: 20px;
  transition: all .15s ease;
}
.home-shortcuts li a:hover i {
  background: rgba(243,181,111,.16);
  border-color: var(--corev-peach);
  color: var(--corev-peach) !important;
}

/* ============================================================
   9. Branded page-load screen
   Full-screen navy splash: peach CoreV mark pulsing inside a
   spinning peach ring. Fades out on load (JS in header.tpl adds
   .cl-done). Markup + script live at the top of header.tpl.
   ============================================================ */
#corev-loader {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--corev-navy);
  transition: opacity .5s ease, visibility .5s ease;
}
#corev-loader.cl-done {
  opacity: 0;
  visibility: hidden;
}
#corev-loader .cl-box {
  position: relative;
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#corev-loader .cl-ring {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 3px solid rgba(243,181,111,.18);
  border-top-color: var(--corev-peach);
  border-radius: 50%;
  animation: cl-spin .9s linear infinite;
}
#corev-loader .cl-mark {
  width: 66px;
  height: auto;
  animation: cl-pulse 1.5s ease-in-out infinite;
}
@keyframes cl-spin { to { transform: rotate(360deg); } }
@keyframes cl-pulse {
  0%, 100% { opacity: .7; transform: scale(.94); }
  50%      { opacity: 1;  transform: scale(1.06); }
}