/* 
  [IBP:UI] v1.0 | هدف: Design System سبک (Telegram-like با کنتراست کمی بالاتر) + Toast + Button states
  Target: کل سایت، اما فعلاً فقط در provider_profile.asp لود می‌شود (Iteration 1)
  Notes: لوکال. Reversible با حذف include در صفحه.
*/

:root{
  /* Brand tokens (Telegram-ish, higher contrast) */
  --ibp-primary: #1b7fd1;        /* کمی تیره‌تر از تلگرام برای کنتراست بیشتر */
  --ibp-primary-2: #2aa4f4;      /* accent ثانویه */
  --ibp-bg: #eef2f7;
  --ibp-surface: #ffffff;
  --ibp-surface-2: #f7f9fc;
  --ibp-text: #0f172a;
  --ibp-muted: #475569;
  --ibp-border: rgba(15,23,42,0.14);
  --ibp-danger: #d92d20;
  --ibp-success: #1a7f37;
  --ibp-warning: #b54708;

  --ibp-radius-lg: 16px;
  --ibp-radius-md: 12px;
  --ibp-shadow: 0 10px 30px rgba(15,23,42,0.12);

  --ibp-anim-fast: 220ms;
  --ibp-anim: 300ms;
}

/* 
  [IBP:UI] v1.0 | هدف: دکمه loading بدون تغییر کلاس‌های موجود (.btn)
  Target: هر button که JS کلاس ibp-btn-loading به آن اضافه کند
*/
.ibp-btn-loading{
  position: relative;
  pointer-events: none;
  opacity: 0.92;
}
.ibp-btn-loading::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  top:50%;
  left:14px;
  transform: translateY(-50%);
  border-radius: 999px;
  border:2px solid rgba(255,255,255,0.55);
  border-top-color: rgba(255,255,255,0.98);
  animation: ibpSpin 0.9s linear infinite;
}
@keyframes ibpSpin{ from{ transform: translateY(-50%) rotate(0deg);} to{ transform: translateY(-50%) rotate(360deg);} }

/*
  [IBP:UI] v1.0 | هدف: Toast host و toast ها (Native-like)
  Target: بدنه صفحه (append به body توسط JS)
*/
.ibp-toast-host{
  position: fixed;
  z-index: 10050;
  right: 14px;
  bottom: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(420px, calc(100vw - 28px));
}

.ibp-toast{
  background: var(--ibp-surface);
  color: var(--ibp-text);
  border: 1px solid var(--ibp-border);
  border-radius: 14px;
  box-shadow: var(--ibp-shadow);
  padding: 10px 12px;
  display:flex;
  align-items:flex-start;
  gap: 10px;

  transform: translateY(10px);
  opacity: 0;
  transition: transform var(--ibp-anim) ease, opacity var(--ibp-anim) ease;
}

.ibp-toast.ibp-in{
  transform: translateY(0);
  opacity: 1;
}

.ibp-toast__icon{
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--ibp-primary);
  flex: 0 0 10px;
}

.ibp-toast--success .ibp-toast__icon{ background: var(--ibp-success); }
.ibp-toast--error .ibp-toast__icon{ background: var(--ibp-danger); }
.ibp-toast--warning .ibp-toast__icon{ background: var(--ibp-warning); }
.ibp-toast--info .ibp-toast__icon{ background: var(--ibp-primary); }

.ibp-toast__content{
  flex: 1 1 auto;
  min-width: 0;
}
.ibp-toast__title{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 2px;
}
.ibp-toast__msg{
  font-size: 13px;
  line-height: 1.6;
  color: var(--ibp-muted);
  word-break: break-word;
}

.ibp-toast__close{
  border: 0;
  background: transparent;
  color: var(--ibp-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 18px;
  padding: 6px;
  border-radius: 10px;
  transition: background var(--ibp-anim-fast) ease;
}
.ibp-toast__close:hover{ background: rgba(15,23,42,0.06); }

/* =========================================================
   [IBP:UI] Image Viewer (Fullscreen + Zoom)
   Used by: cases_list.asp (profile photo + before/after)
   ========================================================= */

.ibp-viewer{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.ibp-viewer.ibp-viewer--open{ display:block; }

.ibp-viewer__backdrop{
  position:absolute;
  inset:0;
  background: rgba(2, 6, 23, 0.84);
}

.ibp-viewer__topbar{
  position:absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  z-index: 2;
}

.ibp-viewer__title{
  color: #e2e8f0;
  font-weight: 800;
  font-size: 0.95rem;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-align:right;
}

.ibp-viewer__btn{
  border: 1px solid rgba(226,232,240,0.18);
  background: rgba(15, 23, 42, 0.55);
  color: #e2e8f0;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
  line-height:1;
}

.ibp-viewer__btn:hover{ background: rgba(15, 23, 42, 0.72); }

.ibp-viewer__stage{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index: 1;
}

.ibp-viewer__imgWrap{
  will-change: transform;
  transform: translate3d(0,0,0) scale(1);
  transform-origin: 0 0;
}

.ibp-viewer__img{
  max-width: 92vw;
  max-height: 86vh;
  display:block;
  user-select:none;
  -webkit-user-drag: none;
  touch-action: none;
}

.ibp-viewer__hint{
  position:absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  display:flex;
  justify-content:center;
  z-index: 2;
  pointer-events:none;
}

.ibp-viewer__hint span{
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(226,232,240,0.16);
  color:#e2e8f0;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 800;
}


.ibp-viewer__meta{
  position:absolute;
  left:50%;
  bottom:78px;
  transform:translateX(-50%);
  z-index:2;
  display:none;
  width:min(88vw, 440px);
  padding:14px 18px;
  border-radius:999px;
  background:linear-gradient(90deg, #0ea5e9, #1e9e8d);
  color:#ffffff;
  text-align:center;
  box-shadow:0 20px 44px rgba(14,165,233,0.22);
}

.ibp-viewer--hasMeta .ibp-viewer__meta{
  display:block;
}

.ibp-viewer__metaTitle{
  font-size:1.08rem;
  font-weight:800;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ibp-viewer__metaSubtitle{
  margin-top:4px;
  font-size:0.82rem;
  font-weight:600;
  line-height:1.45;
  opacity:0.96;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ibp-viewer--circle .ibp-viewer__stage{
  padding:96px 16px 160px;
  box-sizing:border-box;
}

.ibp-viewer--circle .ibp-viewer__imgWrap{
  padding:8px;
  border-radius:999px;
  background:linear-gradient(90deg, #0ea5e9, #1e9e8d);
  box-shadow:0 22px 54px rgba(15,23,42,0.30), 0 10px 30px rgba(14,165,233,0.18);
}

.ibp-viewer--circle .ibp-viewer__img{
  width:min(78vw, 420px);
  height:min(78vw, 420px);
  max-width:min(78vw, 420px);
  max-height:min(78vw, 420px);
  border-radius:999px;
  object-fit:cover;
  background:#ffffff;
}

@media (max-width: 640px){
  .ibp-viewer__meta{
    bottom:74px;
    width:min(92vw, 420px);
    padding:12px 16px;
  }
  .ibp-viewer__metaTitle{ font-size:1rem; }
  .ibp-viewer__metaSubtitle{ font-size:0.78rem; }
  .ibp-viewer--circle .ibp-viewer__stage{
    padding:88px 14px 150px;
  }
  .ibp-viewer--circle .ibp-viewer__imgWrap{
    padding:7px;
  }
  .ibp-viewer--circle .ibp-viewer__img{
    width:min(82vw, 360px);
    height:min(82vw, 360px);
    max-width:min(82vw, 360px);
    max-height:min(82vw, 360px);
  }
}


/*
  [IBP:UI] v1.0 | هدف: حالت focus واضح‌تر (کنتراست بیشتر از تلگرام)
  Target: تمام input/textarea/select در صفحات
*/
input:focus, textarea:focus, select:focus, button:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(27,127,209,0.22);
}

/*
  [IBP:UI] v2.0 | Providers List: Telegram-like cards + Empty state + Safe skeleton hooks (scoped)
  Target: فقط /public/providers_list.asp و هر صفحه‌ای که .providers-list-page دارد
  Notes: بدون دستکاری style.css. Reversible با حذف include ui-system.css از همان صفحه.
*/

/* ---------- Providers List (scoped) ---------- */
.providers-list-page .providers-filters{
  background: var(--ibp-surface);
  border: 1px solid var(--ibp-border);
  border-radius: var(--ibp-radius-lg);
  padding: 12px 12px;
  box-shadow: 0 10px 25px rgba(15,23,42,0.06);
  margin-top: 14px;
}

.providers-list-page .providers-count{
  margin-top: 14px;
  margin-bottom: 10px;
  color: var(--ibp-muted);
  font-size: 13px;
}

.providers-list-page .providers-list{
  margin-top: 10px;
}

/* Card */
.providers-list-page .provider-card{
  background: var(--ibp-surface);
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: var(--ibp-radius-lg);
  box-shadow: 0 12px 30px rgba(15,23,42,0.08);
  overflow: hidden;
  transition: transform var(--ibp-anim-fast) ease, box-shadow var(--ibp-anim-fast) ease, border-color var(--ibp-anim-fast) ease;
}

.providers-list-page .provider-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(15,23,42,0.12);
  border-color: rgba(27,127,209,0.28);
}

.providers-list-page .provider-card-header{
  display:flex;
  gap: 10px;
  align-items: center;
  padding: 12px 12px 8px;
}

.providers-list-page .provider-avatar{
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 16px;
  border: 2px solid rgba(27,127,209,0.18);
  box-shadow: 0 10px 18px rgba(15,23,42,0.10);
  background: var(--ibp-surface-2);
  flex: 0 0 56px;
}

.providers-list-page .provider-card-header h3{
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 900;
  color: var(--ibp-text);
}

.providers-list-page .provider-city{
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--ibp-muted);
}

/* Body */
.providers-list-page .provider-card-body{
  padding: 0 12px 12px;
}

.providers-list-page .provider-summary,
.providers-list-page .provider-meta{
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ibp-muted);
  line-height: 1.8;
}

/* Chips (existing .tags/.tag from style.css are kept; only minor polish) */
.providers-list-page .tags{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  vertical-align: middle;
}
.providers-list-page .tag{
  border-radius: 999px;
}

/* Footer + CTA */
.providers-list-page .provider-card-footer{
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(15,23,42,0.08);
  display:flex;
  justify-content: flex-end;
}

.providers-list-page .provider-card-footer .ibp-card-cta{
  border-radius: 12px;
  font-weight: 900;

  /* جلوگیری از دوخطی شدن CTA در دسکتاپ */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
}


/* Verified badge */
.providers-list-page .badge-verified{
  display:inline-block;
  margin-right: 6px;
  transform: translateY(-1px);
}

/* Empty state */
.providers-list-page .ibp-empty-state{
  margin-top: 16px;
  background: var(--ibp-surface);
  border: 1px dashed rgba(15,23,42,0.18);
  border-radius: var(--ibp-radius-lg);
  padding: 16px 14px;
  display:flex;
  gap: 12px;
  align-items: flex-start;
}

.providers-list-page .ibp-empty-state__icon{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  margin-top: 6px;
  background: var(--ibp-primary);
  box-shadow: 0 10px 18px rgba(15,23,42,0.14);
  flex: 0 0 14px;
}

.providers-list-page .ibp-empty-state__title{
  font-size: 14px;
  font-weight: 900;
  color: var(--ibp-text);
  margin-bottom: 2px;
}

.providers-list-page .ibp-empty-state__msg{
  font-size: 13px;
  color: var(--ibp-muted);
  line-height: 1.8;
}

.providers-list-page .ibp-empty-state__actions{
  margin-top: 10px;
}

/* Safe skeleton hooks (future / optional) */
.providers-list-page .ibp-skel{
  background: linear-gradient(90deg, rgba(15,23,42,0.06), rgba(15,23,42,0.10), rgba(15,23,42,0.06));
  background-size: 220% 100%;
  animation: ibpSkel 1.2s ease-in-out infinite;
  border-radius: 10px;
}

@keyframes ibpSkel{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/*
  [IBP:UI] v2.2 | Home Top Providers: Apply Providers Card Design System on Home section
  Target: فقط سکشن .home-top-providers در صفحه اصلی
  Notes: بدون دستکاری style.css. Reversible با حذف همین بلوک.
*/

.home-top-providers .provider-cards{
  align-items: stretch;
}

.home-top-providers .provider-card{
  background: var(--ibp-surface);
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: var(--ibp-radius-lg);
  box-shadow: 0 12px 30px rgba(15,23,42,0.08);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  height: 100%;

  transition: transform var(--ibp-anim-fast) ease, box-shadow var(--ibp-anim-fast) ease, border-color var(--ibp-anim-fast) ease;
}

.home-top-providers .provider-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(15,23,42,0.12);
  border-color: rgba(27,127,209,0.28);
}

.home-top-providers .provider-card-header{
  display:flex;
  gap: 10px;
  align-items: center;
  padding: 12px 12px 8px;
}

.home-top-providers .provider-avatar{
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 16px;
  border: 2px solid rgba(27,127,209,0.18);
  box-shadow: 0 10px 18px rgba(15,23,42,0.10);
  background: var(--ibp-surface-2);
  flex: 0 0 56px;
}

.home-top-providers .provider-card-header h3{
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 900;
  color: var(--ibp-text);
}

.home-top-providers .provider-city{
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--ibp-muted);
}

.home-top-providers .provider-card-body{
  padding: 0 12px 12px;
  flex: 1 1 auto;
}

.home-top-providers .provider-summary,
.home-top-providers .provider-meta{
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ibp-muted);
  line-height: 1.8;
}

.home-top-providers .tags{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  vertical-align: middle;
}
.home-top-providers .tag{
  border-radius: 999px;
}

.home-top-providers .provider-card-footer{
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(15,23,42,0.08);
  display:flex;
  justify-content: flex-end;
  margin-top: auto;
}

.home-top-providers .provider-card-footer .ibp-card-cta{
  border-radius: 12px;
  font-weight: 900;
}

/*
  [IBP:UI] v2.3 | Roundness alignment (CTA pill + avatar circle + card radius)
  Target: کارت‌های Provider در صفحه لیست و سکشن Home
  Request: 
    - دکمه «مشاهده پروفایل» مثل «شروع مشاوره رایگان» گرد شود
    - آواتارها دایره شوند
    - گردی کارت پرووایدر مثل کارت‌های خدمت شود (گردتر از قبل)
  Reversible: حذف همین بلوک
*/

/* CTA pill */
.providers-list-page .provider-card-footer .ibp-card-cta,
.home-top-providers .provider-card-footer .ibp-card-cta{
  border-radius: 999px;
}

/* Avatar circle */
.providers-list-page .provider-avatar,
.home-top-providers .provider-avatar{
  border-radius: 999px;
}

/* Provider card radius: more rounded */
.providers-list-page .provider-card,
.home-top-providers .provider-card{
  border-radius: 22px;
}

/*
  [IBP:UI] v2.4 | Micro-elevation polish (hover/active/focus-within)
  Target: کارت‌های Provider در صفحه لیست و سکشن Home
  Goal: حس کلیک‌پذیری و Native-like با انیمیشن خیلی سبک، بدون تغییر layout
  Reversible: حذف همین بلوک
*/

/* Perf hint */
.providers-list-page .provider-card,
.home-top-providers .provider-card{
  will-change: transform, box-shadow, border-color;
}

/* Desktop hover (only when hover exists) */
@media (hover:hover) and (pointer:fine){
  .providers-list-page .provider-card:hover,
  .home-top-providers .provider-card:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(15,23,42,0.12);
    border-color: rgba(27,127,209,0.32);
  }
}

/* Active / tap feedback (mobile-friendly) */
.providers-list-page .provider-card:active,
.home-top-providers .provider-card:active{
  transform: translateY(0);
  box-shadow: 0 12px 28px rgba(15,23,42,0.10);
  border-color: rgba(27,127,209,0.28);
}

/* Keyboard focus when any element inside card is focused */
.providers-list-page .provider-card:focus-within,
.home-top-providers .provider-card:focus-within{
  border-color: rgba(27,127,209,0.34);
  box-shadow: 0 12px 30px rgba(15,23,42,0.10), 0 0 0 3px rgba(27,127,209,0.16);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .providers-list-page .provider-card,
  .home-top-providers .provider-card{
    transition: none !important;
  }
  .providers-list-page .provider-card:hover,
  .home-top-providers .provider-card:hover,
  .providers-list-page .provider-card:active,
  .home-top-providers .provider-card:active{
    transform: none !important;
  }
}

/*
  [IBP:UI] v2.5 | Sticky footer hardening (Provider cards)
  Target: فقط لیست پرووایدرها
  Goal: دکمه "مشاهده پروفایل" همیشه پایین کارت بماند (بدون پرش ارتفاع)
  Reversible: حذف همین بلوک
*/

.providers-list-page .provider-card{
  display: flex;
  flex-direction: column;
}

.providers-list-page .provider-card-body{
  flex: 1 1 auto;
  min-height: 0;
}

.providers-list-page .provider-card-footer{
  margin-top: auto;
}

/*
  [IBP:UI] v2.6 | Clickable-area standardization (Provider cards)
  Target: کارت‌های Provider در لیست و Home
  Goal: حس "کل کارت قابل کلیک است" بدون دست‌زدن به HTML/Backend
  Reversible: حذف همین بلوک
*/

.providers-list-page .provider-card,
.home-top-providers .provider-card{
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Prevent nested elements from looking like separate hover targets */
.providers-list-page .provider-card * ,
.home-top-providers .provider-card *{
  scroll-margin-top: 90px;
}

/* Subtle pressed feedback even if inner link captures the tap */
@media (hover:none) and (pointer:coarse){
  .providers-list-page .provider-card:active,
  .home-top-providers .provider-card:active{
    filter: brightness(0.99);
  }
}
/*
  [IBP:UI] v2.7 | Chips polish (Services tags) — یکدست‌سازی سایز/فاصله/کنتراست (Scoped)
  Scope: providers_list + home_top_providers
  Revert: حذف همین بلوک
*/
.providers-list-page .tags,
.home-top-providers .tags{
  gap: 8px;
}

.providers-list-page .tag,
.home-top-providers .tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.04);
  color: inherit;
  white-space: nowrap;
}

/* Variants for "+N" chips (اگر کلاس مخصوص داشته باشند) */
.providers-list-page .tag.more,
.providers-list-page .tag-more,
.providers-list-page .tag--more,
.home-top-providers .tag.more,
.home-top-providers .tag-more,
.home-top-providers .tag--more{
  font-weight: 900;
  border-style: dashed;
  background: rgba(15,23,42,0.03);
}

/* Touch feedback (بدون تداخل با CTA) */
.providers-list-page .tag:active,
.home-top-providers .tag:active{
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce){
  .providers-list-page .tag:active,
  .home-top-providers .tag:active{
    transform: none;
  }
}

/*
  [IBP:UI] v2.8 | Chips color uplift (Services tags) — رنگی‌تر و زنده‌تر (Scoped)
  Scope: providers_list + home_top_providers
  Notes: فقط رنگ/پس‌زمینه/بوردر. بدون تغییر ابعاد v2.7
  Revert: حذف همین بلوک
*/

/* Base chips: vibrant but clean */
.providers-list-page .tag,
.home-top-providers .tag{
  background: rgba(42,164,244,0.14);         /* --ibp-primary-2 */
  border-color: rgba(27,127,209,0.26);       /* --ibp-primary */
  color: var(--ibp-text);
  box-shadow: 0 6px 14px rgba(27,127,209,0.12);
}

/* "+N" chips: slightly different tone */
.providers-list-page .tag.more,
.providers-list-page .tag-more,
.providers-list-page .tag--more,
.home-top-providers .tag.more,
.home-top-providers .tag-more,
.home-top-providers .tag--more{
  background: rgba(27,127,209,0.10);
  border-color: rgba(27,127,209,0.30);
  color: var(--ibp-text);
}

/* Desktop hover (only when hover exists) */
@media (hover:hover) and (pointer:fine){
  .providers-list-page .tag:hover,
  .home-top-providers .tag:hover{
    background: rgba(42,164,244,0.20);
    border-color: rgba(27,127,209,0.34);
    box-shadow: 0 10px 22px rgba(27,127,209,0.16);
  }
}

/* Reduce motion safety */
@media (prefers-reduced-motion: reduce){
  .providers-list-page .tag,
  .home-top-providers .tag{
    transition: none !important;
  }
}

/*
  [IBP:UI] v2.9 | Typography rhythm (Line-clamp) — یکدست‌سازی خطوط متن در کارت‌های Provider
  Target: .providers-list-page + .home-top-providers
  Rules:
    - Title (h3): 1 line
    - City: 1 line
    - Summary/Meta: 2 lines
  Notes: فقط clamp. بدون تغییر spacing/size. Reversible با حذف همین بلوک.
*/

/* 1-line clamp helpers */
.providers-list-page .provider-card-header h3,
.home-top-providers .provider-card-header h3,
.providers-list-page .provider-city,
.home-top-providers .provider-city{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2-line clamp (modern) */
.providers-list-page .provider-summary,
.providers-list-page .provider-meta,
.home-top-providers .provider-summary,
.home-top-providers .provider-meta{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Fallback for environments without -webkit-line-clamp */
@supports not (-webkit-line-clamp: 2){
  .providers-list-page .provider-summary,
  .providers-list-page .provider-meta,
  .home-top-providers .provider-summary,
  .home-top-providers .provider-meta{
    max-height: 3.6em; /* 2 lines * 1.8 line-height */
    overflow: hidden;
  }
}

/*
  [IBP:UI] v3.0 | Prevent layout shift (Avatar + Tags stability)
  Target: کارت‌های Provider در لیست و Home
  Goal: جلوگیری از پرش کارت‌ها هنگام لود تصویر/تعداد چیپ‌ها
  Notes: فقط CSS. بدون تغییر HTML/Backend. Reversible با حذف همین بلوک.
*/

/* Avatar: enforce fixed box + cover + block to avoid baseline gaps */
.providers-list-page .provider-avatar,
.home-top-providers .provider-avatar{
  display: block;
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center center;
}

/* Tags area: reserve a minimal height to reduce jump when chips wrap */
.providers-list-page .tags,
.home-top-providers .tags{
  min-height: 28px;            /* برابر حداقل ارتفاع چیپ‌ها */
  align-content: flex-start;   /* چینش پایدار در wrap */
}



/*
  [IBP:UI] v3.2 | Provider title wrap (2 lines) — رفع بیرون‌زدگی عنوان در کارت
  Target: فقط صفحه لیست (.providers-list-page)
  Problem: v2.9 عنوان را 1-line ellipsis کرده و برای نام‌های بلند، ادامه متن دیده نمی‌شود.
  Fix: اجازه wrap تا 2 خط + clamp دوخط، بدون overflow از کارت.
  Reversible: حذف همین بلوک
*/

.providers-list-page .provider-card-header{
  align-items: flex-start;
}

/* اجازه shrink در flex تا متن از کارت بیرون نزند */
.providers-list-page .provider-card-header > *{
  min-width: 0;
}

/* Title: 2-line wrap + clamp (no ellipsis) */
.providers-list-page .provider-card-header h3{
  white-space: normal !important;
  text-overflow: clip !important;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Fallback when line-clamp is not supported */
@supports not (-webkit-line-clamp: 2){
  .providers-list-page .provider-card-header h3{
    max-height: 3em; /* ~2 lines at 1.5 line-height */
    overflow: hidden;
  }
}

/*
  [IBP:UI] v3.3 | Grid equal-height + CTA polish (Step I + Step J)
  Target: Providers cards (list + home)
  Goals:
    - Equal-height rhythm on desktop (min-height) without breaking mobile
    - Better hover/active/focus-visible for CTA button (native-like)
  Reversible: حذف همین بلوک
*/

/* ---------- Step I: Equal-height rhythm (desktop only) ---------- */
@media (min-width: 992px){
  .providers-list-page .provider-cards,
  .home-top-providers .provider-cards{
    align-items: stretch;
  }

  .providers-list-page .provider-card,
  .home-top-providers .provider-card{
    min-height: 320px; /* compact baseline after provider card content cleanup */
  }
}

/* ---------- Step J: CTA button polish ---------- */
.providers-list-page .provider-card-footer .ibp-card-cta,
.home-top-providers .provider-card-footer .ibp-card-cta{
  transition: transform var(--ibp-anim-fast) ease, box-shadow var(--ibp-anim-fast) ease, filter var(--ibp-anim-fast) ease;
  box-shadow: 0 10px 22px rgba(27,127,209,0.18);
}

@media (hover:hover) and (pointer:fine){
  .providers-list-page .provider-card-footer .ibp-card-cta:hover,
  .home-top-providers .provider-card-footer .ibp-card-cta:hover{
    filter: brightness(1.03);
    box-shadow: 0 14px 30px rgba(27,127,209,0.24);
    transform: translateY(-1px);
  }
}

.providers-list-page .provider-card-footer .ibp-card-cta:active,
.home-top-providers .provider-card-footer .ibp-card-cta:active{
  transform: translateY(0);
  filter: brightness(0.99);
  box-shadow: 0 10px 22px rgba(27,127,209,0.20);
}

/* Keyboard accessibility: focus-visible ring (without noisy focus for mouse) */
.providers-list-page .provider-card-footer .ibp-card-cta:focus-visible,
.home-top-providers .provider-card-footer .ibp-card-cta:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(27,127,209,0.18), 0 14px 30px rgba(27,127,209,0.22);
}

@media (prefers-reduced-motion: reduce){
  .providers-list-page .provider-card-footer .ibp-card-cta,
  .home-top-providers .provider-card-footer .ibp-card-cta{
    transition: none !important;
  }
  .providers-list-page .provider-card-footer .ibp-card-cta:hover,
  .home-top-providers .provider-card-footer .ibp-card-cta:hover{
    transform: none !important;
  }
}
/*
  [IBP:UI] v3.4 | Step L1 — Perceived speed (Lazy images + Avatar skeleton shimmer)
  Target: Providers cards (list + home)
  Goals:
    - Lazy-load provider avatars (handled in HTML renderer)
    - Show skeleton shimmer until image is loaded (no CLS)
    - Keep everything reversible (remove this block + revert renderer wrapper)
  Reversible: حذف همین بلوک
  Note: Renderer wrapper required (fixed in [IBP:UI] v3.5)
*/

/* Avatar wrapper: reserves size + allows shimmer overlay */
.providers-list-page .provider-avatar-wrap,
.home-top-providers .provider-avatar-wrap{
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(27,127,209,0.18);
  box-shadow: 0 10px 18px rgba(15,23,42,0.10);
  background: var(--ibp-surface-2);
}

/* The actual image */
.providers-list-page .provider-avatar-wrap > img.provider-avatar,
.home-top-providers .provider-avatar-wrap > img.provider-avatar{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  border-radius: 999px;
  border: 0;           /* border moved to wrapper */
  box-shadow: none;    /* shadow moved to wrapper */
  background: transparent;
}

/* Shimmer overlay until loaded */
.providers-list-page .provider-avatar-wrap::before,
.home-top-providers .provider-avatar-wrap::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,23,42,0.06), rgba(15,23,42,0.12), rgba(15,23,42,0.06));
  background-size: 220% 100%;
  animation: ibpSkel 1.15s ease-in-out infinite;
}

/* Hide shimmer once loaded */
.providers-list-page .provider-avatar-wrap.ibp-img-loaded::before,
.home-top-providers .provider-avatar-wrap.ibp-img-loaded::before{
  display: none;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .providers-list-page .provider-avatar-wrap::before,
  .home-top-providers .provider-avatar-wrap::before{
    animation: none !important;
  }
}


/*
  [IBP:UI] v3.6 | Step L1 — Card shimmer on full refresh + eager first 4 avatars
  Date: 2026-02-13
  Reason:
    - On full refresh, show shimmer on entire cards (not only "More")
    - Remove shimmer per card when avatar finishes (load/error)
    - Make first 4 avatars eager for faster above-the-fold
  Reversible: حذف همین بلوک + حذف کلاس ibp-card-loading و attrs eager/lazy از رندررها
*/

/* Cards host overlay */
.providers-list-page .provider-card,
.home-top-providers .provider-card{
  position: relative;
}

/* Full-card shimmer while loading */
.providers-list-page .provider-card.ibp-card-loading::after,
.home-top-providers .provider-card.ibp-card-loading::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(15,23,42,0.04), rgba(15,23,42,0.10), rgba(15,23,42,0.04));
  background-size: 220% 100%;
  animation: ibpSkel 1.15s ease-in-out infinite;
  opacity: 0.22;
}

/* Keep footer/buttons clickable even during shimmer */
.providers-list-page .provider-card.ibp-card-loading .provider-card-footer,
.home-top-providers .provider-card.ibp-card-loading .provider-card-footer{
  position: relative;
  z-index: 2;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .providers-list-page .provider-card.ibp-card-loading::after,
  .home-top-providers .provider-card.ibp-card-loading::after{
    animation: none !important;
  }
}



/*
  [IBP:UI] v3.7 | Step L2 — Full Card Skeleton (text/controls) while ibp-card-loading
  Date: 2026-02-13
  Reason:
    - Card shimmer is now always visible on full refresh (v3.6)
    - In this step we turn it into a true "skeleton": hide text and show placeholder bars for title/city/summary/tags/CTA
  Reversible: حذف همین بلوک v3.7 (فقط CSS)
*/

/* Skeleton: hide real text while keeping layout */
.providers-list-page .provider-card.ibp-card-loading .provider-card-header h3,
.home-top-providers .provider-card.ibp-card-loading .provider-card-header h3,
.providers-list-page .provider-card.ibp-card-loading .provider-city,
.home-top-providers .provider-card.ibp-card-loading .provider-city,
.providers-list-page .provider-card.ibp-card-loading .provider-summary,
.home-top-providers .provider-card.ibp-card-loading .provider-summary,
.providers-list-page .provider-card.ibp-card-loading .provider-price,
.home-top-providers .provider-card.ibp-card-loading .provider-price{
  color: transparent !important;
}

/* Title bar */
.providers-list-page .provider-card.ibp-card-loading .provider-card-header h3,
.home-top-providers .provider-card.ibp-card-loading .provider-card-header h3{
  position: relative;
}

.providers-list-page .provider-card.ibp-card-loading .provider-card-header h3::after,
.home-top-providers .provider-card.ibp-card-loading .provider-card-header h3::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  width: 72%;
  border-radius: 10px;
  background: rgba(15,23,42,0.10);
}

/* City/type bar */
.providers-list-page .provider-card.ibp-card-loading .provider-city,
.home-top-providers .provider-card.ibp-card-loading .provider-city{
  position: relative;
}

.providers-list-page .provider-card.ibp-card-loading .provider-city::after,
.home-top-providers .provider-card.ibp-card-loading .provider-city::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 10px;
  width: 46%;
  border-radius: 10px;
  background: rgba(15,23,42,0.08);
}

/* Summary: two-line bars (no CLS) */
.providers-list-page .provider-card.ibp-card-loading .provider-summary,
.home-top-providers .provider-card.ibp-card-loading .provider-summary{
  position: relative;
}

.providers-list-page .provider-card.ibp-card-loading .provider-summary::after,
.home-top-providers .provider-card.ibp-card-loading .provider-summary::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(rgba(15,23,42,0.08), rgba(15,23,42,0.08)) 0 6px / 88% 10px no-repeat,
    linear-gradient(rgba(15,23,42,0.06), rgba(15,23,42,0.06)) 0 26px / 64% 10px no-repeat;
  pointer-events: none;
}

/* Tags: turn chips into neutral skeleton pills */
.providers-list-page .provider-card.ibp-card-loading .tags .tag,
.home-top-providers .provider-card.ibp-card-loading .tags .tag{
  color: transparent !important;
  background: rgba(15,23,42,0.08) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* CTA button: neutral skeleton */
.providers-list-page .provider-card.ibp-card-loading .provider-card-footer .btn,
.home-top-providers .provider-card.ibp-card-loading .provider-card-footer .btn{
  color: transparent !important;
  position: relative;
}

.providers-list-page .provider-card.ibp-card-loading .provider-card-footer .btn::after,
.home-top-providers .provider-card.ibp-card-loading .provider-card-footer .btn::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  height: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.35);
}

/* Reduce motion: keep skeleton but stop shimmer animation from v3.6 */
@media (prefers-reduced-motion: reduce){
  .providers-list-page .provider-card.ibp-card-loading::after,
  .home-top-providers .provider-card.ibp-card-loading::after{
    animation: none !important;
  }
}

/* ===========================
   Provider Profile Header: Compact Sticky (shared)
   - Moved from provider_profile.asp inline styles
   =========================== */

/* Base avatar rendering: enforce square box so image never becomes oval */
.provider-avatar-large{
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
}


/* Provider header: slightly larger avatar in normal (requested 1.3x) */
.provider-profile-header .provider-avatar-large{
  width: 125px;
  height: 125px;
  flex: 0 0 125px;
}
.provider-avatar-large img{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 999px;
  object-fit: cover;
}

/* Slightly smaller provider name (normal state) */
.provider-profile-title h1{
  font-size: 1.25rem;
  line-height: 1.35;
}

/* Compact sticky provider header (full-width, header-like) */
.provider-profile-header.pp-compact-sticky{
  position: fixed;
  top: var(--pp-sticky-top, 0px);
  left: 0;
  right: 0;
  z-index: 99; /* under the main site header (should be higher) */
  border-radius: 0;
  margin: 0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.10);
  border-bottom: 1px solid rgba(15,23,42,0.08);
}

/* Make header look like a bar */
.provider-profile-header.pp-compact-sticky .provider-profile-main{
  align-items: center;
}

/* Compact layout: keep name one-line, role/city under it, CTA on left; CTA wraps to next row on narrow screens */
.provider-profile-header.pp-compact-sticky .provider-profile-main{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "avatar title cta";
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
}
.provider-profile-header.pp-compact-sticky .provider-avatar-large{ grid-area: avatar; }
.provider-profile-header.pp-compact-sticky .provider-profile-title{ grid-area: title; min-width: 0; }
.provider-profile-header.pp-compact-sticky .provider-profile-aside{
  grid-area: cta;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end; /* left edge in RTL */
}

@media (max-width: 420px){
  .provider-profile-header.pp-compact-sticky .provider-profile-main{
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "avatar title"
      "cta cta";
  }
  .provider-profile-header.pp-compact-sticky .provider-profile-aside{
    justify-self: end; /* keep CTA on far left in RTL */
  }
}

/* Shrink avatar in sticky mode */
.provider-profile-header.pp-compact-sticky .provider-avatar-large{
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
}
.provider-profile-header.pp-compact-sticky .provider-avatar-large img{
  width: 100%;
  height: 100%;
}

/* Compact title/subtitle/meta */
.provider-profile-header.pp-compact-sticky .provider-profile-title h1{
  font-size: 1.0rem;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-profile-header.pp-compact-sticky .provider-profile-subtitle{
  font-size: 0.82rem;
  margin-bottom: 0;
  opacity: 1 !important;
  max-height: none !important;
  transform: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.provider-profile-header.pp-compact-sticky .provider-profile-aside .btn{
  padding: 8px 12px;
  font-size: 0.9rem;
}

/* =========================================================
   Provider Profile: Smooth Compact Sticky Transition
   - Avoid display:none so transitions can run
   - Uses max-height + opacity + transform
   ========================================================= */
.provider-profile-header {
  /* Avoid animating the header container with transform.
     On some browsers, fixed+transform can cause the header to momentarily leave viewport.
     We animate only inner elements (avatar/text blocks) for a stable UX. */
  transition: box-shadow 260ms ease, background-color 260ms ease;
}
.provider-profile-header .provider-avatar-large,
.provider-profile-header .provider-avatar-large img {
  transition: width 260ms ease, height 260ms ease, transform 260ms ease;
}
.provider-profile-header .provider-profile-title h1 {
  transition: font-size 260ms ease, line-height 260ms ease;
}

/* Elements that collapse/expand */
.provider-profile-header .provider-profile-subtitle,
.provider-profile-header .provider-profile-meta,
.provider-profile-header .provider-profile-contact h2,
.provider-profile-header .provider-profile-contact ul {
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: max-height 260ms ease, opacity 220ms ease, transform 260ms ease;
}

/* Reasonable expanded max-heights */
.provider-profile-header .provider-profile-subtitle { max-height: 120px; }
.provider-profile-header .provider-profile-meta     { max-height: 120px; }
.provider-profile-header .provider-profile-contact h2 { max-height: 60px; }
.provider-profile-header .provider-profile-contact ul { max-height: 260px; }

/* Compact sticky state: collapse with animation (keep subtitle visible) */
.provider-profile-header.pp-compact-sticky .provider-profile-meta,
.provider-profile-header.pp-compact-sticky .provider-profile-contact h2,
.provider-profile-header.pp-compact-sticky .provider-profile-contact ul {
  max-height: 0 !important;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* Keep elements in flow (override any legacy display:none rules) */
.provider-profile-header .provider-profile-subtitle,
.provider-profile-header .provider-profile-meta {
  display: block;
}
.provider-profile-header .provider-profile-contact ul {
  display: block;
}
.provider-profile-header .provider-profile-contact h2 {
  display: block;
}


/* ===========================
   Provider Profile Header: UX Tweaks (Iteration)
   Goals:
   - Larger avatar (normal: ~1.3x) + larger avatar in compact (2x current)
   - Keep provider type + city visible in compact
   - Remove the “grey fixed” feel for CTA container in compact and prevent wrapping
   =========================== */

/* Avatar sizing scoped to provider header (avoid impacting other pages) */
.provider-profile-header .provider-avatar-large{
  width: 125px;
  height: 125px;
  flex: 0 0 125px;
}
.provider-profile-header .provider-avatar-large img{
  width: 100%;
  height: 100%;
}

/* Compact: bigger avatar than previous compact */
.provider-profile-header.pp-compact-sticky .provider-avatar-large{
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
}

/* Provider name: slightly smaller in normal state */
.provider-profile-header .provider-profile-title h1{
  font-size: 1.15rem;
  line-height: 1.35;
}

/* Compact: keep subtitle (type + city) visible and single-line */
.provider-profile-header.pp-compact-sticky .provider-profile-subtitle{
  max-height: 44px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact bar layout: RTL order = avatar + name block, CTA at far left.
   If CTA doesn't fit, it drops to the next row (only CTA moves). */
.provider-profile-header.pp-compact-sticky{
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "ppMain ppCta";
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

.provider-profile-header.pp-compact-sticky .provider-profile-main{ grid-area: ppMain; }
.provider-profile-header.pp-compact-sticky .provider-profile-aside{ grid-area: ppCta; }

/* Narrow screens: keep avatar+name on first row, move CTA to second row aligned to the left */
@media (max-width: 420px){
  .provider-profile-header.pp-compact-sticky{
    grid-template-columns: 1fr;
    grid-template-areas:
      "ppMain"
      "ppCta";
    row-gap: 10px;
  }
  .provider-profile-header.pp-compact-sticky .provider-profile-aside{
    justify-content: flex-end; /* RTL: far left */
  }
}


/* CTA container in compact: remove grey box feel, align left, avoid wrapping */
.provider-profile-header.pp-compact-sticky .provider-profile-contact{
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: auto !important;
  min-width: 0 !important;
}

/* If CTA lives in a dedicated aside container, normalize it too */
.provider-profile-header.pp-compact-sticky .provider-profile-aside{
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
}

/* Keep CTA button on a single line */
.provider-profile-header.pp-compact-sticky .provider-profile-contact .btn,
.provider-profile-header.pp-compact-sticky .provider-profile-aside .btn{
  white-space: nowrap;
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .provider-profile-header,
  .provider-profile-header .provider-avatar-large,
  .provider-profile-header .provider-avatar-large img,
  .provider-profile-header .provider-profile-title h1,
  .provider-profile-header .provider-profile-subtitle,
  .provider-profile-header .provider-profile-meta,
  .provider-profile-header .provider-profile-contact h2,
  .provider-profile-header .provider-profile-contact ul {
    transition: none !important;
  }
}

/* =========================================================
   Provider Profile Header: Narrow width safety
   - Prevent CTA overlapping provider name in compact sticky mode
   - Allow CTA to wrap to next line when space is tight
   ========================================================= */
@media (max-width: 420px) {
  .provider-profile-header.pp-compact-sticky .provider-profile-main{
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .provider-profile-header.pp-compact-sticky .provider-profile-title{
    flex: 1 1 auto;
    min-width: 0;
  }
  .provider-profile-header.pp-compact-sticky .provider-profile-aside{
    width: 100%;
    justify-content: flex-start;
  }
  .provider-profile-header.pp-compact-sticky .provider-profile-aside .btn{
    width: auto;
    max-width: 100%;
    white-space: nowrap;
  }
}


/* =========================================================
   [IBP:UI] v3.8.1 | Public Header: Auth Menu + Dashboard Role Menu
   Patch: Add provider-only dashboard submenu styles without changing server auth logic.
   Reversible: remove the [IBP:UI] v3.8.1 dashboard block below and restore _header_public.asp v1.1.1.
   ========================================================= */

.site-header .kc-dashboard-menu{
  position: relative;
}

.site-header .kc-dashboard-menu[hidden],
.site-header .kc-mobile-dashboard[hidden]{
  display: none !important;
}

.site-header .kc-dashboard-menu__panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  background: var(--ibp-surface, #fff);
  border: 1px solid rgba(15,23,42,0.14);
  border-radius: 16px;
  box-shadow: var(--ibp-shadow, 0 10px 30px rgba(15,23,42,0.12));
  padding: 8px;
  z-index: 12000;
}

.site-header .kc-dashboard-menu__panel[hidden],
.site-header .kc-mobile-dashboard__panel[hidden],
.site-header .kc-dashboard-menu__item[hidden],
.site-header .kc-mobile-dashboard__panel .kc-mi[hidden]{
  display: none !important;
}

.site-header .kc-dashboard-menu__item{
  display: block;
  text-decoration: none;
  color: var(--ibp-text, #0f172a);
  font-weight: 900;
  font-size: 13px;
  padding: 10px 10px;
  border-radius: 12px;
  white-space: nowrap;
  transition: background var(--ibp-anim-fast, 220ms) ease, transform var(--ibp-anim-fast, 220ms) ease;
}

.site-header .kc-dashboard-menu__item:hover{
  background: rgba(27,127,209,0.10);
  transform: translateY(-1px);
}

.site-header .kc-dashboard-menu__item:active{
  transform: translateY(0);
}

.site-header .kc-dashboard-menu__item:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(27,127,209,0.18);
}

@media (max-width: 820px){
  .site-header .kc-mobile-dashboard{
    display: block;
  }

  .site-header .kc-mobile-dashboard__panel{
    padding: 0 0 4px 0;
  }

  .site-header .kc-mobile-dashboard__panel .kc-mi--sub{
    margin-right: 34px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 13px;
    color: rgba(15,23,42,0.78);
    background: rgba(15,23,42,0.035);
  }
}

@media (prefers-reduced-motion: reduce){
  .site-header .kc-dashboard-menu__item{
    transition: none !important;
  }
}

/* =========================================================
   [IBP:UI] v3.8 | Public Header: Auth Menu (User/Provider)
   Goals:
     - Single "ورود" CTA with role-based options
     - Premium feel + accessibility (focus-visible)
   Scope: فقط داخل .site-header
   Reversible: حذف همین بلوک + برگشت markup در _header_public.asp
   ========================================================= */

.site-header .kc-authmenu{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.site-header .kc-authmenu__btn{
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.92);
  color: var(--ibp-text);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--ibp-anim-fast) ease, box-shadow var(--ibp-anim-fast) ease, background var(--ibp-anim-fast) ease, border-color var(--ibp-anim-fast) ease;
}

.site-header .kc-authmenu__btn:hover{
  background: #fff;
  border-color: rgba(27,127,209,0.28);
  box-shadow: 0 10px 22px rgba(15,23,42,0.10);
  transform: translateY(-1px);
}

.site-header .kc-authmenu__btn:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(15,23,42,0.08);
}

.site-header .kc-authmenu__panel{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;            /* RTL: visually left side */
  min-width: 220px;
  background: var(--ibp-surface);
  border: 1px solid rgba(15,23,42,0.14);
  border-radius: 16px;
  box-shadow: var(--ibp-shadow);
  padding: 8px;
  display: none;
  z-index: 1002;
}

.site-header .kc-authmenu.kc-open .kc-authmenu__panel{ display: block; }

.site-header .kc-authmenu__item{
  display: block;
  text-decoration: none;
  color: var(--ibp-text);
  font-weight: 900;
  font-size: 13px;
  padding: 10px 10px;
  border-radius: 12px;
  transition: background var(--ibp-anim-fast) ease, transform var(--ibp-anim-fast) ease;
}

.site-header .kc-authmenu__item:hover{
  background: rgba(27,127,209,0.10);
  transform: translateY(-1px);
}

.site-header .kc-authmenu__item:active{
  transform: translateY(0);
}

/* Focus-visible for keyboard users (avoid noisy focus on mouse) */
.site-header .kc-authmenu__btn:focus-visible,
.site-header .kc-authmenu__item:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(27,127,209,0.18);
}

/* Mobile: keep panel inside viewport */
@media (max-width: 520px){
  .site-header .kc-authmenu__panel{
    left: auto;
    right: 0;
    min-width: min(260px, calc(100vw - 28px));
  }
}

@media (prefers-reduced-motion: reduce){
  .site-header .kc-authmenu__btn,
  .site-header .kc-authmenu__item{
    transition: none !important;
  }
}


/* =========================================================
   [IBP:UI] v3.9 | Public Header: Mobile Drawer + Overflow hardening
   Problems solved:
     - Mobile: no visible menu items (put nav + auth inside hamburger drawer)
     - Login page: auth dropdown gets clipped / layout breaks when parent has overflow/stacking issues
   Scope: only .site-header and its descendants
   Reversible: remove this block + remove drawer markup in _header_public.asp
   ========================================================= */

/* Prevent dropdown/drawer clipping due to unexpected overflow on some pages */
.site-header,
.site-header .header-inner,
.site-header .header-actions,
.site-header .header-nav{
  overflow: visible;
}

/* Keep the auth dropdown above content */
.site-header .kc-authmenu__panel{ z-index: 12000; }



/* ---------- Mobile Toggle (hamburger button) ---------- */
.site-header .header-menu-toggle{
  display:none;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.92);
  color: var(--ibp-text, #0f172a);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  line-height: 1;
  font-size: 20px; /* base, icon itself */
  font-weight: 900;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 6px 16px rgba(15,23,42,0.10);
}
@media (max-width: 820px){
  .site-header .header-menu-toggle{ display:inline-flex; }
}
/* ---------- Mobile Drawer (hamburger) ---------- */
.site-header .kc-mobile-drawer{
  display: none;
}

@media (max-width: 820px){
  .site-header .kc-mobile-drawer{
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 11000;
    padding: 10px 12px 14px;
  }

  .site-header.kc-nav-open .kc-mobile-drawer{ display: block; }

  .site-header .kc-mobile-drawer__inner{
    background: var(--ibp-surface, #fff);
    border: 1px solid rgba(15,23,42,0.14);
    border-radius: 18px;
    box-shadow: var(--ibp-shadow, 0 10px 30px rgba(15,23,42,0.12));
    padding: 10px;
  }

  .site-header .kc-mobile-drawer__nav a,
  .site-header .kc-mobile-drawer__authLink{
    display: block;
    text-decoration: none;
    color: var(--ibp-text, #0f172a);
    font-weight: 900;
    font-size: 14px;
    padding: 12px 12px;
    border-radius: 14px;
    transition: background var(--ibp-anim-fast, 220ms) ease, transform var(--ibp-anim-fast, 220ms) ease;
  }

  .site-header .kc-mobile-drawer__nav a:hover,
  .site-header .kc-mobile-drawer__authLink:hover{
    background: rgba(27,127,209,0.10);
    transform: translateY(-1px);
  }
  .site-header .kc-mobile-drawer__nav a:active,
  .site-header .kc-mobile-drawer__authLink:active{
    transform: translateY(0);
  }

  
/* Section titles inside mobile drawer (IA grouping) */
.site-header .kc-mobile-drawer__sectionTitle{
  margin: 10px 10px 6px 10px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,0.62);
  letter-spacing: -0.2px;
}

/* Secondary nav group: keep same look, slightly tighter */
.site-header .kc-mobile-drawer__nav--secondary .kc-mi{
  padding-top: 10px;
  padding-bottom: 10px;
}

.site-header .kc-mobile-drawer__divider{
    height: 1px;
    background: rgba(15,23,42,0.10);
    margin: 8px 6px;
  }

  .site-header .kc-mobile-drawer__cta{
    display: block;
    margin-top: 8px;
    text-align: center;
    text-decoration: none;
    font-weight: 900;
    font-size: 14px;
    padding: 12px 14px;
    border-radius: 999px;
    background: var(--ibp-primary, #1b7fd1);
    color: #fff;
    box-shadow: 0 12px 26px rgba(27,127,209,0.22);
    transition: filter var(--ibp-anim-fast, 220ms) ease, transform var(--ibp-anim-fast, 220ms) ease;
  }
  .site-header .kc-mobile-drawer__cta:hover{ filter: brightness(1.03); transform: translateY(-1px); }
  .site-header .kc-mobile-drawer__cta:active{ transform: translateY(0); }

  /* Focus-visible for accessibility */
  .site-header .kc-mobile-drawer__nav a:focus-visible,
  .site-header .kc-mobile-drawer__authLink:focus-visible,
  .site-header .kc-mobile-drawer__cta:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px rgba(27,127,209,0.18);
  }
}

@media (prefers-reduced-motion: reduce){
  .site-header .kc-mobile-drawer__nav a,
  .site-header .kc-mobile-drawer__authLink,
  .site-header .kc-mobile-drawer__cta{
    transition: none !important;
  }
}

/* =========================================================
   [IBP:UI] v4.0 | Header Mobile Drawer: Overlay + Attachment Fix
   Fixes:
     1) Drawer must sit فوقِ همه چیز (z-index hardening)
     2) Drawer must چسبیده به هدر/همبرگر باشد و حس "کارت جدا" ندهد
     3) Add backdrop for clean overlay UX (click to close via JS)
   Scope: فقط .site-header
   Reversible: حذف همین بلوک + حذف kc-nav-backdrop از _header_public.asp
   ========================================================= */

.site-header{
  position: sticky;
  top: 0;
  z-index: 20000;
}

/* Backdrop (mobile only) */
.site-header .kc-nav-backdrop{ display:none; }

@media (max-width: 820px){
  .site-header.kc-nav-open .kc-nav-backdrop{
    display:block;
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.42);
    z-index: 20001;
  }

  /* Drawer container: zero outer padding so it feels attached */
  .site-header .kc-mobile-drawer{
    z-index: 20002;           /* فوق backdrop */
    padding: 0;
    top: calc(100% - 1px);    /* چسب به لبه پایینی هدر */
  }

  /* Drawer inner: sheet-like (top corners flat) */
  .site-header .kc-mobile-drawer__inner{
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    box-shadow: 0 18px 50px rgba(15,23,42,0.18);
  }
}

/* =========================================================
   [IBP:UI] v4.1 | Mobile Drawer: Anchored Sheet + Icons
   Requirements:
     - Drawer not full-width
     - Top corners rounded like bottom
     - Top-right corner anchored روی همبرگر و همبرگر را بپوشاند
     - Icons beside each item
   Scope: فقط .site-header
   Reversible: حذف همین بلوک
   ========================================================= */

@media (max-width: 820px){
  /* Anchored overlay sheet (positioning set by JS via CSS vars) */
  .site-header .kc-mobile-drawer{
    position: fixed;
    top: var(--kc-drawer-top, calc(100% - 1px));
    right: var(--kc-drawer-right, 12px);
    left: auto;
    width: var(--kc-drawer-width, min(340px, calc(100vw - 48px)));
    max-height: var(--kc-drawer-maxh, calc(100vh - 96px));
    overflow: auto;
    padding: 0;
    z-index: 20002; /* فوق backdrop و فوق هدر */
  }

  /* Inner sheet: fully rounded */
  .site-header .kc-mobile-drawer__inner{
    border-radius: 18px;
    border-top: 1px solid rgba(15,23,42,0.14);
    box-shadow: 0 18px 50px rgba(15,23,42,0.18);
  }

  /* Menu items with icon */
  .site-header .kc-mi{
    display: flex;
    align-items: center;
    gap: 10px;
  }
  /* Hardening: ensure kc-mi links stay horizontal even if other rules set display:block */
  .site-header .kc-mobile-drawer__nav a.kc-mi,
  .site-header .kc-mobile-drawer__authLink.kc-mi{
    display: flex;
    align-items: center;
  }
  .site-header .kc-mi__icon{
    width: 22px;               /* +~20% از 18px */
    height: 22px;              /* +~20% از 18px */
    display: inline-flex;
    align-items: center;       /* مرکز عمودی آیکون */
    justify-content: center;
    color: rgba(15,23,42,0.60);
    flex: 0 0 22px;
    align-self: center;        /* هم‌ترازی با متن در وسط */
    vertical-align: middle;
  }
  .site-header .kc-mi__svg{
    width: 22px;
    height: 22px;
    display: block;
  }
  .site-header .kc-mi__label{
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;      /* مرکز عمودی متن (بدون شکستن خط) */
    align-items: center;
    line-height: 1.35;
    vertical-align: middle;
  }

  /* Ensure link paddings stay consistent with flex */
  .site-header .kc-mobile-drawer__nav a,
  .site-header .kc-mobile-drawer__authLink,
  .site-header .kc-mobile-drawer__cta{
    justify-content: flex-start;
  }
}

/* Extra: keep hamburger clickable when drawer is closed */
.site-header:not(.kc-nav-open) .kc-mobile-drawer{
  pointer-events: none;
}
.site-header.kc-nav-open .kc-mobile-drawer{
  pointer-events: auto;
}

/* =========================================================
   [IBP:UI] v4.2 | Active State (Desktop + Mobile)
   Goal:
     - نشان دادن صفحه/بخش فعلی با هایلایت واضح
     - بهبود UX و ناوبری داخلی (بدون تغییر SEO)
   Notes:
     - کلاس توسط JS: .kc-active + aria-current="page"
   Scope: .site-header
   Reversible: حذف همین بلوک + بلاک JS متناظر
   ========================================================= */

/* Desktop nav active */
.site-header .header-nav a.kc-active{
  position: relative;
  color: var(--ibp-primary, #1b7fd1);
}
.site-header .header-nav a.kc-active::after{
  content: "";
  position: absolute;
  right: 8px;
  left: 8px;
  bottom: -6px;
  height: 3px;
  border-radius: 999px;
  background: rgba(27,127,209,0.35);
}

/* Mobile drawer active */
@media (max-width: 820px){
  .site-header .kc-mobile-drawer__nav a.kc-active,
  .site-header .kc-mobile-drawer__authLink.kc-active{
    background: rgba(27,127,209,0.14);
    box-shadow: inset 0 0 0 1px rgba(27,127,209,0.22);
  }
  .site-header .kc-mobile-drawer__nav a.kc-active .kc-mi__icon,
  .site-header .kc-mobile-drawer__authLink.kc-active .kc-mi__icon{
    color: rgba(27,127,209,0.85);
  }
}


/* ---------- Header Primary CTA (Public) ---------- */
.site-header .header-primary-cta{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 13px;
  background: rgba(27,127,209,0.10);
  color: rgba(27,127,209,1);
  border: 1px solid rgba(27,127,209,0.22);
  transition: transform var(--ibp-anim-fast,200ms) ease, box-shadow var(--ibp-anim-fast,200ms) ease;
}
.site-header .header-primary-cta:hover{ transform: translateY(-1px); box-shadow: 0 10px 18px rgba(15,23,42,0.12); }
.site-header .header-primary-cta:active{ transform: translateY(0); }


/* ------------------------------------------------------------
   Provider Profile — Cases CTA (بالای کارت معرفی)
   هدف: هدایت سریع به بخش نمونه‌کارها با حداقل اصطکاک
------------------------------------------------------------ */

.ibp-cases-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  margin:10px 0 14px;
  border-radius:18px;
  text-decoration:none;
  color:#0b2b33;
  background: linear-gradient(135deg, rgba(30, 176, 191, .14) 0%, rgba(17, 155, 227, .12) 45%, rgba(30, 176, 191, .06) 100%);
  border:1px solid rgba(17, 155, 227, .18);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  position:relative;
  overflow:hidden;
  transition: transform var(--ibp-anim-fast,200ms) ease, box-shadow var(--ibp-anim-fast,200ms) ease;
}

.ibp-cases-cta::before{
  content:"";
  position:absolute;
  inset:-40% -60% auto auto;
  width:220px;
  height:220px;
  background: radial-gradient(circle at 30% 30%, rgba(17,155,227,.22), transparent 60%);
  transform: rotate(18deg);
  pointer-events:none;
}

.ibp-cases-cta:focus{ outline:none; }
.ibp-cases-cta:focus-visible{ box-shadow: 0 0 0 3px rgba(17,155,227,.22), 0 10px 22px rgba(0,0,0,.06); }

.ibp-cases-cta__main{ min-width:0; }
.ibp-cases-cta__title{
  font-size:16px;
  font-weight:900;
  line-height:1.35;
}
.ibp-cases-cta__sub{
  margin-top:4px;
  font-size:13px;
  line-height:1.6;
  opacity:.85;
  max-width:520px;
}

.ibp-cases-cta__meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.ibp-cases-cta__badge{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.06);
  white-space:nowrap;
}

.ibp-cases-cta__btn{
  font-size:13px;
  font-weight:900;
  padding:10px 14px;
  border-radius:999px;
  background:#119be3;
  color:#fff;
  white-space:nowrap;
  box-shadow: 0 10px 18px rgba(17,155,227,.18);
}

.ibp-cases-cta:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,.08); }
.ibp-cases-cta:hover .ibp-cases-cta__btn{ filter: brightness(1.03); }
.ibp-cases-cta:active{ transform: translateY(0px); }

@media (max-width: 520px){
  .ibp-cases-cta{
    flex-direction:column;
    align-items:stretch;
  }
  .ibp-cases-cta__meta{ justify-content:space-between; }
  .ibp-cases-cta__sub{ max-width: 100%; }
}

/* [IBP:UI] viewer gallery nav v1.1 */
.ibp-viewer__counter{
  position:absolute;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  min-width:88px;
  text-align:center;
  border:1px solid rgba(226,232,240,0.16);
  background:rgba(15,23,42,0.56);
  color:#e2e8f0;
  border-radius:999px;
  padding:8px 14px;
  font-size:0.82rem;
  font-weight:800;
  backdrop-filter:blur(8px);
}

.ibp-viewer__navBtn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:52px;
  height:52px;
  border:1px solid rgba(226,232,240,0.18);
  border-radius:999px;
  background:rgba(15,23,42,0.62);
  color:#e2e8f0;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(2,6,23,0.24);
}

.ibp-viewer__navBtn:hover{
  background:rgba(15,23,42,0.78);
}

.ibp-viewer__navBtn--prev{
  left:18px;
}

.ibp-viewer__navBtn--next{
  right:18px;
}

.ibp-viewer--gallery .ibp-viewer__navBtn{
  display:flex;
}

.ibp-viewer__navBtn.is-disabled,
.ibp-viewer__navBtn:disabled{
  opacity:.38;
  cursor:default;
  pointer-events:none;
}

@media (max-width: 767px){
  .ibp-viewer__navBtn{
    display:none !important;
  }
}


/*
  [IBP:UI] v1.0 | Home Welcome Modal (MVP)
  هدف: مودال خوش‌آمد سفید، برجسته، کم‌ریسک و قابل‌بستن
  Target: homepage فقط برای کاربر لاگین‌شده
*/
.ibp-home-welcome-data{display:none!important}
.ibp-home-welcome{position:fixed;inset:0;z-index:21010;display:grid;place-items:center;padding:18px;opacity:0;pointer-events:none;transition:opacity 220ms ease}
.ibp-home-welcome.is-open{opacity:1;pointer-events:auto}
.ibp-home-welcome__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(3px);z-index:0}
.ibp-home-welcome__dialog{position:relative;z-index:1;width:min(100%,560px);max-height:min(92vh,760px);margin:0 auto;overflow:hidden;border-radius:26px;background:#fff;box-shadow:0 28px 80px rgba(15,23,42,.20);transform:translateY(18px) scale(.98);transition:transform 220ms ease;direction:rtl}
.ibp-home-welcome.is-open .ibp-home-welcome__dialog{transform:translateY(0) scale(1)}
.ibp-home-welcome__body{padding:24px 24px 22px;text-align:center}
.ibp-home-welcome__avatarWrap{display:flex;justify-content:center;margin-bottom:14px}
.ibp-home-welcome__avatarRing{width:96px;height:96px;padding:4px;border-radius:999px;background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 45%,#7c3aed 100%);box-shadow:0 12px 28px rgba(37,99,235,.22);display:flex;align-items:center;justify-content:center}
.ibp-home-welcome__avatarImg,.ibp-home-welcome__avatarFallback{width:100%;height:100%;border-radius:999px;background:#f8fafc;display:flex;align-items:center;justify-content:center;object-fit:cover;color:#0f172a;font-size:30px;font-weight:800}
.ibp-home-welcome__title{font-size:22px;line-height:1.7;font-weight:800;color:#0f172a;margin-bottom:4px}
.ibp-home-welcome__title strong{font-weight:900}
.ibp-home-welcome__subtitle{font-size:16px;line-height:1.8;color:#334155;margin-bottom:14px}
.ibp-home-welcome__unread{padding:14px 16px;border-radius:18px;background:#f8fafc;border:1px solid rgba(37,99,235,.12);color:#0f172a;font-size:15px;line-height:1.9;font-weight:700;margin-bottom:14px}
.ibp-home-welcome__statsLead{margin:0 2px 10px;text-align:right;color:#475569;font-size:14px;line-height:1.8;font-weight:700}
.ibp-home-welcome__stats{list-style:disc;padding:0 20px 0 0;margin:0 0 16px;text-align:right;display:block}
.ibp-home-welcome__stat{margin:0 0 8px;padding:0;background:transparent;border:none;box-shadow:none;color:#0f172a;font-size:14px;line-height:2;font-weight:700}
.ibp-home-welcome__coin{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:22px;background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 45%,#7c3aed 100%);color:#fff;box-shadow:0 18px 36px rgba(37,99,235,.24);margin-bottom:0}
.ibp-home-welcome__coinLabel{font-size:13px;line-height:1.8;opacity:.94}
.ibp-home-welcome__coinValue{font-size:22px;line-height:1.5;font-weight:900}
.ibp-home-welcome__actions{display:none}
.ibp-home-welcome__closeBtn{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(15,23,42,.08);border-radius:999px;padding:0;background:#fff;color:#0f172a;font-size:24px;font-weight:700;line-height:1;box-shadow:0 10px 22px rgba(15,23,42,.10);cursor:pointer;transition:transform 180ms ease,box-shadow 180ms ease,background 180ms ease;z-index:2}
.ibp-home-welcome__closeBtn:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(15,23,42,.14);background:#f8fafc}
.ibp-home-welcome__closeBtn:active{transform:translateY(0)}
@media (max-width:640px){
  .ibp-home-welcome{padding:12px;place-items:center}
  .ibp-home-welcome__dialog{width:min(100%,360px);max-height:min(86vh,640px);border-radius:22px;overflow:auto}
  .ibp-home-welcome__body{padding:18px 14px 16px}
  .ibp-home-welcome__avatarWrap{margin-bottom:12px}
  .ibp-home-welcome__avatarRing{width:84px;height:84px}
  .ibp-home-welcome__title{font-size:18px}
  .ibp-home-welcome__subtitle{font-size:14px;margin-bottom:12px}
  .ibp-home-welcome__statsLead{font-size:13px;margin-bottom:8px}
  .ibp-home-welcome__unread,.ibp-home-welcome__stat{font-size:13px}
  .ibp-home-welcome__coin{padding:12px 14px;border-radius:18px}
  .ibp-home-welcome__coinLabel{font-size:12px;line-height:1.6}
  .ibp-home-welcome__coinValue{font-size:16px;line-height:1.35}
  .ibp-home-welcome__closeBtn{top:10px;right:10px;width:38px;height:38px;font-size:22px}
}

/*
  [IBP:UI] v3.9.1 | Provider card case-count badge + CTA alignment fix
  Scope: provider cards rendered by _provider_card_renderer.asp
  Reason:
    - Keep CTA buttons aligned at the bottom of same-row cards.
    - Do not move the empty space below the CTA.
    - Keep the service chips -> case-count -> CTA spacing compact and predictable.
  Reversible: remove this block or revert ui-system.css to the previous baseline.
*/
.providers-list-page .provider-published-cases,
.home-top-providers .provider-published-cases{
  margin: 6px 0 0;
  line-height: 1.55;
}

.providers-list-page .provider-published-cases-badge,
.home-top-providers .provider-published-cases-badge{
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(27,127,209,0.18);
  background: rgba(27,127,209,0.08);
  color: var(--ibp-primary);
  white-space: nowrap;
}

.providers-list-page .provider-summary,
.home-top-providers .provider-summary{
  margin-top: 6px;
  margin-bottom: 0;
}

.providers-list-page .provider-card-body,
.home-top-providers .provider-card-body{
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 4px;
}

.providers-list-page .provider-card-footer,
.home-top-providers .provider-card-footer{
  margin-top: auto;
  padding-top: 8px;
  padding-bottom: 10px;
}

.providers-list-page .provider-card-footer .ibp-card-cta,
.home-top-providers .provider-card-footer .ibp-card-cta{
  width: auto;
  min-width: 210px;
}

@media (max-width: 520px){
  .providers-list-page .provider-card-footer .ibp-card-cta,
  .home-top-providers .provider-card-footer .ibp-card-cta{
    width: 100%;
    min-width: 0;
  }
}



/* [IBP:UI] v4.0 | Home top providers horizontal slider + CTA center | Reversible: remove this block and restore /public/partials/_home_top_providers.asp */
.home-top-providers .provider-cards{
  display:flex;
  grid-template-columns:none;
  grid-auto-flow:unset;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 2px 18px;
  margin-inline:-2px;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:2px;
  -webkit-overflow-scrolling:touch;
}

.home-top-providers .provider-cards::-webkit-scrollbar{
  height:7px;
}

.home-top-providers .provider-cards::-webkit-scrollbar-track{
  background:rgba(226,232,240,0.72);
  border-radius:999px;
}

.home-top-providers .provider-cards::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg, rgba(14,165,233,0.75), rgba(30,158,141,0.78));
  border-radius:999px;
}

.home-top-providers .provider-card{
  flex:0 0 min(86vw, 360px);
  max-width:min(86vw, 360px);
  min-width:0;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

.home-top-providers .provider-card-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.home-top-providers .provider-card-footer .ibp-card-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.6;
  white-space:normal;
}

@media (min-width: 768px){
  .home-top-providers .provider-card{
    flex-basis:min(48vw, 360px);
    max-width:min(48vw, 360px);
  }
}

@media (min-width: 992px){
  .home-top-providers .provider-card{
    flex-basis:min(32vw, 372px);
    max-width:min(32vw, 372px);
  }
}

@media (max-width: 520px){
  .home-top-providers .provider-cards{
    gap:12px;
    padding-bottom:16px;
  }

  .home-top-providers .provider-card-footer .ibp-card-cta{
    width:100%;
    min-width:0;
  }
}


/* [IBP:UI] v4.1 | Home top provider card avatar layout + avatar modal | Reversible: remove this block and restore /public/partials/_home_top_providers.asp + /assets/js/ui-system.js */
.home-top-providers .provider-card-home-v2{
  cursor: default;
}

.home-top-providers .provider-card-header-home{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:16px 16px 10px;
}

.home-top-providers .provider-card-identity{
  flex:0 0 126px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.home-top-providers .provider-card-identity .provider-avatar-wrap{
  width:112px;
  height:112px;
  flex:0 0 112px;
  padding:0;
  border:3px solid rgba(27,127,209,0.20);
  border-radius:999px;
  background:var(--ibp-surface-2);
  box-shadow:0 18px 38px rgba(15,23,42,0.17);
  cursor:zoom-in;
  appearance:none;
  -webkit-appearance:none;
}

.home-top-providers .provider-card-identity .provider-avatar-wrap > img.provider-avatar{
  width:100%;
  height:100%;
  border-radius:999px;
  object-fit:cover;
  object-position:center center;
}

.home-top-providers .provider-identity-name{
  width:100%;
  min-width:0;
  margin-top:10px;
}

.home-top-providers .provider-identity-name h3{
  margin:0;
  max-width:100%;
  font-size:0.98rem;
  line-height:1.65;
  font-weight:950;
  color:var(--ibp-text);
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

.home-top-providers .provider-identity-name .badge-verified{
  vertical-align:middle;
}

.home-top-providers .provider-identity-name .provider-city{
  margin:3px 0 0;
  font-size:0.78rem;
  line-height:1.8;
  color:var(--ibp-muted);
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

.home-top-providers .provider-services-side{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  text-align:right;
  padding-top:4px;
}

.home-top-providers .provider-services-side .tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:8px;
  min-height:0;
}

.home-top-providers .provider-services-side .tag{
  max-width:100%;
}

.home-top-providers .provider-card-body-home{
  padding:0 16px 12px;
}

.home-top-providers .provider-card-body-home .provider-published-cases{
  text-align:center;
  margin-top:2px;
}

.ibp-provider-avatar-modal{
  position:fixed;
  inset:0;
  z-index:10080;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(2,6,23,0.78);
  backdrop-filter:blur(10px);
}

.ibp-provider-avatar-modal.is-open{
  display:flex;
}

.ibp-provider-avatar-modal__dialog{
  width:min(92vw, 620px);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.ibp-provider-avatar-modal__image{
  display:block;
  max-width:min(86vw, 560px);
  max-height:72vh;
  width:auto;
  height:auto;
  border-radius:32px;
  object-fit:contain;
  background:#ffffff;
  box-shadow:0 28px 90px rgba(0,0,0,0.42);
}

.ibp-provider-avatar-modal__close{
  min-height:44px;
  padding:10px 24px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,0.96);
  color:#0f172a;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,0.26);
}

@media (max-width:520px){
  .home-top-providers .provider-card-header-home{
    gap:10px;
    padding:14px 12px 8px;
  }

  .home-top-providers .provider-card-identity{
    flex-basis:116px;
  }

  .home-top-providers .provider-card-identity .provider-avatar-wrap{
    width:104px;
    height:104px;
    flex-basis:104px;
  }

  .home-top-providers .provider-services-side .tags{
    gap:6px;
  }

  .home-top-providers .provider-services-side .tag{
    font-size:0.72rem;
    min-height:26px;
    padding:0 8px;
  }

  .ibp-provider-avatar-modal{
    padding:18px;
  }

  .ibp-provider-avatar-modal__image{
    max-width:88vw;
    max-height:70vh;
    border-radius:26px;
  }
}


/* [IBP:UI] v4.2 | Home provider card merged name row | Reversible: remove this block and restore /public/partials/_home_top_providers.asp */
.home-top-providers .provider-card-home-v3 .provider-card-header-home{
  display:grid;
  grid-template-columns:126px minmax(0, 1fr);
  align-items:start;
  gap:14px;
  padding:16px 16px 8px;
}

.home-top-providers .provider-card-home-v3 .provider-card-identity{
  grid-column:1;
  flex:initial;
  width:126px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
}

.home-top-providers .provider-card-home-v3 .provider-services-side{
  grid-column:2;
  flex:initial;
  min-width:0;
  width:100%;
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  text-align:right;
  padding-top:4px;
}

.home-top-providers .provider-card-home-v3 .provider-card-body-home{
  padding:2px 16px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.home-top-providers .provider-card-home-v3 .provider-identity-name-wide{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0 2px;
  text-align:center;
}

.home-top-providers .provider-card-home-v3 .provider-identity-name-wide h3{
  margin:0;
  max-width:100%;
  color:var(--ibp-text);
  font-size:1rem;
  font-weight:950;
  line-height:1.8;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:normal;
  overflow-wrap:break-word;
}

.home-top-providers .provider-card-home-v3 .provider-identity-name-wide .provider-city{
  margin:2px 0 0;
  color:var(--ibp-muted);
  font-size:0.78rem;
  line-height:1.8;
  text-align:center;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

.home-top-providers .provider-card-home-v3 .provider-published-cases{
  margin:8px 0 0;
  text-align:center;
}

.home-top-providers .provider-card-home-v3 .provider-published-cases-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

@media (max-width:520px){
  .home-top-providers .provider-card-home-v3 .provider-card-header-home{
    grid-template-columns:116px minmax(0, 1fr);
    gap:10px;
    padding:14px 12px 8px;
  }

  .home-top-providers .provider-card-home-v3 .provider-card-identity{
    width:116px;
  }

  .home-top-providers .provider-card-home-v3 .provider-card-body-home{
    padding:2px 12px 12px;
  }

  .home-top-providers .provider-card-home-v3 .provider-identity-name-wide h3{
    font-size:0.96rem;
    line-height:1.75;
  }
}


/* [IBP:UI] v4.3 | Home provider equal service chips + stronger CTA | Reversible: remove this block */
.home-top-providers .provider-card-home-v3 .provider-services-side .tags{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;
}

.home-top-providers .provider-card-home-v3 .provider-services-side .tag:not(.more):not(.tag-more):not(.tag--more){
  flex:0 0 calc(50% - 4px);
  width:calc(50% - 4px);
  max-width:calc(50% - 4px);
  min-width:0;
  padding-inline:8px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.home-top-providers .provider-card-home-v3 .provider-services-side .tag.more,
.home-top-providers .provider-card-home-v3 .provider-services-side .tag-more,
.home-top-providers .provider-card-home-v3 .provider-services-side .tag--more{
  flex:0 0 auto;
  width:auto;
  min-width:42px;
  max-width:none;
  padding-inline:10px;
}

.home-top-providers .provider-card-home-v3 .provider-card-footer .ibp-card-cta{
  background:linear-gradient(135deg, #0369a1 0%, #0284c7 42%, #0f766e 100%);
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 16px 34px rgba(2,132,199,0.30), 0 7px 18px rgba(15,118,110,0.18);
  text-shadow:0 1px 0 rgba(15,23,42,0.20);
}

@media (hover:hover) and (pointer:fine){
  .home-top-providers .provider-card-home-v3 .provider-card-footer .ibp-card-cta:hover{
    background:linear-gradient(135deg, #075985 0%, #0369a1 42%, #0f766e 100%);
    box-shadow:0 20px 44px rgba(2,132,199,0.36), 0 9px 22px rgba(15,118,110,0.22);
    filter:none;
  }
}

.home-top-providers .provider-card-home-v3 .provider-card-footer .ibp-card-cta:active{
  background:linear-gradient(135deg, #075985 0%, #0369a1 46%, #115e59 100%);
  box-shadow:0 10px 24px rgba(2,132,199,0.28);
}

.home-top-providers .provider-card-home-v3 .provider-card-footer .ibp-card-cta:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(14,165,233,0.22), 0 18px 38px rgba(2,132,199,0.34);
}

@media (max-width:520px){
  .home-top-providers .provider-card-home-v3 .provider-services-side .tags{
    gap:6px;
  }

  .home-top-providers .provider-card-home-v3 .provider-services-side .tag:not(.more):not(.tag-more):not(.tag--more){
    flex-basis:calc(50% - 3px);
    width:calc(50% - 3px);
    max-width:calc(50% - 3px);
    padding-inline:6px;
  }

  .home-top-providers .provider-card-home-v3 .provider-services-side .tag.more,
  .home-top-providers .provider-card-home-v3 .provider-services-side .tag-more,
  .home-top-providers .provider-card-home-v3 .provider-services-side .tag--more{
    min-width:38px;
    padding-inline:8px;
  }
}








/* [IBP:UI] v4.7 | Home provider chips true vertical equal width | Reversible: remove this block */
.home-top-providers .provider-card-home-v3 .provider-services-side{
  overflow:visible;
  min-width:0;
  justify-content:flex-start;
  align-items:flex-start;
}

.home-top-providers .provider-card-home-v3 .provider-services-side .tags{
  display:inline-grid;
  grid-template-columns:max-content;
  grid-auto-flow:row;
  justify-items:stretch;
  align-items:start;
  gap:8px;
  width:max-content;
  max-width:100%;
  min-width:0;
  margin-inline-start:auto;
  margin-inline-end:0;
}

/* Override the older v4.3 calc(50%) rule with equal-or-higher specificity */
.home-top-providers .provider-card-home-v3 .provider-services-side .tag:not(.more):not(.tag-more):not(.tag--more),
.home-top-providers .provider-card-home-v3 .provider-services-side .tag:not(.tag-more):not([class*="more"]):not([class*="count"]):not([class*="extra"]){
  flex:none;
  justify-self:stretch;
  width:auto;
  min-width:max-content;
  max-width:none;
  box-sizing:border-box;
  min-height:30px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  word-break:keep-all;
  overflow-wrap:normal;
  line-height:1.45;
  text-align:center;
}

.home-top-providers .provider-card-home-v3 .provider-services-side .tag.more,
.home-top-providers .provider-card-home-v3 .provider-services-side .tag-more,
.home-top-providers .provider-card-home-v3 .provider-services-side .tag--more,
.home-top-providers .provider-card-home-v3 .provider-services-side .tag-count,
.home-top-providers .provider-card-home-v3 .provider-services-side .tag-extra,
.home-top-providers .provider-card-home-v3 .provider-services-side .tag[class*="more"],
.home-top-providers .provider-card-home-v3 .provider-services-side .tag[class*="count"],
.home-top-providers .provider-card-home-v3 .provider-services-side .tag[class*="extra"]{
  flex:none;
  justify-self:center;
  width:auto;
  min-width:46px;
  max-width:none;
  box-sizing:border-box;
  min-height:30px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  line-height:1.45;
  text-align:center;
}

@media (max-width:520px){
  .home-top-providers .provider-card-home-v3 .provider-services-side .tags{
    display:inline-grid;
    grid-template-columns:max-content;
    width:max-content;
    max-width:100%;
    gap:7px;
    margin-inline-start:auto;
  }

  .home-top-providers .provider-card-home-v3 .provider-services-side .tag:not(.more):not(.tag-more):not(.tag--more),
  .home-top-providers .provider-card-home-v3 .provider-services-side .tag:not(.tag-more):not([class*="more"]):not([class*="count"]):not([class*="extra"]){
    flex:none;
    justify-self:stretch;
    width:auto;
    min-width:max-content;
    max-width:none;
    padding:0 10px;
    white-space:nowrap;
    overflow:visible;
    text-overflow:clip;
  }

  .home-top-providers .provider-card-home-v3 .provider-services-side .tag.more,
  .home-top-providers .provider-card-home-v3 .provider-services-side .tag-more,
  .home-top-providers .provider-card-home-v3 .provider-services-side .tag--more,
  .home-top-providers .provider-card-home-v3 .provider-services-side .tag-count,
  .home-top-providers .provider-card-home-v3 .provider-services-side .tag-extra,
  .home-top-providers .provider-card-home-v3 .provider-services-side .tag[class*="more"],
  .home-top-providers .provider-card-home-v3 .provider-services-side .tag[class*="count"],
  .home-top-providers .provider-card-home-v3 .provider-services-side .tag[class*="extra"]{
    flex:none;
    justify-self:center;
    width:auto;
    min-width:46px;
    max-width:none;
    padding:0 10px;
    white-space:nowrap;
  }
}


/* [IBP:UI] v4.8 | Home provider mobile full-width cards | Reversible: remove this block */
@media (max-width: 520px){
  .home-top-providers .provider-cards{
    margin-inline:0;
    padding-inline:0;
    scroll-padding-inline:0;
  }

  .home-top-providers .provider-card{
    flex:0 0 100%;
    width:100%;
    max-width:100%;
  }
}


/* [IBP:UI] v4.9 | Home provider chips wrap + clearer card border | Reversible: remove this block */
.home-top-providers .provider-card-home-v3{
  border-color:rgba(27,127,209,0.34);
  box-shadow:
    0 22px 56px rgba(15,23,42,0.11),
    0 0 0 1px rgba(14,165,233,0.16);
}

.home-top-providers .provider-card-home-v3:hover{
  border-color:rgba(14,165,233,0.48);
  box-shadow:
    0 26px 64px rgba(15,23,42,0.14),
    0 0 0 1px rgba(14,165,233,0.22);
}

.home-top-providers .provider-card-home-v3 .provider-services-side .tags{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;
  width:100%;
  max-width:100%;
  margin-inline-start:0;
  margin-inline-end:0;
}

@media (max-width:520px){
  .home-top-providers .provider-card-home-v3{
    border-color:rgba(27,127,209,0.38);
    box-shadow:
      0 18px 48px rgba(15,23,42,0.12),
      0 0 0 1px rgba(14,165,233,0.18);
  }

  .home-top-providers .provider-card-home-v3 .provider-services-side .tags{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:flex-start;
    gap:7px;
    width:100%;
    max-width:100%;
    margin-inline-start:0;
  }
}


/* [IBP:UI] v4.12 | Home provider mobile font polish | Reversible: remove this block */
@media (max-width:520px){
  .home-top-providers .provider-card-home-v3 .provider-services-side .tag{
    font-size:0.86rem;
  }

  .home-top-providers .provider-card-home-v3 .provider-identity-name-wide h3{
    font-size:1.15rem;
  }

  .home-top-providers .provider-card-home-v3 .provider-identity-name-wide .provider-city{
    font-size:0.94rem;
  }

  .home-top-providers .provider-card-home-v3 .provider-published-cases-badge{
    font-size:0.86rem;
    min-height:31px;
    padding-inline:12px;
  }
}


/* [IBP:UI] Iteration 33 | Providers list canonical consultation CTA */
.providers-list-page .provider-card-footer{
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.providers-list-page .provider-card-footer .ibp-card-cta-consult,
.providers-list-page .provider-card-footer .ibp-card-cta-profile{
  flex: 1 1 150px;
  min-width: 0;
  padding-inline: 14px;
}

@media (min-width: 860px){
  .providers-list-page .provider-card-footer .ibp-card-cta-consult,
  .providers-list-page .provider-card-footer .ibp-card-cta-profile{
    flex: 0 1 auto;
  }
}


/* [IBP:UI] Iteration 34 | Home top providers canonical consultation CTA */
.home-top-providers .provider-card-home-v3 .provider-card-footer{
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.home-top-providers .provider-card-home-v3 .provider-card-footer .ibp-card-cta-consult,
.home-top-providers .provider-card-home-v3 .provider-card-footer .ibp-card-cta-profile{
  flex: 1 1 150px;
  min-width: 0;
  padding-inline: 14px;
}

@media (min-width: 860px){
  .home-top-providers .provider-card-home-v3 .provider-card-footer .ibp-card-cta-consult,
  .home-top-providers .provider-card-home-v3 .provider-card-footer .ibp-card-cta-profile{
    flex: 0 1 auto;
  }
}


/* =========================================================
   [IBP:UI] Iteration 40 | cases_list provider static compact header
   Scope: /public/cases_list.asp only
   Goal: visually match provider_profile.asp compact sticky header.
   Notes: fixed from first paint, always compact, no dynamic expand/collapse.
   ========================================================= */
.cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
  position: fixed;
  top: var(--cases-provider-header-top, 64px);
  left: 0;
  right: 0;
  z-index: 99;
  margin: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.10);
  padding: 8px 14px;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-main{
  min-width: 0;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-avatar-large{
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 999px;
  text-decoration: none;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-avatar-large img{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(14, 165, 233, 0.95);
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-title{
  min-width: 0;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-title h1{
  margin: 0 0 2px;
  font-size: 0.98rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cases-list-page .cases-provider-static-header__nameLink{
  color: inherit;
  text-decoration: none;
}

.cases-list-page .cases-provider-static-header__nameLink:hover{
  color: inherit;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-subtitle{
  margin: 0;
  max-height: 44px !important;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside,
.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-contact{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside .btn{
  min-height: 38px;
  padding: 8px 12px;
  font-size: 0.9rem;
  white-space: nowrap;
}

.cases-list-page .pub-cases__head--after-provider-sticky{
  margin-top: 18px;
}

@media (max-width: 820px){
  .cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
    top: var(--cases-provider-header-top-mobile, 58px);
    padding: 8px 12px;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-avatar-large{
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}

@media (max-width: 420px){
  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside{
    justify-content: flex-start;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside .btn{
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .cases-list-page .provider-profile-header.cases-provider-static-header,
  .cases-list-page .provider-profile-header.cases-provider-static-header *{
    transition: none !important;
  }
}

/* =========================================================
   [IBP:UI] Iteration 41 | cases_list provider header mobile one-row fit
   Scope: /public/cases_list.asp only
   Goal: on mobile, keep avatar/name/subtitle/CTA in a single compact row.
   Desktop/tablet remain unchanged.
   ========================================================= */
@media (max-width: 520px){
  .cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "ppMain ppCta" !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    min-height: 48px;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-main{
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: "avatar title" !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-avatar-large{
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-avatar-large img{
    border-width: 1.5px;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-title{
    min-width: 0 !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-title h1{
    font-size: 0.86rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0 !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .badge-verified{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    padding: 0 !important;
    margin-right: 4px !important;
    border-width: 1px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    transform: none !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-subtitle{
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside{
    width: auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside .btn{
    min-height: 34px !important;
    padding: 6px 9px !important;
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 360px){
  .cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
    gap: 4px !important;
    padding-inline: 6px !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-avatar-large{
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-title h1{
    font-size: 0.8rem !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-subtitle{
    font-size: 0.64rem !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside .btn{
    padding-inline: 7px !important;
    font-size: 0.7rem !important;
  }
}

/* =========================================================
   [IBP:UI] Iteration 42 | cases_list mobile sticky provider header offset
   Scope: /public/cases_list.asp only
   Goal: keep the static provider header exactly below the main site header on mobile,
         and reserve vertical space so content does not slide under it.
   Desktop remains unchanged.
   ========================================================= */
@media (max-width: 820px){
  .cases-list-page{
    --cases-provider-header-top-mobile: 72px;
    --cases-provider-static-mobile-height: 52px;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
    top: var(--cases-provider-header-top-mobile) !important;
  }

  .cases-list-page .pub-cases__head--after-provider-sticky{
    margin-top: calc(var(--cases-provider-static-mobile-height) + 18px) !important;
  }
}

@media (max-width: 520px){
  .cases-list-page{
    --cases-provider-static-mobile-height: 50px;
  }
}

/* =========================================================
   [IBP:UI] Iteration 46 | unify provider compact sticky headers
   Scope: provider_profile sticky header + cases_list static sticky provider header
   Goal: make cases_list static sticky header follow the same compact dimensions
         as provider_profile sticky mode, while the static badge size remains unchanged.
   ========================================================= */
.provider-profile-header.pp-compact-sticky .provider-profile-subtitle{
  max-height: 44px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.provider-profile-header.pp-compact-sticky:not(.cases-provider-static-header) .badge-verified{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  padding: 0 !important;
  margin-right: 4px !important;
  border-width: 1px !important;
  font-size: 0.62rem !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  transform: none !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
  padding: 10px 14px !important;
  gap: 12px !important;
  min-height: auto !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "ppMain ppCta" !important;
  align-items: center !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-main{
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas: "avatar title" !important;
  align-items: center !important;
  column-gap: 12px !important;
  min-width: 0 !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-avatar-large{
  width: 76px !important;
  height: 76px !important;
  flex: 0 0 76px !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-title h1{
  font-size: 1rem !important;
  line-height: 1.35 !important;
  margin: 0 0 2px !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-subtitle{
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside .btn{
  min-height: auto !important;
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
  line-height: 1.35 !important;
}

@media (max-width: 420px){
  .cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "ppMain"
      "ppCta" !important;
    row-gap: 10px !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside{
    justify-content: flex-end !important;
  }
}

/* =========================================================
   [IBP:UI] Iteration 47 | cases_list static provider header size correction
   Scope: /public/cases_list.asp only
   Reason: Iteration 46 matched compact classes but made the static bar visually taller than provider_profile sticky bar.
   Goal: keep provider_profile sticky improvements, but return cases_list static header to the compact one-row dimensions.
   ========================================================= */
.cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
  padding: 8px 14px !important;
  gap: 10px !important;
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "ppMain ppCta" !important;
  align-items: center !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-main{
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas: "avatar title" !important;
  align-items: center !important;
  column-gap: 8px !important;
  min-width: 0 !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-avatar-large{
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-title h1{
  font-size: 0.98rem !important;
  line-height: 1.35 !important;
  margin: 0 0 2px !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-subtitle{
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside{
  width: auto !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside .btn{
  min-height: 38px !important;
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

@media (max-width: 820px){
  .cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
    padding: 7px 10px !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-avatar-large{
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
}

@media (max-width: 520px){
  .cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "ppMain ppCta" !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    min-height: 48px !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-main{
    column-gap: 6px !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-avatar-large{
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-title h1{
    font-size: 0.86rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0 !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-subtitle{
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside .btn{
    min-height: 34px !important;
    padding: 6px 9px !important;
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 420px){
  .cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "ppMain ppCta" !important;
    row-gap: 0 !important;
  }
}

@media (max-width: 360px){
  .cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
    gap: 4px !important;
    padding-inline: 6px !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-avatar-large{
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-title h1{
    font-size: 0.8rem !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-subtitle{
    font-size: 0.64rem !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside .btn{
    padding-inline: 7px !important;
    font-size: 0.7rem !important;
  }
}

/* =========================================================
   [IBP:UI] Iteration 48 | exact visual parity for provider sticky headers
   Scope: cases_list static provider header only + shared compact badge sizing.
   Goal: cases_list static header uses the same compact bar dimensions as provider_profile sticky mode.
   ========================================================= */
.cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
  position: fixed !important;
  top: var(--cases-provider-header-top, 64px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "ppMain ppCta" !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 12px !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15,23,42,.12) !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 8px 28px rgba(15,23,42,.10) !important;
  backdrop-filter: saturate(1.2) blur(10px) !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-main{
  grid-area: ppMain !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-avatar-large{
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-avatar-large img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  border: 2px solid rgba(14,165,233,.95) !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-title{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-title h1{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #0f172a !important;
  font-size: .77rem !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  margin: 0 0 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .cases-provider-static-header__nameLink{
  color: inherit !important;
  text-decoration: none !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-subtitle{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #64748b !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  max-height: 18px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
  pointer-events: auto !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-meta,
.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-contact h2,
.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-contact ul{
  display: none !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside,
.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-contact{
  grid-area: ppCta !important;
  align-self: center !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-contact .btn,
.cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside .btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  width: clamp(150px, 18vw, 172px) !important;
  max-width: none !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: .74rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.cases-list-page .provider-profile-header.cases-provider-static-header .badge-verified,
.provider-profile-header.pp-compact-sticky .provider-profile-title h1 .badge-verified{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  padding: 0 !important;
  margin-inline-start: 2px !important;
  border-radius: 999px !important;
  border-width: 1px !important;
  font-size: .62rem !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  transform: none !important;
}

@media (max-width: 640px){
  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-title h1{
    font-size: .67rem !important;
    line-height: 1.16 !important;
    margin-bottom: 3px !important;
  }
}

@media (max-width: 420px){
  .cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "ppMain ppCta" !important;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-contact .btn,
  .cases-list-page .provider-profile-header.cases-provider-static-header .provider-profile-aside .btn{
    width: clamp(142px, 39vw, 156px) !important;
    max-width: none !important;
    min-height: 40px !important;
    padding: 0 9px !important;
    font-size: .68rem !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   [IBP:UI] Iteration 49 | cases_list service filter header polish
   Scope: /public/cases_list.asp only
   Goal: add breathing room below provider sticky header and make service filter title explicit.
   ========================================================= */
.cases-list-page .pub-cases__serviceFilter{
  margin-top: 30px !important;
  margin-bottom: 24px !important;
  padding: 16px 18px !important;
  align-items: flex-end !important;
  gap: 14px 18px !important;
}

.cases-list-page .pub-cases__serviceFilterHeader{
  flex: 1 1 100% !important;
  min-width: 0 !important;
  margin: 0 0 2px !important;
}

.cases-list-page .pub-cases__serviceFilterTitle{
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

.cases-list-page .pub-cases__serviceFilterSubtitle{
  margin: 4px 0 0 !important;
  color: #64748b !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}

.cases-list-page .pub-cases__serviceFilterField{
  flex: 1 1 260px !important;
  max-width: 360px !important;
}

.cases-list-page .pub-cases__serviceFilterLabel{
  color: #475569 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

@media (max-width: 820px){
  .cases-list-page .pub-cases__serviceFilter{
    margin-top: 28px !important;
    padding: 14px 14px !important;
  }
}

@media (max-width: 520px){
  .cases-list-page .pub-cases__serviceFilter{
    margin-top: 24px !important;
    padding: 14px 12px !important;
  }

  .cases-list-page .pub-cases__serviceFilterTitle{
    font-size: 1rem !important;
  }

  .cases-list-page .pub-cases__serviceFilterSubtitle{
    font-size: 0.78rem !important;
    line-height: 1.6 !important;
  }

  .cases-list-page .pub-cases__serviceFilterField{
    flex-basis: 100% !important;
    max-width: none !important;
  }
}


/* =========================================================
   [IBP:UI] Iteration 50 | cases_list static provider header top offset correction
   Scope: /public/cases_list.asp only
   Goal: keep the static provider header fully below the main site header on desktop and mobile.
   Revert: remove this block only.
   ========================================================= */
.cases-list-page{
  --cases-provider-header-top: 86px;
  --cases-provider-header-reserved-gap: 68px;
}

.cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
  top: var(--cases-provider-header-top) !important;
}

.cases-list-page .pub-cases__serviceFilter{
  margin-top: var(--cases-provider-header-reserved-gap) !important;
}

@media (max-width: 820px){
  .cases-list-page{
    --cases-provider-header-top-mobile: 96px;
    --cases-provider-header-top: var(--cases-provider-header-top-mobile);
    --cases-provider-header-reserved-gap: 74px;
  }

  .cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
    top: var(--cases-provider-header-top-mobile) !important;
  }
}

@media (max-width: 520px){
  .cases-list-page{
    --cases-provider-header-top-mobile: 96px;
    --cases-provider-header-reserved-gap: 72px;
  }
}


/* =========================================================
   [IBP:UI] Iteration 51 | cases_list static provider header measured offset
   Scope: /public/cases_list.asp only
   Reason: remove guessed top/margin numbers; JS measures the real site header and static provider bar heights.
   Revert: remove this block and the matching Iteration 51 block in assets/js/ui-system.js.
   ========================================================= */
.cases-list-page{
  --cases-provider-header-top: var(--ibp-site-header-height, 64px);
  --cases-provider-static-height: 56px;
  --cases-provider-filter-gap: 18px;
  --cases-provider-header-reserved-gap: calc(var(--cases-provider-static-height) + var(--cases-provider-filter-gap));
}

.cases-list-page .provider-profile-header.cases-provider-static-header.pp-compact-sticky{
  top: var(--cases-provider-header-top) !important;
}

.cases-list-page .pub-cases__serviceFilter{
  margin-top: var(--cases-provider-header-reserved-gap) !important;
}

@media (max-width: 820px){
  .cases-list-page{
    --cases-provider-filter-gap: 12px;
  }
}

@media (max-width: 520px){
  .cases-list-page{
    --cases-provider-filter-gap: 10px;
  }
}