:root {
  --site-bg: #F1ECD1;
  --accent: #ec1419;
  --text: #111;
  --nav-h: 55px;
  --logo-size: 50px;
}

body { padding-bottom: calc(var(--nav-h)+18px); font-family:"Cairo",sans-serif; }

/* ===== NAV ===== */
nav.bottom-nav {
  position:fixed;
  bottom:8px;
  left:0;
  right:0;
  background:var(--site-bg);
  box-shadow:0 -4px 18px rgba(0,0,0,0.10);
  z-index:1200;
  display:grid;
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  align-items:center;
  height:var(--nav-h);
  border-radius:16px 16px 16px 16px;
  padding-inline:8px;
  column-gap:6px;
  backdrop-filter: blur(12px) saturate(110%); /* البلور */
}

nav.bottom-nav ul { display:contents; margin:0; padding:0; list-style:none; }
nav.bottom-nav li { display:flex; justify-content:center; align-items:center; }
nav.bottom-nav li:nth-child(2){ margin-inline-end:20px; }
nav.bottom-nav li:nth-child(4){ margin-inline-start:20px; }

nav.bottom-nav a {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  text-decoration:none;
  color:var(--text);
  font-size:15px;
  padding:4px 6px;
  border-radius:8px;
  transition:color .18s ease, transform .12s ease;
}

nav.bottom-nav a:active { transform:translateY(1px); }
nav.bottom-nav a:hover { color:var(--accent); transform:translateY(-2px); }
nav.bottom-nav .icon{ font-size:17px; line-height:1; display:block; }

/* logo */
.logo-cell{ display:flex; justify-content:center; align-items:center; }
.logo-btn{
  position:relative;
  top:-22px;
  width: calc(var(--logo-size)+12px);
  height: calc(var(--logo-size)+12px);
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  box-shadow:0 6px 18px rgba(0,0,0,0.16);
  border:2px solid rgba(0,0,0,0.04);
}
.logo-btn img{ width:var(--logo-size); height:var(--logo-size); object-fit:contain; display:block; }

/* ====== POPUP overlay ====== */
.popup-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.36); /* غطاء نصف شفاف */
  backdrop-filter: blur(6px) saturate(110%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
  z-index: 2500;
  padding: 24px;
}

.popup-overlay.active{
  opacity: 1;
  visibility: visible;
}

/* ====== POPUP card ====== */
.popup-card{
  width: 100%;
  max-width: 420px;
  background: var(--site-bg); /* نفس لون النافبار */
  backdrop-filter: blur(14px) saturate(120%); /* بلور داخلي */
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.24); /* ظل احترافي */
  transform: translateY(24px) scale(.985);
  transition: transform .32s cubic-bezier(.2,.9,.25,1);
  text-align: center;
  border: 1px solid rgba(0,0,0,0.08);
}

.popup-overlay.active .popup-card{
  transform: translateY(0) scale(1);
}

/* ====== عنوان Popup ====== */
.popup-title{
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: #111;
}

/* ====== قائمة الفروع ====== */
.branches-list{
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

/* زر الفرع */
.branch-btn{
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 16px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 14px;
  font-weight: 700;
  font-size: 15px;
  transition: transform .16s ease, box-shadow .16s ease, background .2s ease;
  box-shadow: 0 6px 18px rgba(236,20,25,0.18);
}

.branch-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.24);
  background: #c81212;
}

/* أيقونة الفرع */
.branch-icon{
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.16);
  color: #fff;
  flex-shrink: 0;
}

/* إغلاق Popup */
.popup-actions{
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.close-popup{
  background: transparent;
  border: 0;
  color: #333;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}