.eslpw-root{
 position: relative;
 width: 100%;
 z-index:9999;

 --eslpw-panel-a: 0.12;
 --eslpw-panel-blur: 12px;
 --eslpw-item-a: 0.18;
 --eslpw-item-blur: 0px;
 --eslpw-modal-a: 0.18;
 --eslpw-modal-blur: 14px;
 --eslpw-active-icon-bg: #ffffff;
}


.eslpw-panel{
 background: rgba(255,255,255,var(--eslpw-panel-a));
 border:1px solid rgba(255,255,255,0.22);
 backdrop-filter: blur(var(--eslpw-panel-blur));
 -webkit-backdrop-filter: blur(var(--eslpw-panel-blur));
 border-radius:16px;
 padding:12px;
}

.eslpw-list{list-style:none;margin:0;padding:0;}

.eslpw-item-btn{
 width:100%;
 background: rgba(255,255,255,var(--eslpw-item-a));
 border:1px solid rgba(255,255,255,0.28);
 padding:12px;
 text-align:right;
 cursor:pointer;
 border-radius:14px;
 margin-bottom:10px;
 box-shadow:0 10px 30px rgba(0,0,0,0.18);
 transition:all .2s ease;
 backdrop-filter: blur(var(--eslpw-item-blur));
 -webkit-backdrop-filter: blur(var(--eslpw-item-blur));
}

.eslpw-item-btn:hover{
 background: rgba(255,255,255, calc(var(--eslpw-item-a) + 0.10));
 transform:translateY(-2px);
}

.eslpw-backdrop{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,0.55);
 z-index: 99998;
 opacity:0;
 pointer-events:none;
 transition:.2s;
}

.eslpw-backdrop.open{
 opacity:1;
 pointer-events:auto;
}

.eslpw-modal-wrap{
 position:fixed;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 z-index: 99999;
 opacity:0;
 pointer-events:none;
 transition:.2s;
}

.eslpw-modal-wrap.open{
 opacity:1;
 pointer-events:auto;
}

.eslpw-modal{
 background: rgba(255,255,255,var(--eslpw-item-a));
 border:1px solid rgba(255,255,255,0.28);
 backdrop-filter: blur(var(--eslpw-panel-blur));
 -webkit-backdrop-filter: blur(var(--eslpw-panel-blur));
 width:600px;
 max-width:95%;
 border-radius:18px;
 padding:24px;
 position:relative;
}

.eslpw-close{
 position:absolute;
 top:12px;
 left:12px;
 background:rgba(0,0,0,0.1);
 border:0;
 border-radius:8px;
 cursor:pointer;
 padding:6px 12px;
}

.lock{overflow:hidden !important;}


/* ---- Text clarity on glass + icon layout ---- */
.eslpw-item-btn{
  color: rgba(17,17,17,0.95);
  text-shadow: 0 1px 10px rgba(255,255,255,0.30);
}

.eslpw-item-inner{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eslpw-item-icon{
  font-size: 16px;
  line-height: 1;
}

.eslpw-modal, .eslpw-modal-content, .eslpw-modal-content h3{
  color: rgba(17,17,17,0.95);
  text-shadow: 0 1px 12px rgba(255,255,255,0.28);
}

.eslpw-modal-content a{
  color: rgba(0,90,200,0.95);
}

/* icon + badge layout */
.eslpw-icon-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 10px;
}

.eslpw-badge-icon{
  position: absolute;
  top: -6px;
  left: -6px;
  font-size: 12px;
  line-height: 1;
  background: rgba(255,255,255,0.85);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

/* active item icon highlight */
.eslpw-item-btn.is-active .eslpw-icon-wrap{
  background: var(--eslpw-active-icon-bg);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

/* Keep ONLY the clicked button fully bright while the modal is open.
   We "float" it via JS (position:fixed with exact coordinates) to escape
   stacking contexts created by backdrop-filter/transform on ancestors. */
.eslpw-item-btn.eslpw-float-active{
  /* floated button is moved to fixed positioning via JS; keep original look */
}

/* ===== Popup Content Boxes Helper =====
Use in item content (WYSIWYG) like:
<div class="eslpw-box"><h4>عنوان</h4><p>متن...</p></div>
*/
.eslpw-box{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25);
}
.eslpw-box h4{
  margin: 0 0 8px 0;
  font-size: 16px;
}
.eslpw-box p:last-child{ margin-bottom: 0; }

}

.eslpw-root{ bottom: auto !important; }

.eslpw-item-icon svg{ display:block; }

/* ===== Inline widget: do not scroll internally ===== */
.eslpw-panel{
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
}


/* ===== STRICT INLINE WIDGET MODE (no floating, no internal scroll) ===== */
.eslpw-root{
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  z-index: auto !important;
}

.eslpw-panel{
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* If any rule tries to force scrollbars */
.eslpw-panel::-webkit-scrollbar{ width: 0 !important; height: 0 !important; }

/* Ensure list items don't become fixed */
.eslpw-item-btn, .eslpw-icon-wrap, .eslpw-item{ position: relative !important; }

/* If hamburger exists in markup, keep it hidden */

/* ===== MOBILE HAMBURGER MODE (desktop inline, mobile collapsible) ===== */
.eslpw-root{ position: static !important; }
.eslpw-hamburger{
  display: none;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

@media (max-width: 767px){
  .eslpw-root .eslpw-hamburger{
    display: inline-flex;
    position: relative;
    margin-bottom: 10px;
  }
  /* hide list by default on mobile */
  .eslpw-root .eslpw-panel.eslpw-panel-mobile{
    display: none;
  }
  .eslpw-root.eslpw-menu-open .eslpw-panel.eslpw-panel-mobile{
    display: block;
    animation: eslpwDropDown .18s ease;
  }
  @keyframes eslpwDropDown{
    from{ transform: translateY(-8px); opacity: 0; }
    to{ transform: translateY(0); opacity: 1; }
  }
}

/* ===== Active item highlight (matches popup glass) ===== */
.eslpw-item-btn.is-active{
  background: rgba(255,255,255,0.42) !important;
  border-color: rgba(255,255,255,0.70) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.18);
}
.eslpw-item-btn.is-active .eslpw-item-title{ font-weight: 700; }

/* Prevent page behind modal from scrolling */
body.eslpw-body-lock{
  overflow: hidden !important;
}

/* ===== POPUP HORIZONTAL PAGE ===== */
.eslpw-modal-wrap{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
}

.eslpw-modal-backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.35) !important;
}

.eslpw-modal{
  position: relative !important;
  width: min(980px, 92vw) !important;
  max-height: 82vh !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,0.74) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  direction: rtl;
}

/* Header area */
.eslpw-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.eslpw-modal-title{
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  line-height: 1.3;
}
.eslpw-modal-close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.eslpw-modal-close:hover{ background: rgba(255,255,255,0.8); }

/* Content scroll area */
.eslpw-modal-content{
  padding: 16px;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  max-height: calc(82vh - 64px) !important;
  line-height: 1.9;
}

/* Better typography for long medical text */
.eslpw-modal-content p{ margin: 0 0 12px; }
.eslpw-modal-content h1, .eslpw-modal-content h2, .eslpw-modal-content h3{
  margin: 10px 0 10px;
  line-height: 1.35;
}
.eslpw-modal-content ul, .eslpw-modal-content ol{ padding-right: 18px; }

@media (max-width: 767px){
  .eslpw-modal{
    width: 94vw !important;
    max-height: 86vh !important;
    border-radius: 18px !important;
  }
  .eslpw-modal-content{
    max-height: calc(86vh - 64px) !important;
    padding: 14px;
  }
}


/* ===== DRAWER FROM RIGHT ===== */
.eslpw-modal-wrap{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: block !important;
  padding: 0 !important;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}
.eslpw-modal-wrap.open{
  pointer-events: auto;
  opacity: 1;
}

.eslpw-modal-backdrop, .eslpw-backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.35) !important;
}

.eslpw-modal{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 100vh !important;
  width: min(520px, 92vw) !important;
  max-height: 100vh !important;
  border-radius: 22px 0 0 22px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: -26px 0 70px rgba(0,0,0,0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(104%) !important;
  transition: transform .22s ease;
  direction: rtl;
}
.eslpw-modal.open{
  transform: translateX(0) !important;
}

.eslpw-modal-content{
  padding: 16px;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  height: calc(100vh - 64px) !important;
}

@media (max-width: 767px){
  .eslpw-modal{ width: 100vw !important; border-radius: 0 !important; }
  .eslpw-modal-content{ height: calc(100vh - 64px) !important; }
}


/* ===== CENTER MODAL (keeps internal scroll) ===== */
.eslpw-modal-wrap{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}
.eslpw-modal-wrap.open{
  pointer-events: auto;
  opacity: 1;
}

.eslpw-modal-backdrop, .eslpw-backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.35) !important;
}

.eslpw-modal{
  position: relative !important;
  top: auto !important;
  right: auto !important;
  height: auto !important;
  width: min(980px, 92vw) !important;
  max-height: 82vh !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateY(10px) !important;
  transition: transform .22s ease;
  direction: rtl;
}
.eslpw-modal.open{
  transform: translateY(0) !important;
}

.eslpw-modal-content{
  padding: 16px;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  max-height: calc(82vh - 64px) !important;
  line-height: 1.9;
}

@media (max-width: 767px){
  .eslpw-modal{
    width: 94vw !important;
    max-height: 86vh !important;
    border-radius: 18px !important;
  }
  .eslpw-modal-content{
    max-height: calc(86vh - 64px) !important;
    padding: 14px;
  }
}


/* ===== LAMP ACTIVE STATE ===== */
.eslpw-item-btn.is-active{
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(255,255,255,0.95) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.16),
    0 0 0 2px rgba(255,255,255,0.55),
    0 0 18px rgba(255,255,255,0.55) !important;
  filter: saturate(1.05) brightness(1.02);
}
.eslpw-item-btn.is-active .eslpw-item-title{
  font-weight: 800 !important;
}
.eslpw-item-btn:not(.is-active){
  opacity: 0.72;
}
.eslpw-item-btn:not(.is-active):hover{
  opacity: 0.9;
}

/* ===== Popup media layout ===== */
.eslpw-media{
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 14px 0;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.45);
}

.eslpw-media img{
  width: 100%;
  height: auto;
  display: block;
}

.eslpw-media iframe, .eslpw-media video{
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
}

.eslpw-popup-section{
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.45);
}
.eslpw-popup-section + .eslpw-popup-section{ margin-top: 12px; }

/* ===== Backdrop glass variables ===== */
.eslpw-root{
  --eslpw-backdrop-color: rgba(0,0,0,0.55);
  --eslpw-backdrop-opacity: 0.35;
  --eslpw-backdrop-blur: 10px;
}

/* ===== BACKDROP GLASS ===== */
.eslpw-backdrop.open, .eslpw-modal-backdrop.open{
  background: var(--eslpw-backdrop-color) !important;
  opacity: var(--eslpw-backdrop-opacity) !important;
  backdrop-filter: blur(var(--eslpw-backdrop-blur)) !important;
  -webkit-backdrop-filter: blur(var(--eslpw-backdrop-blur)) !important;
}
.eslpw-modal-wrap{ z-index: 999999 !important; }
.eslpw-modal{ z-index: 1000000 !important; position: relative; }
.eslpw-backdrop, .eslpw-modal-backdrop{ z-index: 999998 !important; }

.eslpw-item-btn.is-active{
  position: relative !important;
  z-index: 1000001 !important;
}

/* ===== GLOBAL BACKDROP VARS (modal/backdrop may be outside wrapper) ===== */
body{
  --eslpw-backdrop-color: rgba(0,0,0,0.55);
  --eslpw-backdrop-opacity: 0.35;
  --eslpw-backdrop-blur: 10px;

  --eslpw-active-icon-glow: 0;
  --eslpw-active-icon-glow-color: rgba(255,255,255,0.95);
  --eslpw-active-icon-glow-strength: 16px;
}

/* ===== FULLSCREEN BACKDROP FIX ===== */
.eslpw-backdrop, .eslpw-modal-backdrop{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* apply glass only when open */
.eslpw-backdrop.open, .eslpw-modal-backdrop.open{
  background: var(--eslpw-backdrop-color) !important;
  opacity: var(--eslpw-backdrop-opacity) !important;
  backdrop-filter: blur(var(--eslpw-backdrop-blur)) !important;
  -webkit-backdrop-filter: blur(var(--eslpw-backdrop-blur)) !important;
}

/* ===== ACTIVE ICON GLOW ===== */
.eslpw-item-btn.is-active .eslpw-icon-wrap{
  box-shadow: 0 0 var(--eslpw-active-icon-glow-strength) var(--eslpw-active-icon-glow-color);
}
.eslpw-item-btn.is-active .eslpw-icon-wrap{
  opacity: calc(0.6 + (0.4 * var(--eslpw-active-icon-glow)));
}