/* ============================================================
   Components — buttons, badges, cards, forms
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 20px; border-radius: var(--r-md);
  font-family: var(--f-head); font-weight: 700; font-size: .97rem;
  border: 1px solid transparent; transition: all var(--t-fast); white-space: nowrap;
}
.btn:active { transform: scale(.975); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--primary); color: #fff; box-shadow: var(--sh-btn); }
.btn--primary:hover { background: var(--primary-600); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(8, 145, 178, .34); }
.btn--accent { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(22, 163, 74, .28); }
.btn--accent:hover { background: var(--accent-600); transform: translateY(-2px); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #0B4744; transform: translateY(-2px); }
.btn--ghost { background: var(--surface); color: var(--primary-700); border-color: var(--border); }
.btn--ghost:hover { background: var(--primary-050); border-color: var(--primary); }
.btn--soft { background: var(--primary-050); color: var(--primary-700); border-color: var(--primary-100); }
.btn--soft:hover { background: var(--primary-100); }
.btn--line { background: transparent; color: var(--fg-2); border-color: var(--border); }
.btn--line:hover { background: var(--surface); color: var(--primary-700); }
.btn--danger { background: var(--danger-050); color: var(--danger); border-color: #FECACA; }
.btn--sm { min-height: 38px; font-size: .88rem; padding: 0 14px; border-radius: var(--r-sm); }
.btn--xs { min-height: 32px; font-size: .8rem; padding: 0 11px; border-radius: var(--r-xs); gap: 6px; }
.btn--lg { min-height: 56px; font-size: 1.05rem; padding: 0 30px; border-radius: var(--r-lg); }
.btn--block { width: 100%; }
.btn--icon { min-width: 46px; padding: 0; position: relative; }

.icon-btn {
  width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--fg-2); transition: all var(--t-fast);
}
.icon-btn:hover { color: var(--primary-700); border-color: var(--primary); background: var(--primary-050); }

.cart-dot {
  position: absolute; top: -6px; inset-inline-end: -6px; min-width: 22px; height: 22px; padding-inline: 5px;
  border-radius: var(--r-pill); background: var(--accent); color: #fff;
  font-size: .74rem; font-weight: 800; display: grid; place-items: center; font-family: var(--f-head);
}

/* ---------- badges & chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill);
  font-size: .76rem; font-weight: 700; font-family: var(--f-head); line-height: 1.7;
}
.badge--free { background: var(--accent-050); color: var(--accent-600); border: 1px solid #BBF7D0; }
.badge--paid { background: #FFF7ED; color: #B45309; border: 1px solid #FED7AA; }
.badge--new { background: var(--primary-050); color: var(--primary-700); border: 1px solid var(--primary-100); }
.badge--soon { background: var(--muted); color: var(--fg-3); border: 1px solid var(--border-2); }
.badge--hot { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.badge--own { background: var(--accent); color: #fff; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border); color: var(--fg-2);
  font-size: .85rem; font-weight: 600; transition: all var(--t-fast); cursor: pointer;
}
.chip:hover { border-color: var(--primary); color: var(--primary-700); transform: translateY(-2px); }
.chip.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip--static { cursor: default; }
.chip--static:hover { transform: none; border-color: var(--border); color: var(--fg-2); }

.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-xs); background: var(--surface-2); border: 1px solid var(--border-2);
  color: var(--fg-3);
}

/* specialty pills */
.sp { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 700; font-family: var(--f-head); }
.sp--med { background: var(--med-050); color: #0E7490; }
.sp--pharm { background: var(--pharm-050); color: #15803D; }
.sp--dent { background: var(--dent-050); color: #6D28D9; }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden;
}
.card__pad { padding: var(--sp-5); }
.card--hover { transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med); }
.card--hover:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: var(--primary-100); }
.panel { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-xl); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--sh-1); }

/* ---------- rating ---------- */
.stars { display: inline-flex; align-items: center; gap: 2px; color: #EAB308; }
.stars .ic { width: 15px; height: 15px; }
.stars b { color: var(--fg); font-size: .85rem; margin-inline-start: 6px; font-family: var(--f-head); }
.rate-row { display: inline-flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--fg-3); }
.rate-bar { height: 8px; border-radius: var(--r-pill); background: var(--muted); overflow: hidden; }
.rate-bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--primary); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-family: var(--f-head); font-weight: 700; font-size: .9rem; color: var(--fg); }
.field .hint { font-size: .8rem; color: var(--fg-3); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 11px 15px; border-radius: var(--r-md);
  background: var(--surface); border: 1.5px solid var(--border); color: var(--fg); transition: all var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: #9FBDB9; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-050); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.7; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%); background-position: calc(0% + 16px) 50%, calc(0% + 21px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-inline-start: 40px; }
.search-box { position: relative; flex: 1; min-width: 220px; }
.search-box .ic { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; }
.search-box .input { padding-inline-start: 44px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; font-weight: 600; }
.switch input { position: absolute; opacity: 0; }
.switch .track { width: 46px; height: 26px; border-radius: var(--r-pill); background: var(--muted); position: relative; transition: background var(--t-fast); flex: none; }
.switch .track::after { content: ''; position: absolute; inset-inline-start: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform var(--t-fast); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(-20px); }
.check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.check input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--primary); }

/* ---------- progress ---------- */
.progress { height: 9px; border-radius: var(--r-pill); background: var(--muted); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width var(--t-med); }
.progress--ring { width: 64px; height: 64px; position: relative; background: none; }
.donut { transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.donut .bg { stroke: var(--muted); }
.donut .fg { stroke: var(--accent); transition: stroke-dashoffset var(--t-med); }
.donut-val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-head); font-weight: 800; font-size: .85rem; }

/* ---------- avatar ---------- */
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--primary-050); color: var(--primary-700); font-family: var(--f-head); font-weight: 800; font-size: .9rem;
  border: 2px solid #fff; box-shadow: var(--sh-1);
}
.avatar--md { width: 54px; height: 54px; font-size: 1.05rem; }
.avatar--lg { width: 74px; height: 74px; font-size: 1.35rem; }
.avatar--a { background: var(--pharm-050); color: #15803D; }
.avatar--b { background: var(--dent-050); color: #6D28D9; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--border-2); overflow-x: auto; }
.tab {
  padding: 12px 18px; font-family: var(--f-head); font-weight: 700; font-size: .95rem;
  color: var(--fg-3); border-bottom: 3px solid transparent; margin-bottom: -1.5px; transition: all var(--t-fast); white-space: nowrap;
}
.tab:hover { color: var(--primary-700); }
.tab.is-on { color: var(--primary-700); border-bottom-color: var(--primary); }

/* ---------- accordion ---------- */
.acc { border: 1px solid var(--border-2); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.acc__i + .acc__i { border-top: 1px solid var(--border-2); }
.acc__h {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: start;
  font-weight: 700; font-family: var(--f-head); font-size: .97rem; transition: background var(--t-fast);
}
.acc__h:hover { background: var(--surface-2); }
.acc__h .ic { transition: transform var(--t-med); color: var(--fg-3); }
.acc__i.is-open .acc__h { background: var(--primary-050); color: var(--primary-700); }
.acc__i.is-open .acc__h .ic { transform: rotate(180deg); }
.acc__b { display: none; padding: 4px 16px 14px; }
.acc__i.is-open .acc__b { display: block; animation: fadeUp .3s both; }
.acc__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-050); color: var(--primary-700); font-size: .78rem; font-family: var(--f-head); font-weight: 800; flex: none; }

/* ---------- modal & drawer ---------- */
.backdrop { position: fixed; inset: 0; background: rgba(6, 46, 43, .5); backdrop-filter: blur(3px); z-index: 100; animation: fadeIn .2s both; }
.modal-wrap { position: fixed; inset: 0; z-index: 101; display: grid; place-items: center; padding: var(--sp-4); overflow-y: auto; }
.modal {
  width: min(660px, 100%); background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-3);
  animation: pop .26s both; max-height: 92vh; display: flex; flex-direction: column;
}
.modal--wide { width: min(940px, 100%); }
.modal__h { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-2); }
.modal__h h3 { flex: 1; }
.modal__b { padding: var(--sp-5); overflow-y: auto; }
.modal__f { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border-2); display: flex; gap: 10px; justify-content: flex-end; background: var(--surface-2); flex-wrap: wrap; }

.drawer-wrap { position: fixed; inset: 0; z-index: 101; }
.drawer {
  position: fixed; top: 0; inset-inline-end: 0; height: 100%; width: min(430px, 94vw); background: var(--surface);
  box-shadow: var(--sh-3); display: flex; flex-direction: column; animation: slideIn .26s both;
}
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: none; } }
[dir='rtl'] .drawer { animation-name: slideInRtl; }
@keyframes slideInRtl { from { transform: translateX(100%); } to { transform: none; } }
.drawer__h { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-2); }
.drawer__h h3 { flex: 1; }
.drawer__b { flex: 1; overflow-y: auto; }
.drawer__f { border-top: 1px solid var(--border-2); padding: var(--sp-4) var(--sp-5); background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; }

/* ---------- toast ---------- */
.toast-wrap { position: fixed; inset-block-end: 24px; inset-inline-start: 50%; transform: translateX(50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
[dir='rtl'] .toast-wrap { transform: translateX(50%); }
.toast {
  display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff;
  padding: 13px 22px; border-radius: var(--r-md); box-shadow: var(--sh-3); font-weight: 600; font-size: .93rem;
  animation: fadeUp .26s both; max-width: min(440px, 92vw);
}
.toast--ok { background: var(--accent-600); }
.toast--err { background: var(--danger); }
.toast--warn { background: var(--warn); }
.toast .ic { width: 19px; height: 19px; }

/* ---------- skeleton ---------- */
.sk { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--muted) 25%, #F4FAF9 37%, var(--muted) 63%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.sk--line { height: 13px; margin-bottom: 9px; }
.sk--w60 { width: 60%; } .sk--w80 { width: 80%; } .sk--w40 { width: 40%; }
.sk--block { height: 172px; border-radius: var(--r-lg); }
.sk--art { aspect-ratio: 16/9; border-radius: var(--r-lg); }
.spinner { width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.spinner--dark { border-color: var(--border); border-top-color: var(--primary); }

/* ---------- empty state ---------- */
.empty { text-align: center; padding: clamp(2rem, 5vw, 3.5rem) var(--sp-4); }
.empty__ic { width: 76px; height: 76px; margin: 0 auto var(--sp-4); border-radius: 24px; display: grid; place-items: center; background: var(--primary-050); color: var(--primary); }
.empty h3 { margin-bottom: 8px; }
.empty p { max-width: 46ch; margin-inline: auto; }

/* ---------- table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface); }
.table th, .table td { padding: 13px 16px; text-align: start; font-size: .92rem; }
.table thead th { background: var(--surface-2); font-family: var(--f-head); font-weight: 700; color: var(--fg); border-bottom: 1px solid var(--border-2); white-space: nowrap; }
.table tbody tr + tr td { border-top: 1px solid var(--border-2); }
.table tbody tr:hover td { background: var(--primary-050); }

/* ---------- breadcrumb ---------- */
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .86rem; color: var(--fg-3); margin-bottom: var(--sp-4); }
.crumbs a { color: var(--fg-3); }
.crumbs a:hover { color: var(--primary-700); }
.crumbs .ic { width: 15px; height: 15px; }

/* ---------- stat tile ---------- */
.stat { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border-2); box-shadow: var(--sh-1); }
.stat b { font-family: var(--f-head); font-size: 1.7rem; color: var(--primary-700); line-height: 1.2; }
.stat span { font-size: .84rem; color: var(--fg-3); }
.stat__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-050); color: var(--primary-700); margin-bottom: 6px; }