/* WeData header + mega-menu panel.
   The header nav itself is FLAT (no dropdowns) — the client rejected the header dropdown
   outright, so the whole navigation lives in the full-menu panel (Elementor popup 21747)
   opened by "المميزات" and by the hamburger. Everything below is scoped to that panel
   (data-elementor-id="21747") or to the two header buttons, so no other page is affected. */

/* Header buttons: keep each label on one line — the pill collapsed into a circle when
   "تسجيل الدخول" wrapped onto two lines. */
.elementor-element-ef94a6f a,
.elementor-element-1c666bc a { white-space: nowrap !important; }

/* Mega panel: scroll if the content is taller than the viewport, never clip. */
[data-elementor-id="21747"] { overflow-y: auto; }

/* Item rows read as links, not as list bullets. */
[data-elementor-id="21747"] .elementor-icon-list-item > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 4px;
	border-radius: 8px;
	transition: background-color .15s ease, color .15s ease;
}
[data-elementor-id="21747"] .elementor-icon-list-item > a:hover { background: #F5F1FC; }

/* Stack the three groups on narrow screens instead of squeezing them. */
@media (max-width: 1024px) {
	[data-elementor-id="21747"] .e-con-inner > .e-con,
	[data-elementor-id="21747"] .elementor-container { flex-wrap: wrap; }
}

/* ---- Daftra-style panel (03/09): side list = tabs for the three groups + plain links; one group visible. */
[data-elementor-type="popup"] { overflow-y: auto; }
[data-elementor-type="popup"] .wd-group { display: none !important; }
[data-elementor-type="popup"] .wd-group.is-active { display: flex !important; }

/* Side list rows. The icon lives on the LI, never on the anchor: Elementor's nav-menu "pointer"
   effect owns a::before / a::after and its `content:""` wins the cascade, so the glyph came out blank
   and the pointer bar took the glyph's position - a blue mark sitting on the word (client 06/09,
   "icon بيبان فوق الكلمه"). As a flex row the icon, the label and the chevron cannot overlap at any width. */
[data-elementor-type="popup"] .elementor-nav-menu > li {
	display: flex; align-items: center; gap: 10px;
	padding-inline: 12px; border-radius: 10px;
	transition: background-color .15s ease, color .15s ease;
}
[data-elementor-type="popup"] .elementor-nav-menu > li > a {
	flex: 1 1 auto; display: block !important; padding: 10px 0 !important;
	background: none !important; text-align: start; line-height: 1.4;
}
[data-elementor-type="popup"] .elementor-nav-menu > li:hover { background: #F2F8FF; }
[data-elementor-type="popup"] .elementor-nav-menu > li.wd-tab > a { font-weight: 700; cursor: pointer; }
[data-elementor-type="popup"] .elementor-nav-menu > li.wd-tab.is-active { background: #E6F2FF; }
[data-elementor-type="popup"] .elementor-nav-menu > li.wd-tab.is-active > a { color: #0A63C7; }

/* Elementor's pointer pseudo-elements on the anchor: off, in the panel only. */
[data-elementor-type="popup"] .elementor-nav-menu > li > a::before,
[data-elementor-type="popup"] .elementor-nav-menu > li > a::after { display: none !important; }

[data-elementor-type="popup"] .elementor-nav-menu > li::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 15px; line-height: 1;
	color: #0A63C7; flex: 0 0 20px; text-align: center;
}
[data-elementor-type="popup"] .elementor-nav-menu > li.wd-tab::after {
	font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; line-height: 1;
	color: #7A879C; flex: 0 0 12px; text-align: center;
}
html[dir="rtl"] [data-elementor-type="popup"] .elementor-nav-menu > li.wd-tab::after { content: "\f053"; }
html:not([dir="rtl"]) [data-elementor-type="popup"] .elementor-nav-menu > li.wd-tab::after { content: "\f054"; }

/* Font Awesome 5 Free Solid code points only - the earlier set had three that Free does not ship,
   which is why only the home row drew a glyph. */
[data-elementor-type="popup"] li.wd-ico-home::before       { content: "\f015"; }  /* home */
[data-elementor-type="popup"] li.wd-ico-features::before   { content: "\f005"; }  /* star */
[data-elementor-type="popup"] li.wd-ico-activities::before { content: "\f009"; }  /* th-large */
[data-elementor-type="popup"] li.wd-ico-products::before   { content: "\f1b2"; }  /* cube */
[data-elementor-type="popup"] li.wd-ico-pricing::before    { content: "\f02c"; }  /* tags */
[data-elementor-type="popup"] li.wd-ico-docs::before       { content: "\f02d"; }  /* book */
[data-elementor-type="popup"] li.wd-ico-news::before       { content: "\f1ea"; }  /* newspaper */
[data-elementor-type="popup"] li.wd-ico-partners::before   { content: "\f0c0"; }  /* users */
[data-elementor-type="popup"] li.wd-ico-contact::before    { content: "\f0e0"; }  /* envelope */
[data-elementor-type="popup"] li.wd-ico-lang::before       { content: "\f0ac"; }  /* globe */

/* Right-side link rows (both popups). */
[data-elementor-type="popup"] .elementor-icon-list-item > a { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; }
[data-elementor-type="popup"] .elementor-icon-list-item > a:hover { background: #F2F8FF; }
[data-elementor-type="popup"] .elementor-icon-list-icon { width: 22px; text-align: center; }

/* Phones/tablets (client 06/09, Daftra pattern): the panel opens on the quick list only; tapping a group
   swaps to that group's links with a back bar. These rules live here, not in brand.css, because the
   is-active rule above has the same specificity and this file loads last. */
@media (max-width: 1024px) {
  [data-elementor-type="popup"] .wd-group.is-active { display: none !important; }
  .wd-sub-open [data-elementor-type="popup"] .wd-group.is-active { display: flex !important; }
  .wd-sub-open [data-elementor-type="popup"] .wd-panel-nav .elementor-widget-nav-menu,
  .wd-sub-open [data-elementor-type="popup"] [data-id="wdcta"] { display: none !important; }
}