/* Add custom CSS styles below */ 
:root{
  --popup-bg:#fff;
  --overlay-bg:rgba(0,0,0,0.55);
  --title-color:#004f59;
  --btn-bg:#A08629;
  --btn-color:#fff;
  --radius:12px;
}

.salla-popup-overlay{
  position:fixed;
  inset:0;
  background:var(--overlay-bg);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:20px;
}

.salla-popup-overlay.open{display:flex;}
.salla-popup{
  width:90%;
  max-width:420px;
  background:var(--popup-bg);
  border-radius:var(--radius);
  box-shadow:0 10px 25px rgba(0,0,0,0.25);
  opacity:0;
  transform:translateY(20px) scale(.97);
  transition:all .3s ease;
  position:relative;
  padding:24px;
  text-align:center;
}
.salla-popup.open{opacity:1;transform:translateY(0) scale(1);}

.salla-popup h3.popup-title{
  margin:0 0 8px;
  font-size:1.3rem;
  color:var(--title-color);
  font-weight:700;
}
.salla-popup p.popup-text{
  margin:0 0 20px;
  color:#333;
  font-size:1rem;
}

.salla-popup .popup-login-btn{
  background:var(--btn-bg);
  color:var(--btn-color);
  padding:10px 20px;
  border-radius:8px;
  border:none;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  transition:background .3s;
}
.salla-popup .popup-login-btn:hover{
  background:#8c7524; /* درجة أغمق عند المرور */
}

.salla-popup button.close{
  background:transparent;
  border:none;
  position:absolute;
  top:10px;
  right:12px;
  font-size:22px;
  cursor:pointer;
  color:#666;
}
@media(max-width:480px){
  .salla-popup{padding:18px;}
  .salla-popup h3{font-size:1.15rem;}
}