/* ==========================================================================
   SYCOOP — أسعار الأدوية في السعودية
   نظام التصميم: أزرق TEBEOS (موحَّد مع لوحة التحكم) + كبسولة كإشارة بصرية متكررة
   ========================================================================== */

:root{
  /* ألوان — موحَّدة مع نظام ألوان تطبيق TEBEOS (assets/css/tebeos.css) لتطابق لوحة التحكم مع التطبيق */
  --primary:        #2A75C6;
  --primary-dark:   #1F5FA3;
  --primary-light:  #E8F1FC;
  --accent:         #FF9800;
  --accent-dark:    #EF6C00;
  --bg:             #F0F0F0;
  --surface:        #FFFFFF;
  --ink:            #222222;
  --muted:          #666666;
  --border:         #B9C7D3;
  --gold:           #FFB300;
  --danger:         #D32F2F;
  --ok:             #43A047;

  /* طباعة — Vazirmatn للعربية، Roboto للنصوص الإنكليزية الصريحة (راجع assets/css/tebeos.css) */
  --font-display: 'Vazirmatn', 'Roboto', sans-serif;
  --font-body: 'Vazirmatn', 'Roboto', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius-pill: 999px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --shadow-sm: 0 2px 8px rgba(42,117,198,.06);
  --shadow-md: 0 10px 30px rgba(42,117,198,.10);
  --shadow-lg: 0 20px 50px rgba(31,95,163,.16);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  direction: rtl;
  text-align: right;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
input, select, textarea{font-family:inherit;}
:focus-visible{outline: 3px solid var(--gold); outline-offset: 2px;}

.container{
  width:100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

h1,h2,h3,h4{ font-family: var(--font-display); font-weight:800; color: var(--primary-dark); }

/* ===================== شريط علوي تنبيهي ===================== */
.top-alert{
  background: var(--primary-dark);
  color: #fff;
  font-size: .82rem;
  text-align:center;
  padding: 8px 16px;
  letter-spacing:.2px;
}
.top-alert strong{ color: #FFD9C9; font-weight:700; }

/* ===================== الهيدر ===================== */
.site-header{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index:50;
}
.header-row{
  display:flex; align-items:center; gap:28px;
  padding: 16px 0;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-weight:800; font-size:1.35rem;
  color: var(--primary-dark);
  flex-shrink:0;
  /* الشعار الآن اسم لاتيني (SYCOOP) بدل "دواء سعر" العربي — يجب تثبيت اتجاهه LTR صراحةً
     وإلا يعكس محرك Bidi ترتيب أجزائه (الأيقونة/SY/COOP) داخل حاوية الصفحة RTL. */
  direction: ltr;
}
/* ألوان SYCOOP موحَّدة مع الصفحة الرئيسية (landing): SY داكن و COOP أخضر — لا البرتقالي العام لـ .text-accent. */
.login-card .logo{ color:#12241d; }
.logo .text-accent{ color:#1e7d5c; }
/* على خلفية الشريط الجانبي الزرقاء الداكنة الأخضر الداكن لا يُقرأ — نفس الأخضر أفتح. */
.admin-sidebar .logo .text-accent, .acc-sidebar .logo .text-accent{ color:#5fd3a0; }
/* شعار التطبيق نفسه (نفس صورة أيقونة المستودع) بجانب SYCOOP. */
.logo .capsule-mark{
  width:40px; height:40px; border-radius:8px;
  background:#fff url("../img/sycoop-logo-sm.png") center / contain no-repeat;
  box-shadow: var(--shadow-sm);
  flex-shrink:0;
}
.header-search{
  flex:1;
  display:flex; align-items:center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 6px;
}
.header-search input{
  flex:1; border:none; background:transparent; padding: 10px 18px;
  font-size: .95rem; color: var(--ink);
}
.header-search button{
  background: var(--primary);
  color:#fff; font-weight:700; font-size:.88rem;
  padding: 10px 22px; border-radius: var(--radius-pill);
  display:flex; align-items:center; gap:6px;
  transition:.2s background;
}
.header-search button:hover{ background: var(--primary-dark); }

.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.btn-ghost{
  border:1.5px solid var(--primary); color:var(--primary);
  padding: 9px 18px; border-radius: var(--radius-pill); font-weight:700; font-size:.85rem;
  transition:.2s all;
}
.btn-ghost:hover{ background:var(--primary); color:#fff; }
.btn-solid{
  background: var(--accent); color:#fff;
  padding: 9px 18px; border-radius: var(--radius-pill); font-weight:700; font-size:.85rem;
  transition:.2s all;
}
.btn-solid:hover{ background: var(--accent-dark); }
.btn-gold{
  background: var(--gold); color:#fff;
  padding: 9px 18px; border-radius: var(--radius-pill); font-weight:700; font-size:.85rem;
  display:flex; align-items:center; gap:6px; transition:.2s all;
}
.btn-gold:hover{ filter:brightness(.92); }

/* ===================== شريط التصنيفات ===================== */
.category-bar{
  background: var(--primary-dark);
}
.category-bar .container{ display:flex; overflow-x:auto; gap:4px; scrollbar-width:none;}
.category-bar .container::-webkit-scrollbar{display:none;}
.category-bar a{
  color: rgba(255,255,255,.86);
  font-size:.84rem; font-weight:700;
  padding: 13px 16px; white-space:nowrap;
  border-bottom: 3px solid transparent;
  transition:.2s all;
}
.category-bar a:hover, .category-bar a.active{
  color:#fff; border-bottom-color: var(--accent);
}

/* ===================== قسم البحث الرئيسي (Hero) ===================== */
.hero{
  background:
    radial-gradient(600px 300px at 85% -10%, rgba(255,152,0,.12), transparent),
    radial-gradient(500px 260px at -5% 0%, rgba(42,117,198,.10), transparent),
    var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 56px 0 44px;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--primary-light); color: var(--primary-dark);
  font-size:.78rem; font-weight:800; padding:6px 16px; border-radius: var(--radius-pill);
  margin-bottom:18px;
}
.hero h1{
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height:1.25; max-width: 760px; margin-bottom:14px;
}
.hero h1 span{ color: var(--accent); }
.hero p.lead{ color: var(--muted); font-size:1rem; max-width:600px; margin-bottom:30px;}

.search-capsule{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  display:flex; align-items:center; padding:8px;
  max-width: 720px;
}
.search-capsule input{
  flex:1; border:none; background:transparent; padding:14px 20px; font-size:1rem;
}
.search-capsule button{
  background: var(--primary); color:#fff; font-weight:800;
  padding: 14px 30px; border-radius: var(--radius-pill); font-size:.92rem;
}
.search-capsule button:hover{ background: var(--primary-dark); }

.hero-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.hero-links a{
  font-size:.82rem; font-weight:700; color: var(--primary-dark);
  background: var(--primary-light); padding:8px 16px; border-radius: var(--radius-pill);
  transition:.2s all;
}
.hero-links a:hover{ background: var(--primary); color:#fff; }

.advanced-search-toggle{
  margin-top:22px; display:inline-flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:700; color: var(--accent-dark);
  border-bottom: 2px dashed var(--accent);
  padding-bottom:2px;
}

/* ===================== بحث متقدم (لوحة قابلة للطي) ===================== */
.advanced-panel{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 26px; margin-top:18px; display:none;
}
.advanced-panel.open{ display:block; }
.advanced-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap:16px; margin-bottom:18px;
}
.field label{ display:block; font-size:.8rem; font-weight:700; color:var(--muted); margin-bottom:6px;}
.field input, .field select{
  width:100%; padding:10px 14px; border:1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); font-size:.9rem;
}
.chip-group{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  padding:7px 16px; border:1px solid var(--border); border-radius: var(--radius-pill);
  font-size:.82rem; font-weight:700; color:var(--muted); background:var(--bg);
}
.chip.active{ background: var(--primary); color:#fff; border-color:var(--primary); }
.advanced-panel .btn-solid{ padding:11px 30px; font-size:.9rem; }

/* ===================== شبكة التصنيفات الرئيسية ===================== */
.section{ padding: 52px 0; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; gap:16px; flex-wrap:wrap;
}
.section-head .kicker{
  font-size:.78rem; font-weight:800; color:var(--accent-dark); letter-spacing:.4px; margin-bottom:6px; display:block;
}
.section-head h2{ font-size:1.55rem; }
.see-all{ font-weight:700; font-size:.86rem; color:var(--primary); display:flex; align-items:center; gap:4px; }

.cat-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:18px;
}
.cat-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px 20px; text-align:center; transition:.2s all; box-shadow: var(--shadow-sm);
}
.cat-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.cat-card .icon{
  width:56px; height:56px; border-radius: var(--radius-pill); background: var(--primary-light);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 14px; font-size:1.5rem;
}
.cat-card h3{ font-size:.95rem; color: var(--ink); font-weight:700;}
.cat-card p{ font-size:.78rem; color: var(--muted); margin-top:4px;}

/* ===================== بطاقات الأدوية (توقيع بصري: شارة كبسولة) ===================== */
.drug-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(255px,1fr)); gap:18px;
}
.drug-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding:20px; box-shadow: var(--shadow-sm); transition:.2s all; position:relative;
}
.drug-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); border-color:var(--primary);}
.drug-card .badge-row{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px;}
.rx-badge{
  font-size:.68rem; font-weight:800; padding:4px 12px; border-radius: var(--radius-pill);
}
.rx-badge.white{ background:#EFEFEF; color:#555; }
.rx-badge.red{ background:#FBE3E1; color:var(--danger); }
.rx-badge.green{ background:var(--primary-light); color:var(--primary-dark); }
.rx-badge.none{ background:#EAF6EE; color:var(--ok); }

.price-pill{
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff; border-radius: var(--radius-pill);
  padding: 6px 16px; font-weight:800; font-size:.85rem;
  display:flex; align-items:center; gap:4px; box-shadow: var(--shadow-sm);
}
.drug-card h3{ font-size:1rem; color:var(--ink); margin-bottom:6px; min-height:44px;}
.drug-card .company{ font-size:.8rem; color: var(--muted); margin-bottom:14px;}
.drug-card .meta-line{
  display:flex; justify-content:space-between; font-size:.76rem; color:var(--muted);
  border-top:1px dashed var(--border); padding-top:12px;
}
.drug-card .meta-line b{ color:var(--ink); }

/* ===================== إعلانات ===================== */
.announce-list{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:14px; }
.announce-item{
  background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:16px 18px; display:flex; gap:12px; align-items:flex-start; box-shadow:var(--shadow-sm);
}
.announce-item .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; flex-shrink:0;}
.announce-item span{ font-size:.88rem; font-weight:600; }

/* ===================== قسم الشركات ===================== */
.company-strip{
  display:flex; gap:14px; overflow-x:auto; padding-bottom:10px;
}
.company-chip{
  flex-shrink:0; background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:16px 20px; min-width:220px; font-size:.85rem; font-weight:700; color:var(--primary-dark);
  box-shadow:var(--shadow-sm);
}

/* ===================== تطبيقات الجوال ===================== */
.app-banner{
  background: linear-gradient(120deg, var(--primary-dark), var(--primary));
  border-radius: var(--radius-lg); padding: 40px 36px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.app-banner h3{ color:#fff; font-size:1.4rem; margin-bottom:8px;}
.app-banner p{ color: rgba(255,255,255,.8); max-width:420px; font-size:.9rem;}
.app-buttons{ display:flex; gap:12px; }
.app-buttons a{
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);
  padding:12px 22px; border-radius: var(--radius-md); font-size:.85rem; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.app-buttons a:hover{ background: rgba(255,255,255,.22); }

/* ===================== فوتر ===================== */
.site-footer{ background: #0A2A21; color: rgba(255,255,255,.75); padding: 52px 0 24px; margin-top:40px;}
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:36px;}
.footer-grid h4{ color:#fff; font-size:.95rem; margin-bottom:16px;}
.footer-grid a{ display:block; font-size:.85rem; padding:5px 0; color: rgba(255,255,255,.65); transition:.2s color;}
.footer-grid a:hover{ color: var(--accent); }
.footer-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; color:#fff; font-size:1.2rem; margin-bottom:14px;}
.footer-social{ display:flex; gap:10px; margin-top:16px;}
.footer-social a{ width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:.85rem;}
.footer-disclaimer{
  border-top:1px solid rgba(255,255,255,.1); padding-top:20px; font-size:.78rem; color: rgba(255,255,255,.5); line-height:1.9;
}
.footer-bottom{
  display:flex; justify-content:space-between; margin-top:20px; font-size:.78rem; color: rgba(255,255,255,.45); flex-wrap:wrap; gap:10px;
}

/* ===================== صفحات داخلية (قوائم/تفاصيل) ===================== */
.breadcrumb{ font-size:.82rem; color:var(--muted); margin-bottom:18px; }
.breadcrumb a{ color: var(--primary); }
.page-hero{ background:var(--surface); border-bottom:1px solid var(--border); padding: 32px 0;}
.page-hero h1{ font-size:1.6rem; }
.filter-sidebar{
  background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding:22px; box-shadow: var(--shadow-sm); height:fit-content;
}
.filter-sidebar h4{ font-size:.9rem; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border);}
.filter-block{ margin-bottom:20px; }
.filter-block label{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--ink); padding:5px 0;}
.listing-layout{ display:grid; grid-template-columns: 260px 1fr; gap:26px; align-items:flex-start; }
.results-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.results-toolbar span{ color:var(--muted); font-size:.88rem;}
.drug-table-list{ display:flex; flex-direction:column; gap:12px; }
.drug-row{
  background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  box-shadow: var(--shadow-sm);
}
.drug-row:hover{ border-color: var(--primary); }
.drug-row .info h3{ font-size:.98rem; }
.drug-row .info p{ font-size:.8rem; color:var(--muted); margin-top:3px;}
.drug-row .tags{ display:flex; gap:8px; flex-wrap:wrap; }
.pagination{ display:flex; justify-content:center; gap:8px; margin-top:30px;}
.pagination a{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); font-size:.85rem; font-weight:700; color:var(--muted);
}
.pagination a.active{ background:var(--primary); color:#fff; border-color:var(--primary);}

/* صفحة التفاصيل */
.detail-grid{ display:grid; grid-template-columns: 1fr 320px; gap:30px; align-items:flex-start; }
.detail-card{ background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:30px; box-shadow: var(--shadow-sm); margin-bottom:20px;}
.detail-card h2{ font-size:1.2rem; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border);}
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table tr td{ padding:11px 4px; font-size:.88rem; border-bottom:1px dashed var(--border);}
.spec-table tr td:first-child{ color:var(--muted); width:38%; font-weight:600;}
.spec-table tr td:last-child{ color:var(--ink); font-weight:700;}
.price-box{
  background: linear-gradient(160deg, var(--primary), var(--primary-dark)); color:#fff;
  border-radius: var(--radius-lg); padding:26px; text-align:center; box-shadow: var(--shadow-md);
}
.price-box .amount{ font-family: var(--font-display); font-size:2.1rem; font-weight:800; margin:8px 0;}
.price-box .label{ font-size:.78rem; opacity:.85;}
.price-box .note{ font-size:.75rem; opacity:.75; margin-top:10px;}

/* ===================== لوحة إعلان تنبيه صحي ===================== */
.disclaimer-box{
  background: #FFF6E9; border:1px solid #F2DDB4; border-radius: var(--radius-md);
  padding:16px 20px; font-size:.82rem; color:#7A5B12; line-height:1.8; margin-top:20px;
}

/* ===================== بطاقة عرض السوق (بيع/شراء بين الصيدليات) ===================== */
.offer-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:20px; }
.offer-card{
  position:relative; background:#fff; border:1px solid var(--border); border-radius: 18px;
  padding:18px 16px 16px; box-shadow: 0 4px 16px rgba(11,110,79,.06); transition:.2s all;
}
.offer-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.offer-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
.offer-status-dot{ width:10px; height:10px; border-radius:50%; background: var(--ok); margin-top:4px; flex-shrink:0; }
.offer-status-dot.out{ background:#C7CFCC; }
.offer-icons{ display:flex; gap:6px; }
.offer-icons button{
  width:26px; height:26px; border-radius:50%; background:#F1F4F3; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:.72rem; color:var(--muted);
}
.offer-icons button:hover{ background: var(--primary-light); color:var(--primary-dark); }
.offer-image{ height:96px; display:flex; align-items:center; justify-content:center; margin:6px 0 10px;}
.offer-image img{ max-height:96px; max-width:100%; object-fit:contain; }
.offer-image .ph{ font-size:2.2rem; opacity:.25; }
.offer-name{ font-size:.86rem; font-weight:800; color:var(--ink); min-height:36px; line-height:1.4; margin-bottom:10px; }
.offer-rows{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.offer-row{ display:flex; justify-content:space-between; align-items:center; font-size:.78rem; }
.offer-row .lbl{ color:var(--muted); }
.offer-row .val{ font-weight:700; color:var(--ink); }
.offer-row.highlight .lbl, .offer-row.highlight .val{ color: var(--primary); font-weight:800; }
.offer-pay-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.offer-pay-chip{
  border:1px solid var(--border); border-radius: var(--radius-pill); padding:5px 12px;
  font-size:.7rem; font-weight:700; color:var(--muted); background:#fff;
}
.offer-bonus-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.offer-bonus-btn{
  border:1px solid var(--border); border-radius: var(--radius-pill); padding:6px 13px;
  font-size:.74rem; font-weight:800; color:var(--primary-dark); background:#fff; transition:.15s all;
}
.offer-bonus-btn.selected{ background: var(--primary-dark); color:#fff; border-color:var(--primary-dark); }
.offer-bonus-btn:hover{ border-color: var(--primary); }
.offer-qty-toggle{ display:flex; border:1px solid var(--border); border-radius: var(--radius-pill); overflow:hidden; margin-bottom:12px; }
.offer-qty-toggle button{ flex:1; padding:8px 4px; font-size:.74rem; font-weight:700; color:var(--muted); background:#F7FAF9;}
.offer-qty-toggle button.active{ background: var(--primary-light); color:var(--primary-dark); }
.offer-add-btn{
  width:100%; border:1.5px solid var(--primary); color:var(--primary); font-weight:800; font-size:.82rem;
  padding:9px; border-radius: var(--radius-pill); transition:.2s all;
}
.offer-add-btn:hover{ background: var(--primary); color:#fff; }
.offer-add-btn.added{ background: var(--ok); border-color: var(--ok); color:#fff; }
.offer-seller{ font-size:.72rem; color:var(--muted); margin-bottom:8px; display:flex; align-items:center; gap:4px;}

.cart-link{ position:relative; }
.cart-badge{
  position:absolute; top:-6px; left:-8px; background: var(--accent); color:#fff;
  font-size:.65rem; font-weight:800; min-width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.account-chip{
  display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700; color:var(--primary-dark);
  background: var(--primary-light); padding:8px 16px; border-radius: var(--radius-pill);
}
.account-chip button{ color:var(--muted); font-size:.75rem; text-decoration:underline; }
.account-login-link{
  border:1.5px solid var(--primary); color:var(--primary); padding:9px 18px; border-radius: var(--radius-pill);
  font-weight:700; font-size:.85rem;
}
.account-login-link:hover{ background: var(--primary); color:#fff; }

/* ===================== صفحة تفاصيل الصنف — تبويبات احترافية ===================== */
.drug-head-bar{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius-md);
  padding:16px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:16px; box-shadow: var(--shadow-sm);
}
.drug-barcode{ display:flex; align-items:center; gap:10px; font-family: var(--font-mono); font-size:.95rem; color:var(--ink); }
.drug-barcode svg{ height:34px; }
.copy-btn{
  width:28px; height:28px; border-radius:6px; background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--muted); flex-shrink:0;
}
.copy-btn:hover{ background: var(--primary-light); color:var(--primary-dark); }
.copy-btn.copied{ background: var(--ok); color:#fff; border-color:var(--ok); }
.drug-head-name{ font-weight:800; color:var(--primary-dark); font-size:1rem; }
.drug-head-company{ display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.88rem; }
.drug-head-company a{ color:var(--primary); font-weight:700; }

.rx-banner{
  background:var(--bg); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:10px 18px; font-size:.85rem; font-weight:700; color:var(--ink); margin-bottom:16px;
}

.drug-tabs{
  display:flex; gap:4px; overflow-x:auto; border-bottom:2px solid var(--border); margin-bottom:22px; scrollbar-width:none;
}
.drug-tabs::-webkit-scrollbar{ display:none; }
.drug-tab{
  padding:12px 16px; font-size:.84rem; font-weight:700; color:var(--muted); white-space:nowrap;
  border-bottom:3px solid transparent; margin-bottom:-2px; display:flex; align-items:center; gap:6px; transition:.15s all;
}
.drug-tab:hover{ color:var(--primary-dark); }
.drug-tab.active{ color:var(--primary); border-color:var(--primary); }

.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.info-panel-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:16px; }
.info-panel{ background:#fff; border:1px solid var(--border); border-radius: var(--radius-md); padding:18px 20px; box-shadow: var(--shadow-sm); }
.info-panel h4{ font-size:.86rem; color:var(--muted); font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:6px; }
.info-panel .row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed var(--border); font-size:.85rem; gap:10px;}
.info-panel .row:last-child{ border-bottom:none; }
.info-panel .row .k{ color:var(--muted); flex-shrink:0; }
.info-panel .row .v{ font-weight:700; color:var(--ink); text-align:left; }
.info-panel .row.strong .v{ color:var(--primary-dark); font-size:.95rem; }
.info-panel .row.strong .k{ font-weight:700; color:var(--ink); }
.info-panel .row .badge-inline{ background:var(--primary-light); color:var(--primary-dark); font-size:.7rem; font-weight:800; padding:2px 8px; border-radius:6px; }

.warning-icon-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(70px,1fr)); gap:8px; }
.warning-icon{
  border:1px solid var(--border); border-radius: var(--radius-sm); padding:12px 6px; text-align:center;
  font-size:1.1rem; color:var(--danger); background:#FFF6F5;
}
.warning-icon .lbl{ display:block; font-size:.62rem; color:var(--muted); margin-top:4px; font-weight:700; }

.product-image-box{ text-align:center; }
.product-image-box img{ max-height:180px; margin:0 auto 14px; }
.sut-check-btn{
  display:flex; align-items:center; justify-content:space-between; background: var(--gold); color:#3a2c00;
  padding:12px 18px; border-radius: var(--radius-sm); font-weight:800; font-size:.85rem; margin-top:10px;
}

.data-table-card{ background:#fff; border:1px solid var(--border); border-radius: var(--radius-md); padding:22px; box-shadow: var(--shadow-sm);}
.data-table-card h3{ font-size:1rem; margin-bottom:16px; }
table.clean-table{ width:100%; border-collapse:collapse; }
table.clean-table th{ text-align:right; font-size:.74rem; color:var(--muted); text-transform:uppercase; padding:10px 12px; border-bottom:2px solid var(--border);}
table.clean-table td{ padding:12px; font-size:.86rem; border-bottom:1px solid var(--border); vertical-align:middle;}
table.clean-table tr:last-child td{ border-bottom:none; }
table.clean-table tr:hover td{ background: var(--bg); }
table.clean-table .ingredient-name{ color:var(--primary-dark); font-weight:700; }
table.clean-table .ingredient-name a{ color:inherit; }
table.clean-table .ingredient-name a:hover{ text-decoration:underline; }
table.clean-table .mg-value{ font-weight:800; color:var(--ink); }
table.clean-table .price-diff{ font-weight:800; color:var(--danger); }
table.clean-table .price-diff.zero{ color:var(--muted); }
table.clean-table .barcode-cell{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.8rem; }

.placeholder-tab{
  background:#fff; border:2px dashed var(--border); border-radius: var(--radius-md);
  padding:44px 24px; text-align:center; color:var(--muted);
}
.placeholder-tab .ic{ font-size:1.8rem; margin-bottom:10px; }

.expiry-badge{ font-size:.72rem; font-weight:800; padding:4px 10px; border-radius: var(--radius-pill); display:inline-block; }
.expiry-badge.ok{ background:#EAF6EE; color:var(--ok); }
.expiry-badge.expiring{ background:#FFF3E0; color:#B36B00; }
.expiry-badge.expired{ background:#FBE3E1; color:var(--danger); }

/* ===================== أدوات مساعدة ===================== */
.text-accent{ color: var(--accent); }
.mt-32{ margin-top:32px; }

/* ===================== صفحات محتوى عامة (قاموس، أمراض، أعشاب، اتصل بنا...) ===================== */
.info-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:18px; }
.info-card{
  background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:22px; box-shadow: var(--shadow-sm);
}
.info-card h3{ font-size:1rem; margin-bottom:8px; display:flex; align-items:center; gap:8px;}
.info-card p{ font-size:.85rem; color:var(--muted); line-height:1.9;}
.info-card a.link-more{ display:inline-block; margin-top:10px; font-size:.8rem; font-weight:700; color:var(--primary);}

.glossary-item{
  background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:18px 20px; margin-bottom:12px;
}
.glossary-item h4{ font-size:.95rem; color:var(--primary-dark); margin-bottom:6px;}
.glossary-item p{ font-size:.85rem; color:var(--muted); }

.contact-layout{ display:grid; grid-template-columns: 1fr 1fr; gap:26px; align-items:flex-start;}
.contact-form{ background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:28px; box-shadow: var(--shadow-sm);}
.contact-form .field{ margin-bottom:16px; }
.contact-form .field label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:6px;}
.contact-form input, .contact-form textarea{
  width:100%; padding:11px 14px; border:1px solid var(--border); border-radius: var(--radius-sm); font-size:.88rem; background:var(--bg);
}
.contact-form textarea{ min-height:120px; resize:vertical; }
.contact-info-list{ display:flex; flex-direction:column; gap:14px; }
.contact-info-item{
  background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:18px 20px; display:flex; gap:14px; align-items:flex-start; box-shadow: var(--shadow-sm);
}
.contact-info-item .ic{ font-size:1.3rem; }
.contact-info-item h4{ font-size:.92rem; margin-bottom:4px; }
.contact-info-item p{ font-size:.83rem; color:var(--muted); }

.pharmacy-card{
  background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:20px; box-shadow: var(--shadow-sm); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.pharmacy-card h3{ font-size:.96rem; }
.pharmacy-card p{ font-size:.82rem; color:var(--muted); margin-top:4px;}
.open-badge{ background:#EAF6EE; color:var(--ok); font-weight:800; font-size:.78rem; padding:6px 14px; border-radius: var(--radius-pill);}

.calc-box{ background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:30px; box-shadow: var(--shadow-md); max-width:520px;}
.calc-box .field{ margin-bottom:16px; }
.calc-box .field label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:6px;}
.calc-box input, .calc-box select{ width:100%; padding:11px 14px; border:1px solid var(--border); border-radius: var(--radius-sm); font-size:.9rem;}
.calc-result{ background: var(--primary-light); border-radius: var(--radius-md); padding:18px 20px; margin-top:16px; text-align:center;}
.calc-result .big{ font-family: var(--font-display); font-size:1.6rem; font-weight:800; color:var(--primary-dark);}

.placeholder-box{
  background: var(--surface); border:2px dashed var(--border); border-radius: var(--radius-lg);
  padding:50px 30px; text-align:center; color:var(--muted);
}
.placeholder-box .ic{ font-size:2.4rem; margin-bottom:14px;}
.placeholder-box code{ background:var(--bg); padding:3px 10px; border-radius:6px; font-family:var(--font-mono); font-size:.82rem; color:var(--primary-dark);}

/* ===================== استجابة ===================== */
@media (max-width: 900px){
  .header-row{ flex-wrap:wrap; }
  .header-search{ order:3; width:100%; }
  .listing-layout{ grid-template-columns: 1fr; }
  .detail-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .contact-layout{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
  .app-banner{ flex-direction:column; align-items:flex-start; }
}