/* =======================================================
   فونت اختصاصی یکان‌بخ (Yekan Bakh) - بارگذاری محلی آفلاین
   ======================================================= */
@font-face {
  font-family: 'Yekan Bakh';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/YekanBakh-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Yekan Bakh';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/YekanBakh-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Yekan Bakh';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/YekanBakh-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Yekan Bakh';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/YekanBakh-ExtraBold.woff2') format('woff2');
}

/* =======================================================
   سیستم طراحی اختصاصی پلامبز (Plumb's Design System 2026)
   ======================================================= */
:root {
  /* پالت رنگی رسمی و معتبر پلامبز (Plumb's Official Tokens) */
  --plumbs-navy: #0A2447;          /* سرمه‌ای نیمه‌شب نمادین پلامبز */
  --plumbs-navy-dark: #031227;     /* عمیق‌ترین سرمه‌ای هدر و پاورقی */
  --plumbs-navy-royal: #17285E;    /* سرمه‌ای سلطنتی کارت‌ها و دکمه‌ها */
  --plumbs-blue: #0590D5;          /* آبی پرایمری بالینی پلامبز */
  --plumbs-blue-dark: #0070A8;     /* آبی تیره برای دکمه‌های اکشن */
  --plumbs-cyan: #00CAE0;          /* فیروزه‌ای درخشان پلامبز */
  --plumbs-cyan-soft: #E6F7FC;     /* سطح نرم فیروزه‌ای برای کادرهای بالینی */
  
  --plumbs-ground: #F4F6FC;        /* پس‌زمینه شفاف، تمیز و کلینیکال وب‌سایت */
  --plumbs-card: #FFFFFF;          /* سفید خالص کارت‌های دارویی */
  --plumbs-border: #D0D7E8;        /* خطوط مرزی ملایم خاکستری-آبی */
  --plumbs-border-light: #E9EDF7;  /* خطوط جداکننده فرعی */

  --plumbs-text-dark: #0A2447;     /* رنگ تیترهای با کنتراست بالا */
  --plumbs-text-headings: #293040; /* رنگ عنوان‌های رده و بیماری */
  --plumbs-text-body: #404961;     /* رنگ متن توضیحات فارماکولوژی */
  --plumbs-text-muted: #7E8BA8;    /* رنگ متون کمکی و برچسب‌ها */

  --plumbs-gold: #FFB140;          /* زرد کهربایی نکات کلیدی نسخه‌نویسی */
  --plumbs-gold-dark: #F7941E;     /* کهربایی تیره هشدارهای احتیاط */
  --plumbs-gold-soft: #FFFDF5;     /* پس‌زمینه کادر نکته کلیدی نسخه‌نویس */

  --plumbs-red: #FF084B;           /* قرمز زنده هشدارهای مرگبار و CPR */
  --plumbs-red-dark: #CC0946;      /* قرمز تیره تداخلات ماژور */
  --plumbs-red-soft: #FFF0F3;      /* پس‌زمینه کادرهای اخطار کشنده */

  --plumbs-green: #55983A;         /* سبز بالینی پلامبز برای تایید و ایمنی */
  --plumbs-green-dark: #447C27;    /* سبز تیره دوزهای ایمن */
  --plumbs-green-soft: #EDF7ED;    /* پس‌زمینه وضعیت‌های بدون خطر */

  /* سایه‌های ارگونومیک پلامبز (Plumb's Ergonomic Shadows) */
  --plumbs-shadow-card: rgba(10, 36, 71, 0.06) 0px 4px 20px, rgba(10, 36, 71, 0.02) 0px 1px 4px;
  --plumbs-shadow-hover: rgba(10, 36, 71, 0.12) 0px 12px 30px, rgba(5, 144, 213, 0.14) 0px 0px 16px;
  --plumbs-shadow-header: rgba(3, 18, 39, 0.25) 0px 4px 24px;
  --plumbs-shadow-button: rgba(5, 144, 213, 0.25) 0px 3px 14px;

  /* هماهنگی با توکن‌های سیستم قبلی جهت سازگاری کامل */
  --primary-color: var(--plumbs-navy);
  --accent-teal: var(--plumbs-cyan);
  --accent-blue: var(--plumbs-blue);
  --danger-rose: var(--plumbs-red);
  --warning-amber: var(--plumbs-gold-dark);
  --success-green: var(--plumbs-green);
  --stitch-surface-ground: var(--plumbs-ground);
  --stitch-surface-card: var(--plumbs-card);
  --stitch-radius-lg: 20px;
  --stitch-radius-xl: 28px;
  --stitch-radius-full: 9999px;
  --stitch-transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

html, body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, p, span, div, a, label {
  font-family: 'Vazirmatn', 'Yekan Bakh', 'YekanBakh', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  font-family: 'Vazirmatn', 'Yekan Bakh', 'YekanBakh', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  box-sizing: border-box;
}

/* =======================================================
   حل ریشه‌ای وارونگی و چرخش پرانتزها و متون ترکیبی فارسی/انگلیسی (BiDi)
   ======================================================= */
.latin-text, [dir="ltr"] {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: left;
  display: inline-block;
}

bdi, .bdi-isolate {
  unicode-bidi: isolate !important;
}

.en-paren {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block;
  white-space: nowrap;
}

body {
  direction: rtl;
  text-align: right;
  background-color: var(--plumbs-ground);
  color: var(--plumbs-text-headings);
  overflow-x: hidden;
  padding-bottom: 70px; /* فضای شناور ناوبری موبایل */
}

@media (min-width: 640px) {
  body {
    padding-bottom: 24px;
  }
}

/* اسکرول‌بار شیک کلینیکال */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #E9EDF7;
}
::-webkit-scrollbar-thumb {
  background: #ABB5CD;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--plumbs-blue);
}

/* استایل کدهای لاتین، فرمول‌ها و دوزها */
.latin-text, .dose-val, .mono-code {
  direction: ltr !important;
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* =======================================================
   برچسب‌ها و نشان‌های بالینی پلامبز (Plumb's Clinical Badges)
   ======================================================= */
.badge-purple {
  background-color: #F3EEFB;
  color: #5B21B6;
  border: 1px solid #D8C7F8;
}
.badge-blue {
  background-color: var(--plumbs-cyan-soft);
  color: var(--plumbs-blue-dark);
  border: 1px solid #B2E7F7;
}
.badge-green {
  background-color: var(--plumbs-green-soft);
  color: var(--plumbs-green-dark);
  border: 1px solid #C7E9C7;
}
.badge-red {
  background-color: var(--plumbs-red-soft);
  color: #C50638;
  border: 1px solid #FFCCD6;
}
.badge-gold {
  background-color: var(--plumbs-gold-soft);
  color: #B45309;
  border: 1px solid #FDE68A;
}

/* انیمیشن تپش نبض اورژانس و CPR */
@keyframes heartPulse {
  0% { transform: scale(1); }
  14% { transform: scale(1.08); }
  28% { transform: scale(1); }
  42% { transform: scale(1.08); }
  70% { transform: scale(1); }
}

.cpr-pulse {
  animation: heartPulse 1.2s infinite ease-in-out;
}

/* لایه مات پشت مودال‌های پلامبز */
.modal-overlay {
  backdrop-filter: blur(12px);
  background-color: rgba(10, 36, 71, 0.82);
}

/* =======================================================
   کارت‌های مونوگراف دارویی به سبک پلامبز (Plumb's Drug Cards)
   ======================================================= */
.drug-card {
  transition: all 0.24s var(--stitch-transition-smooth);
  border-radius: var(--stitch-radius-lg);
  border: 1.5px solid var(--plumbs-border);
  background: var(--plumbs-card);
  box-shadow: var(--plumbs-shadow-card);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
}
.drug-card * {
  box-sizing: border-box;
  max-width: 100%;
}
.drug-card:hover {
  transform: translateY(-3px);
  border-color: var(--plumbs-blue);
  box-shadow: var(--plumbs-shadow-hover);
}

/* کادر اختصاصی نکته کلیدی نسخه‌نویس پلامبز (Plumb's Prescriber Highlights) */
.plumbs-prescriber-box {
  background-color: var(--plumbs-gold-soft);
  border: 1px solid #FDE68A;
  border-right: 4px solid var(--plumbs-gold);
  border-radius: 14px;
  color: #78350F;
  padding: 10px 14px;
  line-height: 1.6;
}

/* کادر دوز سریع پلامبز (Plumb's Quick Dosing Box) */
.plumbs-dosing-box {
  background-color: var(--plumbs-ground);
  border: 1px solid var(--plumbs-border);
  border-radius: 16px;
  padding: 12px 14px;
}

/* سطوح شیشه‌ای پلامبز (Plumb's Frosted Surfaces) */
.stitch-glass {
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(208, 215, 232, 0.7);
}

.stitch-glass-dark {
  background: rgba(10, 36, 71, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 202, 224, 0.2);
}

/* =======================================================
   ناوبری شناور پایینی موبایل به سبک پلامبز (Mobile Bottom Dock)
   ======================================================= */
.stitch-floating-dock {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 480px;
  background: rgba(10, 36, 71, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 202, 224, 0.28);
  border-radius: 28px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 20px 40px -10px rgba(3, 18, 39, 0.6), 0 0 20px 0 rgba(0, 202, 224, 0.25);
  z-index: 45;
  transition: all 0.3s var(--stitch-transition-smooth);
}

.stitch-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #ABB5CD;
  font-size: 10px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 18px;
  transition: all 0.18s ease;
  cursor: pointer;
  border: none;
  background: transparent;
  text-decoration: none;
}
.stitch-dock-item:hover, .stitch-dock-item:active, .stitch-dock-item.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}
.stitch-dock-item.active {
  color: var(--plumbs-cyan);
  background: rgba(0, 202, 224, 0.18);
  box-shadow: 0 0 14px rgba(0, 202, 224, 0.35);
}

/* نشانگر میانبر کیبورد */
.stitch-kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  background: #E9EDF7;
  border: 1px solid var(--plumbs-border);
  color: var(--plumbs-text-body);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* چیپ‌های فیلتر سریع به سبک پلامبز */
.stitch-chip {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.2s var(--stitch-transition-smooth);
  cursor: pointer;
  border: 1.5px solid var(--plumbs-border);
  background: #ffffff;
  color: var(--plumbs-text-body);
}
.stitch-chip:hover {
  background: var(--plumbs-ground);
  border-color: var(--plumbs-blue);
  color: var(--plumbs-blue);
  transform: translateY(-1px);
}
.stitch-chip.active {
  background: var(--plumbs-navy);
  color: #ffffff;
  border-color: var(--plumbs-cyan);
  box-shadow: 0 4px 14px rgba(10, 36, 71, 0.25), 0 0 0 1px var(--plumbs-cyan);
}

/* دکمه‌های کپسولی رده‌های درمانی */
.thcat-pill {
  transition: all 0.2s var(--stitch-transition-smooth);
  border: 1.5px solid var(--plumbs-border);
  background: #ffffff;
  color: var(--plumbs-text-body);
}
.thcat-pill:hover {
  background: var(--plumbs-ground);
  border-color: var(--plumbs-blue);
  color: var(--plumbs-blue);
  transform: translateY(-1px);
}
.thcat-pill.active {
  background: var(--plumbs-navy) !important;
  color: #ffffff !important;
  border-color: var(--plumbs-cyan) !important;
  box-shadow: 0 4px 14px rgba(10, 36, 71, 0.25), 0 0 0 1px var(--plumbs-cyan) !important;
}
.thcat-pill.active .count-badge {
  background-color: rgba(0, 202, 224, 0.3) !important;
  color: #ffffff !important;
}

/* دکمه اسکرول به بالا */
#scrollTopBtn {
  position: fixed;
  bottom: 80px;
  left: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--plumbs-navy);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px -5px rgba(10, 36, 71, 0.4);
  border: 1.5px solid rgba(0, 202, 224, 0.4);
  cursor: pointer;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s var(--stitch-transition-smooth);
}
#scrollTopBtn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#scrollTopBtn:hover {
  background: var(--plumbs-blue);
  border-color: var(--plumbs-cyan);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 28px -5px rgba(5, 144, 213, 0.45);
}

@media (min-width: 640px) {
  #scrollTopBtn {
    bottom: 24px;
  }
}

/* لمس و بازخورد دکمه‌ها */
.stitch-btn-tactile {
  transition: all 0.15s ease;
}
.stitch-btn-tactile:active {
  transform: scale(0.96);
}

/* =======================================================
   موتور پرینت نسخه رسمی و استاندارد دامپزشکی (Print Engine)
   ======================================================= */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm 12mm 12mm 12mm;
  }

  body {
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 11pt !important;
  }

  /* پنهان‌سازی عناصر غیرضروری هنگام چاپ */
  header,
  footer,
  section,
  main,
  #calculatorModal,
  #monographModal,
  #interactionsModal,
  #syringeCompatibilityModal,
  #cprModal,
  #cocktailsModal,
  #chaptersRoadmapModal,
  #therapeuticAtlasModal,
  #mobileBottomDock,
  #scrollTopBtn,
  .no-print {
    display: none !important;
  }

  #prescriptionPrintModal {
    position: static !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
    backdrop-filter: none !important;
  }

  #prescriptionPrintModal > div {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  #prescriptionPrintSheet {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }

  /* خطوط و جداول با کنتراست بالا برای پرینترهای درمانگاهی */
  .rx-print-border {
    border: 1.5px solid #0A2447 !important;
  }
  .rx-print-border-b {
    border-bottom: 1.5px solid #0A2447 !important;
  }
  .rx-print-border-t {
    border-top: 1.5px solid #0A2447 !important;
  }
  .rx-print-table {
    width: 100% !important;
    border-collapse: collapse !important;
  }
  .rx-print-table th,
  .rx-print-table td {
    border: 1px solid #334155 !important;
    padding: 5px 8px !important;
    font-size: 10pt !important;
  }
  .rx-print-table th {
    background-color: #f1f5f9 !important;
    color: #0A2447 !important;
    font-weight: 800 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .rx-watermark {
    opacity: 0.08 !important;
  }
}


/* =======================================================
   سیستم نمادها و آیکون‌های سه‌بعدی بالینی (3D Tactile Icons System)
   جایگزین دائمی استیکرهای ساده متنی با عمق، گرادیان و هایلایت نوری
   ======================================================= */
.icon-3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  position: relative;
  transition: all 0.22s var(--stitch-transition-smooth);
  box-shadow: 0 4px 10px -2px rgba(10, 36, 71, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1.5px 2px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  flex-shrink: 0;
  vertical-align: middle;
}
.icon-3d:hover {
  transform: translateY(-1.5px) scale(1.06);
  box-shadow: 0 8px 16px -2px rgba(10, 36, 71, 0.35), inset 0 1px 1.5px rgba(255, 255, 255, 0.7);
}

.icon-3d-cyan {
  background: linear-gradient(135deg, #00E5FF 0%, #00A3AD 60%, #0070A8 100%);
  box-shadow: 0 4px 12px rgba(0, 202, 224, 0.45), inset 0 1px 1.5px rgba(255, 255, 255, 0.75);
}
.icon-3d-blue {
  background: linear-gradient(135deg, #38BDF8 0%, #0590D5 60%, #0284C7 100%);
  box-shadow: 0 4px 12px rgba(5, 144, 213, 0.4), inset 0 1px 1.5px rgba(255, 255, 255, 0.7);
}
.icon-3d-navy {
  background: linear-gradient(135deg, #214595 0%, #17285E 60%, #0A2447 100%);
  box-shadow: 0 4px 12px rgba(10, 36, 71, 0.4), inset 0 1px 1.5px rgba(255, 255, 255, 0.4);
}
.icon-3d-rose {
  background: linear-gradient(135deg, #FF3366 0%, #FF084B 60%, #CC0946 100%);
  box-shadow: 0 4px 12px rgba(255, 8, 75, 0.45), inset 0 1px 1.5px rgba(255, 255, 255, 0.7);
}
.icon-3d-amber {
  background: linear-gradient(135deg, #FFB140 0%, #F7941E 60%, #D97706 100%);
  box-shadow: 0 4px 12px rgba(247, 148, 30, 0.45), inset 0 1px 1.5px rgba(255, 255, 255, 0.75);
}
.icon-3d-emerald {
  background: linear-gradient(135deg, #34D399 0%, #10B981 60%, #059669 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45), inset 0 1px 1.5px rgba(255, 255, 255, 0.7);
}
.icon-3d-purple {
  background: linear-gradient(135deg, #C084FC 0%, #9333EA 60%, #6B21A8 100%);
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.45), inset 0 1px 1.5px rgba(255, 255, 255, 0.7);
}
.icon-3d-indigo {
  background: linear-gradient(135deg, #818CF8 0%, #6366F1 60%, #4338CA 100%);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45), inset 0 1px 1.5px rgba(255, 255, 255, 0.7);
}

/* =======================================================
   منوی حاشیه‌ای ابزارهای بالینی (Clinical Margin Side Drawer)
   به سبک ناوبری حاشیه‌ای VetCalculators
   ======================================================= */
/* =======================================================
   منوی دائمی سمت راست (Permanent Right Clinical Navigation Sidebar)
   طراحی مدرن بالینی بر اساس استانداردهای نرم‌افزارهای دسکتاپ و VetCalculators
   ======================================================= */
#clinicalSidebarDrawer {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  width: 18rem; /* 288px */
}
#clinicalSidebarDrawer.open {
  transform: translateX(0) !important;
}
#clinicalSidebarBackdrop {
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
#clinicalSidebarBackdrop.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@media (min-width: 1024px) {
  #clinicalSidebarDrawer {
    transform: translateX(0) !important;
  }
  #mainContentWrapper {
    margin-right: 18rem !important; /* 288px */
  }
}

/* =======================================================
   سایدبار کشویی رده‌های درمانی سمت چپ (Left Categories Drawer)
   طراحی شده بر اساس الگوی سایدبار سریع VetCalculators
   ======================================================= */
#categoriesSidebarDrawer {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
#categoriesSidebarDrawer.open {
  transform: translateX(0) !important;
}
#categoriesSidebarBackdrop {
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
#categoriesSidebarBackdrop.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* =======================================================
   کادر آیکون‌های سه‌بعدی و المان‌های ناوبری (3D Icon Tiles & Frames)
   قاب شکیل، مینیمال و سه‌بعدی برای جلوگیری از پخش‌بودن آیکون‌ها
   ======================================================= */
.icon-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem; /* 26px */
  height: 1.625rem;
  border-radius: 0.5rem; /* rounded-lg */
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 2.5px;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.icon-frame-sm {
  width: 1.375rem; /* 22px */
  height: 1.375rem;
  border-radius: 0.375rem;
  padding: 2px;
}

.icon-frame-md {
  width: 1.875rem; /* 30px */
  height: 1.875rem;
  border-radius: 0.625rem;
  padding: 3px;
}

.icon-frame-lg {
  width: 2.5rem; /* 40px */
  height: 2.5rem;
  border-radius: 0.75rem;
  padding: 4px;
}

.icon-frame-xl {
  width: 3.25rem; /* 52px */
  height: 3.25rem;
  border-radius: 1rem;
  padding: 6px;
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* وقتی دکمه یا تب فعال یا پس‌زمینه تیره است */
.active .icon-frame,
button.active .icon-frame,
.stitch-chip.active .icon-frame,
.univ-sp-btn.active .icon-frame,
.bg-slate-900 .icon-frame,
.bg-teal-600 .icon-frame,
.bg-indigo-600 .icon-frame,
.bg-rose-600 .icon-frame {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 1px 0.5px rgba(255, 255, 255, 0.4) !important;
}

/* هاور بر روی دکمه‌ها افکت ملایم روی کادر آیکون ایجاد می‌کند */
button:hover .icon-frame,
a:hover .icon-frame {
  transform: scale(1.06);
  border-color: rgba(203, 213, 225, 1);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
}

/* فیلترهای کاملاً تایپوگرافیک و مینیمال گونه‌ها و منبع دارو (بدون استیکر و بدون دایره) */
.species-pill, .cat-pill {
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
}
.species-pill:hover, .cat-pill:hover {
  border-color: #94a3b8;
}
.species-pill.active, .cat-pill.active {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2) !important;
}