/* Nawafeth public pages unified visual layer.
   Applies to mobile_web pages only, excluding badge verification and provider dashboard. */

:root {
  --nw-public-font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nw-public-font-size: 14px;
  --nw-public-line-height: 1.72;
  --nw-public-bg: #f6f8fb;
  --nw-public-bg-soft: #edf4f6;
  --nw-public-surface: #ffffff;
  --nw-public-surface-soft: #f9fbfd;
  --nw-public-text: #151a2d;
  --nw-public-text-muted: #5e6a7d;
  --nw-public-border: rgba(21, 26, 45, 0.1);
  --nw-public-primary: #0f766e;
  --nw-public-primary-strong: #115e59;
  --nw-public-primary-soft: rgba(15, 118, 110, 0.12);
  --nw-public-secondary: #1d4ed8;
  --nw-public-gold: #b7791f;
  --nw-public-shadow-sm: 0 4px 14px rgba(21, 26, 45, 0.06);
  --nw-public-shadow-md: 0 14px 34px rgba(21, 26, 45, 0.09);
  --nw-public-purple-ink: #4a2d8f;
  --nw-public-purple: #673ab7;
  --nw-public-purple-mid: #9c6be6;
  --nw-public-purple-soft: #f3effc;
  --nw-public-purple-soft-2: #ebe3fb;
  --nw-public-purple-border: rgba(103, 58, 183, 0.18);
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) {
  --color-primary: var(--nw-public-primary);
  --color-primary-dark: var(--nw-public-primary-strong);
  --color-primary-light: #dff5f2;
  --color-primary-subtle: var(--nw-public-primary-soft);
  --color-primary-hover: rgba(15, 118, 110, 0.16);
  --color-accent: var(--nw-public-gold);
  --color-accent-light: #fff7e6;
  --color-bg: var(--nw-public-bg);
  --color-surface: var(--nw-public-surface);
  --color-surface-elevated: var(--nw-public-surface);
  --color-surface-hover: var(--nw-public-surface-soft);
  --color-text: var(--nw-public-text);
  --color-text-secondary: var(--nw-public-text-muted);
  --color-text-tertiary: #8290a3;
  --color-border: var(--nw-public-border);
  --shadow-sm: var(--nw-public-shadow-sm);
  --shadow-md: var(--nw-public-shadow-md);
  --shadow-primary: 0 10px 24px rgba(15, 118, 110, 0.15);
  --ux26-bg: var(--nw-public-bg);
  --ux26-bg-soft: var(--nw-public-bg-soft);
  --ux26-surface: var(--nw-public-surface);
  --ux26-surface-2: var(--nw-public-surface-soft);
  --ux26-border: var(--nw-public-border);
  --ux26-border-strong: rgba(21, 26, 45, 0.16);
  --ux26-text: var(--nw-public-text);
  --ux26-text-muted: var(--nw-public-text-muted);
  --ux26-accent: var(--nw-public-primary);
  --ux26-accent-soft: var(--nw-public-primary-soft);
  --ux26-success: var(--nw-public-primary);
  --ux26-warning: var(--nw-public-gold);
  font-family: var(--nw-public-font-family);
  font-size: var(--nw-public-font-size);
  line-height: var(--nw-public-line-height);
  color: var(--nw-public-text);
  background:
    radial-gradient(900px 360px at 92% -8%, rgba(15, 118, 110, 0.1), transparent 60%),
    radial-gradient(820px 340px at 4% 18%, rgba(29, 78, 216, 0.07), transparent 58%),
    linear-gradient(180deg, var(--nw-public-bg) 0%, var(--nw-public-bg-soft) 100%);
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  main,
  .page-content,
  .page-shell,
  .auth-page
) {
  color: var(--nw-public-text);
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  a,
  button,
  input,
  select,
  textarea
) {
  font-family: inherit;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  p,
  li,
  label,
  input,
  select,
  textarea,
  button,
  .page-subtitle,
  .auth-desc,
  .form-label,
  .form-input
) {
  font-size: var(--nw-public-font-size);
  line-height: var(--nw-public-line-height);
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  small,
  .badge,
  .chip,
  .page-kicker,
  .home-section-kicker
) {
  font-size: 12px;
  line-height: 1.55;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(h1, h2, h3, h4) {
  font-family: inherit;
  color: var(--nw-public-text);
  letter-spacing: 0;
  line-height: 1.34;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) h1 {
  font-size: 26px;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) h2 {
  font-size: 21px;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) h3,
body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) h4 {
  font-size: 17px;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-outlined,
  .view-all-btn,
  .tab-btn
) {
  font-size: var(--nw-public-font-size);
  font-weight: 800;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .btn-primary,
  .btn-primary-lg,
  .tab-btn.active,
  .view-all-btn:hover
) {
  background: linear-gradient(135deg, var(--nw-public-primary), var(--nw-public-primary-strong));
  color: #ffffff;
  border-color: transparent;
  box-shadow: var(--shadow-primary);
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .card,
  .auth-card,
  .section-block,
  .home-section-shell,
  .mw-page-topbar,
  .ux26-page-header,
  .ux26-toolbar
) {
  border-color: var(--nw-public-border);
  background: linear-gradient(160deg, var(--nw-public-surface), var(--nw-public-surface-soft));
}

[data-theme="dark"] body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) {
  --nw-public-bg: #0e1418;
  --nw-public-bg-soft: #141d23;
  --nw-public-surface: #1a242b;
  --nw-public-surface-soft: #202c34;
  --nw-public-text: #eef5f7;
  --nw-public-text-muted: #a8b8c1;
  --nw-public-border: rgba(238, 245, 247, 0.11);
  --nw-public-primary: #34d3c3;
  --nw-public-primary-strong: #14b8a6;
  --nw-public-primary-soft: rgba(52, 211, 195, 0.15);
  --nw-public-secondary: #8ab4ff;
  --nw-public-gold: #f2c46d;
  --nw-public-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.28);
  --nw-public-shadow-md: 0 16px 38px rgba(0, 0, 0, 0.34);
  background:
    radial-gradient(900px 360px at 92% -8%, rgba(52, 211, 195, 0.12), transparent 60%),
    radial-gradient(820px 340px at 4% 18%, rgba(138, 180, 255, 0.09), transparent 58%),
    linear-gradient(180deg, var(--nw-public-bg) 0%, var(--nw-public-bg-soft) 100%);
}

@media (max-width: 640px) {
  body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) h1 {
    font-size: 22px;
  }

  body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) h2 {
    font-size: 18px;
  }

  body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) h3,
  body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) h4 {
    font-size: 16px;
  }
}

/* Add service hero: keep the request hub clear and light. */
body.mobile-web-parity.page-add-service-hub .hub-hero {
  margin-top: 10px !important;
  padding: 20px !important;
  border: 1px solid rgba(15, 118, 110, 0.14) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.96) 0%, rgba(255, 255, 255, 0.98) 54%, rgba(239, 246, 255, 0.94) 100%) !important;
  color: #0f172a !important;
  box-shadow: 0 16px 40px -28px rgba(15, 23, 42, 0.24) !important;
}

body.mobile-web-parity.page-add-service-hub .hub-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 5px !important;
  height: auto !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #0f766e, #1d4ed8) !important;
  filter: none !important;
}

body.mobile-web-parity.page-add-service-hub .hub-hero::after {
  content: none !important;
}

body.mobile-web-parity.page-add-service-hub .hub-hero-top {
  gap: 12px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

body.mobile-web-parity.page-add-service-hub .hub-hero-kicker {
  padding: 7px 12px !important;
  border: 1px solid rgba(15, 118, 110, 0.16) !important;
  background: rgba(15, 118, 110, 0.1) !important;
  color: #115e59 !important;
}

body.mobile-web-parity.page-add-service-hub .hub-hero-kicker::before {
  background: #10b981 !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18) !important;
}

body.mobile-web-parity.page-add-service-hub .hub-hero-link {
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  box-shadow: 0 4px 14px -8px rgba(15, 23, 42, 0.16) !important;
}

body.mobile-web-parity.page-add-service-hub .hub-hero-main {
  margin-top: 18px !important;
}

body.mobile-web-parity.page-add-service-hub .hub-hero-main h1 {
  max-width: 560px !important;
  margin: 0 0 8px !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 25px !important;
  line-height: 1.35 !important;
  font-weight: 950 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

body.mobile-web-parity.page-add-service-hub .hub-hero-main p {
  max-width: 62ch !important;
  margin: 0 !important;
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  opacity: 1 !important;
}

body.mobile-web-parity.page-add-service-hub .hub-hero-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 16px !important;
}

body.mobile-web-parity.page-add-service-hub .hub-hero-stat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(15, 118, 110, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  text-align: start !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.mobile-web-parity.page-add-service-hub .hub-hero-stat strong {
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

body.mobile-web-parity.page-add-service-hub .hub-hero-stat span {
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  margin-top: 0 !important;
  opacity: 1 !important;
}

@media (max-width: 480px) {
  body.mobile-web-parity.page-add-service-hub .hub-hero {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  body.mobile-web-parity.page-add-service-hub .hub-hero-main h1 {
    font-size: 21px !important;
  }
}

/* Public UI light-purple treatment: replace deep brand fills with bright surfaces. */
body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .btn-primary,
  .btn-primary-lg,
  .tab-btn.active,
  .filter-chip.active,
  .sp-btn.is-accent,
  .sp-count-icon,
  .sp-open-cats,
  .provider-search-primary,
  .home-primary-btn,
  .add-service-hero-btn.primary,
  .auth-gate-unified-btn,
  .promo-nav-pill.active,
  .promo-summary-head-badge,
  .promo-payment-head-badge,
  .success-close-btn
) {
  border: 1px solid var(--nw-public-purple-border) !important;
  background:
    linear-gradient(135deg, var(--nw-public-purple-soft) 0%, #ffffff 48%, var(--nw-public-purple-soft-2) 100%) !important;
  color: var(--nw-public-purple-ink) !important;
  box-shadow: 0 10px 24px rgba(103, 58, 183, 0.11) !important;
  animation: none !important;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .btn-primary,
  .btn-primary-lg,
  .filter-chip.active,
  .sp-btn.is-accent,
  .provider-search-primary,
  .auth-gate-unified-btn
):hover {
  background:
    linear-gradient(135deg, #ebe3fb 0%, #ffffff 48%, #e4d8f8 100%) !important;
  color: #3f247d !important;
  box-shadow: 0 12px 28px rgba(103, 58, 183, 0.14) !important;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .btn-primary svg,
  .btn-primary-lg svg,
  .filter-chip.active svg,
  .sp-btn.is-accent svg,
  .sp-count-icon svg,
  .sp-open-cats svg,
  .provider-search-primary svg,
  .auth-gate-unified-btn svg
) {
  color: var(--nw-public-purple-ink) !important;
  stroke: currentColor !important;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .filter-chip.active .filter-chip-x,
  .provider-search-primary-icon,
  .provider-search-primary-tail
) {
  background: rgba(103, 58, 183, 0.12) !important;
  color: var(--nw-public-purple-ink) !important;
}

/* ── Dark mode: the soft-white public CTA above turns glaring on dark
   surfaces. Restore a vivid brand-purple gradient with white text so
   primary buttons and active chips stay clear and premium, not blinding. */
html[data-theme="dark"] body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .btn-primary,
  .btn-primary-lg,
  .tab-btn.active,
  .filter-chip.active,
  .sp-btn.is-accent,
  .sp-count-icon,
  .sp-open-cats,
  .provider-search-primary,
  .home-primary-btn,
  .add-service-hero-btn.primary,
  .auth-gate-unified-btn,
  .promo-nav-pill.active,
  .promo-summary-head-badge,
  .promo-payment-head-badge,
  .success-close-btn
) {
  border: 1px solid rgba(167, 139, 250, 0.45) !important;
  background: linear-gradient(135deg, #7c4dff 0%, #673ab7 55%, #4a2d8f 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px -10px rgba(124, 77, 255, 0.6) !important;
}
html[data-theme="dark"] body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .btn-primary,
  .btn-primary-lg,
  .filter-chip.active,
  .sp-btn.is-accent,
  .provider-search-primary,
  .auth-gate-unified-btn
):hover {
  background: linear-gradient(135deg, #8b5cff 0%, #7344c9 55%, #5a37a8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 32px -10px rgba(124, 77, 255, 0.72) !important;
}
html[data-theme="dark"] body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .btn-primary svg,
  .btn-primary-lg svg,
  .filter-chip.active svg,
  .sp-btn.is-accent svg,
  .sp-count-icon svg,
  .sp-open-cats svg,
  .provider-search-primary svg,
  .auth-gate-unified-btn svg
) {
  color: #ffffff !important;
  stroke: currentColor !important;
}
html[data-theme="dark"] body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .filter-chip.active .filter-chip-x,
  .provider-search-primary-icon,
  .provider-search-primary-tail
) {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .provider-search-primary-copy strong,
  .provider-search-primary-copy small
) {
  color: var(--nw-public-purple-ink) !important;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) .provider-search-primary-copy small {
  opacity: 0.72 !important;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .provider-search-cover,
  .provider-search-cover-frame,
  .provider-search-cover-fallback,
  .skeleton-reel .reel-ring,
  .provider-cover,
  .pv2-cover,
  .pdv4-cover-placeholder
) {
  background:
    linear-gradient(135deg, #f7f3ff 0%, #ffffff 46%, #ede7fb 100%) !important;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .provider-search-cover-fallback,
  .provider-search-cover-fallback svg,
  .provider-cover svg,
  .pv2-cover svg
) {
  color: rgba(103, 58, 183, 0.34) !important;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .provider-search-cover-overlay,
  .pd-cover-gradient
) {
  background: linear-gradient(0deg, rgba(103, 58, 183, 0.08), transparent 66%) !important;
}

body.mobile-web-parity:not(.page-verification):not(.page-provider-dashboard) :is(
  .hub-path-icon,
  .page-header-icon,
  .auth-login-bg-shape,
  .nw-language-toast-icon
) {
  background:
    linear-gradient(135deg, var(--nw-public-purple-soft) 0%, #ffffff 50%, var(--nw-public-purple-soft-2) 100%) !important;
  color: var(--nw-public-purple-ink) !important;
  border: 1px solid var(--nw-public-purple-border) !important;
  box-shadow: 0 10px 24px rgba(103, 58, 183, 0.1) !important;
}