/*
Theme Name: Divi Child - B2B
Theme URI: https://stage.b2b-eg.net/
Description: Divi Child Theme for بي تو بي للتدريب والاستشارات — يجمع كل التنسيقات المخصصة (الأزرار، الشارات، المنيو، الفورمات، أنيميشن الهيرو) في مكان واحد بدل حقل Custom CSS.
Author: B2B Training & Consulting
Template: Divi
Version: 1.0.0
Text Domain: divi-child-b2b
*/

/* =========================================================
   1) الألوان والخطوط الأساسية (Design Tokens)
   ========================================================= */
:root{
  --accent-dark:#c85a1c;
  --accent-light:#f4a35f;
  --accent:#e8722c;
  --bg:#faf7f2;
  --border:#e7e1d8;
  --dark:#122824;
  --primary-light:#2f6b58;
  --primary:#1c4a3e;
  --surface:#ffffff;
  --text-muted:#5c6b67;
  --text:#1c2624;
}

body, h1, h2, h3, h4, h5, h6{
  font-family:'Tajawal', sans-serif !important;
}

/* =========================================================
   2) الأزرار (Buttons)
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 34px;border-radius:14px;
  font-weight:700;font-size:16px;cursor:pointer;border:none;transition:.25s ease;white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(232,114,44,0.35);}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-3px);box-shadow:0 16px 32px rgba(232,114,44,0.42);}
.btn-outline{background:transparent;color:var(--dark);border:2px solid var(--border);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-3px);}
.btn-primary:disabled{opacity:.7;cursor:not-allowed;transform:none;}

/* =========================================================
   3) شارة "Eyebrow" (لماذا بي تو بي / استمارة التسجيل ... إلخ)
   ========================================================= */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent-dark);font-weight:700;font-size:14px;
  background:rgba(232,114,44,0.10);
  padding:8px 18px;border-radius:999px;margin-bottom:18px;
  letter-spacing:.3px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);}

/* شارة الهيرو الشفافة (Glassmorphism) — تستخدم فوق خلفية غامقة فقط */
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);color:#fff;font-weight:700;font-size:13.5px;
  padding:9px 20px;border-radius:999px;backdrop-filter:blur(6px);
}
.hero-badge .dot-live{position:relative;width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.hero-badge .dot-live::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);
  animation:ringPulse 1.8s ease-out infinite;
}

/* =========================================================
   4) أنيميشن الهيرو (Hero Section Animations)
   ========================================================= */
@keyframes fadeUp{ from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:translateY(0);} }
@keyframes wordUp{ from{opacity:0;transform:translateY(100%) rotate(3deg);} to{opacity:1;transform:translateY(0) rotate(0);} }
@keyframes ringPulse{ 0%{transform:scale(0.9);opacity:.9;} 100%{transform:scale(1.6);opacity:0;} }
@keyframes pulseGlow{
  0%{box-shadow:0 10px 26px rgba(232,114,44,0.4),0 0 0 0 rgba(232,114,44,0.4);}
  70%{box-shadow:0 10px 26px rgba(232,114,44,0.4),0 0 0 16px rgba(232,114,44,0);}
  100%{box-shadow:0 10px 26px rgba(232,114,44,0.4),0 0 0 0 rgba(232,114,44,0);}
}
@keyframes floatY{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
@keyframes beamSweep{
  0%{stroke-dashoffset:1400;opacity:0;} 8%{opacity:1;} 85%{opacity:1;} 100%{stroke-dashoffset:0;opacity:0;}
}

/* عناصر داخل الهيرو لازم تفضل فوق طبقة الخطوط/التوهج دايمًا */
.hero-beams, .hero-spotlight{ z-index: 1 !important; }
.et_pb_code_1_tb_body,
.difl_df_adh_heading_0_tb_body,
.et_pb_text_0_tb_body,
.difl_dual_button_0_tb_body,
.et_pb_row_1_tb_body{
  position: relative;
  z-index: 2;
}
/* السماح لطبقات الهيرو إنها تظهر من غير ما تتقص */
.et_pb_section_0_tb_body,
.et_pb_row_0_tb_body,
.et_pb_column_0_tb_body,
.et_pb_code_0_tb_body,
.et_pb_code_0_tb_body .et_pb_code_inner{
  overflow: visible !important;
}
.hero-badge{ opacity:0; animation:fadeUp .7s ease forwards; }
.difl_df_adh_heading_0_tb_body .df-heading{ opacity:0; animation:fadeUp .8s ease .15s forwards; }
.difl_df_adh_heading_0_tb_body .df-heading .infix{
  background:linear-gradient(90deg,var(--accent-light),var(--accent) 50%,var(--accent-light));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.et_pb_text_0_tb_body{ opacity:0; animation:fadeUp .8s ease .3s forwards; }
.difl_dual_button_0_tb_body{ opacity:0; animation:fadeUp .8s ease .45s forwards; }
.difl_dual_button_0_tb_body .df_button_left{ animation:pulseGlow 2.6s ease-out infinite; }

.et_pb_row_1_tb_body .et_pb_column{ opacity:0; animation:fadeUp .9s ease forwards; }
.et_pb_row_1_tb_body .et_pb_column_1_tb_body{animation-delay:.55s;}
.et_pb_row_1_tb_body .et_pb_column_2_tb_body{animation-delay:.7s;}
.et_pb_row_1_tb_body .et_pb_column_3_tb_body{animation-delay:.85s;}
.et_pb_row_1_tb_body .et_pb_image_wrap{ display:block; animation:floatY 4.5s ease-in-out infinite; }
.et_pb_row_1_tb_body .et_pb_image_0_tb_body .et_pb_image_wrap{animation-delay:0s;}
.et_pb_row_1_tb_body .et_pb_image_1_tb_body .et_pb_image_wrap{animation-delay:.6s;}
.et_pb_row_1_tb_body .et_pb_image_2_tb_body .et_pb_image_wrap{animation-delay:1.2s;}

@media (prefers-reduced-motion: reduce){
  .hero-badge,.difl_df_adh_heading_0_tb_body .df-heading,.et_pb_text_0_tb_body,
  .difl_dual_button_0_tb_body,.et_pb_row_1_tb_body .et_pb_column,
  .et_pb_row_1_tb_body .et_pb_image_wrap,.difl_dual_button_0_tb_body .df_button_left,
  .hero-badge .dot-live::after{
    animation:none !important;opacity:1 !important;transform:none !important;
  }
}

/* =========================================================
   5) Mega Menu (الكورسات والبرامج) — Divi Flash Menu
   ========================================================= */
.df-mega-menu .sub-menu.df-mega-menu-item{
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  background: #ffffff !important;
  border: 1px solid var(--border);
  border-radius: 20px;
  border-top: 3px solid var(--accent);
  box-shadow: 0 20px 45px rgba(18, 40, 36, 0.15);
  padding: 32px 28px;
  margin-top: 14px !important;
  z-index: 9999 !important;
  position: relative;
}
.difl_advancedmenuitem_1_tb_header .df-mega-menu-item,
.difl_advancedmenuitem_1_tb_header .df-mega-menu-item.col-added,
.animtaion-submenu-2 .df-mega-menu-item,
.item-hover-2 .df-mega-menu-item{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
}
.df-mega-menu .col{
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-inline-start: 1px solid var(--border);
}
.df-mega-menu .col:first-child{ border-inline-start: none; }
.df-mega-menu .col .menu-item{ list-style: none; width: 100%; box-sizing: border-box; }
.df-mega-menu .col .menu-item a{
  display: block; width: 100%; box-sizing: border-box; text-align: right;
  font-weight: 600; font-size: 14.5px; line-height: 1.5; color: var(--text);
  padding: 12px 14px; margin: 0; border-radius: 12px; position: relative;
  transition: background .2s ease, color .2s ease, padding-inline-start .2s ease;
}
.df-mega-menu .col .menu-item a:hover{
  background: rgba(232,114,44,0.08); color: var(--accent-dark); padding-inline-start: 20px;
}
.df-mega-menu .col .menu-item a::before{
  content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
  width: 0; height: 6px; border-radius: 50%; background: var(--accent); transition: width .2s ease;
}
.df-mega-menu .col .menu-item a:hover::before{ width: 6px; }
.df-menu-nav > li.menu-item > a{ font-weight: 700; color: var(--text); transition: color .2s ease; }
.df-menu-nav > li.menu-item > a:hover, .df-menu-nav > li.current-menu-item > a{ color: var(--primary); }
.dropdown-arrow{ transition: transform .25s ease; margin-inline-start: 4px; }
.df-mega-menu:hover .dropdown-arrow, .df-mega-menu.menu-item-has-children:hover .dropdown-arrow{ transform: rotate(180deg); }

/* =========================================================
   6) شريط التنقل السريع (Services chip nav)
   ========================================================= */
.svc-nav{ background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:84px; z-index:90; }
.svc-nav-track{ display:flex; gap:10px; padding:16px 24px; overflow-x:auto; scrollbar-width:none; max-width:1240px; margin:0 auto; }
.svc-nav-track::-webkit-scrollbar{ display:none; }
.svc-chip{
  flex-shrink:0; display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px;
  border:1.5px solid var(--border); font-weight:700; font-size:14px; color:var(--text-muted); transition:.25s; white-space:nowrap;
}
.svc-chip:hover{ border-color:var(--primary); color:var(--primary); }
.svc-chip.active{ background:var(--dark); border-color:var(--dark); color:#fff; }

/* =========================================================
   7) فورم اتصل بنا / التسجيل (Contact Form 7)
   ========================================================= */
.b2b-form-card, .b2b-reg-card{
  background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:44px 40px;
  box-shadow:0 2px 10px rgba(0,0,0,0.04); direction:rtl;
}
.b2b-reg-card{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; max-width:100%; box-sizing:border-box; }
.b2b-reg-card .eyebrow, .b2b-reg-card h2, .b2b-reg-card > p:first-of-type, .b2b-reg-card p.b2b-full{ grid-column:1 / -1; }
.b2b-reg-card .eyebrow{ justify-self:start; margin-bottom:14px; }
.b2b-form-card h2, .b2b-reg-card h2{ font-size:24px; margin:0 0 10px; font-weight:800; color:var(--text); }
.b2b-form-card > p, .b2b-reg-card > p:first-of-type{ color:var(--text-muted); font-size:15px; margin-bottom:30px; }
.b2b-reg-card p{ margin-bottom:20px; }

.b2b-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.b2b-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.b2b-field label, .b2b-reg-card label{
  display:block; font-weight:700; font-size:14.5px; color:var(--text); margin-bottom:8px;
}
.b2b-field label .req, .b2b-reg-card label .req{ color:var(--accent); margin-inline-start:2px; }

.b2b-form-card input[type="text"], .b2b-form-card input[type="email"], .b2b-form-card input[type="tel"],
.b2b-form-card input[type="number"], .b2b-form-card select, .b2b-form-card textarea,
.b2b-reg-card input[type="text"], .b2b-reg-card input[type="email"], .b2b-reg-card input[type="tel"],
.b2b-reg-card input[type="number"], .b2b-reg-card select, .b2b-reg-card textarea{
  border:1.5px solid var(--border); border-radius:12px; padding:14px 16px; font-family:inherit;
  font-size:15px; color:var(--text); background:var(--bg); transition:.2s; width:100%; box-sizing:border-box;
}
.b2b-form-card input:focus, .b2b-form-card select:focus, .b2b-form-card textarea:focus,
.b2b-reg-card input:focus, .b2b-reg-card select:focus, .b2b-reg-card textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(28,74,62,0.10);
}
.b2b-form-card textarea, .b2b-reg-card textarea{ resize:vertical; min-height:110px; width:100%; }
.b2b-reg-card input[readonly]{ background:#f0ece4; color:var(--text-muted); cursor:not-allowed; }

.b2b-submit{
  width:100%; background:var(--accent); color:#fff; border:none; border-radius:14px;
  padding:16px 34px; font-weight:700; font-size:16px; cursor:pointer; transition:.25s ease;
  box-shadow:0 10px 24px rgba(232,114,44,0.35);
}
.b2b-submit:hover{ background:var(--accent-dark); transform:translateY(-3px); box-shadow:0 16px 32px rgba(232,114,44,0.42); }
.b2b-submit:disabled{ opacity:.7; cursor:not-allowed; transform:none; }

.wpcf7-not-valid-tip{ color:#c0392b; font-size:13px; margin-top:6px; }
.wpcf7-response-output{ border-radius:14px; padding:14px 18px; margin-top:18px; font-weight:700; }
.wpcf7 form.sent .wpcf7-response-output{ background:rgba(28,74,62,0.08); border-color:rgba(28,74,62,0.18)!important; color:var(--primary); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output{
  background:rgba(192,57,43,0.08); border-color:rgba(192,57,43,0.3)!important; color:#c0392b;
}

@media (max-width:640px){
  .b2b-form-card, .b2b-reg-card{ padding:30px 22px; }
  .b2b-form-row, .b2b-reg-card{ grid-template-columns:1fr; gap:0; }
}

/* =========================================================
   8) بطاقة ساعات العمل + السوشيال ميديا (Contact page)
   ========================================================= */
.hours-card{
  background:var(--dark); color:#fff; border-radius:22px; padding:30px 28px; position:relative; overflow:hidden;
}
.hours-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(400px 200px at 90% 0%,rgba(232,114,44,0.2),transparent 60%); }
.hours-card *{ position:relative; z-index:1; }
.hours-card h4{ color:#fff; font-size:17px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.hours-card h4 svg{ width:20px; height:20px; color:var(--accent-light); }
.hours-row{ display:flex; justify-content:space-between; font-size:14.5px; color:rgba(255,255,255,0.75); padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.1); }
.hours-row:last-child{ border-bottom:none; }
.hours-row b{ color:#fff; font-weight:700; }

.social-card{ background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:26px 28px; }
.social-card h4{ font-size:16px; margin-bottom:16px; color:var(--text); }
.social-row{ display:flex; gap:12px; }
.social-row a{
  width:44px; height:44px; border-radius:12px; background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--primary); transition:.25s;
}
.social-row a:hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-3px); }
.social-row a svg{ width:19px; height:19px; }

/* =========================================================
   9) سايدبار فورم التسجيل (perks / contact / quote)
   ========================================================= */
.b2b-reg-side{ display:flex; flex-direction:column; gap:20px; }
.b2b-reg-perks{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:26px 24px; }
.b2b-reg-perks h4{ font-size:15.5px; margin-bottom:16px; font-weight:800; color:var(--text); }
.b2b-reg-perks ul{ display:flex; flex-direction:column; gap:14px; list-style:none; margin:0; padding:0; }
.b2b-reg-perks li{ display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--dark); }
.b2b-reg-perks .p-icon{
  width:34px; height:34px; border-radius:10px; background:rgba(28,74,62,0.10); color:var(--primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.b2b-reg-perks li:nth-child(2n) .p-icon{ background:rgba(232,114,44,0.14); color:var(--accent-dark); }
.b2b-reg-perks .p-icon svg{ width:16px; height:16px; stroke-width:1.8; }

.b2b-reg-contact{ background:var(--dark); border-radius:20px; padding:26px 24px; color:#fff; position:relative; overflow:hidden; }
.b2b-reg-contact::before{ content:""; position:absolute; inset:0; background:radial-gradient(300px 180px at 90% 0%,rgba(232,114,44,0.2),transparent 60%); }
.b2b-reg-contact *{ position:relative; z-index:1; }
.b2b-reg-contact h4{ color:#fff; font-size:15.5px; margin-bottom:8px; font-weight:800; }
.b2b-reg-contact p{ color:rgba(255,255,255,0.65); font-size:13.5px; margin-bottom:18px; }
.b2b-reg-contact-btns{ display:flex; flex-direction:column; gap:10px; }
.b2b-reg-contact-btns a{
  display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  border-radius:12px; padding:12px 14px; font-size:13.5px; font-weight:700; color:#fff; transition:.2s;
}
.b2b-reg-contact-btns a:hover{ background:var(--accent); border-color:var(--accent); }
.b2b-reg-contact-btns svg{ width:17px; height:17px; flex-shrink:0; }

.b2b-reg-quote{ background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:24px 22px; }
.b2b-reg-quote svg{ width:26px; height:26px; color:var(--accent); margin-bottom:12px; }
.b2b-reg-quote p{ font-size:13.5px; color:var(--text-muted); margin-bottom:14px; line-height:1.7; }
.b2b-reg-quote .qa{ display:flex; align-items:center; gap:10px; }
.b2b-reg-quote .qa-avatar{
  width:36px; height:36px; border-radius:50%; background:rgba(28,74,62,0.10); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0;
}
.b2b-reg-quote .qa b{ display:block; font-size:13px; color:var(--dark); }
.b2b-reg-quote .qa span{ font-size:11.5px; color:var(--text-muted); }

/* =========================================================
   10) كلاسات أنيميشن عامة (Reusable) — تُستخدم على أي زرار/صورة
   ========================================================= */

/* --- أزرار: نبضة توهج مستمرة (للـ CTA الأساسي) --- */
@keyframes btnPulseGlow{
  0%{box-shadow:0 10px 26px rgba(232,114,44,0.4), 0 0 0 0 rgba(232,114,44,0.4);}
  70%{box-shadow:0 10px 26px rgba(232,114,44,0.4), 0 0 0 16px rgba(232,114,44,0);}
  100%{box-shadow:0 10px 26px rgba(232,114,44,0.4), 0 0 0 0 rgba(232,114,44,0);}
}
.btn-glow-pulse{
  animation: btnPulseGlow 2.6s ease-out infinite;
  transition: transform .25s cubic-bezier(.22,.9,.3,1), box-shadow .25s ease, background-color .25s ease;
}
.btn-glow-pulse:hover{
  transform: translateY(-3px);
  animation-play-state: paused;
}

/* --- أزرار: رفعة بسيطة عند الـ hover (لأي زرار عادي) --- */
.btn-lift-hover{
  transition: transform .25s cubic-bezier(.22,.9,.3,1), box-shadow .25s ease, background-color .25s ease;
}
.btn-lift-hover:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}

/* --- أزرار: تحريك الأيقونة/السهم جوه الزرار عند الـ hover --- */
.btn-icon-slide .et-pb-icon,
.btn-icon-slide svg,
.btn-icon-slide i{
  transition: transform .25s ease;
}
.btn-icon-slide:hover .et-pb-icon,
.btn-icon-slide:hover svg,
.btn-icon-slide:hover i{
  transform: translateX(-4px);
}

/* --- أزرار: كلاس شامل (رفعة + لمعة) لأي زرار في الموقع --- */
.btn-anim{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.22,.9,.3,1), box-shadow .25s ease, background-color .25s ease;
  will-change: transform;
}
.btn-anim:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}
.btn-anim:active{
  transform: translateY(-1px) scale(.97);
  transition-duration: .1s;
}
.btn-anim::after{
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}
.btn-anim:hover::after{
  left: 125%;
}

/* --- الأزرار الرئيسية في الهيرو (احجز مكانك الآن / تعرّف على خدماتنا) --- */
.difl_dual_button_0_tb_body .df_button_left{
  display: inline-flex; align-items: center; gap: 8px;
}
.difl_dual_button_0_tb_body .df_button_left:hover{
  background-color: var(--accent-dark) !important;
  box-shadow: 0 16px 32px rgba(232,114,44,0.5);
}
.difl_dual_button_0_tb_body .df_button_right{
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .25s cubic-bezier(.22,.9,.3,1), background-color .25s ease, border-color .25s ease;
}
.difl_dual_button_0_tb_body .df_button_right:hover{
  transform: translateY(-3px);
  background-color: rgba(255,255,255,0.16);
}

/* --- صور: تكبير عند الـ hover (نفس تأثير كروت الخدمات) --- */
.img-zoom-hover{
  overflow: hidden;
  display: block;
  position: relative;
}
.img-zoom-hover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.22,.8,.32,1);
}
.img-zoom-hover:hover img{
  transform: scale(1.06);
}

/* احترام إعداد تقليل الحركة على كل كلاسات الأنيميشن العامة */
@media (prefers-reduced-motion: reduce){
  .btn-glow-pulse, .btn-lift-hover, .btn-anim, .btn-anim::after,
  .btn-icon-slide .et-pb-icon, .btn-icon-slide svg, .btn-icon-slide i,
  .difl_dual_button_0_tb_body .df_button_left, .difl_dual_button_0_tb_body .df_button_right,
  .img-zoom-hover img{
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
/* ============================================
   Mobile Menu Accordion - Divi et_mobile_menu
   ============================================ */

/* القائمة الفرعية تبدأ مقفولة دائماً */
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
	max-height: 0 !important;
	overflow: hidden !important;
}

/* تفتح فقط لما تاخد class visible من الـ JS عند الضغط */
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
	max-height: none !important;
	overflow: visible !important;
}

/* الخط والمسافات لكل عنصر رئيسي */
ul.et_mobile_menu > li {
	font-family: 'Tajawal', sans-serif;
	border-bottom: 1px solid var(--border, #eee);
	position: relative;
}
ul.et_mobile_menu > li:last-child {
	border-bottom: none;
}

ul.et_mobile_menu > li > a {
	font-size: 15px;
	font-weight: 600;
	color: var(--dark, #122824);
	padding: 14px 6px !important;
	background-color: transparent;
	transition: color .2s ease, background-color .2s ease;
}

/* hover / فتح العنصر */
ul.et_mobile_menu > li:hover > a,
ul.et_mobile_menu > li.dt-open > a {
	background-color: var(--surface, #f6f8f7) !important;
	color: var(--accent, #00d263) !important;
}

/* زرار الـ toggle نفسه (المساحة اللي بتتضغط) */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	width: 44px;
	height: 100%;
	max-height: 48px;
	padding: 0 !important;
	border: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 999;
	background-color: transparent;
	text-align: right;
}

/* أيقونة toggle - سهم CSS بدل خط الأيقونات (يضمن ظهورها دايماً) */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	content: '' !important;
	font-family: initial !important;
	position: absolute;
	top: 50%;
	right: 14px;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--accent, #00d263);
	border-bottom: 2px solid var(--accent, #00d263);
	background: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	transform: translateY(-70%) rotate(45deg); /* سهم لأسفل = مقفول */
	transition: transform .25s ease, border-color .25s ease;
}

/* عند الفتح: السهم يتقلب لأعلى */
ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after {
	transform: translateY(-30%) rotate(-135deg);
	border-color: var(--accent, #00d263);
}

/* السب مينيو (الكورسات نفسها) */
ul.et_mobile_menu .sub-menu.visible {
	background: var(--surface, #fafbfa);
	border-radius: 8px;
	margin: 4px 0 8px 0;
	padding: 4px 0;
}

ul.et_mobile_menu .sub-menu.visible li {
	border-bottom: 1px solid var(--border, #eee);
}
ul.et_mobile_menu .sub-menu.visible li:last-child {
	border-bottom: none;
}

ul.et_mobile_menu .sub-menu.visible li a {
	font-size: 14px;
	font-weight: 400;
	color: var(--text-muted, #4a5a55);
	padding: 12px 24px !important;
	transition: color .2s ease, padding .2s ease;
}

ul.et_mobile_menu .sub-menu.visible li a:hover {
	color: var(--accent, #00d263);
	padding-right: 30px !important;
}

/* الحاوية الكلية للقائمة */
.et_pb_menu_0.et_pb_menu .et_mobile_menu {
	box-shadow: 0 10px 30px rgba(0,0,0,.08);
	border: 1px solid var(--border, #eee);
}