﻿/* ============================================================
   booking-new.css — درمان داده — صفحه رزرو نوبت (/Patient/Booking)
   Spec: Primary #0d9488 / Bg #f8fafc / Surface #fff / Text #0f172a
   RTL / Vazirmatn / Pixel-perfect to screenshot
   ============================================================ */

:root{
  --bn-primary:#0d9488;
  --bn-primary-hover:#0f766e;
  --bn-primary-mist:#f0fdfa;
  --bn-primary-mist-strong:#ccfbf1;
  --bn-bg:#f8fafc;
  --bn-surface:#ffffff;
  --bn-border:#e2e8f0;
  --bn-border-soft:#f1f5f9;
  --bn-text:#0f172a;
  --bn-muted:#64748b;
  --bn-faint:#94a3b8;
  --bn-rating-bg:#fff7ed;
  --bn-rating-border:#fed7aa;
  --bn-rating-text:#9a3412;
  --bn-rating-star:#f59e0b;
  --bn-avail-bg:#ecfdf5;
  --bn-avail-border:#a7f3d0;
  --bn-avail-text:#065f46;
  --bn-footer-bg:#0b1522;
  --bn-footer-text:#94a3b8;
  --bn-footer-muted:#64748b;
  --bn-footer-border:rgba(148,163,184,.12);
  --bn-radius-xl:16px;
  --bn-radius-lg:12px;
  --bn-radius-md:10px;
  --bn-radius-pill:999px;
  --bn-shadow:0 4px 20px -2px rgba(0,0,0,.05);
  --bn-shadow-lg:0 8px 30px -6px rgba(0,0,0,.08);
  --bn-shadow-card:0 2px 12px rgba(15,23,42,.04);
}

/* ---------- body reset for this page ---------- */
/* رفع باگ: overflow-x:hidden از این‌جا حذف شد - همان دلیلِ توضیح داده‌شده در app.css
   (html{overflow-x:hidden})؛ جلوگیری از اسکرول افقی حالا سراسری و روی html انجام
   می‌شود، بدون این‌که body یک جعبه‌ی اسکرولِ اضافه بسازد و position:sticky را خراب کند. */
body.bn-body{
  background:var(--bn-bg);
  color:var(--bn-text);
  font-family:'Vazirmatn',system-ui,-apple-system,sans-serif;
}
.bn-body *{box-sizing:border-box}
.bn-body img{max-width:100%}
.bn-container{
  width:100%;
  max-width:1280px;
  margin-inline:auto;
  padding-inline:24px;
}
@media(max-width:640px){ .bn-container{padding-inline:16px} }

/* ---------- header (reuse hn-header but bn scoped) ---------- */
.bn-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--bn-border);
  height:68px;
  display:flex;
  align-items:center;
}
.bn-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
}
.bn-header__right{
  display:flex;
  align-items:center;
  gap:32px;
}
.bn-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--bn-text);
  flex-shrink:0;
}
.bn-brand__logo{
  width:42px;height:42px;
  border-radius:12px;
  background:linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
  display:grid;place-items:center;
  color:#fff;
  font-size:1.35rem;
  box-shadow:0 4px 14px -4px rgba(13,148,136,.4);
  flex-shrink:0;
}
.bn-brand__logo i{font-size:1.3rem}
.bn-brand__text{display:flex;flex-direction:column;line-height:1.1}
.bn-brand__name{font-weight:800;font-size:1.08rem;letter-spacing:-.02em;color:var(--bn-text)}
.bn-brand__sub{font-size:.62rem;font-weight:600;color:var(--bn-muted);letter-spacing:.01em;margin-top:2px}

.bn-nav{
  display:flex;
  align-items:center;
  gap:24px;
}
.bn-nav__link{
  position:relative;
  font-size:.88rem;
  font-weight:600;
  color:var(--bn-muted);
  text-decoration:none;
  padding:6px 0 8px;
  transition:color .16s ease;
  white-space:nowrap;
}
.bn-nav__link::after{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:-4px;
  height:2.5px;
  background:var(--bn-primary);
  border-radius:99px;
  transform:scaleX(0);
  transition:transform .18s ease;
}
.bn-nav__link:hover{color:var(--bn-text)}
.bn-nav__link:hover::after{transform:scaleX(1)}
.bn-nav__link--active{color:var(--bn-primary);font-weight:700}
.bn-nav__link--active::after{transform:scaleX(1)}

.bn-header__left{
  display:flex;
  align-items:center;
  gap:8px;
}
.bn-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-weight:700;
  font-size:.84rem;
  padding:.52rem 1rem;
  border-radius:var(--bn-radius-pill);
  border:1.5px solid transparent;
  text-decoration:none;
  white-space:nowrap;
  transition:all .15s ease;
  cursor:pointer;
  line-height:1;
}
.bn-btn--outline{background:#fff;border-color:var(--bn-border);color:var(--bn-text)}
.bn-btn--outline:hover{border-color:var(--bn-primary);color:var(--bn-primary);background:var(--bn-primary-mist)}
.bn-btn--primary{background:var(--bn-primary);border-color:var(--bn-primary);color:#fff;box-shadow:0 6px 16px -6px rgba(13,148,136,.45)}
.bn-btn--primary:hover{background:var(--bn-primary-hover);border-color:var(--bn-primary-hover);color:#fff;transform:translateY(-1px)}
.bn-btn--sm{padding:.44rem .9rem;font-size:.8rem}
.bn-btn:focus-visible{outline:3px solid rgba(13,148,136,.28);outline-offset:2px}
.bn-burger{
  display:none;
  width:40px;height:40px;
  border-radius:10px;
  border:1px solid var(--bn-border);
  background:#fff;
  color:var(--bn-text);
  font-size:1.2rem;
}
.bn-mobile{
  display:none;
  position:fixed;
  inset:68px 0 auto 0;
  background:#fff;
  border-top:1px solid var(--bn-border);
  box-shadow:var(--bn-shadow-lg);
  padding:16px 20px 20px;
  z-index:99;
}
.bn-mobile.open{display:block}
.bn-mobile a{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;border-bottom:1px solid var(--bn-border-soft);color:var(--bn-text);text-decoration:none;font-weight:600;font-size:.92rem}
.bn-mobile a:last-child{border-bottom:0}
.bn-mobile a i{color:var(--bn-faint)}
@media(max-width:1100px){
  .bn-nav{display:none}
  .bn-burger{display:grid;place-items:center}
  .bn-header__left .bn-btn--hide-sm{display:none !important}
}

/* ---------- hero ---------- */
.bn-hero{
  /* پس‌زمینه‌ی صفحه خنثی است؛ تنها باکس سرصفحه (bn-hero__head) رنگ برند دارد. */
  background:transparent;
  padding:48px 0 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.bn-hero::before{
  /* تینت‌های سبز پس‌زمینه حذف شد (درخواست کارفرما) */
  background:none;
}
.bn-hero__inner{position:relative;z-index:1}
.bn-hero__title{
  margin:0;
  font-size:clamp(1.6rem,3.2vw,2.15rem);
  font-weight:800;
  line-height:1.45;
  letter-spacing:-.02em;
  color:var(--bn-text);
}
.bn-hero__subtitle{
  margin:12px auto 0;
  max-width:720px;
  color:var(--bn-muted);
  font-size:.95rem;
  line-height:1.8;
}

/* ---------- search card (floating) ---------- */
.bn-searchwrap{
  margin-top:28px;
  padding-bottom:28px;
}
.bn-search-card{
  background:var(--bn-surface);
  border:1px solid var(--bn-border);
  border-radius:20px;
  box-shadow:var(--bn-shadow-lg);
  padding:20px;
}
.bn-search-grid{
  display:grid;
  grid-template-columns:1fr 1fr .85fr auto;
  gap:12px;
  align-items:end;
}
.bn-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.bn-field__label{
  font-size:.74rem;
  font-weight:700;
  color:var(--bn-muted);
  letter-spacing:.01em;
}
.bn-field__input{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--bn-bg);
  border:1.5px solid var(--bn-border);
  border-radius:12px;
  padding:0 12px;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.bn-field__input:focus-within{
  background:#fff;
  border-color:var(--bn-primary);
  box-shadow:0 0 0 3px rgba(13,148,136,.12);
}
.bn-field__input i{
  color:var(--bn-faint);
  font-size:1rem;
  flex-shrink:0;
}
.bn-field__input input{
  flex:1;min-width:0;
  border:0;outline:0;background:transparent;
  font:inherit;
  font-size:.88rem;
  color:var(--bn-text);
  padding:11px 0;
}
.bn-field__input input::placeholder{color:var(--bn-faint);font-size:.84rem}
.bn-btn-filter{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:#fff;
  border:1.5px solid var(--bn-border);
  border-radius:12px;
  padding:11px 18px;
  font-weight:700;
  font-size:.84rem;
  color:var(--bn-text);
  cursor:pointer;
  white-space:nowrap;
  transition:all .15s ease;
  height:44px;
}
.bn-btn-filter:hover{border-color:var(--bn-primary);color:var(--bn-primary);background:var(--bn-primary-mist)}
.bn-btn-search{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--bn-primary);
  border:1.5px solid var(--bn-primary);
  border-radius:12px;
  padding:11px 22px;
  font-weight:800;
  font-size:.88rem;
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
  transition:all .15s ease;
  height:44px;
  box-shadow:0 6px 16px -6px rgba(13,148,136,.4);
}
.bn-btn-search:hover{background:var(--bn-primary-hover);border-color:var(--bn-primary-hover);transform:translateY(-1px)}
.bn-quick{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
  padding-top:14px;
  border-top:1px solid var(--bn-border-soft);
}
.bn-quick__label{
  font-size:.78rem;
  font-weight:600;
  color:var(--bn-faint);
  white-space:nowrap;
}
.bn-pill{
  display:inline-flex;align-items:center;
  padding:6px 12px;
  border-radius:var(--bn-radius-pill);
  background:var(--bn-border-soft);
  border:1px solid transparent;
  color:var(--bn-muted);
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  transition:all .14s ease;
  text-decoration:none;
  white-space:nowrap;
}
.bn-pill:hover{background:#fff;border-color:var(--bn-border);color:var(--bn-text)}
.bn-pill--active{background:var(--bn-primary);border-color:var(--bn-primary);color:#fff}
.bn-pill--active:hover{background:var(--bn-primary-hover);color:#fff}

@media(max-width:1024px){
  .bn-search-grid{grid-template-columns:1fr 1fr;gap:12px}
  .bn-search-grid .bn-field:nth-child(3){grid-column:1 / -1}
  .bn-btn-search{width:100%}
  .bn-search-grid > .bn-btn-search{grid-column:1 / -1}
}
@media(max-width:640px){
  .bn-search-card{padding:16px;border-radius:16px}
  .bn-search-grid{grid-template-columns:1fr}
  .bn-search-grid .bn-field:nth-child(3){grid-column:1}
  .bn-search-grid > .bn-btn-search{grid-column:1}
  .bn-hero{padding:32px 0 0}
}

/* ---------- suggest dropdown for clinic typeahead ---------- */
.bn-suggest{
  position:absolute;
  inset-inline:0;
  top:calc(100% + 8px);
  background:var(--bn-surface);
  border:1px solid var(--bn-border);
  border-radius:12px;
  box-shadow:var(--bn-shadow-lg);
  z-index:20;
  overflow:hidden;
  max-height:280px;
  overflow-y:auto;
}
.bn-suggest[hidden]{display:none !important}
.bn-suggest__item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;
  font-size:.86rem;color:var(--bn-text);
  cursor:pointer;
  border-bottom:1px solid var(--bn-border-soft);
  transition:background .12s;
}
.bn-suggest__item:last-child{border-bottom:0}
.bn-suggest__item:hover,.bn-suggest__item.is-active{background:var(--bn-primary-mist)}
.bn-suggest__item small{color:var(--bn-muted);font-size:.76rem}
.bn-suggest__empty{padding:12px;color:var(--bn-muted);font-size:.82rem;text-align:center}

/* ---------- results header ---------- */
.bn-results{
  padding:28px 0 24px;
}
.bn-results__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--bn-border);
}
.bn-results__title{margin:0;font-size:1.05rem;font-weight:800;color:var(--bn-text)}
.bn-results__count{margin:4px 0 0;font-size:.82rem;color:var(--bn-muted)}
.bn-sortbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.bn-sortbar__label{font-size:.78rem;color:var(--bn-faint);font-weight:600;white-space:nowrap}
.bn-sort-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 12px;
  border-radius:var(--bn-radius-pill);
  font-size:.78rem;font-weight:700;
  cursor:pointer;
  border:1.5px solid var(--bn-border);
  background:#fff;
  color:var(--bn-muted);
  transition:all .14s ease;
  white-space:nowrap;
}
.bn-sort-pill:hover{border-color:var(--bn-primary);color:var(--bn-primary)}
.bn-sort-pill--active{background:var(--bn-primary-mist);border-color:var(--bn-primary);color:var(--bn-primary)}

@media(max-width:640px){
  .bn-results__head{flex-direction:column;align-items:flex-start}
}

/* ---------- clinic grid ---------- */
.bn-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
@media(max-width:1024px){ .bn-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .bn-grid{grid-template-columns:1fr} }

.bn-card{
  background:var(--bn-surface);
  border:1px solid var(--bn-border);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  box-shadow:var(--bn-shadow-card);
}
.bn-card:hover{transform:translateY(-3px);box-shadow:var(--bn-shadow-lg);border-color:rgba(13,148,136,.12)}
.bn-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 0;
}
.bn-card__icon{
  width:44px;height:44px;
  border-radius:12px;
  display:grid;place-items:center;
  font-size:1.2rem;
  flex-shrink:0;
  background:var(--bn-primary-mist);
  color:var(--bn-primary);
  border:1px solid var(--bn-primary-mist-strong);
}
.bn-card__icon--blue{background:#eff6ff;color:#2563eb;border-color:#dbeafe}
.bn-card__icon--amber{background:#fff7ed;color:#ea580c;border-color:#fed7aa}
.bn-card__icon--violet{background:#f5f3ff;color:#7c3aed;border-color:#ede9fe}
.bn-card__rating{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;
  border-radius:var(--bn-radius-pill);
  background:var(--bn-rating-bg);
  border:1px solid var(--bn-rating-border);
  font-size:.76rem;
  font-weight:700;
  color:var(--bn-rating-text);
  white-space:nowrap;
}
.bn-card__rating i{color:var(--bn-rating-star);font-size:.8rem}
.bn-card__rating small{font-weight:500;color:var(--bn-muted);margin-inline-start:2px}
.bn-card__body{padding:14px 16px 12px;display:flex;flex-direction:column;gap:8px;flex:1}
.bn-card__title{margin:0;font-size:.98rem;font-weight:800;color:var(--bn-text);line-height:1.4}
.bn-card__loc{
  display:flex;align-items:center;gap:4px;
  font-size:.78rem;color:var(--bn-muted);
  line-height:1.5;
}
.bn-card__loc i{font-size:.85rem;color:var(--bn-faint);flex-shrink:0}
.bn-card__tags{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:2px;
}
.bn-tag{
  display:inline-flex;align-items:center;
  padding:4px 8px;
  border-radius:6px;
  background:var(--bn-border-soft);
  border:1px solid transparent;
  color:var(--bn-muted);
  font-size:.72rem;
  font-weight:600;
  line-height:1;
}
.bn-card__avail{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bn-avail-bg);
  border:1px solid var(--bn-avail-border);
  border-radius:10px;
  padding:8px 10px;
  margin-top:6px;
}
.bn-card__avail-label{font-size:.72rem;color:var(--bn-avail-text);font-weight:600}
.bn-card__avail-time{
  font-size:.78rem;font-weight:800;color:var(--bn-avail-text);
  background:#fff;
  border:1px solid var(--bn-avail-border);
  border-radius:6px;
  padding:3px 8px;
}
.bn-card__cta{
  margin-top:10px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;
  padding:10px 14px;
  border-radius:10px;
  border:1.5px solid var(--bn-primary);
  background:#fff;
  color:var(--bn-primary);
  font-size:.84rem;font-weight:700;
  text-decoration:none;
  transition:all .15s ease;
}
.bn-card__cta:hover{background:var(--bn-primary);color:#fff;transform:translateY(-1px)}
.bn-card__cta i{font-size:.9rem}

/* vip variant */
.bn-card--vip{border-color:rgba(13,148,136,.14);background:linear-gradient(180deg, #f0fdfa 0%, #fff 28%)}
.bn-card--vip .bn-card__rating{background:#fff;border-color:var(--bn-rating-border)}

/* empty state */
.bn-empty{
  grid-column:1 / -1;
  text-align:center;
  padding:48px 24px;
  background:var(--bn-surface);
  border:1px dashed var(--bn-border);
  border-radius:16px;
  color:var(--bn-muted);
}
.bn-empty i{font-size:2rem;color:var(--bn-faint);display:block;margin-bottom:12px}
.bn-empty p{margin:0;font-size:.9rem;line-height:1.7}

/* ---------- footer dark ---------- */
.bn-footer{
  background:var(--bn-footer-bg);
  color:var(--bn-footer-text);
  margin-top:48px;
}
.bn-footer__inner{
  padding:48px 0 0;
}
.bn-footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
}
.bn-footer__brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;
  margin-bottom:14px;
}
.bn-footer__brand-logo{
  width:36px;height:36px;
  border-radius:10px;
  background:linear-gradient(135deg, #0d9488, #14b8a6);
  display:grid;place-items:center;
  color:#fff;
  font-size:1.1rem;
}
.bn-footer__brand-name{font-weight:800;font-size:1rem;color:#fff}
.bn-footer__desc{
  font-size:.82rem;
  line-height:1.9;
  color:var(--bn-footer-text);
  max-width:360px;
}
.bn-footer__col h4{
  margin:0 0 16px;
  font-size:.88rem;
  font-weight:800;
  color:#fff;
}
.bn-footer__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.bn-footer__col a{color:var(--bn-footer-text);text-decoration:none;font-size:.82rem;transition:color .14s}
.bn-footer__col a:hover{color:#fff}
.bn-footer__bottom{
  margin-top:36px;
  padding:16px 0;
  border-top:1px solid var(--bn-footer-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:.78rem;
  color:var(--bn-footer-muted);
}
.bn-footer__security{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--bn-footer-text);
}
.bn-footer__security i{color:#10b981}
@media(max-width:900px){
  .bn-footer__grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:600px){
  .bn-footer__grid{grid-template-columns:1fr}
  .bn-footer__bottom{flex-direction:column;align-items:flex-start}
}

/* ---------- filter collapse details ---------- */
.bn-filter-panel{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--bn-border-soft);
}
.bn-filter-panel .form-label{font-size:.78rem;font-weight:700;color:var(--bn-text)}
.bn-filter-panel .form-control,
.bn-filter-panel .form-select{
  border-radius:10px;
  border:1.5px solid var(--bn-border);
  font-size:.86rem;
  padding:.5rem .75rem;
}
.bn-filter-panel .form-control:focus,
.bn-filter-panel .form-select:focus{border-color:var(--bn-primary);box-shadow:0 0 0 3px rgba(13,148,136,.1)}

/* ---------- pagination tweaks ---------- */
.bn-pagination .page-link{border-radius:8px;margin:0 2px;border-color:var(--bn-border);color:var(--bn-text);font-weight:600;font-size:.84rem}
.bn-pagination .page-item.active .page-link{background:var(--bn-primary);border-color:var(--bn-primary);color:#fff}
.bn-pagination .page-link:hover{background:var(--bn-primary-mist);border-color:var(--bn-primary);color:var(--bn-primary)}

/* ---------- a11y ---------- */
@media(prefers-reduced-motion:reduce){
  .bn-card,.bn-btn,.bn-pill,.bn-sort-pill,.bn-card__cta{transition:none !important}
  .bn-card:hover{transform:none !important}
}
.bn-btn:focus-visible,.bn-pill:focus-visible,.bn-sort-pill:focus-visible,.bn-card__cta:focus-visible{outline:3px solid rgba(13,148,136,.28);outline-offset:2px}

/* =========================================================================
   سیستم فیلتر پیشرفته‌ی جستجو (Sidebar دسکتاپ / Bottom-Sheet موبایل)
   طراحی صرفاً از توکن‌های موجود پروژه (--bn-*) استفاده می‌کند - هیچ رنگ جدیدی
   اضافه نشده است. کل صفحه از قبل RTL است (dir="rtl" روی <html>)، پس فقط باید
   مطمئن شویم چیدمان/آیکون‌ها با جهت راست‌به‌چپ طبیعی باشند (نه اینکه دستی swap شوند).
   ========================================================================= */

/* --- چیدمان کلی: سایدبار + ستون نتایج (دسکتاپ) --- */
.bn-search-layout{
  display:grid;
  grid-template-columns:272px 1fr;
  gap:20px;
  align-items:start;
}
/* رفع باگ (بار سوم): تا این‌جا کل .bn-filters-col یک‌جا اسکرول می‌خورد - یعنی حتی
   هدر «فیلترها»/دکمه‌ی پاک‌کردن هم با بقیه بالا/پایین می‌رفتند. درست مثل خودِ Drawer
   موبایل (که هدر/فوترش با .bn-filter-drawer__header و __footer از بدنه‌ی اسکرول‌شونده
   جدا هستند)، این ستون الان به سه‌بخش تقسیم می‌شود: هدر ثابت، یک ناحیه‌ی میانیِ
   اسکرول‌پذیر (چیپ‌ها + همه‌ی آکاردئون‌ها - کلاس .bn-filters__scroll)، و دکمه‌ی «اعمال
   فیلتر» که همیشه ثابت و در دید پایین می‌ماند. سقفِ ارتفاعِ کل ستون هم‌چنان برابر
   viewport است تا هیچ‌وقت کل صفحه از زیر فوتر کشیده نشود؛ اما این‌بار فقط بخش میانی
   اسکرول‌بار می‌گیرد، نه کل باکس. */
.bn-filters-col{
  position:sticky; top:16px;
  max-height:calc(100vh - 32px);
  display:flex;
}
.bn-filters-col .bn-filters{
  display:flex; flex-direction:column;
  width:100%;
  min-height:0;
  overflow:hidden;
}
.bn-filters-col .bn-filters__head{flex:0 0 auto}
.bn-filters-col .bn-filters__scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-inline-end:4px;
  scrollbar-width:thin;
}
.bn-filters-col .bn-filters__scroll::-webkit-scrollbar{width:6px}
.bn-filters-col .bn-filters__scroll::-webkit-scrollbar-thumb{background:var(--bn-border); border-radius:99px}
.bn-filters-col .bn-filters__apply-wrap{flex:0 0 auto}
.bn-results-col{min-width:0}

@media(max-width:1100px){
  .bn-search-layout{grid-template-columns:240px 1fr; gap:16px}
}

/* زیر ۹۰۰px: سایدبار ثابت پنهان می‌شود و فقط از طریق Drawer/Bottom-Sheet در دسترس است */
@media(max-width:900px){
  .bn-search-layout{grid-template-columns:1fr}
  .bn-filters-col{display:none}
}

/* --- نوار ابزار موبایل: فیلترها / مرتب‌سازی / تعداد نتایج --- */
.bn-toolbar-mobile{
  display:none;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.bn-toolbar-mobile__btn{
  display:flex; align-items:center; gap:6px;
  padding:9px 14px;
  border:1.5px solid var(--bn-border);
  background:var(--bn-surface);
  border-radius:var(--bn-radius-pill);
  font-size:.82rem; font-weight:700; color:var(--bn-text);
  white-space:nowrap;
}
.bn-toolbar-mobile__btn i{color:var(--bn-primary)}
.bn-toolbar-mobile__btn .bn-filters__badge{margin-inline-start:2px}
.bn-toolbar-mobile__count{font-size:.78rem; color:var(--bn-muted); margin-inline-start:auto; white-space:nowrap}
@media(max-width:900px){ .bn-toolbar-mobile{display:flex} }

/* --- کارت اصلی فیلترها (هم داخل سایدبار، هم داخل Drawer) --- */
.bn-filters{
  background:var(--bn-surface);
  border:1px solid var(--bn-border);
  border-radius:var(--bn-radius-xl);
  box-shadow:var(--bn-shadow-card);
  padding:16px;
}
.bn-filters__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.bn-filters__head-title{
  display:flex; align-items:center; gap:8px;
  font-size:.92rem; font-weight:800; color:var(--bn-text);
}
.bn-filters__head-title i{color:var(--bn-primary)}
.bn-filters__badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:var(--bn-radius-pill);
  background:var(--bn-primary); color:#fff;
  font-size:.7rem; font-weight:800;
}
.bn-filters__clear{
  border:none; background:none; padding:0;
  color:var(--bn-primary); font-size:.8rem; font-weight:700;
  cursor:pointer;
}
.bn-filters__clear:hover{color:var(--bn-primary-hover); text-decoration:underline}

/* --- ردیف فیلترهای انتخاب‌شده (Chips) --- */
.bn-chips{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:14px; padding-bottom:14px;
  border-bottom:1px solid var(--bn-border-soft);
}
.bn-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  background:var(--bn-primary-mist);
  border:1px solid var(--bn-primary-mist-strong);
  color:var(--bn-primary-hover);
  border-radius:var(--bn-radius-pill);
  font-size:.76rem; font-weight:700;
  cursor:pointer;
  transition:background .15s, transform .15s;
}
.bn-chip:hover{background:var(--bn-primary-mist-strong)}
.bn-chip:active{transform:scale(.96)}
.bn-chip i{font-size:.85rem}
.bn-chip.bn-chip--removing{opacity:0; transform:scale(.85); transition:opacity .15s, transform .15s}

/* --- آکاردئون گروه‌های فیلتر (details/summary بومی - دسترسی‌پذیر و بدون JS اضافه) --- */
.bn-facc{
  border-top:1px solid var(--bn-border-soft);
  padding:10px 0;
}
.bn-facc:first-of-type{border-top:none; padding-top:0}
.bn-facc summary{
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; list-style:none;
  font-size:.85rem; font-weight:700; color:var(--bn-text);
  padding:4px 0;
}
.bn-facc summary::-webkit-details-marker{display:none}
.bn-facc summary::after{
  content:"\f282"; /* bootstrap-icons chevron-down */
  font-family:"bootstrap-icons";
  font-size:.8rem; color:var(--bn-faint);
  transition:transform .18s ease;
}
.bn-facc[open] summary::after{transform:rotate(180deg)}
.bn-facc__count{font-weight:600; color:var(--bn-faint); font-size:.78rem; margin-inline-start:6px}
.bn-facc__body{
  padding-top:10px;
  display:flex; flex-direction:column; gap:2px;
  animation:bnFaccIn .18s ease;
}
@keyframes bnFaccIn{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)} }
.bn-facc__empty{font-size:.78rem; color:var(--bn-faint); margin:4px 0}
.bn-facc__sublabel{font-size:.72rem; font-weight:700; color:var(--bn-faint); margin:6px 0 2px}
.bn-facc__scroll{overflow:visible}

/* --- هر لیستِ داخلیِ بالقوه‌بلند (نوع مرکز / تخصص / معیار امتیاز) داخل یک
   .bn-facc__list قرار می‌گیرد تا خودش سقف ارتفاع و اسکرول مستقل داشته باشد؛ بدون این،
   خودِ آن آکاردئون هم می‌تواند سایدبار را از ارتفاع صفحه بلندتر کند. */
.bn-facc__list{
  max-height:240px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-inline-end:4px;
}
.bn-facc__list::-webkit-scrollbar{width:6px}
.bn-facc__list::-webkit-scrollbar-thumb{background:var(--bn-border); border-radius:99px}
.bn-facc__search{
  position:relative; margin-bottom:8px;
}
.bn-facc__search i{
  position:absolute; inset-inline-start:10px; top:50%; transform:translateY(-50%);
  color:var(--bn-faint); font-size:.82rem;
}
.bn-facc__search input{
  width:100%; padding:8px 34px 8px 10px;
  border:1.5px solid var(--bn-border); border-radius:10px;
  font-size:.8rem; background:var(--bn-bg); color:var(--bn-text);
}
.bn-facc__search input:focus{border-color:var(--bn-primary); outline:none; box-shadow:0 0 0 3px rgba(13,148,136,.1)}

/* --- چک‌باکس/رادیوی مدرن سفارشی --- */
.bn-field-mini{display:block; margin-bottom:10px}
.bn-field-mini__label{display:block; font-size:.75rem; font-weight:700; color:var(--bn-muted); margin-bottom:4px}
.bn-field-mini input{
  width:100%; box-sizing:border-box;
  border:1.5px solid var(--bn-border); border-radius:10px;
  padding:9px 10px; font-size:.85rem; color:var(--bn-text); background:var(--bn-bg);
  transition:border-color .15s, background .15s;
}
.bn-field-mini input:focus{background:#fff; border-color:var(--bn-primary); outline:none}
.bn-filters__apply-wrap{margin-top:14px; padding-top:14px; border-top:1px solid var(--bn-border-soft)}
.bn-filters__apply{
  width:100%; border:none; border-radius:12px;
  background:var(--bn-primary); color:#fff;
  font-weight:800; font-size:.88rem; padding:12px; cursor:pointer;
  transition:background .15s;
}
.bn-filters__apply:hover{background:var(--bn-primary-hover)}
/* در Drawer موبایل، فوتر چسبانِ خودِ Drawer («نمایش X نتیجه») همین نقش را دارد - از
   تکرار دو دکمه‌ی اعمال‌کننده در یک صفحه جلوگیری می‌شود. */
.bn-filter-drawer__body .bn-filters__apply-wrap{display:none}
.bn-check{
  display:flex; align-items:center; gap:9px;
  padding:7px 6px; border-radius:8px; cursor:pointer;
  font-size:.82rem; color:var(--bn-text);
  transition:background .12s;
}
.bn-check:hover{background:var(--bn-bg)}
.bn-check input{position:absolute; opacity:0; width:1px; height:1px}
.bn-check__box{
  flex:0 0 auto; width:18px; height:18px;
  border:1.6px solid var(--bn-border); border-radius:5px;
  background:var(--bn-surface);
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .15s, background .15s;
}
.bn-check__box--radio{border-radius:50%}
.bn-check__box::after{
  content:""; width:9px; height:9px; border-radius:2px;
  background:#fff; transform:scale(0); transition:transform .12s;
}
.bn-check__box--radio::after{border-radius:50%; width:8px; height:8px}
.bn-check input:checked + .bn-check__box{background:var(--bn-primary); border-color:var(--bn-primary)}
.bn-check input:checked + .bn-check__box::after{transform:scale(1)}
.bn-check input:focus-visible + .bn-check__box{outline:3px solid rgba(13,148,136,.28); outline-offset:1px}
.bn-check__label{flex:1; min-width:0}
.bn-check__count{
  flex:0 0 auto; font-size:.72rem; font-weight:700; color:var(--bn-faint);
  background:var(--bn-bg); border-radius:var(--bn-radius-pill);
  padding:1px 8px;
}

/* --- سوییچ روشن/خاموش برای ویژگی‌های Toggle (محبوب/کمترین معطلی) --- */
.bn-toggle{
  display:flex; align-items:center; gap:10px;
  padding:8px 6px; border-radius:8px; cursor:pointer;
  font-size:.82rem; font-weight:600; color:var(--bn-text);
}
.bn-toggle:hover{background:var(--bn-bg)}
.bn-toggle input{position:absolute; opacity:0; width:1px; height:1px}
.bn-toggle__track{
  flex:0 0 auto; width:38px; height:22px; border-radius:99px;
  background:var(--bn-border); position:relative; transition:background .18s;
}
.bn-toggle__thumb{
  position:absolute; top:2px; inset-inline-start:2px;
  width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:inset-inline-start .18s ease;
}
.bn-toggle input:checked ~ .bn-toggle__track{background:var(--bn-primary)}
.bn-toggle input:checked ~ .bn-toggle__track .bn-toggle__thumb{inset-inline-start:18px}
.bn-toggle input:focus-visible ~ .bn-toggle__track{outline:3px solid rgba(13,148,136,.28); outline-offset:1px}

/* --- دکمه‌ی «انتخاب تخصص» + دیالوگِ پاپ‌آپِ جستجوپذیر (جایگزین آکاردئونِ قبلیِ تخصص) ---
   با کلیک روی دکمه، یک <dialog> بومی (showModal) باز می‌شود که همه‌ی تخصص‌ها را با یک
   فیلد جستجوی داخلی نشان می‌دهد؛ چک‌باکس‌های داخل دیالوگ همان name="specialtyIds" و
   form="..." قبلی را دارند، پس منطق موجودِ Mirror/Submit/Chip-removal بدون تغییر کار
   می‌کند. بعد از هر انتخاب، خلاصه‌ی تخصص(های) انتخاب‌شده زیر همین دکمه نمایش داده می‌شود. */
.bn-specialty-picker{display:flex; flex-direction:column; gap:8px}
.bn-specialty-picker__btn{
  display:flex; align-items:center; gap:8px;
  width:100%; padding:10px 12px;
  border:1.5px solid var(--bn-border); border-radius:12px;
  background:var(--bn-surface); color:var(--bn-text);
  font-size:.85rem; font-weight:700; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.bn-specialty-picker__btn:hover{border-color:var(--bn-primary); background:var(--bn-bg)}
.bn-specialty-picker__btn i:first-child{color:var(--bn-primary); font-size:.95rem}
.bn-specialty-picker__btn span{flex:1; text-align:right}
.bn-specialty-picker__badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:var(--bn-radius-pill);
  background:var(--bn-primary); color:#fff;
  font-size:.7rem; font-weight:800; flex:0 0 auto;
}
.bn-specialty-picker__selected{display:flex; flex-wrap:wrap; gap:6px}
.bn-specialty-picker__tag{
  display:inline-flex; align-items:center;
  padding:5px 10px;
  background:var(--bn-primary-mist);
  border:1px solid var(--bn-primary-mist-strong);
  color:var(--bn-primary-hover);
  border-radius:var(--bn-radius-pill);
  font-size:.74rem; font-weight:700;
}
.bn-specialty-picker__placeholder{font-size:.78rem; color:var(--bn-faint)}

.bn-specialty-dialog{
  border:none; padding:0; background:transparent;
  width:100%; max-width:480px;
  border-radius:20px; margin:auto;
}
.bn-specialty-dialog::backdrop{background:rgba(15,23,42,.45)}
.bn-specialty-dialog__sheet{
  display:flex; flex-direction:column;
  max-height:82vh;
  background:var(--bn-surface);
  border-radius:20px;
  box-shadow:var(--bn-shadow-lg);
  animation:bnSheetPop .18s ease;
}
@keyframes bnSheetPop{ from{opacity:0; transform:scale(.97)} to{opacity:1; transform:scale(1)} }
.bn-specialty-dialog__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 10px; border-bottom:1px solid var(--bn-border-soft);
}
.bn-specialty-dialog__header h3{margin:0; font-size:1rem; font-weight:800; color:var(--bn-text)}
.bn-specialty-dialog__close{
  width:32px; height:32px; border-radius:50%; border:none;
  background:var(--bn-bg); color:var(--bn-muted); font-size:1rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto;
}
.bn-specialty-dialog__search{position:relative; padding:12px 18px}
.bn-specialty-dialog__search i{
  position:absolute; inset-inline-start:30px; top:50%; transform:translateY(-50%);
  color:var(--bn-faint); font-size:.85rem;
}
.bn-specialty-dialog__search input{
  width:100%; box-sizing:border-box; padding:9px 36px 9px 12px;
  border:1.5px solid var(--bn-border); border-radius:10px;
  font-size:.85rem; background:var(--bn-bg); color:var(--bn-text);
}
.bn-specialty-dialog__search input:focus{border-color:var(--bn-primary); outline:none; box-shadow:0 0 0 3px rgba(13,148,136,.1)}
.bn-specialty-dialog__body{
  flex:1; overflow-y:auto; padding:0 18px 12px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.bn-specialty-dialog__body::-webkit-scrollbar{width:6px}
.bn-specialty-dialog__body::-webkit-scrollbar-thumb{background:var(--bn-border); border-radius:99px}
.bn-specialty-dialog__footer{
  display:flex; gap:10px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--bn-border-soft);
}
.bn-specialty-dialog__footer button{
  border-radius:12px; font-size:.86rem; font-weight:700;
  padding:10px 14px; border:1.5px solid var(--bn-border); cursor:pointer;
}
.bn-specialty-dialog__clear{background:var(--bn-surface); color:var(--bn-text); flex:0 0 auto}
.bn-specialty-dialog__apply{background:var(--bn-primary); border-color:var(--bn-primary); color:#fff; flex:1}
.bn-specialty-dialog__apply:hover{background:var(--bn-primary-hover)}
@media(max-width:560px){
  .bn-specialty-dialog{max-width:94vw}
  .bn-specialty-dialog__sheet{max-height:86vh}
}

/* --- Drawer موبایل (Bottom-Sheet تمام‌قد) --- */
.bn-filter-drawer{
  position:fixed; inset:0; z-index:1050;
  display:none;
}
.bn-filter-drawer.is-open{display:block}
.bn-filter-drawer__backdrop{
  position:absolute; inset:0;
  background:rgba(15,23,42,.45);
  animation:bnFadeIn .2s ease;
}
@keyframes bnFadeIn{ from{opacity:0} to{opacity:1} }
.bn-filter-drawer__sheet{
  position:absolute; inset-inline:0; bottom:0;
  max-height:88vh;
  background:var(--bn-surface);
  border-radius:20px 20px 0 0;
  box-shadow:var(--bn-shadow-lg);
  display:flex; flex-direction:column;
  animation:bnSheetUp .25s cubic-bezier(.2,.8,.3,1);
}
@keyframes bnSheetUp{ from{transform:translateY(100%)} to{transform:translateY(0)} }
.bn-filter-drawer__handle{
  width:40px; height:4px; border-radius:99px;
  background:var(--bn-border); margin:10px auto 2px;
}
.bn-filter-drawer__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px 12px; border-bottom:1px solid var(--bn-border-soft);
}
.bn-filter-drawer__header h3{margin:0; font-size:.98rem; font-weight:800; color:var(--bn-text)}
.bn-filter-drawer__close{
  width:32px; height:32px; border-radius:50%; border:none;
  background:var(--bn-bg); color:var(--bn-muted); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
}
.bn-filter-drawer__body{
  flex:1; overflow-y:auto; padding:14px 16px;
  -webkit-overflow-scrolling:touch;
}
.bn-filter-drawer__body .bn-filters{border:none; box-shadow:none; padding:0}
.bn-filter-drawer__body .bn-filters__head{display:none}
.bn-filter-drawer__footer{
  position:sticky; bottom:0;
  display:flex; gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--bn-surface);
  border-top:1px solid var(--bn-border-soft);
  box-shadow:0 -6px 16px -8px rgba(0,0,0,.08);
}
.bn-filter-drawer__footer button{
  border-radius:12px; font-size:.88rem; font-weight:700;
  padding:11px 14px; border:1.5px solid var(--bn-border); cursor:pointer;
}
.bn-filter-drawer__footer .bn-filter-drawer__reset{
  background:var(--bn-surface); color:var(--bn-text); flex:0 0 auto;
}
.bn-filter-drawer__footer .bn-filter-drawer__apply{
  background:var(--bn-primary); border-color:var(--bn-primary); color:#fff; flex:1;
  box-shadow:0 6px 16px -6px rgba(13,148,136,.45);
}
body.bn-drawer-open{overflow:hidden}

/* --- نوار پیشرفتِ سبک هنگام ارسال فرم (جایگزین Spinner تمام‌صفحه) --- */
.bn-topload{
  position:fixed; inset-inline:0; top:0; height:3px; z-index:2000;
  background:var(--bn-primary);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .3s ease;
}
[dir="rtl"] .bn-topload{transform-origin:right center}
.bn-topload.is-active{transform:scaleX(.75)}

/* --- خالی/پاک‌کردن فیلتر در حالت بدون نتیجه --- */
.bn-empty__actions{margin-top:10px; display:flex; justify-content:center}
.bn-empty__actions a{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:var(--bn-radius-pill);
  background:var(--bn-primary-mist); color:var(--bn-primary-hover);
  font-size:.82rem; font-weight:700;
}
.bn-empty__actions a:hover{background:var(--bn-primary-mist-strong)}

@media(prefers-reduced-motion:reduce){
  .bn-facc__body,.bn-filter-drawer__sheet,.bn-filter-drawer__backdrop,.bn-chip{animation:none !important; transition:none !important}
}

/* ============================================================
   حالت تاریک (Dark Mode) — /Patient/Booking در حالت بیمارِ لاگین‌شده
   این صفحه برای بیمارِ لاگین‌شده داخل _DashboardLayout رندر می‌شود و کلید تم،
   ویژگی data-bs-theme="dark" را روی <html> می‌گذارد؛ اما رنگ‌های این فایل برای
   نسخه‌ی عمومی (روشن) نوشته شده بود و هیچ override‌ای برای تم تاریک نداشت —
   نتیجه: کارت نتایج/پنل فیلترها سفید می‌ماندند. این بلاک ابتدا متغیرهای --bn-*
   را به پالت تاریکِ پروژه (app.css) وصل می‌کند و سپس چند رنگ هاردکدشده‌ی باقی‌مانده
   را اصلاح می‌کند.
   ============================================================ */
[data-bs-theme="dark"] {
    --bn-bg: var(--bg, #11151c);
    --bn-surface: var(--surface, #1b2029);
    --bn-border: var(--glass-border, #2b3140);
    --bn-border-soft: var(--ink-100, #242a37);
    --bn-text: var(--ink-900, #eef1f6);
    --bn-muted: var(--ink-500, #99a2b3);
    --bn-faint: var(--ink-500, #99a2b3);
    --bn-primary: #2bd49b;
    --bn-primary-hover: #4fe6b1;
    --bn-primary-mist: #0e2b22;
    --bn-primary-mist-strong: #113a2c;
    --bn-rating-bg: #3a2f0f;
    --bn-rating-border: #6b5720;
    --bn-rating-text: #ffcf6b;
    --bn-rating-star: #ffb648;
    --bn-avail-bg: #0e2b22;
    --bn-avail-border: #1f5b47;
    --bn-avail-text: #7ef0c6;
    --bn-shadow: 0 4px 20px -2px rgba(0,0,0,.5);
    --bn-shadow-lg: 0 8px 30px -6px rgba(0,0,0,.6);
    --bn-shadow-card: 0 2px 12px rgba(0,0,0,.4);
}

/* سطح‌هایی که رنگ سفید در آن‌ها مستقیم نوشته شده بود */
[data-bs-theme="dark"] .bn-btn--outline,
[data-bs-theme="dark"] .bn-burger,
[data-bs-theme="dark"] .bn-mobile,
[data-bs-theme="dark"] .bn-btn-filter,
[data-bs-theme="dark"] .bn-sort-pill,
[data-bs-theme="dark"] .bn-card__cta,
[data-bs-theme="dark"] .bn-card__avail-time,
[data-bs-theme="dark"] .bn-pill:hover,
[data-bs-theme="dark"] .bn-field__input:focus-within,
[data-bs-theme="dark"] .bn-field-mini input:focus {
    background: var(--bn-surface);
    color: var(--bn-text);
}
[data-bs-theme="dark"] .bn-card__cta { color: var(--bn-primary); }
[data-bs-theme="dark"] .bn-card__cta:hover { background: var(--bn-primary); color: #06231b; }
[data-bs-theme="dark"] .bn-sort-pill { color: var(--bn-muted); }
[data-bs-theme="dark"] .bn-card__avail-time { color: var(--bn-avail-text); }
[data-bs-theme="dark"] .bn-header { background: rgba(27,32,41,.96); }

/* هیرو و کارت VIP: گرادیان‌های روشن */
[data-bs-theme="dark"] .bn-hero {
    background: linear-gradient(180deg, #14241f 0%, #131d22 45%, var(--bn-bg) 100%);
}
[data-bs-theme="dark"] .bn-card--vip {
    background: linear-gradient(180deg, #14241f 0%, var(--bn-surface) 28%);
    border-color: #1f5b47;
}
[data-bs-theme="dark"] .bn-card--vip .bn-card__rating { background: var(--bn-rating-bg); }

/* آیکن‌های رنگی کارت‌ها */
[data-bs-theme="dark"] .bn-card__icon--blue   { background:#10263a; color:#7cc4ff; border-color:#1e3c57; }
[data-bs-theme="dark"] .bn-card__icon--amber  { background:#3a2c0f; color:#ffc46b; border-color:#6b5720; }
[data-bs-theme="dark"] .bn-card__icon--violet { background:#1c1f3a; color:#b7a7ff; border-color:#332e5c; }

/* ورودی‌ها و چک‌باکس‌های پنل فیلتر */
[data-bs-theme="dark"] .bn-field-mini input,
[data-bs-theme="dark"] .bn-field__input { background: var(--bn-bg); color: var(--bn-text); }
[data-bs-theme="dark"] .bn-field-mini input::placeholder,
[data-bs-theme="dark"] .bn-field__input input::placeholder { color: var(--bn-faint); }
[data-bs-theme="dark"] .bn-check__box { background: var(--bn-bg); border-color: var(--bn-border); }
[data-bs-theme="dark"] .bn-check__box::after { background: #06231b; }
[data-bs-theme="dark"] .bn-filters__apply,
[data-bs-theme="dark"] .bn-filter-drawer__footer .bn-filter-drawer__apply,
[data-bs-theme="dark"] .bn-pill--active,
[data-bs-theme="dark"] .bn-btn--primary { color: #06231b; }
[data-bs-theme="dark"] .bn-filter-drawer__sheet,
[data-bs-theme="dark"] .bn-filter-drawer__footer { background: var(--bn-surface); }
/* دیالوگ انتخاب تخصص */
[data-bs-theme="dark"] .bn-specialty-picker__btn,
[data-bs-theme="dark"] .bn-specialty-dialog__search input { background: var(--bn-bg); color: var(--bn-text); }
[data-bs-theme="dark"] .bn-specialty-dialog__apply { color: #06231b; }
[data-bs-theme="dark"] .bn-specialty-dialog::backdrop { background: rgba(0,0,0,.6); }

/* پنل جستجوی داشبورد بیمار (وقتی همین کارت جستجوی سایت عمومی داخل داشبورد رندر می‌شود) -
   بدون فاصله‌ی هیرو (چون این‌جا زیر هدر «رزرو نوبت جدید» است، نه بخش هیرو). */
.bn-searchwrap--dash{margin-top:0;padding-bottom:0;margin-bottom:1rem}

/* ----------------------------------------------------------------------------------------
   باکس سرصفحه‌ی «رزرو نوبت جدید» — هم‌سبک با کارت خوش‌آمد داشبورد بیمار
   (همان گرادیان برند، گوشه‌ی گرد ۲۲px، آیکون، هاله‌های شناور و سایه) تا عنوان و زیرعنوان
   به‌جای ماندن روی پس‌زمینه‌ی صفحه، داخل یک باکس مشخص دیده شوند.
   ---------------------------------------------------------------------------------------- */
.bn-hero__head{
    position:relative;
    overflow:hidden;
    max-width:820px;
    margin:0 auto 26px;
    border-radius:22px;
    padding:26px 30px;
    text-align:right;
    background:
        radial-gradient(circle at 12% -20%, rgba(255,255,255,.16), transparent 55%),
        radial-gradient(circle at 92% 130%, rgba(255,255,255,.12), transparent 55%),
        linear-gradient(135deg, var(--brand-600), #0b7285 85%);
    color:#fff;
    box-shadow:0 22px 50px -18px color-mix(in srgb, var(--brand-700) 55%, transparent);
}
.bn-hero__head::before,
.bn-hero__head::after{
    content:"";position:absolute;border-radius:50%;filter:blur(4px);
    background:rgba(255,255,255,.14);pointer-events:none;
}
.bn-hero__head::before{width:210px;height:210px;top:-85px;left:-55px}
.bn-hero__head::after{width:150px;height:150px;bottom:-65px;right:6%}
.bn-hero__head-row{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.bn-hero__head-avatar{
    width:52px;height:52px;border-radius:16px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
    font-size:1.35rem;
}
.bn-hero__head .bn-hero__title{color:#fff;font-size:clamp(1.25rem,2.4vw,1.7rem);margin:0 0 4px}
.bn-hero__head .bn-hero__subtitle{color:rgba(255,255,255,.9);margin:0;max-width:none;font-size:.9rem}
@media (max-width:640px){
    .bn-hero__head{padding:20px 18px;border-radius:18px;margin-bottom:18px}
    .bn-hero__head-avatar{width:44px;height:44px;font-size:1.15rem}
}

/* ============================================================================================
   رفع اسکرولِ کلِ دیالوگ «انتخاب تخصص» (صفحهٔ Booking):
   قابِ <dialog> و شیت هر دو قفل می‌شوند؛ فقط بدنهٔ فهرست (...__body) اسکرول می‌شود.
   علت: ‎<dialog>‎ در حالت modal با inset-block:0 تمام‌قدِ صفحه است و چون overflow آن
   صفر نشده بود، اگر محتوا بلندتر از قاب می‌شد، خودِ دیالوگ اسکرول می‌شد و هدر/سرچ/فوتر
   همراه اسکرول جابه‌جا می‌شدند. علاوه بر آن از dvh استفاده شده تا در مرورگرهای موبایل
   (که نوار آدرس ارتفاع را تغییر می‌دهد) قاب از صفحه بلندتر نشود.
   ============================================================================================ */
.bn-specialty-dialog {
    overflow: hidden;
    max-height: 92vh;
    max-height: 92dvh;
    padding: 0;
}

.bn-specialty-dialog__sheet {
    max-height: 92vh;
    max-height: 92dvh;
    overflow: hidden;
}

.bn-specialty-dialog__header,
.bn-specialty-dialog__search,
.bn-specialty-dialog__footer { flex: 0 0 auto; }

.bn-specialty-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 560px) {
    .bn-specialty-dialog__sheet { max-height: 92dvh; }
}

/* پنل سبز هیرو در صفحهٔ رزرو حذف شد (درخواست کاربر). */
.bn-hero__head { display: none !important; }
/* ============================================================================================
   فاصلهٔ «هدر → باکس جست‌وجو» در صفحهٔ رزرو: پس از حذف پنل هیرو، فاصلهٔ قبلی (۴۸px پدینگِ
   بخـش + ۲۸px مارجینِ باکس = ۷۶px) غیرمنطقی و خالی به نظر می‌رسید؛ حالا یک فاصلهٔ استاندارد.
   ============================================================================================ */
.bn-hero { padding: 22px 0 0 !important; }
.bn-searchwrap { margin-top: 0 !important; }
@media (max-width: 640px) {
    .bn-hero { padding: 16px 0 0 !important; }
}