:root{
  --site-header-h: 80px;
}


/* ===============================
   GLOBAL RESET + TYPOGRAPHY
   =============================== */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body{
  min-height: 100%;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: "Cairo", sans-serif;
  background: #fff;
}

/* قرار واحد: كل النصوص Center */
body{
  text-align: center;
  flex: 1;
  padding: 12px 16px ;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===============================
   HEADER (ثابت)
   =============================== */
.site-header{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 80px;
  background: #b52b2b;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

.logo{
  height: 60px;
}

/* ===============================
   FOOTER (ثابت)
   =============================== */
.site-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: #b52b2b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 1000;
}


.cta-btn{
  width:50%;
  max-width: 220px;
  height:48px;
  border-radius:8px;
  font-size:19px;
  font-weight:900;
  background:linear-gradient(135deg,#e0dfdf,#f5f3f3);
  box-shadow:0 5px 5px rgba(0,0,0,.35);
  letter-spacing:.7px;
  transition:.15s ease;
}

.cta-note{
  font-size: 13px;
  color: #fff;
  opacity: 0.9;
}

/* ===============================
   MAIN SCROLL AREA
   =============================== */
.page{
  position: fixed;
  top: 80px;
  bottom: 100px;
  left: 0;
  right: 0;

  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;

  padding: 15px 15px 15px 15px;
}

/* ===============================
   PAGE TITLE
   =============================== */
.page-box{
  width: 100%;
  max-width: 460px;
}

.page-title{
  font-weight: 700;
  line-height: 1.45;
  font-size: 22px;
}

/* ===============================
   VIDEO (iOS / Android Safe)
   =============================== */
.video-section{
  width: 100%;
  max-width: 460px;
}

.video-box{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #000;
  overflow: hidden;
}

.video-box video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* play overlay */
.video-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.play-circle{
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #fff;
}

.video-box.playing .video-overlay{
  opacity: 0;
  pointer-events: none;
}

/* timeline */
.video-timeline{
  position: absolute;
  left: 80px;
  right: 80px;
  bottom: 18px;
  height: 6px;
  appearance: none;
  background: rgba(255,255,255,0.35);
  border-radius: 999px;
  z-index: 6;
  direction: ltr;

}

.video-timeline::-webkit-slider-thumb{
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
}

/* sound button */
#soundBtn{
  position: absolute;
  bottom: 0px;
  right: 12px;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  border: none;
  background: rgba(0,0,0,0);
  color: #fff;
  font-size: 18px;
  z-index: 6;
}

/* ===============================
   DESCRIPTION
   =============================== */
.description-body{
  width: 100%;
  max-width: 460px;
}

.description-body p{
  line-height: 1.7;
  color: #b52b2b;
  font-size: 16px;
}

/* ===============================
   PRICES
   =============================== */
.price-body{
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #b52b2b;
  padding: 5px 20px 20px 20px;


}

.prices-title{
  color: #b52b2b;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 18px;
}

.prices{
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.price-line{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px 5px 20px;
  background: #ffeeee;
  border-radius: 14px;
  font-size: 14px;
}

.price-line .v{
  font-weight: 700;
}

/* ===============================
   BLOCKS
   =============================== */
.block1-box,
.block2-box{
  width: 100%;
  max-width: 460px;
}

.block1-head,
.block2-head{
  padding: 12px;
  background: #f7f7f7;
}

.block1-title,
.block2-title{
  font-weight: 700;
  font-size: 18px;
}

.block1-body,
.block2-body{
  padding: 14px;
}

.block1-desc,
.block2-desc{
  margin-bottom: 10px;
  line-height: 1.7;
  font-size: 15px;
}

/* galleries */
.block1-gallery,
.block2-gallery{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0;
}

.block1-gallery img,
.block2-gallery img{
  width: 100%;
  border-radius: 12px;
}

/* ===============================
   GALLERY PREVIEW BUTTONS
   =============================== */

.gallery-btn{
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #b52b2b;      /* لون البراند */
  border: none;
  color: #fff;              /* السهم أبيض */
  font-size: 32px;
  font-weight: 700;
  cursor: pointer;
  transform: none !important;
  transition: background-color .2s ease, opacity .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  z-index: 3100;
}




/* أماكنهم */
.gallery-prev{
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-next{
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-close{
  top: 16px;
  right: 16px;
  font-size: 28px;
}

/* لمسة تفاعل بسيطة */
.gallery-btn:hover{
  opacity: 0.9;
  transform: scale(1.08);
}

/* ===============================
   MOBILE TUNING
   =============================== */
@media (max-width: 768px){
  .site-header{
    height: 70px;
  }

  .page{
    top: 70px;
    bottom: 70px;
  }
  .site-footer{
    height: 100px;
  }

  .page-title{
    font-size: 20px;
  }

  .cta-btn{
    font-size: 18px;
  }
}

/* ================= STAGE 1 ================= */

/* Overlay */
.stage1-overlay{
  position: fixed;
  inset: auto 0 0 0;
  top: 80px;
  background: rgba(0,0,0,.55);
  z-index: 10020;
  display: flex;
  justify-content: center;
}

/* Box */
.stage1-box{
  width: 100%;
  max-width: 500px;
  height: calc(100vh - 80px);
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== HEADER ===== */
.stage1-head{
  position: sticky;
  top: 0px;
  z-index: 3;
  background: #fff;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: center;
}

.stage1-title{
  flex: 1;
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: #b52b2b;
}

.stage1-close{
  background: transparent;
  border: none;
  font-size: 26px;
  color: #999;
  cursor: pointer;
}

/* ===== BODY ===== */
.stage1-body{
  flex: 1;
  padding: 12px 16px ;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


.stage1-desc,
.stage1-note{
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 8px;
}

/* ===== NAME INPUT ===== */
.stage1-name-input-box{
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.stage1-names-input{
  flex: 1;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #b52b2b;
  padding: 0 12px;
  font-family: Cairo, sans-serif;
}

.stage1-add-name-btn{
  min-width: 90px;
  border-radius: 8px;
  border: none;
  background:linear-gradient(135deg,#e53935,#b71c1c);
  box-shadow:0 5px 5px rgba(0,0,0,.35);
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* ===== DESIGN MODES ===== */
.stage1-design-modes{
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
}

.stage1-mode-btn{
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 0px;
  border: 1px solid rgba(0,0,0,.15);
  cursor: pointer;
}

.stage1-mode-btn:hover{
  background: #f2f2f2;
}

/* ===== BLOCKS ===== */
.stage1-design-blocks{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.stage1-design-block{
  position: relative;
  width: 100%;
  background: #fff;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
}

.stage1-block-name{
  width: 100%;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}



.stage1-pick-design{
  width: 100%;
  border: 2px dashed #cfcfcf;
  border-radius: 10px;
  color: #b52b2b;
  font-family: Cairo, sans-serif;
  font-size: 16px;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  cursor: pointer;
  text-align: center;
  margin: 0px;
  margin-top: 5px;
}

.stage1-block-del{
  position: absolute;
  top: 3px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #b52b2b;
  font-size: 26px;
  font-weight: 700;
  line-height: 26px;
  cursor: pointer;
  align-items: center;

}


.stage1-pick-design:hover{
  background: #f5f5f5;
}

/* ===== PICK BTN: WHEN HAS PREVIEW (MAKE STAGE 1 LOOK LIKE STAGE 3.1) ===== */
.stage1-pick-design.has-preview{
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: #fffffff;
}

/* لما يبقى Preview، ممنوع hover يغير الخلفية */
.stage1-pick-design.has-preview:hover{
  background: #fff;
}

/* ===== FOOTER ===== */
.stage1-footer{
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;

  background: #fff;
  border-top: 3px solid rgba(0,0,0,0.08);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 10px 12px calc(70px + env(safe-area-inset-bottom));
  z-index: 1000;
}


.stage1-stats{
  display: flex;
  gap: 12px;
  font-size: 13px;
}

.stage1-cta-btn{
  width:50%;
  height:48px;
  border-radius:8px;
  font-size:19px;
  font-weight:900;
  color: #fff;
  background:linear-gradient(135deg,#e53935,#b71c1c);
  box-shadow:0 5px 5px rgba(0,0,0,.35);
  letter-spacing:.7px;
  transition:.15s ease;
}

.stage1-cta-btn:disabled{
  opacity: .35;
  cursor: not-allowed;
}

.stage1-cta-note{
  font-size: 12px;
  color: #777;
  text-align: center;
}

/* === FORCE HTML [hidden] TO WORK (CRITICAL) === */
[hidden]{
  display: none !important;
}

/* overlay basic behavior */
.popup-overlay:not(.stage1-overlay):not(.stage31-overlay):not(.stage4-overlay):not(.stage5-overlay){
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: 2000;
}


/* ===== OVERRIDE popup-overlay for Stage 3.1 / 4 / 5 (UNDER HEADER) ===== */
.popup-overlay.stage31-overlay,
.popup-overlay.stage4-overlay,
.popup-overlay.stage5-overlay{
  position: fixed;
  inset: auto 0 0 0;
  top: 80px;
  display: flex;
  justify-content: center;
  align-items: stretch; /* مهم: يمنع الcentering العمودي */
  background: rgba(0,0,0,.55);
  z-index: 10020;
}
@media (max-width:768px){
  .popup-overlay.stage31-overlay,
  .popup-overlay.stage4-overlay,
  .popup-overlay.stage5-overlay{
    top: 70px;
  }
}

/* ===== MOBILE ===== */
@media (max-width:768px){
  .stage1-overlay{ top:70px; }
  .stage1-box{ height: calc(100vh - 70px); }
  .stage1-design-blocks{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================= STAGE 3.1 ================= */

/* Overlay */
.stage31-overlay{
  position: fixed;
  inset: auto 0 0 0;
  top: 80px;
  background: rgba(0,0,0,.55);
  z-index: 10020;
  display: flex;
  justify-content: center;
}

/* Box */
.stage31-box{
  width: 100%;
  max-width: 500px;
  height: calc(100vh - 80px);
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== HEADER ===== */
.stage31-head{
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: center;
}

.stage31-title{
  flex: 1;
  margin: 0;
  font-size: 18px;
  text-align: center;
  font-weight: 700;
  color: #b52b2b;
}

.stage31-close{
  background: transparent;
  border: none;
  font-size: 26px;
  color: #999;
  cursor: pointer;
}

/* ===== BODY ===== */
.stage31-body{
  flex: 1;
  padding: 12px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== FORM ===== */
.stage31-form-row{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.stage31-label{
  min-width: 80px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}
.stage31-input{
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  padding: 0 10px;
  font-size: 14px;
  outline: none;
  flex: 1;
}
.stage31-input:focus{
  border-color: rgba(181,43,43,.45);
}

.stage31-applyall{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin: 10px 0;
}

/* ===== GRID ===== */
.stage31-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* ===== DESIGN ITEM ===== */
.stage31-item{
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #ffffff;
}

.stage31-item.active{
  outline: 3px solid #b52b2b;
  outline-offset: -3px;
}

/* 20% فوق: اسم + إضافة */
.stage31-meta{
  padding: 6px 6px 6px;
  min-height: 52px;                 /* مساحة ثابتة تقريبًا */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: #ffffff;
}

.stage31-meta-name{
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage31-meta-addon{
  text-align: center;
  font-size: 9px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .95;
}

/* 80%: التصميم نفسه بنسبة 7×10 */
.stage31-thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 7 / 10;
  background: #ffffff;
  overflow: hidden;
}


.stage31-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}


.stage31-name,
.stage31-addon{
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 0px 0px rgba(0,0,0,0);
  padding: 3px 5px;
  z-index:2; 
  white-space: nowrap;
  overflow: visible;      /* مهم */
  text-overflow: clip;    /* مهم */
  line-height: 1.05;
}


.stage31-name{
  bottom: 13px;
}


.stage31-addon{
  bottom: 0px;

}



/* ===== FOOTER ===== */
.stage31-foot{
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;

  background: #fff;
  border-top: 3px solid rgba(0,0,0,0.08);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 10px 12px calc(70px + env(safe-area-inset-bottom));
  z-index: 1000;
}

.stage31-save{
  width:50%;
  height:48px;
  border-radius:8px;
  font-size:19px;
  font-weight:900;
  color: #fff;
  background:linear-gradient(135deg,#e53935,#b71c1c);
  box-shadow:0 5px 5px rgba(0,0,0,.35);
  letter-spacing:.7px;
  transition:.15s ease;
}

.stage31-save:disabled{
  opacity: .35;
  cursor: not-allowed;
}

/* ===== MOBILE ===== */
@media (max-width:768px){
  .stage31-overlay{ top:70px; }
  .stage31-box{ height: calc(100vh - 70px); }
  .stage31-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== HIDDEN FIX ===== */
#stage31Overlay[hidden]{
  display: none !important;
}




/* ================= STAGE 4 ================= */
/* Overlay تحت الهيدر العام */
.stage4-overlay{
  position: fixed;
  inset: auto 0 0 0;
  top: 80px;
  background: rgba(0,0,0,.55);
  z-index: 10100;
  display: flex;
  justify-content: center;
}

/* الصندوق */
.stage4-box{
  width: 100%;
  max-width: 500px;
  height: calc(100vh - 80px);
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== HEADER ثابت ===== */
.stage4-head{
  position: sticky;
  top: 0px;
  z-index: 3;
  background: #fff;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: center;
}

/* العنوان في النص */
.popup-title-stage4-title{
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #b52b2b;
}


/* زر الإغلاق ثابت في الركن */
.stage4-close{
  background: transparent;
  border: none;
  font-size: 26px;
  color: #999;
  cursor: pointer;
}

.stage4-close:hover{ color:#666; }

/* ===== BODY سكرول ===== */
.stage4-body{
  flex: 1;
  padding: 12px 16px ;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}



/* ===== FOOTER ثابت ===== */

.stage4-foot{
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;

  background: #fff;
  border-top: 3px solid rgba(0,0,0,0.08);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 10px 12px calc(70px + env(safe-area-inset-bottom));
  z-index: 1000;
}

/* زر التأكيد */
.stage4-confirm{
  width:50%;
  height:48px;
  border-radius:8px;
  font-size:19px;
  font-weight:900;
  color: #fff;
  background:linear-gradient(135deg,#e53935,#b71c1c);
  box-shadow:0 5px 5px rgba(0,0,0,.35);
  letter-spacing:.7px;
  transition:.15s ease;
}

.stage4-confirm:disabled{
  opacity: .35;
  cursor: not-allowed;
}

/* ===== MOBILE TOP OFFSET ===== */
@media (max-width:768px){
  .stage4-overlay{ top: 70px; }
  .stage4-box{ height: calc(100vh - 70px); }

}

/* عنوان القسم */
#stage4ShippingTitle{
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 14px;
  color: #b52b2b; 
}

/* الفورم العام */
.stage4-form{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* كل سطر (عنوان + إدخال) */
.stage4-row{
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 0px;
}

/* العناوين */
.stage4-label{
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

/* الخانات */
.stage4-input{
  height: 42px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  outline: none;
}

.stage4-input:focus{
  border-color: #b52b2b;
}

/* textarea */
.stage4-textarea{
  height: 80px;
  padding: 8px 12px;
  resize: none;
}

/* checkbox */
.stage4-checkrow{
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
}

.stage4-checkrow input{
  width: 16px;
  height: 16px;
}

/* ===== منطقة الشحن ===== */
.stage4-gov-combo{
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 10px;
  position: relative;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.stage4-gov-combo::before{
  content: "منطقة الشحن";
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

/* خانة البحث */
#stage4GovInput{
  height: 42px;
  padding: 0 36px 0 12px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* سهم القائمة */
.stage4-gov-arrow{
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  pointer-events: auto;
}

/* القائمة المنسدلة */
.stage4-gov-list{
  position: absolute;
  top: 100%;
  inset-inline-start: 130px;
  inset-inline-end: 0;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ccc;
  z-index: 20;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* عنصر */
.stage4-gov-item{
  padding: 8px 10px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage4-gov-item:hover{
  background: #f5f5f5;
}

.stage4-back-btn{
  position: sticky;
  top: 0;
  z-index: 5;

  width: 100%;
  padding: 12px;
  margin-bottom: 12px;

  background: #b52b2b;
  border: 0px solid #ddd;
  border-radius: 6px;

  font-size: 18px;
  color: #ffffff;
  text-align: center;
}


/* ===== سعر الشحن + المدة ===== */
.stage4-shipmeta-inline{
  display: none;
  font-size: 12px;
  color: #777;
  gap: 6px;

  justify-content: center;   /* في النص أفقي */
  margin-top: 6px;

  width: 100%;
  text-align: center;
}

.stage4-shipmeta-inline.show{
  display: flex;
}

.ship-sep{
  margin: 0 4px;
}

.stage4-field{
  display: flex;
  flex-direction: column;
}

.stage4-gov-wrap{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* صندوق الفاتورة */
.box-invoice{
  width: 90%;
  margin: 10px auto;   /* 👈 دي اللي بتوسّط */
  border: 1px solid #c33;
  padding: 10px 12px;
  margin-top: 10px;
  background: #fff;
  font-size: 14px;

}

/* كل سطر */
.inv-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

/* النص */
.inv-row span{
  color: #111;
}

/* القيمة */
.inv-row b{
  font-weight: 700;
}

/* الإجمالي */
.inv-row.total{
  border-top: 1px solid #c33;
  margin-top: 6px;
  padding-top: 6px;
  font-weight: 900;
}

/* عنوان تفاصيل الفاتورة */
#stage4InvoiceTitle{
  text-align: center;
  color: #b52b2b;        /* لون البراند */
  font-weight: 900;
  font-size: 16px;
  margin: 14px 0 8px;
}

/* ===== Error Message (Stage 4) - FULL WIDTH ===== */

.stage4-row .field-error,
.stage4-gov-wrap .field-error{
  grid-column: 1 / -1;
}

/* الشكل */
.field-error{
  display: none;

  margin: 0px 0px 0px 0px;
  padding: 0px 0px;

  font-size: 12px;
  font-weight: 700;
  color: red;

  background: #fff;
  border: 0px solid #f5b5b5;
  border-radius: 0px;

  width: 100%;          /* 👈 الشريط بطول السطر */
  max-width: 100%;

  text-align: center;
}

/* إظهار الرسالة */
.field-error.show{
  display: block;
}

/* الصف */
.stage4-row{
  position: relative;
}

/* ===== GLOBAL LOADER ===== */
body.loading::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.85);
  z-index: 20000;
}

body.loading::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px;
  border-radius: 50%;
  border: 4px solid #ddd;
  border-top-color: #b52b2b;
  animation: spin 0.9s linear infinite;
  z-index: 20001;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* موبايل */
@media (max-width:480px){
  .field-error{
    font-size: 11px;
    padding: 6px;
  }
}

/* =========================
   STAGE 5 : ORDER CONFIRM
   ========================= */

/* ===== Overlay ===== */
.stage5-overlay {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.55);
  z-index: 10100;
  display: flex;
  justify-content: center;
}

/* ===== Box ===== */
.stage5-box {
  width: 100%;
  max-width: 500px;
  height: calc(100vh - 80px);
  max-height: 700px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== Header ===== */
.stage5-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage5-close {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 26px;
  color: #999;
  cursor: pointer;
}

.stage5-close:hover {
  color: #666;
}

.stage5-title {
  margin: 0;
  font-weight: 700;
  color: #b52b2b;
  text-align: center;
}

/* ===== Body ===== */
.stage5-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 16px;
  -webkit-overflow-scrolling: touch;
}

/* Subtitle */
.stage5-subtitle {
  text-align: center;
  color: #444;
  font-size: 16px;
  margin-bottom: 6px;
}

.stage5-subtitle-lable{
  text-align: center;
  color: #b52b2b;
  font-size: 16px;
  margin-bottom: 0px;
}

/* Invoice Code */
.stage5-invoice-code {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
  margin-top: 0px;
}

/* Sections */
.stage5-section {
  margin-bottom: 6px;
}

.stage5-section h3 {
  text-align: center;
  color: #b52b2b;
  font-size: 16px;
  margin-bottom: 3px;
}

/* Data blocks */
.stage5-shipping-data,
.stage5-designs-data,
.stage5-invoice-data {
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: #111;
}

/* Deposit  */
.stage5-deposit {
  text-align: center;
  font-size: 13px;
  color: #666;
  margin: 0px 0;
}

/*  Note */
.stage5-note {
  text-align: center;
  font-size: 13px;
  color: #666;
  margin: 6px 0;
}

/* Payment */
.stage5-payment {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-bottom: 14px;
}

.stage5-payment span {
  font-weight: 700;
  font-size: 20px;
  color: #111;
}

.stage5-payment button {
  width:30%;
  height:38px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  color: #000000;
  background:linear-gradient(135deg,#e0dfdf,#f5f3f3);
  box-shadow:0 5px 5px rgba(0,0,0,.35);
  letter-spacing:.7px;
  transition:.15s ease;
}

/* Actions */
.stage5-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 14px;
}

.stage5-actions button {
  width:40%;
  height:42px;
  border-radius:8px;
  font-size:16px;
  font-weight:900;
  color: #fff;
  background:linear-gradient(135deg,#e53935,#b71c1c);
  box-shadow:0 5px 5px rgba(0,0,0,.35);
  letter-spacing:.7px;
  transition:.15s ease;
}

/* Footer Note */
.stage5-footer {
  text-align: center;
  font-size: 12px;
  color: #777;
  margin-top: 6px;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {

  .stage5-overlay {
    top: 70px;
  }

  .stage5-box {
    max-width: 100%;
    height: calc(100vh - 70px);
  }

  .stage5-title {
    font-size: 18px;
  }

  .stage5-subtitle {
    font-size: 16px;
  }

  .stage5-invoice-code {
    font-size: 17px;
  }

  .stage5-actions button {
    min-width: 140px;
  }
}

.stage5-share{
  width:60%;
  height:44px;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  color: #fff;
  background:linear-gradient(135deg,#5072e4,#1041df);
  box-shadow:0 5px 5px rgba(0,0,0,.35);
  letter-spacing:.7px;
  transition:.15s ease;
}


.stage5-share:hover{
  opacity: .92;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

.stage5-share:active{
  transform: scale(.97);
}




/* Stage1 pick explicit empty state (keep dashed box) */
.stage1-pick-design.is-empty{border:2px dashed #b52b2b;}




/* === FORCE HIDE DESIGN SECTION UNTIL NAMES === */
[data-role="design-filter"]{ display:none; }
[data-role="design-placeholder"]{
  margin:14px 0;
  padding:12px;
  text-align:center;
  font-size:14px;
  color:#777;
  background:#f6f6f6;
  border-radius:10px;
}


/* ===============================
   STAGE 1 DESIGN GATE (ROOT FIX)
   - Hide design filter until at least one name block exists
=============================== */

/* Default: hide design UI */
.stage1-box:not(.stage1-has-names) #stage1DesignTitle,
.stage1-box:not(.stage1-has-names) #stage1DesignDesc,
.stage1-box:not(.stage1-has-names) #stage1DesignModes,
.stage1-box:not(.stage1-has-names) #stage1DesignModeDesc{
  display:none !important;
}

/* Placeholder default visible */
#stage1DesignPlaceholder{
  margin:14px 0;
  padding:12px;
  text-align:center;
  font-size:14px;
  color:#777;
  background:#f6f6f6;
  border-radius:10px;
  border:1px dashed rgba(0,0,0,.18);
}

/* When has names: show UI + hide placeholder */
.stage1-box.stage1-has-names #stage1DesignTitle,
.stage1-box.stage1-has-names #stage1DesignDesc,
.stage1-box.stage1-has-names #stage1DesignModes,
.stage1-box.stage1-has-names #stage1DesignModeDesc{
  display:block !important;
}

.stage1-box.stage1-has-names #stage1DesignModes{
  display:flex !important;
}

.stage1-box.stage1-has-names #stage1DesignPlaceholder{
  display:none !important;
}

/* Improve modes readability + active state */
#stage1DesignTitle{
  margin:0 0 6px;
  font-size:15px;
  font-weight:800;
  color:#111;
}

#stage1DesignDesc{
  margin:0 0 10px;
  font-size:13px;
  color:#444;
  line-height:1.4;
}

#stage1DesignModes{
  gap:6px;
  flex-wrap:wrap;
}

#stage1DesignModes .stage1-mode-btn{
  padding:8px 12px;
  border-radius:8px;
  font-size:12px;
  font-family: "Cairo", sans-serif;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
}

#stage1DesignModes .stage1-mode-btn.active{
  background:linear-gradient(135deg,#e53935,#b71c1c);
  color:#fff;
  border-color:#b52b2b;
  box-shadow:0 5px 5px rgba(0,0,0,.35);
}