/* Base Reset & Accessibility */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden!important;max-width:100vw;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:var(--gold,#c9a84c) transparent}

/* Slim Custom Scrollbar for WebKit */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:rgba(5,13,31,0.6)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c9a84c 0%,#9a7a2e 100%);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#e8c97a}

a{color:var(--gold-light);text-decoration:none}
a:hover{text-decoration:underline}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;font-size:1rem;padding:10px;background:var(--gold);color:var(--navy);z-index:999}
.skip:focus{left:20px;top:20px;width:auto;height:auto;overflow:visible}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
.spinner{width:40px;height:40px;border:4px solid #c9a84c33;border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite;margin:20px auto}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);padding:15px 30px;border-radius:12px;z-index:100;max-width:90%;text-align:center;font-family:Changa;animation:slideIn .3s ease-out}
.toast.success{background:var(--gradient-green);color:white}
.toast.error{background:var(--gradient-crimson);color:white}
.toast.warning{background:var(--gradient-orange);color:white}
.page-section{display:none}
.page-section.active{display:block}
.loading-overlay{position:fixed;inset:0;background:#050d1fd9;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;gap:20px;color:var(--gold-light);font-family:Changa;font-size:1.2rem}

/* ============================================
   MODAL POPUP DIALOG SYSTEM (GLASSMORPHISM & CENTERING)
   ============================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 13, 31, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
.modal-backdrop.active {
  opacity: 1;
}

.modal-dialog {
  background: linear-gradient(135deg, rgba(26, 47, 107, 0.96) 0%, rgba(13, 27, 62, 0.98) 100%);
  border: 2px solid var(--gold, #c9a84c);
  border-radius: 28px;
  padding: 35px 28px;
  max-width: 450px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 50px rgba(201, 168, 76, 0.25);
  transform: scale(0.85) translateY(15px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  direction: rtl;
  font-family: Tajawal, Cairo, sans-serif;
}
.modal-backdrop.active .modal-dialog {
  transform: scale(1) translateY(0);
}

.modal-icon-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.modal-error .modal-icon-badge {
  background: linear-gradient(135deg, #8B1A1A 0%, #C0392B 100%);
  color: #ffffff;
  border: 2px solid #ff7b7b;
  box-shadow: 0 10px 30px rgba(192, 57, 43, 0.5);
}
.modal-warning .modal-icon-badge {
  background: linear-gradient(135deg, #C2410C 0%, #FB923C 100%);
  color: #ffffff;
  border: 2px solid #ffd18b;
  box-shadow: 0 10px 30px rgba(251, 146, 60, 0.5);
}
.modal-success .modal-icon-badge {
  background: linear-gradient(135deg, #15803D 0%, #4ADE80 100%);
  color: #0d1b3e;
  border: 2px solid #86efac;
  box-shadow: 0 10px 30px rgba(74, 222, 128, 0.5);
}
.modal-info .modal-icon-badge {
  background: linear-gradient(135deg, #C9A84C 0%, #E8C97A 100%);
  color: #0d1b3e;
  border: 2px solid #fff;
  box-shadow: 0 10px 30px rgba(201, 168, 76, 0.5);
}

.modal-title {
  font-family: Changa, Cairo, sans-serif;
  font-size: 1.4rem;
  color: var(--gold-light, #e8c97a);
  margin-bottom: 12px;
  font-weight: 700;
}
.modal-text {
  color: #e2e8f0;
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 25px;
}
.modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.modal-actions button {
  min-width: 140px;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 1rem;
  cursor: pointer;
}