/*body { transition: background-color .45s ease, color .45s ease; direction: rtl; font-family:'Tajawal',sans-serif; }
.light-mode { --bg-light:#f5f5f5; --text-light:#222; --shortDesc-light:#555; background-color: var(--bg-light); color: var(--text-light); }
.light-mode .card { background:#fff; color: var(--text-light); }
.light-mode #shortDescription { color: var(--shortDesc-light); }
.light-mode .offcanvas .btn-close { filter: invert(0); }

.dark-mode { --bg-dark:#121212; --text-dark:#f2f2f2; --shortDesc-dark:#bbb; background-color: var(--bg-dark); color: var(--text-dark); }
.dark-mode .card { background:#111827; color: var(--text-dark); }
.dark-mode #shortDescription { color: var(--shortDesc-dark); }
.dark-mode .offcanvas .btn-close { filter: invert(1); }

#stickyHeader { display:flex; align-items:center; justify-content:space-between; padding:.25rem 1rem; box-shadow:0 2px 6px rgba(0,0,0,.2); transition: background-color .3s, color .3s; z-index:1070; }
.light-mode #stickyHeader { background-color:#fff; color:#222; }
.dark-mode #stickyHeader { background-color:#121212; color:#f2f2f2; }

.offcanvas .offcanvas-body { padding-top:1rem; }
#menuList li { padding:.9rem 1rem; border-radius:.5rem; cursor:pointer; font-weight:600; display:flex; align-items:center; gap:.5rem; }
#menuList li i { font-size:1.3rem; }
#menuList li:hover { background: rgba(0,0,0,.06); }
.dark-mode #menuList li:hover { background: rgba(255,255,255,.03); }

#home { display:flex; flex-direction:column; align-items:center; text-align:center; }

.gallery-wrapper { position:relative; }
#galleryContainer { display:flex; gap:1rem; padding:.5rem; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
.no-scrollbar { scrollbar-width:none; -ms-overflow-style:none; }
.no-scrollbar::-webkit-scrollbar { display:none; }
#galleryContainer img { height:300px; width:auto; border-radius:10px; cursor:pointer; flex:0 0 auto; transition: transform .25s ease; }
#galleryContainer img:hover { transform: scale(1.03); }
@media (max-width:768px){#galleryContainer img{height:60vw;}}

.gallery-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:1050; opacity:.9; border-radius:50%; width:48px;height:48px; display:flex; align-items:center; justify-content:center; }
.gallery-btn.left { right:12px; }
.gallery-btn.right { left:12px; }

.popup-overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,.75); z-index:2000; padding:1rem; }
.popup-card { position: relative; max-width:95%; max-height:95%; display:flex; align-items:center; justify-content:center; }
.popup-card img { max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.6);}
@media (min-width:992px){ .popup-card img{ max-height:90vh; max-width:auto;} }
.popup-close { position:absolute; top:-18px; left:-18px; z-index:2010; background: rgba(255,255,255,0.08); border-radius:50%; }

#reviewsContainer { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; margin-top:1rem; }

.working-day { font-weight:600; margin-bottom:.25rem; }
.working-period { margin-left:1rem; font-size:.9rem; color:inherit; }
*/

:root {
  --bg-light: #f5f5f5;
  --text-light: #222;
  --accent-light: #0077ff;

  --bg-dark: #121212;
  --text-dark: #f2f2f2;
  --accent-dark: #1e90ff;
}

/* عام */
body { transition: background-color .45s ease, color .45s ease; direction: rtl; }

.light-mode {
  background-color: var(--bg-light);
  color: var(--text-light);
}
.light-mode .card { background: #fff; color: var(--text-light); }
.light-mode .offcanvas { background: #fff; color: var(--text-light); }

.dark-mode {
  background-color: var(--bg-dark);
  color: var(--text-dark);
}
.dark-mode .card { background: #111827; color: var(--text-dark); }
.dark-mode .offcanvas { background: #111827; color: var(--text-dark); }

#stickyHeader { display:flex; align-items:center; justify-content:space-between; padding:.25rem 1rem; box-shadow:0 2px 6px rgba(0,0,0,.2); transition: background-color .3s, color .3s; z-index:1070; }
.light-mode #stickyHeader { background-color:#fff; color:#222; }
.dark-mode #stickyHeader { background-color:#121212; color:#f2f2f2; }

/* القائمة الجانبية */
.offcanvas .offcanvas-body { padding-top: 1rem; }
#menuList li {
  padding: .9rem 1rem;
  border-radius: .5rem;
  cursor: pointer;
  font-weight: 600;
}
#menuList li span {
  padding: 8px;
}
#menuList li:not(:last-child) { margin-bottom: .5rem; }
#menuList li:hover { background: rgba(0,0,0,0.06); }
.dark-mode #menuList li:hover { background: rgba(255,255,255,0.03); }

/* شعار القائمة */
#sidebar .offcanvas-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1rem;
}
#sidebarLogo { border-radius: 50%; width: 100px; margin-bottom: .5rem; }

/* شعار منتصف الصفحة */
#home { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* المعرض */
.gallery-wrapper { position: relative; }
#galleryContainer {
  display: flex;
  gap: 1rem;
  padding: .5rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
#galleryContainer img {
  height: 240px;
  width: auto;
  border-radius: 10px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform .25s ease;
}
#galleryContainer img:hover { transform: scale(1.03); }
@media (max-width:768px){#galleryContainer img{height:60vw;}}

.gallery-btn {
  position: absolute;
  top: 50%;
  /*transform: translateY(-50%);*/
  z-index: 40;
  opacity: .9;
  border-radius: 50%;
  width: 48px; height:48px;
  display:flex; align-items:center; justify-content:center;
}
.gallery-btn.left { right: 12px; }
.gallery-btn.right { left: 12px; }

/* Popup الصور */
.popup-overlay {
  position: fixed; inset: 0;
  display: flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.75);
  z-index: 2000;
  padding: 1rem;
}
.popup-card {
  position: relative;
  max-width: 95%;
  max-height: 95%;
  display:flex; align-items:center; justify-content:center;
}
.popup-card img { max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,0.6);}
.popup-close {
  position: absolute; top:-18px; left:-18px;
  z-index:10;
  background: rgba(255,255,255,0.08);
  border-radius:50%;
}

#galleryContainer {
  cursor: grab;
  scroll-behavior: smooth;
}

#galleryContainer.grabbing {
  cursor: grabbing;
}

.protected-image {
  width: 300px;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  flex-shrink: 0;

  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}


/* Reviews grid */
#reviewsContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* ساعات العمل */
.working-day { /*font-weight:600;*/ margin-bottom:.25rem; }
.working-period { margin-left:1rem; font-size:.9rem; color:#555; }

.contact-link {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

.contact-link:hover {
  color: var(--accent-color);
}

.category-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.dark-mode .category-card {
  background-color: #1e1e1e;
  color: #f5f5f5;
  border-color: #333;
}