/* ===================================================================
   Nawafeth — home-polish.css
   Additive finishing touches for the mobile web home page.
   Scoped under `body.home-mobile-layout` so global styles are not
   affected. This file adds micro-interactions, refined focus rings,
   smoother scrollbars, gentle entrance animations, reduced-motion
   safeguards, and conservative visual spacing refinements.
   =================================================================== */

/* ── Section entrance: gentle fade + rise ──────────────────────────── */
@keyframes nw-home-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  body.home-mobile-layout .home-sections-stack > .home-section {
    animation: nw-home-rise 520ms cubic-bezier(.22,.61,.36,1) both;
    animation-delay: 60ms;
  }
  body.home-mobile-layout .home-sections-stack > .home-section:nth-of-type(2) { animation-delay: 120ms; }
  body.home-mobile-layout .home-sections-stack > .home-section:nth-of-type(3) { animation-delay: 180ms; }
  body.home-mobile-layout .home-sections-stack > .home-section:nth-of-type(4) { animation-delay: 240ms; }
  body.home-mobile-layout .home-sections-stack > .home-section:nth-of-type(5) { animation-delay: 300ms; }
  body.home-mobile-layout .home-sections-stack > .home-section:nth-of-type(n+6) { animation-delay: 340ms; }
}

/* ── Refined focus-visible rings for keyboard users ────────────────── */
body.home-mobile-layout .view-all-btn:focus-visible,
body.home-mobile-layout .categories-arrow:focus-visible,
body.home-mobile-layout .carousel-arrow:focus-visible,
body.home-mobile-layout .cat-item:focus-visible,
body.home-mobile-layout .featured-specialist-card:focus-visible,
body.home-mobile-layout .reel-item:focus-visible {
  outline: 2px solid rgba(124, 77, 211, .85);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(124, 77, 211, .18);
}

/* ── Slim, branded horizontal scrollbars (desktop / trackpad) ──────── */
body.home-mobile-layout .categories-scroll,
body.home-mobile-layout .reels-track,
body.home-mobile-layout .providers-scroll,
body.home-mobile-layout .showcase-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 77, 211, .28) transparent;
}
body.home-mobile-layout .categories-scroll::-webkit-scrollbar,
body.home-mobile-layout .reels-track::-webkit-scrollbar,
body.home-mobile-layout .providers-scroll::-webkit-scrollbar,
body.home-mobile-layout .showcase-scroll::-webkit-scrollbar {
  height: 6px;
}
body.home-mobile-layout .categories-scroll::-webkit-scrollbar-thumb,
body.home-mobile-layout .reels-track::-webkit-scrollbar-thumb,
body.home-mobile-layout .providers-scroll::-webkit-scrollbar-thumb,
body.home-mobile-layout .showcase-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(124, 77, 211, .32), rgba(180, 140, 240, .32));
  border-radius: 999px;
}
body.home-mobile-layout .categories-scroll::-webkit-scrollbar-track,
body.home-mobile-layout .reels-track::-webkit-scrollbar-track,
body.home-mobile-layout .providers-scroll::-webkit-scrollbar-track,
body.home-mobile-layout .showcase-scroll::-webkit-scrollbar-track {
  background: transparent;
}
/* Hide scrollbar on touch where it is visually noisy */
@media (hover: none) and (pointer: coarse) {
  body.home-mobile-layout .categories-scroll,
  body.home-mobile-layout .reels-track,
  body.home-mobile-layout .providers-scroll,
  body.home-mobile-layout .showcase-scroll {
    scrollbar-width: none;
  }
  body.home-mobile-layout .categories-scroll::-webkit-scrollbar,
  body.home-mobile-layout .reels-track::-webkit-scrollbar,
  body.home-mobile-layout .providers-scroll::-webkit-scrollbar,
  body.home-mobile-layout .showcase-scroll::-webkit-scrollbar {
    display: none;
  }
}

/* ── Carousel arrows: smoother hover with subtle elevation ─────────── */
body.home-mobile-layout .carousel-arrow {
  transition: transform 180ms cubic-bezier(.22,.61,.36,1),
              background-color 180ms ease,
              box-shadow 180ms ease,
              opacity 180ms ease;
  will-change: transform;
}
@media (hover: hover) {
  body.home-mobile-layout .carousel-arrow:hover {
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  }
}
body.home-mobile-layout .carousel-arrow:active {
  transform: translateY(-50%) scale(0.94);
}

/* ── Categories arrows: tactile feedback only (no layout change) ───── */
body.home-mobile-layout .categories-arrow {
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
@media (hover: hover) {
  body.home-mobile-layout .categories-arrow:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 14px rgba(124, 77, 211, .18);
  }
}
body.home-mobile-layout .categories-arrow:active { transform: scale(.92); }

/* ── Card micro-lift on hover (desktop / fine pointers only) ───────── */
@media (hover: hover) and (pointer: fine) {
  body.home-mobile-layout .cat-item,
  body.home-mobile-layout .featured-specialist-card,
  body.home-mobile-layout .reel-item {
    transition: transform 220ms cubic-bezier(.22,.61,.36,1),
                box-shadow 220ms ease,
                filter 220ms ease;
  }
  body.home-mobile-layout .cat-item:hover,
  body.home-mobile-layout .featured-specialist-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(52, 28, 92, .12);
  }
  body.home-mobile-layout .reel-item:hover {
    transform: translateY(-1px);
    filter: saturate(1.08);
  }
}

/* ── View-all chevron flourish (additive ::after, no markup change) ── */
body.home-mobile-layout .view-all-btn::after {
  content: "‹";
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  margin-inline-start: 2px;
  transform: translateY(-1px);
  transition: transform 180ms ease;
  opacity: .85;
}
body.home-mobile-layout [dir="ltr"] .view-all-btn::after,
html[dir="ltr"] body.home-mobile-layout .view-all-btn::after { content: "›"; }
@media (hover: hover) {
  body.home-mobile-layout .view-all-btn:hover::after {
    transform: translateY(-1px) translateX(-2px);
  }
  html[dir="ltr"] body.home-mobile-layout .view-all-btn:hover::after {
    transform: translateY(-1px) translateX(2px);
  }
}

/* ── Section header: refined kicker shine on hover (desktop) ───────── */
@media (hover: hover) and (pointer: fine) {
  body.home-mobile-layout .home-section-shell {
    transition: transform 320ms cubic-bezier(.22,.61,.36,1);
  }
}

/* ── Smoother shimmer for skeletons (overrides only timing) ────────── */
@media (prefers-reduced-motion: no-preference) {
  body.home-mobile-layout .shimmer {
    animation-duration: 1500ms;
    animation-timing-function: ease-in-out;
  }
}

/* ── Hero skeleton crossfade when banners reveal ───────────────────── */
body.home-mobile-layout .hero-skeleton {
  transition: opacity 360ms ease;
}
body.home-mobile-layout #banners {
  transition: opacity 360ms ease;
}

/* ── Tablet polish (768–1024): a touch more breathing room ─────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  body.home-mobile-layout .home-sections-stack {
    gap: clamp(20px, 2.4vw, 28px);
  }
}

/* ── Reduced motion: kill all entrance & micro animations ──────────── */
@media (prefers-reduced-motion: reduce) {
  body.home-mobile-layout .home-sections-stack > .home-section {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body.home-mobile-layout .carousel-arrow,
  body.home-mobile-layout .categories-arrow,
  body.home-mobile-layout .cat-item,
  body.home-mobile-layout .featured-specialist-card,
  body.home-mobile-layout .reel-item,
  body.home-mobile-layout .view-all-btn::after {
    transition: none !important;
  }
}

/* ── Dark mode tuning for new focus / scrollbars ───────────────────── */
[data-theme="dark"] body.home-mobile-layout .categories-scroll,
[data-theme="dark"] body.home-mobile-layout .reels-track,
[data-theme="dark"] body.home-mobile-layout .providers-scroll,
[data-theme="dark"] body.home-mobile-layout .showcase-scroll {
  scrollbar-color: rgba(192, 132, 252, .35) transparent;
}
[data-theme="dark"] body.home-mobile-layout .categories-scroll::-webkit-scrollbar-thumb,
[data-theme="dark"] body.home-mobile-layout .reels-track::-webkit-scrollbar-thumb,
[data-theme="dark"] body.home-mobile-layout .providers-scroll::-webkit-scrollbar-thumb,
[data-theme="dark"] body.home-mobile-layout .showcase-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(192, 132, 252, .42), rgba(129, 140, 248, .42));
}
[data-theme="dark"] body.home-mobile-layout .view-all-btn:focus-visible,
[data-theme="dark"] body.home-mobile-layout .cat-item:focus-visible,
[data-theme="dark"] body.home-mobile-layout .featured-specialist-card:focus-visible {
  outline-color: rgba(192, 132, 252, .9);
  box-shadow: 0 0 0 4px rgba(192, 132, 252, .22);
}

/* =====================================================================
   DESKTOP CENTERING — keep the locked mobile composition but stop the
   sections from sticking to the inline-start edge on wide RTL screens.
   The hero stays edge-to-edge; everything else gets a centered max-width
   so the page no longer looks like a phone glued to one column.
   ===================================================================== */
@media (min-width: 1024px) {
  body.home-mobile-layout.home-mobile-layout--locked #main-content {
    background:
      radial-gradient(1200px 480px at 100% 0%, rgba(124, 77, 211, 0.07), transparent 60%),
      radial-gradient(1000px 420px at 0% 18%, rgba(33, 150, 243, 0.05), transparent 62%),
      var(--color-bg, #faf8ff);
  }

  body.home-mobile-layout.home-mobile-layout--locked .home-sections-stack {
    width: min(1080px, calc(100% - 48px));
    margin-inline: auto;
    gap: clamp(24px, 2.4vw, 32px);
  }

  body.home-mobile-layout.home-mobile-layout--locked .home-section .container {
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0;
  }

  body.home-mobile-layout.home-mobile-layout--locked .home-section-shell {
    padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px);
    border-radius: 28px;
  }

  /* Hero stays full-bleed but the inner banner stays nicely centered */
  body.home-mobile-layout.home-mobile-layout--locked #hero {
    padding-inline: clamp(20px, 3vw, 36px);
  }

  /* Provide a little breathing under the floating desktop dock */
  body.home-mobile-layout.home-mobile-layout--locked #main-content {
    padding-bottom: calc(var(--bottom-nav-height, 74px) + env(safe-area-inset-bottom, 0px) + 48px);
  }
}

@media (min-width: 1280px) {
  body.home-mobile-layout.home-mobile-layout--locked .home-sections-stack {
    width: min(1180px, calc(100% - 64px));
  }
}

/* Tablet: keep the column tighter and centered too */
@media (min-width: 768px) and (max-width: 1023px) {
  body.home-mobile-layout.home-mobile-layout--locked .home-sections-stack {
    width: min(680px, calc(100% - 32px));
    margin-inline: auto;
  }
}

/* =====================================================================
   Premium UX pass - visual refinement only.
   Keeps the same section order and data sources, but makes the home page
   calmer, clearer, and more polished across mobile and desktop.
   ===================================================================== */

body.home-mobile-layout {
  background:
    radial-gradient(980px 420px at 85% 4%, rgba(20, 149, 138, .08), transparent 62%),
    radial-gradient(920px 360px at 6% 18%, rgba(245, 158, 11, .055), transparent 58%),
    linear-gradient(180deg, #fbfcff 0%, #f6f7fb 42%, #fbfcff 100%);
}

body.home-mobile-layout #main-content {
  position: relative;
  z-index: 4;
}

body.home-mobile-layout .home-urgent-fab {
  position: fixed;
  inset-inline-end: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--bottom-nav-height, 74px) + env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 950;
  width: 156px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px 10px 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .24), transparent 34%),
    linear-gradient(135deg, #e11d48 0%, #f97316 100%);
  color: #ffffff;
  text-decoration: none;
  box-shadow:
    0 18px 38px rgba(225, 29, 72, .28),
    0 8px 18px rgba(15, 23, 42, .14);
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: bottom right;
  transition:
    width 240ms cubic-bezier(.22,.61,.36,1),
    padding 240ms cubic-bezier(.22,.61,.36,1),
    transform 240ms cubic-bezier(.22,.61,.36,1),
    box-shadow 240ms ease,
    filter 180ms ease;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

body.home-mobile-layout .home-urgent-fab::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(249, 115, 22, .26), transparent 62%);
  opacity: .82;
  transform: scale(.94);
  pointer-events: none;
  z-index: -1;
}

body.home-mobile-layout .home-urgent-fab-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

body.home-mobile-layout .home-urgent-fab-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

body.home-mobile-layout .home-urgent-fab-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  white-space: nowrap;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 180ms ease, transform 220ms ease;
}

body.home-mobile-layout .home-urgent-fab-copy strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
}

body.home-mobile-layout .home-urgent-fab-copy small {
  color: rgba(255, 255, 255, .82);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
}

body.home-mobile-layout .home-urgent-fab:hover {
  filter: brightness(1.04);
  transform: translate3d(0, -2px, 0) scale(1.02);
  box-shadow:
    0 22px 46px rgba(225, 29, 72, .34),
    0 10px 24px rgba(15, 23, 42, .18);
}

body.home-mobile-layout .home-urgent-fab:active {
  transform: translate3d(0, 0, 0) scale(.96);
}

body.home-mobile-layout .home-urgent-fab:focus-visible {
  outline: 2px solid rgba(249, 115, 22, .92);
  outline-offset: 4px;
  box-shadow:
    0 0 0 5px rgba(249, 115, 22, .18),
    0 18px 38px rgba(225, 29, 72, .28);
}

body.home-mobile-layout .home-urgent-fab.is-compact {
  width: 62px;
  padding-inline: 10px;
  transform: translate3d(0, -10px, 0) scale(.96);
  box-shadow:
    0 14px 30px rgba(225, 29, 72, .24),
    0 8px 16px rgba(15, 23, 42, .12);
}

body.home-mobile-layout .home-urgent-fab.is-compact .home-urgent-fab-copy {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}

html[dir="ltr"] body.home-mobile-layout .home-urgent-fab {
  transform-origin: bottom left;
}

html[dir="ltr"] body.home-mobile-layout .home-urgent-fab.is-compact .home-urgent-fab-copy {
  transform: translateX(8px);
}

@media (prefers-reduced-motion: no-preference) {
  body.home-mobile-layout .home-urgent-fab {
    animation: nw-home-urgent-enter 520ms cubic-bezier(.22,.61,.36,1) both;
  }
}

@keyframes nw-home-urgent-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(.92);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (min-width: 900px) {
  body.home-mobile-layout .home-urgent-fab {
    inset-inline-end: max(28px, calc((100vw - 1160px) / 2 + 18px));
    bottom: calc(var(--bottom-nav-height, 74px) + 26px);
  }
}

@media (max-width: 640px) {
  body.home-mobile-layout .home-urgent-fab {
    inset-inline-end: 12px;
    bottom: calc(var(--bottom-nav-height, 74px) + env(safe-area-inset-bottom, 0px) + 12px);
    width: 60px;
    min-height: 56px;
    padding-inline: 10px;
  }

  body.home-mobile-layout .home-urgent-fab .home-urgent-fab-copy {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
  }

  body.home-mobile-layout .home-urgent-fab.is-compact {
    width: 60px;
  }
}

body.home-mobile-layout .home-sections-stack {
  padding-top: clamp(10px, 2.8vw, 26px);
  gap: clamp(18px, 3.2vw, 34px);
}

@media (min-width: 900px) {
  body.home-mobile-layout .home-sections-stack {
    width: min(1160px, calc(100% - 48px));
    margin-inline: auto;
  }

  body.home-mobile-layout .home-section .container {
    max-width: 100%;
    padding-inline: 0;
  }
}

body.home-mobile-layout .home-section-shell {
  border-radius: 22px;
  border-color: rgba(66, 82, 110, .1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(250, 252, 255, .94));
  box-shadow:
    0 18px 42px rgba(31, 41, 55, .08),
    0 1px 0 rgba(255, 255, 255, .8) inset;
}

body.home-mobile-layout .home-section-shell::before {
  opacity: .72;
}

body.home-mobile-layout .home-section-shell::after {
  border-radius: 20px;
  border-color: rgba(255, 255, 255, .62);
}

body.home-mobile-layout .home-section-header {
  align-items: center;
  margin-bottom: 16px;
}

body.home-mobile-layout .home-section-kicker {
  min-height: 28px;
  padding-inline: 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .045);
}

body.home-mobile-layout .home-section-title-static {
  font-size: clamp(18px, 2.2vw, 23px);
  letter-spacing: 0;
}

body.home-mobile-layout .home-section-note {
  color: #667085;
}

body.home-mobile-layout .home-hero-section {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .04), rgba(255, 255, 255, 0));
  isolation: isolate;
}

body.home-mobile-layout .hero-banner-shell .carousel-wrapper {
  border-radius: clamp(18px, 2.4vw, 28px);
  box-shadow:
    0 26px 68px rgba(15, 23, 42, .18),
    0 0 0 1px rgba(255, 255, 255, .52) inset;
}

body.home-mobile-layout .carousel-media {
  border-radius: clamp(14px, 1.8vw, 20px);
  box-shadow:
    0 18px 38px rgba(2, 6, 23, .24),
    0 0 0 1px rgba(255, 255, 255, .12) inset;
}

body.home-mobile-layout .carousel-media-frame.is-media-failed .carousel-media-stage {
  display: none;
}

body.home-mobile-layout .carousel-media-frame.is-media-failed .carousel-media-backdrop {
  opacity: 1;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(22, 39, 64, .9) 48%, rgba(20, 83, 78, .86));
}

body.home-mobile-layout .carousel-media-frame.is-media-failed .carousel-media-backdrop img,
body.home-mobile-layout .carousel-media-frame.is-media-failed .carousel-media-backdrop video {
  display: none;
}

body.home-mobile-layout .carousel-dots {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .34);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.home-mobile-layout .carousel-dot {
  background: rgba(255, 255, 255, .52);
}

body.home-mobile-layout .carousel-dot.active {
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .18);
}

body.home-mobile-layout .carousel-arrow {
  background: rgba(15, 23, 42, .42);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.home-mobile-layout .home-hero-fade {
  height: 72px;
  background: linear-gradient(180deg, rgba(251, 252, 255, 0) 0%, rgba(251, 252, 255, .86) 74%, #fbfcff 100%);
}

body.home-mobile-layout .reels-track {
  gap: clamp(12px, 2vw, 18px);
  padding-block: 2px 6px;
}

body.home-mobile-layout .reel-ring {
  box-shadow:
    0 12px 24px rgba(88, 28, 135, .12),
    0 0 0 1px rgba(255, 255, 255, .78) inset;
}

body.home-mobile-layout .reel-item.is-active .reel-ring {
  box-shadow:
    0 14px 30px rgba(88, 28, 135, .18),
    0 0 0 4px rgba(20, 149, 138, .1);
}

body.home-mobile-layout .categories-carousel.has-marquee .cat-item,
body.home-mobile-layout .categories-scroll .cat-item {
  --cat-accent: #14958a;
  --cat-accent-2: #673ab7;
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96));
  border-color: rgba(15, 23, 42, .08);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, .06),
    0 1px 0 rgba(255, 255, 255, .9) inset;
  overflow: hidden;
}

body.home-mobile-layout .categories-carousel.has-marquee .cat-item:nth-child(4n+2),
body.home-mobile-layout .categories-scroll .cat-item:nth-child(4n+2) {
  --cat-accent: #2563eb;
  --cat-accent-2: #14958a;
}

body.home-mobile-layout .categories-carousel.has-marquee .cat-item:nth-child(4n+3),
body.home-mobile-layout .categories-scroll .cat-item:nth-child(4n+3) {
  --cat-accent: #f59e0b;
  --cat-accent-2: #673ab7;
}

body.home-mobile-layout .categories-carousel.has-marquee .cat-item:nth-child(4n+4),
body.home-mobile-layout .categories-scroll .cat-item:nth-child(4n+4) {
  --cat-accent: #0f766e;
  --cat-accent-2: #7c3aed;
}

body.home-mobile-layout .categories-carousel.has-marquee .cat-item::after,
body.home-mobile-layout .categories-scroll .cat-item::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  bottom: 9px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cat-accent), rgba(255, 255, 255, 0));
  opacity: .42;
  pointer-events: none;
}

body.home-mobile-layout .categories-carousel.has-marquee .cat-icon,
body.home-mobile-layout .categories-scroll .cat-icon {
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(20, 149, 138, .12), rgba(103, 58, 183, .1));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cat-accent) 14%, #ffffff), color-mix(in srgb, var(--cat-accent-2) 12%, #ffffff));
  color: var(--cat-accent-2);
  box-shadow: 0 8px 18px rgba(20, 149, 138, .08);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--cat-accent) 13%, transparent);
}

body.home-mobile-layout .categories-carousel.has-marquee .cat-name,
body.home-mobile-layout .categories-scroll .cat-name {
  color: #182230;
  letter-spacing: 0;
}

body.home-mobile-layout .view-all-btn {
  border-color: rgba(20, 149, 138, .2);
  background: rgba(20, 149, 138, .08);
  color: #0f766e;
  box-shadow: 0 8px 20px rgba(20, 149, 138, .08);
}

body.home-mobile-layout .view-all-btn:hover {
  background: rgba(20, 149, 138, .13);
}

body.home-mobile-layout .featured-specialists-scroll {
  padding-block: 6px 14px;
  cursor: grab;
  scroll-behavior: auto;
  touch-action: pan-x;
}

body.home-mobile-layout .featured-specialists-scroll:active {
  cursor: grabbing;
}

body.home-mobile-layout .categories-scroll.has-home-auto-strip,
body.home-mobile-layout .providers-scroll.has-home-auto-strip,
body.home-mobile-layout .featured-specialists-scroll.has-home-auto-strip {
  display: block;
  overflow: hidden !important;
  scroll-snap-type: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38px, #000 calc(100% - 38px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 38px, #000 calc(100% - 38px), transparent 100%);
}

body.home-mobile-layout .categories-scroll.has-home-auto-strip {
  padding-inline: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 112px, #000 calc(100% - 112px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 112px, #000 calc(100% - 112px), transparent 100%);
}

html[dir="ltr"] body.home-mobile-layout .categories-scroll.has-home-auto-strip,
html[dir="ltr"] body.home-mobile-layout .providers-scroll.has-home-auto-strip,
html[dir="ltr"] body.home-mobile-layout .featured-specialists-scroll.has-home-auto-strip,
html[data-shell-dir="ltr"] body.home-mobile-layout .categories-scroll.has-home-auto-strip,
html[data-shell-dir="ltr"] body.home-mobile-layout .providers-scroll.has-home-auto-strip,
html[data-shell-dir="ltr"] body.home-mobile-layout .featured-specialists-scroll.has-home-auto-strip {
  direction: ltr;
}

html[dir="rtl"] body.home-mobile-layout .categories-scroll.has-home-auto-strip,
html[dir="rtl"] body.home-mobile-layout .providers-scroll.has-home-auto-strip,
html[dir="rtl"] body.home-mobile-layout .featured-specialists-scroll.has-home-auto-strip,
html[data-shell-dir="rtl"] body.home-mobile-layout .categories-scroll.has-home-auto-strip,
html[data-shell-dir="rtl"] body.home-mobile-layout .providers-scroll.has-home-auto-strip,
html[data-shell-dir="rtl"] body.home-mobile-layout .featured-specialists-scroll.has-home-auto-strip {
  direction: rtl;
}

body.home-mobile-layout .categories-scroll.has-home-auto-strip:active,
body.home-mobile-layout .providers-scroll.has-home-auto-strip:active,
body.home-mobile-layout .featured-specialists-scroll.has-home-auto-strip:active {
  cursor: grabbing;
}

body.home-mobile-layout .categories-scroll.has-home-auto-strip + .categories-scroll-progress,
body.home-mobile-layout .categories-carousel:has(.categories-scroll.has-home-auto-strip) .categories-scroll-progress,
body.home-mobile-layout .categories-carousel:has(.categories-scroll.has-home-auto-strip) .categories-arrow {
  display: none !important;
}

body.home-mobile-layout .home-auto-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

body.home-mobile-layout .home-auto-track--categories {
  gap: 10px;
}

html[dir="rtl"] body.home-mobile-layout .home-auto-track--categories,
html[data-shell-dir="rtl"] body.home-mobile-layout .home-auto-track--categories {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

body.home-mobile-layout .home-auto-track--providers {
  gap: 14px;
}

html[dir="rtl"] body.home-mobile-layout .home-auto-track--providers,
html[data-shell-dir="rtl"] body.home-mobile-layout .home-auto-track--providers {
  flex-direction: row;
  margin-inline-start: 0;
  margin-inline-end: auto;
}

body.home-mobile-layout .home-auto-track .is-auto-clone {
  pointer-events: auto;
}

body.home-mobile-layout .categories-scroll.is-auto-panning,
body.home-mobile-layout .featured-specialists-scroll.is-auto-panning {
  scroll-snap-type: none;
}

body.home-mobile-layout .featured-specialists-scroll .featured-specialist-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfbff 52%, #f5fbfa 100%);
  border-color: rgba(15, 23, 42, .08);
  box-shadow:
    0 14px 30px rgba(44, 29, 82, .09),
    0 1px 0 rgba(255, 255, 255, .9) inset;
  scroll-snap-align: center;
  transform: translateZ(0);
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  body.home-mobile-layout .featured-specialists-scroll .featured-specialist-card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 18px 34px rgba(44, 29, 82, .12),
      0 1px 0 rgba(255, 255, 255, .9) inset;
  }
}

body.home-mobile-layout .featured-specialists-scroll .featured-specialist-card:active {
  transform: scale(.985);
}

body.home-mobile-layout .featured-specialists-scroll .featured-specialist-card::before {
  height: 4px;
  opacity: .9;
  background: linear-gradient(90deg, #14958a, #673ab7 58%, #f59e0b);
}

body.home-mobile-layout .featured-specialists-scroll .featured-specialist-card::after {
  content: "";
  position: absolute;
  inset-inline: 16px;
  bottom: 10px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(20, 149, 138, .42), rgba(103, 58, 183, .14), rgba(245, 158, 11, .36));
  opacity: .58;
  pointer-events: none;
}

body.home-mobile-layout .featured-specialists-scroll .featured-specialist-avatar-ring {
  background: linear-gradient(135deg, #14958a, #673ab7 58%, #f59e0b);
  animation: none;
}

body.home-mobile-layout .featured-specialists-scroll .featured-specialist-name {
  color: #182230;
  letter-spacing: 0;
}

body.home-mobile-layout .featured-specialists-scroll .featured-specialist-meta {
  background: rgba(20, 149, 138, .08);
  border-color: rgba(20, 149, 138, .16);
  color: #0f766e;
}

body.home-mobile-layout .showcase-scroll {
  padding-block: 4px 10px;
}

body.home-mobile-layout .showcase-card {
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: #ffffff;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, .1),
    0 1px 0 rgba(255, 255, 255, .86) inset;
  overflow: visible;
}

body.home-mobile-layout .showcase-media {
  border-radius: 14px 14px 8px 8px;
  overflow: hidden;
}

body.home-mobile-layout .showcase-engagement-stat {
  background: rgba(255, 255, 255, .96);
  border-color: rgba(103, 58, 183, .14);
  color: #231942;
}

body.home-mobile-layout .showcase-chip {
  background: rgba(15, 23, 42, .58);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.home-mobile-layout .sponsor-card {
  border-radius: 18px;
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(20, 149, 138, .24), transparent 62%),
    radial-gradient(420px 240px at 0% 100%, rgba(245, 158, 11, .18), transparent 64%),
    linear-gradient(145deg, #16172a 0%, #22173b 52%, #101827 100%);
  box-shadow:
    0 22px 48px rgba(15, 23, 42, .26),
    0 0 0 1px rgba(255, 255, 255, .08) inset;
}

body.home-mobile-layout .sponsor-hero,
body.home-mobile-layout .sponsor-message-panel {
  border-radius: 14px;
}

body.home-mobile-layout .sponsor-title {
  letter-spacing: 0;
}

body.home-mobile-layout .providers-empty,
body.home-mobile-layout .reels-empty,
body.home-mobile-layout .hero-banner-empty {
  width: 100%;
  min-height: 118px;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed rgba(15, 23, 42, .14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(248, 250, 252, .78));
  color: #667085;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

body.home-mobile-layout .hero-banner-empty {
  min-height: 100%;
  color: rgba(255, 255, 255, .84);
  border-color: rgba(255, 255, 255, .18);
  background:
    radial-gradient(360px 180px at 50% 10%, rgba(20, 149, 138, .2), transparent 70%),
    linear-gradient(145deg, rgba(15, 23, 42, .96), rgba(30, 41, 59, .92));
}

@media (max-width: 640px) {
  body.home-mobile-layout .home-sections-stack {
    gap: 16px;
  }

  body.home-mobile-layout .home-section-shell {
    border-radius: 18px;
    padding: 14px 12px 13px;
  }

  body.home-mobile-layout .home-section-shell::after {
    border-radius: 16px;
  }

  body.home-mobile-layout .home-section-header {
    gap: 10px;
    margin-bottom: 12px;
  }

  body.home-mobile-layout .home-section-title-static {
    font-size: 18px;
  }

  body.home-mobile-layout .home-section-kicker {
    min-height: 26px;
    font-size: 10.5px;
  }

  body.home-mobile-layout .featured-specialists-scroll .featured-specialist-card {
    border-radius: 16px;
  }

  body.home-mobile-layout .sponsor-footer {
    align-items: stretch;
    flex-direction: column;
  }

  body.home-mobile-layout .sponsor-action-btn {
    width: 100%;
  }
}

[data-theme="dark"] body.home-mobile-layout {
  background:
    radial-gradient(920px 420px at 85% 4%, rgba(20, 149, 138, .12), transparent 62%),
    radial-gradient(820px 360px at 6% 18%, rgba(245, 158, 11, .08), transparent 58%),
    linear-gradient(180deg, #0d111b 0%, #111827 54%, #0d111b 100%);
}

[data-theme="dark"] body.home-mobile-layout .home-hero-fade {
  background: linear-gradient(180deg, rgba(13, 17, 27, 0) 0%, rgba(13, 17, 27, .86) 74%, #0d111b 100%);
}

[data-theme="dark"] body.home-mobile-layout .home-section-shell,
body.home-mobile-layout [data-theme="dark"] .home-section-shell {
  border-color: rgba(255, 255, 255, .08);
  background:
    linear-gradient(180deg, rgba(23, 29, 43, .96), rgba(15, 23, 42, .94));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .28),
    0 1px 0 rgba(255, 255, 255, .05) inset;
}

[data-theme="dark"] body.home-mobile-layout .categories-carousel.has-marquee .cat-item,
[data-theme="dark"] body.home-mobile-layout .categories-scroll .cat-item,
[data-theme="dark"] body.home-mobile-layout .featured-specialists-scroll .featured-specialist-card,
[data-theme="dark"] body.home-mobile-layout .showcase-card,
body.home-mobile-layout [data-theme="dark"] .categories-carousel.has-marquee .cat-item,
body.home-mobile-layout [data-theme="dark"] .categories-scroll .cat-item,
body.home-mobile-layout [data-theme="dark"] .featured-specialists-scroll .featured-specialist-card,
body.home-mobile-layout [data-theme="dark"] .showcase-card {
  background:
    linear-gradient(180deg, rgba(30, 41, 59, .96), rgba(17, 24, 39, .92));
  border-color: rgba(255, 255, 255, .08);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, .28),
    0 1px 0 rgba(255, 255, 255, .05) inset;
}

[data-theme="dark"] body.home-mobile-layout .categories-carousel.has-marquee .cat-name,
[data-theme="dark"] body.home-mobile-layout .categories-scroll .cat-name,
[data-theme="dark"] body.home-mobile-layout .featured-specialists-scroll .featured-specialist-name,
body.home-mobile-layout [data-theme="dark"] .categories-carousel.has-marquee .cat-name,
body.home-mobile-layout [data-theme="dark"] .categories-scroll .cat-name,
body.home-mobile-layout [data-theme="dark"] .featured-specialists-scroll .featured-specialist-name {
  color: #f8fafc;
}

[data-theme="dark"] body.home-mobile-layout .providers-empty,
[data-theme="dark"] body.home-mobile-layout .reels-empty,
body.home-mobile-layout [data-theme="dark"] .providers-empty,
body.home-mobile-layout [data-theme="dark"] .reels-empty {
  background: rgba(15, 23, 42, .58);
  border-color: rgba(255, 255, 255, .12);
  color: #cbd5e1;
}

[data-theme="dark"] body.home-mobile-layout .showcase-engagement-stat,
body.home-mobile-layout [data-theme="dark"] .showcase-engagement-stat {
  background: rgba(15, 23, 42, .94);
  border-color: rgba(255, 255, 255, .12);
  color: #f8fafc;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .34);
}

/* ── ترويسة الترحيب الشخصية — مطابقة لـ _WelcomeHeader في Flutter ───────── */
body.home-mobile-layout .home-greeting {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 16px 0;
  margin: 6px auto 14px;
  max-width: 900px;
}

body.home-mobile-layout .home-greeting-bar {
  flex: 0 0 auto;
  width: 4px;
  height: 40px;
  border-radius: 4px;
  background: linear-gradient(180deg, #9D6BE6, #E8B65A);
}

body.home-mobile-layout .home-greeting-copy {
  min-width: 0;
}

body.home-mobile-layout .home-greeting-title {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.25;
  color: #1A1330;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.home-mobile-layout .home-greeting-sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #6B6478;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] body.home-mobile-layout .home-greeting-title,
body.home-mobile-layout [data-theme="dark"] .home-greeting-title {
  color: #ffffff;
}

[data-theme="dark"] body.home-mobile-layout .home-greeting-sub,
body.home-mobile-layout [data-theme="dark"] .home-greeting-sub {
  color: rgba(255, 255, 255, .66);
}