/*
 * Ryft Node: align the WHMCS "universal" client theme with the panel (Arix dark mode).
 * Loaded last through includes/hooks/ryftnode_panel_theme.php (ClientAreaHeadOutput),
 * so it survives theme/order-form updates. Palette mirrors panel settings::arix:*.
 * `html:root` outranks the `:root` blocks in the theme and order-form custom.css.
 */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

html:root {
  /* Panel tokens (settings::arix dark palette) */
  --ryft-primary: #7F30C2;
  --ryft-primary-hover: #9446D6;
  --ryft-primary-soft: rgba(127, 48, 194, 0.16);
  --ryft-gray-50: #EBEBEB;
  --ryft-gray-100: #D0CDD4;
  --ryft-gray-200: #B2ACBA;
  --ryft-gray-300: #8C7F9D;
  --ryft-gray-400: #695D78;
  --ryft-gray-500: #4A4155;
  --ryft-gray-600: #322B3C;
  --ryft-gray-700: #271E33;
  --ryft-gray-800: #180D26;
  --ryft-gray-900: #0C0614;
  --ryft-radius-box: 11px;
  --ryft-radius-input: 8px;

  /* Theme variables used by universal + universal_checkout */
  --color-primary: var(--ryft-primary);
  --color-accent: #A66BDB;
  --color-warning: var(--ryft-gray-300);
  --button-secondary: var(--ryft-gray-600);
  --color-text: var(--ryft-gray-50);
  --color-bg-primary: var(--ryft-gray-900);
  --color-bg-secondary: var(--ryft-gray-800);
  --color-bg-input: var(--ryft-gray-900);
  --color-bg-disabled: var(--ryft-gray-700);
  --color-border: var(--ryft-gray-700);
  --border-width: var(--ryft-radius-box);   /* the theme uses this name as a border radius */
  --border-radius: var(--ryft-radius-box);
}

html body,
html body .btn,
html body input,
html body select,
html body textarea,
html body .form-control {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Panel background: settings::arix:styling:backgroundImage, "translucent" = 50% opacity over gray-800,
   fixed and cover, like LayoutWrapper.tsx in the panel. */
html body.primary-bg-color {
  background-color: var(--ryft-gray-800);
  color: var(--ryft-gray-50);
  position: relative;
  isolation: isolate;
}
html body.primary-bg-color::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url('https://i.imgur.com/73LI0BL.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.5;
  pointer-events: none;
}
/* Page sections that paint an opaque background would hide the image */
html body section#main-body,
html body .main-body,
html body #main-body {
  background: transparent;
}
/* Boxes over the image: panel backdrop 60% */
html body .card,
html body .panel,
html body .sidebar .card,
html body .list-group-item {
  background-color: rgba(24, 13, 38, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Muted text like the panel's gray-300 */
html body .text-muted,
html body small,
html body .small {
  color: var(--ryft-gray-300) !important;
}

/* Inputs: panel radius 8px, gray-500 border, primary focus ring */
html body .form-control,
html body .custom-select,
html body .input-group-text,
html body select.form-control {
  border-radius: var(--ryft-radius-input);
  border-color: var(--ryft-gray-500);
  background-color: var(--ryft-gray-900);
  color: var(--ryft-gray-50);
}
html body .form-control:focus,
html body .custom-select:focus {
  border-color: var(--ryft-primary);
  box-shadow: 0 0 0 3px var(--ryft-primary-soft);
}

/* Buttons */
html body .btn {
  border-radius: var(--ryft-radius-input);
  font-weight: 700;
}
html body .btn-primary,
html body .btn-success,
html body .btn-order-now,
html body .btn-checkout {
  background-color: var(--ryft-primary);
  border-color: var(--ryft-primary);
  color: #fff;
}
html body .btn-primary:hover,
html body .btn-success:hover,
html body .btn-order-now:hover,
html body .btn-checkout:hover {
  background-color: var(--ryft-primary-hover);
  border-color: var(--ryft-primary-hover);
}
html body .btn-default,
html body .btn-secondary {
  background-color: var(--ryft-gray-600);
  border-color: var(--ryft-gray-500);
  color: var(--ryft-gray-50);
}

/* Cards and panels: gray-800 boxes with 11px radius */
html body .card,
html body .panel,
html body .list-group-item,
html body .modal-content,
html body .dropdown-menu {
  border-radius: var(--ryft-radius-box);
  border-color: var(--ryft-gray-700);
}

/* Links and active states */
html body a { color: #B98AE6; }
html body a:hover { color: #D2B3F0; }
html body .list-group-item.active,
html body .nav-pills .nav-link.active {
  background-color: var(--ryft-primary-soft);
  border-color: var(--ryft-primary);
  color: var(--ryft-gray-50);
}

/* Pagination had hardcoded #202020 / #4f5360 in custom.css */
html body .page-link,
html body .page-link:focus,
html body .page-link:hover {
  background: var(--ryft-gray-800);
  color: var(--ryft-gray-200);
  border-color: var(--ryft-gray-700);
}
html body .page-item.active .page-link {
  background: var(--ryft-primary);
  border-color: var(--ryft-primary);
  color: #fff;
}

/* Brand: panel icon logo (32px) followed by the site name, like Arix with fullLogo off */
html body header.header .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ryft-gray-50);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
}
html body header.header .navbar-brand .logo-img {
  /* The client area renders the local assets/img/logo.png, not the LogoURL setting;
     swap it for the exact panel logo (settings::arix:general:logo). */
  content: url('https://i.imgur.com/pJhSfdL.png');
  height: 32px;
  width: auto;
  max-width: none;
}
html body header.header .navbar-brand:has(.logo-img)::after {
  content: 'RYFTNODE';
  font-size: 1.15rem;
  line-height: 1;
}

/* Tables */
html body .table,
html body .table td,
html body .table th {
  border-color: var(--ryft-gray-700);
}