body {
  font-family: 'Tajawal', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #2a0a3d, #4b1b6a);
  position: relative;
  min-height: 100vh;
  color: #fff;
  margin: 0;
  padding: 20px;
}

/*  استدعاء الخطوط محلياً لسرعة البرق */
@font-face {
    font-family: 'Tajawal';
    src: url('../assets/fonts/Tajawal-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tajawal';
    src: url('../assets/fonts/Tajawal-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tajawal';
    src: url('../assets/fonts/Tajawal-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* الآن يمكنك استخدام الخط في أي مكان بكل ثقة */
* {
    font-family: 'Tajawal', sans-serif;
}

/* النجوم */
.stars { position: fixed; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.star {
  position: absolute; background: rgba(255, 235, 59, 0.8); width: 3px; height: 3px; border-radius: 50%;
  box-shadow: 0 0 20px 2px rgba(255, 235, 59, 0.5);
  animation: twinkle 1.5s infinite alternate;
}
@keyframes twinkle { from { opacity: 0.3; transform: scale(0.8); } to { opacity: 1; transform: scale(1.2); } }

/* المربع الزجاجي (أعرض قليلاً ليناسب القراءة) */
.terms-container {
  width: 100%;
  max-width: 650px;
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 15px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 2;
  position: relative;
  padding: 40px;
  box-sizing: border-box;
}

h2 {
  text-align: center;
  color: var(--brand-gold, #facc15);
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: 900;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 15px;
}

/* صندوق النص القابل للتمرير */
.terms-content {
  max-height: 50vh; /* يأخذ نصف الشاشة فقط لتجنب الطول المزعج */
  overflow-y: auto;
  padding-right: 15px;
  padding-left: 10px;
  direction: rtl;
  color: #cbd5e1;
  line-height: 1.8;
  font-size: 15px;
  margin-bottom: 25px;
}

/* تخصيص شكل شريط التمرير (Scrollbar) */
.terms-content::-webkit-scrollbar { width: 6px; }
.terms-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }

h3 {
  color: #ba68c8;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 18px;
}

p { margin-top: 0; text-align: justify; }

/* الزر */
.back-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(45deg, var(--brand-pink, #f43f5e), #e11d48);
  border: none;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  font-family: inherit;
  transition: 0.2s;
}

.back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(225, 29, 72, 0.4);
}

/* ===== Moved from HTML ===== */
.terms-content h3 { color: #00d2ff; margin-top: 28px; margin-bottom: 8px; font-size: 1.1rem; border-right: 3px solid #00d2ff; padding-right: 10px; }
    .terms-content p, .terms-content li { line-height: 2; color: #ccc; font-size: 0.95rem; }
    .terms-content ul { padding-right: 20px; }
    .badge { display: inline-block; background: rgba(0,210,255,0.1); border: 1px solid #00d2ff; color: #00d2ff; padding: 2px 10px; border-radius: 20px; font-size: 0.8rem; margin-right: 6px; vertical-align: middle; }
    .last-updated { color: #555; font-size: 0.8rem; text-align: left; margin-bottom: 20px; }