/* ============================================================
   أنماط الصفحات — Hermas Institute
   ============================================================ */

/* =========================================================
   الصفحة الرئيسية — Home
   ========================================================= */.hrm-ui .home-hero {
  background:#101F38;color:#fff;position:relative;overflow:hidden;
}.hrm-ui .home-hero .container {
  display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:0;
  min-height:540px;
}.hrm-ui .home-hero-text {padding:56px 0;text-align:right;direction:rtl}.hrm-ui .home-hero-text h1 {
  color:#fff;font-size:52px;line-height:1.32;letter-spacing:-1px;margin-bottom:20px;
}.hrm-ui .home-hero-text h1 .accent {color:var(--teal-400);display:block}.hrm-ui .home-hero-text .lede {
  font-size:16.5px;color:rgba(255,255,255,.8);line-height:2;max-width:470px;
  margin:0 0 30px auto;
}.hrm-ui .home-hero-btns {display:flex;gap:12px;justify-content:flex-start;margin-bottom:26px}.hrm-ui .home-hero-meta {
  display:flex;gap:22px;justify-content:flex-start;flex-wrap:wrap;
  font-size:13px;color:rgba(255,255,255,.82);
}.hrm-ui .home-hero-meta {gap:0}.hrm-ui .home-hero-meta span {display:inline-flex;align-items:center;gap:7px;padding:0 16px}.hrm-ui .home-hero-meta span + span {border-inline-start:1px solid rgba(255,255,255,.28)}.hrm-ui .home-hero-meta span:last-child {padding-inline-end:0}.hrm-ui .home-hero-meta span:first-child {padding-inline-start:0}.hrm-ui .home-hero-meta svg {width:15px;height:15px;color:var(--teal-400)}.hrm-ui .home-hero-visual {
  position:relative;align-self:stretch;min-height:540px;
  background:linear-gradient(135deg,#123B5E,#0B2B48);
  display:flex;align-items:center;justify-content:center;
  clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);
  margin-inline-start:-140px;padding-inline-start:140px;
}.hrm-ui .home-hero-visual .frame {
  width:88%;height:78%;border-radius:14px;overflow:hidden;position:relative;
  background:#0F3352;display:flex;align-items:center;justify-content:center;
}.hrm-ui .home-hero-visual .frame::before {
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 20% 15%,rgba(38,170,177,.28),transparent 60%),
    linear-gradient(160deg,#14405F,#0A2942);
}.hrm-ui .corner-cut {
  position:absolute;bottom:0;right:0;width:0;height:0;
  border-right:120px solid var(--teal);border-top:120px solid transparent;opacity:.95;
}.hrm-ui .corner-cut-2 {position:absolute;bottom:0;right:118px;width:0;height:0;
  border-right:70px solid #fff;border-top:150px solid transparent;opacity:.95}

/* شريط الإحصائيات */.hrm-ui .stats-bar {
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);margin-top:-0px;padding:26px 10px;
  display:grid;grid-template-columns:repeat(4,1fr);
}.hrm-ui .stat-cell {display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 16px}.hrm-ui .stat-cell + .stat-cell {border-inline-start:1px solid var(--line-2)}.hrm-ui .stat-cell .ico {width:34px;height:34px;color:var(--teal)}.hrm-ui .stat-cell .num {font-size:24px;font-weight:800;color:var(--ink);line-height:1.25;direction:ltr;text-align:right}.hrm-ui .stat-cell .lbl {font-size:12.5px;color:var(--muted);line-height:1.6;text-align:right}

/* ---------- بطاقات المسارات ----------
   أسلوب فاتح بحدّ شعري بدل المستطيلات الكحلية الصمّاء: كل بطاقة تحمل لونها
   في متغيّر --accent، فيقود الشارة والسهم والشريط الجانبي والتوهّج الركني
   دفعة واحدة. التفاعل كله CSS خالص بلا أي سكربت. */
.hrm-ui .tracks-grid {
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
}
.hrm-ui .track-card {
  --accent:var(--teal);--accent-soft:rgba(15,142,153,.10);
  --accent-line:rgba(15,142,153,.30);--accent-glow:rgba(15,142,153,.16);
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  min-height:136px;padding:24px 26px;color:var(--ink);text-align:start;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s, border-color .32s;
}
/* توهّج ركني بلون البطاقة — يعمّق السطح دون خلفية صمّاء */
.hrm-ui .track-card::before {
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .32s;
  background:radial-gradient(420px 180px at 100% 0%, var(--accent-glow), transparent 70%);
}
/* شريط جانبي ينمو من الوسط إلى كامل الارتفاع */
.hrm-ui .track-card::after {
  content:"";position:absolute;inset-block:50% 50%;inset-inline-start:0;width:3px;
  background:var(--accent);border-radius:0 3px 3px 0;transition:inset-block .34s cubic-bezier(.2,.7,.3,1);
}
.hrm-ui .track-card:hover {
  transform:translateY(-4px);
  border-color:var(--accent-line);
  box-shadow:var(--shadow-lg);
}
.hrm-ui .track-card:hover::before {opacity:1}
.hrm-ui .track-card:hover::after {inset-block:14% 14%}

.hrm-ui .track-card .t-badge {
  width:54px;height:54px;border-radius:15px;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;transition:.32s;
}
.hrm-ui .track-card:hover .t-badge {
  background:var(--accent);color:#fff;border-color:transparent;
}
.hrm-ui .track-card .t-badge .t-ico {width:25px;height:25px;color:currentColor;opacity:1}
.hrm-ui .track-card .t-body {min-width:0}
.hrm-ui .track-card h3 {
  color:var(--navy);font-size:18px;margin:0 0 6px;transition:color .32s;
}
.hrm-ui .track-card:hover h3 {color:var(--accent)}
.hrm-ui .track-card p {font-size:13px;color:var(--body);line-height:1.75;margin:0}
.hrm-ui .track-card .go {
  width:36px;height:36px;border-radius:50%;flex:0 0 36px;
  border:1.5px solid var(--line);color:var(--muted);
  display:flex;align-items:center;justify-content:center;margin:0;
  transition:.32s cubic-bezier(.2,.7,.3,1);
}
.hrm-ui .track-card:hover .go {
  background:var(--accent);border-color:var(--accent);color:#fff;transform:translateX(-5px);
}
.hrm-ui .track-card .go svg {width:14px;height:14px}
/* صورة المجال إن رُفعت: تملأ البطاقة مع حجاب أبيض يُبقي النص مقروءًا */
.hrm-ui .track-card .t-img {
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.10;
}
/* اللون بالتناوب: تركوازي وذهبي */
.hrm-ui .tc-business, .hrm-ui .tc-data {
  --accent:var(--teal);--accent-soft:rgba(15,142,153,.10);
  --accent-line:rgba(15,142,153,.30);--accent-glow:rgba(15,142,153,.16);
}
.hrm-ui .tc-design, .hrm-ui .tc-code {
  --accent:var(--gold-700);--accent-soft:rgba(168,132,47,.12);
  --accent-line:rgba(168,132,47,.32);--accent-glow:rgba(168,132,47,.18);
}

/* بطاقات الدورات */.hrm-ui .courses-head {display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.hrm-ui .orn {display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px}.hrm-ui .orn span {width:16px;height:2.5px;background:var(--teal);border-radius:2px;display:block}.hrm-ui .orn i {width:6px;height:6px;border-radius:50%;background:var(--teal);display:block}.hrm-ui .sec-title.plain::after {display:none}.hrm-ui .sec-title.plain {padding-bottom:0}.hrm-ui .course-card {
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:.25s;display:flex;flex-direction:column;
}.hrm-ui .course-card:hover {transform:translateY(-4px);box-shadow:var(--shadow)}.hrm-ui .course-thumb {
  height:132px;position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#132C4A,#081726);
}.hrm-ui .course-thumb .thumb-tag {
  position:absolute;top:10px;inset-inline-end:10px;
  background:var(--gold);color:#fff;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:5px;
}.hrm-ui .course-thumb .thumb-tag-enrolled {background:var(--teal)}
.hrm-ui .course-thumb .thumb-meta {
  position:absolute;top:10px;inset-inline-start:10px;display:flex;gap:8px;
  font-size:11px;color:rgba(255,255,255,.92);
}.hrm-ui .course-thumb .thumb-meta span {background:rgba(0,0,0,.34);padding:3px 8px;border-radius:5px}
/* صورة الدورة الفعلية داخل رأس البطاقة — تملأ الإطار دون تشويه،
   وتبقى تحت الشارات لأنها الطبقة الأساسية. */.hrm-ui .course-thumb .thumb-img {
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}.hrm-ui .course-body {padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}.hrm-ui .course-body h4 {font-size:15px;margin-bottom:7px;line-height:1.6}.hrm-ui .course-body p {font-size:12.5px;color:var(--muted);line-height:1.8;margin-bottom:14px}.hrm-ui .course-foot {
  display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--line-2);
}.hrm-ui .price {font-size:15px;font-weight:800;color:var(--ink)}.hrm-ui .rating {display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--body)}.hrm-ui .rating svg {width:13px;height:13px;color:var(--gold)}.hrm-ui .dots {display:flex;gap:7px;justify-content:center;margin-top:26px}.hrm-ui .dots i {width:8px;height:8px;border-radius:50%;background:#D6DEE6;display:block}.hrm-ui .dots i.on {background:var(--teal);width:22px;border-radius:5px}.hrm-ui .carousel-arrow {
  width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--body);box-shadow:var(--shadow-sm);
}.hrm-ui .carousel-arrow svg {width:14px;height:14px}

/* لماذا تختار */.hrm-ui .why-grid {display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.hrm-ui .why-item {text-align:center;padding:10px 6px}.hrm-ui .why-item .ico {
  width:44px;height:44px;margin:0 auto 12px;color:var(--teal);
}.hrm-ui .why-item h5 {font-size:14px;margin-bottom:6px;color:var(--ink);font-weight:700}.hrm-ui .why-item p {font-size:12px;color:var(--muted);line-height:1.8}


/* آراء المتدربين */.hrm-ui .tst-card {background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}.hrm-ui .tst-card .q {width:22px;height:22px;color:var(--teal);opacity:.5;margin-bottom:10px}.hrm-ui .tst-card p {font-size:13.5px;line-height:2;color:var(--body);margin-bottom:18px}.hrm-ui .tst-user {display:flex;align-items:center;gap:11px}.hrm-ui .avatar {
  width:42px;height:42px;border-radius:50%;background:linear-gradient(140deg,#D8E2EA,#B9C8D6);
  display:flex;align-items:center;justify-content:center;color:#5D7285;flex-shrink:0;
}.hrm-ui .avatar svg {width:20px;height:20px}.hrm-ui .tst-user h6 {margin:0;font-size:14px;color:var(--ink);font-weight:700}.hrm-ui .tst-user span {font-size:12px;color:var(--muted)}

/* CTA */.hrm-ui .cta-band {
  background:linear-gradient(255deg,var(--navy) 0%,var(--teal-700) 100%);
  border-radius:var(--radius-lg);padding:32px 34px;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}.hrm-ui .cta-band .ico {width:52px;height:52px;color:#fff;opacity:.95}.hrm-ui .cta-band .txt {display:flex;align-items:center;gap:18px}.hrm-ui .cta-band h3 {color:#fff;font-size:22px;margin-bottom:5px}.hrm-ui .cta-band p {font-size:13.5px;color:rgba(255,255,255,.86)}

/* =========================================================
   صفحة من نحن — About
   ========================================================= */.hrm-ui .about-hero .container {display:grid;grid-template-columns:1fr 1.62fr;gap:46px;align-items:center;padding:46px 0 50px}.hrm-ui .about-hero h1 {font-size:36px;color:#fff;margin-bottom:10px}.hrm-ui .about-hero .tag {font-size:16px;color:rgba(255,255,255,.85);margin-bottom:30px}.hrm-ui .about-badges {display:flex;gap:0;justify-content:flex-start}.hrm-ui .about-badges .b {text-align:center;padding:0 26px}.hrm-ui .about-badges .b + .b {border-inline-start:1px solid rgba(255,255,255,.22)}.hrm-ui .about-badges .b:first-child {padding-inline-start:0}.hrm-ui .about-badges .b .ico {width:30px;height:30px;color:#fff;margin:0 auto 10px;opacity:.95}.hrm-ui .about-badges .b .n {font-size:21px;font-weight:800;color:#fff;line-height:1.3;direction:ltr}.hrm-ui .about-badges .b .l {font-size:12px;color:rgba(255,255,255,.72)}.hrm-ui .about-hero-media {
  border-radius:var(--radius-lg);overflow:hidden;height:340px;
  background:linear-gradient(150deg,#0E6B72,#0B2C46);position:relative;
  display:flex;align-items:center;justify-content:center;
}.hrm-ui .about-hero-media::after {content:"";position:absolute;inset:0;background:rgba(11,44,70,.32)}.hrm-ui .two-col {display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}.hrm-ui .about-text p {font-size:14.5px;line-height:2.1;color:var(--body)}.hrm-ui .mission-card {
  background:var(--bg-soft-2);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:26px 28px;
}.hrm-ui .mission-card .mh {display:flex;align-items:center;gap:10px;justify-content:flex-start;margin-bottom:14px}.hrm-ui .mission-card .mh h3 {font-size:20px;color:var(--teal)}.hrm-ui .mission-card .mh svg {width:22px;height:22px;color:var(--teal)}.hrm-ui .mission-card p {font-size:14px;line-height:2.1;color:var(--body)}.hrm-ui .goal-card {
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);padding:24px 22px;
  text-align:center;box-shadow:var(--shadow-sm);transition:.25s;
}.hrm-ui .goal-card:hover {transform:translateY(-4px);box-shadow:var(--shadow)}.hrm-ui .goal-card .ico {width:46px;height:46px;margin:0 auto 16px;color:var(--teal)}.hrm-ui .goal-card p {font-size:13px;line-height:2;color:var(--body)}.hrm-ui .metrics {
  background:var(--bg-soft-2);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:28px 16px;display:grid;grid-template-columns:repeat(4,1fr);
}.hrm-ui .metric {display:flex;align-items:center;justify-content:center;gap:14px}.hrm-ui .metric + .metric {border-inline-start:1px solid var(--line)}.hrm-ui .metric .ico {width:36px;height:36px;color:var(--teal)}.hrm-ui .metric .n {font-size:24px;font-weight:800;color:var(--ink);line-height:1.2;direction:ltr;text-align:right}.hrm-ui .metric .l {font-size:12.5px;color:var(--muted)}.hrm-ui .video-band {
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
  background:linear-gradient(200deg,#0F3D63,#0A2740);color:#fff;
  padding:38px 36px;display:flex;align-items:center;justify-content:space-between;gap:30px;
}.hrm-ui .video-band h3 {color:#fff;font-size:21px;margin-bottom:8px}.hrm-ui .video-band p {font-size:13.5px;color:rgba(255,255,255,.8);line-height:1.95;max-width:430px;margin-bottom:20px}.hrm-ui .play-btn {
  width:66px;height:66px;border-radius:50%;background:var(--teal);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 0 0 12px rgba(23,147,155,.22);
}.hrm-ui .play-btn svg {width:22px;height:22px;color:#fff;margin-inline-start:3px}

/* =========================================================
   صفحة المسارات — Paths
   ========================================================= */.hrm-ui .paths-stats {
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:22px 10px;display:grid;grid-template-columns:repeat(4,1fr);
}.hrm-ui .paths-stats .cell {display:flex;align-items:center;justify-content:center;gap:12px}.hrm-ui .paths-stats .cell + .cell {border-inline-start:1px solid var(--line-2)}.hrm-ui .paths-stats .ico {width:26px;height:26px;color:var(--teal)}.hrm-ui .paths-stats .n {font-size:21px;font-weight:800;color:var(--ink);line-height:1.2;direction:ltr;text-align:right}.hrm-ui .paths-stats .l {font-size:12.5px;color:var(--muted)}.hrm-ui .toolbar {display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:30px 0 22px}.hrm-ui .paths-grid {display:flex;flex-wrap:wrap;justify-content:center;gap:22px}.hrm-ui .paths-grid > * {width:calc(33.333% - 15px)}.hrm-ui #pathsGrid.list-view > * {width:100%}.hrm-ui .toolbar h3 {font-size:19px}.hrm-ui .view-toggle {display:flex;gap:10px}.hrm-ui .chip {
  height:38px;padding:0 16px;border-radius:8px;border:1px solid var(--line);background:#fff;
  display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--body);transition:.2s;
}.hrm-ui .chip svg {width:15px;height:15px}.hrm-ui .chip:hover {border-color:var(--teal);color:var(--teal)}.hrm-ui .chip.on {background:var(--teal);border-color:var(--teal);color:#fff}.hrm-ui .select-wrap {position:relative}.hrm-ui .select-wrap select {
  height:38px;border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:0 14px 0 34px;font-size:13.5px;color:var(--body);appearance:none;outline:none;min-width:190px;
}.hrm-ui .select-wrap svg {position:absolute;inset-inline-start:12px;top:12px;width:14px;height:14px;color:var(--muted);pointer-events:none}.hrm-ui .path-card {
  border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;background:#fff;
  box-shadow:var(--shadow-sm);transition:.25s;display:flex;flex-direction:column;
}.hrm-ui .path-card:hover {transform:translateY(-4px);box-shadow:var(--shadow)}.hrm-ui .path-cover {
  height:126px;position:relative;display:flex;align-items:center;justify-content:center;
}.hrm-ui .path-cover::after {content:"";position:absolute;inset:0;background:rgba(6,22,38,.45)}.hrm-ui .path-cover .badge-top {
  position:absolute;top:10px;inset-inline-end:10px;z-index:3;
  background:var(--gold);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:5px;
}.hrm-ui .path-cover .sq {
  position:relative;z-index:2;width:54px;height:54px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:#fff;
}.hrm-ui .path-cover .sq svg {width:24px;height:24px}.hrm-ui .pc-business {background:linear-gradient(150deg,#123E63,#0A2540)}.hrm-ui .pc-code {background:linear-gradient(150deg,#3B2A72,#1A1240)}.hrm-ui .pc-data {background:linear-gradient(150deg,#14456B,#0B2742)}.hrm-ui .pc-market {background:linear-gradient(150deg,#17604A,#0A3227)}.hrm-ui .pc-eng {background:linear-gradient(150deg,#153B5C,#0A2540)}.hrm-ui .sq-business {background:#C9A24B}.hrm-ui .sq-code {background:#6C4FD6}.hrm-ui .sq-data {background:#1E8FA8}.hrm-ui .sq-market {background:#20A15F}.hrm-ui .sq-eng {background:#2E7BD6}.hrm-ui .path-body {padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}.hrm-ui .path-body h4 {font-size:16px;margin-bottom:8px}.hrm-ui .path-body p {font-size:12.5px;color:var(--muted);line-height:1.9;margin-bottom:14px}.hrm-ui .path-meta {display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--body);margin-bottom:16px}.hrm-ui .path-meta span {display:inline-flex;align-items:center;gap:5px}.hrm-ui .path-meta svg {width:13px;height:13px;color:var(--muted)}.hrm-ui .path-body .btn {margin-top:auto}

/* =========================================================
   صفحة تواصل معنا — Contact
   ========================================================= */.hrm-ui .contact-hero {position:relative;overflow:hidden}.hrm-ui .contact-hero::before {
  content:"";position:absolute;inset:0;
  background:linear-gradient(255deg,rgba(14,61,99,.94),rgba(15,124,132,.86));z-index:1;
}.hrm-ui .contact-hero .container {position:relative;z-index:2}.hrm-ui .contact-grid {display:grid;grid-template-columns:1fr 1.68fr;gap:32px;align-items:start}.hrm-ui .contact-form-card {
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:32px 34px;box-shadow:var(--shadow);
}.hrm-ui .contact-form-card h3 {font-size:21px;text-align:center;margin-bottom:8px}.hrm-ui .contact-form-card .sub {text-align:center;font-size:13.5px;color:var(--muted);margin-bottom:26px}.hrm-ui .form-note {display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:16px}.hrm-ui .form-note svg {width:15px;height:15px;color:var(--teal)}.hrm-ui .info-card {
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);
  padding:18px 20px;display:flex;gap:16px;align-items:center;
  box-shadow:var(--shadow-sm);margin-bottom:16px;transition:.22s;
}.hrm-ui .info-card:hover {box-shadow:var(--shadow);transform:translateY(-2px)}.hrm-ui .info-card .ico-circle {
  width:48px;height:48px;border-radius:50%;background:var(--teal-100);color:var(--teal);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}.hrm-ui .info-card .ico-circle svg {width:21px;height:21px}.hrm-ui .info-card h5 {font-size:15px;margin-bottom:4px}.hrm-ui .info-card .val {font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.9;word-break:break-word}.hrm-ui .info-card .note {font-size:12px;color:var(--muted)}.hrm-ui .advisor-card {
  background:var(--navy-900);border-radius:var(--radius);padding:22px;color:#fff;
  display:flex;align-items:center;gap:16px;
}.hrm-ui .advisor-card .ico {width:44px;height:44px;color:var(--teal-400);flex-shrink:0}.hrm-ui .advisor-card h5 {color:#fff;font-size:16px;margin-bottom:4px}.hrm-ui .advisor-card p {font-size:12.5px;color:rgba(255,255,255,.75);margin-bottom:12px}.hrm-ui .assure {
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:24px 10px;display:grid;grid-template-columns:repeat(4,1fr);
}.hrm-ui .assure .cell {padding:0 18px;display:flex;gap:12px;justify-content:center}.hrm-ui .assure .cell + .cell {border-inline-start:1px solid var(--line-2)}.hrm-ui .assure .ico {width:26px;height:26px;color:var(--teal);flex-shrink:0;margin-top:2px}.hrm-ui .assure .cell > div {text-align:right}.hrm-ui .assure h6 {font-size:14px;margin:0 0 3px;color:var(--ink);font-weight:700}.hrm-ui .assure p {font-size:12px;color:var(--muted)}.hrm-ui .map-band {
  position:relative;border-radius:var(--radius-lg);overflow:hidden;height:330px;
  background:
    repeating-linear-gradient(0deg,#EDF1F4 0 1px,transparent 1px 62px),
    repeating-linear-gradient(90deg,#EDF1F4 0 1px,transparent 1px 78px),
    #F6F8F9;
  border:1px solid var(--line-2);
}.hrm-ui .map-band .road {position:absolute;background:#E3E9ED}.hrm-ui .map-pin {
  position:absolute;top:44%;inset-inline-start:52%;width:52px;height:66px;
  display:flex;align-items:flex-start;justify-content:center;
}.hrm-ui .map-pin .pin-body {
  width:52px;height:52px;border-radius:50% 50% 50% 6px;transform:rotate(-45deg);
  background:var(--navy);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(8,43,71,.3);
}.hrm-ui .map-pin .pin-body > * {transform:rotate(45deg)}.hrm-ui .map-card {
  position:absolute;top:26px;inset-inline-end:26px;width:290px;
  background:var(--navy-900);color:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-lg);
}.hrm-ui .map-card .ph {height:78px;background:linear-gradient(150deg,#1B4C74,#0B2942)}.hrm-ui .map-card .bd {padding:14px 16px 16px}.hrm-ui .map-card h5 {color:#fff;font-size:14.5px;margin-bottom:6px}.hrm-ui .map-card .stars {display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.75);margin-bottom:8px}.hrm-ui .map-card .stars svg {width:12px;height:12px;color:var(--gold)}.hrm-ui .map-card .addr {font-size:12px;color:rgba(255,255,255,.72);margin-bottom:12px}.hrm-ui .map-zoom {position:absolute;bottom:26px;inset-inline-start:26px;display:flex;flex-direction:column;gap:1px}.hrm-ui .map-zoom button {
  width:34px;height:34px;background:#fff;border:1px solid var(--line);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;
}.hrm-ui .map-zoom button:first-child {border-radius:6px 6px 0 0}.hrm-ui .map-zoom button:last-child {border-radius:0 0 6px 6px;border-top:0}

/* =========================================================
   الدخول / التسجيل — Auth
   ========================================================= */.hrm-ui .auth-hero-body {padding:56px 0 62px;text-align:right;position:relative}.hrm-ui .auth-hero-body h1 {font-size:43px;color:#fff;margin-bottom:12px}.hrm-ui .auth-hero-body p {font-size:15.5px;color:rgba(255,255,255,.85);max-width:420px;margin:0 0 0 auto;line-height:1.95}.hrm-ui .auth-wrap {display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start;padding:52px 0 64px}.hrm-ui .auth-card {
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:36px 40px 34px;box-shadow:var(--shadow);
}.hrm-ui .auth-card .lock {
  width:56px;height:56px;border-radius:50%;background:var(--teal-100);color:var(--teal);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}.hrm-ui .auth-card .lock svg {width:24px;height:24px}.hrm-ui .auth-card h2 {font-size:25px;text-align:center;margin-bottom:8px}.hrm-ui .auth-card .sub {text-align:center;font-size:14px;color:var(--muted);margin-bottom:26px}.hrm-ui .auth-foot {text-align:center;font-size:13.5px;color:var(--body);margin-top:22px}.hrm-ui .aside-card {
  background:var(--bg-soft-2);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:28px 26px;
}.hrm-ui .aside-card > h3 {font-size:20px;margin-bottom:24px;position:relative;padding-bottom:12px}.hrm-ui .aside-card > h3::after {content:"";position:absolute;bottom:0;inset-inline-start:0;width:44px;height:3px;background:var(--teal);border-radius:3px}.hrm-ui .feat {display:flex;gap:14px;margin-bottom:22px}.hrm-ui .feat .ico {
  width:44px;height:44px;border-radius:11px;background:#fff;border:1px solid var(--line-2);
  color:var(--teal);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}.hrm-ui .feat .ico svg {width:20px;height:20px}.hrm-ui .feat h5 {font-size:14.5px;margin-bottom:4px}.hrm-ui .feat p {font-size:12.5px;color:var(--muted);line-height:1.85}.hrm-ui .aside-illus {
  margin-top:26px;border-radius:var(--radius);height:150px;
  background:linear-gradient(160deg,#EDF3F7,#DFE9F1);
  display:flex;align-items:center;justify-content:center;color:#9FB2C2;
}.hrm-ui .aside-illus svg {width:96px;height:96px}

/* بطاقة إحصائيات صغيرة (التسجيل) */.hrm-ui .mini-stats {
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:20px 8px;display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;
}.hrm-ui .mini-stats .cell {text-align:center;padding:0 10px}.hrm-ui .mini-stats .cell + .cell {border-inline-start:1px solid var(--line-2)}.hrm-ui .mini-stats .ico {width:28px;height:28px;color:var(--teal);margin:0 auto 8px}.hrm-ui .mini-stats .n {font-size:19px;font-weight:800;color:var(--ink);line-height:1.2;direction:ltr}.hrm-ui .mini-stats .l {font-size:11.5px;color:var(--muted)}

/* =========================================================
   الاستجابة
   ========================================================= */@media (max-width:1080px) {.hrm-ui .why-grid {grid-template-columns:repeat(3,1fr)}.hrm-ui .home-hero .container {grid-template-columns:1fr}.hrm-ui .home-hero-visual {display:none}.hrm-ui .home-hero-text {text-align:right}.hrm-ui .home-hero-btns, .hrm-ui .home-hero-meta {justify-content:flex-start}.hrm-ui .auth-wrap {grid-template-columns:1fr}.hrm-ui .contact-grid {grid-template-columns:1fr}.hrm-ui .about-hero .container {grid-template-columns:1fr}
}@media (max-width:820px) {.hrm-ui .stats-bar, .hrm-ui .metrics, .hrm-ui .paths-stats, .hrm-ui .assure {grid-template-columns:repeat(2,1fr)}.hrm-ui .stat-cell + .stat-cell, .hrm-ui .paths-stats .cell + .cell, .hrm-ui .assure .cell + .cell {border:0}.hrm-ui .two-col {grid-template-columns:1fr}.hrm-ui .cta-band, .hrm-ui .video-band {flex-direction:column;text-align:center}.hrm-ui .cta-band .txt {flex-direction:column}
}@media (max-width:600px) {.hrm-ui .why-grid {grid-template-columns:repeat(2,1fr)}.hrm-ui .auth-card {padding:26px 20px}.hrm-ui .map-card {position:static;width:auto;margin:16px}.hrm-ui .home-hero-text h1 {font-size:30px}
}

/* ---------- خريطة الموقع الحقيقية (صفحة تواصل معنا) ---------- */.hrm-ui .map-embed {
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);min-height:420px;background:var(--bg-soft);
}.hrm-ui .map-embed iframe {width:100%;height:100%;min-height:420px;border:0;display:block;filter:saturate(.95)}.hrm-ui .map-info {
  position:absolute;inset-inline-end:22px;top:22px;width:min(330px,calc(100% - 44px));
  background:#fff;border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-lg);
}.hrm-ui .map-info h5 {font-size:16px;margin:0 0 8px;color:var(--ink)}.hrm-ui .map-info .addr {font-size:13px;line-height:1.9;color:var(--body);margin:0 0 8px}.hrm-ui .map-info .code {font-size:12.5px;color:var(--muted);margin:0 0 14px}.hrm-ui .map-info .btn {width:100%}@media (max-width:680px) {.hrm-ui .map-embed {min-height:0}.hrm-ui .map-embed iframe {min-height:300px}.hrm-ui .map-info {position:static;width:auto;margin:14px;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
}

@media (max-width:820px) {
  .hrm-ui .tracks-grid {grid-template-columns:1fr}
}
@media (max-width:520px) {
  .hrm-ui .track-card {grid-template-columns:auto 1fr;gap:14px;padding:18px 18px}
  .hrm-ui .track-card .go {display:none}
}

/* شبكة الدورات والشهادات: أعمدة تتكيّف مع العدد الفعلي بدل أربعة ثابتة،
   فثلاث دورات تملأ الصفّ بدل ترك خانة فارغة. */
.hrm-ui .courses-grid,
.hrm-ui .tst-grid {
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
}
@media (max-width:560px) {
  .hrm-ui .courses-grid,
  .hrm-ui .tst-grid {grid-template-columns:1fr}
}
/* وصف الدورة يأخذ مساحة موحّدة فتستوي أسطر السعر أسفل البطاقات. */
.hrm-ui .course-body p {min-height:66px}


/* ---------- الشركاء: بطاقات متساوية ----------
   التخطيط السابق كان عنوانًا جانبيًا وصفًّا مرنًا من الشعارات، فيترك الشعار
   الأخير وحيدًا في سطر ثانٍ حين لا يقسم العدد على الصفّ. البطاقات المتساوية
   تتوزّع بالتساوي مهما كان العدد، وتتماشى مع بطاقات الدورات فوقها. */
.hrm-ui .sec-head .sec-sub {
  font-size:13.5px;color:var(--muted);line-height:1.8;margin-top:10px;
}
.hrm-ui .partners-grid {
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(178px, 1fr));
}
.hrm-ui .partner-tile {
  display:flex;align-items:center;justify-content:center;
  height:104px;padding:18px 20px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  transition:.25s ease;
}
.hrm-ui .partner-tile img {
  max-width:100%;max-height:100%;object-fit:contain;
  filter:grayscale(1);opacity:.65;transition:.25s ease;
}
.hrm-ui .partner-tile:hover {
  border-color:var(--teal-400);box-shadow:var(--shadow);transform:translateY(-3px);
}
.hrm-ui .partner-tile:hover img {filter:none;opacity:1}
@media (max-width:560px) {
  .hrm-ui .partners-grid {grid-template-columns:repeat(2,1fr)}
  .hrm-ui .partner-tile {height:88px}
}

/* ---------- صفحات الدخول والتسجيل: شريط واحد مدمج ----------
   كانت الصفحة بانرًا بطول الشاشة ثم قسمًا منفصلًا للنموذج، فيضطرّ المستخدم
   للتمرير قبل أن يرى أول حقل. صار العنوان والمزايا والنموذج في شريط واحد
   بخلفية التدرّج: النصّ على الجانب والبطاقة البيضاء بجواره. */
.hrm-ui .auth-band {
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:linear-gradient(255deg, var(--navy) 0%, var(--navy-800) 42%, var(--teal-700) 100%);
  /* هيدر الموقع مُطفٍ فوق القسم، فنُخلي له مكانًا. */
  padding-block:calc(34px + var(--site-header-h)) 52px;
}
.hrm-ui .auth-band .hx-mesh {position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hrm-ui .auth-band .deco {
  position:absolute;top:-26px;bottom:-26px;inset-inline-end:-118px;
  width:310px;opacity:.13;pointer-events:none;z-index:0;
}
.hrm-ui .auth-band .deco svg {width:100%;height:100%}
.hrm-ui .auth-band .container {position:relative;z-index:2}

.hrm-ui .auth-split {
  display:grid;grid-template-columns:1fr 1.06fr;
  gap:clamp(26px,4vw,54px);align-items:center;
}
.hrm-ui .auth-intro h1 {
  color:#fff;font-size:clamp(28px,3.1vw,40px);line-height:1.3;
  letter-spacing:-.5px;margin-bottom:10px;
}
.hrm-ui .auth-intro > p {
  font-size:15px;color:rgba(255,255,255,.82);line-height:1.9;
  max-width:430px;margin:0 0 26px;
}
/* المزايا على التدرّج: نصّ أبيض وشارة زجاجية بدل بطاقة بيضاء منفصلة */
.hrm-ui .auth-intro .feat {gap:13px;margin-bottom:18px}
.hrm-ui .auth-intro .feat .ico {
  width:40px;height:40px;flex:0 0 40px;border-radius:11px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.hrm-ui .auth-intro .feat h5 {color:#fff;margin-bottom:3px}
.hrm-ui .auth-intro .feat p {color:rgba(255,255,255,.72);font-size:13px;line-height:1.75;margin:0}
/* البطاقة داخل الشريط: خلفية بيضاء ونصّ داكن */
.hrm-ui .auth-band .auth-card {
  background:var(--bg);color:var(--ink);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);padding:30px 30px 26px;
  box-shadow:0 20px 60px rgba(4,20,34,.28);
}
@media (max-width:960px) {
  .hrm-ui .auth-split {grid-template-columns:1fr;gap:26px}
  .hrm-ui .auth-intro {text-align:center}
  .hrm-ui .auth-intro > p {margin-inline:auto}
  /* المزايا تُخفى على الشاشات الضيقة ليصل المستخدم للنموذج فورًا */
  .hrm-ui .auth-intro .feat {display:none}
}

/* ---------- صفحة سلة المشتريات ---------- */
.hrm-ui .cart-toolbar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin-bottom:14px;
}
.hrm-ui .cart-check-all{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
}
.hrm-ui .cart-check-all input{width:17px;height:17px;accent-color:var(--teal)}
.hrm-ui .cart-layout{
  display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;
}
.hrm-ui .cart-items-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
}
.hrm-ui .cart-items-head h3{font-size:19px;color:var(--ink);margin:0}
.hrm-ui .cart-items-head h3 span{color:var(--muted);font-weight:600;font-size:16px}
.hrm-ui .cart-clear-all{
  display:inline-flex;align-items:center;gap:7px;background:none;border:0;
  color:#C0454D;font-size:13.5px;font-weight:700;cursor:pointer;padding:6px 4px;
}
.hrm-ui .cart-clear-all:hover{color:#A5343B}
.hrm-ui .cart-clear-all svg{width:15px;height:15px}
.hrm-ui .cart-summary{position:sticky;top:calc(var(--header-h) + 16px)}
.hrm-ui .cart-summary-card{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:22px;
}
.hrm-ui .cart-summary-card h3{
  display:flex;align-items:center;gap:9px;font-size:16px;margin-bottom:18px;color:var(--ink);
}
.hrm-ui .cart-summary-card h3 svg{width:18px;height:18px;color:var(--teal)}
.hrm-ui .cs-row{display:flex;justify-content:space-between;font-size:14px;color:var(--body);padding:8px 0}
.hrm-ui .cs-row-discount{color:var(--teal-700)}
.hrm-ui .cs-row-total{
  border-top:1px dashed var(--line);margin-top:6px;padding-top:14px;
  font-size:17px;font-weight:800;color:var(--ink);
}
.hrm-ui .cs-checkout-btn{margin-top:16px}
.hrm-ui .cs-continue-link{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:12px;font-size:13.5px;font-weight:700;color:var(--body);text-decoration:none;
}
.hrm-ui .cs-continue-link:hover{color:var(--teal)}
.hrm-ui .cs-continue-link svg{width:15px;height:15px}
.hrm-ui .cs-trust{
  display:flex;align-items:flex-start;gap:10px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line-2);
}
.hrm-ui .cs-trust svg{width:22px;height:22px;color:var(--teal);flex:0 0 auto;margin-top:2px}
.hrm-ui .cs-trust b{display:block;font-size:13px;color:var(--ink);margin-bottom:2px}
.hrm-ui .cs-trust p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}

.hrm-ui .cart-items{display:flex;flex-direction:column;gap:14px}
.hrm-ui .cart-item{
  position:relative;display:flex;align-items:center;gap:16px;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:18px 20px;
}
.hrm-ui .cart-item input[type="checkbox"]{width:17px;height:17px;flex:0 0 auto;accent-color:var(--teal)}
.hrm-ui .cart-item-remove-form{flex:0 0 auto}
.hrm-ui .cart-item-remove{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--body);cursor:pointer;transition:.2s;
}
.hrm-ui .cart-item-remove:hover{border-color:#E4515A;color:#E4515A;background:#FDECEC}
.hrm-ui .cart-item-remove svg{width:15px;height:15px}
.hrm-ui .cart-item-info{flex:1;min-width:0}
.hrm-ui .cart-item-info h4{font-size:16px;margin-bottom:5px;line-height:1.6}
.hrm-ui .cart-item-info h4 a{color:var(--ink);text-decoration:none}
.hrm-ui .cart-item-info h4 a:hover{color:var(--teal)}
.hrm-ui .cart-item-info p{font-size:13px;color:var(--muted);margin-bottom:9px}
.hrm-ui .cart-item-price{display:flex;align-items:baseline;gap:8px}
.hrm-ui .cart-item-price b{font-size:16px;font-weight:800;color:var(--teal-700)}
.hrm-ui .cart-item-price s{font-size:12.5px;color:var(--muted)}
.hrm-ui .cart-item-thumb{
  flex:0 0 auto;width:112px;height:82px;border-radius:10px;background-size:cover;background-position:center;background-color:var(--bg-soft);
}

.hrm-ui .cart-empty{
  text-align:center;padding:70px 20px;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.hrm-ui .cart-empty svg{margin-bottom:16px}
.hrm-ui .cart-empty p{color:var(--muted);margin-bottom:20px;font-size:15px}

@media (max-width:900px){
  .hrm-ui .cart-layout{grid-template-columns:1fr}
  .hrm-ui .cart-summary{position:static}
}
@media (max-width:560px){
  .hrm-ui .cart-item{flex-wrap:wrap}
  .hrm-ui .cart-item-thumb{order:-1;width:100%;height:120px}
}

/* ---------- صفحة مراجعة طلب الدورات (Checkout) ---------- */
.hrm-ui .checkout-notice{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--gold-100);border:1px solid rgba(168,132,47,.22);
  border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:24px;
}
.hrm-ui .checkout-notice.is-danger{background:#FDECEC;border-color:rgba(196,85,63,.22)}
.hrm-ui .checkout-notice-icon{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:#fff;color:var(--gold-700);display:flex;align-items:center;justify-content:center;
}
.hrm-ui .checkout-notice.is-danger .checkout-notice-icon{color:#C4553F}
.hrm-ui .checkout-notice-icon svg{width:19px;height:19px}
.hrm-ui .checkout-notice-body{flex:1;min-width:0}
.hrm-ui .checkout-notice-body h4{font-size:15px;margin-bottom:5px}
.hrm-ui .checkout-notice-body>p{font-size:13.5px;color:var(--body);margin-bottom:12px}
.hrm-ui .checkout-notice-list{display:flex;flex-direction:column;gap:7px}
.hrm-ui .checkout-notice-list li{
  display:flex;justify-content:space-between;gap:12px;font-size:13px;
  background:#fff;border-radius:var(--radius-sm);padding:9px 12px;
}
.hrm-ui .checkout-notice-list b{color:var(--ink);font-weight:700}
.hrm-ui .checkout-notice-list span{color:var(--body);white-space:nowrap}
.hrm-ui .checkout-blocked{
  margin-top:14px;padding:11px 14px;background:var(--bg-soft);border-radius:var(--radius);
  font-size:12.5px;color:var(--body);line-height:1.8;text-align:center;
}
@media (max-width:560px){
  .hrm-ui .checkout-notice-list li{flex-direction:column;gap:3px}
}

/* ---------- نافذة "جارٍ إنشاء الطلب" ----------
   تُستخدم عند إرسال نموذج إنشاء الطلب: الإرسال حقيقي نحو الخادم (لا نمنعه)،
   لكن النافذة تظهر فورًا حتى لا يظن العميل أن الضغط على الزر لم يحدث شيئًا
   أثناء المعالجة في الخلفية. */
.hrm-ui .modal{
  position:fixed;inset:0;z-index:150;display:none;place-items:center;
  padding:24px;background:rgba(6,23,38,.62);backdrop-filter:blur(3px);
}
.hrm-ui .modal.open{display:grid;animation:hrmFade .25s}
.hrm-ui .modal-in{
  background:#fff;border-radius:var(--radius-lg);max-width:420px;width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,.3);animation:hrmZoom .3s var(--ease-soft);
}
.hrm-ui .processing{text-align:center;padding:40px 30px}
.hrm-ui .spinner{
  width:56px;height:56px;margin:0 auto 18px;border:4px solid var(--line-2);
  border-top-color:var(--teal);border-radius:50%;animation:hrmSpin 1s linear infinite;
}
.hrm-ui .processing b{display:block;font-size:16px;color:var(--ink);margin-bottom:6px}
.hrm-ui .processing small{font-size:13px;color:var(--muted)}
.hrm-ui .psteps{margin-top:22px;text-align:right;display:grid;gap:10px}
.hrm-ui .pstep{
  display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);
  opacity:.45;transition:.3s;
}
.hrm-ui .pstep.on{opacity:1;color:var(--ink)}
.hrm-ui .pstep .d{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:transparent;transition:.25s;
}
.hrm-ui .pstep.on .d{background:var(--teal);border-color:var(--teal);color:#fff}
@keyframes hrmFade{from{opacity:0}to{opacity:1}}
@keyframes hrmZoom{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
@keyframes hrmSpin{to{transform:rotate(360deg)}}

/* ---------- صفحة الدفع (بنكي / تابي / تمارا / بطاقة) ---------- */
.hrm-ui .payment-option-wrap{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.hrm-ui .payment-tab{
  border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;transition:.2s;
}
.hrm-ui .payment-tab.is-active,
.hrm-ui .payment-tab:has(input:checked){border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,142,153,.08)}
.hrm-ui .payment-tab-toggle{
  display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;background:var(--bg-soft-2);
}
.hrm-ui .payment-tab-toggle input[type="radio"]{width:18px;height:18px;flex:0 0 auto;accent-color:var(--teal)}
.hrm-ui .payment-tab-toggle label{flex:1;font-size:14.5px;font-weight:700;color:var(--ink);cursor:pointer;margin:0}
.hrm-ui .payment-tab-toggle .payment-logo{height:22px;width:auto;max-width:70px;object-fit:contain}
/* التبويب غير المختار يبقى مطويًا (العنوان فقط)، ويُظهر محتواه فقط عند
   اختياره. is-active تضبط الحالة الأولية عند تحميل الصفحة (يُكتب على أول
   تبويب في HTML)، و :has(input:checked) تتولى التبديل الفعلي عند تغيير
   اختيار المستخدم دون أي جافاسكربت إضافي — راجع نفس الـselector أعلاه
   المستخدم أصلاً لتلوين الحدود. */
.hrm-ui .payment-tab-content{
  padding:0 18px;max-height:0;overflow:hidden;opacity:0;
  border-top:0 solid var(--line-2);background:#fff;
  transition:max-height .25s ease,opacity .2s ease,padding .25s ease;
}
.hrm-ui .payment-tab.is-active .payment-tab-content,
.hrm-ui .payment-tab:has(input:checked) .payment-tab-content{
  padding:16px 18px;max-height:800px;opacity:1;border-top-width:1px;
}
.hrm-ui .payment-tab-content .generic-list-item{list-style:none;padding:0;margin:0}
.hrm-ui .payment-tab-content .generic-list-item li{
  display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line-2);font-size:13.5px;
}
.hrm-ui .payment-tab-content .generic-list-item li:last-child{border-bottom:0}
.hrm-ui .payment-tab-content .form-group{margin-top:10px}
.hrm-ui .payment-tab-content .label-text{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px}
.hrm-ui .payment-tab-content .form-control{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:13.5px;font-family:var(--font);
}
.hrm-ui .payment-tab-content .form-control:focus{outline:none;border-color:var(--teal)}
.hrm-ui .payment-tab-content .text-danger{display:block;font-size:12px;color:#C0454D;margin-top:4px}
.hrm-ui .payment-tab-content .row{display:flex;flex-wrap:wrap;gap:12px 4%;margin-top:4px}
.hrm-ui .payment-tab-content .input-box{flex:1 1 46%;min-width:150px}
.hrm-ui .payment-tab-content .input-box.col-lg-4{flex:1 1 29%}