/* ZitStack Cloud — brand overrides for the FOSSBilling Huraga theme.
   Matches zitstack.com: orange #f97316 ACCENT, solid-dark primary buttons (8px radius),
   Outfit/Inter fonts, the stacked-layers logo. Works in light + dark. */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary: #f97316;
  --bs-primary-rgb: 249, 115, 22;
  --bs-primary-text-emphasis: #c2410c;
  --bs-link-color: #ea580c;
  --bs-link-color-rgb: 234, 88, 12;
  --bs-link-hover-color: #c2410c;
  --bs-link-hover-color-rgb: 194, 65, 12;
  --bs-border-radius: 8px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 16px;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand, .display-1, .display-2, .display-3, .display-4, .fw-bold {
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.015em;
}

/* ===== Buttons — match zitstack.com (.btn radius 8px; .btn-primary = solid dark) ===== */
.btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary {
  --bs-btn-bg: var(--bs-emphasis-color);
  --bs-btn-border-color: var(--bs-emphasis-color);
  --bs-btn-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-emphasis-color);
  --bs-btn-hover-border-color: var(--bs-emphasis-color);
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-active-bg: var(--bs-emphasis-color);
  --bs-btn-active-border-color: var(--bs-emphasis-color);
  --bs-btn-active-color: var(--bs-body-bg);
  --bs-btn-disabled-bg: var(--bs-emphasis-color);
  --bs-btn-disabled-border-color: var(--bs-emphasis-color);
  background-image: none;
  box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus { opacity: 0.9; transform: translateY(-1px); }

/* Secondary / outline -> transparent with border (brand .btn-secondary) */
.btn-outline-primary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-hover-border-color: var(--bs-secondary-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-secondary-bg);
  --bs-btn-active-color: var(--bs-body-color);
}
.btn-outline-primary:hover { transform: translateY(-1px); }

/* Accent (orange) stays for links, badges, highlights */
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }
.text-primary { color: #f97316 !important; }
.bg-primary { background-color: #f97316 !important; }
.badge.bg-primary, .badge.text-bg-primary { background-image: linear-gradient(135deg, #f97316, #f59e0b); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #f97316; box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.18);
}
.form-check-input:checked { background-color: #f97316; border-color: #f97316; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: #f97316 !important; }
.progress-bar { background-color: #f97316; }
.list-group-item.active { background-color: #f97316; border-color: #f97316; }
.card { border-radius: 14px; border-color: var(--bs-border-color); }

/* ===== Logo — exact zitstack.com lockup (orange stacked-layers + "ZitStack Cloud") ===== */
.navbar-brand.zs-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 20px;
  text-decoration: none; color: var(--bs-body-color);
}
.zs-logo-icon { width: 24px; height: 24px; color: #f97316; flex: none; }
.zs-logo-text { color: var(--bs-body-color); }
.zs-logo-text .zs-accent { color: #f97316; }
.zs-logo-text .zs-cloud { color: var(--bs-secondary-color); font-weight: 600; }

/* ===== Storefront hero (guest homepage) ===== */
.zs-hero {
  text-align: center; padding: 3.5rem 1rem 2.5rem; margin-bottom: 1.5rem; border-radius: 22px;
  background: radial-gradient(1100px 380px at 50% -10%, rgba(249, 115, 22, 0.13), transparent 60%), var(--bs-tertiary-bg, #f8fafc);
  border: 1px solid var(--bs-border-color);
}
.zs-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #ea580c; background: rgba(249, 115, 22, 0.1); padding: 0.35rem 0.85rem; border-radius: 999px; margin-bottom: 1rem;
}
.zs-hero-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.1; margin: 0 auto 0.75rem; max-width: 16ch; }
.zs-hero-title .zs-accent { color: #f97316; }
.zs-hero-sub { color: var(--bs-secondary-color); font-size: 1.1rem; max-width: 48ch; margin: 0 auto 1.75rem; }
.zs-search { display: flex; gap: 0.5rem; max-width: 560px; margin: 0 auto; }
.zs-search .form-control { height: 54px; border-radius: 10px; font-size: 1.05rem; }
.zs-search .btn { height: 54px; border-radius: 10px; padding-inline: 1.6rem; }
.zs-results { max-width: 560px; margin: 1rem auto 0; }
.zs-checking { color: var(--bs-secondary-color); padding: 0.5rem; }
.zs-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--bs-border-color); border-radius: 10px; margin-bottom: 0.5rem; background: var(--bs-body-bg); }
.zs-row .zs-dom { font-family: 'Outfit', sans-serif; font-weight: 600; text-align: left; }
.zs-row .zs-stat { font-size: 0.9rem; font-weight: 600; }
.zs-row.ok .zs-stat { color: #10b981; }
.zs-row.no .zs-stat { color: var(--bs-secondary-color); }
.zs-products { margin: 0.5rem 0 1.5rem; }
.zs-product { border-radius: 14px; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.zs-product:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(11, 15, 25, 0.35); }
.zs-product .zs-ico { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(249, 115, 22, 0.1); color: #f97316; margin-bottom: 0.75rem; }
.zs-product .zs-ico svg { width: 24px; height: 24px; }
.zs-product h5 { font-family: 'Outfit', sans-serif; font-weight: 700; }
.zs-cta { display: flex; gap: 0.75rem; justify-content: center; margin: 1rem 0 2rem; flex-wrap: wrap; }