/* SLIZ brand base — shared by the LMS front end, student area and admin panel.
   Tokens are copied from sliz.co.zw (client/src/index.css) so both sites read as one product.
   Loaded after every Infix stylesheet; page-builder blocks inject their own <style> tags into
   <body>, which is why some rules are scoped with `html body` to win on specificity. */

:root {
  --sliz-bg: #F5F5F3;            /* 60 5% 96% */
  --sliz-fg: #111214;            /* 220 9% 7% */
  --sliz-card: #FFFFFF;
  --sliz-card-border: #E9E8E5;   /* 40 6% 91% */
  --sliz-border: #E2E1DD;        /* 40 6% 88% */
  --sliz-muted: #ECEBE8;         /* 40 7% 92% */
  --sliz-muted-fg: #5F6369;      /* 220 5% 40% */
  --sliz-input: #D8D6D1;         /* 40 6% 84% */
  --sliz-gold: #FBBD23;          /* 43 96% 56% */
  --sliz-gold-hover: #F0B20F;
  --sliz-gold-soft: #FEF5DC;     /* 45 90% 92% */
  --sliz-on-gold: #1A1A1A;
  --sliz-dark: #111214;
  --sliz-danger: #D41515;
  --sliz-radius: 1rem;
  --sliz-radius-lg: 1.5rem;
  --sliz-radius-xl: 2rem;
  --sliz-font: 'General Sans', Inter, system-ui, -apple-system, sans-serif;
  --sliz-display: 'Clash Grotesk', 'General Sans', Inter, system-ui, sans-serif;
  --sliz-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --sliz-shadow: 0 10px 30px -12px rgba(0, 0, 0, .18);
  --sliz-gold-glow: 0 8px 24px -8px rgba(251, 189, 35, .7);

  /* Re-point the Infix theme variables at the SLIZ palette. The theme builds most of its
     accents from these, so this does the bulk of the recolouring without touching the DB. */
  --system_primery_gredient1: var(--sliz-gold);
  --system_primery_gredient2: var(--sliz-gold);
  --system_primary_gredient1: var(--sliz-gold);
  --system_primary_gredient2: var(--sliz-gold);
  --system_primery_color: var(--sliz-gold);
  --system_primary_color: var(--sliz-gold);
  --system_secendory_color: var(--sliz-fg);
  --system_secondary_color: var(--sliz-fg);
  --system_primery_color_05: #FBBD230d;
  --system_primery_color_07: #FBBD2312;
  --system_primery_color_08: #FBBD2314;
  --system_primery_color_10: #FBBD231a;
  --system_primery_color_20: #FBBD2333;
  --system_primery_color_30: #FBBD234d;
  --system_primery_color_50: #FBBD2380;
  --system_primery_color_60: #FBBD2399;
  --system_primery_color_70: #FBBD23b3;
  --system_primary_color_05: #FBBD230d;
  --system_primary_color_10: #FBBD231a;
  --system_primary_color_20: #FBBD2333;
  --system_primary_color_30: #FBBD234d;
  --system_primary_color_50: #FBBD2380;
  --system_primary_color_60: #FBBD2399;
  --system_primary_color_70: #FBBD23b3;
  --system_secendory_color_10: #1112141a;
  --sytem_gradient_2: var(--sliz-fg);
  --footer_background_color: var(--sliz-dark);
  --footer_headline_color: #FFFFFF;
  --footer_text_color: rgba(255, 255, 255, .62);
  --footer_text_hover_color: var(--sliz-gold);
  --bg_color: var(--sliz-bg);
  --menu_bg: var(--sliz-card);
  --menu_text: var(--sliz-fg);
  --menu_hover_text: var(--sliz-fg);
  --menu_title_text: var(--sliz-fg);
  --font_family1: var(--sliz-font);
  --font_family2: var(--sliz-display);
  --fontFamily1: var(--sliz-font);
}

html body {
  font-family: var(--sliz-font);
  color: var(--sliz-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html body h1, html body h2, html body h3,
html body .section-title h2, html body .section__title, html body .font-display {
  font-family: var(--sliz-display);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: inherit;
}
html body h4, html body h5, html body h6 { font-family: var(--sliz-font); letter-spacing: -0.01em; }
html body p, html body li, html body span, html body a, html body label,
html body input, html body select, html body textarea, html body button, html body td, html body th {
  font-family: inherit;
}

::selection { background: var(--sliz-gold); color: var(--sliz-on-gold); }

html body a { transition: color .2s var(--sliz-ease); }

/* ---------- Buttons: pill shapes, gold primary with dark text (white on gold fails contrast) ---------- */
html body .theme_btn, html body .theme-btn, html body .primary-btn, html body .primary_btn,
html body .theme_btn_lite, html body .btn-primary, html body .submit_btn,
html body .fix-gr-bg, html body .primary-btn.fix-gr-bg, html body .subcribe-form button,
html body .apply_coupon_section .theme_btn, html body button.theme_btn {
  background: var(--sliz-gold) !important;
  background-image: none !important;
  color: var(--sliz-on-gold) !important;
  border: 1px solid var(--sliz-gold) !important;
  border-radius: 999px !important;
  font-family: var(--sliz-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none;
  box-shadow: var(--sliz-gold-glow);
  transition: filter .2s var(--sliz-ease), transform .16s var(--sliz-ease), box-shadow .2s var(--sliz-ease) !important;
}
html body .theme_btn:hover, html body .theme-btn:hover, html body .primary-btn:hover, html body .primary_btn:hover,
html body .btn-primary:hover, html body .fix-gr-bg:hover, html body .subcribe-form button:hover {
  filter: brightness(.95);
  color: var(--sliz-on-gold) !important;
  background: var(--sliz-gold) !important;
}
html body .theme_btn:active, html body .theme-btn:active, html body .primary-btn:active, html body .fix-gr-bg:active {
  transform: scale(.97);
}
html body .theme_btn *, html body .theme-btn *, html body .primary-btn *, html body .fix-gr-bg * { color: inherit !important; }

html body .secondary-btn, html body .theme_line_btn, html body .theme_btn2, html body .btn-outline-primary,
html body .primary-btn.tr-bg, html body .primary-btn.white, html body .view_all, html body .view-all-btn {
  background: var(--sliz-card) !important;
  background-image: none !important;
  color: var(--sliz-fg) !important;
  border: 1px solid var(--sliz-card-border) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color .2s var(--sliz-ease), transform .16s var(--sliz-ease) !important;
}
html body .secondary-btn:hover, html body .theme_line_btn:hover, html body .theme_btn2:hover,
html body .btn-outline-primary:hover, html body .view_all:hover, html body .view-all-btn:hover {
  background: var(--sliz-muted) !important;
  color: var(--sliz-fg) !important;
}

/* ---------- Form controls ---------- */
html body .form-control, html body .primary_input_field, html body .primary-input,
html body input[type="text"], html body input[type="email"], html body input[type="password"],
html body input[type="number"], html body input[type="tel"], html body input[type="search"],
html body input[type="url"], html body input[type="date"], html body select, html body textarea {
  border-radius: .875rem;
  border-color: var(--sliz-input);
  font-family: var(--sliz-font);
}
html body .form-control:focus, html body .primary_input_field:focus, html body .primary-input:focus,
html body input:focus, html body select:focus, html body textarea:focus {
  border-color: var(--sliz-gold) !important;
  box-shadow: 0 0 0 3px rgba(251, 189, 35, .25) !important;
  outline: none;
}
html body .nice-select { border-radius: .875rem; border-color: var(--sliz-input); }
html body .nice-select:hover, html body .nice-select.open, html body .nice-select:focus { border-color: var(--sliz-gold); }
html body .nice-select .list { border-radius: var(--sliz-radius); box-shadow: var(--sliz-shadow); border: 1px solid var(--sliz-card-border); }
html body .nice-select .option.selected, html body .nice-select .option:hover, html body .nice-select .option.focus {
  background: var(--sliz-gold-soft) !important; color: var(--sliz-fg) !important;
}

/* Checkboxes/radios keep Infix markup; just recolour the tick box */
html body .primary_checkbox input:checked ~ .checkmark,
html body .common_checkbox:checked + label::before { background: var(--sliz-gold) !important; border-color: var(--sliz-gold) !important; }
html body .primary_checkbox input:checked ~ .checkmark::after { border-color: var(--sliz-on-gold) !important; }
html body input[type="checkbox"], html body input[type="radio"] { accent-color: var(--sliz-gold); }

/* ---------- Modals, dropdowns, pagination ---------- */
html body .modal-content { border-radius: var(--sliz-radius-lg); border: 1px solid var(--sliz-card-border); overflow: hidden; }
html body .dropdown-menu { border-radius: var(--sliz-radius); border: 1px solid var(--sliz-card-border); box-shadow: var(--sliz-shadow); padding: .375rem; }
html body .dropdown-item { border-radius: .625rem; }
html body .dropdown-item:hover, html body .dropdown-item:focus { background: var(--sliz-muted); color: var(--sliz-fg); }
html body .dropdown-item.active, html body .dropdown-item:active { background: var(--sliz-gold); color: var(--sliz-on-gold); }

html body .pagination .page-link, html body .paginate_button {
  border-radius: 999px !important; border-color: var(--sliz-card-border) !important; color: var(--sliz-fg) !important;
}
html body .pagination .page-item.active .page-link, html body .paginate_button.current,
html body .paginate_button.current:hover {
  background: var(--sliz-fg) !important; border-color: var(--sliz-fg) !important; color: #fff !important;
}

/* Preloader spinner in brand colour */
html body .preloader { background: var(--sliz-bg) !important; }

/* Toastr: keep semantic colours, just round them */
html body #toast-container > div { border-radius: var(--sliz-radius); box-shadow: var(--sliz-shadow); opacity: 1; }

/* Eyebrow label, reused by the redesigned header/footer bits */
.sliz-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
  color: var(--sliz-muted-fg);
}
.sliz-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--sliz-gold); }

@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Some Infix templates force system-ui on h4–h6; the brand font must win everywhere */
html body h4, html body h5, html body h6 { font-family: var(--sliz-font) !important; }
html body .contact_title h4 {
  font-family: var(--sliz-display) !important; font-weight: 500 !important; color: var(--sliz-fg) !important;
  font-size: clamp(2rem, 3.5vw, 2.75rem) !important; letter-spacing: -0.03em;
}
/* Bootstrap's body font variable + a later theme rule were putting the whole page back on system-ui */
:root, html body { --bs-body-font-family: var(--sliz-font); --bs-font-sans-serif: var(--sliz-font); }
html, html body { font-family: var(--sliz-font) !important; }