/*
 * Gotka Technologies — Nexus theme brand override
 *
 * IMPORTANT — this file must define the COMPLETE token set, not just
 * the ones being rebranded. A WHMCS child theme's custom.css replaces
 * the parent theme's file of the same path entirely (it does not load
 * in addition to it) — and it's the *parent's* custom.css that ships
 * the real default values for --bg-inverted, --text, --border, --bg,
 * etc. theme.min.css's only :root block is plain Bootstrap 4 (--primary:
 * #007bff and friends); those modern semantic tokens are used by several
 * components (the footer, .card-accent-*, the cart order button, ...)
 * but, once this file replaces the parent's, are otherwise defined
 * NOWHERE — confirmed live: the footer background silently resolved to
 * transparent because var(--bg-inverted) had no definition at all, not
 * because of a specificity fight. So every token below is restated,
 * even ones Gotka doesn't rebrand (those just keep WHMCS's own default
 * value, sourced from https://developers.whmcs.com/themes/nexus-cart/
 * "All Possible Variables to Change").
 *
 * Brand color/rounding values are pulled directly from gotka.com's own
 * stylesheet (public_html/assets/css/site.css :root block) for exact
 * parity: same ink/petrol/led/amber colors, same 9/14/20px rounding
 * scale, same card shadow, same pill-shaped buttons and focus/selection
 * style.
 */
:root {
  --white: #fff;

  /* ---------------------------------------------------------------
   * Neutral scale — Gotka's cool navy/paper grays (site tokens:
   * --ink #0F1D2A, --ink-2 #41566A, --paper #F1F4F2, --line #DCE3DF)
   * ------------------------------------------------------------- */
  --neutral-50:  #F7F9F8;
  --neutral-100: #F1F4F2; /* paper */
  --neutral-200: #E3E9E6;
  --neutral-300: #DCE3DF; /* line */
  --neutral-400: #A9B6B7;
  --neutral-500: #7B8C93;
  --neutral-600: #5B6E78;
  --neutral-700: #41566A; /* ink-2 */
  --neutral-800: #253848;
  --neutral-900: #0F1D2A; /* ink */
  --neutral-950: #081019;

  /* ---------------------------------------------------------------
   * Primary scale — Gotka petrol teal (site tokens: --petrol #0D5C63,
   * --petrol-ink #083A3F). On gotka.com, petrol is the pervasive
   * label/link/heading-accent color, so it maps to --primary, which
   * Nexus uses just as pervasively (links, headings, primary buttons).
   * ------------------------------------------------------------- */
  --primary-50:  #EAF3F2;
  --primary-100: #D2E6E4;
  --primary-200: #A8CDC9;
  --primary-300: #7DB3AD;
  --primary-400: #4B948C;
  --primary-500: #1F7A73;
  --primary-600: #0D5C63; /* petrol — base brand color */
  --primary-700: #0A4A50;
  --primary-800: #083A3F; /* petrol-ink */
  --primary-900: #062A2E;
  --primary-950: #041C1F;

  --primary: var(--primary-600);
  --primary-lifted: var(--primary-700);
  --primary-accented: var(--primary-800);

  /* ---------------------------------------------------------------
   * Secondary — Gotka LED green (site token: --led #2EC27E). On
   * gotka.com this is the actual call-to-action fill color (submit
   * buttons, focus rings, ::selection) — used sparingly and boldly,
   * not pervasively — so it maps to --secondary/--success rather
   * than --primary.
   * ------------------------------------------------------------- */
  --secondary: #2EC27E;
  --secondary-lifted: #22A06A;
  --secondary-accented: #0B2B1D; /* led-ink — text on a green fill */

  --success: #2EC27E;
  --success-lifted: #1FA968;
  --success-accented: #0B2B1D;

  /* Warning — Gotka amber (site token: --amber #F0A63C) */
  --warning: #F0A63C;
  --warning-lifted: #D48A22;
  --warning-accented: #7A4A0F;

  /* --info / --notice / --error: no Gotka brand color maps to these,
     so they keep WHMCS's own default values (status colors are
     clearer left distinct from the brand palette anyway). */
  --info: #155dfc;
  --info-lifted: #1447e6;
  --info-accented: #193cb8;
  --notice: #7f22fe;
  --notice-lifted: #7008e7;
  --notice-accented: #5d0ec0;
  --error: #e7000b;
  --error-lifted: #c10007;
  --error-accented: #9f0712;

  /* Grayscale / neutral semantic aliases — WHMCS's own default pattern
     (aliasing onto the neutral scale), now onto Gotka's neutral scale. */
  --grayscale: var(--neutral-900);
  --grayscale-lifted: var(--neutral-800);
  --grayscale-accented: var(--neutral-700);
  --neutral: var(--neutral-500);
  --neutral-lifted: var(--neutral-600);
  --neutral-accented: var(--neutral-700);

  /* Text semantic aliases */
  --text-inverted: var(--white);
  --text-muted: var(--neutral-400);
  --text-lifted: var(--neutral-500);
  --text-accented: var(--neutral-600);
  --text: var(--neutral-900);

  /* Border semantic aliases */
  --border-muted: var(--neutral-200);
  --border: var(--neutral-300);
  --border-lifted: var(--neutral-400);
  --border-accented: var(--neutral-600);

  /* Background semantic aliases */
  --bg: var(--white);
  --bg-muted: var(--neutral-50);
  --bg-lifted: var(--neutral-100);
  --bg-accented: var(--neutral-200);
  --bg-inverted: var(--neutral-900);

  /* Extra accent colors used by things like .card-accent-* — not
     Gotka-branded, kept at WHMCS defaults. */
  --yellow-200: #fff085;
  --yellow-300: #ffdf20;
  --teal-300: #46edd5;
  --teal-400: #00d5be;
  --emerald-300: #5ee9b5;
  --pink-400: #fb64b6;

  /* Sizing/spacing — kept at WHMCS defaults (font-size handled globally
     via html{font-size} below instead). */
  --text-xs: 0.625rem;
  --text-sm: 0.75rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;
  --outline-sm: 1px;
  --outline-md: 2px;
  --outline-lg: 3px;
  --letter-spacing: 0em;
  --disabled-opacity: 25%;

  /* ---------------------------------------------------------------
   * Rounding — exact match to gotka.com's --r-sm/--r-md/--r-lg
   * ------------------------------------------------------------- */
  --rounding-sm: 9px;  /* was 4px */
  --rounding-md: 14px; /* was 8px */
  --rounding-lg: 20px; /* was 12px */

  /* Card shadow — not a Nexus token, a Gotka one (site --shadow),
     applied directly to cards/panels below. */
  --gotka-shadow: 0 18px 44px -18px rgba(15, 29, 42, .22);
}

/* ===================================================================
 * Full width — gotka.com never boxes content into a fixed max-width
 * container; it uses fluid sections with responsive edge padding
 * instead (.wrap { padding-inline: clamp(24px,5vw,88px) }). Match
 * that here so the client area uses the full viewport width too.
 * =================================================================== */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-fluid {
  width: 100%;
  max-width: 100%;
  padding-inline: clamp(24px, 5vw, 88px);
}

/* ===================================================================
 * Fonts — Gotka's self-hosted type system:
 * Bricolage Grotesque (display/headings), Instrument Sans (body),
 * IBM Plex Mono (labels, code, mono UI)
 * =================================================================== */
@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 700 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-700-800.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/instrument-sans-400-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-600.woff2") format("woff2");
}

html {
  /* "make the body font bigger" — bump the root so every rem-sized
     body/list/paragraph text throughout Nexus scales up with it. */
  font-size: 18px;
}

body {
  font-family: "Instrument Sans", system-ui, -apple-system, sans-serif;
  color: var(--text);
  /* gotka.com's page ground is its "paper" tone, not pure white —
     white (--bg) is reserved for cards/panels sitting on top of it. */
  background: var(--neutral-100);
}

/* The plan feature-list bullets (e.g. "AI Website Builder", "30
   Websites" on the store product-listing page) stayed small even
   after the html{font-size:18px} bump above. Root cause, confirmed
   from the live page source: the list is a plain <ul><li> with no
   special class, nested in Nexus's own ".product-desc" wrapper --
   and theme.min.css sets that wrapper to font-size:.9em (relative to
   its parent, not the scaled root rem), so every li inside inherits
   the same shrink. Overriding the wrapper itself (rather than
   guessing at a li selector) fixes every plan's list in one place. */
.product-desc {
  font-size: 1.05em !important;
}
.product-desc li {
  line-height: 1.6;
}

/* The footer's default light/muted text was made for a dark
   background — on the paper body background above it was nearly
   unreadable. Give it the same dark "ink" treatment as gotka.com's
   own footer instead of leaving it transparent. */
#footer, .footer {
  background: var(--bg-inverted);
  color: var(--neutral-300);
}
#footer a, .footer a {
  color: var(--white);
}
#footer a:hover, .footer a:hover {
  color: var(--secondary);
}

/* The logo/header sat flush against the very top of the page with no
   breathing room — give it some. #header is Nexus's actual header
   element id (confirmed via live inspection), .header its class. */
#header, .header {
  padding-block-start: 24px;
  padding-block-end: 12px;
}

/* Nexus doesn't wire every plain link to --primary by default (some
   inherit the base body color instead) — make brand-colored links
   explicit rather than rely on component-by-component defaults. */
a {
  color: var(--primary);
}
a:hover, a:focus {
  color: var(--primary-lifted);
}

/* Headings + anything using Bootstrap's .h1-.h6 utility classes.
   Selectors that don't exist in a given Nexus version are harmless
   no-ops, so this list is intentionally a little generous. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand,
.card-title {
  font-family: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  font-weight: 800;
}

code, pre, kbd, samp {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* Exact match to gotka.com's own focus/selection treatment. */
:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection {
  background: var(--secondary);
  color: var(--secondary-accented);
}

/* ===================================================================
 * Buttons — gotka.com's real buttons are fully pill-shaped with a
 * hover lift, not just rounded rectangles; match that here.
 * =================================================================== */
.btn {
  border-radius: 99px !important; /* some Nexus contexts (e.g. pricing
    cards) set a more specific radius that would otherwise win */
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover, .btn:focus {
  transform: translateY(-2px);
}
.btn-sm {
  border-radius: 99px !important;
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--primary-lifted);
  border-color: var(--primary-lifted);
}
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover {
  background-color: var(--primary);
  color: var(--white);
}

.btn-secondary {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--secondary-accented);
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--secondary-lifted);
  border-color: var(--secondary-lifted);
  color: var(--secondary-accented);
}

/* !important on this one specifically: the live "Transfer" domain-
   search button (#btnTransfer, class="btn btn-success btn-recaptcha
   btn-recaptcha-invisible") was still rendering as a plain dark/black
   button after the plain (non-!important) version of this rule shipped
   -- nothing in theme.min.css, all.min.css or this file's own CSS
   explains a competing rule, so something with higher effective
   specificity than a bare class selector is winning. Forcing it here
   is the safe fix regardless of what that turns out to be. */
.btn-success {
  background-color: var(--success) !important;
  border-color: var(--success) !important;
  color: var(--success-accented) !important;
}
.btn-success:hover, .btn-success:focus {
  background-color: var(--success-lifted) !important;
  border-color: var(--success-lifted) !important;
  color: var(--success-accented) !important;
}
.btn-warning {
  background-color: var(--warning);
  border-color: var(--warning);
  color: var(--warning-accented);
}
.btn-link {
  color: var(--primary);
}

/* .btn-dark (WHMCS's "Transfer" domain-search action, pricing-card
   "Order Now" buttons on some layouts, and any other secondary/dark
   action button) was the one variant this file didn't give an
   explicit text color to. Its background resolves to --bg-inverted
   (Gotka's dark ink navy), so without an override here it inherited
   the global body text color -- also --neutral-900, i.e. the exact
   same dark navy as its own background -- making the label invisible.
   Every other .btn-* variant above sets its own color for the same
   reason; .btn-info/.btn-danger and their outline counterparts are
   covered defensively too even though Nexus may not use them here. */
.btn-dark, .btn-info, .btn-danger {
  color: var(--white);
}
.btn-dark {
  background-color: var(--bg-inverted);
  border-color: var(--bg-inverted);
}
.btn-dark:hover, .btn-dark:focus {
  background-color: var(--neutral-800);
  border-color: var(--neutral-800);
  color: var(--white);
}
.btn-outline-dark {
  color: var(--bg-inverted);
  border-color: var(--bg-inverted);
}
.btn-outline-dark:hover {
  background-color: var(--bg-inverted);
  color: var(--white);
}

/* ===================================================================
 * Badges / pills
 * =================================================================== */
.badge {
  border-radius: 99px;
  font-weight: 600;
}
.badge.bg-primary, .text-bg-primary {
  background-color: var(--primary) !important;
}
.badge.bg-secondary, .text-bg-secondary {
  background-color: var(--secondary) !important;
  color: var(--secondary-accented) !important;
}
.badge.bg-success, .text-bg-success {
  background-color: var(--success) !important;
  color: var(--success-accented) !important;
}
.badge.bg-warning, .text-bg-warning {
  background-color: var(--warning) !important;
  color: var(--warning-accented) !important;
}

/* ===================================================================
 * Forms
 * =================================================================== */
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(13, 92, 99, .25); /* petrol, 25% */
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* ===================================================================
 * Cards / panels — gotka.com's soft lifted-card shadow
 * =================================================================== */
.card {
  box-shadow: var(--gotka-shadow);
}

/* ===================================================================
 * Alerts — soft brand-tinted backgrounds instead of generic ones
 * =================================================================== */
.alert-primary {
  background-color: var(--primary-50);
  border-color: var(--primary-200);
  color: var(--primary-800);
}
.alert-success {
  background-color: #E2F6EC; /* led-soft */
  border-color: var(--secondary);
  color: var(--secondary-accented);
}
.alert-warning {
  background-color: #FCEDD9;
  border-color: var(--warning);
  color: var(--warning-accented);
}

/* ===================================================================
 * Pagination / nav — active states pick up the brand primary
 * =================================================================== */
.page-link {
  color: var(--primary);
}
.page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
}
.nav-pills .nav-link.active {
  background-color: var(--primary);
}
.nav-tabs .nav-link.active {
  color: var(--primary);
}

/* ===================================================================
 * Progress bars
 * =================================================================== */
.progress-bar {
  background-color: var(--primary);
}
.progress-bar.bg-success {
  background-color: var(--success) !important;
}
.progress-bar.bg-warning {
  background-color: var(--warning) !important;
}