/* ═══════════════════════════════════════════════════════
   Kingdom Hosting – WHMCS Custom Theme v2 (twenty-one)
   CI: Navy #0b1437 · Gold #b8860b · White #ffffff
   Keine Template-Strukturänderungen – nur visuelle Anpassungen
   ═══════════════════════════════════════════════════════ */

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

:root {
  --kh-navy:  #0b1437;
  --kh-navy2: #162154;
  --kh-gold:  #b8860b;
  --kh-gold2: #d4a017;
  --kh-gold3: #f0c040;
  --kh-white: #ffffff;
  --kh-off:   #f8f9fc;
  --kh-border:#e2e8f3;
  --kh-text:  #0f172a;
  --kh-muted: #475569;
}

body { font-family: 'DM Sans', system-ui, sans-serif !important; }

/* ── Navigation ── */
.navbar, .navbar-default {
  background-color: var(--kh-navy) !important;
  border-bottom: 3px solid var(--kh-gold) !important;
}
.navbar-brand, .navbar-brand:hover, .navbar-brand:focus {
  color: var(--kh-gold3) !important;
  font-weight: 700 !important;
}
.navbar-nav > li > a {
  color: rgba(255,255,255,.82) !important;
}
.navbar-nav > li > a:hover,
.navbar-nav > li.active > a {
  color: var(--kh-gold3) !important;
  background-color: transparent !important;
}
.navbar-toggle .icon-bar { background-color: var(--kh-gold3) !important; }
.navbar-collapse { background-color: var(--kh-navy) !important; }

/* Logo aus SVG-Inline */
.navbar-brand::before {
  content: '';
}

/* ── Buttons ── */
.btn-primary,
.btn-success {
  background: linear-gradient(135deg, var(--kh-gold) 0%, var(--kh-gold2) 100%) !important;
  border-color: var(--kh-gold) !important;
  color: var(--kh-navy) !important;
  font-weight: 700 !important;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus {
  background: linear-gradient(135deg, #9a7209 0%, var(--kh-gold) 100%) !important;
  border-color: var(--kh-gold) !important;
  color: var(--kh-navy) !important;
}
.btn-default {
  border-color: var(--kh-border) !important;
  color: var(--kh-text) !important;
}
.btn-default:hover {
  border-color: var(--kh-gold) !important;
  color: var(--kh-gold) !important;
}

/* ── Cards / Panels ── */
.card { border: 1px solid var(--kh-border) !important; border-radius: 10px !important; }
.card-header { background-color: var(--kh-off) !important; border-bottom: 2px solid var(--kh-gold) !important; }
.panel { border-radius: 10px !important; border-color: var(--kh-border) !important; }
.panel-heading { background-color: var(--kh-navy) !important; color: var(--kh-gold3) !important; }

/* ── Sidebar Navigation ── */
.list-group-item.active,
.list-group-item.active:hover {
  background-color: var(--kh-gold) !important;
  border-color: var(--kh-gold) !important;
  color: var(--kh-navy) !important;
}
.list-group-item:hover {
  background-color: var(--kh-off) !important;
}
#sidebar-menu .list-group-item-action.active {
  background-color: var(--kh-navy) !important;
  color: var(--kh-gold3) !important;
}

/* ── Store / Produkte ── */
.product-list .card-title,
h3.product-name { color: var(--kh-navy) !important; }

.price-big, .price-main, .pricing-price {
  color: var(--kh-gold) !important;
  font-weight: 700 !important;
}

/* ── Footer ── */
footer, #footer, .footer {
  background-color: var(--kh-navy) !important;
  border-top: 3px solid var(--kh-gold) !important;
  color: rgba(255,255,255,.75) !important;
}
footer a, #footer a { color: var(--kh-gold3) !important; }
footer a:hover { color: #fff !important; }

/* ── Formulare ── */
.form-control:focus {
  border-color: var(--kh-gold) !important;
  box-shadow: 0 0 0 3px rgba(184,134,11,.15) !important;
}

/* ── Breadcrumb ── */
.breadcrumb { background-color: var(--kh-off) !important; }
.breadcrumb > li + li::before { color: var(--kh-muted) !important; }
.breadcrumb > li > a { color: var(--kh-gold) !important; }

/* ── Alerts ── */
.alert-info    { border-left: 4px solid var(--kh-gold) !important; background: #fefce8 !important; }
.alert-success { border-left: 4px solid #15803d !important; }
.alert-warning { border-left: 4px solid #d97706 !important; }
.alert-danger  { border-left: 4px solid #dc2626 !important; }

/* ── Tabellen ── */
.table > thead > tr > th {
  background-color: var(--kh-navy) !important;
  color: var(--kh-white) !important;
  border-color: transparent !important;
}
.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--kh-off) !important; }

/* ── Checkout / Order ── */
#order-standard_cart .product-name { color: var(--kh-navy) !important; font-weight: 700 !important; }
.order-container .price { color: var(--kh-gold) !important; font-weight: 700 !important; }

/* ── Badge ── */
.badge-primary, .badge-info { background-color: var(--kh-navy) !important; }
.badge-success { background-color: var(--kh-gold) !important; color: var(--kh-navy) !important; }

/* ── Action Buttons (Support-Center-Kacheln) ── */
.action-icon-btns a { border-radius: 10px !important; }
.action-icon-btns a:hover { border-color: var(--kh-gold) !important; }

/* ── Wissensdatenbank ── */
.category-name a, .article-title a { color: var(--kh-navy) !important; }
.category-name a:hover, .article-title a:hover { color: var(--kh-gold) !important; }

/* ── Navigation Extras (vom Hook) ── */
#kh-toplinks { display: flex; align-items: center; gap: 4px; margin-right: 8px; }
#kh-toplinks a {
  color: rgba(255,255,255,.85) !important;
  font-size: .83rem;
  padding: 5px 9px;
  border-radius: 4px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all .15s;
}
#kh-toplinks a:hover {
  background: rgba(255,255,255,.12);
  color: var(--kh-gold3) !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .navbar-nav > li > a { border-bottom: 1px solid rgba(255,255,255,.07) !important; }
  #kh-toplinks { display: none !important; }
}