/* استدعاء خط HONOR Sans Arabic UI */
@font-face {
  font-family: 'HONORSansArabicUI-EB';
  src: url('HONORSansArabicUI-EB.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { 
  background: #ffffff; 
  font-family: 'HONORSansArabicUI-EB', 'Segoe UI', Tahoma, Arial, sans-serif; 
  min-height:100vh; 
  display: flex;
  flex-direction: column;
}
/* تعميم الخط على جميع العناصر */
button, input, select, textarea, h1, p, div, span {
  font-family: 'HONORSansArabicUI-EB', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}
/* حاوية الصور العلوية */
.header-images {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.header-images img {
  width: 100%;
  display: block;
  height: auto;
}
/* SURVEY & CONTENT */
.survey-wrap {
  display:flex; 
  flex-direction: column;
  align-items:center; 
  justify-content:flex-start;
  padding: 10px 20px 20px 20px; 
  background: transparent;
  flex-grow: 1;
}
/* فراغ أبيض قليل بين الصورة الثانية والكارد */
.survey-card {
  background:#efefef; 
  border-radius:16px; 
  padding:32px 24px 24px;
  width:100%; 
  max-width:480px;
  margin-top: 15px; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  transform: scale(1);
}
/* حركة الانتقال الاحترافية للأسئلة */
.survey-card.fade-out {
  opacity: 0;
  transform: scale(0.95);
}
.survey-question {
  font-size:22px; 
  font-weight:bold; 
  color:#111;
  text-align:center; 
  margin-bottom:28px; 
  line-height:1.4;
}
.survey-answers { display:flex; flex-direction:column; gap:14px; }
.survey-btn {
  background:#1a4fa0; color:#fff; border:none; border-radius:14px;
  padding:18px 20px; font-size:18px; font-weight:bold;
  cursor:pointer; transition:background 0.2s, transform 0.1s;
  font-family:inherit;
}
.survey-btn:active { transform:scale(0.97); background:#153d80; }
.steps { display:flex; justify-content:center; gap:12px; margin-top:28px; }
.step {
  width:20px; height:20px; border-radius:50%;
  background:#ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition:background 0.3s;
}
.step.active { background:#1a4fa0; }
/* LOADING */
.loading-wrap {
  display:flex; align-items:center; justify-content:center;
  min-height:50vh; padding:20px; background: transparent;
  display:none;
  flex-grow: 1;
}
.loading-card {
  background:#efefef; border-radius:16px; padding:32px 24px 24px;
  width:100%; max-width:460px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; 
  text-align:center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.loading-title {
  font-size:22px; color:#333; text-align:center;
  margin-bottom:32px; font-weight:normal;
  width:100%;
}
.loading-item {
  font-size:19px; color:#aaa; margin:15px 0;
  display:flex; align-items:center; justify-content:center; 
  gap:12px; direction:rtl; transition:color 0.4s;
  width:100%; text-align:center;
}
.loading-item.done { color:#111; font-weight:bold; }
.loading-item .check { width:24px; height:24px; flex-shrink:0; display:none; }
.loading-item.done .check { display:inline; }
.loading-item .spin-wrap { width:24px; height:24px; flex-shrink:0; display:inline-block; }
.loading-item.done .spin-wrap { display:none; }
.spinner {
  width:22px; height:22px;
  border:3px solid #ccc; border-top-color:#555;
  border-radius:50%; animation:spin 0.8s linear infinite;
  display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }
.check svg { width:24px; height:24px; }
/* BOXES */
.boxes-wrap { 
  display:none; 
  padding:20px; 
  background: transparent;
  min-height:50vh;
  align-items:center; 
  justify-content:center;
  flex-grow: 1;
}
.box-picker {
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:1fr; 
  gap: 40px 24px; 
  padding:32px 24px; 
  background: #efefef;
  border-radius:16px;
  width:100%; max-width:680px; margin:auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.box-picker__item { cursor:pointer; height:0; padding-bottom:100%; position:relative; overflow: visible; }
.box-picker__item--open .box-picker__lid { transform:translateY(-80%) rotate(-28deg) translateX(-20%); }
.box-picker__item--open .box-picker__prize { transform:translateY(-15%); opacity: 1; }
.box-picker__lid { background-position:bottom; background-repeat:no-repeat; background-size:100%; height:100%; position:absolute; top:0; left:0; transition: transform 1.5s ease-in-out; width:100%; z-index:4; }
.box-picker__prize { background-size:contain; background-repeat:no-repeat; background-position:center; height:75%; left:12%; position:absolute; top:12%; transition: transform 1.5s ease-in-out, opacity 0.5s ease; width:76%; z-index:2; opacity: 0; }
.box-picker__box { z-index:3; left:0; }
.box-picker__back, .box-picker__box { background-size:cover; bottom:0; height:100%; position:absolute; width:100%; }
.box-picker__back { z-index:1; left:0; }
/* الصورة السفلية */
.footer-image {
  width: 100%;
  margin-top: auto;
}
.footer-image img {
  width: 100%;
  display: block;
  height: auto;
}
/* POPUP OVERLAY */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.popup-overlay.active {
  display: flex;
}
.popup-card {
  background-color: #ffffff;
  width: 94vw;
  max-width: 460px;
  border-radius: 14px;
  padding: 35px 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  text-align: center;
  box-sizing: border-box;
  z-index: 1001;

}
.success-icon {
  width: 100px;
  height: 100px;
  background-color: #8ade54;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 25px auto;
  position: relative;
}
.success-icon::after {
  content: '';
  width: 28px;
  height: 55px;
  border: solid white;
  border-width: 0 9px 9px 0;
  transform: rotate(45deg);
  margin-bottom: 10px;
  display: block;
}
.brand-logo {
  width: auto;
  height: auto;
  margin-bottom: 25px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.popup-title {
  font-size: 26px;
  font-weight: bold;
  color: #000000;
  margin: 0 0 20px 0;
  line-height: 1.4;
}
.popup-title.large {
  font-size: 32px;
  font-weight: 900;
}
.popup-text {
  font-size: 16px;
  color: #333333;
  line-height: 1.6;
  margin-bottom: 25px;
  font-weight: 500;
}
.btn-confirm {
  background-color: #004b93;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  width: 85%;
  padding: 12px 0;
  font-size: 22px;
  font-weight: normal;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 10px;
}
.btn-confirm:hover {
  background-color: #00366a;
}
/* CANVAS STYLE */
#festivalCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99999;
  background-color: transparent !important;
}