/* ============================================================
   WFI BASE - Element Styles
   Typography, body defaults, heading hierarchy
   ============================================================ */

* {
  border-color: var(--wfi-border);
}

body {
  font-family: var(--wfi-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--wfi-background);
  color: var(--wfi-foreground);
  line-height: 1.65;
}

/* Arabic / RTL font override */
html[lang="ar"] body,
html[dir="rtl"] body,
[dir="rtl"] body {
  font-family: var(--wfi-font-arabic);
}

h1 {
  font-weight: 700;
  line-height: 1;            /* 60/60 — was 1.1 (66px) */
}

h2 {
  font-weight: 700;
  line-height: 1;            /* 48/48 — was 1.15 (55.2px) */
}

h3 {
  font-weight: 600;
  line-height: 1.333;        /* 32/24 — was 1.25 (20/20 kept tight) */
  margin-block-end: 0.75rem; /* source `mb-3` = 12px */
}

/* Global link color reset — overrides app.css:3-5 (`a, .btn-link { color: #006bb7 }`),
   which is the Blazor scaffolded default and leaks a cyan-blue onto unstyled links.
   Source's Tailwind preflight leaves `<a>` at inherited foreground, so we match that. */
body a {
  color: inherit;
  text-decoration: none;
}

/* Animated elements.
   NOTE: intentionally NO permanent `will-change` here. A persistent `will-change: opacity,
   transform` on every [data-animate] element forces always-on compositor layers, which some
   memory-constrained mobile GPUs / older Safari can drop or fail to paint — leaving the element
   blank. These are short, one-shot entrance animations driven by anime.js; the browser promotes
   a layer for the duration of the animation on its own, so the permanent hint isn't needed. */

/* ============================================================
   Info pages (/about, /privacy, /terms, /cookies, /careers, etc.)
   The React reference centers all section headings, body copy,
   and CTAs. Override the existing right/left-aligned defaults.
   ============================================================ */

/* PageHero blue variant — overrides the scoped light gradient.
   `body` prefix bumps specificity to beat the scoped `.wfi-page-hero[b-XXX]`
   rule (equal class+attr count), since the global stylesheet loads BEFORE
   the Website.styles.css bundle. Used by /about, /privacy, /terms, /cookies,
   /careers, and other Info pages that wrap PageHero. */
body [data-testid="section-page-hero"].wfi-page-hero {
  background: var(--wfi-primary);
  color: #fff;
  text-align: center;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.15);
}
body [data-testid="section-page-hero"] .wfi-page-hero__content {
  margin-inline: auto;
}
body [data-testid="section-page-hero"] .wfi-page-hero__title {
  color: #fff;
}
body [data-testid="section-page-hero"] .wfi-page-hero__description {
  color: hsla(0, 0%, 100%, 0.85);
  margin-inline: auto;
}

/* Section spacing */
.wfi-section { padding-block: 3.5rem; }
@media (min-width: 768px) { .wfi-section { padding-block: 5rem; } }
.wfi-section-muted {
  background: hsla(0, 0%, 96%, 0.5);
  border-block-start: 1px solid hsla(0, 0%, 0%, 0.05);
}

/* Center-aligned info content (used on /about, /privacy, /terms, /cookies, etc.) */
.wfi-info-prose-wrapper,
.wfi-info-cta-wrapper {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}
.wfi-info-title {
  font-family: var(--wfi-font-display, 'Inter', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wfi-foreground, #161616);
  margin: 0 auto 1rem;
}
@media (min-width: 768px) { .wfi-info-title { font-size: 1.875rem; } }
html[lang="ar"] .wfi-info-title,
[dir="rtl"] .wfi-info-title { font-family: var(--wfi-font-arabic); }
.wfi-info-body {
  font-size: 1rem;
  color: hsl(0, 0%, 38%);
  line-height: 1.7;
  margin: 0 auto 1rem;
  max-width: 48rem;
}
@media (min-width: 768px) { .wfi-info-body { font-size: 1.0625rem; } }
.wfi-info-label {
  color: var(--wfi-foreground, #161616);
  font-weight: 600;
}

/* Values-grid card */
.wfi-info-card {
  border: 1px solid hsla(0, 0%, 0%, 0.08) !important;
  border-radius: 0.75rem !important;
  background: #fff !important;
  height: 100%;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.wfi-info-card:hover {
  box-shadow: 0 10px 28px -16px hsla(0, 0%, 0%, 0.16);
  transform: translateY(-2px);
}
.wfi-info-card .wfi-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: hsla(234, 78%, 49%, 0.1);
  color: var(--wfi-primary);
  margin: 0 auto 1rem;
}
.wfi-info-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wfi-foreground, #161616);
  margin: 0 0 0.5rem;
}
.wfi-info-card__body {
  font-size: 0.875rem;
  color: hsl(0, 0%, 40%);
  line-height: 1.6;
  margin: 0;
}

.color-pc,.color-primary{
	color: var(--wfi-primary) !important;
}
.color-gray{
	color: hsl(0, 0%, 40%) !important;
}
.color-white{
	color: #FFFFFF !important;
}
.color-black{
	color: #000000 !important;
}
/* ============================================================
   Auth pages (/login, /signup) — frontend-only mock screens
   matching the React reference's two-column AuthLayout pattern.
   ============================================================ */

.auth-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--wfi-background, #fff);
}
.auth-layout__main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .auth-layout__main { flex-direction: row; }
}

/* Cover image panel — hidden below lg, ~45% width on lg+ */
.auth-layout__cover {
  display: none;
  position: relative;
  overflow: hidden;
  background: hsla(234, 78%, 49%, 0.05);
  align-items: center;
  justify-content: center;
}
@media (min-width: 992px) {
  .auth-layout__cover {
    display: flex;
    width: 45%;
  }
}
@media (min-width: 1280px) {
  .auth-layout__cover { width: 50%; }
}
.auth-layout__cover-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, hsla(234, 78%, 49%, 0.1), hsla(234, 78%, 49%, 0.05) 50%, transparent);
  pointer-events: none;
}
.auth-layout__cover-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.auth-layout__panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  overflow-y: auto;
}
@media (min-width: 640px) {
  .auth-layout__panel { padding: 2.5rem 1.5rem; }
}
@media (min-width: 992px) {
  .auth-layout__panel { padding: 4rem 1.5rem; }
}
.auth-layout__inner {
  width: 100%;
  max-width: 28rem;
}

/* Header */
.auth-form-header {
  text-align: center;
  margin-block-end: 2rem;
}
.auth-form-header__title {
  font-family: var(--wfi-font-display, 'Inter', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wfi-foreground, #161616);
  margin: 0 0 0.5rem;
}
@media (min-width: 640px) { .auth-form-header__title { font-size: 1.875rem; } }
html[lang="ar"] .auth-form-header__title,
[dir="rtl"] .auth-form-header__title { font-family: var(--wfi-font-arabic); }
.auth-form-header__subtitle {
  font-size: 0.875rem;
  color: hsl(0, 0%, 40%);
  margin: 0;
}

/* Card */
.auth-card {
  background: #fff;
  border: 1px solid hsla(0, 0%, 0%, 0.08);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.04), 0 1px 2px hsla(0, 0%, 0%, 0.06);
}
.auth-card__body { padding: 1.5rem; }
@media (min-width: 640px) { .auth-card__body { padding: 2rem; } }

/* Social buttons */
.auth-social {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-end: 1.5rem;
}
.auth-social__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  height: 2.5rem;
  border: 1px solid hsla(0, 0%, 0%, 0.12);
  background: #fff;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wfi-foreground, #161616);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.auth-social__btn:hover {
  background: hsl(0, 0%, 96%);
  border-color: hsla(0, 0%, 0%, 0.2);
}
.auth-social__btn i { font-size: 1rem; }

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 1.5rem;
}
.auth-divider__line {
  flex: 1;
  height: 1px;
  background: hsla(0, 0%, 0%, 0.1);
}
.auth-divider__text {
  font-size: 0.75rem;
  color: hsl(0, 0%, 50%);
  white-space: nowrap;
}

/* Form */
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 480px) {
  .auth-form__row { grid-template-columns: 1fr 1fr; }
}
.auth-form__field { display: flex; flex-direction: column; gap: 0.375rem; }
.auth-form__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wfi-foreground, #161616);
}
.auth-form__input-wrap { position: relative; }
.auth-form__input {
  width: 100%;
  height: 2.5rem;
  border: 1px solid hsla(0, 0%, 0%, 0.12);
  background: #fff;
  border-radius: 0.5rem;
  padding: 0 0.875rem;
  font-size: 0.875rem;
  color: var(--wfi-foreground, #161616);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-form__input::placeholder { color: hsl(0, 0%, 55%); }
.auth-form__input:focus {
  border-color: var(--wfi-primary);
  box-shadow: 0 0 0 3px hsla(234, 78%, 49%, 0.15);
}
.auth-form__input-wrap .auth-form__input { padding-inline-end: 2.5rem; }
.auth-form__eye {
  position: absolute;
  inset-inline-end: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: hsl(0, 0%, 50%);
  padding: 0.25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auth-form__eye:hover { color: var(--wfi-foreground, #161616); }
.auth-form__terms {
  font-size: 0.75rem;
  color: hsl(0, 0%, 45%);
  line-height: 1.5;
  margin: 0;
}
.auth-form__terms a {
  color: var(--wfi-primary);
  text-decoration: none;
  font-weight: 500;
}
.auth-form__terms a:hover { text-decoration: underline; }
.auth-form__submit {
  width: 100%;
  height: 2.75rem;
  background: var(--wfi-primary);
  color: #fff;
  border: 0;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}
.auth-form__submit:hover { background: hsl(234, 78%, 42%); }
.auth-form__submit:active { transform: translateY(1px); }
.auth-form__submit:disabled {
  background: hsl(0, 0%, 70%);
  cursor: not-allowed;
}

/* Footer link */
.auth-footer-link {
  text-align: center;
  font-size: 0.875rem;
  color: hsl(0, 0%, 40%);
  margin-block-start: 1.5rem;
}
.auth-footer-link a {
  color: var(--wfi-primary);
  font-weight: 500;
  text-decoration: none;
  margin-inline-start: 0.25rem;
}
.auth-footer-link a:hover { text-decoration: underline; }

/* ============================================================
   /individuals existing-structure overrides
   These target the deployed Razor markup (which may not have
   picked up the structural rewrite yet) and bring it visually
   close to the React reference. Once the rewritten Razor lands,
   it will use the dedicated `.ind-platform`, `.ind-hero`, etc.
   classes from Individuals.razor.css instead.
   ============================================================ */

/* Platform section ("ابدأ رحلتك على منصة وطن الأول") — make BLUE */
body section.ind-section[data-testid="section-platform"] {
  background: var(--wfi-primary);
  color: #fff;
  padding-block: 3.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  body section.ind-section[data-testid="section-platform"] { padding-block: 4rem; }
}
body section[data-testid="section-platform"] .ind-prose,
body section[data-testid="section-platform"] .ind-info-prose-wrapper {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}
body section[data-testid="section-platform"] .ind-heading,
body section[data-testid="section-platform"] [data-testid="text-platform-title"] {
  color: #fff !important;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem;
  text-align: center;
}
body section[data-testid="section-platform"] .ind-body,
body section[data-testid="section-platform"] [data-testid="text-platform-body"] {
  color: hsla(0, 0%, 100%, 0.8) !important;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 auto 1.75rem;
  text-align: center;
  max-width: 42rem;
}
/* Platform CTA — invert: white bg, primary text */
body section[data-testid="section-platform"] [data-testid="button-platform-cta"],
body section[data-testid="section-platform"] .mud-button-filled-primary {
  background: #fff !important;
  color: var(--wfi-primary) !important;
}
body section[data-testid="section-platform"] [data-testid="button-platform-cta"]:hover {
  background: hsl(0, 0%, 96%) !important;
  transform: translateY(-1px);
}
body section[data-testid="section-platform"] [data-testid="button-platform-cta"] .mud-button-label {
  color: var(--wfi-primary) !important;
}

/* Section eyebrows on /individuals — center, mono, uppercase, with rules */
body section.ind-section .ind-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--wfi-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  color: hsl(0, 0%, 40%) !important;
  text-align: center;
  margin: 0 auto 0.875rem;
  width: fit-content;
}
body section.ind-section .ind-eyebrow::before,
body section.ind-section .ind-eyebrow::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 1px;
  background-color: hsl(0, 0%, 88%);
  flex-shrink: 0;
}
/* Override eyebrow when on the BLUE platform section */
body section[data-testid="section-platform"] .ind-eyebrow {
  display: none;
}

body section.ind-section .ind-heading {
  text-align: center !important;
  font-family: var(--wfi-font-display, 'Inter', sans-serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 auto 1rem !important;
}
html[lang="ar"] body section.ind-section .ind-heading,
[dir="rtl"] body section.ind-section .ind-heading {
  font-family: var(--wfi-font-arabic);
}
body section.ind-section .ind-body {
  text-align: center !important;
  margin: 0 auto 2.5rem !important;
  max-width: 42rem !important;
}

/* Card grid */
body section.ind-section .ind-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-block-start: 2rem;
}
@media (min-width: 640px) {
  body section.ind-section .ind-cards-grid--3col,
  body section.ind-section .ind-cards-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  body section.ind-section .ind-cards-grid--3col,
  body section.ind-section .ind-cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Card hover: lift + primary tint border (works on MudCard wrappers via ::deep-equivalent) */
body section.ind-section .ind-card {
  border: 1px solid hsla(0, 0%, 0%, 0.08) !important;
  border-radius: 0.75rem !important;
  background: #fff !important;
  height: 100%;
  text-align: start;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  box-shadow: none !important;
}
body section.ind-section .ind-card:hover {
  box-shadow: 0 12px 28px -16px hsla(0, 0%, 0%, 0.18) !important;
  transform: translateY(-2px);
  border-color: hsla(234, 78%, 49%, 0.25) !important;
}
body section.ind-section .ind-card .wfi-icon-box,
body section.ind-section .ind-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: hsla(234, 78%, 49%, 0.1);
  color: var(--wfi-primary);
  box-shadow: 0 0 0 1px hsla(234, 78%, 49%, 0.15);
  margin-block-end: 1rem;
}
body section.ind-section .ind-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wfi-foreground, #161616);
  margin: 0 0 0.5rem;
  line-height: 1.4;
  text-align: start;
}
body section.ind-section .ind-card__body {
  font-size: 0.875rem;
  line-height: 1.65;
  color: hsl(0, 0%, 40%);
  margin: 0;
  text-align: start;
}

/* Jahiz banner (existing OLD structure) — make BLUE rounded */
body section.ind-jahiz {
  padding-block: 3rem;
}
@media (min-width: 768px) { body section.ind-jahiz { padding-block: 4rem; } }
body section.ind-jahiz .wfi-container {
  max-width: 72rem;
}
body section.ind-jahiz .ind-jahiz__layout {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: linear-gradient(135deg, var(--wfi-primary) 0%, var(--wfi-primary) 50%, hsl(234, 78%, 42%) 100%);
  box-shadow: 0 25px 50px -12px hsla(0, 0%, 0%, 0.25);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  color: #fff;
  padding: 0;
}
@media (min-width: 992px) {
  body section.ind-jahiz .ind-jahiz__layout {
    grid-template-columns: 1fr 1fr;
  }
}
body section.ind-jahiz .ind-jahiz__content {
  padding: 2rem;
  color: #fff;
}
@media (min-width: 640px) { body section.ind-jahiz .ind-jahiz__content { padding: 2.5rem; } }
@media (min-width: 992px) { body section.ind-jahiz .ind-jahiz__content { padding: 3.5rem; } }

body section.ind-jahiz .ind-jahiz__content .ind-heading {
  color: #fff !important;
  text-align: start !important;
  margin: 0.75rem 0 1rem !important;
}
body section.ind-jahiz .ind-jahiz__content .ind-body {
  color: hsla(0, 0%, 100%, 0.75) !important;
  text-align: start !important;
  margin: 0 0 1.75rem !important;
  max-width: none !important;
}
body section.ind-jahiz .ind-jahiz__chips {
  margin-block-end: 1.75rem;
}
body section.ind-jahiz .ind-jahiz__chips .mud-chip {
  background: hsla(0, 0%, 100%, 0.15) !important;
  color: #fff !important;
  border: 1px solid hsla(0, 0%, 100%, 0.2) !important;
}
body section.ind-jahiz .ind-jahiz__content .mud-button-root {
  background: #fff !important;
  color: var(--wfi-primary) !important;
}
body section.ind-jahiz .ind-jahiz__content .mud-button-label {
  color: var(--wfi-primary) !important;
}
body section.ind-jahiz .ind-jahiz__content .mud-chip-filled.mud-chip-color-primary {
  background: hsla(0, 0%, 100%, 0.2) !important;
  color: #fff !important;
  border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
}
body section.ind-jahiz .ind-jahiz__image {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
@media (min-width: 992px) { body section.ind-jahiz .ind-jahiz__image { display: flex; } }
body section.ind-jahiz .ind-jahiz__img {
  width: 100%;
  max-width: 22rem;
  object-fit: contain;
}

/* FAQ accordion on /individuals — clean horizontal rules + chevron */
body section.ind-section .ind-faq {
  max-width: 48rem;
  margin-inline: auto;
  margin-block-start: 2rem;
}
body section.ind-section .ind-faq .mud-expansion-panels {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
body section.ind-section .ind-faq-panel,
body section.ind-section .ind-faq .mud-expand-panel {
  border: 1px solid hsla(0, 0%, 0%, 0.1) !important;
  border-radius: 0.5rem !important;
  margin: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: background-color 0.2s ease;
}
body section.ind-section .ind-faq .mud-expand-panel.mud-expand-panel-expanded {
  background: hsla(0, 0%, 96%, 0.5) !important;
}
body section.ind-section .ind-faq .mud-expand-panel-header {
  padding: 1rem 1.25rem !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: var(--wfi-foreground, #161616);
}
body section.ind-section .ind-faq .mud-expand-panel-content {
  padding: 0 1.25rem 1.25rem !important;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: hsl(0, 0%, 40%);
}

/* Final CTA on /individuals — fix the buttons + body styling */
.cta-banner [data-testid="section-final-cta"],
[data-testid="section-final-cta"] .ind-final-cta {
  text-align: center;
}
[data-testid="section-final-cta"] .ind-final-cta__title {
  text-align: center;
  margin-inline: auto;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  margin-block-end: 0.875rem;
}
[data-testid="section-final-cta"] .ind-final-cta__body {
  text-align: center;
  margin: 0 auto 1.75rem;
  font-size: 1rem;
  line-height: 1.7;
  color: hsla(0, 0%, 100%, 0.85);
  max-width: 36rem;
}
[data-testid="section-final-cta"] .ind-final-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
/* Make primary CTA button white with primary text */
[data-testid="section-final-cta"] [data-testid="button-final-cta-primary"] {
  background: #fff !important;
  color: var(--wfi-primary) !important;
}
[data-testid="section-final-cta"] [data-testid="button-final-cta-primary"] .mud-button-label {
  color: var(--wfi-primary) !important;
}
[data-testid="section-final-cta"] [data-testid="button-final-cta-primary"]:hover {
  background: hsl(0, 0%, 96%) !important;
}
[data-testid="section-final-cta"] [data-testid="button-final-cta-secondary"] {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
}
[data-testid="section-final-cta"] [data-testid="button-final-cta-secondary"]:hover {
  background: hsla(0, 0%, 100%, 0.1) !important;
}
[data-testid="section-final-cta"] [data-testid="button-final-cta-secondary"] .mud-button-label {
  color: #fff !important;
}

/* ============================================================
   /individuals + /business — section-level alignments
   Targets cards, FAQ accordion, hover states, and the final CTA
   so the page matches the React reference's visual rhythm.
   ============================================================ */

/* /business — LEFT-aligned section heading (React keeps biz sections left-aligned, NOT centered) */
section.biz-section .biz-heading {
  font-family: var(--wfi-font-display, 'Inter', sans-serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-block-end: 1rem;
}
html[lang="ar"] section.biz-section .biz-heading,
[dir="rtl"] section.biz-section .biz-heading { font-family: var(--wfi-font-arabic); }

section.biz-section .biz-eyebrow {
  font-family: var(--wfi-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--wfi-primary) !important;
  font-weight: 600;
  margin-block-end: 0.5rem;
}

/* Card hover-elevate (cards in /individuals + /business + info pages) */
section.ind-section .ind-card,
section.biz-section .biz-card,
section.biz-section .biz-stat-card,
section.biz-section .biz-icon-card,
section.biz-section .mud-card,
section.ind-section .wfi-info-card,
section.biz-section .wfi-info-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  border-radius: 0.75rem !important;
  border: 1px solid hsla(0, 0%, 0%, 0.08) !important;
  background: #fff !important;
}
section.ind-section .ind-card:hover,
section.biz-section .biz-card:hover,
section.biz-section .biz-stat-card:hover,
section.biz-section .biz-icon-card:hover,
section.biz-section .mud-card:hover,
section.ind-section .wfi-info-card:hover,
section.biz-section .wfi-info-card:hover {
  box-shadow: 0 10px 28px -16px hsla(0, 0%, 0%, 0.18) !important;
  transform: translateY(-2px);
  border-color: hsla(234, 78%, 49%, 0.25) !important;
}

/* /business stat values — primary blue, larger */
section.biz-section .biz-stat-value {
  font-size: 1.5rem !important;
  font-weight: 700;
  color: var(--wfi-primary) !important;
  line-height: 1;
}
@media (min-width: 768px) {
  section.biz-section .biz-stat-value { font-size: 1.875rem !important; }
}
section.biz-section .biz-stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wfi-foreground);
  margin: 0.5rem 0 0;
}

/* /business: ensure cards have visible borders + hover lift even though MudCard adds wrappers */
body section.biz-section .mud-card,
body section.biz-section .biz-stat-card,
body section.biz-section .biz-icon-card,
body section.biz-section .biz-solution-card,
body section.biz-section .biz-details-card {
  background: #fff !important;
  border: 1px solid hsla(0, 0%, 0%, 0.1) !important;
  border-radius: 0.75rem !important;
  box-shadow: none !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
body section.biz-section .mud-card:hover,
body section.biz-section .biz-stat-card:hover,
body section.biz-section .biz-icon-card:hover,
body section.biz-section .biz-solution-card:hover,
body section.biz-section .biz-details-card:hover {
  box-shadow: 0 12px 28px -16px hsla(0, 0%, 0%, 0.18) !important;
  transform: translateY(-2px);
  border-color: hsla(234, 78%, 49%, 0.25) !important;
}

/* /business item-row icon-tile (Approach + Execution Fit) */
body section.biz-section .biz-item-row .wfi-icon-box {
  flex-shrink: 0;
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 0.5rem !important;
  background: hsla(234, 78%, 49%, 0.1) !important;
  color: var(--wfi-primary) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px hsla(234, 78%, 49%, 0.15) !important;
  margin-block-start: 0.125rem;
}
body section.biz-section .biz-item-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
body section.biz-section .biz-item-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wfi-foreground, #161616);
  margin: 0 0 0.25rem;
  line-height: 1.4;
}
body section.biz-section .biz-item-body {
  font-size: 0.875rem;
  line-height: 1.65;
  color: hsl(0, 0%, 40%);
  margin: 0;
}

/* /business item-row spacing + icon styling */
section.biz-section .biz-item-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
section.biz-section .biz-item-row .wfi-icon-box,
section.biz-section .biz-item-row .biz-item-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: hsla(234, 78%, 49%, 0.1);
  color: var(--wfi-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px hsla(234, 78%, 49%, 0.15);
  margin-block-start: 0.125rem;
}

/* /business solutions-library cards — image on top, content below */
section[data-testid="section-solutions-library"] .mud-card,
section.biz-section .biz-solution-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
section[data-testid="section-solutions-library"] .mud-card:hover,
section.biz-section .biz-solution-card:hover {
  border-color: hsla(234, 78%, 49%, 0.3) !important;
}

/* FAQ / module accordion — center, remove boxy borders, switch to clean
   horizontal rules. Targets /individuals (.ind-faq), /business (.biz-faq),
   and /programs/{Id} (.prd-detail) accordion components. */
section.ind-section .ind-faq,
section.biz-section .biz-faq {
  max-width: 48rem;
  margin-inline: auto;
}
section.ind-section .ind-faq .mud-expansion-panels,
section.biz-section .biz-faq .mud-expansion-panels,
main.prd-detail .mud-expansion-panels {
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none !important;
}
section.ind-section .ind-faq-panel,
section.biz-section .biz-faq-panel,
section.ind-section .ind-faq .mud-expand-panel,
section.biz-section .biz-faq .mud-expand-panel,
main.prd-detail .mud-expand-panel {
  border: 0 !important;
  border-block-end: 1px solid hsla(0, 0%, 0%, 0.1) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
section.ind-section .ind-faq .mud-expand-panel:first-child,
section.biz-section .biz-faq .mud-expand-panel:first-child,
main.prd-detail .mud-expand-panel:first-child {
  border-block-start: 1px solid hsla(0, 0%, 0%, 0.1) !important;
}
section.ind-section .ind-faq .mud-expand-panel-header,
section.biz-section .biz-faq .mud-expand-panel-header,
main.prd-detail .mud-expand-panel-header {
  padding-block: 1rem !important;
  font-weight: 500 !important;
  font-size: 0.9375rem !important;
}
section.ind-section .ind-faq .mud-expand-panel-content,
section.biz-section .biz-faq .mud-expand-panel-content,
main.prd-detail .mud-expand-panel-content {
  padding-block-end: 1.25rem !important;
  padding-inline: 1rem !important;
  color: hsl(0, 0%, 35%);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* ============================================================
   Bootstrap accordion (.accordion / .accordion-flush) — global
   React-parity overrides. Applies to every Bootstrap accordion
   in the project (ProgramDetail FAQ + Course Outline, the
   shared FaqAccordion component, JahizProgram FAQ, etc.) so
   the chevron, hover, focus, active state, and RTL placement
   stay consistent. Page-specific trim (button padding-x, body
   padding, font-size) lives in each page's scoped CSS.
   ============================================================ */
.accordion-flush {
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--wfi-foreground);
  --bs-accordion-btn-color: var(--wfi-foreground);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-border-color: var(--wfi-border);
}

.accordion-button {
  color: var(--wfi-foreground);
  background-color: transparent;
  box-shadow: none !important;
}
.accordion-button:hover {
  text-decoration: underline;
}
.accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

/* Chevron — 16x16, neutral foreground via mask (so it tracks
   the theme color), pinned to the inline-end edge in both
   LTR and RTL. Bootstrap's default uses physical
   `margin-left: auto` which lands on the wrong side in RTL. */
.accordion-button::after {
  width: 1rem;
  height: 1rem;
  margin-left: 0;
  margin-right: 0;
  margin-inline-start: auto;
  margin-inline-end: 0;
  background-image: none;
  background-color: var(--wfi-foreground);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  -webkit-mask-size: 1rem 1rem;
          mask-size: 1rem 1rem;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transition: transform 0.2s ease;
}
.accordion-button:not(.collapsed)::after {
  transform: rotate(-180deg);
}

/* Restore the bottom rule on the last item that .accordion-flush
   removes — pages that already render their own panel borders
   (FaqAccordion, JahizProgram) just see a same-color duplicate. */
.accordion-flush .accordion-item:last-child {
  border-bottom: 1px solid var(--wfi-border);
}

/* Program detail module number badge (appears in <TitleContent>) */
main.prd-detail .prd-module-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  background: hsla(234, 78%, 49%, 0.1);
  color: var(--wfi-primary);
  border-radius: 0.375rem;
  font-family: var(--wfi-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  margin-inline-end: 0.75rem;
}

/* /business Final CTA — solid primary so the radial glows + dot pattern read clearly,
   matching the React `bg-primary` source. */
section.biz-final-cta {
  position: relative;
  padding-block: 4rem;
  background: var(--wfi-primary);
  color: #fff;
  overflow: hidden;
}
@media (min-width: 768px) { section.biz-final-cta { padding-block: 5rem; } }
.biz-final-cta__dot-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: radial-gradient(circle, rgba(255,255,255,0.8) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.biz-final-cta__glow {
  position: absolute;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, 0.05);
  filter: blur(100px);
  pointer-events: none;
}
.biz-final-cta__glow--start { top: 2.5rem; inset-inline-start: 2.5rem; }
.biz-final-cta__glow--end { bottom: 2.5rem; inset-inline-end: 2.5rem; width: 14rem; height: 14rem; filter: blur(80px); }

section.biz-final-cta .biz-final-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}
section.biz-final-cta .biz-final-cta__title {
  font-family: var(--wfi-font-display, 'Inter', sans-serif);
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  margin: 0 auto 0.875rem;
}
html[lang="ar"] section.biz-final-cta .biz-final-cta__title,
[dir="rtl"] section.biz-final-cta .biz-final-cta__title { font-family: var(--wfi-font-arabic); }
section.biz-final-cta .biz-final-cta__body {
  font-size: 1rem;
  line-height: 1.7;
  color: hsla(0, 0%, 100%, 0.85);
  margin: 0 auto 1.75rem;
  max-width: 36rem;
}
section.biz-final-cta .biz-final-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
section.biz-final-cta .biz-final-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 1.75rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}
section.biz-final-cta .biz-final-cta__btn--primary {
  background: #fff;
  color: var(--wfi-primary);
  border: 0;
}
section.biz-final-cta .biz-final-cta__btn--primary:hover {
  transform: translateY(-1px);
  background: hsl(0, 0%, 96%);
}
section.biz-final-cta .biz-final-cta__btn--outline {
  background: hsla(0, 0%, 100%, 0.05);
  color: #fff;
  border: 1px solid hsla(0, 0%, 100%, 0.3);
  backdrop-filter: blur(4px);
}
section.biz-final-cta .biz-final-cta__btn--outline:hover {
  background: hsla(0, 0%, 100%, 0.1);
  transform: translateY(-1px);
}

/* Benefits row (3 small check items) under the buttons */
section.biz-final-cta .biz-final-cta__benefits {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}
section.biz-final-cta .biz-final-cta__benefit {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: hsla(0, 0%, 100%, 0.75);
}
section.biz-final-cta .biz-final-cta__benefit i {
  color: hsla(0, 0%, 100%, 0.6);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
section.biz-final-cta .biz-final-cta__privacy {
  margin: 1rem auto 0;
  max-width: 28rem;
  font-size: 0.75rem;
  line-height: 1.55;
  color: hsla(0, 0%, 100%, 0.4);
}

/* Legacy ind-final-cta wrappers (still kept for /individuals title sizing) */
.ind-final-cta__title {
  font-family: var(--wfi-font-display, 'Inter', sans-serif);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  margin: 0 auto 0.875rem;
}
html[lang="ar"] .ind-final-cta__title,
[dir="rtl"] .ind-final-cta__title { font-family: var(--wfi-font-arabic); }
.ind-final-cta__body {
  font-size: 1rem;
  line-height: 1.7;
  color: hsla(0, 0%, 100%, 0.85);
  margin: 0 auto 1.75rem;
  max-width: 36rem;
}
.ind-final-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ============================================================
   /programs catalog overrides
   These global rules apply on top of the scoped CSS bundle
   (Components/Pages/Programs/ProgramsCatalog.razor.css). They
   exist to align the page with the React reference even when
   the scoped bundle has not yet picked up new structural edits.
   Specificity is boosted via `main.prg-catalog ...` to beat
   the equivalent scoped rules without `!important` everywhere.
   ============================================================ */

/* Header — center the eyebrow/heading/body with eyebrow rules */
main.prg-catalog .prg-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--wfi-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  color: hsl(0, 0%, 40%);
  margin: 0 auto 1rem;
  width: fit-content;
}
main.prg-catalog .prg-eyebrow::before,
main.prg-catalog .prg-eyebrow::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 1px;
  background-color: hsl(0, 0%, 88%);
  flex-shrink: 0;
}
main.prg-catalog .prg-heading {
  text-align: center;
  font-family: var(--wfi-font-display, 'Inter', sans-serif);
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  line-height: 1.1;
  margin: 0 auto 1rem;
}
html[lang="ar"] main.prg-catalog .prg-heading,
[dir="rtl"] main.prg-catalog .prg-heading { font-family: var(--wfi-font-arabic); }
main.prg-catalog .prg-body {
  text-align: center;
  margin: 0 auto 3rem;
  max-width: 42rem;
  font-size: 1rem;
  color: hsl(0, 0%, 40%);
  line-height: 1.7;
}
@media (min-width: 768px) {
  main.prg-catalog .prg-body { font-size: 1.125rem; }
}

/* Filter bar — fix MudIcon SVG search icon position inside the input */
main.prg-catalog .prg-filter-bar__search { position: relative; }
main.prg-catalog svg.prg-filter-bar__search-icon,
main.prg-catalog .prg-filter-bar__search > svg.mud-icon-root {
  position: absolute;
  inset-inline-start: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: hsl(0, 0%, 50%);
  pointer-events: none;
  z-index: 1;
}

/* Filter bar — match height of search input + select to keep the row aligned. */
main.prg-catalog .prg-filter-bar__input { height: 2.5rem; }
main.prg-catalog .prg-filter-bar .mud-input-control.prg-filter-bar__select {
  width: 11.25rem;
}
main.prg-catalog .prg-filter-bar .prg-filter-bar__select .mud-input.mud-input-outlined {
  border-radius: 0.5rem;
}



.roudedBorder
{
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

	border: 1px solid #ededed  !important;
	border-radius: 0.75rem !important;
}