/* ============================================================
   مركز الفتح — Layout
   ============================================================ */

/* ======= Container ======= */
.container {
  width: 100%; max-width: 1200px;
  margin: 0 auto; padding: 0 24px;
}

/* ======= Navbar ======= */
.navbar {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  width: min(96vw, 1200px); z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--shadow-glass);
  transition: all var(--dur-med) var(--ease-out);
}
.navbar.scrolled { box-shadow: var(--shadow-float); top: 10px; }

.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 900; font-size: 1.1rem;
  color: var(--text-0);
}
.nav-logo img {
  height: 44px; width: auto; border-radius: 10px;
}
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.nav-logo-text small { font-size: .68rem; font-weight: 600; color: var(--accent); font-family: var(--font-body); }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  padding: 9px 16px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: .88rem; color: var(--text-1);
  transition: all var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--accent); background: var(--accent-soft); }
.nav-links a.active {
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 14px var(--accent-glow);
}

.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--text-1); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }

.nav-phone-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 700; font-size: .85rem;
  font-family: var(--font-display);
  box-shadow: 0 6px 20px var(--accent-glow);
  transition: all var(--dur-fast);
}
.nav-phone-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--accent-glow); }

.nav-burger { display: none; }

/* Mobile nav */
.mobile-menu {
  position: fixed; inset: 0; z-index: 9100;
  background: var(--bg-1);
  transform: translateX(100%); transition: transform .45s var(--ease-out);
  display: flex; flex-direction: column; padding: 28px 24px;
  overflow-y: auto;
}
.mobile-menu.open { transform: none; }
.mobile-menu-close {
  align-self: flex-start; width: 42px; height: 42px; border-radius: 50%;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px; cursor: pointer; color: var(--text-1);
}
.mobile-menu a {
  padding: 16px 8px; font-size: 1.1rem; font-weight: 800;
  font-family: var(--font-display);
  border-bottom: 1px solid var(--glass-border); color: var(--text-0);
  display: flex; align-items: center; gap: 12px;
}
.mobile-menu a:hover { color: var(--accent); }

/* Page offset for fixed navbar */
.page { padding-top: 110px; min-height: 100vh; }

/* ======= Floating WhatsApp ======= */
.fab-whatsapp {
  position: fixed; bottom: 28px; left: 28px; z-index: 900;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #128c4a);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(37,211,102,.42);
  animation: float-y 3s ease-in-out infinite;
  cursor: pointer; text-decoration: none;
}
.fab-whatsapp:hover { transform: scale(1.1); animation-play-state: paused; }
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ======= Footer ======= */
.site-footer {
  margin-top: 100px; padding: 70px 0 30px;
  border-top: 1px solid var(--glass-border);
  background: var(--bg-1);
}
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 50px;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand img { height: 55px; width: auto; align-self: flex-start; object-fit: contain; }
.footer-brand p { color: var(--text-2); font-size: .88rem; line-height: 1.7; }
.footer-col h4 { font-size: .95rem; margin-bottom: 18px; color: var(--text-0); }
.footer-col a {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-2); font-size: .86rem; margin-bottom: 12px;
  transition: color var(--dur-fast);
}
.footer-col a:hover { color: var(--accent); }
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%; margin: 0;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); transition: all var(--dur-fast);
}
.footer-social a:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.footer-bottom {
  padding-top: 24px; border-top: 1px solid var(--glass-border);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; font-size: .82rem; color: var(--text-3);
}
.footer-bottom .accent-link { color: var(--accent); }

/* ======= Section utilities ======= */
.section-block { margin-bottom: 80px; }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 36px;
}
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); }

/* ======= Cards Grid ======= */
.cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.cards-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ======= Booking card ======= */
.booking-card {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all var(--dur-med) var(--ease-out);
}
.booking-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-float);
  border-color: var(--accent);
}

/* ======= Stats bar ======= */
.stats-bar {
  display: flex; gap: 0; background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border); border-radius: var(--radius-xl);
  overflow: hidden; margin: 40px 0;
}
.stat-item {
  flex: 1; padding: 24px 20px; text-align: center;
  border-left: 1px solid var(--glass-border);
}
.stat-item:last-child { border-left: none; }
.stat-item strong { display: block; font-size: 1.8rem; font-family: var(--font-display); font-weight: 900; color: var(--accent); margin-bottom: 4px; }
.stat-item span { font-size: .82rem; color: var(--text-2); }

/* ======= Responsive ======= */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-phone-btn { display: none; }
  .nav-burger {
    display: flex; width: 42px; height: 42px; border-radius: 50%;
    align-items: center; justify-content: center;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    cursor: pointer; color: var(--text-0);
  }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cards-grid-3 { grid-template-columns: 1fr; }
  .stats-bar { flex-wrap: wrap; }
  .stat-item { min-width: 50%; border-left: none; border-bottom: 1px solid var(--glass-border); }
}
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}