/* ============================================================================
   Author: N1CHO
   Made for LynxLayers
   ============================================================================ */
/* ============================================================================
   LynxThemeN1CHO — Theme styles (token-driven; loads AFTER six's all.min.css)
   Dark/light handled entirely by tokens.css (light-dark()), so there are almost
   no mode-specific rules here. Targets WHMCS "six" (Bootstrap 3) markup.
   ============================================================================ */

/* ---- Base ---------------------------------------------------------------- */
/* six forces html{font-size:10px} as its rem base, which silently shrank our
   whole rem type scale (--text-base:1rem etc.) to 62.5% -> tiny text on every
   non-landing page. six uses ZERO rem font-sizes, so restoring the standard
   root simply makes our tokens render at their designed sizes everywhere. */
html { font-size: 100% !important; -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in oklch, var(--primary-color) 28%, transparent); }

p, li, dd { max-width: var(--measure); }
/* A text-centred paragraph keeps the readability max-width above, but its BOX
   must centre too. Otherwise the constrained ~68ch box stays left-anchored and
   only its text centres — so a centred CTA (e.g. the "Return to Client Area"
   button on empty-state pages) lands left of any centred card above it. This
   realigns every centred-paragraph CTA across the site. */
p.text-center, p.text-xs-center, p.text-sm-center { margin-left: auto; margin-right: auto; }
a { color: var(--primary-strong); transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--primary-hover); }

h1, h2, h3, h4, h5, .h1, .h2, .h3 {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}
h1, .h1 { font-size: var(--text-3xl); font-weight: 800; }
h2, .h2 { font-size: var(--text-2xl); }
h3, .h3 { font-size: var(--text-xl); }
.text-muted { color: var(--text-muted) !important; }
code, kbd, pre, samp, .domain, .text-domain { font-family: var(--font-mono); }

/* Mouse/touch clicks must NOT show a focus ring — only keyboard (:focus-visible)
   does. Neutralises Bootstrap's a:focus / .btn:focus / input:focus outline
   (outline:5px auto -webkit-focus-ring-color) that produced the blue box on the
   logo, nav items and buttons when clicked. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.btn.focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none !important;
  outline-offset: 0 !important;
}

/* Global focus visibility (WCAG 2.4.7 / 1.4.11) — crisp ring + soft glow halo
   so KEYBOARD focus reads as designed, never a harsh browser-default box. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--focus-ring) 85%, transparent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--focus-ring) 16%, transparent);
}

/* ---- Header & utility bar ------------------------------------------------ */
#header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}
#header .logo.logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
#header .logo.logo-text::first-letter { color: var(--primary-color); }
#header .secondary-navbar a, #header .top-bar a { color: var(--text-secondary); }
#header .secondary-navbar a:hover { color: var(--primary-strong); }

/* ---- Primary navigation -------------------------------------------------- */
#main-menu, .navbar {
  background: color-mix(in oklch, var(--bg-surface) 92%, var(--primary-color));
  border: 0;
  border-bottom: 1px solid var(--border-color);
}
#main-menu .navbar-nav > li > a, .navbar-default .navbar-nav > li > a {
  color: var(--text-secondary);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
#main-menu .navbar-nav > li > a:hover,
#main-menu .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a {
  color: var(--text-primary);
  background: color-mix(in oklch, var(--primary-color) 14%, transparent);
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 0.55em 1.1em;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-success, #domainsearch button, .btn-order {
  background: var(--primary-color);
  color: var(--text-on-primary);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-success:hover, #domainsearch button:hover, .btn-order:hover {
  background: var(--primary-hover);
  color: var(--text-on-primary);
  box-shadow: var(--shadow-md);
}
.btn-default {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-default:hover { background: var(--bg-muted); color: var(--text-primary); border-color: var(--border-strong); }
.btn-link { color: var(--primary-strong); }

/* ---- Forms --------------------------------------------------------------- */
label, .control-label { color: var(--text-secondary); font-weight: 500; }
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], select, textarea {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--focus-ring) 35%, transparent);
  outline: none;
}
.form-control::placeholder { color: var(--text-muted); }

/* ---- Panels / cards (full borders, no side-stripes) ---------------------- */
.panel, .card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.panel-heading, .card-header {
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  font-weight: 600;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.panel-title { font-family: var(--font-display); }

/* ---- Alerts (tinted fill + full border; never side-stripe) --------------- */
.alert { border-radius: var(--radius); border: 1px solid; }
.alert-success { background: color-mix(in oklch, var(--color-success) 14%, var(--bg-surface)); border-color: var(--color-success); color: var(--text-primary); }
.alert-danger  { background: color-mix(in oklch, var(--color-danger) 14%, var(--bg-surface));  border-color: var(--color-danger);  color: var(--text-primary); }
.alert-warning { background: color-mix(in oklch, var(--color-warning) 16%, var(--bg-surface)); border-color: var(--color-warning); color: var(--text-primary); }
.alert-info    { background: color-mix(in oklch, var(--color-info) 14%, var(--bg-surface));    border-color: var(--color-info);    color: var(--text-primary); }

/* ---- Tables -------------------------------------------------------------- */
.table { color: var(--text-primary); }
.table > thead > tr > th { border-bottom: 2px solid var(--border-color); color: var(--text-secondary); font-weight: 600; }
.table > tbody > tr > td { border-top: 1px solid var(--border-color); }
.table-hover > tbody > tr:hover { background: var(--bg-muted); }

/* ---- Homepage masthead / domain search ----------------------------------- */
#home-container .primary-content, .masthead, #domainSearchWrap, .domain-search {
  position: relative;
}
.jumbotron, #search-container, .masthead {
  background: linear-gradient(165deg,
              color-mix(in oklch, var(--primary-color) 10%, var(--bg-base)),
              var(--bg-base) 70%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}
.jumbotron h1, .masthead h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---- Footer -------------------------------------------------------------- */
section#footer, #footer {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted) !important;
}
#footer a, #footer p, #footer li, #footer span { color: var(--text-secondary) !important; }
#footer a:hover { color: var(--primary-strong) !important; }
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5 { color: var(--text-primary) !important; }

/* ---- Order form / store (standard_cart) ---------------------------------- */
#order-standard_cart .panel, #order-standard_cart .card,
.cart-sidebar .panel, .panel.card.panel-default, .panel.card.panel-sidebar,
.products .product {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}
.products .product { border-radius: var(--radius-lg) !important; overflow: hidden; }
.products .product > header, .products .product header {
  background: var(--bg-muted) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.products .product h1, .products .product h2, .products .product h3,
.products .product header, .products .product header *,
.products .product .price, .products .product [id$="-price"] { color: var(--text-primary) !important; }
.products .product li, .products .product .product-desc,
.products .product p, .products .product .cycle { color: var(--text-secondary) !important; }
#order-standard_cart .panel-heading, #order-standard_cart .card-header,
.panel-heading.card-header {
  background: var(--bg-muted) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}
#order-standard_cart .panel-body, #order-standard_cart .card-body,
.panel-body.card-body { background: transparent !important; color: var(--text-primary) !important; }
#order-standard_cart .panel-title, #order-standard_cart .product-name { color: var(--text-primary) !important; font-family: var(--font-display); }
#order-standard_cart .product-desc, #order-standard_cart .product-desc *,
#order-standard_cart .product li, #order-standard_cart .feature { color: var(--text-secondary) !important; }
#order-standard_cart .price, #order-standard_cart .product-pricing,
#order-standard_cart [id$="-price"] { color: var(--text-primary) !important; }
#order-standard_cart .price .cycle, #order-standard_cart .product-pricing small { color: var(--text-muted) !important; }

/* Sidebar list groups */
.list-group-item {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
.list-group-item-action:hover { background: var(--bg-muted) !important; color: var(--text-primary) !important; }
.list-group-item.active { background: var(--primary-soft) !important; color: var(--primary-strong) !important; border-color: var(--border-color) !important; }

/* ---- Theme toggle (in header utility area) ------------------------------- */
.ll-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-left: 0.5rem;
  background: var(--bg-muted); color: var(--text-secondary);
  border: 1px solid var(--border-color); border-radius: var(--radius-pill);
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ll-theme-toggle:hover { background: var(--primary-soft); color: var(--primary-strong); }
.ll-theme-toggle .ll-icon-sun { display: none; }
.ll-theme-toggle .ll-icon-moon { display: inline; }
/* swap glyphs when dark is active */
.theme-dark .ll-theme-toggle .ll-icon-sun,
:root:not(.theme-light) .ll-theme-toggle .ll-icon-sun { }
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .ll-theme-toggle .ll-icon-sun { display: inline; }
  :root:not(.theme-light) .ll-theme-toggle .ll-icon-moon { display: none; }
}
.theme-dark .ll-theme-toggle .ll-icon-sun { display: inline; }
.theme-dark .ll-theme-toggle .ll-icon-moon { display: none; }
.theme-light .ll-theme-toggle .ll-icon-sun { display: none; }
.theme-light .ll-theme-toggle .ll-icon-moon { display: inline; }

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- Six structural overrides (tokenize masthead, action bar, chrome) ----- */
/* Keep header/nav on surface in BOTH modes (six hardcodes light) */
/* nav background is owned solely by nav.css (removed the duplicate that tinted the bar blue) */
.outer-wrapper, .inner-wrapper, .main-content { background: transparent !important; }

/* Homepage masthead: replace six's navy with a warm, layered token hero */
#home-banner {
  background: var(--bg-base) !important;
  background-image:
    radial-gradient(85% 130% at 50% -25%, color-mix(in oklch, var(--primary-color) 18%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg-elevated), var(--bg-base)) !important;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}
#home-banner h1, #home-banner h2, #home-banner .lead, #home-banner p { color: var(--text-primary); }
#home-banner h1, #home-banner h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
}
#home-banner .lead { color: var(--text-secondary); }
#home-banner .btn-primary, #home-banner .btn-success, #home-banner button[type="submit"] {
  background: var(--primary-color) !important; color: var(--text-on-primary) !important; border-color: transparent !important;
}
#home-banner .btn-primary:hover, #home-banner .btn-success:hover { background: var(--primary-hover) !important; }
#home-banner .btn-default { background: var(--bg-surface) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important; }

/* Action bar "How can we help": surface + amber icons, no teal */
.home-shortcuts {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.home-shortcuts a { color: var(--text-secondary); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.home-shortcuts a:hover { background: var(--primary-soft); color: var(--primary-strong); }
.home-shortcuts i, .home-shortcuts .fa, .home-shortcuts .fas, .home-shortcuts .far { color: var(--primary-color); }
.home-shortcuts .lead, .home-shortcuts h2, .home-shortcuts h3 { color: var(--text-primary); font-family: var(--font-display); }

/* ---- Iteration fixes ----------------------------------------------------- */
/* Content wrapper must follow the theme (six hardcodes white -> washed out in dark) */
section#main-body { background: transparent !important; }

/* Action-bar labels readable in BOTH modes; icons stay amber */
.home-shortcuts a { color: var(--text-secondary) !important; }
.home-shortcuts a:hover { color: var(--primary-strong) !important; }
.home-shortcuts i, .home-shortcuts .fa, .home-shortcuts .fas, .home-shortcuts .far { color: var(--primary-color) !important; }

/* Header CTA (View Cart) + hero domain-search button -> primary amber */
#header .primary-action .btn {
  background: var(--primary-color) !important; color: var(--text-on-primary) !important; border-color: transparent !important;
}
#header .primary-action .btn:hover { background: var(--primary-hover) !important; }
#home-banner .input-group-btn .btn[type="submit"],
#home-banner .input-group-btn button.btn-primary,
#home-banner .btn-success {
  background: var(--primary-color) !important; color: var(--text-on-primary) !important; border-color: transparent !important;
}
#home-banner .input-group-btn .btn[type="submit"]:hover { background: var(--primary-hover) !important; }
/* Secondary (Transfer) -> tokenized outline so it reads as the alt action */
#home-banner .input-group-btn .btn-default {
  background: var(--bg-surface) !important; color: var(--text-primary) !important; border: 1px solid var(--border-strong) !important;
}