/* ═══════════════════════════════════════════════════════════════════
   BASE & RESET
═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Tajawal', system-ui, sans-serif;
  color: #f0f4ff;
  background: #000;
  overflow-x: hidden;
}

h1, h2, h3, h4, p { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════
   BOOT LOADER — الثقب الأسود الافتتاحي
   أول ما يظهر عند فتح الموقع، فوق كل شيء (البوابة z:1000، مشهد الحجز
   z:10600، نموذج الموعد z:10700). يذوب عبر .done عند window load
   (script.js) بحد أدنى للعرض كي لا يومض ويختفي.
═══════════════════════════════════════════════════════════════════ */
.boot {
  position: fixed; inset: 0; z-index: 12000;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .9s ease .1s, visibility 0s linear 1.1s;
}
.boot.done { opacity: 0; visibility: hidden; pointer-events: none; }

.boot-loader {
  display: flex; width: 8rem; height: 8rem;
  justify-content: center; align-items: center;
  position: relative; flex-direction: column;
  z-index: 0; /* سياق تراكب خاص كي يبقى bh (z:-1) داخل المحمّل لا خلف الخلفية */
}

.bh-curve {
  width: 180%; height: 180%; position: absolute;
  animation: boot-rotate 8s linear infinite;
  fill: transparent;
}
.bh-curve text {
  letter-spacing: 20px; text-transform: uppercase;
  font: 300 1.5em 'Alexandria', sans-serif;
  fill: #f2ede2;
  filter: drop-shadow(0 2px 8px black);
}

.bh {
  z-index: -1; display: flex; position: absolute;
  width: 8rem; height: 8rem;
  align-items: center; justify-content: center;
}

.bh-circle {
  z-index: 0; display: flex; width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at center, black 25%, white 35%, white 100%);
  box-shadow: 0 0 2rem #c2babb;
  align-items: center; justify-content: center;
}
.bh-circle::after {
  z-index: 0; position: absolute; content: ""; display: flex;
  width: 100%; height: 100%; border-radius: 50%;
  border: 4px solid white;
  background: radial-gradient(circle at center, black 35%, white 60%, white 100%);
  box-shadow: 0 0 5rem #c2babb;
  align-items: center; justify-content: center;
  filter: blur(4px);
  animation: boot-pulse linear infinite 2s alternate-reverse;
}
.bh-circle::before {
  z-index: 1; content: ""; display: flex;
  width: 4rem; height: 4rem;
  border: 2px solid #ffffff;
  box-shadow: 3px 3px 10px #c2babb, inset 0 0 1rem #ffffff;
  border-radius: 50%;
  filter: blur(.5px);
  animation: boot-rotate linear infinite 3s;
}

.bh-disc {
  position: absolute; z-index: 0; display: flex;
  width: 5rem; height: 10rem; border-radius: 50%;
  background: radial-gradient(circle at center, #ffffff 80%, #353535 90%, white 100%);
  filter: blur(1rem) brightness(130%);
  border: 1rem solid white;
  box-shadow: 0 0 3rem #d7c4be;
  transform: rotate3d(1, 1, 1, 220deg);
  animation: boot-pulse2 linear infinite 2s alternate-reverse;
  justify-content: center; align-items: center;
}
.bh-disc::before {
  content: ""; position: absolute; z-index: 0; display: flex;
  width: 5rem; height: 10rem; border-radius: 50%;
  background: radial-gradient(circle at center, #ffffff 80%, #353535 90%, white 100%);
  filter: blur(3rem);
  border: 1rem solid white;
  box-shadow: 0 0 6rem #d7c4be;
  animation: boot-pulse linear infinite 2s alternate-reverse;
}

@keyframes boot-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes boot-pulse {
  0%   { box-shadow: 0 0 3rem #c2babb; transform: scale(1); }
  100% { box-shadow: 0 0 5rem #c2babb; transform: scale(1.09); }
}
@keyframes boot-pulse2 {
  0%   { box-shadow: 0 0 3rem #c2babb; transform: rotate3d(1, 1, 1, 220deg) scale(1); }
  100% { box-shadow: 0 0 5rem #c2babb; transform: rotate3d(1, 1, 1, 220deg) scale(.95); }
}

@media (prefers-reduced-motion: reduce) {
  .boot * { animation: none !important; }
}