/*
  Fluent Commerce Builders Portal — Builders Home Theme
  Target: Magentrix Theme Builder → Theme and Settings → Custom CSS

  Reference: Builders Home CSS-only 1920.png
  Design: clean editorial, warm cream background, flat black header/footer, plain white cards.

  Class notes supplied by user:
    .course-img-container  — learning path / course boxes
    .alert.alert-info      — info notice banner at top of home page
*/

/* ── Fonts ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Instrument+Serif:ital,wght@0,400;1,400&display=swap');

/* ── Logo ─────────────────────────────────────────────────────────────── */
.site-logo-img img {
  content: url('/Contents/Assets/images/FC_Logo_White.svg') !important;
}

.public .site-logo-img img {
  content: url('/Contents/Assets/images/FC_Logo_Black.svg') !important;
}

/* ── CSS variable overrides ────────────────────────────────────────────── */
:root {
  --mag-primary-font:               "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mag-heading-font:               "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --mag-page-bg-color:              #f0eeeb;
  --mag-page-text-color:            #1a1a1a;
  --mag-page-bg-100:                #ffffff;
  --mag-page-bg-200:                #e8e5e0;
  --mag-page-bg-300:                #d8d4cc;

  --mag-primary-color:              #583bac;
  --mag-primary-hover-color:        #6d4fd1;
  --mag-primary-text-color:         #ffffff;
  --mag-secondary-color:            #00dbff;
  --mag-secondary-text-color:       #0a0a0f;

  --mag-nav-bg-color:               #0a0a0f;
  --mag-nav-text-color:             rgba(255, 255, 255, 0.85);
  --mag-nav-text-hover-color:       #ffffff;
  --mag-nav-hover-bg-color:         rgba(255, 255, 255, 0.1);
  --mag-nav-active-bg-color:        rgba(255, 255, 255, 0.15);

  --mag-header-bg-color:            #0a0a0f;
  --mag-header-bg-100:              #111111;
  --mag-header-bg-200:              #1a1a1a;
  --mag-header-text-color:          #ffffff;

  --mag-element-border-color:       #d8d4cc;
  --mag-element-border-muted-color: #e5e2db;
  --mag-element-border-focus-color: #583bac;

  --mag-base:                       #1a1a1a;
  --mag-base-100:                   #2d2d2d;
  --mag-base-200:                   #4a4a4a;
  --mag-base-300:                   #6b6b6b;
  --mag-base-400:                   #9898a0;
  --mag-base-500:                   #e5e2db;

  --mag-box-shadow:                 rgba(0, 0, 0, 0.08);
  --mag-border-radius:              4px;
}

/* ── Global body ─────────────────────────────────────────────────────── */
body,
html {
  font-family: var(--mag-primary-font) !important;
  background-color: #f0eeeb !important;
  color: #1a1a1a !important;
  -webkit-font-smoothing: antialiased;
}

.siteBody {
  background-color: #f0eeeb !important;
}

/* Login page — transparent so background image shows */
.siteBodyWrapper .siteBody {
  background-color: transparent !important;
}

/* ── Typography ──────────────────────────────────────────────────────── */
p, li, td, th, label, span, div,
.form-control, input, textarea, select {
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

h1, h2,
.h1, .h2 {
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.01em;
}

h3, h4, h5, h6,
.h3, .h4, .h5, .h6 {
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

/* ── Links ────────────────────────────────────────────────────────────── */
a {
  color: #583bac;
  transition: color 0.2s ease;
}
a:hover, a:focus {
  color: #3d2680;
  text-decoration: none;
}

/* ── Header / Navigation ─────────────────────────────────────────────── */
.siteHeaderContainer,
.site-page-header,
.site-page-header.navbar-fixed {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.site-page-top-row {
  background: #0a0a0f !important;
  border-bottom: 1px solid #222222 !important;
  box-shadow: none !important;
}

.mag-navbarmenu,
.mag-site-main-menu,
.navbar-default,
.navbar,
.navbar-collapse,
.navbar-header,
.siteHeader-items {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.mag-site-main-menu.navbar-menu .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a {
  color: #ffffff !important;
  font-family: "Instrument Sans", sans-serif !important;
  font-weight: 500;
  transition: color 0.2s ease;
}

.mag-site-main-menu.navbar-menu .navbar-nav a:hover,
.mag-site-main-menu.navbar-menu .navbar-nav a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #583bac !important;
  background-color: transparent !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: inset 0 -2px 0 #ffffff !important;
}

.user-menu-links-section,
.user-menu-links-section a,
.user-menu-links-section li,
.user-menu-links-section span,
.user-menu-links-section p {
  color: #1a1a1a !important;
}

/* ── Banner / Hero ───────────────────────────────────────────────────── */
.mask.bg-gradient-primary,
.bg-gradient-primary,
[class*="bg-gradient-primary"],
.home-page-banner,
.mag-banner-container {
  background-color: #0a0a0f !important;
  opacity: 1 !important;
  height: 200px !important;
  min-height: 200px !important;
}

.waves-wrapper {
  display: none !important;
}

.home-page-banner .heading-responsive,
.mag-banner-container .heading-responsive {
  color: #ffffff !important;
}

/* ── Alert info ──────────────────────────────────────────────────────── */
.alert.alert-info {
  background-color: #ffffff !important;
  border: 1px solid #ddd9d3 !important;
  border-radius: 6px !important;
  color: #1a1a1a !important;
  padding: 20px 24px !important;
  box-shadow: none !important;
  font-family: "Instrument Sans", sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
}

.alert.alert-info a {
  color: #583bac !important;
  text-decoration: underline !important;
}

.alert.alert-info a:hover {
  color: #3d2680 !important;
}

.alert {
  border-width: 0 0 0 3px !important;
  border-style: solid !important;
}

.alert-success {
  background-color: #edf7ed !important;
  border-left-color: #5cb85c !important;
  color: #2d6a2d !important;
}

.alert-warning {
  background-color: #fff8ec !important;
  border-left-color: #f0ad4e !important;
  color: #7a5000 !important;
}

.alert-danger {
  background-color: #fdf0ef !important;
  border-left-color: #d9534f !important;
  color: #7a1f1c !important;
}

/* ── Course / Learning Path boxes (.course-img-container) ────────────── */
.course-img-container {
  background-color: #ffffff !important;
  border: 1px solid #d8d4cc !important;
  border-radius: 8px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.course-img-container:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px) !important;
}

.course-img-container h3,
.course-img-container h4,
.course-img-container .course-title {
  font-family: "Instrument Sans", sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #1a1a1a !important;
  padding: 16px 16px 12px !important;
  margin: 0 !important;
  border-bottom: 1px solid #eeece8 !important;
}

.course-img-container img,
.course-img-container .course-image,
.course-img-container .image-area {
  width: 100% !important;
  display: block !important;
  background-color: #f8f6f2 !important;
  border-bottom: 1px solid #eeece8 !important;
}

.course-img-container .course-description,
.course-img-container .course-roles,
.course-img-container p {
  font-family: "Instrument Sans", sans-serif !important;
  font-size: 0.82rem !important;
  color: #4a4a4a !important;
  padding: 12px 16px 16px !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.course-img-container .course-number {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #9898a0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 12px 16px 4px !important;
}

/* ── Content blocks / Panels / Cards ────────────────────────────────── */
.panel,
.panel-default,
.tabPanel,
.detailBlock,
.genericBlock,
.mag-std-form,
.tabPanelEdit,
.well,
.box {
  background-color: #ffffff !important;
  border-color: #d8d4cc !important;
  color: #1a1a1a !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  border-radius: 8px !important;
}

.panel-default > .panel-heading,
.tabPanel .blockHeader,
.detailBlock .blockHeader,
.genericBlock .blockHeader {
  background-color: #faf9f6 !important;
  border-bottom-color: #eeece8 !important;
  border-top: 2px solid #583bac !important;
  color: #1a1a1a !important;
  font-family: "Instrument Sans", sans-serif !important;
  font-weight: 600;
  border-radius: 8px 8px 0 0 !important;
}

.panel-footer,
.tabPanel .blockFooter,
.detailBlock .blockFooter {
  background-color: #faf9f6 !important;
  border-top-color: #eeece8 !important;
  color: #6b6b6b !important;
  border-radius: 0 0 8px 8px !important;
}

.mag-card {
  background-color: #ffffff !important;
  border: 1px solid #d8d4cc !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.mag-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  font-family: "Instrument Sans", sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
  border-radius: 6px !important;
}

.btn-primary {
  background: #583bac !important;
  border: none !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: #6d4fd1 !important;
}

.btn-default {
  background-color: #ffffff !important;
  border: 1px solid #d8d4cc !important;
  color: #1a1a1a !important;
}

.btn-default:hover,
.btn-default:focus {
  background-color: #f5f3f0 !important;
  border-color: #583bac !important;
  color: #583bac !important;
}

.btn-link {
  color: #583bac !important;
}

/* ── Forms ───────────────────────────────────────────────────────────── */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  background-color: #ffffff !important;
  border: 1px solid #d8d4cc !important;
  color: #1a1a1a !important;
  border-radius: 6px !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: #583bac !important;
  box-shadow: 0 0 0 3px rgba(88, 59, 172, 0.1) !important;
}

.form-control::placeholder {
  color: #9898a0 !important;
}

label,
.control-label {
  color: #4a4a4a !important;
  font-weight: 500;
}

/* ── Tables ──────────────────────────────────────────────────────────── */
.table { color: #1a1a1a; }

.table > thead > tr > th {
  background-color: #f5f3f0 !important;
  color: #6b6b6b !important;
  border-bottom-color: #d8d4cc !important;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.table > tbody > tr > td {
  border-top-color: #eeece8 !important;
  color: #1a1a1a;
}

.table-hover > tbody > tr:hover > td {
  background-color: #f8f6f2 !important;
}

/* ── Dropdowns ───────────────────────────────────────────────────────── */
.dropdown-menu {
  background-color: #ffffff !important;
  border-color: #d8d4cc !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
}

.dropdown-menu,
.dropdown-menu a,
.dropdown-menu li,
.dropdown-menu span,
.dropdown-menu .folder-dropdown-sub-menuitem {
  color: #1a1a1a !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu .folder-dropdown-sub-menuitem:hover,
.dropdown-menu .folder-dropdown-sub-menuitem:hover a {
  background-color: #f5f3f0 !important;
  color: #583bac !important;
}

/* ── Tabs ────────────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom-color: #d8d4cc !important;
}

.nav-tabs > li > a {
  color: #6b6b6b !important;
  border-color: transparent !important;
  font-weight: 500;
}

.nav-tabs > li > a:hover {
  color: #1a1a1a !important;
  background-color: #f5f3f0 !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color: #ffffff !important;
  border-color: #d8d4cc #d8d4cc #ffffff !important;
  color: #583bac !important;
  font-weight: 600;
}

/* ── Modals ──────────────────────────────────────────────────────────── */
.modal-content {
  background-color: #ffffff !important;
  border-color: #d8d4cc !important;
  color: #1a1a1a !important;
  border-radius: 12px !important;
}

.modal-header {
  border-bottom-color: #eeece8 !important;
}

.modal-footer {
  border-top-color: #eeece8 !important;
  background-color: #faf9f6 !important;
}

.modal-backdrop.in {
  opacity: 0.5 !important;
}

/* ── Badges & Labels ─────────────────────────────────────────────────── */
.badge {
  background-color: #eeece8;
  color: #4a4a4a;
}

.badge-primary { background-color: #583bac !important; color: #ffffff !important; }
.label-primary { background-color: #583bac !important; }

/* ── Pagination ──────────────────────────────────────────────────────── */
.pagination > li > a,
.pagination > li > span {
  background-color: #ffffff !important;
  border-color: #d8d4cc !important;
  color: #583bac !important;
}

.pagination > li > a:hover {
  background-color: #f5f3f0 !important;
  border-color: #583bac !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
  background-color: #583bac !important;
  border-color: #583bac !important;
  color: #ffffff !important;
}

/* ── Progress bars ───────────────────────────────────────────────────── */
.progress {
  background-color: #e5e2db !important;
  border-radius: 100px !important;
  height: 6px !important;
  box-shadow: none !important;
}

.progress-bar {
  background: #583bac !important;
  border-radius: 100px !important;
  box-shadow: none !important;
}

/* ── Reward summary ──────────────────────────────────────────────────── */
.reward-summary,
.reward-summary div,
.reward-summary h4,
.reward-summary small,
.reward-summary span,
.reward-summary p {
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.reward-summary .media-left img {
  border-radius: 8px !important;
  object-fit: cover !important;
}

/* "Current Level" label */
.reward-summary .text-muted {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #9898a0 !important;
  margin: 0 0 2px !important;
}

/* Tier name — h4.media-heading.text-uppercase */
.reward-summary h4.media-heading.text-uppercase {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 2px 0 4px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

/* "Last 365 days: X Points" */
.reward-summary .media-body > div:not([class]) {
  font-size: 0.76rem !important;
  color: #9898a0 !important;
}

.reward-summary .mt-2 {
  margin-top: 14px !important;
}

/* "X Points until next level" */
.reward-summary .mt-2 > h4 {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

.reward-summary .mt-2 > h4 small {
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  color: #9898a0 !important;
}

.reward-summary .progress {
  margin-bottom: 0 !important;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.siteFooter,
.site-footer {
  background: #0a0a0f !important;
  border-top: 1px solid #222222 !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.siteFooter > *,
.site-footer > *,
.siteFooter .copyright,
.siteFooter .poweredby,
.siteFooter .siteFooter-flexBox,
.custom-footer-flexbox-container {
  background: transparent !important;
}

.siteFooter a,
.site-footer a {
  color: rgba(255, 255, 255, 0.55) !important;
  transition: color 0.2s ease;
}

.siteFooter a:hover,
.site-footer a:hover {
  color: #ffffff !important;
}

/* ── Swiper nav buttons ───────────────────────────────────────────────── */
.swiper-button-prev,
.swiper-button-next,
[class*="swiper-button-prev-"],
[class*="swiper-button-next-"] {
  width: 36px !important;
  height: 36px !important;
  background-color: #ffffff !important;
  border: 1px solid #d8d4cc !important;
  border-radius: 6px !important;
  color: #1a1a1a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  position: static !important;
  margin-top: 0 !important;
}

.swiper-button-prev::after,
.swiper-button-next::after,
[class*="swiper-button-prev-"]::after,
[class*="swiper-button-next-"]::after {
  display: none !important;
}

.swiper-button-prev::before,
[class*="swiper-button-prev-"]::before {
  content: '←' !important;
  font-family: "Instrument Sans", -apple-system, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
}

.swiper-button-next::before,
[class*="swiper-button-next-"]::before {
  content: '→' !important;
  font-family: "Instrument Sans", -apple-system, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover,
[class*="swiper-button-prev-"]:hover,
[class*="swiper-button-next-"]:hover {
  background-color: #f5f3f0 !important;
  border-color: #583bac !important;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled,
[class*="swiper-button-prev-"].swiper-button-disabled,
[class*="swiper-button-next-"].swiper-button-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* ── Misc ─────────────────────────────────────────────────────────────── */
hr {
  border-color: #d8d4cc !important;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f0eeeb; }
::-webkit-scrollbar-thumb { background: #c8c4bc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #583bac; }

::selection {
  background-color: rgba(88, 59, 172, 0.15);
  color: #1a1a1a;
}

.login-title {
  color: #1a1a1a !important;
}