/* =============================================================================
 * AKT BLEND OVERRIDE STYLESHEET — templates/crosterblend
 * Restyles the Croster storefront shell to match stage.akthost.com's Astro
 * marketing front, WITHOUT touching Croster's compiled style.min.css or its
 * LESS toolchain. Linked AFTER style.min.css in head.tpl so it cascades as a
 * pure override — delete this one file (or unlink it in head.tpl) to fully
 * revert visuals with zero risk to WHMCS functionality.
 *
 * SOURCE OF TRUTH — keep this file in sync with staging's theme engine at
 * akthost-com/src/config/themes.ts. Staging rotates monthly across 4 themes
 * (classic/editorial/technical/aurora); this file is a snapshot of whichever
 * theme is active. TOKENS BLOCK below is the ONLY thing to edit on a monthly
 * resync — copy the active theme's `colors`/`fonts`/`radius`/`googleFontsHref`
 * values from themes.ts into the :root block, and update the <link> font
 * import added in head.tpl to match. Brand blue (#0273D4) and light mode are
 * CONSTANT across all 4 staging themes and never need to change here.
 *
 * Snapshot taken 2026-07-23 → July resolves to staging's "technical" theme.
 * ===========================================================================*/

:root {
  /* ── TOKENS BLOCK — resync monthly from akthost-com/src/config/themes.ts ── */
  --akt-brand: #0273D4;       /* constant across all 4 staging themes, and Croster's own @themeColor */
  --akt-brand-bright: #3B93E8;
  --akt-brand-deep: #025BAB;
  --akt-accent: #0EA5A0;      /* "technical" theme accent — varies by month */
  --akt-ink: #0F1B24;
  --akt-ink-dim: #3D5364;
  --akt-ink-faint: #5C7285;
  --akt-base900: #F9FBFC;
  --akt-base800: #EEF3F7;
  --akt-base700: #E3EBF1;
  --akt-line: #D2DEE6;
  --akt-line-soft: #E3EBF1;
  --akt-radius: 0.4rem;       /* "technical" theme radius — varies by month */
  --akt-font-display: 'Space Grotesk', 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --akt-font-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --akt-font-mono: 'JetBrains Mono', 'Courier New', monospace;
  /* ── end tokens block ── */
}

/* Dark-mode reconciliation — Croster ships its own user-facing dark-mode
 * toggle ($themesettings.general.themeswitcher, body.dark-mode class).
 * Staging is deliberately light-only, so we can't "match" a dark staging
 * page — instead this keeps the toggle fully functional and gives it a
 * coherent dark rendering built from the SAME brand tokens, so nothing looks
 * broken/unstyled if a visitor (or Akim, testing) flips it. Do not remove. */
body.dark-mode {
  --akt-ink: #EAF1F8;
  --akt-ink-dim: #A6B6C7;
  --akt-ink-faint: #7E93A6;
  --akt-base900: #0F1B24;
  --akt-base800: #172733;
  --akt-base700: #1F3140;
  --akt-line: rgba(255, 255, 255, 0.12);
  --akt-line-soft: rgba(255, 255, 255, 0.08);
}

/* ── Base type ── */
body, input, button, select, textarea {
  font-family: var(--akt-font-body);
  color: var(--akt-ink);
}
h1, h2, h3, h4, h5, h6,
.navbar .logo-dark, .navbar .logo span {
  font-family: var(--akt-font-display);
  font-weight: 600;
}
code, pre, .invoice-id, .order-number {
  font-family: var(--akt-font-mono);
}

/* ── Header / nav — match staging's sticky, blurred, bordered header ── */
#main-navbar {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--akt-line);
}
body.dark-mode #main-navbar {
  background: rgba(15, 27, 36, 0.95);
}
.cros-navbar {
  min-height: 64px;
  font-family: var(--akt-font-body);
}
.pre-header {
  background: var(--akt-base800) !important;
  border-bottom: 1px solid var(--akt-line-soft);
  font-size: 12px;
}
.pre-header a, .pre-header .fa, .pre-header .fas, .pre-header .fab, .pre-header .far {
  color: var(--akt-ink-dim) !important;
}
.navbar-nav > li > a.nav-link {
  font-family: var(--akt-font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--akt-ink-dim);
}
.navbar-nav > li > a.nav-link:hover,
.navbar-nav > li > a.nav-link:focus {
  color: var(--akt-brand);
}
.dropdown-menu {
  border-radius: var(--akt-radius);
  border-color: var(--akt-line);
}

/* ── Buttons — staging's .btn-primary: solid brand blue, staging radius,
 *    shadow-glow, hover-lift. Applied to Register/Login/cart CTAs. ── */
.btn-primary,
.navbar .btn-primary,
a.btn-primary {
  background: var(--akt-brand) !important;
  border-color: var(--akt-brand) !important;
  border-radius: var(--akt-radius) !important;
  font-family: var(--akt-font-body);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(2, 115, 212, 0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.btn-primary:hover,
.navbar .btn-primary:hover,
a.btn-primary:hover {
  background: var(--akt-brand-deep) !important;
  border-color: var(--akt-brand-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(2, 115, 212, 0.38);
}
.btn, .btn-default, .btn-secondary {
  border-radius: var(--akt-radius) !important;
  font-family: var(--akt-font-body);
}

/* ── Cart / notification badges — accent color, staging-style ── */
.badge-primary {
  background: var(--akt-accent) !important;
}

/* ── Footer — align typography/spacing/rhythm to Footer.astro's grid;
 *    keeps WHMCS's native footer-widgets/menu-manager DOM structure
 *    (do not rebuild the DOM — content stays 100% Menu-Manager-driven). ── */
.sec.footer {
  background: var(--akt-base900);
  border-top: 1px solid var(--akt-line);
  font-family: var(--akt-font-body);
}
.sec.footer .widget-title, .sec.footer h4, .sec.footer h5 {
  font-family: var(--akt-font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--akt-ink-faint);
}
.sec.footer a {
  color: var(--akt-ink-dim);
}
.sec.footer a:hover {
  color: var(--akt-brand);
}
.footer-copyright {
  font-family: var(--akt-font-mono);
  font-size: 12px;
  color: var(--akt-ink-faint);
}

/* ── Mobile off-canvas side menu — keep fully functional, just restyle ── */
.navbar-side {
  background: var(--akt-base900);
  font-family: var(--akt-font-body);
}
.navbar-side .nav-link {
  color: var(--akt-ink);
}

/* ── Click-to-reveal contact (pre-header) — see pre-header.tpl edit.
 *    Small, unobtrusive "reveal" button in place of plaintext. ── */
.akt-reveal-btn {
  background: transparent;
  border: 0;
  color: var(--akt-ink-dim);
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.akt-reveal-btn:hover { color: var(--akt-brand); }

/* ── AK Assistant mount — no visual overrides needed, the widget is fully
 *    self-styled inline by ak-assistant.js using the config colors below;
 *    this just guarantees it never sits under WHMCS's modal/backdrop z-index
 *    stack (system-modal, cookie banner, etc). ── */
#ak-assistant-root { position: relative; z-index: 2147483000; }

/* ── AKT cookie consent banner (Consent Mode v2 parity — see global-footer
 *    include). Minimal, on-brand, reuses tokens above. ── */
#akt-cookie-banner {
  position: fixed;
  z-index: 2147483001;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 380px;
  margin-left: auto;
  background: var(--akt-base900);
  border: 1px solid var(--akt-line);
  border-radius: var(--akt-radius);
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
  padding: 16px;
  font-family: var(--akt-font-body);
  font-size: 13px;
  color: var(--akt-ink-dim);
}
#akt-cookie-banner a { color: var(--akt-brand); }
#akt-cookie-banner .akt-cc-actions { display: flex; gap: 10px; margin-top: 12px; }
#akt-cookie-banner button { border-radius: var(--akt-radius); }

/* ── Phase 2 polish (2026-07-23) ───────────────────────────────────────── */

/* Login page — now wrapped in the real header/footer chain (login.tpl +
 * header.tpl/footer.tpl `templatefile eq 'login'` exception). Clean centered
 * card in place of the old split-screen + stale-news sidebar. */
.akt-login-wrap {
  padding: 56px 16px 72px;
}
/* Sweep4 (2026-07-23/24): the base theme's compiled stylesheet
 * (assets/css/themes/style.min.css) sets a hardcoded stock-graphic
 * watermark on `body.login,body.error` (loginBg.jpg) regardless of the
 * per-theme loginbg/loginbgimg config (both confirmed empty in
 * mod_adminpanel_config — this is a vendor-CSS default, not an admin
 * setting). akt-blend.css loads after style.min.css (see head.tpl), so
 * this override wins the cascade without needing !important. Clean
 * near-white background matching staging; login card untouched. */
body.login {
  background-image: none;
  background-color: var(--akt-base900, #f7f9fb);
}
.akt-login-card {
  background: #fff;
  border: 1px solid var(--akt-line);
  border-radius: calc(var(--akt-radius) * 2);
  box-shadow: 0 20px 60px rgba(15, 27, 36, 0.08);
  padding: 32px 28px;
}
body.dark-mode .akt-login-card {
  background: var(--akt-base800);
  border-color: var(--akt-line);
}
.akt-login-card h1 {
  font-family: var(--akt-font-display);
  color: var(--akt-ink);
  letter-spacing: 0.02em;
}
.akt-login-card .login-container-register {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: var(--akt-ink-dim);
}

/* Store / plan cards (orderforms/croster_default/includes/products/style-1.tpl):
 * near-black price (was red), clean "Most Popular" pill (was a corner
 * ribbon), tightened feature-list rhythm, "Show Menu" button removed. */
.cros-pricing-table .price .cost,
.cros-pricing-table .price mark {
  color: var(--akt-ink) !important;
}
.akt-popular-pill {
  display: inline-block;
  background: var(--akt-brand);
  color: #fff;
  font-family: var(--akt-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 0 0 10px;
}
.cros-pricing-table .plan-features {
  font-size: 13px;
  line-height: 1.55;
}
.cros-pricing-table .plan-features li {
  padding: 3px 0;
}
.cros-pricing-table .PriceList-toggle {
  font-size: 13px;
  color: var(--akt-ink-dim);
}