/* ============================================================
   Hostfory × Lagom (WHMCS) — Custom Theme Override
   Drop-in custom.css for Lagom theme to match hostfory.com look
   ============================================================
   Path: /templates/lagom2/assets/css/custom.css
   Or upload via Lagom → Theme Settings → Custom CSS
   ============================================================ */

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

:root,
[data-theme="dark"],
body.dark-mode {
  /* Hostfory palette */
  --hf-bg-0:        #0a0d10;
  --hf-bg-1:        #11161b;
  --hf-bg-2:        #161c23;
  --hf-bg-3:        #1d242c;
  --hf-line:        #232a32;
  --hf-line-soft:   #1a2027;
  --hf-fg-0:        #e7edf2;
  --hf-fg-1:        #b6bfc8;
  --hf-fg-2:        #7d8893;
  --hf-fg-3:        #545d66;
  --hf-accent:      oklch(0.78 0.18 155);
  --hf-accent-2:    oklch(0.85 0.16 165);
  --hf-warn:        oklch(0.78 0.16 75);
  --hf-danger:      oklch(0.65 0.22 25);

  --hf-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --hf-sans:        'Inter', system-ui, -apple-system, sans-serif;

  /* Override Lagom Bootstrap variables */
  --bs-body-bg:     var(--hf-bg-0);
  --bs-body-color:  var(--hf-fg-1);
  --bs-primary:     var(--hf-accent);
  --bs-secondary:   var(--hf-bg-2);
  --bs-success:     var(--hf-accent);
  --bs-info:        oklch(0.75 0.13 235);
  --bs-warning:     var(--hf-warn);
  --bs-danger:      var(--hf-danger);
  --bs-border-color: var(--hf-line);

  /* Lagom-specific tokens */
  --lagom-primary-color: var(--hf-accent);
  --lagom-secondary-color: var(--hf-fg-2);
  --lagom-bg-color: var(--hf-bg-0);
  --lagom-card-bg: var(--hf-bg-1);
  --lagom-border-color: var(--hf-line);
  --lagom-text-color: var(--hf-fg-1);
  --lagom-heading-color: var(--hf-fg-0);
}

/* ====================================================================
   Global resets
   ==================================================================== */
html, body {
  background: var(--hf-bg-0) !important;
  color: var(--hf-fg-1) !important;
  font-family: var(--hf-sans) !important;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--hf-fg-0) !important;
  font-family: var(--hf-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

h1, .h1 { font-size: clamp(36px, 5vw, 56px) !important; letter-spacing: -0.025em !important; }
h2, .h2 { font-size: clamp(28px, 3.5vw, 40px) !important; }
h3, .h3 { font-size: 22px !important; }
h4, .h4 { font-size: 17px !important; }

a, .text-primary {
  color: var(--hf-accent) !important;
  text-decoration: none;
}
a:hover { color: var(--hf-accent-2) !important; }

code, pre, kbd, samp, .mono {
  font-family: var(--hf-mono) !important;
  font-size: 0.92em;
}

hr { border-color: var(--hf-line) !important; opacity: 1; }

/* ====================================================================
   Header / navbar
   ==================================================================== */
header.lagom-header,
nav.navbar,
.lagom-navbar {
  background: rgba(10, 13, 16, 0.85) !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--hf-line) !important;
  box-shadow: none !important;
}

.navbar-brand,
.lagom-logo,
.navbar-brand img {
  filter: brightness(1.1);
}

.navbar-nav .nav-link {
  color: var(--hf-fg-1) !important;
  font-weight: 500;
  font-size: 14px;
  padding: 8px 14px !important;
  transition: color 0.12s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--hf-fg-0) !important;
}

/* User menu / dropdowns */
.dropdown-menu {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
  padding: 8px !important;
}
.dropdown-item {
  color: var(--hf-fg-1) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-0) !important;
}
.dropdown-divider {
  border-color: var(--hf-line) !important;
}

/* ====================================================================
   Buttons
   ==================================================================== */
.btn {
  font-family: var(--hf-sans) !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  transition: transform 0.08s, background 0.12s, border-color 0.12s !important;
  border: 1px solid transparent !important;
}
.btn:active { transform: translateY(1px); }

.btn-primary,
.btn.btn-primary {
  background: var(--hf-accent) !important;
  border-color: var(--hf-accent) !important;
  color: #062012 !important;
  font-weight: 600 !important;
}
.btn-primary:hover {
  background: var(--hf-accent-2) !important;
  border-color: var(--hf-accent-2) !important;
  color: #062012 !important;
}

.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-default {
  background: transparent !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-0) !important;
}
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-default:hover {
  background: var(--hf-bg-2) !important;
  border-color: color-mix(in oklab, var(--hf-fg-0) 18%, var(--hf-line)) !important;
  color: var(--hf-fg-0) !important;
}

.btn-success {
  background: var(--hf-accent) !important;
  border-color: var(--hf-accent) !important;
  color: #062012 !important;
}
.btn-danger {
  background: var(--hf-danger) !important;
  border-color: var(--hf-danger) !important;
  color: #fff !important;
}

.btn-lg {
  padding: 14px 24px !important;
  font-size: 15px !important;
}
.btn-sm {
  padding: 6px 12px !important;
  font-size: 13px !important;
}

/* ====================================================================
   Cards (used everywhere in Lagom)
   ==================================================================== */
.card,
.lagom-card,
.panel {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--hf-fg-1) !important;
}
.card-header,
.panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-0) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 16px 20px !important;
}
.card-body,
.panel-body {
  padding: 20px !important;
}
.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--hf-line) !important;
  padding: 14px 20px !important;
}

/* Hover-able cards (product picks, service cards) */
.card.card-hover,
.lagom-product-card,
.lagom-service-card {
  transition: border-color 0.15s, transform 0.15s;
}
.card.card-hover:hover,
.lagom-product-card:hover,
.lagom-service-card:hover {
  border-color: color-mix(in oklab, var(--hf-accent) 40%, var(--hf-line)) !important;
  transform: translateY(-2px);
}

/* ====================================================================
   Forms & inputs
   ==================================================================== */
.form-control,
.form-select,
.input-group-text,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: var(--hf-bg-0) !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-0) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: var(--hf-sans) !important;
  box-shadow: none !important;
  transition: border-color 0.12s !important;
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  background: var(--hf-bg-0) !important;
  border-color: var(--hf-accent) !important;
  color: var(--hf-fg-0) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--hf-accent) 18%, transparent) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--hf-fg-3) !important; }

label, .form-label, .control-label {
  color: var(--hf-fg-1) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}
.form-text, .help-block, small.text-muted {
  color: var(--hf-fg-3) !important;
  font-size: 12px !important;
}

.input-group-text {
  background: var(--hf-bg-2) !important;
}

/* Checkboxes & radios */
.form-check-input {
  background-color: var(--hf-bg-0) !important;
  border: 1px solid var(--hf-line) !important;
}
.form-check-input:checked {
  background-color: var(--hf-accent) !important;
  border-color: var(--hf-accent) !important;
}

/* ====================================================================
   Tables
   ==================================================================== */
.table {
  color: var(--hf-fg-1) !important;
  border-color: var(--hf-line) !important;
  font-size: 14px !important;
}
.table thead th {
  background: var(--hf-bg-1) !important;
  color: var(--hf-fg-3) !important;
  font-family: var(--hf-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-bottom: 1px solid var(--hf-line) !important;
  padding: 14px 16px !important;
}
.table tbody td {
  border-color: var(--hf-line-soft) !important;
  padding: 14px 16px !important;
  vertical-align: middle !important;
}
.table-hover tbody tr:hover {
  background: var(--hf-bg-1) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background: var(--hf-bg-1) !important;
}

/* ====================================================================
   Badges & pills
   ==================================================================== */
.badge {
  font-family: var(--hf-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--hf-line) !important;
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-1) !important;
}
.badge.bg-success,
.badge-success,
.label-success {
  background: color-mix(in oklab, var(--hf-accent) 15%, transparent) !important;
  border-color: color-mix(in oklab, var(--hf-accent) 35%, transparent) !important;
  color: var(--hf-accent) !important;
}
.badge.bg-warning,
.badge-warning,
.label-warning {
  background: color-mix(in oklab, var(--hf-warn) 15%, transparent) !important;
  border-color: color-mix(in oklab, var(--hf-warn) 35%, transparent) !important;
  color: var(--hf-warn) !important;
}
.badge.bg-danger,
.badge-danger,
.label-danger {
  background: color-mix(in oklab, var(--hf-danger) 15%, transparent) !important;
  border-color: color-mix(in oklab, var(--hf-danger) 35%, transparent) !important;
  color: var(--hf-danger) !important;
}

/* ====================================================================
   Alerts
   ==================================================================== */
.alert {
  border-radius: 10px !important;
  border: 1px solid var(--hf-line) !important;
  background: var(--hf-bg-1) !important;
  color: var(--hf-fg-0) !important;
  padding: 14px 18px !important;
  border-left: 3px solid var(--hf-accent) !important;
}
.alert-success { border-left-color: var(--hf-accent) !important; }
.alert-warning { border-left-color: var(--hf-warn) !important; }
.alert-danger  { border-left-color: var(--hf-danger) !important; }
.alert-info    { border-left-color: var(--bs-info) !important; }

/* ====================================================================
   Lagom — Order form (cart) tweaks
   ==================================================================== */
.lagom-cart,
.cart-product,
.product-pricing,
.lagom-order-form {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 12px !important;
}

.lagom-cart .product-name,
.cart-product .product-name {
  color: var(--hf-fg-0) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}

.lagom-cart .product-price,
.cart-product .product-price,
.product-pricing strong {
  font-family: var(--hf-mono) !important;
  font-feature-settings: "tnum" !important;
  color: var(--hf-fg-0) !important;
}

.product-pricing-currency,
.product-pricing-period {
  color: var(--hf-fg-3) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Plan / cycle selector */
.lagom-billing-cycle,
.product-billing-cycle {
  display: flex !important;
  gap: 4px !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 8px !important;
  padding: 4px !important;
  background: var(--hf-bg-0) !important;
}
.lagom-billing-cycle label,
.product-billing-cycle label {
  flex: 1 !important;
  text-align: center !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  margin: 0 !important;
  color: var(--hf-fg-2) !important;
}
.lagom-billing-cycle input:checked + label,
.product-billing-cycle input:checked + label {
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-0) !important;
}

/* Configurable options */
.config-option,
.lagom-config-option {
  border: 1px solid var(--hf-line) !important;
  border-radius: 10px !important;
  background: var(--hf-bg-0) !important;
  padding: 14px !important;
  transition: border-color 0.12s !important;
}
.config-option:hover {
  border-color: color-mix(in oklab, var(--hf-accent) 30%, var(--hf-line)) !important;
}
.config-option.selected,
.config-option.is-selected {
  border-color: var(--hf-accent) !important;
  background: color-mix(in oklab, var(--hf-accent) 6%, var(--hf-bg-0)) !important;
}

/* ====================================================================
   Lagom — Client area homepage widgets
   ==================================================================== */
.lagom-homepanels .panel,
.lagom-homepanel,
.client-homepanel {
  border-radius: 12px !important;
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
}

.lagom-homepanel-icon,
.client-homepanel-icon {
  color: var(--hf-accent) !important;
}

/* Service / domain status pills */
.status-active,
.label-active,
.text-active {
  color: var(--hf-accent) !important;
}
.status-pending,
.text-pending {
  color: var(--hf-warn) !important;
}
.status-suspended,
.status-cancelled,
.text-suspended {
  color: var(--hf-danger) !important;
}

/* ====================================================================
   Knowledgebase / article pages
   ==================================================================== */
.kb-article,
.lagom-kb {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 12px !important;
  padding: 28px !important;
}
.kb-article h1, .kb-article h2, .kb-article h3 {
  margin-top: 28px !important;
}

/* ====================================================================
   Footer
   ==================================================================== */
footer.lagom-footer,
.footer,
#footer {
  background: var(--hf-bg-0) !important;
  border-top: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-2) !important;
  padding: 60px 0 !important;
  margin-top: 80px !important;
}
footer a {
  color: var(--hf-fg-1) !important;
}
footer a:hover { color: var(--hf-fg-0) !important; }
footer .copyright,
.footer-copyright {
  font-family: var(--hf-mono) !important;
  font-size: 12px !important;
  color: var(--hf-fg-3) !important;
  border-top: 1px solid var(--hf-line) !important;
  padding-top: 24px !important;
  margin-top: 32px !important;
}

/* ====================================================================
   Misc — pagination, breadcrumbs, tabs
   ==================================================================== */
.pagination .page-link {
  background: var(--hf-bg-1) !important;
  border-color: var(--hf-line) !important;
  color: var(--hf-fg-1) !important;
}
.pagination .page-item.active .page-link {
  background: var(--hf-accent) !important;
  border-color: var(--hf-accent) !important;
  color: #062012 !important;
}

.breadcrumb {
  background: transparent !important;
  font-size: 13px !important;
  color: var(--hf-fg-3) !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
}
.breadcrumb a { color: var(--hf-fg-2) !important; }
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--hf-fg-3) !important;
}

.nav-tabs {
  border-bottom: 1px solid var(--hf-line) !important;
}
.nav-tabs .nav-link {
  color: var(--hf-fg-2) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 14px 20px !important;
  border-radius: 0 !important;
}
.nav-tabs .nav-link.active {
  color: var(--hf-fg-0) !important;
  background: transparent !important;
  border-bottom-color: var(--hf-accent) !important;
}

/* ====================================================================
   Modal
   ==================================================================== */
.modal-content {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 14px !important;
}
.modal-header,
.modal-footer {
  border-color: var(--hf-line) !important;
}
.modal-title { color: var(--hf-fg-0) !important; }
.btn-close {
  filter: invert(1) opacity(0.7);
}

/* ====================================================================
   Hostfory accent — green dot before active pills
   ==================================================================== */
.hf-status-dot::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--hf-accent);
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--hf-accent);
}

/* ====================================================================
   Scrollbar
   ==================================================================== */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--hf-bg-0); }
::-webkit-scrollbar-thumb {
  background: var(--hf-bg-3);
  border: 3px solid var(--hf-bg-0);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--hf-fg-3) 50%, var(--hf-bg-3)); }