/* ============================================================================
   FUNDISWIFT — PREMIUM REDESIGN STYLESHEET (v2.0)
   Load AFTER bootstrap.css and theme's own compiled CSS, BEFORE inline <style> blocks.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. DESIGN TOKENS
---------------------------------------------------------------------------- */
:root {
  /* Palette */
  --fs-ink:      #0E1512;
  --fs-canvas:   #FFFFFF;
  --fs-fog:      #F3F8F5;
  --fs-moss:     #0B6E4F;
  --fs-fern:     #12915F;
  --fs-mint:     #3FCF9E;
  --fs-amber:    #E8A33D;

  /* Semantic — light mode (default) */
  --fs-bg:             var(--fs-canvas);
  --fs-bg-alt:         var(--fs-fog);
  --fs-surface:        #FFFFFF;
  --fs-surface-2:      #FBFDFC;
  --fs-text:           #101915;
  --fs-text-muted:     #5B6B64;
  --fs-border:         rgba(14, 21, 18, 0.09);
  --fs-border-strong:  rgba(14, 21, 18, 0.16);
  --fs-shadow:         0 10px 30px rgba(11, 110, 79, 0.10);
  --fs-shadow-lg:      0 20px 48px rgba(11, 110, 79, 0.16);

  /* Gradients */
  --fs-grad-brand:      linear-gradient(135deg, var(--fs-moss) 0%, var(--fs-fern) 55%, var(--fs-mint) 100%);
  --fs-grad-section:    linear-gradient(180deg, #FFFFFF 0%, var(--fs-fog) 100%);
  --fs-grad-section-rev:linear-gradient(0deg, #FFFFFF 0%, var(--fs-fog) 100%);
  --fs-grad-hero:       radial-gradient(120% 140% at 100% 0%, rgba(63,207,158,0.14) 0%, rgba(63,207,158,0) 55%), linear-gradient(180deg, #FFFFFF 0%, #F6FBF8 100%);
  --fs-grad-cta:        linear-gradient(135deg, #0B6E4F 0%, #0E8558 45%, #1FAE73 100%);

  /* Typography */
  --fs-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fs-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Motion */
  --fs-ease: cubic-bezier(.22,1,.36,1);
}

[data-bs-theme="dark"] {
  --fs-bg:             #0E1512;
  --fs-bg-alt:         #101C17;
  --fs-surface:        #15221C;
  --fs-surface-2:      #182620;
  --fs-text:           #ECF3EF;
  --fs-text-muted:     #93A69C;
  --fs-border:         rgba(255, 255, 255, 0.08);
  --fs-border-strong:  rgba(255, 255, 255, 0.14);
  --fs-shadow:         0 10px 30px rgba(0, 0, 0, 0.35);
  --fs-shadow-lg:      0 24px 56px rgba(0, 0, 0, 0.45);

  --fs-grad-section:     linear-gradient(180deg, #0E1512 0%, #111C17 100%);
  --fs-grad-section-rev: linear-gradient(0deg, #0E1512 0%, #111C17 100%);
  --fs-grad-hero:        radial-gradient(120% 140% at 100% 0%, rgba(63,207,158,0.16) 0%, rgba(63,207,158,0) 55%), linear-gradient(180deg, #0E1512 0%, #101C17 100%);
}

/* ---------------------------------------------------------------------------
   1. TYPOGRAPHY BASELINE
---------------------------------------------------------------------------- */
html { font-size: 16px; }

body,
body.body-bg {
  font-family: var(--fs-font-body);
  color: var(--fs-text);
  background-color: var(--fs-bg);
  transition: background-color .25s var(--fs-ease), color .25s var(--fs-ease);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.iq-title-box h3, .fs-hero-title, .fs-cta-title {
  font-family: var(--fs-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fs-text);
}

h4, h5, h6 { font-weight: 700; color: var(--fs-text); }

p, li, span, a, label, input, textarea, button { font-family: var(--fs-font-body); }

.text-muted { color: var(--fs-text-muted) !important; }
.fs-why-desc, .fs-step-desc, .fs-cta-desc, .iq-title-desc { color: var(--fs-text-muted); }

/* Responsive type scale */
:root { --fs-step-0: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.fs-h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); line-height: 1.15; }
.fs-h2 { font-size: clamp(1.75rem, 1.35rem + 2vw, 2.75rem); line-height: 1.2; }
.fs-h3 { font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem); line-height: 1.3; }
.fs-h4 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); }

/* ---------------------------------------------------------------------------
   2. SECTION RHYTHM & BACKGROUNDS
---------------------------------------------------------------------------- */
.fs-hero-section     { background: var(--fs-grad-hero); }

.section-padding     { background: var(--fs-bg); position: relative; }
.section-padding.bg-light,
.our-service         { background: var(--fs-grad-section) !important; }

.fs-why-choose       { background: var(--fs-bg); padding: 5rem 0; }
.fs-how-works        { background: var(--fs-bg); padding: 5rem 0; }

.fs-stats {
  background: var(--fs-grad-brand);
  padding: 3.5rem 0;
  position: relative; overflow: hidden;
}
.fs-stats::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 120% at 0% 0%, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;
}
.fs-stat-number, .fs-stats .fs-stat-label { color:#fff !important; position:relative; }
.fs-stat-number { font-family: var(--fs-font-display); font-size: 2.25rem; font-weight: 600; }
.fs-stat-label { opacity:.85; font-size:.9rem; }

.bg-primary-subtle { background: var(--fs-grad-section) !important; }

.fs-cta {
  background: var(--fs-grad-cta);
  padding: 5rem 0;
  position: relative; overflow: hidden;
}
.fs-cta::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(50% 90% at 100% 100%, rgba(255,255,255,.16), transparent 60%);
  pointer-events:none;
}
.fs-cta-title, .fs-cta-desc, .fs-cta span { color:#fff !important; position:relative; }
.fs-cta-btn {
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color: var(--fs-moss) !important;
  font-weight:700; padding:.85rem 1.75rem; border-radius:999px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  transition: transform .25s var(--fs-ease), box-shadow .25s var(--fs-ease);
}
.fs-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(0,0,0,.24); color: var(--fs-moss); }
.fs-cta .btn-outline-success {
  border-color: rgba(255,255,255,.55) !important; color:#fff !important;
}
.fs-cta .btn-outline-success:hover { background: rgba(255,255,255,.14) !important; }

/* ---------------------------------------------------------------------------
   3. SECTION HEADERS — CENTERED & CONSISTENT
---------------------------------------------------------------------------- */
.section-padding .iq-title-box,
.fs-why-choose .iq-title-box,
.fs-how-works .iq-title-box {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}
.section-padding .iq-title-box h3,
.section-padding .iq-title-box .line-count-1,
.section-padding .iq-title-box .highlighted-text,
.section-padding .iq-title-box .highlighted-text-swipe {
  text-align: center;
}
.section-padding > .container > div.d-flex.align-items-center.justify-content-between,
.section-padding > .container > div.d-flex.justify-content-between {
  justify-content: center !important;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.section-padding .iq-title-box.mb-0 { margin-bottom: 2rem !important; }
.highlighted-text { color: var(--fs-moss); }
.highlighted-image svg path { stroke: var(--fs-amber); }

/* ---------------------------------------------------------------------------
   4. SPACING RHYTHM (clamp-based, no huge gaps)
---------------------------------------------------------------------------- */
:root {
  --space-xs:  clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem);
  --space-sm:  clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-md:  clamp(1rem, 0.75rem + 1vw, 1.5rem);
  --space-lg:  clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --space-xl:  clamp(2rem, 1.25rem + 2.5vw, 4rem);
  --space-2xl: clamp(3rem, 2rem + 3vw, 6rem);
}

.section-padding { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.section-padding.pt-0 { padding-top: 0; }
.section-padding.pb-0 { padding-bottom: 0; }

/* Hero specific */
.fs-hero-section { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }

/* Card internal padding */
.fs-why-card, .fs-how-step, .service-box-card { padding: 1.75rem; }

/* ---------------------------------------------------------------------------
   5. BUTTON SYSTEM
---------------------------------------------------------------------------- */
.btn-primary,
.fs-btn-primary-green,
.fs-header-cta {
  background: var(--fs-grad-brand) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  transition: transform .2s var(--fs-ease), box-shadow .2s var(--fs-ease), filter .2s var(--fs-ease);
  box-shadow: 0 8px 20px rgba(11,110,79,.22);
}
.btn-primary:hover,
.fs-btn-primary-green:hover,
.fs-header-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(11,110,79,.30);
  filter: brightness(1.04);
  color: #fff !important;
}

.btn-outline-primary,
.fs-btn-outline-green {
  border: 1.5px solid var(--fs-moss) !important;
  color: var(--fs-moss) !important;
  background: transparent !important;
  font-weight: 600;
  transition: all .2s var(--fs-ease);
}
.btn-outline-primary:hover,
.fs-btn-outline-green:hover {
  background: var(--fs-moss) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.btn-link { color: var(--fs-moss) !important; }
.btn-link:hover { color: var(--fs-fern) !important; }

/* Focus visible */
.btn:focus-visible, a:focus-visible, .nav-link:focus-visible, input:focus-visible {
  outline: 2px solid var(--fs-mint);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   6. CARD HOVER SYSTEM
---------------------------------------------------------------------------- */
.category-list .category-card,
.fs-category-card,
.category-page .category-item,
.service-list-section .service-card,
.fs-why-card,
.fs-how-step,
.service-box-card {
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: 16px;
  transition: transform .3s var(--fs-ease), box-shadow .3s var(--fs-ease), border-color .3s var(--fs-ease);
}
.category-list .category-card:hover,
.fs-category-card:hover,
.category-card-inner:hover,
.category-page .category-item:hover,
.service-list-section .service-card:hover,
.list-item:hover,
[role="listitem"]:hover,
.category-tab-list li:hover,
.fs-why-card:hover,
.fs-how-step:hover,
.service-box-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fs-shadow-lg);
  border-color: rgba(63, 207, 158, 0.35);
}

.fs-why-card, .fs-how-step { padding: 1.75rem; text-align: left; }
.fs-why-icon {
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(11,110,79,.12), rgba(63,207,158,.16));
  margin-bottom: 1rem; font-size: 1.15rem;
}
.fs-step-number {
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:999px; background: var(--fs-grad-brand); color:#fff;
  font-weight:700; margin-bottom:1rem;
}
.fs-why-grid, .fs-stats-grid { gap: 1.5rem; }

/* ---------------------------------------------------------------------------
   7. NAVIGATION — LIGHT/DARK UNIFIED
---------------------------------------------------------------------------- */
.iq-navbar,
.landing-header,
.navbar-inner {
  background: var(--fs-bg) !important;
  border-bottom: 1px solid var(--fs-border);
  transition: background-color .25s var(--fs-ease), border-color .25s var(--fs-ease);
}
.iq-navbar .nav-link,
.iq-navbar .navbar-nav .nav-link {
  color: var(--fs-text) !important;
}
.iq-navbar .nav-link:hover { color: var(--fs-moss) !important; }
.top-header.bg-primary { background: var(--fs-grad-brand) !important; }

/* Theme toggle icon swap */
.change-mode .dark-mode { display:none; }
.change-mode .light-mode { display:inline-block; color: var(--fs-text); }
[data-bs-theme="dark"] .change-mode .light-mode { display:none; }
[data-bs-theme="dark"] .change-mode .dark-mode { display:inline-block; color: var(--fs-amber); }

/* ---------------------------------------------------------------------------
   8. MOBILE MENU: cards in distinct sections, not one flat list
---------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .navbar-collapse {
    background: var(--fs-bg);
    padding: 4.5rem 1.25rem 2rem;
  }
  #navbarSupportedContent .navbar-nav,
  #navbar_main .navbar-nav,
  #navbar_main_mobile .navbar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  /* Each nav item tagged .mobile-nav-card becomes its own card */
  #navbarSupportedContent .navbar-nav > li.mobile-nav-card,
  #navbar_main .navbar-nav > li.mobile-nav-card,
  #navbar_main_mobile .navbar-nav > li.mobile-nav-card {
    width: 100%;
    background: var(--fs-surface);
    border: 1px solid var(--fs-border);
    border-radius: 14px;
    padding: 0.65rem 0.9rem;
    box-shadow: var(--fs-shadow);
    margin-left: 0 !important;
  }
  #navbarSupportedContent .navbar-nav > li.mobile-nav-card .nav-link,
  #navbar_main .navbar-nav > li.mobile-nav-card .nav-link,
  #navbar_main_mobile .navbar-nav > li.mobile-nav-card .nav-link,
  #navbarSupportedContent .navbar-nav > li.mobile-nav-card > a,
  #navbar_main .navbar-nav > li.mobile-nav-card > a,
  #navbar_main_mobile .navbar-nav > li.mobile-nav-card > a {
    padding: 0.25rem 0;
  }
  /* Primary CTA card stands out */
  #navbarSupportedContent .navbar-nav > li.mobile-nav-card.fs-header-cta-item,
  #navbar_main .navbar-nav > li.mobile-nav-card.fs-header-cta-item,
  #navbar_main_mobile .navbar-nav > li.mobile-nav-card.fs-header-cta-item {
    background: var(--fs-grad-brand);
    border: none;
  }
  #navbarSupportedContent .navbar-nav > li.mobile-nav-card.fs-header-cta-item .fs-header-cta,
  #navbar_main .navbar-nav > li.mobile-nav-card.fs-header-cta-item .fs-header-cta,
  #navbar_main_mobile .navbar-nav > li.mobile-nav-card.fs-header-cta-item .fs-header-cta {
    box-shadow: none;
    width: 100%;
    justify-content: center;
    background: transparent !important;
  }
  #navbarSupportedContent .navbar-nav > li.mobile-nav-card .btn,
  #navbar_main .navbar-nav > li.mobile-nav-card .btn,
  #navbar_main_mobile .navbar-nav > li.mobile-nav-card .btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   9. HERO — MOBILE ACCORDION CARD + LIVE-STATS WIDGET
---------------------------------------------------------------------------- */
.hero-card-wrapper {
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
}
.fs-hero-grid { display:grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items:center; }
.fs-hero-widget {
  background: var(--fs-surface-2);
  border: 1px solid var(--fs-border);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: var(--fs-shadow);
  position: relative;
}
.fs-hero-widget::before {
  content:""; position:absolute; top:0; left:1.25rem; right:1.25rem; height:3px; border-radius:0 0 3px 3px;
  background: var(--fs-grad-brand);
}
.fs-hero-widget-score { font-family: var(--fs-font-display); color: var(--fs-moss); }
.fs-hero-widget-bar {
  height:6px; border-radius:999px; background: var(--fs-border); overflow:hidden; margin: .5rem 0 1rem;
}
.fs-hero-widget-bar span { display:block; height:100%; background: var(--fs-grad-brand); }
.fs-live-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%; background:#ff4d4f;
  margin-right:6px; animation: fs-pulse 1.6s infinite;
}
@keyframes fs-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,77,79,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255,77,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,79,0); }
}

@media (max-width: 767px) {
  .fs-hero-section { padding-top: 110px !important; text-align: center; }
  .fs-hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .fs-hero-left { text-align: center; }
  .fs-hero-left p { margin-left: auto; margin-right: auto; }
  .fs-hero-title { font-size: 2rem !important; }
  .fs-hero-buttons { justify-content: center; }
  /* Widget becomes its own clearly separated card, full width, no overflow */
  .fs-hero-widget {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 1.25rem;
  }
  .fs-hero-widget-score { font-size: 2.5rem !important; }
  .fs-hero-widget-stats {
    display:flex; flex-wrap: wrap; gap: .75rem 1rem; justify-content: center;
    list-style:none; padding:0; margin: 1rem 0 0;
  }
  .fs-hero-widget-ticker {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .8rem; margin-top: 1rem; color: var(--fs-text-muted);
  }
  .fs-hero-buttons .fs-btn-primary-green,
  .fs-hero-buttons .fs-btn-outline-green { min-width: 160px; text-align: center; }
  /* The CTA row directly under the hero also reads as its own card on mobile */
  .fs-hero-cta {
    background: var(--fs-surface);
    border-top: 1px solid var(--fs-border);
    border-bottom: 1px solid var(--fs-border);
  }
}

/* ---------------------------------------------------------------------------
   10. FOOTER
---------------------------------------------------------------------------- */
footer.footer {
  background: linear-gradient(180deg, #0E1512 0%, #101C17 100%) !important;
  position: relative;
}
footer.footer::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--fs-grad-brand);
}
.footer-inner-box h5 { color:#fff; margin-bottom: .75rem; font-weight:700; }
.footer-inner-box .readmore-text,
.footer-inner-box .readmore-btn { color: rgba(255,255,255,.72); }
.footer-inner-box .content a { color: rgba(255,255,255,.85); }
.footer .icon.text-primary { color: var(--fs-mint) !important; }
.custom-border-left { border-left: 1px solid rgba(255,255,255,.12); }

.iq-social-list-text a,
.iq-footer-catogery-list a,
.popular-service-list a {
  color: rgba(255,255,255,.75);
  transition: color .2s var(--fs-ease);
}
.iq-social-list-text a:hover,
.iq-footer-catogery-list a:hover,
.popular-service-list a:hover { color: var(--fs-mint); }
.popular-service-list .popular-service-text { color: rgba(255,255,255,.85); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.65);
}
.footer-bottom a.link-primary { color: rgba(255,255,255,.75) !important; }
.footer-bottom a.link-primary:hover { color: var(--fs-mint) !important; }

/* ============================================================================
   13. HERO WIDGET — POPULAR PROVIDERS CAROUSEL
---------------------------------------------------------------------------- */
.hero-card-wrapper.fs-hero-widget {
  border-radius: 20px;
  overflow: hidden;
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  box-shadow: var(--fs-shadow-lg);
}

.fs-hero-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0 0.25rem;
}

.fs-hero-widget-title {
  font-family: var(--fs-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fs-text);
  margin: 0;
}

.fs-hero-widget-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: rgba(11, 110, 79, 0.1);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fs-moss);
}

.fs-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4d4f;
  animation: fs-pulse 1.6s infinite;
}

.fs-hero-widget-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-top: 1px solid var(--fs-border);
  border-bottom: 1px solid var(--fs-border);
  margin-bottom: 1rem;
}

.fs-hero-widget-score {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.fs-score-number {
  font-family: var(--fs-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--fs-moss);
  line-height: 1;
}

.fs-score-label {
  font-size: 0.75rem;
  color: var(--fs-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fs-hero-widget-divider {
  width: 1px;
  height: 2.5rem;
  background: var(--fs-border);
}

.fs-hero-widget-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fs-hero-widget-rating .star-rating {
  display: flex;
  gap: 0.125rem;
}

.fs-hero-widget-rating .star-rating i {
  font-size: 0.875rem;
}

.fs-rating-value {
  font-family: var(--fs-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fs-text);
}

/* Provider Card in Hero Widget */
.fs-provider-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--fs-surface-2);
  border: 1px solid var(--fs-border);
  border-radius: 16px;
  transition: all 0.3s var(--fs-ease);
  height: 100%;
}

.fs-provider-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fs-shadow-lg);
  border-color: rgba(63, 207, 158, 0.35);
}

.provider-avatar {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}

.provider-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid var(--fs-border);
}

.provider-online-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: #237B0A;
  border: 3px solid var(--fs-surface);
  border-radius: 50%;
}

.provider-info {
  flex: 1;
  min-width: 0;
}

.provider-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--fs-text);
  margin: 0 0 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--fs-text-muted);
}

.provider-category {
  background: rgba(11, 110, 79, 0.1);
  color: var(--fs-moss);
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-weight: 500;
}

.provider-location {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.provider-rating {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.provider-rating .star-rating {
  display: flex;
  gap: 0.0625rem;
}

.provider-rating .star-rating i {
  font-size: 0.75rem;
}

.provider-rating .rating-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fs-text);
  white-space: nowrap;
}

.provider-view-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fs-grad-brand);
  color: #fff;
  border-radius: 10px;
  transition: all 0.2s var(--fs-ease);
  text-decoration: none;
}

.provider-view-btn:hover {
  transform: translateX(3px);
  box-shadow: 0 6px 16px rgba(11, 110, 79, 0.3);
  color: #fff;
}

.fs-hero-widget-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fs-border);
  text-align: center;
}

.fs-view-all-providers {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--fs-moss);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  transition: all 0.2s var(--fs-ease);
}

.fs-view-all-providers:hover {
  background: rgba(11, 110, 79, 0.1);
  color: var(--fs-fern);
  transform: translateX(4px);
}

/* Swiper adjustments for hero widget */
.fs-hero-widget [data-widget-swiper] {
  padding-bottom: 1.5rem !important;
}

.fs-hero-widget .swiper-slide {
  height: auto !important;
}

.fs-hero-widget .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--fs-border);
  opacity: 1;
  transition: all 0.3s var(--fs-ease);
}

.fs-hero-widget .swiper-pagination-bullet-active {
  background: var(--fs-grad-brand);
  width: 24px;
  border-radius: 999px;
}

/* Mobile adjustments for hero widget */
@media (max-width: 767px) {
  .fs-hero-widget-header {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  
  .fs-hero-widget-stats-bar {
    flex-direction: column;
    gap: 1rem;
  }
  
  .fs-hero-widget-divider {
    width: 100%;
    height: 1px;
  }
  
  .fs-provider-card {
    flex-direction: column;
    text-align: center;
    padding: 1.25rem;
  }
  
  .provider-meta {
    justify-content: center;
  }
  
  .provider-rating {
    order: -1;
    margin-bottom: 0.5rem;
  }
  
  .provider-view-btn {
    margin-top: 0.5rem;
  }
}

@media (max-width: 479.479px) {
  .provider-avatar {
    width: 48px;
    height: 48px;
  }
  
  .fs-score-number {
    font-size: 1.5rem;
  }
}