/*
Theme Name: Yasmeen Ultralight Clean v2
Theme URI: https://example.com/
Author: Danial / ChatGPT
Description: Clean, fast theme with boxed navbar (language / logo / menu), popup burger + overlay, Polylang names-only switcher, no deprecated APIs.
Version: 2.1.0
Text Domain: yasmeen-ultralight-clean-v2
*/

:root{
  --aqua:#00bcd4;
  --aqua-700:#0095a8;
  --blue:#1d4ed8;
  --green:#25D366;
  --dark:#0f172a;
  --bg:#f8fafc;
  --card:#ffffff;
  --radius:16px;
  --shadow:0 6px 20px rgba(15,23,42,.08);
  --focus: 0 0 0 3px rgba(0,188,212,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Helvetica,Arial;color:var(--dark);background:var(--bg);line-height:1.7;padding-bottom:84px}
a{color:var(--blue);text-decoration:none;font-weight:700}
a:hover{text-decoration:underline}
a:focus{outline:none; box-shadow:var(--focus); border-radius:10px}
.container{max-width:1180px;margin:0 auto;padding:0 16px}
.breadcrumbs {
  background: var(--card);        /* نفس خلفية الكروت */
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);             /* نص داكن */
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.breadcrumbs a {
  color: var(--blue);             /* الأزرق الأساسي */
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s ease;
}

.breadcrumbs a:hover {
  color: var(--aqua-700);         /* أزرق مائي أغمق عند الهوفر */
  text-decoration: underline;
}

.breadcrumbs span.separator {
  margin: 0 8px;
  color: #64748b;                 /* رمادي محايد */
  font-weight: normal;
}

/* ضبط اللوغو داخل الناف بار */
.header .custom-logo {
  max-height: 55px;   /* اضبط الرقم حسب ارتفاع الناف بار */
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ضبط الرابط حول اللوغو */
.header .custom-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* يخلي اللوغو ينسجم مع ارتفاع الناف بار */
}


/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;font-weight:800;box-shadow:var(--shadow);border:0;cursor:pointer;transition:transform .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.whatsapp{background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff}
.btn.call{background:linear-gradient(180deg,var(--aqua),var(--aqua-700));color:#fff}
.btn.lang{background:#e2f7fb;color:#0369a1;border-radius:14px;padding:8px 14px;font-weight:800;box-shadow:none}


/* Topbar */
.topbar{background:#fff;border-bottom:1px solid #e2e8f0}
.topbar .container{display:flex;justify-content:center;gap:10px;padding:8px 16px;flex-wrap:wrap}

/* Header / Navbar */
.header{position:sticky;top:0;z-index:50;background:#ffffffd9;backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid #e2e8f0}
.nav-grid{display:grid;grid-template-columns:30% 20% 50%;align-items:center;padding:10px 0}
.nav-box{display:flex;align-items:center;justify-content:center;min-height:44px}
.lang-box{justify-content:flex-start}
.logo-box{justify-content:center}
.menu-box{justify-content:flex-end}

/* Brand */
.brand{display:flex;align-items:center;font-weight:900;color:var(--dark);white-space:nowrap;text-decoration:none;gap:10px}
.brand img{height:36px;width:auto}
.brand .text{font-size:1.1rem}

/* Desktop menu */
.menu{display:none;list-style:none;margin:0;padding:0;gap:20px}
.menu li{list-style:none;margin:0;padding:0}
.menu a{color:var(--dark);font-weight:700;padding:8px 12px;border-radius:10px}
.menu a:hover{background:#f1f5f9}

/* Burger */
.burger{display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid #e2e8f0;background:#fff;border-radius:8px}
.burger span{height:2px;width:22px;background:#0f172a;border-radius:2px}

/* Mobile overlay + panel */
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:199}
.mobile-panel{display:none;position:fixed;inset:0;background:#fff;z-index:200;padding:24px;overflow-y:auto}
.mobile-panel.open{display:block}
.mobile-overlay.open{display:block}
.mobile-panel .top{display:flex;align-items:center;justify-content:space-between}
.mobile-panel nav ul{list-style:none;margin:0;padding:0}
.mobile-panel a{display:block;padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px;color:#0f172a;margin-top:10px}

/* Main / Cards / Tables / Notes */
main{padding:18px 0}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin:18px 0}
.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:14px;box-shadow:var(--shadow)}
.table th,.table td{padding:12px 14px;border-bottom:1px solid #e5e7eb;text-align:start}
.table thead th{background:#f1f5f9;font-weight:900}
.note{border-left:6px solid var(--aqua);background:#ecfeff;padding:12px 14px;border-radius:12px}

/* Footer fixed bar */
.footer{margin-top:40px;padding:24px 0;color:#334155}
.bottom-bar{position:fixed;left:0;right:0;bottom:0;background:#fffffff2;border-top:1px solid #e2e8f0;z-index:70}
.bottom-bar .container{display:grid;gap:10px;padding:10px 16px;grid-template-columns:1fr}
.bottom-bar .btn{width:100%}

/* Polylang list (names only) */
.lang-list{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lang-list a{background:#eff6ff;color:#0284c7;border-radius:10px;padding:6px 10px;font-weight:800;text-decoration:none}
.lang-list .current{display:none}
.lang-list img,.lang-list .sep{display:none}

/* Desktop */
@media(min-width:1024px){
  .menu{display:flex}
  .burger{display:none}
  .bottom-bar .container{grid-template-columns:1fr 1fr}
}
/* Responsive H1 fix to replace deprecated UA behavior */
h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.3;
  margin: 0.5em 0;
}
/* ====== Dropdown Menus (Desktop) ====== */
.menu li {
  position: relative;
}

.menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--card);       /* نفس خلفية الكروت */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 200px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  z-index: 1000;
}

.menu li:hover > ul {
  display: block;
}

.menu li ul li {
  margin: 0;
}

.menu li ul li a {
  display: block;
  padding: 8px 14px;
  font-weight: 600;
  color: var(--dark);
  border-radius: 0; /* يخليها مثل لستة نظيفة */
  transition: background .2s ease, color .2s ease;
}

.menu li ul li a:hover {
  background: #f1f5f9;  /* نفس hover تبع القائمة الرئيسية */
  color: var(--blue);
}

/* ====== Dropdown Menus (Mobile) ====== */
.mobile-menu li ul {
  display: none;
  margin: 8px 0 0 0;
  padding-left: 14px;
  list-style: none;
}

.mobile-menu li.open > ul {
  display: block;
}

.mobile-menu li.menu-item-has-children > a::after {
  content: "▾";
  float: right;
  font-size: 0.8em;
  margin-left: 6px;
  color: var(--aqua-700);
}
/* ===== Modal Popup ===== */
#branch-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; 
  top: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0,0,0,.6);
}

/* ديسكتوب */
#branch-modal .modal-content {
  background: #fff;
  margin: 10% auto;      /* وسط الشاشة تقريباً */
  padding: 20px;
  border-radius: 12px;
  width: 300px;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  animation: fadeInDown .3s ease;
}

#branch-modal h3 {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
}

#branch-modal ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#branch-modal li {
  margin: 10px 0;
}

#branch-modal a[data-city] {
  display: block;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  background: #f9f9f9;
  color: #333;
  transition: background .2s;
}

#branch-modal a[data-city]:hover {
  background: #eee;
}

#branch-modal .close {
  float: right;
  font-size: 22px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

#branch-modal .close:hover {
  color: #000;
}

/* Animation */
@keyframes fadeInDown {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ===== موبايل ===== */
@media (max-width: 768px) {
  #branch-modal .modal-content {
    margin: 25% auto;    /* ينزل لتحت أكتر */
    padding: 30px;       /* البادينغ على الموبايل */
    width: 90%;          /* يملى العرض تقريبا */
  }
}