/* ============================================================
   معهد هرماس العالي للتدريب — نظام التصميم الأساسي
   Hermas Institute — Core Design System
   ============================================================ */

/* ---------- 1. المتغيرات (Design Tokens) ---------- */.hrm-ui {
  /* الألوان الأساسية */
  --site-header-h:95px;   /* ارتفاع هيدر الموقع المُطفي فوق الهيرو */
  /* style.css القديم يضع text-align:justify على body فيتسرّب لكل النصوص
     ويمطّط الكلمات. نُبطله هنا؛ قواعد .center الداخلية أقوى فتبقى تعمل. */
  text-align:start;
  --navy-900:#0A2138;
  --navy-800:#0D3252;
  --navy:#113D64;          /* الأزرق الكحلي الأساسي */
  --navy-600:#134A76;
  --navy-500:#1B5C8F;

  --teal-700:#0C7178;
  --teal:#0F8E99;          /* التركوازي الأساسي */
  --teal-400:#35B7AE;
  --teal-100:#E3F3F4;

  --gold-700:#A8842F;
  --gold:#D0A24A;          /* الذهبي */
  --gold-100:#F7EFDD;

  /* ألوان الهيرو المتحرك (توهج الشبكة والبلورة) */
  --navy-950:#061726;      /* أعمق درجة — أسفل الهيرو */
  --glow-teal:#28B8A6;     /* عقد وخطوط الشبكة */
  --glow-teal-2:#1BD1BA;   /* التوهج الساطع عند المؤشر */
  --glow-gold:#E5A23C;     /* هالة ذهبية */
  --glow-gold-2:#E8A027;   /* جزيئات ذهبية */

  /* المحايدة */
  --ink:#16232E;
  --body:#5A6B78;
  --muted:#8797A5;
  --line:#E5EAEF;
  --line-2:#EEF2F6;
  --bg:#FFFFFF;
  --bg-soft:#F5F7FA;
  --bg-soft-2:#F8FAFC;

  /* أخرى */
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:22px;
  --shadow-sm:0 1px 3px rgba(14,61,99,.06);
  --shadow:0 4px 18px rgba(14,61,99,.07);
  --shadow-lg:0 14px 44px rgba(14,61,99,.10);
  --container:1180px;
  --header-h:70px;
  --hero-h:400px;      /* ارتفاع موحّد لهيرو الرئيسية وبانرات بقية الصفحات — نفس قيمة التصميم الأصلي */
  --font:"Tajawal","Cairo","Segoe UI",Tahoma,sans-serif;
  --ease-soft:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. إعادة التهيئة ---------- */.hrm-ui *, .hrm-ui *::before, .hrm-ui *::after {box-sizing:border-box}.hrm-ui [hidden] {display:none !important}.hrm-ui {-webkit-text-size-adjust:100%}.hrm-ui {
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.75;
  color:var(--body);
  background:var(--bg);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
}.hrm-ui h1, .hrm-ui h2, .hrm-ui h3, .hrm-ui h4, .hrm-ui h5, .hrm-ui h6 {margin:0;color:var(--ink);font-weight:800;line-height:1.4}.hrm-ui p {margin:0}.hrm-ui a {color:inherit;text-decoration:none}.hrm-ui ul, .hrm-ui ol {margin:0;padding:0;list-style:none}.hrm-ui img {max-width:100%;display:block}.hrm-ui button, .hrm-ui input, .hrm-ui select, .hrm-ui textarea {font-family:inherit;font-size:inherit;color:inherit}.hrm-ui button {cursor:pointer;border:0;background:none}.hrm-ui svg {flex-shrink:0}.hrm-ui svg.i {width:20px;height:20px}

/* ---------- 3. أدوات مساعدة ---------- */.hrm-ui .container {width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}.hrm-ui .sec {padding:64px 0}.hrm-ui .sec-sm {padding:44px 0}.hrm-ui .center {text-align:center}.hrm-ui .hide {display:none !important}

/* ---------- 4. أماكن الشعارات الفارغة (Logo Slots) ----------
   كل مكان شعار بنفس قياسات الصور الأصلية.
   ضع صورتك هكذا:  <span class="logo-slot" style="background-image:url('assets/logos/logo.svg')"></span>
   أو احذف class="is-empty" بعد إضافة الصورة.
------------------------------------------------------------- */.hrm-ui .logo-slot {
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  border-radius:6px;
  position:relative;
  flex-shrink:0;
}.hrm-ui .logo-slot img {display:block;width:100%;height:100%;object-fit:contain}.hrm-ui .logo-slot.is-empty {
  border:1px dashed rgba(120,140,158,.55);
  background-color:rgba(140,160,180,.06);
}.hrm-ui .logo-slot.is-empty::after {
  content:attr(data-label);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  line-height:1.3;
  letter-spacing:.2px;
  color:rgba(120,140,158,.9);
  text-align:center;
  padding:2px;
  font-weight:500;
}.hrm-ui .logo-slot.on-dark.is-empty {
  border-color:rgba(255,255,255,.38);
  background-color:rgba(255,255,255,.06);
}.hrm-ui .logo-slot.on-dark.is-empty::after {color:rgba(255,255,255,.72)}

/* القياسات المستخدمة في التصميم الأصلي */.hrm-ui .logo-header {width:132px;height:52px}.hrm-ui .logo-header-lg {width:168px;height:54px}.hrm-ui .logo-footer {width:150px;height:104px}.hrm-ui .logo-footer-wide {width:196px;height:70px}.hrm-ui .logo-sidebar {width:172px;height:56px}.hrm-ui .logo-partner {width:132px;height:44px}.hrm-ui .logo-partner img {display:block;width:100%;height:100%;object-fit:contain}.hrm-ui .logo-hero-badge {width:120px;height:120px}

/* ---------- 5. الأزرار ---------- */.hrm-ui .btn {
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:46px;padding:0 24px;border-radius:var(--radius-sm);
  font-weight:700;font-size:14.5px;white-space:nowrap;
  transition:.22s ease;border:1px solid transparent;
}.hrm-ui .btn svg {width:17px;height:17px}.hrm-ui .btn-navy {background:var(--navy);color:#fff}.hrm-ui .btn-navy:hover {background:var(--navy-800)}.hrm-ui .btn-teal {background:var(--teal);color:#fff}.hrm-ui .btn-teal:hover {background:var(--teal-700)}.hrm-ui .btn-gold {background:var(--gold);color:#fff}.hrm-ui .btn-gold:hover {background:var(--gold-700)}.hrm-ui .btn-outline {background:#fff;color:var(--navy);border-color:var(--line)}.hrm-ui .btn-outline:hover {border-color:var(--navy);}.hrm-ui .btn-ghost-light {background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}.hrm-ui .btn-ghost-light:hover {background:rgba(255,255,255,.12)}.hrm-ui .btn-white {background:#fff;color:var(--navy)}.hrm-ui .btn-sm {height:38px;padding:0 18px;font-size:13.5px;border-radius:7px}.hrm-ui .btn-lg {height:52px;padding:0 30px;font-size:16px}.hrm-ui .btn-block {width:100%}

/* ---------- 6. الهيدر ---------- */.hrm-ui .site-header {
  height:var(--header-h);
  background:#fff;
  border-bottom:1px solid var(--line-2);
  position:sticky;top:0;z-index:60;
}.hrm-ui .site-header .container {height:100%;display:flex;align-items:center;gap:26px}.hrm-ui .site-header .brand {display:flex;align-items:center}.hrm-ui .nav {display:flex;flex-wrap:nowrap;align-items:center;gap:22px;margin-inline-start:auto}.hrm-ui .nav a {
  font-size:14.5px;font-weight:600;color:#33475B;white-space:nowrap;
  position:relative;padding:6px 0;transition:.2s;
  display:inline-flex;align-items:center;gap:5px;
}.hrm-ui .nav a:hover {color:var(--teal)}.hrm-ui .nav a.active {color:var(--teal)}.hrm-ui .nav a.active::after {
  content:"";position:absolute;bottom:-4px;inset-inline:0;height:2px;background:var(--teal);border-radius:2px;
}.hrm-ui .nav .caret {width:11px;height:11px;opacity:.7}.hrm-ui .header-actions {display:flex;align-items:center;gap:9px;margin-inline-start:auto}.hrm-ui .nav + .header-actions {margin-inline-start:0}
.hrm-ui .icon-badge-btn {position:relative}
.hrm-ui .icon-badge {
  position:absolute;top:-6px;inset-inline-end:-6px;
  min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--gold);color:#fff;font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;line-height:1;
  border:2px solid #fff;
}
.hrm-ui .icon-btn {
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:#42596E;transition:.2s;
}.hrm-ui .icon-btn:hover {background:var(--bg-soft);color:var(--teal)}.hrm-ui .icon-btn svg {width:18px;height:18px}

/* الهيدر موحّد باللون الأبيض في جميع الصفحات */.hrm-ui .site-header {box-shadow:0 1px 0 rgba(17,61,100,.04)}.hrm-ui .site-header .btn-sm {white-space:nowrap}.hrm-ui .site-header .btn-outline {color:var(--navy);border-color:var(--line)}.hrm-ui .site-header .btn-outline:hover {border-color:var(--teal);color:var(--teal)}

/* زر القائمة للشاشات الصغيرة */.hrm-ui .nav-toggle {
  display:none;width:40px;height:38px;border:1px solid var(--line);border-radius:9px;
  background:#fff;cursor:pointer;padding:0;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;transition:.2s;
}.hrm-ui .nav-toggle:hover {border-color:var(--teal)}.hrm-ui .nav-toggle span {display:block;width:17px;height:2px;border-radius:2px;background:var(--navy);transition:.25s var(--ease-soft)}.hrm-ui .site-header.nav-open .nav-toggle span:nth-child(1) {transform:translateY(6px) rotate(45deg)}.hrm-ui .site-header.nav-open .nav-toggle span:nth-child(2) {opacity:0}.hrm-ui .site-header.nav-open .nav-toggle span:nth-child(3) {transform:translateY(-6px) rotate(-45deg)}

/* ---------- 7. الهيرو الداخلي (بانر الصفحات) ---------- */.hrm-ui .page-hero {
  position:relative;overflow:hidden;
  min-height:var(--hero-h);display:flex;align-items:center;
  background:linear-gradient(255deg,var(--navy) 0%,var(--navy-800) 42%,var(--teal-700) 100%);
  color:#fff;
}.hrm-ui .page-hero .container {position:relative;z-index:2;flex:1}.hrm-ui .page-hero .deco {
  position:absolute;top:-26px;bottom:-26px;left:-118px;
  width:310px;opacity:.14;pointer-events:none;
}.hrm-ui .page-hero .deco svg {width:100%;height:100%}.hrm-ui .page-hero-body {padding:48px 0 54px;text-align:right}.hrm-ui .page-hero h1 {color:#fff;font-size:45px;letter-spacing:-.5px;margin-bottom:12px}.hrm-ui .page-hero .sub {font-size:17px;color:rgba(255,255,255,.9);max-width:600px;margin-left:auto;margin-right:0}.hrm-ui .page-hero .lede {font-size:15px;color:rgba(255,255,255,.78);max-width:660px;margin:14px 0 0 auto;line-height:2}.hrm-ui .hero-wave {margin-top:20px;display:flex;justify-content:flex-start;padding-inline-start:78px}.hrm-ui .hero-ring {
  width:44px;height:44px;border-radius:50%;
  border:2px solid rgba(201,162,75,.85);
}.hrm-ui .ring-deco {
  position:absolute;right:2px;bottom:34px;
  width:44px;height:44px;border-radius:50%;
  border:2px solid rgba(201,162,75,.85);
}.hrm-ui .breadcrumb {display:flex;align-items:center;gap:8px;font-size:13.5px;color:rgba(255,255,255,.75);margin-bottom:18px}.hrm-ui .breadcrumb a:hover {color:#fff}.hrm-ui .breadcrumb .sep {opacity:.6}

/* عنوان قسم */.hrm-ui .sec-head {margin-bottom:34px}.hrm-ui .sec-title {font-size:27px;position:relative;display:inline-block;padding-bottom:11px}.hrm-ui .sec-title::after {
  content:"";position:absolute;bottom:0;inset-inline-start:0;
  width:40px;height:3px;background:var(--teal);border-radius:3px;
}.hrm-ui .sec-title.centered {display:block;text-align:center}.hrm-ui .sec-title.centered::after {inset-inline:0;margin-inline:auto}.hrm-ui .sec-sub {margin-top:14px;color:var(--body);font-size:15px}

/* ---------- 8. البطاقات ---------- */.hrm-ui .card {
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:.25s ease;
}.hrm-ui .card:hover {box-shadow:var(--shadow);transform:translateY(-3px)}.hrm-ui .grid {display:grid;gap:22px}.hrm-ui .g-2 {grid-template-columns:repeat(2,1fr)}.hrm-ui .g-3 {grid-template-columns:repeat(3,1fr)}.hrm-ui .g-4 {grid-template-columns:repeat(4,1fr)}

/* ---------- 9. النماذج ---------- */.hrm-ui .field {position:relative;margin-bottom:14px}.hrm-ui .field .ctrl {
  width:100%;height:52px;border:1px solid var(--line);border-radius:10px;
  background:#fff;padding:0 46px 0 46px !important;font-size:14.5px;color:var(--ink);
  transition:.2s;outline:none;
}.hrm-ui textarea.ctrl {height:auto;min-height:132px;padding:14px 46px;line-height:1.9;resize:vertical}.hrm-ui .field .ctrl::placeholder {color:#A9B6C2}.hrm-ui .field .ctrl:focus {border-color:var(--teal);box-shadow:0 0 0 3px rgba(23,147,155,.12)}.hrm-ui .field .lead-icon {
  position:absolute;inset-inline-start:16px;top:17px;width:18px;height:18px;color:#93A3B1;pointer-events:none;
}.hrm-ui .field .tail-icon {
  position:absolute;inset-inline-end:16px;top:17px;width:18px;height:18px;color:#93A3B1;
}.hrm-ui .field .tail-icon.btnable {cursor:pointer}.hrm-ui .field-hint {font-size:12px;color:var(--muted);margin:6px 4px 0}.hrm-ui .field-hint.is-bad {color:#C4553F}.hrm-ui .field-row {display:grid;grid-template-columns:1fr 1fr;gap:14px}.hrm-ui .check {display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--body);cursor:pointer}.hrm-ui .check input {width:16px;height:16px;accent-color:var(--teal);margin:0}.hrm-ui .form-split {display:flex;align-items:center;justify-content:space-between;margin:6px 0 18px}.hrm-ui .link-teal {color:var(--teal);font-weight:600}.hrm-ui .link-teal:hover {text-decoration:underline}.hrm-ui .divider-text {
  display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px;margin:24px 0 18px;
}.hrm-ui .divider-text::before, .hrm-ui .divider-text::after {content:"";flex:1;height:1px;background:var(--line)}.hrm-ui .social-row {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.hrm-ui .social-btn {
  height:50px;border:1px solid var(--line);border-radius:10px;background:#fff;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:12.5px;font-weight:600;color:var(--ink);transition:.2s;
  white-space:nowrap;padding:0 8px;
}.hrm-ui .social-btn:hover {border-color:#CFD9E2;box-shadow:var(--shadow-sm)}.hrm-ui .social-btn svg {width:18px;height:18px}


/* حقول ذات تسمية داخلية (label داخل الحقل) */.hrm-ui .in-label {
  position:absolute;inset-inline-start:16px;top:0;height:52px;
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;color:#54677A;font-weight:500;pointer-events:none;white-space:nowrap;
}.hrm-ui .in-label svg {width:17px;height:17px;color:#93A3B1}.hrm-ui .in-label .req {color:#D9534F}.hrm-ui .field.labeled .ctrl {padding-inline-start:150px !important;padding-inline-end:44px !important}.hrm-ui .field.labeled.wide-lbl .ctrl {padding-inline-start:176px !important}.hrm-ui .field.labeled.ph-left .ctrl {text-align:left;direction:ltr}.hrm-ui .field.labeled.area .in-label {top:15px;height:auto;align-items:flex-start}.hrm-ui .field.labeled.area .in-label svg {margin-top:3px}.hrm-ui .field.labeled.area textarea.ctrl {padding-top:46px;padding-inline-start:16px !important;padding-inline-end:16px !important}.hrm-ui .field select.ctrl {appearance:none;cursor:pointer}

/* حقول بنمط تسمية أعلى الحقل (زي أغلب مواقع تسجيل الدخول/الحساب) — تسمية
   عادية فوق الحقل بدل تسمية عائمة داخله، وأيقونة صغيرة داخل الحقل بس. */
.hrm-ui .field.stacked{margin-bottom:16px}
.hrm-ui .field.stacked .field-label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:8px}
.hrm-ui .field.stacked .field-label .req{color:#D9534F}
.hrm-ui .field.stacked .ctrl-wrap{position:relative}
.hrm-ui .field.stacked .ctrl-wrap .lead-icon{position:absolute;inset-inline-start:16px;top:17px;width:18px;height:18px;color:#93A3B1;pointer-events:none}
.hrm-ui .field.stacked .ctrl-wrap .tail-icon{position:absolute;inset-inline-end:16px;top:17px;width:18px;height:18px;color:#93A3B1}
.hrm-ui .field.stacked .ctrl-wrap .tail-icon.btnable{cursor:pointer;background:none;border:0;padding:0}
.hrm-ui .field.stacked .ctrl{padding-inline-start:44px !important;padding-inline-end:44px !important}
.hrm-ui .field.stacked .ctrl:only-child{padding-inline-start:16px !important}

/* ---------- 10. الفوتر ---------- */.hrm-ui .site-footer {background:var(--navy);color:rgba(255,255,255,.78);padding-top:52px}.hrm-ui .footer-grid {
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr;gap:34px;padding-bottom:38px;
}.hrm-ui .site-footer.f6 .footer-grid {grid-template-columns:1.3fr .9fr 1.05fr .95fr .95fr 1.2fr}.hrm-ui .footer-brand p {font-size:12.5px;line-height:2.05;color:rgba(255,255,255,.62);margin-top:18px}.hrm-ui .footer-col h4 {color:#fff;font-size:15.5px;margin-bottom:18px;font-weight:700}.hrm-ui .footer-col li {margin-bottom:11px}.hrm-ui .footer-col a {font-size:13.5px;color:rgba(255,255,255,.74);transition:.2s}.hrm-ui .footer-col a:hover {color:#fff}.hrm-ui .contact-list li {display:flex;align-items:flex-start;gap:11px;margin-bottom:15px;font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.9}.hrm-ui .contact-list li span[dir="ltr"] {text-align:right;unicode-bidi:isolate}.hrm-ui .contact-list svg {width:17px;height:17px;margin-top:5px;color:rgba(255,255,255,.9)}.hrm-ui .contact-list .ico-box {
  width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
}.hrm-ui .contact-list .ico-box svg {margin:0;width:14px;height:14px}.hrm-ui .footer-bottom {
  border-top:1px solid rgba(255,255,255,.13);
  padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:13px;color:rgba(255,255,255,.62);
}.hrm-ui .socials {display:flex;gap:10px}.hrm-ui .socials a {
  width:32px;height:32px;border-radius:7px;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;transition:.2s;
}.hrm-ui .socials a:hover {background:var(--teal)}.hrm-ui .socials svg {width:15px;height:15px;color:#fff}

/* ============================================================
   11. هيرو الصفحة الرئيسية المتحرك (Animated Home Hero)
   ------------------------------------------------------------
   • كل الأصناف مسبوقة بـ hx- ومحصورة داخل .hx-hero
   • يعتمد على متغيرات النظام أعلاه (navy / teal / gold)
   • يحتاج الملف: assets/js/hero-animated.js
   ============================================================ */.hrm-ui .hx-hero {
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  /* نفس تدرّج بانر الصفحات الداخلية (.page-hero) ليتوحّد لون الهيرو في
     الموقع: كحلي ينحدر إلى تركوازي. التوهّجات تبقى فوقه لعمق الشبكة. */
  background:
    radial-gradient(1100px 700px at 78% 38%, rgba(40,184,166,.10), transparent 62%),
    radial-gradient(760px 520px at 88% 62%, rgba(229,162,60,.07),  transparent 65%),
    linear-gradient(255deg, var(--navy) 0%, var(--navy-800) 42%, var(--teal-700) 100%);
}
/* غلاف الهيدر الاختياري من الإعدادات — أسفل الشبكة وفوق التدرّج. */.hrm-ui .hx-hero .hx-cover {
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;opacity:.22;pointer-events:none;
}

/* الشبكة العصبية والتظليل — داخل القسم فقط، لا تتجاوزه */.hrm-ui .hx-hero .hx-mesh {position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}.hrm-ui .hx-hero .hx-vignette {
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%,transparent 45%,rgba(4,14,24,.55) 100%);
}
/* الشبكة: عمود النص (يسار) + بطاقة الشعار (يمين) */.hrm-ui .hx-hero .hx-grid {
  position:relative;z-index:2;direction:rtl;
  display:grid;grid-template-columns:1fr 1.06fr;align-items:center;gap:clamp(24px,4vw,50px);
  /* ارتفاع الهيرو موحّد مع بانر الصفحات الداخلية عبر المتغيّر --hero-h */
  /* FIX: كان هذا الحساب يفترض هيدرًا شفافًا بـ position:absolute فوق
     الهيرو (نمط القالب الأصلي)، فيحجز له مساحة إضافية بـ --site-header-h.
     هيدر الموقع هنا (site-header) عادي وثابت (sticky) يأخذ ارتفاعه
     الحقيقي ضمن تدفّق الصفحة ولا يتراكب مع الهيرو، فإضافة --site-header-h
     كانت تكرّر المساحة وتترك فراغًا كبيرًا أسفل النص القصير. نفس معاملة
     .page-hero بالضبط الآن (بلا أي تعويض). */
  padding-block:48px 54px;
  /* FIX: كانت هذه القاعدة تضيف سقفًا بـ100vh/780px غير موجود في التصميم
     الأصلي إطلاقًا، فيكبر الهيرو عن حجمه المقصود. نفس صيغة التصميم
     الأصلي تمامًا: --hero-h - 102px بلا أي حد أدنى إضافي. */
  min-height:calc(var(--hero-h) - 102px);
}.hrm-ui .hx-copy {direction:rtl;max-width:560px}

/* ظهور تدريجي */.hrm-ui .hx-rise {opacity:0;transform:translateY(24px);animation:hxRise .9s var(--ease-soft) forwards}@keyframes hxRise {to {opacity:1;transform:none}}.hrm-ui .hx-d1 {animation-delay:.05s}.hrm-ui .hx-d2 {animation-delay:.18s}.hrm-ui .hx-d3 {animation-delay:.31s}.hrm-ui .hx-d4 {animation-delay:.44s}.hrm-ui .hx-d5 {animation-delay:.57s}.hrm-ui .hx-d6 {animation-delay:.70s}

/* العنوان */.hrm-ui .hx-hero h1 {color:#fff;font-size:clamp(32px,3.9vw,46px);line-height:1.25;letter-spacing:-.5px;margin-bottom:14px}.hrm-ui .hx-hero h1 span {display:block}.hrm-ui .hx-hero h1 .accent {
  background:linear-gradient(100deg,#E8B45E 0%,#F3CE87 45%,#D0A24A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:hxSheen 7s ease-in-out infinite;
}@keyframes hxSheen {0%,100% {background-position:0% 50%}50% {background-position:100% 50%}}.hrm-ui .hx-hero .lede {
  font-size:15.5px;line-height:1.95;color:rgba(255,255,255,.7);
  max-width:470px;margin-bottom:24px;font-weight:400;
}

/* الأزرار — تستخدم أصناف الموقع .btn مع تكبير وتوهج داخل الهيرو */.hrm-ui .hx-btns {display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}.hrm-ui .hx-hero .btn {position:relative;overflow:hidden;height:48px;padding:0 26px;font-size:15px;border-radius:var(--radius)}.hrm-ui .hx-hero .btn-gold {
  background:linear-gradient(135deg,#E3B463,var(--gold-700));
  box-shadow:0 14px 34px -14px rgba(208,162,74,.95);
}.hrm-ui .hx-hero .btn-gold:hover {transform:translateY(-3px);box-shadow:0 20px 44px -14px rgba(208,162,74,1)}.hrm-ui .hx-hero .btn-link-light {
  background:transparent;border-color:transparent;color:rgba(255,255,255,.9);
  padding:0 10px;font-weight:600;
}.hrm-ui .hx-hero .btn-link-light:hover {color:#fff;transform:translateY(-2px)}.hrm-ui .hx-hero .btn-link-light::before {display:none}.hrm-ui .hx-hero .btn-ghost-light {
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.26);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}.hrm-ui .hx-hero .btn-ghost-light:hover {
  transform:translateY(-3px);background:rgba(255,255,255,.09);
  border-color:rgba(53,183,174,.8);box-shadow:0 16px 36px -18px rgba(27,209,186,.9);
}
/* لمعة تمر على الزر عند المرور */.hrm-ui .hx-hero .btn::before {
  content:"";position:absolute;top:0;bottom:0;width:60%;left:-80%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  transform:skewX(-18deg);transition:left .65s var(--ease-soft);
}.hrm-ui .hx-hero .btn:hover::before {left:130%}

/* سطر المزايا */.hrm-ui .hx-meta {display:flex;gap:22px;flex-wrap:wrap;color:rgba(255,255,255,.72);font-size:14px}.hrm-ui .hx-meta span + span {border-inline-start:1px solid rgba(255,255,255,.16);padding-inline-start:22px}.hrm-ui .hx-meta span {display:inline-flex;align-items:center;gap:8px}.hrm-ui .hx-meta svg {width:18px;height:18px;color:var(--teal-400);transition:.3s var(--ease-soft)}.hrm-ui .hx-meta span:hover svg {color:var(--glow-teal-2);transform:scale(1.12)}

/* ---- العمود الأيمن: بطاقة الشعار ---- */.hrm-ui .hx-visual {direction:rtl;position:relative;display:grid;place-items:center;min-height:0;perspective:1400px}.hrm-ui .hx-aura {
  position:absolute;width:min(720px,96%);aspect-ratio:1/.86;border-radius:50%;
  filter:blur(46px);pointer-events:none;
  background:
    radial-gradient(46% 46% at 42% 40%, rgba(27,209,186,.40), transparent 70%),
    radial-gradient(42% 42% at 66% 66%, rgba(229,162,60,.28), transparent 70%);
  animation:hxAura 9.3s ease-in-out infinite;
}@keyframes hxAura {0%,100% {transform:scale(1) translate3d(0,0,0);opacity:.6}50% {transform:scale(1.09) translate3d(0,-10px,0);opacity:.95}
}
/* شظايا بلورية طائرة */.hrm-ui .hx-shard {position:absolute;pointer-events:none;opacity:.48;filter:drop-shadow(0 0 12px rgba(40,184,166,.35))}.hrm-ui .hx-s1 {width:146px;top:5%;right:1%;animation:hxDrift 13s ease-in-out infinite}.hrm-ui .hx-s2 {width:182px;bottom:1%;right:12%;animation:hxDrift 17s ease-in-out infinite reverse}.hrm-ui .hx-s3 {width:118px;bottom:14%;left:1%;animation:hxDrift 15s ease-in-out infinite -4s}.hrm-ui .hx-s4 {width:94px;top:13%;left:6%;animation:hxDrift 19s ease-in-out infinite -8s}@keyframes hxDrift {0%,100% {transform:translate3d(0,0,0) rotate(0deg)}33% {transform:translate3d(-14px,-22px,0) rotate(7deg)}66% {transform:translate3d(12px,16px,0) rotate(-6deg)}
}
/* طبقة الطفو ← طبقة الميلان ← البطاقة الزجاجية */.hrm-ui .hx-float {animation:hxFloat 11s ease-in-out infinite;will-change:transform}@keyframes hxFloat {0% {transform:translate3d(0,0,0) rotate(0deg)}20% {transform:translate3d(5px,-10px,0) rotate(.32deg)}40% {transform:translate3d(2px,-19px,0) rotate(.12deg)}60% {transform:translate3d(-4px,-16px,0) rotate(-.26deg)}80% {transform:translate3d(-5px,-7px,0) rotate(-.14deg)}100% {transform:translate3d(0,0,0) rotate(0deg)}
}.hrm-ui .hx-tilt {transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}.hrm-ui .hx-card {
  position:relative;width:clamp(286px,27vw,396px);aspect-ratio:1/1.06;
  border-radius:var(--radius-xl);
  background:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 42%,rgba(10,33,56,.34));
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.18);
  display:grid;place-items:center;transform-style:preserve-3d;
}
/* حافة متوهجة تدور (تركوازي ⇄ ذهبي) */@property --hxa {syntax:'<angle>';inherits:false;initial-value:0deg}.hrm-ui .hx-card::before {
  content:"";position:absolute;inset:-1px;border-radius:calc(var(--radius-xl) + 1px);padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--hxa,0deg),
    var(--glow-teal-2), rgba(27,209,186,0) 22%,
    var(--glow-gold),   rgba(229,162,60,0) 52%,
    var(--glow-teal),   rgba(40,184,166,0) 78%,
    var(--glow-teal-2));
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:hxEdge 12s linear infinite;
}@keyframes hxEdge {to {--hxa:360deg}}
/* هالة تتنفس حول الزجاج */.hrm-ui .hx-card::after {
  content:"";position:absolute;inset:-14px;border-radius:34px;pointer-events:none;
  box-shadow:0 0 42px rgba(40,184,166,.30),0 0 90px rgba(229,162,60,.14);
  animation:hxHalo 6.7s ease-in-out infinite;
}@keyframes hxHalo {0%,100% {opacity:.45}50% {opacity:1}}
/* وهج يتبع المؤشر */.hrm-ui .hx-glare {
  position:absolute;inset:0;border-radius:var(--radius-xl);pointer-events:none;opacity:0;
  background:radial-gradient(340px 340px at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 62%);
  transition:opacity .4s var(--ease-soft);
}.hrm-ui .hx-card:hover .hx-glare {opacity:1}
/* قفل الشعار */.hrm-ui .hx-lockup {
  display:flex;align-items:center;gap:clamp(13px,1.5vw,20px);padding:8px;
  transform:translateZ(56px) translate3d(var(--px,0px),var(--py,0px),0);
  will-change:transform;
}.hrm-ui .hx-word {display:flex;flex-direction:column;align-items:flex-end;gap:5px}.hrm-ui .hx-word span {
  font-weight:800;font-size:clamp(19px,1.95vw,28px);letter-spacing:1.4px;line-height:1.15;
  color:#EFB35A;text-shadow:0 0 22px rgba(208,162,74,.4);
}.hrm-ui .hx-mark {
  width:clamp(76px,7.4vw,106px);height:auto;
  filter:drop-shadow(0 14px 30px rgba(4,20,34,.75)) drop-shadow(0 0 26px rgba(40,184,166,.28));
}
/* البلورة: الضوء يلتقط كل وجه على حدة */.hrm-ui .hx-gl {opacity:0;mix-blend-mode:screen;animation:hxGleam 12s cubic-bezier(.45,0,.35,1) infinite;will-change:opacity}.hrm-ui .hx-gl0 {animation-delay:0s}.hrm-ui .hx-gl1 {animation-delay:1.4s}.hrm-ui .hx-gl2 {animation-delay:2.9s}.hrm-ui .hx-gl3 {animation-delay:4.2s}.hrm-ui .hx-gl4 {animation-delay:5.6s}.hrm-ui .hx-gl5 {animation-delay:7.1s}.hrm-ui .hx-gl6 {animation-delay:8.3s}.hrm-ui .hx-gl7 {animation-delay:9.6s}.hrm-ui .hx-gl8 {animation-delay:10.8s}@keyframes hxGleam {0% {opacity:0}5% {opacity:.26}13% {opacity:.04}20%,100% {opacity:0}}
/* شريط لمعان يعبر الشعار */.hrm-ui .hx-sweep {animation:hxSweep 8.5s cubic-bezier(.5,0,.35,1) infinite;will-change:transform;opacity:.75}@keyframes hxSweep {0% {transform:translateX(0)}55%,100% {transform:translateX(760px)}}
/* ومضات عند رؤوس الأوجه */.hrm-ui .hx-sp {opacity:0;transform-box:fill-box;transform-origin:center;animation:hxSpark 9s ease-in-out infinite;will-change:opacity,transform}.hrm-ui .hx-sp0 {animation-delay:.6s}.hrm-ui .hx-sp1 {animation-delay:3.1s}.hrm-ui .hx-sp2 {animation-delay:5.4s}.hrm-ui .hx-sp3 {animation-delay:7.2s}@keyframes hxSpark {0% {opacity:0;transform:scale(.35)}6% {opacity:.9;transform:scale(1)}14% {opacity:0;transform:scale(1.35)}100% {opacity:0;transform:scale(.35)}}
/* مؤشر التمرير */.hrm-ui .hx-cue {display:none}.hrm-ui .hx-mouse {width:22px;height:34px;border:1.5px solid rgba(255,255,255,.32);border-radius:12px;position:relative}.hrm-ui .hx-mouse i {
  position:absolute;left:50%;top:7px;width:3px;height:6px;border-radius:2px;
  background:var(--teal-400);transform:translateX(-50%);animation:hxWheel 1.8s ease-in-out infinite;
}@keyframes hxWheel {0% {opacity:0;transform:translate(-50%,-4px)}35% {opacity:1}100% {opacity:0;transform:translate(-50%,12px)}}

/* ---------- 12. الاستجابة ---------- */@media (max-width:1080px) {.hrm-ui .footer-grid {grid-template-columns:1fr 1fr 1fr}.hrm-ui .g-4 {grid-template-columns:repeat(2,1fr)}
}@media (max-width:900px) {.hrm-ui .nav {display:none}.hrm-ui .g-3 {grid-template-columns:repeat(2,1fr)}.hrm-ui .page-hero h1 {font-size:34px}
  /* الهيرو المتحرك: عمود واحد، البطاقة فوق النص */.hrm-ui .hx-hero .hx-grid {grid-template-columns:1fr;justify-items:center;text-align:center;min-height:0;gap:8px}.hrm-ui .hx-copy {max-width:620px}.hrm-ui .hx-btns, .hrm-ui .hx-meta {justify-content:center}.hrm-ui .hx-hero .lede {margin-inline:auto}.hrm-ui .hx-visual {min-height:390px;order:-1}
}@media (max-width:680px) {.hrm-ui .g-2, .hrm-ui .g-3, .hrm-ui .g-4 {grid-template-columns:1fr}.hrm-ui .footer-grid {grid-template-columns:1fr 1fr}.hrm-ui .field-row {grid-template-columns:1fr}.hrm-ui .social-row {grid-template-columns:1fr}.hrm-ui .sec {padding:44px 0}.hrm-ui .footer-bottom {flex-direction:column;text-align:center}.hrm-ui .hx-meta {gap:16px;font-size:13px}.hrm-ui .hx-hero .btn {height:48px;padding:0 22px;font-size:14.5px}.hrm-ui .hx-cue {display:none}
}

/* ---------- 13. تقليل الحركة (إتاحة) ---------- */@media (prefers-reduced-motion:reduce) {.hrm-ui .hx-hero *, .hrm-ui .hx-hero *::before, .hrm-ui .hx-hero *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }.hrm-ui .hx-rise {opacity:1;transform:none}
}
/* ============================================================
   14. بلورة الهيرو المتحركة (Animated Hero Crystal)
   ------------------------------------------------------------
   الأصناف مسبوقة بـ hxc- ومحصورة داخل .hx-hero
   ============================================================ */.hrm-ui .hx-visual .hx-float {width:100%;display:grid;place-items:center}.hrm-ui .hx-visual .hx-tilt {width:100%;display:grid;place-items:center}.hrm-ui .hxc-stage {
  width:min(258px,100%);display:grid;place-items:center;
  transform-style:preserve-3d;
}.hrm-ui .hxc {
  width:min(258px,100%);height:auto;overflow:visible;
  filter:drop-shadow(0 34px 70px rgba(2,12,22,.65));
}

/* الهالة الخلفية تتنفس */.hrm-ui .hxc-glow {transform-box:fill-box;transform-origin:center;animation:hxcBreath 8.5s ease-in-out infinite}.hrm-ui .hxc-glow2 {animation-duration:12s;animation-direction:reverse}@keyframes hxcBreath {0%,100% {opacity:.62;transform:scale(1)}50% {opacity:1;transform:scale(1.07)}}

/* ترنّح لطيف لجسم البلورة */.hrm-ui .hxc-body {transform-box:fill-box;transform-origin:50% 56%;animation:hxcSway 16s ease-in-out infinite}@keyframes hxcSway {0%,100% {transform:rotate(0deg) translateY(0)}25% {transform:rotate(1.6deg) translateY(-9px)}50% {transform:rotate(0deg) translateY(-14px)}75% {transform:rotate(-1.6deg) translateY(-6px)}
}

/* الأوجه: الضوء يلتقط وجهًا بعد وجه */.hrm-ui .hxc-face {opacity:.5;animation:hxcFace 10s ease-in-out infinite}.hrm-ui .hxc-f0 {animation-delay:0s}.hrm-ui .hxc-f1 {animation-delay:1.2s}.hrm-ui .hxc-f2 {animation-delay:2.4s}.hrm-ui .hxc-f3 {animation-delay:3.6s}.hrm-ui .hxc-f4 {animation-delay:4.8s}.hrm-ui .hxc-f5 {animation-delay:6s}.hrm-ui .hxc-f6 {animation-delay:7.2s}.hrm-ui .hxc-f7 {animation-delay:8.4s}@keyframes hxcFace {0%,100% {opacity:.42}18% {opacity:1}40% {opacity:.55}}

/* توهج الحواف يتنفس */.hrm-ui .hxc-blurred {animation:hxcEdgeGlow 6.4s ease-in-out infinite}@keyframes hxcEdgeGlow {0%,100% {opacity:.55}50% {opacity:1}}

/* ضوء يجري على الحواف */.hrm-ui .hxc-run {stroke-dasharray:22 700;stroke-dashoffset:22;opacity:0;animation:hxcRun 5.2s var(--ease-soft) infinite}.hrm-ui .hxc-r0 {animation-delay:0s}.hrm-ui .hxc-r1 {animation-delay:.8s}.hrm-ui .hxc-r2 {animation-delay:1.7s}.hrm-ui .hxc-r3 {animation-delay:2.5s}.hrm-ui .hxc-r4 {animation-delay:3.4s}.hrm-ui .hxc-r5 {animation-delay:4.2s}@keyframes hxcRun {0% {stroke-dashoffset:22;opacity:0}12% {opacity:.95}70% {opacity:.8}100% {stroke-dashoffset:-320;opacity:0}
}

/* الرؤوس تلمع */.hrm-ui .hxc-node {transform-box:fill-box;transform-origin:center;animation:hxcTwinkle 4.6s ease-in-out infinite}.hrm-ui .hxc-n0 {animation-delay:0s}.hrm-ui .hxc-n1 {animation-delay:.5s}.hrm-ui .hxc-n2 {animation-delay:1s}.hrm-ui .hxc-n3 {animation-delay:1.6s}.hrm-ui .hxc-n4 {animation-delay:2.2s}.hrm-ui .hxc-n5 {animation-delay:2.9s}.hrm-ui .hxc-n6 {animation-delay:3.5s}@keyframes hxcTwinkle {0%,100% {opacity:.55;transform:scale(.85)}50% {opacity:1;transform:scale(1.25)}}.hrm-ui .hxc-halo {opacity:.22;animation:hxcHalo 7s ease-in-out infinite}.hrm-ui .hxc-h0 {animation-delay:0s}.hrm-ui .hxc-h1 {animation-delay:1.3s}.hrm-ui .hxc-h2 {animation-delay:2.6s}.hrm-ui .hxc-h3 {animation-delay:3.9s}.hrm-ui .hxc-h4 {animation-delay:5.2s}@keyframes hxcHalo {0%,100% {opacity:.12}50% {opacity:.42}}

/* الأرضية الشعاعية */.hrm-ui .hxc-floor {opacity:.75;animation:hxcFloor 9s ease-in-out infinite}@keyframes hxcFloor {0%,100% {opacity:.5}50% {opacity:.9}}

/* الجسيمات الطائرة */.hrm-ui .hxc-dust {animation:hxcDust 6s ease-in-out infinite}.hrm-ui .hxc-d0 {animation-delay:0s;animation-duration:5.2s}.hrm-ui .hxc-d1 {animation-delay:.7s;animation-duration:6.6s}.hrm-ui .hxc-d2 {animation-delay:1.5s;animation-duration:7.4s}.hrm-ui .hxc-d3 {animation-delay:2.3s;animation-duration:5.8s}.hrm-ui .hxc-d4 {animation-delay:3.1s;animation-duration:8.1s}.hrm-ui .hxc-d5 {animation-delay:4s;animation-duration:6.9s}@keyframes hxcDust {0%,100% {opacity:.18}50% {opacity:.95}}

/* ============================================================
   15. الخلية العصبية في بانرات الصفحات الداخلية
   ============================================================ */.hrm-ui .page-hero .hx-mesh {
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;display:block;pointer-events:none;opacity:.9;
}.hrm-ui .page-hero .deco {z-index:2}.hrm-ui .page-hero .container {z-index:3}@media (max-width:1080px) {.hrm-ui .site-header .nav {gap:16px}.hrm-ui .site-header .nav a {font-size:13.5px}
}@media (max-width:980px) {.hrm-ui .site-header .icon-btn {display:none}
}@media (max-width:900px) {.hrm-ui .nav-toggle {display:flex}.hrm-ui .site-header .container {gap:12px}.hrm-ui .site-header .nav {
    display:none;position:absolute;top:var(--header-h);inset-inline:0;
    background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 14px;
    box-shadow:var(--shadow-lg);
  }.hrm-ui .site-header.nav-open .nav {display:flex;animation:hxRise .35s var(--ease-soft) forwards}.hrm-ui .site-header .nav a {padding:12px 4px;border-bottom:1px solid var(--line-2);font-size:15px;white-space:normal}.hrm-ui .site-header .nav a.active::after {display:none}.hrm-ui .hxc-stage, .hrm-ui .hxc {width:min(340px,80%)}
}@media (max-width:680px) {.hrm-ui .site-header .header-actions .btn-outline {display:none}.hrm-ui .hxc-stage, .hrm-ui .hxc {width:min(280px,78%)}.hrm-ui .hx-meta span + span {border:0;padding-inline-start:0}
}


/* أيقونة السلة بالهيدر — متاحة للزائر وللمستخدم المسجَّل معًا.
   تستخدم .icon-btn الجاهزة أصلًا بالتصميم (مقاس صغير مضغوط) عشان ما
   تزاحم بقية عناصر الهيدر. */
.hrm-ui .hrm-cart-link{position:relative}
.hrm-ui .hrm-cart-badge{position:absolute;top:2px;inset-inline-end:2px;background:var(--gold,#D0A24A);color:#fff;font-size:10px;font-weight:800;line-height:1;min-width:15px;height:15px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid #fff}
@media (max-width:980px){
  /* القاعدة العامة تخفي .icon-btn تحت 980px، لكن سلة الدورات تبقى ظاهرة دائمًا */
  .hrm-ui .site-header .icon-btn.hrm-cart-link{display:inline-flex !important}
}

/* ============================================================
   نافذة السلة المنسدلة (Cart Drawer)
   ملاحظة: لا يوجد مفهوم "كمية" لكل دورة (كل دورة تُشترى مرة واحدة)،
   فاستغنينا عن أزرار +/- الموجودة بتصميم المرجع، واكتفينا بزر حذف.
   ============================================================ */
.cart-drawer-overlay{position:fixed;inset:0;background:rgba(10,33,56,.55);opacity:0;visibility:hidden;transition:opacity .25s var(--ease-soft,ease);z-index:200}
.cart-drawer-overlay.open{opacity:1;visibility:visible}

.cart-drawer{
  position:fixed;top:0;left:0;width:min(420px,92%);background:#fff;
  height:100vh;height:100dvh;
  box-shadow:var(--shadow-lg);z-index:201;display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .3s var(--ease-soft,ease);
  font-family:var(--font);direction:rtl;
  max-width:100%;overflow:hidden;
}
.cart-drawer.open{transform:translateX(0)}

.cart-drawer .cd-head{display:flex;flex-shrink:0;align-items:flex-start;gap:12px;padding:22px 22px 18px;border-bottom:1px solid var(--line-2)}
.cart-drawer .cd-close{order:3;margin-inline-start:auto;width:32px;height:32px;border:0;background:var(--bg-soft);border-radius:50%;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;flex:0 0 auto}
.cart-drawer .cd-close:hover{background:var(--line-2);color:var(--ink)}
.cart-drawer .cd-head-icon{width:40px;height:40px;border-radius:50%;background:var(--teal-100);color:var(--teal-700);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.cart-drawer .cd-head-text{flex:1;min-width:0}
.cart-drawer .cd-head-icon svg{width:20px;height:20px}
.cart-drawer .cd-head-text h3{margin:0 0 2px;font-size:16px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px}
.cart-drawer .cd-head-text p{margin:0;font-size:12.5px;color:var(--muted)}
.cart-drawer .cd-count-badge{background:var(--navy);color:#fff;font-size:11px;font-weight:800;min-width:20px;height:20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}

.cart-drawer .cd-body{flex:1;overflow-y:auto;padding:14px 18px}
.cart-drawer .cd-empty{color:var(--muted);font-size:13.5px;text-align:center;padding:40px 10px}

.cart-drawer .cd-item{position:relative;display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--line-2);border-radius:var(--radius);margin-bottom:10px}
.cart-drawer .cd-item-thumb{width:64px;height:64px;border-radius:var(--radius-sm);background-size:cover;background-position:center;background-color:var(--bg-soft);flex:0 0 auto}
.cart-drawer .cd-item-info{flex:1;min-width:0}
.cart-drawer .cd-item-info h4{margin:0 0 3px;font-size:13.5px;font-weight:700;line-height:1.4}
.cart-drawer .cd-item-info h4 a{color:var(--ink);text-decoration:none}
.cart-drawer .cd-item-info h4 a:hover{color:var(--teal)}
.cart-drawer .cd-item-info p{margin:0 0 6px;font-size:11.5px;color:var(--muted)}
.cart-drawer .cd-item-price{display:flex;align-items:center;gap:8px;font-size:13px}
.cart-drawer .cd-item-price b{color:var(--teal-700);font-weight:800}
.cart-drawer .cd-item-price s{color:var(--muted);font-size:11.5px}
.cart-drawer .cd-item-remove{position:absolute;top:8px;left:8px;width:22px;height:22px;border:0;background:var(--bg-soft);color:var(--muted);border-radius:50%;font-size:14px;line-height:1;cursor:pointer}
.cart-drawer .cd-item-remove:hover{background:#FBEAE8;color:#C0392B}

.cart-drawer .cd-footer{border-top:1px solid var(--line-2);padding:16px 22px calc(22px + env(safe-area-inset-bottom, 0px));background:var(--bg-soft-2);flex-shrink:0}
.cart-drawer .cd-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin-bottom:8px}
.cart-drawer .cd-row b{color:var(--ink);font-weight:700}
.cart-drawer .cd-row-discount b{color:#1E8E4C}
.cart-drawer .cd-row-total{border-top:1px dashed var(--line);padding-top:10px;margin-top:2px;font-size:15px}
.cart-drawer .cd-row-total span{color:var(--ink);font-weight:700}
.cart-drawer .cd-row-total b{color:var(--navy);font-size:18px}

.cart-drawer .cd-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:12px;border-radius:10px;font-weight:800;font-size:14px;margin-top:10px;text-decoration:none;border:1px solid transparent;cursor:pointer}
.cart-drawer .cd-btn-checkout{background:var(--teal);color:#fff}
.cart-drawer .cd-btn-checkout:hover{background:var(--teal-700);color:#fff}
.cart-drawer .cd-btn-continue{background:#fff;color:var(--navy);border-color:var(--line)}
.cart-drawer .cd-btn-continue:hover{border-color:var(--teal);color:var(--teal)}

@media (max-width:480px){
  .cart-drawer{width:100%}
}