/* =========================
   SEC Rebrand Design Tokens
   ========================= */
:root{
  --sec-navy:#001F5E;
  --sec-bg:#F5F5F9;
  --sec-border: rgba(0,0,0,.08);
  --sec-radius:12px;
  --sec-text:#001F5E;
  --sec-muted: rgba(0,0,0,.55);
}


/* =========================
   SE-MHRF Font (Saudi Electricity)
   ========================= */

/* Thin – 100 */
@font-face {
  font-family: "SE-MHRF";
  src:
    url("../../webfonts/sec2/SE-MHRF/woff2/SE-Thin.woff2") format("woff2"),
    url("../../webfonts/sec2/SE-MHRF/woff/SE-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* ExtraLight – 200 */
@font-face {
  font-family: "SE-MHRF";
  src:
    url("../../webfonts/sec2/SE-MHRF/woff2/SE-ExtraLight.woff2") format("woff2"),
    url("../../webfonts/sec2/SE-MHRF/woff/SE-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Light – 300 */
@font-face {
  font-family: "SE-MHRF";
  src:
    url("../../webfonts/sec2/SE-MHRF/woff2/SE-Light.woff2") format("woff2"),
    url("../../webfonts/sec2/SE-MHRF/woff/SE-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular – 400 */
@font-face {
  font-family: "SE-MHRF";
  src:
    url("../../webfonts/sec2/SE-MHRF/woff2/SE-Regular.woff2") format("woff2"),
    url("../../webfonts/sec2/SE-MHRF/woff/SE-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium – 500 */
@font-face {
  font-family: "SE-MHRF";
  src:
    url("../../webfonts/sec2/SE-MHRF/woff2/SE-Medium.woff2") format("woff2"),
    url("../../webfonts/sec2/SE-MHRF/woff/SE-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold – 600 */
@font-face {
  font-family: "SE-MHRF";
  src:
    url("../../webfonts/sec2/SE-MHRF/woff2/SE-SemiBold.woff2") format("woff2"),
    url("../../webfonts/sec2/SE-MHRF/woff/SE-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold – 700 */
@font-face {
  font-family: "SE-MHRF";
  src:
    url("../../webfonts/sec2/SE-MHRF/woff2/SE-Bold.woff2") format("woff2"),
    url("../../webfonts/sec2/SE-MHRF/woff/SE-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ExtraBold – 800 */
@font-face {
  font-family: "SE-MHRF";
  src:
    url("../../webfonts/sec2/SE-MHRF/woff2/SE-ExtraBold.woff2") format("woff2"),
    url("../../webfonts/sec2/SE-MHRF/woff/SE-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

 

/* =========================================
   SEC FOOTER � CLEAN VERSION
   ========================================= */

/* ������ ���� */
.sectionFooter{
  display:block;
  clear:both;
  text-align: right !important;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  background:#fff;
  border-top:1px solid rgba(0,0,0,.08);
  font-family: SE-MHRF, "Segoe UI", Tahoma, Arial, sans-serif;
}

/* ��� scroll ���� */
html, body{
  overflow-x:hidden;
}

/* ������� ������� */
.sectionFooter .footer-inner{
  max-width:1280px;
  margin:0 auto;
  padding:40px 32px 0px;
  box-sizing:border-box;
}

/* ================= TOP ================= */

.sectionFooter .footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:32px;
}

/* ---------- LEFT ---------- */

.sectionFooter .footer-left{
  flex:1;
}

.sectionFooter .links-container{
  display:flex;
  gap:32px;
  flex-wrap:wrap;
}

.sectionFooter .link-col{
  min-width:180px;
}

.sectionFooter .link-col h4{
  font-size:16px;
  font-weight:600;
  margin-bottom:14px;
}

.sectionFooter .link-col ul{
  list-style:none;
  margin:0;
  padding:0;
}

.sectionFooter .link-col li{
  margin-bottom:12px;
}

.sectionFooter .link-col a{
  font-size:16px;
  color:rgba(0,0,0,.55);
  text-decoration:none;
}

.sectionFooter .link-col a:hover{
  color:rgba(0,0,0,.85);
}

/* ---------- RIGHT ---------- */

.sectionFooter .footer-right{
  width:340px;
}

/* ����� ��������� */
.sectionFooter .icons-container{
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* �� ���� (������ / ���� ��� �������) */
.sectionFooter .follow-section,
.sectionFooter .getapp-section{
  display:flex;
  flex-direction:column;
}

/* �������� */
.sectionFooter .follow-section h4,
.sectionFooter .getapp-section h4{
  font-size:16px;
  font-weight:600;
  margin-bottom:12px;
}

/* ������� ��������� */
.sectionFooter .social-icons,
.sectionFooter .app-icons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

/* RTL */
.sectionFooter[dir="rtl"] .follow-section,
.sectionFooter[dir="rtl"] .getapp-section{
  text-align:right;
}

.sectionFooter[dir="rtl"] .social-icons,
.sectionFooter[dir="rtl"] .app-icons{
  justify-content:flex-end;
}

/* LTR */
.sectionFooter[dir="ltr"] .follow-section,
.sectionFooter[dir="ltr"] .getapp-section{
  text-align:left;
}

.sectionFooter[dir="ltr"] .social-icons,
.sectionFooter[dir="ltr"] .app-icons{
  justify-content:flex-start;
}

/* ��������� ��� */
.sectionFooter .social-icons img,
.sectionFooter .app-icons img{
  width:32px;
  height:32px;
  object-fit:contain;
}

/* ================= BOTTOM ================= */

.sectionFooter .footer-bottom{
  margin-top:0px;
  padding-top:0px;
  border-top:1px solid rgba(0,0,0,.08);

  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

.sectionFooter .company-info{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:rgba(0,0,0,.6);
}

.sectionFooter .company-info img{
  width:100px;
  height:80px;
}

.sectionFooter .footer-links{
  display:flex;
  flex-wrap:wrap;
}

.sectionFooter .footer-links a{
  font-size:13px;
  color:#63769B;
  text-decoration:none;
  margin-left:.8em;
}

.sectionFooter[dir="rtl"] .footer-links a{
  margin-right:.8em;
  margin-left:0;
}

/* ================= RESPONSIVE ================= */

@media (max-width:767px){
  .sectionFooter .footer-inner{
    padding:28px 16px 12px;
  }

  .sectionFooter .footer-top{
    flex-direction:column;
  }

  .sectionFooter .footer-right{
    width:100%;
  }
}

/* Fix RTL alignment for icons rows */
.sectionFooter[dir="rtl"] .social-icons,
.sectionFooter[dir="rtl"] .app-icons{
  direction: ltr;                
  justify-content: flex-start;     
}

html, body{
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}



/* Apply globally */
html, body{
  font-family: "SE-MHRF", "Segoe UI", Tahoma, Arial, sans-serif !important;
  font-weight: 400;
  color: var(--sec-navy) !important;
}

/* Ensure form controls inherit correctly */
button, input, select, textarea{
	
  font-family: inherit !important;
}

/* Headings like SEC */
h1, h2, h3, h4, h5, h6{
  font-family: inherit !important;
  color: var(--sec-navy) !important;
  font-weight: 700;
}

.block2-title h2,
.block-title h2,
.section-title h2{
  font-family: "SE-MHRF", "Segoe UI", Tahoma, Arial, sans-serif !important;
  color: var(--sec-navy) !important;
  font-weight: 700;
}

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea{
  border-radius: var(--sec-radius) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  font-family: "SE-MHRF","Segoe UI",Tahoma,Arial,sans-serif !important;
  height: 40px !important;

}

/* =========================
   SEC SideNav (Rebrand)
   Targets: .block.block-sidenav
   ========================= */

/* الكونتينر الأساسي */
.block.block-sidenav{
  background:#fff;
  border:1px solid var(--sec-border);
  border-radius: var(--sec-radius);
  overflow:hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
  max-width: 208px;
  flex: 0 0 208px;
  margin-top:0px;
 
}

/* عنوان القائمة */
.block.block-sidenav .block-sidenav-title{
  background: #004d99;
}

.block.block-sidenav .block-sidenav-title h2{
  margin:0;
  padding:12px 14px;
  color:#fff !important;
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* السهم */
.block.block-sidenav .block-sidenav-title .arrow{
  display:inline-flex;
  width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  opacity:.9;
}

/* لو span.arrow فاضي – نرسم سهم بـ CSS */
.block.block-sidenav .block-sidenav-title .arrow::before{
  content:"›";
  font-size:20px;
  line-height:1;
}

/* RTL السهم يقلب */
html[dir="rtl"] .block.block-sidenav .block-sidenav-title .arrow::before{
  content:"‹";
}

/* منطقة اللينكات */
.block.block-sidenav .sb-nav.sidebar-nav{
  padding:6px 0;
}

/* UL */
.block.block-sidenav ul.leftmenu{
  list-style:none;
  margin:0;
  padding:0;

  /* مهم: الغي line-height:0 اللي موجود inline */
  line-height: normal !important;
}

/* امسح تأثيرات br إن وُجدت */
.block.block-sidenav ul.leftmenu br{
  display:none !important;
}

/* LI */
.block.block-sidenav ul.leftmenu > li{
  margin:0;
  padding:0;
  border-top:0px solid rgba(0,0,0,.06) !important;
}

/* A */
.block.block-sidenav ul.leftmenu > li > a{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:11px 14px;
  text-decoration:none !important;

  color: var(--sec-text) !important;
  font-size:14px !important;
  font-weight:400;

  border-top:0px solid rgba(0,0,0,.06) !important;
  transition: background .2s ease, color .2s ease, font-weight .2s ease;
}

/* أول عنصر بدون border-top */
.block.block-sidenav ul.leftmenu > li:first-child > a{
  border-top:0;
}

/* Hover */
.block.block-sidenav ul.leftmenu > li > a:hover{
  background: var(--sec-bg);
 color: #0066CC !important;
 }





/* Active state — هنستخدم class على الـ <a> */
.block.block-sidenav ul.leftmenu > li > a.is-active,
.block.block-sidenav ul.leftmenu > li.active > a{
  background: rgba(0,31,94,.08);
  color: var(--sec-navy) !important;
  font-weight:700;
}

/* لو عندك BoldText() بيحط <b> جوه اللينك */
.block.block-sidenav ul.leftmenu > li > a b{
  font-weight:700;
}

/* Responsive */
@media (max-width: 767px){
  .block.block-sidenav{
    border-radius: 10px;
    max-width:100%;
  }
  .block.block-sidenav ul.leftmenu > li > a{
    padding:12px 14px;
    font-size:14px;
  }
}

/* =========================
   SEC SideNav - Active & Hover (Figma)
   ========================= */

:root{
  --sec-navy:#001F5E;
  --sec-hover-bg:#EEF4FF;     /* أزرق فاتح جداً مثل التصميم */
  --sec-border: rgba(0,0,0,.08);
  --sec-radius:2px;
}

/* أساس اللينك */
.block.block-sidenav ul.leftmenu > li > a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:12px 14px;
  border-top:0px solid rgba(0,0,0,.06) !important;
  background:#fff;

  color: var(--sec-navy) !important;
  font-size:13px;
  font-weight:400;

  border-radius:10px;               /* زي الكارت الصغير */
  margin:6px 10px;                  /* يخلي العنصر شبه pill داخل القائمة */
  transition: background .2s ease, color .2s ease;
}

/* أول عنصر بدون border-top (مش مهم قوي مع الـ margin) */
.block.block-sidenav ul.leftmenu > li:first-child > a{
  border-top:0;
}

/* سهم يمين/شمال لكل لينك */
.block.block-sidenav ul.leftmenu > li > a::after{
  content:"›";
  font-size:18px;
  line-height:1;
  opacity:.55;
  margin-inline-start:12px;
}



/* ---------- HOVER (On-Hover state) ---------- */
.block.block-sidenav ul.leftmenu > li > a:hover{
   background: #F0F7FF;
 color: #0066CC !important;
}

/* السهم في hover يوضح */
.block.block-sidenav ul.leftmenu > li > a:hover::after{
  opacity:1;
}

/* ---------- ACTIVE (Active state) ---------- */
.block.block-sidenav ul.leftmenu > li > a.is-active,
.block.block-sidenav ul.leftmenu > li.active > a{
  background: #3d77ee !important;
  color:#fff !important;
  font-weight:700;
}

/* السهم أبيض في الـ active */
.block.block-sidenav ul.leftmenu > li > a.is-active::after,
.block.block-sidenav ul.leftmenu > li.active > a::after{
  color:#fff;
  opacity:1;
}

/* لو BoldText بيحط <b> */
.block.block-sidenav ul.leftmenu > li > a.is-active b,
.block.block-sidenav ul.leftmenu > li.active > a b{
  color:#fff !important;
  font-weight:700;
}

/* لو عندك أي أيقونات داخل الـ a (مثلاً span أو img) خلّيها تبيض مع active */
.block.block-sidenav ul.leftmenu > li > a.is-active img,
.block.block-sidenav ul.leftmenu > li.active > a img{
  filter: brightness(0) invert(1);
}

/* =========================
   SideNav arrows + item icon (RTL/LTR) - Figma
   ========================= */

.block.block-sidenav ul.leftmenu > li > a{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;

  /* مهم: نخلي المحتوى ينتشر: (icon+text) يمين و السهم يسار */
  justify-content: space-between;

  padding: 7px 14px;
  margin: 6px 10px;
  border-radius: 10px;
  background: #fff;

  color: #63769B !important;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
}

/* ---- السهم: نخليه عنصر منفصل في الطرف الآخر ---- */
.block.block-sidenav ul.leftmenu > li > a::after{
  flex: 0 0 auto;
  font-size: 28px;
  line-height: 1;
  opacity: .75;
}



/* ---- حاوية النص + الأيقونة (هنضيفها في الـ JSP) ---- */
.block.block-sidenav ul.leftmenu > li > a .menu-item{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  max-hieght: 40;
}

/* RTL: النص يبدأ من اليمين */
html[dir="rtl"] .block.block-sidenav ul.leftmenu > li > a .menu-item{
 
  text-align: right;
}

/* LTR: النص يبدأ من اليسار */
html[dir="ltr"] .block.block-sidenav ul.leftmenu > li > a .menu-item{

  text-align: left;
}

/* ---- الأيقونة بجوار النص ---- */
.block.block-sidenav ul.leftmenu > li > a .menu-ico{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .8;
}

/* لو الأيقونة SVG */
.block.block-sidenav ul.leftmenu > li > a .menu-ico svg{
  width: 18px;
  height: 18px;
}

/* Hover */
.block.block-sidenav ul.leftmenu > li > a:hover{
  background: #EEF4FF;
}
.block.block-sidenav ul.leftmenu > li > a:hover::after{ opacity: 1; }

/* Active */
.block.block-sidenav ul.leftmenu > li > a.is-active{
  background: var(#3d77ee, #001F5E) !important;
  color: #fff !important;
  font-weight: 700;
}
.block.block-sidenav ul.leftmenu > li > a.is-active::after{
  color: #fff;
  opacity: 1;
}

/* تبييض الأيقونة داخل active */
.block.block-sidenav ul.leftmenu > li > a.is-active .menu-ico{
  opacity: 1;
  filter: brightness(0) invert(1);
}
.block.block-sidenav ul.leftmenu > li > a.is-active .menu-ico svg *{
  stroke: #fff !important;
  fill: none !important;
}

/* منع لف النص في عناصر القائمة الجانبية */
.block.block-sidenav ul.leftmenu > li > a{
  white-space: nowrap;
}


/* =========================
   SEC Header (Rebrand) - Figma
   ========================= */

:root{
  --sec-navy: #001F5E;
  --sec-text: #001F5E;
  --sec-muted: rgba(0,31,94,.65);
  --sec-line: rgba(0,0,0,.08);
  --sec-bg: #ffffff;
  --sec-soft: #EEF4FF;
  --sec-radius: 12px;
}

/* Header shell */
.sec-header{
  width:100%;
  background: var(--sec-bg);
  border-bottom: 1px solid var(--sec-line);
  font-family: "SE-MHRF", "Segoe UI", Tahoma, Arial, sans-serif;
}

.sec-header__inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0px 0px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  box-sizing:border-box;
}

/* Brand */
.sec-header__brand{ 
	line-height:0;
	flex: 0 0 auto; 
	}
.sec-header__logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.sec-header__logo img{
  height: 80px;
  width: 100px;
  display:block;
}

/* Nav (Desktop) */
.sec-header__nav{
  flex: 1 1 auto;
  display:flex;
  justify-content:right;
}

.sec-nav{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap: 6px;
}

.sec-nav__link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--sec-muted);
  text-decoration:none;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}

.sec-nav__link:hover{
  background: var(--sec-soft);
  color: var(--sec-text);
}

/* Active pill like Figma */
.sec-nav__link.is-active{
  background: var(--sec-soft);
  color: var(--sec-text);
}

/* Chevron (down) */
.sec-nav__chev{
  width: 10px;
  height: 10px;
  position: relative;
  top: 1px;
}
.sec-nav__chev::before{
  content:"";
  display:block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
  box-sizing: content-box;
}

/* Actions */
.sec-header__actions{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  gap: 12px;
}

/* Search icon button */
.sec-icon-btn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--sec-line);
  background: var(--sec-soft);
  color: var(--sec-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.sec-icon-btn:hover{
  filter: brightness(.98);
}

/* Language */
.sec-lang{
  color: var(--sec-text);
  text-decoration:none;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 10px;
  border-radius: 10px;
}
.sec-lang:hover{
  background: var(--sec-soft);
}

/* Login button */
.sec-btn{
  display: inline-flex;
  align-items:center;
  gap: 10px;
  border-radius: 12px;
  padding: 10px 14px;
  text-decoration:none;
  font-weight: 400;
  font-size: 14px !important; 
  line-height: 1;
  border: 1px solid transparent !important;
  cursor:pointer;
  white-space: nowrap;
}

.sec-btn--primary{
  background: #0066CC;
  color: #fff;
}
.sec-btn--primary:hover{
  filter: brightness(.97);
}
.sec-btn__icon{
  color:#fff;
}

/* Burger (Mobile) */
.sec-burger{
  display:none;
  width: 40px;
  height: 40px;
  border-radius: 16px;
  border: 1px solid var(--sec-line);
  background: var(--sec-soft);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0;  
}
.sec-burger span{
  display:block;
  width: 18px;
  height: 2px;
  background: var(--sec-text);
  border-radius: 2px;
}
.sec-burger span + span{ margin-top: 4px; }

/* Mobile nav drawer */
.sec-mnav{
  display:none;
  border-top: 1px solid var(--sec-line);
  background:#fff;
}
.sec-mnav.is-open{
  display:block;
}
.sec-mnav__inner{
  max-width:1280px;
  margin:0 auto;
  padding: 10px 24px 16px;
  box-sizing:border-box;
}
.sec-mnav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.sec-mnav__list a{
  display:flex;
  padding: 12px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--sec-text);
  background: #fff;
  border: 1px solid var(--sec-line);
}
.sec-mnav__list a:hover{
  background: var(--sec-soft);
}

/* RTL tweaks */
.sec-header[dir="rtl"] .sec-header__inner{
  direction: rtl;
}
.sec-header[dir="rtl"] .sec-nav{
  direction: rtl;
}


/* Responsive */
@media (max-width: 992px){
  .sec-header__nav{ display:none; }
  .sec-burger{ display:flex; }
}

/* ===== Fix: Login button text color on hover/visited ===== */
.sec-header .sec-btn--primary,
.sec-header .sec-btn--primary:visited,
.sec-header .sec-btn--primary:hover,
.sec-header .sec-btn--primary:focus,
.sec-header .sec-btn--primary:active{
  color:#fff !important;          /* مهم ضد أي a:hover عام */
}

.sec-header .sec-btn--primary .sec-btn__icon{
  color: inherit !important;      /* الأيقونة تفضل أبيض */
}

/* =========================
   SEC Page Banner (Temporary / Lite Hero)
   ========================= */

.sec-page-banner{
  width:100%;
  background: var(--sec-soft);        /* نفس ألوان الهوية */
  border-bottom: 0px solid var(--sec-line);
}

.sec-page-banner__inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 32px;
  box-sizing: border-box;
}

/* العنوان */
.sec-page-banner__title{
  margin:0;
  font-family: "SE-MHRF", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 40px !important;
  font-weight: 700 !important;
  color: var(--sec-navy) !important;
  background-color: #ffffff00 !important;
  line-height: 1.3 !important;
}

/* Responsive */
@media (max-width: 768px){
  .sec-page-banner__inner{
    padding: 20px 16px 24px;
  }
  .sec-page-banner__title{
    font-size: 24px;
  }
}
.sec-page-banner{
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}

/* =========================
   SEC Header - Link Reset
   (Remove underline + orange active/visited)
   ========================= */

/* كل روابط الهيدر */
.sec-header a,
.sec-header a:link,
.sec-header a:visited,
.sec-header a:hover,
.sec-header a:active,
.sec-header a:focus{
  
  text-decoration: none !important;
  outline: none;
}

/* روابط المينو نفسها */
.sec-header .sec-nav__link{
  color: var(--sec-muted) !important;
  text-decoration: none !important;
}

/* Hover */
.sec-header .sec-nav__link:hover{
  background: var(--sec-soft);
  color: var(--sec-text) !important;
  text-decoration: none !important;
}

/* Active pill */
.sec-header .sec-nav__link.is-active{
  background: var(--sec-soft);
  color: var(--sec-text) !important;
  text-decoration: none !important;
}

/* اضغط (active) - بدون برتقالي */
.sec-header .sec-nav__link:active{
  color: var(--sec-text) !important;
  text-decoration: none !important;
}

/* Focus (للكيبورد) بدل underline */
.sec-header .sec-nav__link:focus-visible{
  box-shadow: 0 0 0 3px rgba(0,31,94,.18);
}

/* عنوان القائمة الجانبية */
.block.block-sidenav .block-sidenav-title{
  display: flex;
  align-items: center;        /* ⬅️ ده المهم */
  height: 56px;               /* نفس ارتفاع التصميم (عدّل لو حابب) */
  background: var(--sec-navy);
}

/* h2 نفسه */
.block.block-sidenav .block-sidenav-title h2{
  margin: 0;
  padding: 0 16px;
  width: 100%;

  display: flex;
  align-items: center;        /* ⬅️ يضمن توسيط النص */
  justify-content: space-between;

  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;             /* مهم */
  cursor: pointer;
}

/* =========================
   Legacy Header Skin (header.jsp) - Keep markup, change look
   Targets: #mainTbl
   ========================= */

/* خلي الهيدر ياخد عرض الصفحة ويقف في النص */
#mainTbl{
  width: 100% !important;
  max-width: 1280px;
  margin: 0 auto;
  border-collapse: collapse;
}

/* السلايدر/البانر: خلي الصور Responsive */
#mainTbl > tbody > tr:first-child td{
  padding: 0 !important;
  line-height: 0 !important;
  background: transparent !important;
}
#mainTbl > tbody > tr:first-child img.mySlides{
  width: 100% !important;
  height: auto !important;
  display: block;
}

/*
  أهم جزء: نحول الصف اللي فيه (user + lang + logout)
  من Table layout ل Flex layout *فقط داخل #mainTbl*
*/
#mainTbl,
#mainTbl > tbody{
  display: block;
}
#mainTbl > tbody > tr{
  display: block;
}

/* الصف الثاني (شريط الأدوات) */
#mainTbl > tbody > tr:nth-child(2){
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 10px 16px;
}

/* خلي خلايا الصف الثاني flex items */
#mainTbl > tbody > tr:nth-child(2) > td{
  display: flex;
  align-items: center;
  gap: 10px;

  background: transparent !important;
  color: #001F5E !important;
  padding: 0 !important;
  line-height: normal !important;
  height: auto !important;
}

/* left/right behavior حسب اللغه */
#mainTbl .normalAlign{ justify-content: flex-start; }
#mainTbl .reverseAlign{ justify-content: flex-end; }

/* RTL: بدل الاتجاه */
html[dir="rtl"] #mainTbl > tbody > tr:nth-child(2){
  flex-direction: row-reverse;
}
html[dir="rtl"] #mainTbl .normalAlign{ justify-content: flex-end; }
html[dir="rtl"] #mainTbl .reverseAlign{ justify-content: flex-start; }

/* أي لينكات جوه الهيدر: امنع underline / visited orange */
#mainTbl a,
#mainTbl a:visited,
#mainTbl a:hover,
#mainTbl a:active{
  color: inherit !important;
  text-decoration: none !important;
  outline: none !important;
}

/* أيقونات الهيدر (اللغة/الخروج/الهوم): خلي الحجم ثابت وحديث */
#mainTbl > tbody > tr:nth-child(2) img{
  height: 34px !important;
  width: auto !important;
}

/* اسم المستخدم لو طويل: متكسرش التصميم */
#mainTbl > tbody > tr:nth-child(2) nobr{
  white-space: nowrap;
  max-width: 70vw;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

/* Responsive: على الشاشات الصغيرة خلي البار يلف لو اضطر */
@media (max-width: 768px){
  #mainTbl > tbody > tr:nth-child(2){
    flex-wrap: wrap;
  }
  #mainTbl > tbody > tr:nth-child(2) > td{
    flex: 1 1 auto;
  }
}

/* ===== SEC Rebrand - Old Orange Services Bar ===== */

/* الـ td اللي عليه background inline */
#services > td{
  background: var(--sec-soft, #EEF4FF) !important;
  color: var(--sec-navy, #001F5E) !important;
  padding: 10px 14px !important;

}

/* كل جدول يمثل "تاب" */
#services td > table{
  width: auto !important;           /* بدل 9vw */
  float: none !important;           /* نلغي float */
  vertical-align: middle;
  margin: 6px 8px !important;
  border-collapse: separate;
  border-spacing: 0;
}



/* النص نفسه */
#services td > table span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px !important;

  color: var(--sec-navy, #001F5E) !important;
  font-size: 14px !important;
  font-weight: 600 !important;

  background: #fff;
  border: 1px solid var(--sec-line, rgba(0,0,0,.08));
  border-radius: 12px;

  white-space: nowrap;    /* مهم: يمنع اللف */
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

/* hover على التاب */
#services td > table:hover span{
  background: var(--sec-soft, #EEF4FF);
  color: var(--sec-navy, #001F5E) !important;
}

/* dropdown container */
#services .certDropList{
  z-index: 9999;
  margin-top: 8px;
  width: max-content !important;
  min-width: 220px;
  background: #fff !important;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  overflow: hidden;
}

/* عناصر dropdown */
#services .certDropList td.dropDwnItem,
#services .certDropList td.dropDwnItem_dim{
  background: #fff !important;
  color: var(--sec-navy, #001F5E) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
}

/* link داخل dropdown */
#services .certDropList td a{
  color: var(--sec-navy, #001F5E) !important;
  text-decoration: none !important;
  display: block;
  white-space: nowrap;
}

/* hover */
#services .certDropList td:hover{
  background: var(--sec-soft, #EEF4FF) !important;
}

/* آخر عنصر بدون border */
#services .certDropList tr:last-child td{
  border-bottom: 0 !important;
}

/* نخلي الشريط يسمح بلف العناصر */
#services > td{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* التابات في الشاشات الصغيرة */
@media (max-width: 768px){
  #services td > table{
    margin: 6px 6px !important;
  }
  #services td > table span{
    font-size: 13px !important;
    padding: 10px 12px !important;
  }
}

#services td > table{
  position: relative;
}
#services .certDropList{
  position: absolute !important;
  inset-inline-start: 0;
  top: 100%;
}

/* ===== Sidebar cards container (ONLY the cell that contains cards) ===== */
td[bgcolor="#DFDFDF"]{
  background: var(--sec-bg, #fff) !important;
  border: 1px solid var(--sec-line, rgba(0,0,0,.08));
  border-radius: 16px;
  padding: 16px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

/* عنوان البلوك */
td[bgcolor="#DFDFDF"] > table > tbody > tr:first-child > td{
  color: var(--sec-navy, #001F5E) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-align: center;
  padding: 12px 8px 16px !important;
}

/* ✅ الـ GRID يتطبق فقط على الـ TD اللي شايل الكروت (الـ row الثاني) */
td[bgcolor="#DFDFDF"] > table > tbody > tr:nth-child(2) > td{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px !important;
}

/* الكارد نفسه */
td[bgcolor="#DFDFDF"] table[onclick]{
  width: 137px !important;
  float: none !important;
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: #fff;
  border: 1px solid var(--sec-line, rgba(0,0,0,.08));
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;

  position: relative;       /* مهم للـ dropdown */
  overflow: visible;        /* مهم عشان القائمة متتقصش */
  z-index: 1;

  transition: transform .15s ease, box-shadow .15s ease;
}

td[bgcolor="#DFDFDF"] table[onclick]:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

td[bgcolor="#DFDFDF"] img.icon{
  width: 139px !important;
  height: auto;
  border: 0 !important;
  margin-bottom: 3px;
}

/* ===== Dropdown ===== */
td[bgcolor="#DFDFDF"] .certDropList{
  position: absolute !important;
  inset-inline-start: 0 !important;    /* RTL/LTR friendly */
  display: none;                        /* مخفية افتراضيًا */
  z-index: 9999 !important;

  min-width: 220px;
  background: #fff !important;
  border: 1px solid var(--sec-line, rgba(0,0,0,.08));
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
  overflow: hidden;
}

/* ✅ لأن certDropList جدول: خليه يظهر table مش block */
td[bgcolor="#DFDFDF"] table[onclick].is-open .certDropList{
  display: table !important;
}

/* صفوف القائمة */
td[bgcolor="#DFDFDF"] .certDropList td{
  background: #fff !important;
  color: var(--sec-navy, #001F5E) !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
  white-space: nowrap; /* يمنع تكسير الكلمات */
}

td[bgcolor="#DFDFDF"] .certDropList td:hover{
  background: var(--sec-soft, #EEF4FF) !important;
}

/* ===== Remove legacy link underline & orange hover ===== */

/* كل الروابط داخل كروت الشهادات والدروب داون */
td[bgcolor="#DFDFDF"] a,
td[bgcolor="#DFDFDF"] a:visited,
td[bgcolor="#DFDFDF"] a:hover,
td[bgcolor="#DFDFDF"] a:active,
td[bgcolor="#DFDFDF"] a:focus{
  text-decoration: none !important;
  color: inherit !important;
  outline: none !important;
}

/* Container بتاع أزرار الكارد */
.cert-actions-cell{
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* نخلي كل الأزرار تتعامل كـ stack */
.cert-actions-cell input[type="button"]{
  display: block !important;
  width: min(220px, 90%) !important;     /* عرض لطيف وفي الموبايل ما يطلعش برة */
  margin: 8px auto 0 !important;         /* مسافة بين الأزرار + توسيط */
  padding: 10px 14px !important;
  border-radius: 999px !important;       /* pill */
  background: #0066CC !important;
  color: #fff !important;
  border: 0 !important;

  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;           /* يمنع ارتفاع غريب */
  height: auto !important;

  cursor: pointer;
  white-space: nowrap;
}

/* أول زر ما ياخدش margin-top كبيرة */
.cert-actions-cell input[type="button"]:first-of-type{
  margin-top: 0 !important;
}

/* Hover بدون ما يبوّظ المقاسات */
.cert-actions-cell input[type="button"]:hover{
  filter: brightness(.97);
}

/* Simple center page (Replacement of Lost) */
.sec-simple-page{
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 16px 60px;
  text-align: center !important;
}

.sec-simple-page__title{
  margin: 18px 0 14px;
  color: var(--sec-navy, #001F5E);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.25;
}

.sec-simple-page__actions{
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

/* Button size helper */
.sec-btn--md{
  padding: 12px 18px;
  border-radius: 12px;
  min-width: 140px;     /* بدل width: 5vw */
  font-weight: 400;
}



.sec-simple-page__title,
.sec-simple-page__actions{
  text-align: center !important;
}

.sec-simple-page .sec-btn{
  text-align: center !important;
  justify-content: center;
  align-items: center;
  line-height: 1 !important;
}

/* =============== Change Company Name Page (changeCompanyName.jsp) =============== */
#div4{
  max-width: 860px;
  margin: 28px auto 60px;
  padding: 26px 22px;

  background: var(--sec-soft, #EEF4FF);
  border: 1px solid var(--sec-line, rgba(0,0,0,.08));
  border-radius: 16px;
 

  text-align: center; /* يحل مشكلة right */
  box-sizing: border-box;
}

/* النصوص العلوية داخل #div4 */
#div4, #div4 *{
  font-family: "SE-MHRF", "ABCFavArabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* جدول الإدخال */
#div4 table{
  margin: 18px auto 10px;
  border-collapse: separate;
  border-spacing: 10px 10px;
}

#div4 table td{
  vertical-align: middle;
}

html[dir="rtl"] #div4 table td:first-child{
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  color: var(--sec-navy, #001F5E);
  padding-inline-end: 6px;
}

html[dir="ltr"] #div4 table td:first-child{
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
  color: var(--sec-navy, #001F5E);
  padding-inline-end: 6px;
}

/* حقل الإدخال */
#div4 input.text_responsive{
  width: min(520px, 78vw);
  height: 44px;

  border-radius: 12px;
  border: 1px solid var(--sec-line, rgba(0,0,0,.12));
  background: #fff;

  padding: 0 14px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

#div4 input.text_responsive:focus{
  border-color: #0066CC;
  box-shadow: 0 0 0 3px rgba(0,102,204,.16);
}


/* ==== SEC Form Shell (center + card) ==== */
#registrationDiv{
  max-width: 1100px;
  margin: 24px auto 40px;
}

#registrationDiv form{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  padding: 18px 18px 6px;
}

/* العناوين داخل الفورم */
#registrationDiv h1, 
#registrationDiv h2,
#registrationDiv h3{
  font-family: SE-MHRF, sans-serif;
  color: var(--sec-navy, #001F5E);
  font-weight: 700;
}

/* ==== Inputs / Selects (Figma-like) ==== */
#registrationDiv input[type="text"],
#registrationDiv input[type="password"],
#registrationDiv input[type="email"],
#registrationDiv input[type="number"],
#registrationDiv select,
#registrationDiv textarea{
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #F5F6F9;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  box-shadow: none;
}

#registrationDiv textarea{
  height: auto;
  min-height: 96px;
}

#registrationDiv input:focus,
#registrationDiv select:focus,
#registrationDiv textarea:focus{
  border-color: #0066CC;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,102,204,.12);
}

/* ==== Buttons ==== */
#registrationDiv .sec-btn,
#registrationDiv input[type="submit"].sec-btn,
#registrationDiv input[type="button"].sec-btn{
  background: #0066CC !important;
  color: #fff !important;
  border: 1px solid #0066CC !important;
  border-radius: 999px !important;
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

#registrationDiv .sec-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* ==== Sections spacing ==== */
#registrationDiv .row > [class*="col-"]{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* لو عندك العناوين الزرقاء (بيانات المشارك) خليها أقرب لفيجما */
#registrationDiv .blueBar, 
#registrationDiv .sectionTitle{
  background: #0066CC;
  color: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
}

/* ====== SEC Form Card (Figma-like) ====== */
.sec-form-card{
  amax-width: 980px;
  margin: 0 auto;                 /* Center always */
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* عنوان بلوك بيانات المشارك */
.sec-form-card .informationBlock{
  background: #0066CC;
  color: #fff !important;
  border-radius: 12px;
  padding: 10px 14px !important;
  font-weight: 500;
}

/* شكل الـ inputs/selects زي Figma */
.sec-form-card input[type="text"],
.sec-form-card input[type="password"],
.sec-form-card input[type="email"],
.sec-form-card select,
.sec-form-card textarea{
  width: 100% !important;
  background: #F5F6F9 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  height: 44px !important;
  outline: none;
  box-shadow: none !important;
  virtical-align:middle;
  font-size: 14px;
  text-align: start;              /* RTL/LTR safe */
}

/* Focus */
.sec-form-card input:focus,
.sec-form-card select:focus,
.sec-form-card textarea:focus{
  border-color: #0066CC !important;
  background: #fff !important;
}

/* Filled input (فيه قيمة) */
.sec-form-card input:not(:placeholder-shown):not(:focus),
.sec-form-card textarea:not(:placeholder-shown):not(:focus){
  background: #fff !important;
  border-color: #D1D5DB !important; /* رمادي زي فيجما */
}

.sec-form-card select.is-filled:not(:focus){
  background: #fff !important;
  border-color: #D1D5DB !important;
}


/* مسافات بين الأعمدة/الصفوف */
.sec-form-card .row{
  row-gap: 5px;
}

/* لو عندك زرار submit وغيره */
.sec-form-card input[type="button"],
.sec-form-card input[type="submit"],
.sec-form-card button{
  border-radius: 999px !important;
  padding: 10px 18px !important;
  background: #0066CC !important;
  border: 1px solid #0066CC !important;
  color: #fff !important;
  height: 40px;
  font-weight: 600;
}

/* يضمن إن العمود اللي واخد mx-auto فعلاً بيتوسّط حتى مع RTL */
.sec-form-card .mx-auto{
  margin-left: auto !important;
  margin-right: auto !important;
}

.col-xl-2,.col-lg-3,.col-md-3{
  padding-right: 30px !important;  /* يقلل المسافة ناحية الفورم */
}

.sec-burger,
.sec-burger:hover,
.sec-burger:active,
.sec-burger:focus,
.sec-burger:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

.sec-burger:focus,
.sec-burger:focus-visible,
.sec-burger:active{
  background: var(--sec-soft) !important;
  border-color: var(--sec-line) !important;
}

.sec-burger{
  -webkit-tap-highlight-color: transparent;
}