/* *****************************************************
 *
 *  FyfeWeb client area theme
 *  Designed & built by WCKD.io (https://wckd.io)
 *  Copyright (c) 2026 WCKD.io. All rights reserved.
 *
 *  Rebrands the WHMCS Twenty-One theme to the FyfeWeb look:
 *  indigo primary, emerald accents, Plus Jakarta Sans, softer
 *  corners. Auto-loaded by Twenty-One via its custom.css hook,
 *  so it styles every client-area page without touching core
 *  templates.
 *
 *  Two layers are covered:
 *   1. The modern store / cart ("Nexus Cart"), driven by the
 *      :root design-system variables below.
 *   2. The classic client area, whose Bootstrap 4 components
 *      hardcode the old brand blue (#336699), overridden here.
 *
 ***************************************************** */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* =========================================================
   1. Modern store (Nexus Cart) design-system variables
   ========================================================= */
:root {
  /* FyfeWeb indigo ramp */
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;
  --primary-900: #312e81;
  --primary-950: #1e1b4b;

  --primary: #4f46e5;
  --primary-lifted: #4338ca;
  --primary-accented: #3730a3;

  /* Info reuses the brand indigo so primary actions stay on-brand */
  --info: #4f46e5;
  --info-lifted: #4338ca;
  --info-accented: #3730a3;

  /* Success uses the FyfeWeb emerald accent */
  --success: #059669;
  --success-lifted: #047857;
  --success-accented: #065f46;

  /* Slightly larger rounding to match the marketing site */
  --rounding-sm: 0.5rem;
  --rounding-md: 0.75rem;
  --rounding-lg: 1rem;
}

/* =========================================================
   2. Typography: Plus Jakarta Sans across the portal
   ========================================================= */
body,
.btn,
input,
select,
textarea,
.form-control,
.nav,
.navbar,
.dropdown-menu {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Page background: clean slate rather than flat grey */
.primary-bg-color {
  background-color: #f8fafc;
}

/* =========================================================
   3. Brand colour overrides: classic Bootstrap 4 (#369 -> indigo)
   ========================================================= */

/* Links */
a {
  color: #4f46e5;
}
a:hover {
  color: #4338ca;
}

/* Primary buttons */
.btn-primary {
  background-color: #4f46e5;
  border-color: #4f46e5;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: #4338ca;
  border-color: #4338ca;
}
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: #4f46e5;
  border-color: #4f46e5;
}
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.5);
}

/* Outline + link buttons */
.btn-outline-primary {
  color: #4f46e5;
  border-color: #4f46e5;
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}
.btn-link {
  color: #4f46e5;
}
.btn-link:hover {
  color: #4338ca;
}

/* Utilities + components that hardcode the brand colour */
.text-primary {
  color: #4f46e5 !important;
}
.bg-primary {
  background-color: #4f46e5 !important;
}
.border-primary {
  border-color: #4f46e5 !important;
}
.badge-primary {
  background-color: #4f46e5;
}
.progress-bar {
  background-color: #4f46e5;
}
.list-group-item.active {
  background-color: #4f46e5;
  border-color: #4f46e5;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #4f46e5;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: #4f46e5;
}
.page-link {
  color: #4f46e5;
}
.page-item.active .page-link {
  background-color: #4f46e5;
  border-color: #4f46e5;
}

/* Form controls: indigo focus state */
.form-control:focus,
.custom-select:focus {
  border-color: #a5b4fc;
  box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #4f46e5;
  border-color: #4f46e5;
}

/* =========================================================
   4. Softer, rounder surfaces to match the marketing site
   ========================================================= */
.btn {
  border-radius: 0.625rem;
  font-weight: 600;
}
.card,
.panel,
.well,
.alert,
.list-group,
.dropdown-menu {
  border-radius: 0.875rem;
}
.form-control,
.custom-select,
.input-group-text {
  border-radius: 0.625rem;
}
.badge {
  border-radius: 0.5rem;
}

/* Product / pricing cards a touch lifted */
.card {
  border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* =========================================================
   5. Header, navigation and footer polish
   ========================================================= */

/* Logo sizing so the FyfeWeb mark sits neatly in the navbar */
.logo-img {
  max-height: 34px;
  width: auto;
}

/* Active main-nav item picks up the brand colour */
.navbar .nav-item.active > .nav-link,
.navbar .nav-link:hover {
  color: #4f46e5;
}

/* Keep links on the dark topbar light (they sit on a dark background) */
.header .topbar a,
.header .topbar .btn {
  color: rgba(255, 255, 255, 0.85);
}
.header .topbar a:hover {
  color: #ffffff;
}

/* Footer: deep indigo to match the marketing site footer */
#footer,
.footer {
  background-color: #1e1b4b;
}
#footer,
#footer a,
.footer,
.footer a {
  color: #cbd5e1;
}
#footer a:hover,
.footer a:hover {
  color: #ffffff;
}