/* *****************************************************
   NovaHost / LowEndHost — Custom Design System
   Complete visual + motion overhaul on top of the WHMCS
   "Six" base theme. All data-bearing markup (services,
   domains, invoices, nav, auth) is left untouched — this
   file only restyles it.
   ***************************************************** */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Brand palette — light SaaS surface, muted indigo-teal accent ---- */
  --ink:            #22392e;
  --ink-soft:       #345544;
  --surface:        #ffffff;
  --surface-muted:  #f6f7f9;
  --surface-alt:    #eef1f3;
  --border:         #e2e6ea;
  --border-soft:    #ececf0;

  --text:           #1a2230;
  --text-muted:     #667085;
  --text-faint:     #98a2b3;
  --text-inverted:  #f2f5f5;

  --brand-1:        #397972;   /* muted teal (lightened) */
  --brand-2:        #b8863f;   /* aged brass/gold   */
  --brand-3:        #3f5266;   /* slate indigo      */
  --brand-4:        #3d6b7f;   /* muted steel blue  */

  --gradient-brand:   linear-gradient(115deg, var(--brand-1) 0%, #2e6a5c 55%, var(--ink-soft) 100%);
  --gradient-brand-2: linear-gradient(115deg, var(--ink-soft) 0%, var(--brand-1) 100%);
  --gradient-dark:    radial-gradient(120% 140% at 10% 0%, #3d6650 0%, #2a4436 55%, #1c2e25 100%);
  --gradient-text:    linear-gradient(95deg, var(--brand-1), var(--ink-soft));

  --success: #2f8f5b;
  --info:    #3d6b7f;
  --warning: #b8863f;
  --danger:  #a2432f;

  --shadow-sm: 0 1px 3px rgba(16, 24, 38, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 24, 38, 0.08);
  --shadow-lg: 0 18px 46px rgba(16, 24, 38, 0.12);
  --shadow-brand: 0 12px 28px rgba(57, 121, 114, 0.22);

  /* Uniform rounded corners everywhere — cards, buttons and inputs alike */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-input: 10px;
  --radius-sm-amt: 8px;
  --radius-md-amt: 12px;
  --radius-lg-amt: 16px;
  --radius-pill-amt: 999px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------------------------------------------------------
   Base / reset
--------------------------------------------------------- */
html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background-color: var(--surface-muted) !important;
  color: var(--text);
  margin-right: 0 !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Invisible reCAPTCHA v3 corner badge — hidden per request. Note: Google's
   terms require the "protected by reCAPTCHA" disclosure to appear on any
   page using it if the badge itself is hidden (Setup > reCAPTCHA docs). */
.grecaptcha-badge { visibility: hidden !important; }

h1, h2, h3, h4, h5, h6,
.logo-text, .navbar-brand {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

::-moz-selection { background: var(--brand-1); color: #fff; }
::selection { background: var(--brand-1); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; background-color: var(--surface-muted); }
::-webkit-scrollbar-thumb { background: var(--gradient-brand); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-1); }

a { color: var(--text-muted); background-color: transparent; transition: color .2s var(--ease), transform .2s var(--ease); }
a:hover, a:active { color: var(--brand-1); outline: 0; text-decoration: none !important; }

.container { padding-right: 20px; padding-left: 20px; }

#main-body {
  padding-top: 40px !important;
  padding-bottom: 60px !important;
  background: var(--surface-muted) !important;
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   Scroll-reveal + motion utilities (paired with custom-theme.js)
--------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="scale"] { transform: translateY(0) scale(.94); }
[data-reveal="scale"].is-visible { transform: translateY(0) scale(1); }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].is-visible { transform: translateX(0); }

[data-reveal-group] > * { transition-delay: calc(var(--stagger, 0) * 90ms); }

@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes floatX { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes pulseGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ripple { to { transform: scale(3); opacity: 0; } }

.float-anim { animation: floatY 6s ease-in-out infinite; }
.float-anim-slow { animation: floatY 9s ease-in-out infinite; }
.float-anim-x { animation: floatX 7s ease-in-out infinite; }
.spin-slow { animation: spinSlow 18s linear infinite; }

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
.btn {
  border-radius: var(--radius-pill) !important;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 10px 22px;
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  border-width: 1.5px !important;
}
.btn:active { transform: translateY(1px) scale(.98); }

.btn-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.55); pointer-events: none; animation: ripple .6s var(--ease) forwards; }

.btn-primary, .btn-warning {
  background: var(--gradient-brand) !important;
  background-size: 200% auto;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover, .btn-primary:focus,
.btn-warning:hover, .btn-warning:focus {
  background-position: right center !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(57, 121, 114, 0.36) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.btn-success {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(47, 143, 91, 0.28);
}
.btn-success:hover, .btn-success:focus {
  background: #24774a !important;
  border-color: #24774a !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(47, 143, 91, 0.36) !important;
}

.btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(57, 121, 114, 0.28);
}
.btn-danger:hover, .btn-danger:focus {
  background: #8a3626 !important;
  border-color: #8a3626 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(57, 121, 114, 0.36) !important;
}

.btn-info, .btn-default {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border) !important;
}
.btn-info:hover, .btn-info:focus,
.btn-default:hover, .btn-default:focus {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

ul.top-nav > li.primary-action > a.btn {
  background: var(--gradient-brand) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(57, 121, 114,.35);
}
ul.top-nav > li > a:hover { color: var(--text) !important; }

/* ---------------------------------------------------------
   Top utility bar + main nav
--------------------------------------------------------- */
#header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0 !important;
}
#header .top-nav > li > a { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
#header .top-nav > li > a:hover { color: var(--text) !important; }

#main-menu {
  position: sticky;
  top: 0;
  z-index: 999;
  transition: box-shadow .3s var(--ease);
}
#main-menu.is-scrolled { box-shadow: 0 6px 20px rgba(16,24,38,.08); }

.navbar { border-bottom-color: transparent !important; margin-bottom: 0 !important; }
.navbar-default {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.navbar-default .navbar-brand,
.navbar-default .navbar-text { color: var(--text-muted); }
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover { color: var(--text); background-color: transparent; }

.navbar-default .navbar-nav > li > a {
  font-size: 13.5px !important;
  letter-spacing: .01em;
  padding: 26px 18px !important;
  color: var(--text-muted);
  font-weight: 600;
  position: relative;
  transition: color .2s var(--ease);
}
.navbar-default .navbar-nav > li > a::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px; bottom: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { color: var(--text); background-color: transparent; }
.navbar-default .navbar-nav > li > a:hover::after,
.navbar-default .navbar-nav > li > a:focus::after { transform: scaleX(1); }

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  color: var(--brand-1);
  background: transparent;
}
.navbar-default .navbar-nav > .active > a::after { transform: scaleX(1); }

.navbar-default .navbar-toggle { border-color: var(--border); border-radius: var(--radius-input); }
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover { background: var(--gradient-brand); border: 0; }
.navbar-default .navbar-toggle:focus .icon-bar,
.navbar-default .navbar-toggle:hover .icon-bar { background-color: #fff; }
.navbar-default .navbar-toggle .icon-bar { background-color: var(--text); }

.dropdown-menu {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  animation: popIn .18s var(--ease);
}
.dropdown-menu > li > a {
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  color: var(--text-muted);
  font-weight: 500;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  color: var(--text) !important; background: var(--surface-alt) !important;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
  background: var(--gradient-brand) !important; color: #fff;
}
.nav-divider { border-color: rgba(255,255,255,.08) !important; background-color: rgba(255,255,255,.08) !important; }

/* logo mark */
.logo.logo-text {
  font-weight: 700;
  font-size: 22px;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------------
   Hero / home banner
--------------------------------------------------------- */
section#home-banner {
  position: relative;
  background: var(--surface-muted) !important;
  background-size: cover;
  overflow: hidden;
  padding-top: 110px !important;
  padding-bottom: 120px !important;
  isolation: isolate;
}
section#home-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(57, 121, 114,.10), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(184, 134, 63,.08), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(52, 85, 68,.08), transparent 55%);
  z-index: 0;
}
section#home-banner::after {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(16,24,38,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(16,24,38,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 70%);
  z-index: 0;
}
section#home-banner .container { position: relative; z-index: 2; }
section#home-banner h2 {
  color: var(--text);
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 28px;
}
section#home-banner .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  letter-spacing: .04em;
  font-weight: 600;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
section#home-banner .eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(47, 143, 91,.6);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(47, 143, 91,.55); }
  70% { box-shadow: 0 0 0 8px rgba(47, 143, 91,0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 143, 91,0); }
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
  opacity: .5;
  z-index: 0;
  pointer-events: none;
}

#home-banner .input-group-lg .form-control {
  height: 60px;
  border-radius: var(--radius-pill-amt) 0 0 var(--radius-pill-amt) !important;
  border: 1.5px solid var(--border) !important;
  padding-left: 26px;
  font-size: 16px;
  box-shadow: var(--shadow-md);
}
#home-banner .input-group-btn .btn {
  height: 60px;
  border-radius: 0 var(--radius-pill-amt) var(--radius-pill-amt) 0 !important;
  padding: 0 30px;
  font-size: 15px;
}
#home-banner .input-group-btn .btn.transfer {
  border-radius: var(--radius-pill) !important;
  margin-left: 10px;
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm);
}

.hero-stats { position: relative; z-index: 2; margin-top: 56px; display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; }
.hero-stats .stat-item { text-align: center; color: var(--text); min-width: 120px; }
.hero-stats .stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-stats .stat-label { font-size: 12.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }

/* ---------------------------------------------------------
   Home shortcuts (quick action strip)
--------------------------------------------------------- */
.home-shortcuts {
  background: var(--ink-soft) !important;
  position: relative;
  padding: 6px 0;
}
.home-shortcuts .lead { color: #fff; font-weight: 600; font-size: 1.1rem; }
.home-shortcuts ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.home-shortcuts li, .home-shortcuts li:first-child {
  border-color: rgba(255,255,255,.08);
  list-style: none;
  flex: 1 1 0;
  min-width: 150px;
}
.home-shortcuts li a {
  display: block;
  padding: 26px 20px;
  text-align: center;
  color: #cdd0df;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.home-shortcuts li a:hover { background: rgba(255,255,255,.05); transform: translateY(-3px); }
.home-shortcuts li i {
  display: block;
  font-size: 26px;
  margin-bottom: 10px;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.home-shortcuts li p { margin: 0; font-weight: 600; font-size: 13.5px; }
.home-shortcuts li p span { opacity: .5; margin-left: 4px; }

/* ---------------------------------------------------------
   Marketing sections (homepage.tpl additions)
--------------------------------------------------------- */
.section-heading { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-heading .kicker {
  display: inline-block;
  color: var(--brand-1);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-heading h2 { font-size: 2rem; margin-bottom: 14px; }
.section-heading p { color: var(--text-muted); font-size: 1rem; }

.nv-section { padding: 78px 0; }
.nv-section.alt { background: var(--surface); border-radius: var(--radius-lg); }

/* Light "reasons to choose us" style — icon-in-circle on transparent
   background, no card box, matching the airier reference layout
   (still built from the site's own brand colors, just rotated
   across the 6 items instead of every icon using the same gradient). */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 34px 26px; text-align: center; }
.feature-card {
  background: transparent;
  padding: 0 10px;
}
.feature-card .f-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(57, 121, 114,.1);
  color: var(--brand-1); font-size: 22px;
  margin: 0 auto 18px;
}
.feature-card:nth-child(2) .f-icon { background: rgba(184, 134, 63,.12); color: var(--brand-2); }
.feature-card:nth-child(3) .f-icon { background: rgba(47, 143, 91,.12); color: var(--success); }
.feature-card:nth-child(4) .f-icon { background: rgba(52, 85, 68,.12); color: var(--ink-soft); }
.feature-card:nth-child(5) .f-icon { background: rgba(162, 67, 47,.1); color: var(--danger); }
.feature-card:nth-child(6) .f-icon { background: rgba(111, 118, 105,.16); color: #6f7669; }
.feature-card h4 { margin-bottom: 8px; font-size: 1.02rem; }
.feature-card p { color: var(--text-muted); font-size: .9rem; margin: 0; }

.stats-strip {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 56px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.stats-strip .row { position: relative; z-index: 1; }
.stats-strip .stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stats-strip .stat-label { color: var(--text-muted); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; margin-top: 6px; }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; align-items: stretch; }
.plan-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.plan-card.featured {
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--brand-1);
  transform: scale(1.03);
  box-shadow: var(--shadow-lg);
}
.plan-card.featured .plan-price, .plan-card.featured h3 { color: var(--text); }
.plan-card.featured .plan-desc { color: var(--text-muted); }
.plan-card .plan-badge {
  align-self: flex-start;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.plan-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.plan-card .plan-price { font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; font-weight: 700; margin: 8px 0; }
.plan-card .plan-price span { font-size: .95rem; font-weight: 500; color: var(--text-muted); }
.plan-card .plan-desc { color: var(--text-muted); font-size: .88rem; margin-bottom: 20px; }
.plan-card ul { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.plan-card ul li { padding: 7px 0; font-size: .9rem; display: flex; align-items: center; gap: 10px; }
.plan-card ul li i { color: var(--success); }
.plan-card.featured ul li i { color: var(--brand-2); }
.plan-card .btn { text-align: center; }

.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.testimonial-card .stars { color: var(--brand-2); font-size: 13px; margin-bottom: 14px; letter-spacing: 2px; }
.testimonial-card p.quote { font-size: .93rem; color: var(--text); margin-bottom: 20px; }
.testimonial-card .person { display: flex; align-items: center; gap: 12px; }
.testimonial-card .avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gradient-brand);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px;
}
.testimonial-card .person strong { display: block; font-size: .88rem; }
.testimonial-card .person span { font-size: .78rem; color: var(--text-faint); }

.cta-banner {
  background: var(--gradient-brand);
  background-size: 200% auto;
  animation: gradientShift 8s ease infinite;
  border-radius: var(--radius-lg);
  padding: 54px 40px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-banner h2 { color: #fff; margin-bottom: 12px; }
.cta-banner p { color: rgba(255,255,255,.9); margin-bottom: 26px; }
.cta-banner .btn-default { background: #fff !important; border-color: #fff !important; color: var(--brand-1) !important; }
.cta-banner .btn-default:hover { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }

.cta-banner-full {
  border-radius: 0;
  width: 100%;
  padding: 64px 24px;
}
.cta-banner-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.cta-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.cta-banner .btn-inverse {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,.65) !important;
  color: #fff !important;
}
.cta-banner .btn-inverse:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: #fff !important;
  color: #fff !important;
}
@media (max-width: 480px) {
  .cta-banner-actions { flex-direction: column; }
  .cta-banner-actions .btn { width: 100%; }
}

/* announcement / news blocks kept from base theme, restyled */
.announcement-single {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 20px;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.announcement-single:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.announcement-single h3 { font-size: 1.05rem; }
.announcement-single .label.label-default {
  background: var(--surface-alt); color: var(--text-muted);
  border-radius: var(--radius-pill); font-weight: 600; padding: 5px 10px;
}
.announcement-single blockquote { border-color: var(--brand-1); color: var(--text-muted); }

/* ---------------------------------------------------------
   Auth pages — login / register split layout
--------------------------------------------------------- */
.auth-shell {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 620px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin: 10px 0 30px;
}
.auth-side {
  background: var(--gradient-dark);
  position: relative;
  padding: 52px 44px;
  color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.auth-side::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(57, 121, 114,.35), transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(184, 134, 63,.28), transparent 50%);
}
.auth-side > * { position: relative; z-index: 1; }
.auth-side .logo { color: #fff; font-size: 20px; margin-bottom: 40px; display: inline-block; }
.auth-side h2 { color: #fff; font-size: 1.7rem; margin-bottom: 14px; }
.auth-side p { color: #c2c8bd; font-size: .93rem; }
.auth-side .auth-points { list-style: none; padding: 0; margin: 30px 0 0; }
.auth-side .auth-points li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; font-size: .88rem; color: #d6d8e6; }
.auth-side .auth-points li i { color: var(--brand-2); margin-top: 2px; }
.auth-side .auth-illustration { align-self: center; margin: auto 0; opacity: .95; }

.auth-form-side { padding: 54px 50px; }
.auth-form-side .logo { display: none; }

/* Registration with no side panel — form spans the full shell width. */
.auth-shell-full { grid-template-columns: 1fr; }
.auth-shell-full .auth-form-side .logo { display: inline-block; margin-bottom: 24px; }

.logincontainer {
  background: transparent;
  padding: 0;
  border-radius: 0;
  max-width: 1080px;
  margin: 0 auto;
}
.logincontainer > a.logo { display: none; } /* replaced by auth-side branding */
.logincontainer .header-lined { margin-bottom: 26px; }
.logincontainer .header-lined h1 { font-size: 1.7rem; }
.logincontainer .header-lined small { color: var(--text-muted); }

.login-form .form-group label { font-weight: 600; font-size: .85rem; color: var(--text); }
.login-form .form-control, #registration .form-control, #registration input.field, #registration select.field {
  border-radius: var(--radius-input) !important;
  border: 1.5px solid var(--border) !important;
  min-height: 46px;
  padding-left: 16px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.login-form .form-control:focus {
  border-color: var(--brand-1) !important;
  box-shadow: 0 0 0 4px rgba(57, 121, 114,.12) !important;
}
.login-form #login { width: 100%; margin-bottom: 12px; }
.login-form div[align="center"] { display: flex; flex-direction: column; gap: 10px; }
.login-form div[align="center"] .btn-default { width: 100%; }

.auth-switch {
  margin-top: 18px;
  font-size: .9rem;
  color: var(--text-muted);
}
.auth-switch a { font-weight: 700; color: var(--brand-1); }

/* ---------------------------------------------------------
   Registration form
--------------------------------------------------------- */
#registration {
  background: transparent;
  padding: 0;
}
#registration .sub-heading {
  margin: 32px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--border-soft);
}
#registration .sub-heading:first-of-type { margin-top: 0; }

/* Phone field with country/dial-code selector. The plugin's own
   .country-list is position:absolute so it overlays the fields below
   instead of pushing them down — it just needs a positioned, unclipped
   ancestor and a z-index above the surrounding form rows. */
.phone-field-group { position: relative; z-index: 3; }
.intl-tel-input { width: 100%; display: block; }
.intl-tel-input .country-list { z-index: 20; }
/* #registration input.field above wins on specificity (has an ID) and
   would otherwise clobber the plugin's own padding-left, which reserves
   room for the flag + dial code and varies with the code's length. */
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input { padding-left: 76px; }
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input { padding-left: 84px; }
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input { padding-left: 92px; }
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input { padding-left: 100px; }
#registration .sub-heading span {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text) !important;
  background-color: var(--surface) !important;
}
#registration .form-group.prepend-icon { position: relative; }
#registration .form-group.prepend-icon .field-icon { display: none !important; }
#registration .form-group.prepend-icon .field,
#registration .form-group.prepend-icon input,
#registration .form-group.prepend-icon select {
  padding-left: 16px !important;
  border-radius: var(--radius-input) !important;
  border: 1.5px solid var(--border) !important;
  min-height: 46px;
}
#registration .field:focus { border-color: var(--brand-1) !important; box-shadow: 0 0 0 4px rgba(57, 121, 114,.12) !important; }
#registration .tospanel { border-radius: var(--radius-md); overflow: hidden; border: none; box-shadow: var(--shadow-sm); }
#registration .tospanel .panel-heading { background: var(--gradient-brand); border: none; }
#registration .btn-large { padding: 13px 36px; font-size: 1rem; }
.password-strength-meter .progress { border-radius: var(--radius-pill); overflow: hidden; height: 8px; }
.password-strength-meter .progress-bar { background: var(--gradient-brand); }

/* Inline per-field validation errors (register + login share the look) */
.form-group.has-error input.field,
.form-group.has-error input.form-control,
.form-group.has-error select.field,
.form-group.has-error select.form-control,
.form-group.has-error .intl-tel-input input,
.panel-body.has-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 4px rgba(162, 67, 47, .1) !important;
}
.reg-field-error {
  display: block !important;
  color: var(--danger);
  font-size: .8rem;
  margin-top: 6px;
  line-height: 1.3;
}

/* Submit button loading state (login + register) */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  animation: btnLoadingSpin .7s linear infinite;
}
@keyframes btnLoadingSpin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------
   Client dashboard panels / tables (site-wide reuse)
   NOTE: .tiles .tile card styling lives in PHASE 1 below —
   do not redefine here, it caused a nested double-card bug.
--------------------------------------------------------- */
.panel { border-radius: var(--radius-lg) !important; border: 1px solid var(--border-soft) !important; box-shadow: var(--shadow-sm); overflow: hidden; }
.panel-heading { background: var(--surface) !important; border-bottom: 1px solid var(--border-soft) !important; font-weight: 600; }
.list-group-item.active, a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus {
  background: var(--gradient-brand) !important;
  border-color: transparent !important;
  color: #fff !important;
}
div.sidebar .list-group-item-selected { background: var(--gradient-brand) !important; color: #fff; }

.table-list thead th { text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; color: var(--text-faint); border-bottom: 2px solid var(--border-soft) !important; }
.table-list tbody tr { transition: background .2s var(--ease); }
.table-list tbody tr:hover { background: var(--surface-alt); }
/* Status pills — base theme only colors the *text* and leaves a grey
   outlined box; every status class it defines is remapped to a solid pill. */
.status, .label.status {
  display: inline-block;
  border: none !important;
  background: var(--surface-alt) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-pill);
  padding: 4px 13px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .03em;
  line-height: 1.6;
}
.status-active, .status-open, .status-completed, .status-paid, .status-accepted,
.label.status-active, .label.status-open, .label.status-completed, .label.status-paid, .label.status-accepted {
  background: var(--success) !important; color: #fff !important;
}
.status-pending, .status-unpaid, .status-inprogress, .status-lost, .status-dead,
.label.status-pending, .label.status-unpaid, .label.status-inprogress, .label.status-lost, .label.status-dead {
  background: var(--danger) !important; color: #fff !important;
}
.status-suspended, .status-pending-transfer, .status-pendingtransfer, .status-pending-registration, .status-pendingregistration,
.status-redemption, .status-grace, .status-customer-reply, .status-customerreply, .status-onhold,
.label.status-suspended, .label.status-pending-transfer, .label.status-pendingtransfer, .label.status-pending-registration, .label.status-pendingregistration,
.label.status-redemption, .label.status-grace, .label.status-customer-reply, .label.status-customerreply, .label.status-onhold {
  background: var(--warning) !important; color: #fff !important;
}
.status-cancelled, .status-terminated, .status-closed, .status-collections,
.label.status-cancelled, .label.status-terminated, .label.status-closed, .label.status-collections {
  background: var(--text-faint) !important; color: #fff !important;
}
.status-expired, .status-transferred-away, .status-transferredaway, .status-delivered, .status-refunded,
.label.status-expired, .label.status-transferred-away, .label.status-transferredaway, .label.status-delivered, .label.status-refunded {
  background: var(--info) !important; color: #fff !important;
}
.status-fraud, .status-answered,
.label.status-fraud, .label.status-answered {
  background: var(--ink) !important; color: #fff !important;
}

/* DataTables filter/info/length/pagination — the base WHMCS dom string
   `<"listtable"fit>pl` floats the search box and the info pill on top of
   each other and leaves length/pagination completely unstyled; rebuilt
   as a clean flex layout so nothing overlaps. */
.dataTables_wrapper { position: relative; }
.dataTables_wrapper .listtable {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.dataTables_wrapper .listtable > .dataTables_filter,
.dataTables_wrapper .listtable > .dataTables_info {
  float: none;
  margin: 0;
}
.dataTables_wrapper .listtable > table.dataTable {
  order: 3;
  width: 100% !important;
  flex: 1 0 100%;
}
.dataTables_wrapper .dataTables_filter { order: 1; }
.dataTables_wrapper .dataTables_info { order: 2; margin-left: auto; }

.dataTables_wrapper .dataTables_filter label { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text-muted); }
.dataTables_wrapper .dataTables_filter label .form-control,
.dataTables_wrapper .dataTables_filter input {
  min-height: 40px;
  width: 220px !important;
  padding: 8px 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-input) !important;
  background: var(--surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 13.5px;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--brand-1) !important;
  box-shadow: 0 0 0 4px rgba(57, 121, 114,.12) !important;
  outline: none;
}
.dataTables_wrapper .dataTables_info {
  background-color: var(--surface-alt) !important;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: 6px 14px !important;
  font-size: 12.5px;
  white-space: nowrap;
}

.dataTables_wrapper .dataTables_length {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 16px;
  color: var(--text-muted);
  font-weight: 500;
}
.dataTables_wrapper .dataTables_length select {
  min-height: 38px;
  padding: 6px 30px 6px 12px;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-input) !important;
  background-color: var(--surface);
}

.dataTables_wrapper .dataTables_paginate {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  float: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 7px 13px;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--text) !important;
  background: var(--surface) !important;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--gradient-brand) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: .45;
  cursor: default;
  background: var(--surface) !important;
  color: var(--text-faint) !important;
}
.dataTables_wrapper .dataTables_processing {
  background: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-md);
}

@media (max-width: 600px) {
  .dataTables_wrapper .listtable { flex-direction: column; align-items: stretch; }
  .dataTables_wrapper .dataTables_info { margin-left: 0; }
}
.alert {
  border-radius: var(--radius-md);
  border: none;
  border-left: 4px solid transparent;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
/* This theme's own .d-none/.hidden utilities aren't !important (unlike
   real Bootstrap 4's, which are specifically so component styles like
   this can't override them), so .alert's display:flex above was
   winning the cascade and showing "hidden" alerts (e.g. checkout's
   error box with no error to display) with empty content. */
.alert.d-none, .alert.hidden { display: none !important; }
.alert .alert-icon { font-size: 1.15rem; line-height: 1.4; flex: 0 0 auto; }
.alert .alert-body { flex: 1 1 auto; min-width: 0; }
.alert .alert-body h2 { font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.alert .alert-body strong { display: block; margin-bottom: 8px; font-size: .95rem; }
.alert .alert-body ul { margin: 0; padding-left: 18px; }
.alert .alert-body ul li { margin-bottom: 4px; }
.alert .alert-body ul li:last-child { margin-bottom: 0; }
.alert-success { background: rgba(47, 143, 91,.10) !important; color: var(--success) !important; border-left-color: var(--success); }
.alert-danger { background: rgba(162, 67, 47,.08) !important; color: var(--danger) !important; border-left-color: var(--danger); }
.alert-warning { background: rgba(184, 134, 63,.12) !important; color: #8a6425 !important; border-left-color: var(--warning); }
.alert-info { background: rgba(61, 107, 127,.12) !important; color: var(--info) !important; border-left-color: var(--info); }
.alert .alert-link { font-weight: 700; text-decoration: underline; }

.header-lined h1 { color: var(--text) !important; font-weight: 700 !important; }
.header-lined h1 small { color: var(--text-muted); font-weight: 400; }

.form-control { min-height: 42px; border-radius: var(--radius-input); border: 1.5px solid var(--border); }
.form-control:focus, .form-control:active {
  border-color: var(--brand-1) !important;
  box-shadow: 0 0 0 4px rgba(57, 121, 114,.12) !important;
}

.input-group-addon {
  border-radius: var(--radius-input) !important;
  background: var(--surface-alt) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-muted);
}
.input-group .form-control:not(:first-child) { border-left: 0 !important; }
.input-group .form-control:not(:last-child) { border-right: 0 !important; }
.input-group-addon:first-child { border-right: 0 !important; }
.input-group-addon:last-child { border-left: 0 !important; }

#order-standard_cart .view-cart-items-header { background: var(--surface-alt) !important; color: var(--text) !important; }
#order-boxes .fields-container { border-top-color: var(--brand-1) !important; border-bottom-color: var(--brand-1) !important; }
#order-boxes .fields-container .field-row:nth-child(even) { background-color: var(--surface-alt) !important; }
#order-boxes .fields-container .field-row:nth-child(odd) { background-color: var(--surface) !important; }
#order-boxes table.styled tr th { background: var(--surface-alt) !important; color: var(--text) !important; }
#order-boxes table.styled tr.carttablesummary td { background-color: var(--surface-alt) !important; }

.lehlogo { max-width: 220px !important; margin-top: 2px; }

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
.footer {
  background: var(--ink) !important;
  position: relative;
  padding-top: 10px;
}
.footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-brand); }
.footer .container { padding: 60px 20px 34px; }
.footer h5.footer-heading { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 18px; font-weight: 700; }
.footer ul.footer-links { list-style: none; margin: 0; padding: 0; }
.footer ul.footer-links li { margin-top: 12px; font-size: .9rem; }
.footer ul.footer-links li a { color: #8f9689; transition: all .2s var(--ease); }
.footer ul.footer-links li a:hover { padding-left: 5px; color: #fff; }
.footer .flogo { max-width: 60%; padding-bottom: 12px; }
.footer .footer-about p { color: #828879; font-size: .88rem; line-height: 1.7; }
.footer .social-row { display: flex; gap: 10px; margin-top: 18px; }
.footer .social-row a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  color: #d3d9cc; font-size: 14px;
  transition: all .25s var(--ease);
}
.footer .social-row a:hover { background: var(--gradient-brand); border-color: transparent; color: #fff; transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.07); padding: 20px; text-align: center; color: #6f7669; font-size: .8rem; }
.footer-newsletter { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); padding: 26px; }
.footer-newsletter h5 { color: #fff; margin-bottom: 6px; }
.footer-newsletter p { color: #979e91; font-size: .85rem; margin-bottom: 16px; }
.footer-newsletter .input-group input { border-radius: var(--radius-pill-amt) 0 0 var(--radius-pill-amt); border: none; height: 46px; padding-left: 18px; }
.footer-newsletter .input-group .btn { border-radius: 0 var(--radius-pill-amt) var(--radius-pill-amt) 0 !important; height: 46px; }

blockquote { border-color: var(--brand-1); }

/* ---------------------------------------------------------
   Misc polish
--------------------------------------------------------- */
.fullpage-overlay, #fullpage-overlay { backdrop-filter: blur(3px); }
.modal-content { border-radius: var(--radius-lg) !important; overflow: hidden; border: none !important; }
.modal-header.panel-heading { background: var(--gradient-brand) !important; color: #fff; }
.modal-header.panel-heading .close { color: #fff; opacity: .85; text-shadow: none; }

@media (max-width: 991px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .auth-form-side .logo { display: inline-block; margin-bottom: 24px; }
}
@media (max-width: 767px) {
  body { max-width: 100% !important; }
  section#home-banner h2 { font-size: 1.9rem; }
  .home-shortcuts ul { flex-direction: column; }
  #registration { padding: 26px 20px; }
}

/* ---------------------------------------------------------
   PHASE 1 — Client Dashboard
--------------------------------------------------------- */
.dash-welcome {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--gradient-dark);
  border: none;
  border-radius: var(--radius-lg);
  padding: 30px 34px;
  margin-bottom: 26px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.dash-welcome::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(57, 121, 114,.4), transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(184, 134, 63,.22), transparent 50%);
  z-index: 0;
}
.dash-welcome-icon {
  width: 56px; height: 56px; flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  position: relative; z-index: 1;
}
.dash-welcome h2 { color: #fff; margin: 0 0 4px; font-size: 1.3rem; position: relative; z-index: 1; }
.dash-welcome p { color: #c7cec5; margin: 0; font-size: .88rem; position: relative; z-index: 1; }

/* Dashboard stat tiles (Services / Domains / Tickets / Invoices) —
   base theme renders these as flat bordered boxes; rebuilt as branded cards. */
.tiles { margin: 0 0 4px; }
.tiles .tile {
  padding: 7px;
  background: transparent;
  border-right: 0;
}
.tiles .tile > a {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 26px 24px 22px;
  min-height: 128px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tiles .tile:hover,
.tiles .tile:hover > a { background: transparent; cursor: pointer; }
.tiles .tile:hover > a { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

.tiles .tile .icon {
  position: absolute;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  border-radius: var(--radius-sm);
  background: var(--gradient-brand);
  box-shadow: var(--shadow-brand);
  transition: transform .35s var(--ease-bounce);
}
.tiles .tile:hover .icon { transform: scale(1.14) rotate(-6deg); }

.tiles .tile .stat {
  margin-top: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.tiles .tile .title {
  margin-top: 6px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 11.5px;
}
.tiles .tile .highlight {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; margin-top: 0; border-radius: 0;
}
.tiles .tile .highlight.bg-color-blue,
.tiles .tile .highlight.bg-color-green,
.tiles .tile .highlight.bg-color-red,
.tiles .tile .highlight.bg-color-gold {
  background: var(--gradient-brand) !important;
}
.tiles .tile:nth-child(1) .icon { background: linear-gradient(115deg, var(--ink-soft), #4a7a63); box-shadow: 0 14px 30px rgba(52, 85, 68,.32); }
.tiles .tile:nth-child(2) .icon { background: linear-gradient(115deg, var(--success), #4dbf82); box-shadow: 0 14px 30px rgba(47, 143, 91,.32); }
.tiles .tile:nth-child(3) .icon { background: linear-gradient(115deg, var(--brand-1), var(--brand-2)); box-shadow: 0 14px 30px rgba(57, 121, 114,.32); }
.tiles .tile:nth-child(4) .icon { background: linear-gradient(115deg, var(--brand-2), #d9ad6b); box-shadow: 0 14px 30px rgba(184, 134, 63,.32); }
.tiles .tile:nth-child(1) .highlight { background: linear-gradient(90deg, var(--ink-soft), #4a7a63) !important; }
.tiles .tile:nth-child(2) .highlight { background: linear-gradient(90deg, var(--success), #4dbf82) !important; }
.tiles .tile:nth-child(3) .highlight { background: linear-gradient(90deg, var(--brand-1), var(--brand-2)) !important; }
.tiles .tile:nth-child(4) .highlight { background: linear-gradient(90deg, var(--brand-2), #d9ad6b) !important; }
.tiles .tile:nth-child(1) .stat { color: var(--ink-soft); }
.tiles .tile:nth-child(2) .stat { color: var(--success); }
.tiles .tile:nth-child(3) .stat { color: var(--brand-1); }
.tiles .tile:nth-child(4) .stat { color: var(--brand-2); }

@media (max-width: 767px) {
  .tiles .tile:nth-child(2),
  .tiles .tile:nth-child(1) { border-bottom: 0; }
  .tiles .tile > a { padding: 20px 18px 18px; min-height: 108px; }
  .tiles .tile .stat { font-size: 1.9rem; }
}

/* Client-area sidebar panels (Your Info / Contacts / Shortcuts, etc.) */
.panel-sidebar { border-radius: var(--radius-lg) !important; }
.panel-sidebar .panel-heading {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-soft) !important;
  position: relative;
  padding: 16px 20px;
}
.panel-sidebar .panel-heading .panel-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .95rem;
  color: var(--text);
}
.panel-sidebar .panel-heading .panel-title i:first-child { color: var(--brand-1); }
.panel-sidebar .panel-heading .panel-minimise { transition: transform .25s var(--ease); color: var(--text-faint); }
.panel-sidebar .panel-body { padding: 18px 20px; }
.panel-sidebar .panel-footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border-soft) !important;
  padding: 16px 20px;
}
.panel-sidebar .list-group-item {
  border-color: var(--border-soft) !important;
  padding: 12px 20px;
  font-weight: 500;
  transition: background .2s var(--ease), padding-left .2s var(--ease), color .2s var(--ease);
}
.panel-sidebar .list-group-item:hover {
  background: var(--surface-alt) !important;
  padding-left: 24px;
  color: var(--brand-1);
}
.panel-sidebar .list-group-item.active {
  background: var(--gradient-brand) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.panel-sidebar .list-group-item i { color: var(--text-faint); transition: color .2s var(--ease); }
.panel-sidebar .list-group-item:hover i,
.panel-sidebar .list-group-item.active i { color: inherit; }

.panel-sidebar .btn-success,
.panel-sidebar .btn-block {
  border-radius: var(--radius-pill) !important;
}

.home-kb-search {
  position: relative;
  margin-bottom: 30px;
}
.home-kb-search .form-control {
  border-radius: var(--radius-pill) !important;
  padding-left: 24px;
  height: 56px;
  border: 1.5px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}
.home-kb-search .form-control:focus {
  border-color: var(--brand-1) !important;
  box-shadow: 0 0 0 5px rgba(57, 121, 114,.10) !important;
}
.home-kb-search i.fa-search {
  display: none;
  position: absolute;
  left: 22px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 16px;
  z-index: 2;
}

.client-home-panels .panel { margin-bottom: 22px; }
.client-home-panels .panel-heading { position: relative; padding-left: 22px; }
.panel-accent-blue .panel-heading::before,
.panel-accent-green .panel-heading::before,
.panel-accent-red .panel-heading::before,
.panel-accent-gold .panel-heading::before,
.panel-accent-orange .panel-heading::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--gradient-brand);
}
/* Each accent name gets its own semantic color instead of every
   widget sharing the same brand gradient stripe/icon. */
.panel-accent-blue .panel-heading::before { background: var(--info); }
.panel-accent-green .panel-heading::before { background: var(--success); }
.panel-accent-red .panel-heading::before { background: var(--danger); }
.panel-accent-gold .panel-heading::before,
.panel-accent-orange .panel-heading::before { background: var(--warning); }
.client-home-panels .panel-title > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(57, 121, 114,.1);
  color: var(--brand-1);
  font-size: 13px;
  margin-right: 4px;
  vertical-align: middle;
}
.panel-accent-blue .panel-title > i { background: rgba(61, 107, 127,.12); color: var(--info); }
.panel-accent-green .panel-title > i { background: rgba(47, 143, 91,.12); color: var(--success); }
.panel-accent-red .panel-title > i { background: rgba(162, 67, 47,.1); color: var(--danger); }
.panel-accent-gold .panel-title > i,
.panel-accent-orange .panel-title > i { background: rgba(184, 134, 63,.12); color: var(--warning); }
.client-home-panels .list-group-item {
  border-color: var(--border-soft) !important;
  transition: background .2s var(--ease), padding-left .2s var(--ease);
}
.client-home-panels .list-group-item:hover { background: var(--surface-alt) !important; padding-left: 22px; }

.panel-sidebar { transition: box-shadow .3s var(--ease); }
.panel-sidebar:hover { box-shadow: var(--shadow-md); }
.sidebar-menu-item-icon { width: 18px; text-align: center; margin-right: 4px; color: var(--text-faint); }
.list-group-item.active .sidebar-menu-item-icon { color: #fff; }

@media (max-width: 767px) {
  .dash-welcome { flex-direction: column; text-align: center; }
}

/* ---------------------------------------------------------
   PHASE 2 — Services & Domains
--------------------------------------------------------- */

/* Bootstrap tabs used across service/domain/support detail pages */
.nav-tabs { border-bottom: 1.5px solid var(--border-soft); margin-bottom: 24px; }
.nav-tabs > li > a {
  border: none !important;
  border-radius: 0 !important;
  color: var(--text-muted);
  font-weight: 600;
  font-size: .88rem;
  padding: 12px 18px;
  margin-right: 4px;
  position: relative;
  background: transparent !important;
  transition: color .2s var(--ease);
}
.nav-tabs > li > a::after {
  content: '';
  position: absolute; left: 18px; right: 18px; bottom: -1.5px;
  height: 2.5px; border-radius: 0;
  background: var(--gradient-brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-tabs > li > a:hover { color: var(--text); background: transparent !important; }
.nav-tabs > li > a:hover::after { transform: scaleX(1); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--text) !important;
  background: transparent !important;
  border: none !important;
}
.nav-tabs > li.active > a::after { transform: scaleX(1); }

/* Service status card (clientareaproductdetails) */
.product-status {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.product-status .product-icon .fa-stack { font-size: 1.4em; }
.product-status .product-icon .fa-circle { color: var(--surface-alt); }
.product-status .product-icon .fa-inverse { color: var(--brand-1); }
.product-status-active .product-icon .fa-circle { color: rgba(47, 143, 91,.12); }
.product-status-active .product-icon .fa-inverse { color: var(--success); }
.product-status-suspended .product-icon .fa-circle,
.product-status-cancelled .product-icon .fa-circle,
.product-status-terminated .product-icon .fa-circle { color: rgba(57, 121, 114,.12); }
.product-status-suspended .product-icon .fa-inverse,
.product-status-cancelled .product-icon .fa-inverse,
.product-status-terminated .product-icon .fa-inverse { color: var(--danger); }
.product-status .product-icon h3 { margin: 12px 0 2px; font-size: 1.15rem; }
.product-status .product-icon h4 { color: var(--text-muted); font-weight: 500; font-size: .85rem; }
.product-status-text { text-align: center; margin-top: 14px; font-weight: 600; }
.product-actions-wrapper { margin-top: 16px; }
.product-actions-wrapper .btn { margin-bottom: 8px; }

/* Info label/value rows on domain + product overview tabs */
.tab-pane .row h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: 4px; font-weight: 700; }
.tab-pane .row > div { margin-bottom: 18px; }

/* Bulk action / dropdown buttons on domains + services lists */
.btn-group .btn-default { border-radius: 0 !important; }
.btn-group .btn-default:first-child { border-top-left-radius: var(--radius-sm-amt) !important; border-bottom-left-radius: var(--radius-sm-amt) !important; }
.btn-group .btn-default:last-child { border-top-right-radius: var(--radius-sm-amt) !important; border-bottom-right-radius: var(--radius-sm-amt) !important; }

/* SSL status icons */
.ssl-info img { width: 20px; opacity: .9; transition: transform .2s var(--ease); }
.ssl-info:hover img { transform: scale(1.15); }

/* DNS management + generic striped tables */
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--surface-alt); }
.table-striped { border-radius: var(--radius-md); overflow: hidden; }
.table > thead > tr > th { border-bottom: 2px solid var(--border-soft) !important; color: var(--text-faint); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }

/* Domain autorenew indicators */
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }

/* ---------------------------------------------------------
   PHASE 3 — Store / Ordering
--------------------------------------------------------- */
.store-order-container {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  box-shadow: var(--shadow-sm);
  margin: 20px 0 40px;
}
.store-order-container h2 { font-size: 1.5rem; margin-bottom: 10px; }
.store-order-container > form > h4,
.store-order-container .payment-term h4 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 700; margin-bottom: 10px;
}
.payment-term {
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.payment-term select { border-radius: var(--radius-input); min-height: 46px; }

.store-domain-tabs { margin-top: 6px; }
.store-domain-tab-content {
  background: var(--surface-alt);
  border-radius: 0 var(--radius-md-amt) var(--radius-md-amt) var(--radius-md-amt);
  padding: 22px;
  margin-bottom: 24px;
}
.domain-validation { font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; padding-top: 10px; }
.domain-validation.ok, .domain-validation i.fa-check { color: var(--success); }
.domain-validation i.fa-times { color: var(--danger); }
.domain-validation i.fa-spinner { color: var(--brand-1); }

.store-order-container .card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: none;
  margin-bottom: 20px;
}
.store-order-container .card-body { padding: 22px; }
.form-check { display: flex; align-items: center; gap: 8px; padding-left: 0; }
.form-check-input { width: 18px; height: 18px; accent-color: var(--brand-1); margin: 0; }

.store-promoted-product {
  background: var(--gradient-dark);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}
.store-promoted-product::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 90% 10%, rgba(57, 121, 114,.35), transparent 55%);
}
.store-promoted-product > .row { position: relative; z-index: 1; }
.store-promoted-product .icon img { max-width: 100%; border-radius: var(--radius-md); }
.store-promoted-product h3 { color: #fff; margin-bottom: 4px; }
.store-promoted-product h4 { color: var(--brand-2); font-size: .95rem; font-weight: 600; }
.store-promoted-product p { color: #c7cec5; }
.store-promoted-product ul.features { list-style: none; padding: 0; margin: 14px 0; }
.store-promoted-product ul.features li { padding: 4px 0; font-size: .88rem; color: #d6d8e6; }
.store-promoted-product ul.features li i { color: var(--success); margin-right: 8px; }
.store-promoted-product .btn-success { background: var(--gradient-brand) !important; border: none !important; box-shadow: var(--shadow-brand); }

/* Standard WHMCS shopping cart + order-boxes (rendered by core, classes only) */
#order-standard_cart {
  background: transparent;
  padding: 0;
}
#order-standard_cart .view-cart-items-header {
  background: var(--surface-alt) !important;
  border-radius: var(--radius-md-amt) var(--radius-md-amt) 0 0;
  color: var(--text);
}
#order-boxes .fields-container {
  border-radius: var(--radius-md);
  overflow: hidden;
}
#order-boxes table.styled tr th { border: none; }

/* Upgrade / SSL configure flow */
.tospanel.panel-danger { border-radius: var(--radius-md); }

@media (max-width: 767px) {
  .store-order-container { padding: 22px 18px; }
}

/* ---------------------------------------------------------
   PHASE 4 — Billing
--------------------------------------------------------- */
.invoice-summary {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.invoice-summary h2 { font-size: 1.2rem; margin-bottom: 16px; }
.total-row { background: var(--surface-alt) !important; font-weight: 600; }
.table-condensed > thead > tr > td { text-transform: uppercase; font-size: 11px; letter-spacing: .04em; color: var(--text-faint); border-bottom: 2px solid var(--border-soft); }

.icheck-label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--surface-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin: 0 8px 8px 0;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.icheck-label:has(input:checked) { border-color: var(--brand-1); background: rgba(57, 121, 114,.06); }
.icheck-label input.icheck-button { accent-color: var(--brand-1); }

#billingAddressChoice .control-label { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }

/* ---------------------------------------------------------
   PHASE 5 — Support (Tickets, Knowledgebase, Contact)
--------------------------------------------------------- */

/* Ticket thread — chat-bubble style */
.ticket-reply {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.ticket-reply.staff {
  border-left-color: var(--brand-1);
  background: linear-gradient(180deg, rgba(57, 121, 114,.04), transparent 40%), var(--surface);
}
.ticket-reply .date { float: right; color: var(--text-faint); font-size: .78rem; }
.ticket-reply .user { font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.ticket-reply .user i { color: var(--text-faint); }
.ticket-reply .user .label { border-radius: var(--radius-pill); font-size: 10px; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; background: var(--surface-alt); color: var(--text-muted); }
.ticket-reply.staff .user .label { background: var(--gradient-brand); color: #fff; }
.ticket-reply .user .type { color: var(--text-faint); font-weight: 400; font-size: .82rem; margin-left: 4px; }
.ticket-reply .message { color: var(--text); line-height: 1.6; }
.ticket-reply .attachments { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-soft); font-size: .85rem; }
.ticket-reply .attachments ul { list-style: none; padding: 0; margin: 6px 0 0; }
.ticket-reply .attachments li { padding: 3px 0; }
.rating .star, .rating-done .star {
  font-size: 20px; color: var(--border); cursor: pointer;
}
.rating .star.active, .rating-done .star.active { color: var(--brand-2); }
.panel-collapsable .panel-heading { cursor: pointer; }
.panel-collapsable .collapse-icon { color: var(--text-faint); }

/* Knowledgebase */
.kb-search .form-control {
  border-radius: var(--radius-pill-amt) 0 0 var(--radius-pill-amt) !important;
  height: 56px;
  border: 1.5px solid var(--border) !important;
  padding-left: 22px;
}
.kb-search .btn { border-radius: 0 var(--radius-pill-amt) var(--radius-pill-amt) 0 !important; height: 56px; }
.kbcategories { margin-top: 10px; }
.kbcategories .col-sm-4 { margin-bottom: 20px; }
.kbcategories a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 22px;
  font-weight: 700;
  color: var(--text);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.kbcategories a:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); color: var(--brand-1); }
.kbcategories a i { color: var(--brand-1); margin-right: 8px; }
.kbcategories p { color: var(--text-muted); font-size: .85rem; margin-top: 8px; font-weight: 400; }
.kbarticles { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 10px 24px; }
.kbarticles a { display: block; padding: 12px 0; font-weight: 600; border-bottom: 1px solid var(--border-soft); }
.kbarticles a:last-of-type { border-bottom: none; }
.kbarticles p { color: var(--text-muted); font-size: .85rem; margin: 0 0 8px; }

.kb-empty-state {
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 30px;
  margin-top: 10px;
}
.kb-empty-state i {
  font-size: 2.4rem;
  color: var(--brand-1);
  background: rgba(57, 121, 114,.1);
  width: 74px; height: 74px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.kb-empty-state h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; margin-bottom: 8px; }
.kb-empty-state p { color: var(--text-muted); max-width: 420px; margin: 0 auto 22px; }
.kb-empty-state .btn {
  background: var(--gradient-brand) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--radius-input);
  padding: 11px 28px;
  font-weight: 600;
  box-shadow: var(--shadow-brand);
}

/* Contact + horizontal forms */
.form-horizontal .control-label { font-weight: 600; padding-top: 10px; }

/* ---------------------------------------------------------
   PHASE 6 — Odds & ends (errors, 2FA, password reset, OAuth)
--------------------------------------------------------- */
.standalone-auth-card {
  background: var(--surface);
  max-width: 480px;
  margin: 50px auto;
  padding: 44px 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-soft);
}
.standalone-auth-card .header-lined { text-align: center; margin-bottom: 22px; }
.standalone-auth-card .form-control { border-radius: var(--radius-input) !important; min-height: 46px; }
.standalone-auth-card .btn-block { border-radius: var(--radius-pill) !important; }

/* 404 / rate-limit error pages */
.error-container.boxed {
  max-width: 560px;
  margin: 70px auto;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 56px 44px;
  box-shadow: var(--shadow-lg);
}
.error-container.boxed h1 { font-size: 1.8rem; margin-bottom: 8px; }
.error-container.boxed h1 i { color: var(--brand-1); margin-right: 10px; }
.error-container.boxed h3 { color: var(--text-muted); font-weight: 500; font-size: 1rem; margin-bottom: 14px; }
.error-container.boxed .buttons { margin-top: 24px; display: flex; gap: 10px; justify-content: center; }

/* OAuth authorize/login screens (load custom.css directly) */
#oauth-content, section#content { padding: 40px 0; }
.content-container {
  max-width: 460px;
  margin: 40px auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-soft);
  padding: 40px;
}
.content-container .app-logo { text-align: center; margin-bottom: 18px; }
.content-container .app-logo img { max-height: 60px; }
#footer { color: var(--text-faint); text-align: center; padding: 20px; font-size: .8rem; }

/* ---------------------------------------------------------
   PHASE 7 — Long-tail account pages + responsive audit
--------------------------------------------------------- */
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  box-shadow: var(--shadow-sm);
}
.settings-card .control-label { font-weight: 600; font-size: .85rem; }

.download-category-link,
.col-sm-6 > a[href*="download"] { font-weight: 700; }

/* ---- Mobile tightening pass ---- */
@media (max-width: 480px) {
  .standalone-auth-card { padding: 30px 22px; margin: 24px auto; }
  .error-container.boxed { padding: 36px 24px; margin: 30px auto; }
  .error-container.boxed .buttons { flex-direction: column; }
  .settings-card { padding: 22px 18px; }
  .content-container { padding: 26px 20px; margin: 20px auto; }
  .cta-banner { padding: 36px 22px; }
  .stats-strip { padding: 34px 18px; }
  .plan-card.featured { transform: none; }
  .dash-welcome-icon { width: 44px; height: 44px; font-size: 18px; }
  .hero-stats { gap: 22px; }
  section#home-banner { padding-top: 90px !important; padding-bottom: 100px !important; }
}
@media (max-width: 360px) {
  .feature-card, .plan-card, .testimonial-card { padding: 22px 18px; }
  #registration { padding: 20px 14px; }
  .store-order-container { padding: 18px 14px; }
}

/* ---------------------------------------------------------
   PHASE 8 — Affiliates, mass pay, and remaining odds & ends
--------------------------------------------------------- */
.affiliate-stat {
  border-radius: var(--radius-lg);
  border: none !important;
  padding: 26px 20px;
  text-align: center;
  color: #fff !important;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.affiliate-stat.alert-warning { background: linear-gradient(135deg, var(--brand-2), var(--brand-1)) !important; }
.affiliate-stat.alert-info { background: linear-gradient(135deg, var(--ink-soft), var(--brand-1)) !important; }
.affiliate-stat.alert-success { background: linear-gradient(135deg, var(--success), #0e8a52) !important; }
.affiliate-stat i { font-size: 26px; display: block; margin-bottom: 10px; }
.affiliate-stat span { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; display: block; }

.affiliate-referral-link {
  background: var(--surface-alt);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  margin: 20px 0;
}
.affiliate-referral-link span {
  font-family: 'Space Grotesk', monospace;
  font-weight: 600;
  color: var(--brand-1);
}

.table-rounded { border-radius: var(--radius-md); overflow: hidden; }
tr.masspay-total td { background: var(--surface-alt); font-weight: 600; }
tr.masspay-invoice-detail td { color: var(--text-muted); }

/* ---------------------------------------------------------
   PHASE 0 REFRESH — two-column hero with illustration
--------------------------------------------------------- */
section#home-banner .hero-stats-left { justify-content: flex-start; }
@media (max-width: 991px) {
  section#home-banner .col-md-6.text-left { text-align: center !important; }
  section#home-banner .hero-stats-left { justify-content: center; }
  section#home-banner .input-group { max-width: 480px; margin: 0 auto; }
}

.hero-illustration {
  position: relative;
  padding: 20px;
  background: var(--gradient-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hero-mockup-svg { width: 100%; height: auto; }

.hero-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
}
.hero-badge i { color: var(--brand-2); }
.hero-badge-1 { top: 10px; right: 10px; }
.hero-badge-2 { bottom: 20px; left: 0; }
.hero-badge-1 i { color: var(--success); }

@media (max-width: 767px) {
  .hero-badge { font-size: 11px; padding: 7px 12px; }
}

/* ---------------------------------------------------------
   NAV — hover-to-open dropdowns, wider menu
--------------------------------------------------------- */
@media (min-width: 768px) {
  .navbar-default .dropdown-menu {
    min-width: 240px;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    margin-top: 0;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
    pointer-events: none;
  }
  .navbar-default .dropdown:hover > .dropdown-menu,
  .navbar-default .dropdown.open > .dropdown-menu,
  .navbar-default .dropdown-toggle:focus + .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
    pointer-events: auto;
  }
  .navbar-default .dropdown > .dropdown-toggle .caret {
    transition: transform .2s var(--ease);
  }
  .navbar-default .dropdown:hover > .dropdown-toggle .caret,
  .navbar-default .dropdown.open > .dropdown-toggle .caret {
    transform: rotate(180deg);
  }
}
.navbar-default .dropdown-menu > li > a {
  padding: 11px 18px;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.navbar-default .dropdown-menu > li > a i {
  width: 16px;
  text-align: center;
  color: var(--brand-1);
  font-size: 13px;
}
.navbar-default .dropdown-menu > li.active > a i { color: #fff; }

/* ---------------------------------------------------------
   FOOTER REDESIGN — decorative background, trust row, icons
--------------------------------------------------------- */
.footer {
  position: relative;
  overflow: hidden;
}
.footer::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 85% 0%, rgba(57, 121, 114,.10), transparent 45%), radial-gradient(circle at 10% 90%, rgba(184, 134, 63,.08), transparent 45%);
  pointer-events: none;
}
.footer .container { position: relative; z-index: 1; }
.footer-top { padding-bottom: 10px; }
.footer-heading { display: flex; align-items: center; gap: 9px; }
.footer-heading i { color: var(--brand-1); font-size: 13px; }

.footer-newsletter { position: relative; overflow: hidden; }
.footer-newsletter-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--gradient-brand);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-brand);
}

.footer-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.footer-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #a7abc0;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.footer-trust-item i { color: var(--success); }
.footer-payment-icons { display: flex; gap: 14px; }
.footer-payment-icons i {
  font-size: 26px;
  color: #6f7669;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.footer-payment-icons i:hover { color: #d3d9cc; transform: translateY(-2px); }

@media (max-width: 767px) {
  .footer-trust-row { flex-direction: column; text-align: center; }
  .footer-payment-icons { justify-content: center; }
  .footer-about, .footer-newsletter { text-align: center; }
  .footer .social-row { justify-content: center; }
}

/* ---------------------------------------------------------
   PHASE 9 — Homepage motion upgrade
--------------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }

#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--gradient-brand);
  z-index: 2000;
  transition: width .12s linear;
}

/* Animated gradient text used inside headings, e.g. <span class="grad-text"> */
.grad-text {
  background: var(--gradient-brand);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: gradientShift 6s ease infinite;
}

.hero-blob.parallax { transition: transform .25s cubic-bezier(.22,.61,.36,1); }

.feature-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--gradient-brand);
  opacity: 0;
  transition: opacity .35s var(--ease);
  z-index: 0;
}
.feature-card:hover::before { opacity: .04; }
.feature-card > * { position: relative; z-index: 1; }
.feature-card .f-icon { transition: transform .45s var(--ease-bounce); }
.feature-card:hover .f-icon { transform: scale(1.14) rotate(-8deg); }

.stats-strip .stat-num { display: inline-block; }
.stats-strip [data-reveal].is-visible .stat-num { animation: popIn .55s var(--ease-bounce); }

.plan-card { position: relative; }
.plan-card::after {
  content: '';
  position: absolute; top: 0; left: -60%; width: 35%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg);
  transition: left .7s ease;
  pointer-events: none;
  z-index: 2;
}
.plan-card:hover::after { left: 130%; }
.plan-card.featured .plan-badge { animation: pulseGlow 2.4s ease-in-out infinite; }

.testimonial-card .avatar { transition: transform .3s var(--ease-bounce); }
.testimonial-card:hover .avatar { transform: scale(1.12) rotate(-6deg); }

.cta-banner { isolation: isolate; }
.cta-banner .cta-particle {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.28);
  pointer-events: none; z-index: 0;
}
.cta-banner .cta-particle:nth-child(1) { width: 90px; height: 90px; top: -20px; left: 8%; animation: floatY 7s ease-in-out infinite; }
.cta-banner .cta-particle:nth-child(2) { width: 60px; height: 60px; bottom: -14px; right: 12%; animation: floatX 8s ease-in-out infinite; }
.cta-banner .cta-particle:nth-child(3) { width: 34px; height: 34px; top: 30%; right: 26%; animation: floatY 5.5s ease-in-out infinite; }

.btn { transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.btn-primary:hover, .btn.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-brand); }
.btn-ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,.45); pointer-events: none; animation: ripple .65s ease-out;
}

/* ---------------------------------------------------------
   PHASE 10 — Auth pages motion upgrade
--------------------------------------------------------- */
.auth-side { background-size: 160% 160%; animation: gradientShift 14s ease infinite; }
.auth-side .auth-blob {
  position: absolute; border-radius: 50%; filter: blur(30px); opacity: .5; pointer-events: none; z-index: 0;
}
.auth-side .auth-illustration { animation: floatY 6s ease-in-out infinite; }

.login-form .form-group, #registration .form-group {
  animation: fadeInUp .5s var(--ease) both;
  animation-delay: calc(var(--stagger, 0) * 70ms);
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.form-shake { animation: shakeX .45s var(--ease); }
@keyframes shakeX {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; opacity: .9; }
.btn.is-loading::after {
  content: '';
  position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
}

.standalone-auth-card { position: relative; overflow: hidden; }
.standalone-auth-card::before {
  content: '';
  position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: var(--gradient-brand); opacity: .12; filter: blur(10px);
  animation: floatY 8s ease-in-out infinite;
  z-index: 0;
}
.standalone-auth-card > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------
   PHASE 11 — Full-width client area
--------------------------------------------------------- */
.clientarea-shell { max-width: 1560px; margin: 0 auto; padding: 0 30px; }
@media (max-width: 1620px) { .clientarea-shell { max-width: 96vw; } }

.is-clientarea-wide .main-content { animation: fadeInUp .5s var(--ease) both; }
.is-clientarea-wide .sidebar { animation: fadeInUp .5s var(--ease) .08s both; }

.is-clientarea-wide .panel,
.is-clientarea-wide .tile {
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.is-clientarea-wide .panel:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.is-clientarea-wide .tile:hover { transform: translateY(-6px); }

/* Only the primary (nav) sidebar sticks. Pages with a secondary
   sidebar (e.g. domain/ticket detail pages) stack it directly below
   the primary column in the same left column (header.tpl renders
   primary, footer.tpl renders secondary right after it) — if both
   were sticky with the same top offset, the primary sidebar (stuck
   at a fixed viewport position) would visually sit under whichever
   one paints later in the DOM, i.e. the secondary sidebar scrolling
   up would cover it. Keeping secondary in normal flow removes the
   conflict entirely instead of just reordering who wins it. */
.is-clientarea-wide .sidebar:not(.sidebar-secondary) .panel-sidebar { position: sticky; top: 90px; }
.is-clientarea-wide .sidebar-secondary .panel-sidebar { position: static; }

@media (max-width: 767px) {
  .clientarea-shell { padding: 0 16px; }
  .is-clientarea-wide .sidebar:not(.sidebar-secondary) .panel-sidebar { position: static; }
}

/* ---------------------------------------------------------
   PHASE 12 — Bootstrap 4 spacing utilities
   This theme's own CSS is Bootstrap 3, but several bundled order-form
   templates (e.g. standard_cart) use Bootstrap 4 classes like mb-3 for
   gaps between stacked cards. None of these existed anywhere in the
   theme, so the margin was silently dropped and adjacent cards (e.g.
   the cart's Categories/Actions/Order Summary panels) touched with no
   gap, reading as one big merged card instead of separate ones.
--------------------------------------------------------- */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: .25rem !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pt-1 { padding-top: .25rem !important; }
.pb-1 { padding-bottom: .25rem !important; }
.pt-2 { padding-top: .5rem !important; }
.pb-2 { padding-bottom: .5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

/* ---------------------------------------------------------
   PHASE 13 — Shopping cart (standard_cart order form)
   Bring the cart pages into the same full-width, card-based layout
   as the client dashboard instead of the narrow default container.
--------------------------------------------------------- */
#order-standard_cart .panel.card { margin-bottom: 1rem; }
#order-standard_cart .cart-body .header-lined { margin-bottom: 20px; }
#order-standard_cart .view-cart-tabs .tab-content {
  background: transparent;
  padding: 15px 0 0;
}
#order-standard_cart .order-summary {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Domain search (register-domain / bulk-domain pages) — replace the
   default WHMCS yellow/orange banner + globe watermark with the
   site's own dark brand gradient so it matches the auth-shell hero. */
.domain-checker-container {
  background: var(--gradient-dark) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.domain-checker-container::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(57, 121, 114,.35), transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(184, 134, 63,.28), transparent 50%);
  pointer-events: none;
}
.domain-checker-bg {
  background-image: none !important;
  position: relative;
  z-index: 1;
}
.domain-checker-container .input-group-box {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md);
}
#order-standard_cart .domain-checker-advanced textarea {
  border-radius: var(--radius-input);
}

/* Dashboard "Register a New Domain" widget */
#registerDomainPanel .input-group { display: flex; }
#registerDomainPanel input[name="domain"] {
  border-radius: var(--radius-input) 0 0 var(--radius-input) !important;
  border: 1.5px solid var(--border) !important;
  border-right: none !important;
  min-height: 46px;
  padding-left: 16px;
  flex: 1 1 auto;
}
#registerDomainPanel input[name="domain"]:focus {
  border-color: var(--brand-1) !important;
  box-shadow: 0 0 0 4px rgba(57, 121, 114,.12) !important;
  outline: none;
}
#registerDomainPanel .input-group-btn { display: flex; }
#registerDomainPanel .btn-success {
  background: var(--gradient-brand) !important;
  border: none !important;
  border-radius: 0 !important;
}
#registerDomainPanel .btn-default {
  border: 1.5px solid var(--border) !important;
  border-left: none !important;
  border-radius: 0 var(--radius-input) var(--radius-input) 0 !important;
}

/* ---------------------------------------------------------
   PHASE 14 — Homepage redesign (lighter, MdmHost-style layout)
--------------------------------------------------------- */

/* Trust / tech strip under the hero */
.trust-strip { padding: 6px 0 0; }
.trust-strip-label {
  text-align: center; color: var(--text-faint); font-size: 12px;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  margin-bottom: 22px;
}
.trust-strip-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 34px 48px;
}
.trust-strip-item {
  display: flex; align-items: center; gap: 9px;
  color: var(--text-muted); font-weight: 600; font-size: .92rem;
  opacity: .8;
}
.trust-strip-item i { color: var(--brand-1); font-size: 1.05rem; }

/* Testimonial carousel — same .testimonial-card, horizontal snap-scroll
   track with prev/next controls instead of a static grid. */
.testimonial-carousel { position: relative; }
.testimonial-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 16px;
  margin: 0 -4px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-track .testimonial-card {
  flex: 0 0 clamp(260px, 32%, 360px);
  scroll-snap-align: start;
}
.testimonial-nav {
  display: flex; justify-content: center; gap: 12px; margin-top: 8px;
}
.testimonial-nav button {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.testimonial-nav button:hover { background: var(--gradient-brand); color: #fff; border-color: transparent; }

/* Migration steps */
.migration-section { align-items: center; }
.migration-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
.migration-steps li { display: flex; gap: 14px; }
.migration-steps .step-num {
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gradient-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: 'Space Grotesk', sans-serif;
  box-shadow: var(--shadow-brand);
}
.migration-steps h4 { margin: 2px 0 4px; font-size: .98rem; }
.migration-steps p { margin: 0; color: var(--text-muted); font-size: .87rem; }
.migration-graphic {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 25% 25%, rgba(57, 121, 114,.14), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(184, 134, 63,.12), transparent 55%),
    var(--surface);
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.migration-graphic i { font-size: 4.5rem; color: var(--brand-1); opacity: .85; }

/* "Hosting quality" feature list (icon + title + text, stacked) */
.quality-list { list-style: none; margin: 26px 0 0; padding: 0; }
.quality-list li { display: flex; gap: 16px; margin-bottom: 24px; }
.quality-list li:last-child { margin-bottom: 0; }
.quality-list .q-icon {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  background: var(--gradient-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; box-shadow: var(--shadow-brand);
}
.quality-list h4 { margin: 2px 0 4px; font-size: 1rem; }
.quality-list p { margin: 0; color: var(--text-muted); font-size: .88rem; }
.quality-graphic {
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 75% 20%, rgba(57, 121, 114,.14), transparent 55%),
    radial-gradient(circle at 20% 85%, rgba(184, 134, 63,.12), transparent 55%),
    var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  padding: 46px 30px;
  text-align: center;
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.quality-graphic i { font-size: 5rem; color: var(--brand-1); }
.quality-graphic p { margin-top: 14px; color: var(--text-muted); font-size: .9rem; }

/* Dark "talk to a human" support banner */
.support-banner {
  background: var(--gradient-dark);
  border-radius: var(--radius-lg);
  padding: 50px 44px;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.support-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(57, 121, 114,.35), transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(184, 134, 63,.28), transparent 50%);
}
.support-banner > .row { position: relative; z-index: 1; align-items: center; }
.support-banner h2 { color: #fff; margin-bottom: 10px; }
.support-banner p { color: #c7cec5; margin-bottom: 22px; }
.support-banner .support-phone {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  color: #fff; font-weight: 600;
}
.support-banner .support-phone i { color: var(--brand-2); }
.support-banner-icon {
  width: 100%; max-width: 220px; aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
}
.support-banner-icon i { font-size: 4.5rem; color: var(--brand-2); }

/* FAQ accordion */
.faq-section { background: var(--gradient-dark); border-radius: var(--radius-lg); padding: 56px 40px; }
.faq-section .section-heading h2, .faq-section .section-heading p { color: #fff; }
.faq-section .section-heading p { color: #c2c8bd; }
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.faq-item:first-child { border-top: 1px solid rgba(255,255,255,.14); }
.faq-question {
  width: 100%; text-align: left; background: none; border: none;
  padding: 20px 4px; color: #fff; font-weight: 600; font-size: .96rem;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; gap: 16px;
}
.faq-question i { color: var(--brand-2); transition: transform .25s var(--ease); flex: 0 0 auto; }
.faq-item.is-open .faq-question i { transform: rotate(45deg); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height .3s var(--ease);
}
.faq-answer p { padding: 0 4px 20px; margin: 0; color: #c7cec5; font-size: .9rem; line-height: 1.6; }

@media (max-width: 767px) {
  .migration-steps { grid-template-columns: 1fr; }
  .support-banner { padding: 36px 24px; text-align: center; }
  .support-banner-icon { margin-bottom: 24px; }
  .faq-section { padding: 40px 20px; }
}

/* ---------------------------------------------------------
   PHASE 15 — Store / plans page hero (cart.php?gid=X)
--------------------------------------------------------- */
.store-hero { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.store-hero h1 { margin-bottom: 12px; }
.store-hero p { color: var(--text-muted); font-size: 1rem; margin-bottom: 20px; }
.store-hero-points {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
}
.store-hero-points li { display: flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--text); }
.store-hero-points i { color: var(--success); }

#order-standard_cart .plan-grid .plan-price { font-size: 1.9rem; }
#order-standard_cart .plan-grid .plan-startingat { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
#order-standard_cart .plan-grid .plan-price span { display: block; font-size: .82rem; }

/* Plans page has no left Categories/Actions sidebar — category
   switching lives in the top nav instead, so the plan grid gets the
   full row width. */
#order-standard_cart .cart-no-sidebar .cart-body { width: 100%; float: none; }

/* ---------------------------------------------------------
   PHASE 16 — Order flow: "Choose a Domain" step
--------------------------------------------------------- */
.domain-select-header { text-align: center; border: none; margin-bottom: 30px; }
.domain-select-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 34px 36px;
}
#order-standard_cart .domain-selection-options .option {
  background: var(--surface-muted);
  border: none;
  box-shadow: none;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 14px;
  transition: background .2s var(--ease);
}
#order-standard_cart .domain-selection-options .option:last-child { margin-bottom: 0; }
#order-standard_cart .domain-selection-options .option:hover { background: var(--surface-alt); }
#order-standard_cart .domain-selection-options .option-selected,
#order-standard_cart .domain-selection-options .option:has(input:checked) {
  background: rgba(57, 121, 114,.08);
}
#order-standard_cart .domain-selection-options .option > label {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0;
  cursor: pointer;
}
#order-standard_cart .domain-input-group { margin-top: 14px; }
#order-standard_cart .domain-input-group .row > div[class*="col-"] { margin-bottom: 10px; }
#order-standard_cart .domain-input-group .form-control,
#order-standard_cart .domain-input-group input[type="text"] {
  border-radius: var(--radius-input) !important;
  border: 1.5px solid var(--border) !important;
  min-height: 46px;
}
#order-standard_cart .domain-input-group .input-group-addon {
  border-radius: var(--radius-input) 0 0 var(--radius-input) !important;
  border: 1.5px solid var(--border);
  border-right: none;
  background: var(--surface-alt);
}
#order-standard_cart .domain-input-group .input-group .form-control { border-radius: 0 var(--radius-input) var(--radius-input) 0 !important; }
#order-standard_cart #message.form-control { min-height: 46px; }
#order-standard_cart #btnCheckAvailability { min-height: 46px; }

/* The action button sits in a fixed Bootstrap col-sm-2 next to the
   domain input — too narrow for its own label ("Check", "Transfer",
   "Use") once combined with .btn's 22px side padding, so the text
   was overflowing and getting clipped by .btn's own overflow:hidden.
   Turn that row into a flex row instead so the button always sizes
   to fit its own label, and the input takes whatever's left. */
#order-standard_cart .domain-input-group > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
#order-standard_cart .domain-input-group > .row > [class*="col-"] {
  flex: 1 1 320px;
  width: auto;
  max-width: none;
}
#order-standard_cart .domain-input-group > .row > [class*="col-sm-2"] {
  flex: 0 0 auto;
}
#order-standard_cart .domain-input-group .btn {
  white-space: nowrap;
  overflow: visible;
  padding: 12px 22px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .domain-select-card { padding: 24px 20px; }
}

/* ---------------------------------------------------------
   PHASE 17 — Order flow: "Configure" step (product + billing cycle)
--------------------------------------------------------- */
#order-standard_cart .plan-card.plan-card-config {
  cursor: default;
  margin-bottom: 26px;
}
#order-standard_cart .plan-card.plan-card-config:hover { transform: none; box-shadow: var(--shadow-sm); }
#order-standard_cart .plan-card-config h3 { font-size: 1.25rem; margin-bottom: 6px; }
#order-standard_cart .plan-card-config .plan-desc { margin-bottom: 4px; }
.billing-cycle-field { margin-top: 22px; }
.billing-cycle-field > label {
  display: block;
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.billing-cycle-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.billing-cycle-card {
  position: relative;
  flex: 1 1 160px;
  background: var(--surface-muted);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.billing-cycle-card:hover { border-color: var(--brand-1); transform: translateY(-2px); }
.billing-cycle-card.is-active {
  background: var(--surface);
  border-color: var(--brand-1);
  box-shadow: 0 0 0 3px rgba(57, 121, 114,.1);
}
.billing-cycle-card .billing-cycle-label { display: block; font-weight: 600; font-size: .92rem; color: var(--text); }
.billing-cycle-card.is-active .billing-cycle-label { color: var(--brand-1); }
.billing-cycle-badge {
  position: absolute; top: -9px; right: 10px;
  background: var(--gradient-brand);
  color: #fff;
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-brand);
}
/* .select-inline's non-important display:inline-block otherwise wins
   the cascade tie against .w-hidden's display:none. */
#inputBillingcycle.w-hidden { display: none !important; }

#order-standard_cart .plan-card-config { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }
#order-standard_cart .plan-card-config .plan-card-config-info { flex: 1 1 100%; }
#order-standard_cart .plan-card-config .plan-feature-list { list-style: none; margin: 14px 0 0; padding: 0; columns: 2; column-gap: 20px; }
#order-standard_cart .plan-card-config .plan-feature-list li { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-muted); margin-bottom: 9px; break-inside: avoid; }
#order-standard_cart .plan-card-config .plan-feature-list li i { color: var(--success); flex: 0 0 auto; }
#order-standard_cart .plan-card-config .billing-cycle-field { flex: 1 1 100%; border-top: 1px solid var(--border-soft); padding-top: 22px; margin-top: 4px; }

@media (max-width: 600px) {
  #order-standard_cart .plan-card-config .plan-feature-list { columns: 1; }
}

/* ---------------------------------------------------------
   PHASE 18 — Order Summary card (used on cart/configure/checkout)
--------------------------------------------------------- */
#order-standard_cart .order-summary {
  background: var(--gradient-dark) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: 20px;
}
#order-standard_cart .order-summary h2 {
  color: #fff !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  text-align: left !important;
  padding: 18px 22px !important;
  margin: 0 !important;
}
#order-standard_cart .order-summary .loader { color: rgba(255,255,255,.7) !important; top: -34px !important; }
#order-standard_cart .summary-container {
  background: var(--surface) !important;
  border-radius: 0 !important;
  padding: 20px 22px !important;
  font-size: .92rem !important;
  min-height: 0 !important;
}
#order-standard_cart .order-summary .bordered-totals {
  display: block;
  width: 100%;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .bordered-totals > div {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-soft) !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  font-size: 1rem !important;
  color: var(--text-muted);
}
#order-standard_cart .order-summary .subtotal span,
#order-standard_cart .order-summary .bordered-totals span { float: none !important; }
#order-standard_cart .order-summary .recurring-totals {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0 4px !important;
  margin: 0 !important;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--text);
}
#order-standard_cart .order-summary .recurring-totals span { float: none !important; }
#order-standard_cart .order-summary .recurring-charges {
  display: block;
  text-align: left !important;
  color: var(--text-faint) !important;
  font-style: normal !important;
  font-size: .78rem !important;
  margin-top: 2px;
}
#order-standard_cart .order-summary .total-due-today span { text-align: left !important; }
#order-standard_cart .order-summary .total-due-today .amt { color: var(--brand-1); font-family: 'Space Grotesk', sans-serif; }
#order-standard_cart .order-summary .btn-continue-shopping { color: var(--brand-1) !important; }
#order-standard_cart #producttotal:not(:has(.subtotal)) {
  text-align: center;
  color: var(--text-muted);
  padding: 10px 0;
}
#order-standard_cart #btnCompleteProductConfig,
#order-standard_cart #btnCheckoutButton { width: 100%; }

/* "Include TLDs" / "Maximum Length" dropdown buttons (bootstrap-
   multiselect) were inheriting the site's pill-shaped, gradient .btn
   styling meant for calls-to-action — too colorful/tall for a plain
   inline filter control. Force a simple neutral look. */
#order-standard_cart .domain-input-group .multiselect.btn {
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  padding: 6px 14px !important;
  font-weight: 500;
}
#order-standard_cart .domain-input-group .multiselect.btn:hover,
#order-standard_cart .domain-input-group .multiselect.btn:focus {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--brand-1) !important;
}

/* ---------------------------------------------------------
   PHASE 19 — "Review & Checkout" product table (cart.php?a=view)
   Base theme uses a dark-blue #058 header/border and gray zebra
   striping left over from the default WHMCS demo colors — replace
   with the site's own card language.
--------------------------------------------------------- */
#order-standard_cart .view-cart-items-header {
  background: var(--surface-alt) !important;
  color: var(--text-muted) !important;
  font-size: .78rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 14px 18px !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
#order-standard_cart .view-cart-items {
  border: 1px solid var(--border-soft);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin-bottom: 24px !important;
  overflow: hidden;
}
#order-standard_cart .view-cart-items .item {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-soft) !important;
  padding: 16px 18px !important;
  font-size: .92rem !important;
}
#order-standard_cart .view-cart-items .item:last-child { border-bottom: none !important; }
#order-standard_cart .view-cart-items .item-title {
  font-size: 1.05rem !important;
  font-weight: 700;
  color: var(--text);
}
#order-standard_cart .view-cart-items .item-title .btn-link {
  color: var(--brand-1) !important;
  font-size: .78rem !important;
  font-weight: 600;
}
#order-standard_cart .view-cart-items .item-group {
  font-size: .82rem !important;
  color: var(--text-faint);
}
#order-standard_cart .view-cart-items .item-domain {
  color: var(--brand-1) !important;
  font-weight: 600;
  font-size: .88rem !important;
}
#order-standard_cart .view-cart-items .item-price { text-align: right; }
#order-standard_cart .view-cart-items .item-price span {
  font-size: 1.1rem !important;
  font-weight: 700;
  color: var(--text);
}
#order-standard_cart .view-cart-items .item-price .cycle {
  font-size: .78rem !important;
  font-weight: 500;
  color: var(--text-faint);
}
#order-standard_cart .btn-remove-from-cart { color: var(--text-faint) !important; }
#order-standard_cart .btn-remove-from-cart:hover { color: var(--danger) !important; }

/* ---------------------------------------------------------
   PHASE 20 — Dashboard "Your Info" sidebar card
   WHMCS core renders this as a generic .panel-sidebar (same
   component as every other sidebar widget) — target it by its
   menuItemName since there's no template to edit directly, and give
   it a branded card treatment instead of the plain white box every
   other sidebar panel uses.
--------------------------------------------------------- */
.sidebar > [menuItemName="Client Details"] {
  background: var(--gradient-brand) !important;
  border: none !important;
  box-shadow: var(--shadow-md);
}
.sidebar > [menuItemName="Client Details"] .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.22) !important;
}
.sidebar > [menuItemName="Client Details"] .panel-title,
.sidebar > [menuItemName="Client Details"] .panel-title i { color: #fff !important; }
.sidebar > [menuItemName="Client Details"] .panel-body {
  color: rgba(255,255,255,.92);
  line-height: 1.6;
}
.sidebar > [menuItemName="Client Details"] .panel-body strong { color: #fff; font-size: 1.08rem; }
.sidebar > [menuItemName="Client Details"] .client-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  margin-bottom: 14px;
}
.sidebar > [menuItemName="Client Details"] .panel-footer {
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.22) !important;
}
.sidebar > [menuItemName="Client Details"] .btn-success {
  background: #fff !important;
  color: var(--brand-1) !important;
  border: none !important;
  box-shadow: none !important;
}
.sidebar > [menuItemName="Client Details"] .btn-success:hover { background: rgba(255,255,255,.9) !important; }

/* ---------------------------------------------------------
   PHASE 21 — User Management (account/users) + shared account
   list/invite card patterns (reused by Contacts)
--------------------------------------------------------- */
.btn-outline-danger {
  background: transparent !important;
  color: var(--danger) !important;
  border: 1.5px solid var(--danger) !important;
  box-shadow: none !important;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background: var(--danger) !important;
  color: #fff !important;
}

.ua-count { color: var(--text-muted); font-size: .9rem; margin-bottom: 14px; }
.ua-table-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 18px;
}
.ua-table.table { margin: 0; }
.ua-table.table > tbody > tr > th,
.ua-table.table > tr > th {
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: none !important;
  padding: 14px 18px !important;
}
.ua-table.table > tbody > tr > td,
.ua-table.table > tr > td {
  border-top: 1px solid var(--border-soft) !important;
  padding: 16px 18px !important;
  vertical-align: middle;
}
.ua-table .ua-email { font-weight: 700; color: var(--text); }
.ua-table .label-info {
  background: var(--brand-1) !important;
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: 3px 10px;
  vertical-align: middle;
}
.ua-table .fa-shield { margin-left: 4px; }
.ua-table small { color: var(--text-faint); }
.ua-subheading-row td {
  background: var(--surface-alt) !important;
  color: var(--text-muted);
  font-size: .78rem !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 18px !important;
}
.ua-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ua-note { color: var(--text-faint); font-size: .82rem; }

.ua-invite-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px 30px;
}
.ua-invite-card h2 { font-size: 1.15rem; margin-top: 0; margin-bottom: 8px; }
.ua-invite-card p { color: var(--text-muted); font-size: .9rem; }
.ua-invite-card .form-group { margin-bottom: 18px; }
.ua-permission-choice { display: flex; gap: 24px; }
.ua-permission-choice .radio-inline { margin: 0; font-weight: 500; }
#invitePermissions.well {
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: 16px 18px;
}
#invitePermissions .checkbox-inline { display: block; font-weight: 500; margin: 0 0 10px; }
#invitePermissions .checkbox-inline:last-of-type { margin-bottom: 0; }

/* ---------------------------------------------------------
   PHASE 22 — Email preview popup (viewemail.php)
--------------------------------------------------------- */
#popup-backdrop {
  background: var(--surface-muted) !important;
  padding: 30px 20px !important;
  display: flex;
  justify-content: center;
}
.email-preview-card {
  width: 100%;
  max-width: 760px;
  margin: 0;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.email-preview-heading.panel-heading {
  background: var(--gradient-dark) !important;
  border-bottom: none !important;
  padding: 28px 60px 28px 26px !important;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
}
.email-preview-heading.panel-heading::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(57, 121, 114,.4), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(184, 134, 63,.22), transparent 50%);
  z-index: 0;
}
.email-preview-heading > * { position: relative; z-index: 1; }
.email-preview-icon {
  width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: #fff;
}
.email-preview-kicker {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.6);
  margin-bottom: 3px;
}
.email-preview-card .panel-heading h2 {
  font-size: 1.15rem !important;
  font-weight: 700;
  margin: 0;
  color: #fff;
}
.email-preview-close {
  position: absolute;
  top: 14px; right: 16px;
  z-index: 2;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease);
}
.email-preview-close:hover { background: rgba(255,255,255,.22); }
.email-preview-attachments { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px !important; }
.email-preview-attachments span { font-size: .8rem; color: rgba(255,255,255,.75); }
.email-preview-attachments i { color: var(--brand-2); margin-right: 4px; }
.email-preview-card .panel-body.main-content { padding: 0 !important; }
.email-preview-card #emailPreviewFrame { display: block; }
.email-preview-card .panel-footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border-soft) !important;
  padding: 16px 22px !important;
}

/* ---------------------------------------------------------
   PHASE 23 — Contacts page (account/contacts)
--------------------------------------------------------- */
.contact-select-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--brand-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.contact-select-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.contact-select-row label {
  margin: 0;
  font-weight: 700;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.contact-select-row label i { color: var(--brand-1); }
.contact-select-row select.form-control { flex: 1 1 320px; margin: 0; }
.contact-select-row .btn { flex: 0 0 auto; }

.contact-form-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px 36px;
}
.contact-form-card .sub-heading {
  margin: 30px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--border-soft);
}
.contact-form-card .sub-heading:first-of-type { margin-top: 0; }
.contact-form-card .sub-heading span {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
}
.contact-form-card .control-label { font-weight: 600; font-size: .85rem; color: var(--text); }

.contact-email-prefs { border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; }
.contact-email-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}
.contact-email-pref-row:last-child { border-bottom: none; }
.contact-email-pref-row:nth-child(even) { background: var(--surface-muted); }
.contact-email-pref-row span { font-size: .9rem; color: var(--text); }

.contact-form-actions { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--border-soft); }
.contact-form-actions .btn { margin: 0 6px; }

/* ---------------------------------------------------------
   PHASE 24 — Domain register/transfer page (cart.php?a=add&domain=*)
--------------------------------------------------------- */
#order-standard_cart .cart-body .header-lined p { color: var(--text-muted); margin: 6px 0 0; }

/* Search-result card that appears under the checker once a lookup runs */
#DomainSearchResults {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 8px 0 4px;
  margin-top: 22px;
  overflow: hidden;
}
#DomainSearchResults .primary-domain-header,
.suggested-domains .panel-heading,
.suggested-domains .card-header {
  border-bottom: 1px solid var(--border-soft) !important;
  color: var(--text);
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
}
#DomainSearchResults .primary-domain-header i { color: var(--brand-2); margin-right: 6px; }
.domain-checker-result-headline { padding: 22px 26px; }
.domain-lookup-result .domain-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}
.domain-lookup-result .domain-price .price { font-size: 1.5rem; font-weight: 700; color: var(--text); font-family: 'Space Grotesk', sans-serif; }
.domain-lookup-result .btn-add-to-cart,
.domain-lookup-result .domain-contact-support {
  background: var(--gradient-brand) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--radius-input);
  padding: 11px 26px;
  font-weight: 600;
  box-shadow: var(--shadow-brand);
}
.domain-available.domain-checker-available { color: var(--success); font-weight: 600; }
.domain-unavailable.domain-checker-unavailable,
.domain-tld-unavailable.domain-checker-unavailable,
.domain-invalid.domain-checker-invalid { color: var(--danger); font-weight: 600; }

/* Spotlight TLDs (shown while searching / no query yet) */
.spotlight-tlds { background: transparent; padding: 4px 0 0; margin: 18px 0 0; }
.spotlight-tld {
  background: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm);
  color: var(--text) !important;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.spotlight-tld:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.spotlight-tld .price.available { color: var(--brand-1); font-weight: 700; }
.spotlight-tld .btn.btn-add-to-cart {
  background: var(--gradient-brand) !important;
  border: none !important;
  color: #fff !important;
}

/* Suggested domains list */
.suggested-domains {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 18px;
  box-shadow: var(--shadow-sm);
}
.suggested-domains .panel-heading,
.suggested-domains .card-header { background: var(--surface-alt); padding: 14px 20px; }
.suggested-domains .list-group-item {
  border-color: var(--border-soft) !important;
  padding: 14px 20px;
}
.suggested-domains .btn:not(.domain-contact-support) {
  background: var(--gradient-brand) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--radius-pill);
}

/* Featured TLD cards (.com / .net / .blog spotlight row) */
.featured-tlds-container { margin-top: 26px; }
.featured-tld {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.featured-tld:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Category filter pills ("Popular", "Technology", ...) */
.tld-filters { margin: 6px 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.tld-filters .badge {
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  background: var(--surface-alt) !important;
  color: var(--text-muted) !important;
}
.tld-filters .badge:not(.badge-success):hover { background: var(--border-soft) !important; color: var(--text) !important; }
.tld-filters .badge-success {
  background: var(--gradient-brand) !important;
  color: #fff !important;
  box-shadow: var(--shadow-brand);
}

/* TLD pricing table */
.domain-pricing { margin-top: 34px; }
.domain-pricing h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; margin-bottom: 14px; }
.domain-pricing .bg-white {
  background: var(--surface) !important;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-xs-4,
.domain-pricing .tld-pricing-header .col-sm-4 {
  background: var(--surface-alt) !important;
  border-bottom: 2px solid var(--brand-1) !important;
  color: var(--text-muted);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 0 !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.domain-pricing .tld-pricing-header div:nth-child(odd) { background: var(--surface-alt) !important; border-color: var(--brand-1) !important; }
.domain-pricing .tld-pricing-header .col-xs-4:first-child { color: var(--brand-1); }

.domain-pricing .tld-row {
  border-bottom: 1px solid var(--border-soft);
  transition: background .15s var(--ease);
  padding: 6px 0;
}
.domain-pricing .tld-row:last-of-type { border-bottom: none; }
.domain-pricing .tld-row:nth-child(even) { background: var(--surface-muted); }
.domain-pricing .tld-row:hover { background: rgba(57, 121, 114,.07) !important; }
.domain-pricing .tld-row.highlighted { background: rgba(57, 121, 114,.06) !important; }

.domain-pricing .two-row-center {
  border-right: 1px solid var(--border-soft);
  padding-left: 6px;
}
.domain-pricing .two-row-center strong {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  color: var(--text);
}
.domain-pricing .two-row-center strong::before {
  content: '';
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gradient-brand);
}
.domain-pricing .tld-sale-group {
  display: inline-block; margin-left: 4px; padding: 2px 8px;
  border-radius: var(--radius-pill); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; background: rgba(184, 134, 63,.14); color: var(--brand-2);
}

/* Price hierarchy: "New Price" is the primary CTA number, Transfer/Renewal are secondary */
.domain-pricing .tld-row .col-md-8 > .row > div:nth-child(1) {
  color: var(--brand-1);
  font-weight: 700;
  font-size: 1.02rem;
}
.domain-pricing .tld-row .col-md-8 > .row > div:nth-child(1) small { color: var(--text-faint); font-weight: 500; }
.domain-pricing .tld-row .col-md-8 > .row > div:nth-child(2),
.domain-pricing .tld-row .col-md-8 > .row > div:nth-child(3) {
  color: var(--text-muted);
  font-weight: 500;
  font-size: .92rem;
}
.domain-pricing .tld-row .col-md-8 > .row > div:nth-child(2) small,
.domain-pricing .tld-row .col-md-8 > .row > div:nth-child(3) small { color: var(--text-faint); }

/* Add-hosting / transfer-domain promo boxes */
.domain-promo-box {
  background: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  height: 100%;
  box-shadow: var(--shadow-sm);
}
.domain-promo-box .clearfix { margin-bottom: 6px; }
.domain-promo-box i.fa-4x {
  float: right;
  font-size: 1.6rem !important;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(57, 121, 114,.1);
  color: var(--brand-1);
}
.domain-promo-box h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.domain-promo-box .text-warning,
.domain-promo-box .text-primary { color: var(--text-muted) !important; font-weight: 500 !important; font-size: .88rem; }
.domain-promo-box p { color: var(--text-muted); }
.domain-promo-box .small { color: var(--text-faint); }
.domain-promo-box .btn {
  background: var(--gradient-brand) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--radius-input);
  padding: 11px 24px;
  font-weight: 600;
  box-shadow: var(--shadow-brand);
}

/* ---------------------------------------------------------
   PHASE 25 — Contact Us page
--------------------------------------------------------- */
.contact-page-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 10px;
}
.contact-info-col h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; margin-bottom: 10px; }
.contact-info-col > p { color: var(--text-muted); margin-bottom: 28px; }

.contact-info-list { list-style: none; margin: 0 0 28px; padding: 0; }
.contact-info-list li { display: flex; gap: 16px; margin-bottom: 24px; }
.contact-info-icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(57, 121, 114,.1);
  color: var(--brand-1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.contact-info-list strong { display: block; color: var(--text); margin-bottom: 3px; }
.contact-info-list p { color: var(--text-muted); font-size: .87rem; margin: 0 0 4px; }
.contact-info-list a { font-weight: 600; color: var(--brand-1); }

.contact-social-row { display: flex; gap: 10px; }
.contact-social-row a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.contact-social-row a:hover { background: var(--gradient-brand); color: #fff; border-color: transparent; transform: translateY(-2px); }

.contact-form-col .contact-form-card { padding: 34px 38px; }
.contact-form-col .control-label { font-weight: 600; font-size: .85rem; color: var(--text); }

@media (max-width: 767px) {
  .contact-page-grid { grid-template-columns: 1fr; }
  .contact-form-col .contact-form-card { padding: 26px 22px; }
}

/* ---------------------------------------------------------
   PHASE 26 — Domain transfer page (cart.php?a=add&domain=transfer)
--------------------------------------------------------- */
.transfer-domain-card { padding: 36px 40px; }
.transfer-domain-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.transfer-domain-card .form-group label {
  font-weight: 600;
  font-size: .85rem;
  color: var(--text);
}
.transfer-domain-card .form-control {
  border-radius: var(--radius-input) !important;
  border: 1.5px solid var(--border) !important;
  min-height: 48px;
  padding-left: 16px;
}
.transfer-domain-card .form-control:focus {
  border-color: var(--brand-1) !important;
  box-shadow: 0 0 0 4px rgba(57, 121, 114,.12) !important;
}
.transfer-domain-card label a {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-muted);
}
.transfer-domain-card label a:hover { color: var(--brand-1); }
.transfer-domain-card-footer { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border-soft); }
.transfer-domain-card .btn-transfer {
  background: var(--gradient-brand) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--radius-input);
  padding: 13px 40px;
  font-weight: 600;
  box-shadow: var(--shadow-brand);
}
.transfer-domain-footnote { color: var(--text-faint); margin-top: 18px; }

/* ---------------------------------------------------------
   PHASE 27 — Domain search bar (cart.php?a=add&domain=register)
   One pill: search icon + borderless input + joined button.
--------------------------------------------------------- */
#order-standard_cart .domain-checker-container .input-group-box {
  display: flex !important;
  align-items: stretch;
  gap: 0;
  padding: 6px;
  background: #fff;
  border-radius: 18px !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .30);
  transition: box-shadow .25s var(--ease);
}
#order-standard_cart .domain-checker-container .input-group-box:focus-within {
  box-shadow: 0 28px 60px rgba(0, 0, 0, .38);
}

/* Input: no border in any state, icon on the left */
#order-standard_cart .domain-checker-container .input-group-box .form-control,
#order-standard_cart .domain-checker-container .input-group-box .form-control:hover,
#order-standard_cart .domain-checker-container .input-group-box .form-control:focus,
#order-standard_cart .domain-checker-container .input-group-box .form-control:active {
  flex: 1 1 auto;
  width: 100%;
  height: 58px;
  margin: 0;
  padding: 0 18px 0 56px;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23397972' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 20px center;
  background-size: 22px;
  border-radius: 12px 0 0 12px !important;
  font-size: 1.08rem;
  color: var(--text);
}
#order-standard_cart .domain-checker-container .input-group-box .form-control::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

/* Button: joined to the input, inside the pill */
#order-standard_cart .domain-checker-container .input-group-box .input-group-btn {
  display: flex;
  width: auto;
  flex: 0 0 auto;
  padding: 0;
}
#order-standard_cart .domain-checker-container .input-group-box .input-group-btn .btn,
#order-standard_cart .domain-checker-container.domain-checker-advanced #btnCheckAvailability {
  position: relative;
  right: auto;
  top: auto;
  width: auto;
  min-width: 132px;
  height: 58px;
  margin: 0;
  padding: 0 34px;
  border-radius: 0 12px 12px 0 !important;
  box-shadow: none;
  font-size: 1.02rem;
  font-weight: 600;
}
#order-standard_cart .domain-checker-container .input-group-box .input-group-btn .btn,
#order-standard_cart .domain-checker-container .input-group-box .input-group-btn .btn:hover,
#order-standard_cart .domain-checker-container .input-group-box .input-group-btn .btn:focus,
#order-standard_cart .domain-checker-container .input-group-box .input-group-btn .btn:active,
#order-standard_cart .domain-checker-container .input-group-box .input-group-btn .btn.disabled,
#order-standard_cart .domain-checker-container .input-group-box .input-group-btn .btn[disabled] {
  transform: none !important;
  top: 0 !important;
  margin: 0 !important;
}
#order-standard_cart .domain-checker-container .input-group-box .input-group-btn .btn:hover { filter: brightness(1.08); }
#order-standard_cart .domain-checker-container .input-group-box .input-group-btn .btn:active { filter: brightness(.94); }
#order-standard_cart .domain-checker-container .input-group-box .input-group-btn .btn.disabled,
#order-standard_cart .domain-checker-container .input-group-box .input-group-btn .btn[disabled] { opacity: .8; cursor: progress; }
.domain-search-defaults { display: none !important; }

@media (max-width: 575px) {
  #order-standard_cart .domain-checker-container .input-group-box { padding: 5px; border-radius: 16px !important; }
  #order-standard_cart .domain-checker-container .input-group-box .form-control { height: 52px; padding-left: 46px; background-position: 15px center; background-size: 20px; font-size: 1rem; }
  #order-standard_cart .domain-checker-container .input-group-box .input-group-btn { display: flex; width: auto; }
  #order-standard_cart .domain-checker-container .input-group-box .input-group-btn .btn { width: auto; min-width: 96px; height: 52px; padding: 0 18px; border-radius: 0 11px 11px 0 !important; }
}