/*
 * ============================================================
 *  PRIORTECH LABS — WHMCS Custom Theme
 *  Matches: priortechlabs.com / priortech.co.tz
 *  Template Target: WHMCS Six (default)
 *  Theme: Dark Navy + Purple Accent
 * ============================================================
 *
 *  INSTALL:
 *  Upload to → /templates/six/css/custom.css
 *  OR paste into → WHMCS Admin > General Settings > Styling > Custom CSS
 *
 * ============================================================
 */


/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url('//priortech.co.tz/billing/templates/six/css/https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=DM+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand Colors */
  --pt-majorelle:     #6d40e9;
  --pt-violet:        #892eef;
  --pt-indigo:        #47227e;
  --pt-royal:         #316ae7;

  /* Dark Theme Backgrounds */
  --pt-bg:            #0d0b1e;
  --pt-bg-2:          #13102a;
  --pt-bg-3:          #1c1840;

  /* Light section (pricing cards) */
  --pt-light-border:  #e8e5f5;
  --pt-ink:           #0d0d0f;
  --pt-muted-dark:    #6b6880;

  /* Text on dark */
  --pt-text-white:    #ffffff;
  --pt-text-dim:      rgba(255, 255, 255, 0.65);
  --pt-text-muted:    rgba(255, 255, 255, 0.38);

  /* Borders */
  --pt-border-dark:   rgba(255, 255, 255, 0.08);

  /* Typography */
  --pt-font-head:     'Bricolage Grotesque', 'DM Sans', sans-serif;
  --pt-font-body:     'DM Sans', system-ui, sans-serif;
  --pt-font-mono:     'Space Mono', 'Courier New', monospace;

  /* Radius */
  --pt-radius-sm:     6px;
  --pt-radius:        12px;
  --pt-radius-lg:     18px;
  --pt-radius-pill:   999px;

  /* Gradients */
  --pt-grad-primary:  linear-gradient(135deg, #6d40e9 0%, #892eef 100%);
  --pt-grad-dark:     linear-gradient(135deg, #0d0b1e 0%, #1a1040 50%, #0d0b1e 100%);

  /* Shadows */
  --pt-shadow-card:   0 4px 24px rgba(0,0,0,0.35);
  --pt-shadow-glow:   0 0 0 1px rgba(109,64,233,0.45), 0 8px 32px rgba(109,64,233,0.28);
  --pt-shadow-light:  0 4px 16px rgba(109,64,233,0.12), 0 1px 4px rgba(0,0,0,0.06);

  --pt-t:             0.2s cubic-bezier(0.4,0,0.2,1);
}


/* ============================================================
   2. GLOBAL BASE
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  font-family: var(--pt-font-body) !important;
  background-color: var(--pt-bg) !important;
  color: var(--pt-text-white) !important;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pt-font-head) !important;
  font-weight: 800 !important;
  color: var(--pt-text-white) !important;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

a {
  color: var(--pt-majorelle) !important;
  text-decoration: none !important;
  transition: color var(--pt-t) !important;
}
a:hover { color: var(--pt-violet) !important; }

p { color: var(--pt-text-dim); line-height: 1.7; }

small, .text-muted, .help-block {
  color: var(--pt-text-muted) !important;
  font-size: 0.84em;
}

code, pre {
  font-family: var(--pt-font-mono) !important;
  font-size: 0.875em;
  background: rgba(109,64,233,0.15) !important;
  border: 1px solid rgba(109,64,233,0.25) !important;
  border-radius: var(--pt-radius-sm) !important;
  color: #c4b5fd !important;
  padding: 2px 6px !important;
}

hr {
  border: none !important;
  border-top: 1px solid var(--pt-border-dark) !important;
  margin: 28px 0 !important;
}

::selection {
  background: rgba(109,64,233,0.40);
  color: #ffffff;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--pt-bg); }
::-webkit-scrollbar-thumb { background: rgba(109,64,233,0.45); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--pt-majorelle); }


/* ============================================================
   3. NAVIGATION / HEADER
   ============================================================ */

#header,
.navbar,
.navbar-default,
nav.navbar {
  background: rgba(13, 11, 30, 0.94) !important;
  border: none !important;
  border-bottom: 1px solid var(--pt-border-dark) !important;
  box-shadow: 0 1px 24px rgba(0,0,0,0.40) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Pill container — matches scrolled nav in screenshots */
.navbar > .container,
.navbar > .container-fluid {
  background: rgba(28, 24, 64, 0.85) !important;
  border-radius: var(--pt-radius-pill) !important;
  border: 1px solid rgba(109,64,233,0.18) !important;
  padding: 6px 14px !important;
  margin: 8px auto !important;
  max-width: 1200px;
}

.navbar-brand {
  padding: 8px 16px !important;
  font-family: var(--pt-font-head) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  color: var(--pt-text-white) !important;
}
.navbar-brand:hover { color: var(--pt-text-white) !important; }

.navbar-nav > li > a,
.navbar-default .navbar-nav > li > a {
  font-family: var(--pt-font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--pt-text-dim) !important;
  padding: 10px 15px !important;
  border-radius: var(--pt-radius-pill) !important;
  transition: all var(--pt-t) !important;
}

.navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:hover {
  color: var(--pt-text-white) !important;
  background: rgba(109,64,233,0.15) !important;
}

/* Active pill — solid purple like "Home" in screenshots */
.navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a {
  background: var(--pt-majorelle) !important;
  color: #ffffff !important;
}

/* Dropdown */
.navbar .dropdown-menu {
  background: var(--pt-bg-3) !important;
  border: 1px solid var(--pt-border-dark) !important;
  border-radius: var(--pt-radius) !important;
  box-shadow: var(--pt-shadow-card) !important;
  padding: 8px !important;
  margin-top: 6px !important;
}

.navbar .dropdown-menu > li > a {
  color: var(--pt-text-dim) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 9px 14px !important;
  border-radius: var(--pt-radius-sm) !important;
  transition: all var(--pt-t) !important;
}

.navbar .dropdown-menu > li > a:hover {
  background: rgba(109,64,233,0.18) !important;
  color: var(--pt-text-white) !important;
}

.navbar-toggle {
  border: 1px solid var(--pt-border-dark) !important;
  border-radius: var(--pt-radius-sm) !important;
}
.navbar-toggle .icon-bar { background: var(--pt-text-dim) !important; }

.navbar-collapse {
  background: var(--pt-bg-2) !important;
  border-top: 1px solid var(--pt-border-dark) !important;
}


/* ============================================================
   4. PAGE HERO / BANNER
   ============================================================ */

.main-header,
.page-header,
#slider,
.hero-section,
.jumbotron {
  background: var(--pt-grad-dark) !important;
  border: none !important;
  border-bottom: 1px solid var(--pt-border-dark) !important;
  padding: 72px 24px !important;
  position: relative;
  overflow: hidden;
}

.main-header::before,
.page-header::before,
.jumbotron::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(137,46,239,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 15% 30%, rgba(49,106,231,0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.main-header > *, .page-header > *, .jumbotron > * { position: relative; z-index: 1; }

.main-header h1, .page-header h1, .jumbotron h1 { color: var(--pt-text-white) !important; }
.main-header p, .page-header p, .jumbotron p { color: var(--pt-text-dim) !important; }


/* ============================================================
   5. BUTTONS
   ============================================================ */

/* Primary — solid purple pill (matches "Get Started", "Search →") */
.btn-primary,
.btn-success,
input[type="submit"],
button[type="submit"] {
  background: var(--pt-majorelle) !important;
  border: none !important;
  border-radius: var(--pt-radius-pill) !important;
  color: #ffffff !important;
  font-family: var(--pt-font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 11px 26px !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 16px rgba(109,64,233,0.40) !important;
  transition: all var(--pt-t) !important;
  cursor: pointer !important;
}

.btn-primary:hover,
.btn-success:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--pt-violet) !important;
  box-shadow: 0 6px 22px rgba(137,46,239,0.50) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

.btn-primary:active { transform: translateY(0) !important; }

/* Secondary / outline — matches "WhatsApp Us ◎" */
.btn-default,
.btn-secondary {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  border-radius: var(--pt-radius-pill) !important;
  color: var(--pt-text-white) !important;
  font-family: var(--pt-font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 11px 26px !important;
  transition: all var(--pt-t) !important;
}

.btn-default:hover {
  border-color: var(--pt-majorelle) !important;
  background: rgba(109,64,233,0.12) !important;
  color: var(--pt-text-white) !important;
}

.btn-danger {
  background: #ef4444 !important;
  border: none !important;
  border-radius: var(--pt-radius-pill) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.btn-danger:hover { background: #dc2626 !important; color: #ffffff !important; }

.btn-info {
  background: var(--pt-royal) !important;
  border: none !important;
  border-radius: var(--pt-radius-pill) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.btn-link { color: var(--pt-majorelle) !important; font-weight: 600 !important; }
.btn-link:hover { color: var(--pt-violet) !important; }

.btn-lg { padding: 14px 34px !important; font-size: 15px !important; }
.btn-sm { padding: 6px 16px !important; font-size: 12px !important; }
.btn-xs { padding: 4px 10px !important; font-size: 11px !important; }


/* ============================================================
   6. FORMS & INPUTS
   ============================================================ */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
select,
textarea {
  font-family: var(--pt-font-body) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--pt-radius) !important;
  color: var(--pt-text-white) !important;
  font-size: 14px !important;
  padding: 11px 16px !important;
  height: auto !important;
  transition: border-color var(--pt-t), box-shadow var(--pt-t) !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  background: rgba(255,255,255,0.09) !important;
  border-color: var(--pt-majorelle) !important;
  box-shadow: 0 0 0 3px rgba(109,64,233,0.22) !important;
  outline: none !important;
  color: var(--pt-text-white) !important;
}

.form-control::placeholder { color: rgba(255,255,255,0.32) !important; }

select.form-control {
  background-image: url("//priortech.co.tz/billing/templates/six/css/data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236d40e9' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px !important;
  padding-right: 38px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

select option { background: var(--pt-bg-3) !important; color: var(--pt-text-white) !important; }

label, .control-label {
  font-family: var(--pt-font-body) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--pt-text-muted) !important;
  margin-bottom: 7px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.input-group-addon {
  background: rgba(109,64,233,0.15) !important;
  border: 1.5px solid rgba(255,255,255,0.10) !important;
  color: var(--pt-text-dim) !important;
  font-family: var(--pt-font-mono) !important;
  font-size: 13px !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--pt-majorelle) !important;
  width: 16px !important;
  height: 16px !important;
}

.has-error .form-control  { border-color: #ef4444 !important; }
.has-success .form-control { border-color: #22c55e !important; }
.has-error .help-block, .has-error .control-label { color: #f87171 !important; }
.has-success .help-block   { color: #4ade80 !important; }
.form-group { margin-bottom: 20px !important; }


/* ============================================================
   7. PANELS / CARDS
   ============================================================ */

.panel, .card {
  background: var(--pt-bg-3) !important;
  border: 1px solid var(--pt-border-dark) !important;
  border-radius: var(--pt-radius-lg) !important;
  box-shadow: var(--pt-shadow-card) !important;
  overflow: hidden;
  color: var(--pt-text-white) !important;
}

.well {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--pt-border-dark) !important;
  border-radius: var(--pt-radius) !important;
  box-shadow: none !important;
  padding: 18px !important;
  color: var(--pt-text-dim) !important;
}

.panel-heading, .card-header {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid var(--pt-border-dark) !important;
  padding: 16px 22px !important;
  font-family: var(--pt-font-head) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: var(--pt-text-white) !important;
}

.panel-body, .card-body { padding: 24px !important; }

.panel-footer, .card-footer {
  background: rgba(255,255,255,0.03) !important;
  border-top: 1px solid var(--pt-border-dark) !important;
  padding: 14px 22px !important;
}

.panel-primary > .panel-heading {
  background: var(--pt-grad-primary) !important;
  border: none !important;
  color: #ffffff !important;
}

.panel-success > .panel-heading { background: rgba(34,197,94,0.18) !important; color: #4ade80 !important; }
.panel-danger  > .panel-heading { background: rgba(239,68,68,0.18) !important; color: #f87171 !important; }
.panel-warning > .panel-heading { background: rgba(245,158,11,0.18) !important; color: #fbbf24 !important; }
.panel-info    > .panel-heading { background: rgba(49,106,231,0.18) !important; color: #93c5fd !important; }


/* ============================================================
   8. ALERTS
   ============================================================ */

.alert {
  border-radius: var(--pt-radius) !important;
  border: none !important;
  border-left: 4px solid transparent !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 14px 18px !important;
}

.alert-success { background: rgba(34,197,94,0.12) !important;   border-left-color: #22c55e !important; color: #4ade80 !important; }
.alert-danger  { background: rgba(239,68,68,0.12) !important;   border-left-color: #ef4444 !important; color: #f87171 !important; }
.alert-warning { background: rgba(245,158,11,0.12) !important;  border-left-color: #f59e0b !important; color: #fbbf24 !important; }
.alert-info    { background: rgba(49,106,231,0.12) !important;  border-left-color: var(--pt-royal) !important; color: #93c5fd !important; }

.alert .close { color: rgba(255,255,255,0.50) !important; opacity: 1 !important; text-shadow: none !important; }
.alert .close:hover { color: rgba(255,255,255,0.90) !important; }


/* ============================================================
   9. TABLES
   ============================================================ */

.table { font-size: 14px !important; }

.table > thead > tr > th {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.38) !important;
  font-family: var(--pt-font-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--pt-border-dark) !important;
  border-top: none !important;
}

.table > tbody > tr > td {
  padding: 14px 18px !important;
  border-top: 1px solid var(--pt-border-dark) !important;
  color: var(--pt-text-dim) !important;
  vertical-align: middle !important;
}

.table > tbody > tr:hover > td { background: rgba(109,64,233,0.07) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(255,255,255,0.02) !important; }

.table-responsive {
  border: 1px solid var(--pt-border-dark) !important;
  border-radius: var(--pt-radius-lg) !important;
  overflow: hidden !important;
}

.table .price, .table td.price, .table .amount {
  font-family: var(--pt-font-mono) !important;
  color: var(--pt-majorelle) !important;
  font-weight: 700 !important;
}


/* ============================================================
   10. BADGES & LABELS
   ============================================================ */

.badge, .label {
  font-family: var(--pt-font-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.07em !important;
  padding: 4px 10px !important;
  border-radius: var(--pt-radius-pill) !important;
  text-transform: uppercase;
}

.badge, .label-default { background: rgba(255,255,255,0.09) !important; color: var(--pt-text-dim) !important; }

/* Purple — matches "POPULAR" badge */
.label-primary, .badge-primary {
  background: var(--pt-majorelle) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(109,64,233,0.40) !important;
}

.label-success, .badge-success { background: rgba(34,197,94,0.18) !important; color: #4ade80 !important; border: 1px solid rgba(34,197,94,0.3) !important; }
.label-danger,  .badge-danger  { background: rgba(239,68,68,0.18) !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,0.3) !important; }
.label-warning, .badge-warning { background: rgba(245,158,11,0.18) !important; color: #fbbf24 !important; border: 1px solid rgba(245,158,11,0.3) !important; }
.label-info,    .badge-info    { background: rgba(49,106,231,0.18) !important; color: #93c5fd !important; border: 1px solid rgba(49,106,231,0.3) !important; }


/* ============================================================
   11. PRICING / PRODUCT CARDS
      White cards with ink text (matches screenshots pricing section)
   ============================================================ */

.product-list .product,
.package,
.pricing-container .package {
  background: #ffffff !important;
  border: 1.5px solid #e8e5f5 !important;
  border-radius: var(--pt-radius-lg) !important;
  box-shadow: var(--pt-shadow-light) !important;
  transition: all var(--pt-t) !important;
  overflow: hidden;
  color: var(--pt-ink) !important;
  position: relative;
}

.product-list .product:hover,
.package:hover {
  box-shadow: 0 8px 32px rgba(109,64,233,0.18), 0 2px 8px rgba(0,0,0,0.07) !important;
  border-color: var(--pt-majorelle) !important;
  transform: translateY(-3px) !important;
}

/* Featured card */
.package.highlight,
.package.featured,
.product.featured {
  border-color: var(--pt-majorelle) !important;
  box-shadow: var(--pt-shadow-glow) !important;
}

/* "MOST POPULAR" pill above card — matches screenshot */
.package.highlight::before,
.package.featured::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pt-grad-primary);
  color: #ffffff;
  font-family: var(--pt-font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 5px 16px;
  border-radius: var(--pt-radius-pill);
  white-space: nowrap;
}

/* Plan name */
.package h2, .package h3, .package .package-name {
  font-family: var(--pt-font-head) !important;
  font-weight: 800 !important;
  color: var(--pt-ink) !important;
  font-size: 20px !important;
}

.package p, .package .package-description {
  color: var(--pt-muted-dark) !important;
  font-size: 14px !important;
}

/* Price — large bold, matches "TZS 5,500 /month" */
.package .price, .package-price {
  font-family: var(--pt-font-head) !important;
  font-weight: 800 !important;
  font-size: 30px !important;
  color: var(--pt-ink) !important;
  line-height: 1 !important;
  margin: 14px 0 4px !important;
}

.package .price .period, .package .price-period {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--pt-muted-dark) !important;
}

/* Annual price pill — matches "TZS 66,000 billed annually" */
.package .annual-price,
.package .billing-cycle-price {
  display: inline-block !important;
  background: #f0eefa !important;
  color: var(--pt-muted-dark) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: var(--pt-radius-pill) !important;
  margin: 8px 0 16px !important;
}

/* Feature list */
.package ul, .package .features {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 !important;
}

.package ul li, .package .features li {
  padding: 8px 0 !important;
  border-bottom: 1px solid #f0eefa !important;
  font-size: 14px !important;
  color: var(--pt-ink) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.package ul li:last-child, .package .features li:last-child { border-bottom: none !important; }

/* Purple checkmark */
.package ul li::before {
  content: '✓';
  color: var(--pt-majorelle);
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}


/* ============================================================
   12. DOMAIN SEARCH
   ============================================================ */

.domain-checker, #domain-search, .domainchecker {
  background: var(--pt-bg-2) !important;
  border: 1px solid var(--pt-border-dark) !important;
  border-radius: var(--pt-radius-lg) !important;
  padding: 32px !important;
  position: relative;
  overflow: hidden;
}

.domain-checker::before, #domain-search::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(109,64,233,0.14) 0%, transparent 70%);
  pointer-events: none;
}

.domain-checker h2, .domain-checker h3, #domain-search h2 {
  color: var(--pt-text-white) !important;
  font-family: var(--pt-font-head) !important;
  font-weight: 800 !important;
}

.domain-available   { color: #4ade80 !important; font-weight: 700 !important; }
.domain-unavailable { color: #f87171 !important; font-weight: 700 !important; }

/* TLD extension pills — ".co.tz TZS 23K" style */
.tld-list .tld,
.tld-prices .tld-price,
.extension-pricing span,
.domain-extension {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--pt-radius-pill) !important;
  color: var(--pt-text-dim) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 5px 14px !important;
  display: inline-block !important;
  margin: 4px !important;
  transition: all var(--pt-t) !important;
}

.tld-list .tld:hover, .domain-extension:hover {
  border-color: var(--pt-majorelle) !important;
  background: rgba(109,64,233,0.14) !important;
  color: var(--pt-text-white) !important;
}

.tld-list .tld .price, .domain-extension .price {
  font-family: var(--pt-font-mono) !important;
  color: var(--pt-majorelle) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}


/* ============================================================
   13. SIDEBAR — CLIENT AREA
   ============================================================ */

#sidebar, .sidebar, .sidebar-menu {
  background: var(--pt-bg-3) !important;
  border: 1px solid var(--pt-border-dark) !important;
  border-radius: var(--pt-radius-lg) !important;
  overflow: hidden !important;
}

.sidebar .list-group-item, #sidebar .list-group-item, .sidebar-menu li a {
  background: transparent !important;
  border-color: var(--pt-border-dark) !important;
  color: var(--pt-text-dim) !important;
  font-family: var(--pt-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 12px 20px !important;
  transition: all var(--pt-t) !important;
}

.sidebar .list-group-item:hover, #sidebar .list-group-item:hover, .sidebar-menu li a:hover {
  background: rgba(109,64,233,0.12) !important;
  color: var(--pt-text-white) !important;
}

.sidebar .list-group-item.active, #sidebar .list-group-item.active, .sidebar-menu li.active a {
  background: rgba(109,64,233,0.20) !important;
  color: #c4b5fd !important;
  border-left: 3px solid var(--pt-majorelle) !important;
  font-weight: 700 !important;
}


/* ============================================================
   14. TABS & PILLS
   ============================================================ */

.nav-tabs { border-bottom: 1px solid var(--pt-border-dark) !important; }

.nav-tabs > li > a {
  color: var(--pt-text-muted) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 18px !important;
  background: transparent !important;
  transition: all var(--pt-t) !important;
}

.nav-tabs > li > a:hover {
  color: var(--pt-text-white) !important;
  border-bottom-color: rgba(109,64,233,0.4) !important;
  background: transparent !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--pt-text-white) !important;
  border: none !important;
  border-bottom: 2px solid var(--pt-majorelle) !important;
  background: transparent !important;
  font-weight: 700 !important;
}

.nav-pills > li > a {
  color: var(--pt-text-dim) !important;
  font-weight: 600 !important;
  border-radius: var(--pt-radius-pill) !important;
  padding: 8px 18px !important;
  transition: all var(--pt-t) !important;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover {
  background: var(--pt-grad-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(109,64,233,0.35) !important;
}


/* ============================================================
   15. BREADCRUMBS
   ============================================================ */

.breadcrumb {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--pt-border-dark) !important;
  border-radius: var(--pt-radius-pill) !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.breadcrumb > li + li::before { color: var(--pt-text-muted) !important; content: '/' !important; }
.breadcrumb a { color: var(--pt-text-muted) !important; }
.breadcrumb a:hover { color: var(--pt-majorelle) !important; }
.breadcrumb > .active { color: var(--pt-text-dim) !important; }


/* ============================================================
   16. PAGINATION
   ============================================================ */

.pagination > li > a, .pagination > li > span {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--pt-border-dark) !important;
  color: var(--pt-text-dim) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 8px 14px !important;
  transition: all var(--pt-t) !important;
}

.pagination > li > a:hover {
  background: rgba(109,64,233,0.15) !important;
  border-color: var(--pt-majorelle) !important;
  color: var(--pt-text-white) !important;
}

.pagination > .active > a, .pagination > .active > span {
  background: var(--pt-majorelle) !important;
  border-color: var(--pt-majorelle) !important;
  color: #ffffff !important;
}

.pagination > li:first-child > a { border-radius: var(--pt-radius-pill) 0 0 var(--pt-radius-pill) !important; }
.pagination > li:last-child > a  { border-radius: 0 var(--pt-radius-pill) var(--pt-radius-pill) 0 !important; }


/* ============================================================
   17. FOOTER
   ============================================================ */

#footer, footer, .footer {
  background: var(--pt-bg-2) !important;
  border-top: 1px solid var(--pt-border-dark) !important;
  color: var(--pt-text-muted) !important;
  padding: 36px 24px !important;
  font-size: 13px !important;
  font-family: var(--pt-font-body) !important;
}

#footer a, footer a, .footer a { color: var(--pt-text-muted) !important; }
#footer a:hover, footer a:hover, .footer a:hover { color: var(--pt-majorelle) !important; }
#footer p, footer p, .footer p { color: var(--pt-text-muted) !important; margin: 0; }

.footer .powered-by, #footer .powered-by {
  font-family: var(--pt-font-mono) !important;
  font-size: 10px !important;
  opacity: 0.32;
  letter-spacing: 0.05em;
}


/* ============================================================
   18. CART & CHECKOUT
   ============================================================ */

#cart, .cart-summary, .order-summary {
  background: var(--pt-bg-3) !important;
  border: 1px solid var(--pt-border-dark) !important;
  border-radius: var(--pt-radius-lg) !important;
}

.cart-summary .panel-heading, .order-summary .panel-heading {
  background: var(--pt-grad-primary) !important;
  border: none !important;
  color: #ffffff !important;
}

.cart-total, .order-total, tr.total td {
  font-family: var(--pt-font-mono) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--pt-majorelle) !important;
  background: rgba(109,64,233,0.08) !important;
}

.progress {
  background: rgba(255,255,255,0.08) !important;
  border-radius: var(--pt-radius-pill) !important;
  height: 6px !important;
  box-shadow: none !important;
}

.progress-bar {
  background: var(--pt-grad-primary) !important;
  border-radius: var(--pt-radius-pill) !important;
  transition: width 0.6s ease !important;
}

.progress-bar-success { background: #22c55e !important; }
.progress-bar-danger  { background: #ef4444 !important; }
.progress-bar-warning { background: #f59e0b !important; }


/* ============================================================
   19. CLIENT AREA STATUS LABELS
   ============================================================ */

.label-active, .status-active {
  background: rgba(34,197,94,0.15) !important; color: #4ade80 !important;
  border: 1px solid rgba(34,197,94,0.3) !important; border-radius: var(--pt-radius-pill) !important;
  font-size: 10px !important; font-weight: 700 !important; padding: 4px 10px !important;
  text-transform: uppercase; letter-spacing: 0.06em;
}

.label-suspended, .status-suspended {
  background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important;
  border: 1px solid rgba(245,158,11,0.3) !important; border-radius: var(--pt-radius-pill) !important;
  font-size: 10px !important; font-weight: 700 !important; padding: 4px 10px !important;
}

.label-terminated, .label-cancelled, .status-terminated {
  background: rgba(239,68,68,0.15) !important; color: #f87171 !important;
  border: 1px solid rgba(239,68,68,0.3) !important; border-radius: var(--pt-radius-pill) !important;
  font-size: 10px !important; font-weight: 700 !important; padding: 4px 10px !important;
}

.stat-number, .dashboard-stats .count {
  font-family: var(--pt-font-mono) !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  color: var(--pt-majorelle) !important;
}

.invoice-unpaid { color: #f87171 !important; font-weight: 700 !important; }
.invoice-paid   { color: #4ade80 !important; font-weight: 700 !important; }
.invoice-overdue{ color: #fbbf24 !important; font-weight: 700 !important; }


/* ============================================================
   20. SUPPORT TICKETS
   ============================================================ */

.ticket-open    { border-left: 3px solid var(--pt-royal) !important; }
.ticket-answered{ border-left: 3px solid #22c55e !important; }
.ticket-closed  { border-left: 3px solid rgba(255,255,255,0.18) !important; }

.ticket-message-staff {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--pt-border-dark) !important;
  border-radius: 0 var(--pt-radius-lg) var(--pt-radius-lg) var(--pt-radius-lg) !important;
  padding: 16px !important;
  color: var(--pt-text-dim) !important;
}

.ticket-message-client {
  background: rgba(109,64,233,0.09) !important;
  border: 1px solid rgba(109,64,233,0.18) !important;
  border-radius: var(--pt-radius-lg) 0 var(--pt-radius-lg) var(--pt-radius-lg) !important;
  padding: 16px !important;
  color: var(--pt-text-dim) !important;
}


/* ============================================================
   21. LOGIN / REGISTER
   ============================================================ */

.login-panel, #login-form, .register-panel {
  max-width: 440px !important;
  margin: 48px auto !important;
  background: var(--pt-bg-3) !important;
  border: 1px solid var(--pt-border-dark) !important;
  border-radius: var(--pt-radius-lg) !important;
  box-shadow: var(--pt-shadow-card) !important;
  overflow: hidden;
}

.login-panel .panel-heading, #login-form .panel-heading {
  background: var(--pt-grad-primary) !important;
  color: #ffffff !important;
  text-align: center !important;
  padding: 30px 24px !important;
  border: none !important;
}

.login-panel .panel-heading h2, .login-panel .panel-heading h3,
#login-form .panel-heading h2, #login-form .panel-heading h3 {
  color: #ffffff !important;
  font-family: var(--pt-font-head) !important;
  font-weight: 800 !important;
  margin: 0 !important;
  font-size: 22px !important;
}

.login-panel .panel-body, #login-form .panel-body { padding: 34px !important; }
.login-panel a { color: var(--pt-majorelle) !important; font-weight: 600 !important; }


/* ============================================================
   22. MODALS
   ============================================================ */

.modal-content {
  background: var(--pt-bg-3) !important;
  border: 1px solid var(--pt-border-dark) !important;
  border-radius: var(--pt-radius-lg) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.65) !important;
  overflow: hidden !important;
  color: var(--pt-text-white) !important;
}

.modal-header {
  background: var(--pt-grad-primary) !important;
  border: none !important;
  padding: 20px 26px !important;
}

.modal-title {
  color: #ffffff !important;
  font-family: var(--pt-font-head) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}

.modal-header .close {
  color: rgba(255,255,255,0.70) !important;
  opacity: 1 !important;
  font-size: 22px !important;
  text-shadow: none !important;
}

.modal-body { padding: 26px !important; color: var(--pt-text-dim) !important; }
.modal-footer { background: rgba(255,255,255,0.03) !important; border-top: 1px solid var(--pt-border-dark) !important; padding: 16px 26px !important; }

.modal-backdrop {
  background: rgba(4, 3, 16, 0.82) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}


/* ============================================================
   23. ANNOUNCEMENTS
   ============================================================ */

.announcements .announcement, .news-item {
  background: var(--pt-bg-3) !important;
  border: 1px solid var(--pt-border-dark) !important;
  border-radius: var(--pt-radius-lg) !important;
  padding: 22px !important;
  margin-bottom: 16px !important;
  transition: all var(--pt-t) !important;
}

.announcements .announcement:hover {
  border-color: rgba(109,64,233,0.40) !important;
  box-shadow: var(--pt-shadow-card) !important;
}

.announcements .announcement h2, .announcements .announcement h3 {
  font-size: 17px !important;
  color: var(--pt-text-white) !important;
}

.announcements .announcement .date {
  font-family: var(--pt-font-mono) !important;
  font-size: 11px !important;
  color: var(--pt-text-muted) !important;
  letter-spacing: 0.05em;
}

.announcements .announcement p { color: var(--pt-text-dim) !important; }


/* ============================================================
   24. KNOWLEDGEBASE
   ============================================================ */

.knowledgebase-categories .kb-category {
  background: var(--pt-bg-3) !important;
  border: 1px solid var(--pt-border-dark) !important;
  border-radius: var(--pt-radius-lg) !important;
  padding: 24px !important;
  text-align: center;
  transition: all var(--pt-t) !important;
}

.knowledgebase-categories .kb-category:hover {
  border-color: rgba(109,64,233,0.45) !important;
  box-shadow: var(--pt-shadow-glow) !important;
  transform: translateY(-2px) !important;
}

.knowledgebase-categories .kb-category h3 { color: var(--pt-text-white) !important; font-size: 16px !important; }
.knowledgebase-categories .kb-category p  { color: var(--pt-text-dim) !important; }

.knowledgebase-categories .kb-category i,
.knowledgebase-categories .kb-category .glyphicon {
  color: var(--pt-majorelle) !important;
  font-size: 32px !important;
  display: block !important;
  margin-bottom: 14px !important;
}


/* ============================================================
   25. RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {
  .navbar > .container,
  .navbar > .container-fluid {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 4px 14px !important;
  }
}

@media (max-width: 768px) {
  .navbar-nav > li > a {
    padding: 12px 16px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--pt-border-dark) !important;
  }
  .package, .product-list .product { margin-bottom: 16px !important; }
  .login-panel, #login-form { margin: 16px !important; }
  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
}

@media (max-width: 480px) {
  .pagination > li > a { padding: 6px 10px !important; font-size: 12px !important; }
  .stat-number { font-size: 26px !important; }
}


/* ============================================================
   26. PRINT
   ============================================================ */

@media print {
  body { background: #ffffff !important; color: #000000 !important; }
  #header, #sidebar, #footer, .navbar, .btn { display: none !important; }
  .panel, .table { box-shadow: none !important; border: 1px solid #cccccc !important; }
  h1, h2, h3, h4 { color: #000000 !important; }
  p, td { color: #333333 !important; }
}


/* ============================================================
   EOF — Priortech Labs WHMCS custom.css
   ============================================================ */