@charset "UTF-8";

/* الملف: public_html/assets/css/shared/components/site-header.css */
/* الوصف: تنسيقات الهيدر الموحد للزوار والعملاء ومقدمي الخدمات */

:root{
  --site-header-bg:#0a4467;
  --site-header-surface:#0d4d75;
  --site-header-text:#ffffff;
  --site-header-text-soft:rgba(255,255,255,.84);
  --site-header-line:rgba(255,255,255,.14);
  --site-header-line-strong:rgba(255,255,255,.22);
  --site-header-hover:rgba(255,255,255,.08);
  --site-header-active:rgba(255,255,255,.14);
  --site-header-dropdown-bg:#ffffff;
  --site-header-dropdown-text:#17324a;
  --site-header-dropdown-line:#d7e3ee;
  --site-header-shadow:0 10px 28px rgba(7, 25, 40, .12);
  --site-header-radius:16px;
  --site-header-radius-sm:10px;
  --site-header-icon-size:42px;
  --site-header-logo-h:52px;
  --site-header-dropdown-min:240px;
  --site-header-mobile-panel-bg:#0a4467;
  --site-header-mobile-line:rgba(255,255,255,.10);
  --site-header-mobile-submenu-bg:rgba(255,255,255,.05);
  --site-header-mobile-submenu-bg-active:rgba(255,255,255,.10);
  --site-header-mobile-submenu-line:rgba(255,255,255,.09);

  --site-header-overlay-surface:rgba(255,255,255,.08);
  --site-header-overlay-border:rgba(255,255,255,.14);
  --site-header-overlay-blur:0px;
}

.site-header{
  position:relative;
  z-index:40;
  color:var(--site-header-text);
  background:var(--site-header-bg);
  box-shadow:var(--site-header-shadow);
}

.site-header a{
  text-decoration:none;
}

.site-header__top{
  padding-block:14px 10px;
}

.site-header__bottom{
  padding-block:10px 14px;
}

.site-header__top-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.site-header__brand{
  min-width:0;
  flex:0 1 auto;
}

.site-header__brand-link{
  display:inline-flex;
  align-items:center;
  gap:0;
  max-width:100%;
}

.site-header__brand-link:focus-visible{
  outline:2px solid rgba(255,255,255,.8);
  outline-offset:4px;
  border-radius:12px;
}

.site-header__brand-logo{
  display:block;
  width:auto;
  max-width:min(100%, 220px);
  height:var(--site-header-logo-h);
  object-fit:contain;
  flex:0 0 auto;
}

.site-header__top-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.site-header__logout-form{
  margin:0;
  display:flex;
  align-items:center;
}

.site-header__icon-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--site-header-icon-size);
  height:var(--site-header-icon-size);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.site-header__icon-action:hover,
.site-header__icon-action:focus-visible{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.20);
  transform:translateY(-1px);
  outline:none;
}

.site-header__icon-action img{
  width:18px;
  height:18px;
  object-fit:contain;
  display:block;
}

.site-header__menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  width:var(--site-header-icon-size);
  height:var(--site-header-icon-size);
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.site-header__menu-toggle:hover,
.site-header__menu-toggle:focus-visible{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.20);
  transform:translateY(-1px);
  outline:none;
}

.site-header__menu-toggle-line{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background:#ffffff;
}

.site-header__divider{
  pointer-events:none;
}

.site-header__divider-line{
  display:block;
  width:100%;
  height:1px;
  background:var(--site-header-line);
}

.site-header__nav{
  width:100%;
  min-width:0;
}

.site-header__nav--mobile{
  width:100%;
}

.site-header__menu{
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:8px 10px;
  margin:0;
  padding:0;
  list-style:none;
}

.site-header__menu-item{
  position:relative;
}

.site-header__menu-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 15px;
  border-radius:999px;
  color:var(--site-header-text);
  font-weight:800;
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
  position:relative;
  z-index:3;
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
}

.site-header__menu-link:hover,
.site-header__menu-link:focus-visible{
  background:var(--site-header-hover);
  color:var(--site-header-text);
  outline:none;
}

.site-header__menu-link--static{
  cursor:default;
  user-select:none;
}

.site-header__menu-item.is-active > .site-header__menu-link{
  background:var(--site-header-active);
}

.site-header__menu-item--has-dropdown{
  position:relative;
}

.site-header__desktop-dropdown-surface{
  position:relative;
  display:block;
}

.site-header__desktop-dropdown-surface::before{
  content:"";
  position:absolute;
  inset:-4px -6px -8px -6px;
  border-radius:20px;
  background:transparent;
  border:1px solid transparent;
  opacity:0;
  pointer-events:none;
  z-index:1;
  transition:
    opacity .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}

.site-header__menu-item--has-dropdown:hover .site-header__desktop-dropdown-surface::before,
.site-header__menu-item--has-dropdown:focus-within .site-header__desktop-dropdown-surface::before{
  opacity:1;
  background:var(--site-header-overlay-surface);
  border-color:var(--site-header-overlay-border);
}

.site-header__menu-item--has-dropdown:hover > .site-header__desktop-dropdown-surface > .site-header__menu-link--static,
.site-header__menu-item--has-dropdown:focus-within > .site-header__desktop-dropdown-surface > .site-header__menu-link--static{
  background:transparent;
}

.site-header__menu-item--has-dropdown.has-active-child > .site-header__desktop-dropdown-surface > .site-header__menu-link--static{
  background:transparent;
}

.site-header__menu-link--with-dropdown{
  position:relative;
  z-index:3;
}

.site-header__dropdown-anchor{
  position:absolute;
  inset-inline-start:0;
  top:100%;
  width:100%;
  height:14px;
  z-index:2;
}

.site-header__dropdown{
  position:absolute;
  inset-inline-start:0;
  top:calc(100% + 8px);
  min-width:max(var(--site-header-dropdown-min), 100%);
  max-width:320px;
  background:var(--site-header-dropdown-bg);
  color:var(--site-header-dropdown-text);
  border:1px solid var(--site-header-dropdown-line);
  box-shadow:0 16px 34px rgba(10, 31, 49, .12);
  padding:0;
  margin:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  pointer-events:none;
  z-index:3;
  transition:opacity .18s ease, visibility .18s ease, transform .18s ease;
  border-radius:16px;
}

.site-header__menu-item--has-dropdown:hover .site-header__dropdown,
.site-header__menu-item--has-dropdown:focus-within .site-header__dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

.site-header__dropdown-list{
  list-style:none;
  margin:0;
  padding:8px;
  display:grid;
  gap:4px;
  min-width:100%;
}

.site-header__dropdown-item{
  margin:0;
}

.site-header__dropdown-link{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:9px 12px;
  border-radius:10px;
  color:var(--site-header-dropdown-text);
  font-weight:700;
  background:#ffffff;
  border:1px solid transparent;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}

.site-header__dropdown-link:hover,
.site-header__dropdown-link:focus-visible,
.site-header__dropdown-link.is-active{
  background:#f5f9fc;
  border-color:#deebf4;
  color:#0b4268;
  outline:none;
}

.site-header__guest-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px;
}

.site-header__guest-btn{
  min-width:146px;
}

.site-header .site-header__guest-btn.btn--ghost{
  --btn-bg: rgba(255,255,255,.05);
  --btn-bg-hover: rgba(255,255,255,.10);
  --btn-bg-active: rgba(255,255,255,.14);
  --btn-text: #ffffff;
  --btn-border: rgba(255,255,255,.24);
  --btn-focus-ring: rgba(255,255,255,.18);
}

.site-header .site-header__guest-btn--primary.btn{
  --btn-bg: #ffffff;
  --btn-bg-hover: #f4f8fc;
  --btn-bg-active: #e9f1f8;
  --btn-text: #0a4467;
  --btn-border: #0a4467;
  --btn-focus-ring: rgba(255,255,255,.18);
}

.site-header__mobile-panel{
  display:none;
  border-top:1px solid var(--site-header-mobile-line);
  margin-top:10px;
  background:transparent;
}

.site-header__mobile-menu{
  list-style:none;
  margin:0;
  padding:12px 0 16px;
  display:grid;
  gap:8px;
}

.site-header__mobile-menu-item{
  margin:0;
}

.site-header__mobile-link,
.site-header__mobile-link--button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:44px;
  padding:0 15px;
  border-radius:12px;
  color:var(--site-header-text);
  background:rgba(255,255,255,.05);
  font-weight:800;
  font-size:14px;
  line-height:1.2;
  transition:background-color .2s ease, color .2s ease;
}

.site-header__mobile-link:hover,
.site-header__mobile-link:focus-visible,
.site-header__mobile-link.is-active,
.site-header__mobile-link--button:hover,
.site-header__mobile-link--button:focus-visible{
  background:rgba(255,255,255,.10);
  color:var(--site-header-text);
  outline:none;
}

.site-header__mobile-link--button{
  appearance:none;
  border:0;
  cursor:pointer;
  font-family:inherit;
}

.site-header__mobile-menu-item.is-active > .site-header__mobile-link,
.site-header__mobile-menu-item.is-active > .site-header__mobile-link--button{
  background:rgba(255,255,255,.12);
}

.site-header__mobile-submenu{
  display:none;
  padding-top:8px;
}

.site-header__mobile-submenu.is-open{
  display:block;
}

.site-header__mobile-submenu--nested{
  margin-top:8px;
  margin-inline-start:8px;
  padding:8px 8px 4px 12px;
  border-inline-start:1px solid var(--site-header-mobile-submenu-line);
  background:var(--site-header-mobile-submenu-bg);
  border-radius:12px;
}

.site-header__mobile-submenu-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
}

.site-header__mobile-submenu-item{
  margin:0;
}

.site-header__mobile-sublink{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:0 12px;
  margin-inline-start:8px;
  border-radius:10px;
  color:var(--site-header-text-soft);
  background:rgba(255,255,255,.04);
  font-weight:700;
  transition:background-color .2s ease, color .2s ease;
}

.site-header__mobile-sublink--nested{
  margin-inline-start:0;
  padding-inline:14px 12px;
  background:var(--site-header-mobile-submenu-bg-active);
}

.site-header__mobile-sublink:hover,
.site-header__mobile-sublink:focus-visible,
.site-header__mobile-sublink.is-active{
  background:rgba(255,255,255,.11);
  color:#ffffff;
  outline:none;
}

/* شاشات كبيرة جدًا */
@media (min-width: 1440px){
  .site-header__top{
    padding-block:16px 12px;
  }

  .site-header__bottom{
    padding-block:12px 16px;
  }

  .site-header__brand-logo{
    max-width:250px;
    height:56px;
  }

  .site-header__menu{
    gap:10px 12px;
  }

  .site-header__menu-link{
    min-height:44px;
    padding-inline:16px;
    font-size:14px;
  }

  .site-header__dropdown{
    max-width:340px;
  }
}

/* لابتوبات متوسطة وشاشات أقل اتساعًا */
@media (max-width: 1279.98px){
  .site-header__brand-logo{
    max-width:min(100%, 210px);
    height:50px;
  }

  .site-header__menu{
    gap:8px 9px;
  }

  .site-header__menu-link{
    min-height:40px;
    padding-inline:13px;
    font-size:13px;
  }

  .site-header__dropdown{
    max-width:300px;
  }

  .site-header__dropdown-link{
    min-height:40px;
    padding:9px 12px;
    font-size:13px;
  }
}

/* تابلت أفقي وأجهزة متوسطة */
@media (max-width: 1023.98px){
  .site-header__top{
    padding-block:14px 10px;
  }

  .site-header__bottom{
    padding-block:10px 14px;
  }

  .site-header__top-inner{
    gap:10px;
  }

  .site-header__brand-logo{
    height:48px;
    max-width:min(100%, 180px);
  }

  .site-header__top-actions{
    gap:8px;
  }

  .site-header__icon-action{
    width:40px;
    height:40px;
  }

  .site-header__icon-action img{
    width:18px;
    height:18px;
  }

  .site-header__menu{
    gap:7px;
  }

  .site-header__menu-link{
    min-height:38px;
    padding-inline:12px;
    font-size:13px;
  }

  .site-header__dropdown{
    max-width:280px;
  }

  .site-header__dropdown-list{
    padding:8px;
  }

  .site-header__dropdown-link{
    min-height:39px;
    padding:8px 11px;
    font-size:13px;
  }
}

/* الجوال */
@media (max-width: 767.98px){
  .site-header__top{
    padding-block:12px 8px;
  }

  .site-header__bottom{
    display:none;
  }

  .site-header__top-inner{
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:center;
    text-align:initial;
    gap:10px;
  }

  .site-header__brand{
    width:auto;
    display:flex;
    justify-content:flex-start;
    min-width:0;
    flex:1 1 auto;
  }

  .site-header__brand-link{
    justify-content:flex-start;
    gap:0;
    max-width:100%;
  }

  .site-header__brand-logo{
    height:44px;
    max-width:min(100%, 164px);
  }

  .site-header__top-actions{
    width:auto;
    justify-content:flex-end;
    gap:8px;
    flex:0 0 auto;
  }

  .site-header__menu-toggle{
    display:inline-flex;
  }

  .site-header__nav--desktop,
  .site-header__guest-actions--desktop{
    display:none;
  }

  .site-header__mobile-panel.is-open{
    display:block;
  }

  .site-header__guest-actions--mobile{
    padding:0 0 16px;
    flex-direction:column;
    align-items:stretch;
  }

  .site-header__guest-btn{
    width:100%;
    min-width:0;
  }
}

/* جوالات صغيرة */
@media (max-width: 479.98px){
  .site-header__top{
    padding-block:10px 8px;
  }

  .site-header__brand-logo{
    height:40px;
    max-width:min(100%, 148px);
  }

  .site-header__top-actions{
    gap:6px;
  }

  .site-header__icon-action,
  .site-header__menu-toggle{
    width:38px;
    height:38px;
  }

  .site-header__icon-action img{
    width:17px;
    height:17px;
  }

  .site-header__menu-toggle-line{
    width:16px;
  }

  .site-header__mobile-panel{
    margin-top:8px;
  }

  .site-header__mobile-menu{
    padding:10px 0 14px;
    gap:8px;
  }

  .site-header__mobile-link,
  .site-header__mobile-link--button{
    min-height:40px;
    font-size:13px;
    padding-inline:13px;
    border-radius:10px;
  }

  .site-header__mobile-submenu--nested{
    margin-inline-start:8px;
    padding:8px 8px 4px 12px;
    border-radius:10px;
  }

  .site-header__mobile-submenu-list{
    gap:6px;
  }

  .site-header__mobile-sublink{
    min-height:38px;
    font-size:12px;
    padding-inline:11px;
    border-radius:9px;
  }

  .site-header__mobile-sublink--nested{
    padding-inline:13px 11px;
  }
}

/* جوالات شديدة الصغر */
@media (max-width: 359.98px){
  .site-header__brand-logo{
    height:36px;
    max-width:min(100%, 128px);
  }

  .site-header__top-actions{
    gap:5px;
  }

  .site-header__icon-action,
  .site-header__menu-toggle{
    width:35px;
    height:35px;
  }

  .site-header__icon-action img{
    width:15px;
    height:15px;
  }

  .site-header__menu-toggle-line{
    width:14px;
  }

  .site-header__mobile-link,
  .site-header__mobile-link--button{
    min-height:38px;
    font-size:12px;
    padding-inline:11px;
  }

  .site-header__mobile-sublink{
    min-height:36px;
    font-size:12px;
    padding-inline:10px;
  }
}

@media (prefers-reduced-motion: reduce){
  .site-header *,
  .site-header *::before,
  .site-header *::after{
    transition:none !important;
    animation:none !important;
  }
}