/* =============================================================================
   Ordering Redesign — Result screens (Batch 5)
   -----------------------------------------------------------------------------
   Scoped under .gz-order; reuses the Batch-1 tokens/components (--gzo-*,
   .gzo-spinner). Covers the three SPA result views: the Bestellpass ticket
   (Lieferschein/Abholpass), the online payment result (pending/success/
   cancelled/failed/timeout), and the confirm-order surface (form/success/
   already/error). Mobile-first, light-only, RTL via logical properties (Cairo
   forced for Arabic), Latin digits, >=44px touch targets. No hard-coded left/
   right. Order numbers render in Space Mono, forced dir=ltr in markup.
   ========================================================================== */

.gz-order .gzo-res {
  animation: gzo-rise var(--gzo-ease-rise);
  padding: 20px 16px 28px;
  max-width: 640px;
  margin-inline: auto;
}

/* ------- BESTELLPASS ------------------------------------------------------- */
.gz-order .gzo-res--pass { background: var(--gzo-paper-alt); min-height: 100%; }

.gz-order .gzo-res-pass__header { text-align: center; margin: 4px 0 16px; }
.gz-order .gzo-res-pass__badge {
  width: 58px; height: 58px; border-radius: 16px; background: var(--gzo-card);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -10px rgba(34, 31, 27, .35); color: var(--gzo-primary);
}
.gz-order .gzo-res-pass__badge svg { width: 28px; height: 28px; }
.gz-order .gzo-res-pass__title { font-family: var(--gzo-font-display); font-weight: 700; font-size: 21px; margin-top: 11px; letter-spacing: -.01em; }
.gz-order .gzo-res-pass__sub { font-size: 12.5px; color: var(--gzo-text-2); margin-top: 3px; }

.gz-order .gzo-res-ticket {
  background: var(--gzo-card); border-radius: 18px; overflow: hidden;
  box-shadow: 0 14px 34px -16px rgba(34, 31, 27, .3);
}
.gz-order .gzo-res-ticket__head {
  padding: 16px 18px; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
}
.gz-order .gzo-res-ticket__ey {
  font-size: 10px; color: var(--gzo-muted); letter-spacing: .09em; text-transform: uppercase;
}
.gz-order .gzo-res-ticket__no {
  font-family: var(--gzo-font-mono); font-weight: 700; font-size: 23px; margin-top: 3px;
}

.gz-order .gzo-res-pill {
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--gzo-r-pill);
  padding: 6px 11px; font-family: var(--gzo-font-body); font-weight: 700; font-size: 11.5px;
  white-space: nowrap; flex: none;
}
.gz-order .gzo-res-pill__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.gz-order .gzo-res-pill--warn { background: var(--gzo-warning-bg); color: var(--gzo-warning); }
.gz-order .gzo-res-pill--warn .gzo-res-pill__dot { background: var(--gzo-warning-dot); }
.gz-order .gzo-res-pill--ok { background: var(--gzo-success-bg); color: var(--gzo-success); }
.gz-order .gzo-res-pill--ok .gzo-res-pill__dot { background: var(--gzo-success); }
.gz-order .gzo-res-pill--error { background: var(--gzo-error-bg); color: var(--gzo-error); }
.gz-order .gzo-res-pill--error .gzo-res-pill__dot { background: var(--gzo-error); }

.gz-order .gzo-res-ticket__status {
  margin: 0 18px 14px; padding: 11px 13px; border-radius: 11px;
  font-weight: 500; font-size: 12px; line-height: 1.45;
}
.gz-order .gzo-res-ticket__status--warn { background: var(--gzo-warning-bg); color: var(--gzo-warning); }
.gz-order .gzo-res-ticket__status--ok { background: var(--gzo-success-bg); color: var(--gzo-success); }
.gz-order .gzo-res-ticket__status--error { background: var(--gzo-error-bg); color: var(--gzo-error); }

/* perforation: dashed edge + two notch circles filled with the page bg */
.gz-order .gzo-res-ticket__perf { position: relative; border-top: 1.5px dashed #E2DACC; }
.gz-order .gzo-res-ticket__notch {
  position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--gzo-paper-alt);
}
.gz-order .gzo-res-ticket__notch--start { inset-inline-start: -8px; }
.gz-order .gzo-res-ticket__notch--end { inset-inline-end: -8px; }

.gz-order .gzo-res-ticket__body { padding: 15px 18px; }

.gz-order .gzo-res-det__row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.gz-order .gzo-res-det__k { color: var(--gzo-muted); font-weight: 500; font-size: 12.5px; flex: none; }
.gz-order .gzo-res-det__v { font-weight: 600; font-size: 12.5px; text-align: end; }

.gz-order .gzo-res-hr { height: 1px; background: #F0EADE; margin: 9px 0; }

.gz-order .gzo-res-line { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.gz-order .gzo-res-line__name { font-weight: 500; font-size: 12.5px; color: var(--gzo-text); }
.gz-order .gzo-res-line__val { font-weight: 600; font-size: 12.5px; white-space: nowrap; }

.gz-order .gzo-res-tot__row { display: flex; justify-content: space-between; padding: 3px 0; }
.gz-order .gzo-res-tot__label { font-weight: 500; font-size: 12px; color: var(--gzo-text-2); }
.gz-order .gzo-res-tot__val { font-weight: 600; font-size: 12.5px; color: var(--gzo-text); }
.gz-order .gzo-res-tot__val.is-good { color: var(--gzo-success); }
.gz-order .gzo-res-tot__grand {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 9px; padding-top: 10px; border-top: 1px solid #F0EADE;
}
.gz-order .gzo-res-tot__grand-l { font-family: var(--gzo-font-display); font-weight: 700; font-size: 14px; }
.gz-order .gzo-res-tot__grand-v { font-weight: 700; font-size: 16px; }
.gz-order .gzo-res-tot__tax { font-size: 11px; color: var(--gzo-muted); margin-top: 6px; }

.gz-order .gzo-res-pass__actions { display: flex; gap: 8px; margin-top: 14px; }
.gz-order .gzo-res-actbtn {
  flex: 1; min-height: 44px; border: 1.5px solid var(--gzo-border-2); background: var(--gzo-card);
  border-radius: 12px; font-weight: 600; font-size: 12.5px; color: var(--gzo-text);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.gz-order .gzo-res-actbtn:hover { background: #FBF8F2; }
.gz-order .gzo-res-actbtn__ic { width: 15px; height: 15px; flex: none; }

.gz-order .gzo-res-cancel {
  margin-top: 9px; width: 100%; min-height: 46px; border: 1.5px solid #F2D9D3;
  background: var(--gzo-card); color: var(--gzo-error); border-radius: 12px;
  font-weight: 700; font-size: 13px; cursor: pointer;
}
.gz-order .gzo-res-again {
  margin-top: 9px; width: 100%; min-height: 44px; border: none; background: transparent;
  color: var(--gzo-text-2); font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.gz-order .gzo-res-pass__foot {
  font-size: 11px; line-height: 1.55; color: var(--gzo-muted); text-align: center;
  margin-top: 15px; padding: 0 8px;
}

/* ------- PAYMENT RESULT ---------------------------------------------------- */
.gz-order .gzo-res--pay { min-height: 100%; }
.gz-order .gzo-res-pay {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 30px; min-height: 60vh;
}
.gz-order .gzo-res-pay__spinner {
  width: 48px; height: 48px; border: 3px solid #EAE0D0; border-top-color: var(--gzo-primary);
  border-radius: 50%; animation: gzo-res-spin .8s linear infinite; margin-bottom: 20px;
}
@keyframes gzo-res-spin { to { transform: rotate(360deg); } }
.gz-order .gzo-res-pay__ic {
  width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin-bottom: 18px;
}
.gz-order .gzo-res-pay__ic svg { width: 30px; height: 30px; }
.gz-order .gzo-res-pay__ic--ok { background: var(--gzo-success-bg); color: var(--gzo-success); }
.gz-order .gzo-res-pay__ic--ok svg { width: 32px; height: 32px; }
.gz-order .gzo-res-pay__ic--warn { background: var(--gzo-warning-bg); color: var(--gzo-warning); }
.gz-order .gzo-res-pay__ic--error { background: var(--gzo-error-bg); color: var(--gzo-error); }
.gz-order .gzo-res-pay__ic--clock { background: var(--gzo-titlebar); color: var(--gzo-text-2); }
.gz-order .gzo-res-pay__title { font-family: var(--gzo-font-display); font-weight: 700; font-size: 20px; }
.gz-order .gzo-res--pay .gzo-res-pay__ic--ok + .gzo-res-pay__title { font-size: 21px; }
.gz-order .gzo-res-pay__body {
  font-size: 13px; line-height: 1.55; color: var(--gzo-text-2); margin-top: 7px; max-width: 280px;
}
.gz-order .gzo-res-pay__id { font-weight: 700; color: var(--gzo-ink); }
.gz-order .gzo-res-pay__cta {
  display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 300px; margin-top: 22px;
}

.gz-order .gzo-res-btn {
  min-height: 48px; border-radius: var(--gzo-r-btn); font-weight: 700; font-size: 14.5px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
}
.gz-order .gzo-res-btn--primary { border: none; background: var(--gzo-primary); color: #fff; box-shadow: var(--gzo-sh-cta); }
.gz-order .gzo-res-btn--primary:hover { background: var(--gzo-primary-dark); }
.gz-order .gzo-res-btn--ghost { border: 1.5px solid var(--gzo-border-2); background: var(--gzo-card); color: var(--gzo-ink); }
.gz-order .gzo-res-btn--wide { width: 100%; max-width: 300px; margin-top: 20px; }
.gz-order .gzo-res-btn__ic { width: 16px; height: 16px; flex: none; }

/* ------- CONFIRM ORDER ----------------------------------------------------- */
.gz-order .gzo-res--confirm { min-height: 100%; }
.gz-order .gzo-res-confirm__head { text-align: center; margin: 8px 0 18px; }
.gz-order .gzo-res-confirm__badge {
  width: 54px; height: 54px; border-radius: 15px; background: #FBEAE3; color: var(--gzo-primary);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 11px;
}
.gz-order .gzo-res-confirm__badge svg { width: 26px; height: 26px; }
.gz-order .gzo-res-confirm__title { font-family: var(--gzo-font-display); font-weight: 700; font-size: 21px; }
.gz-order .gzo-res-confirm__lead {
  font-size: 13px; line-height: 1.5; color: var(--gzo-text-2); margin-top: 5px;
  max-width: 320px; margin-inline: auto;
}
.gz-order .gzo-res-confirm__id { font-weight: 700; color: var(--gzo-ink); }
.gz-order .gzo-res-confirm__card {
  background: var(--gzo-card); border: 1px solid var(--gzo-border); border-radius: var(--gzo-r-card); padding: 16px;
}
.gz-order .gzo-res-confirm__total { display: flex; justify-content: space-between; align-items: baseline; }
.gz-order .gzo-res-confirm__total-l { font-weight: 600; font-size: 13.5px; color: var(--gzo-text); }
.gz-order .gzo-res-confirm__total-v { font-weight: 700; font-size: 18px; }
.gz-order .gzo-res-confirm__note { font-size: 11.5px; line-height: 1.5; color: var(--gzo-muted); margin-top: 6px; }
.gz-order .gzo-res-confirm__cta {
  margin-top: 16px; width: 100%; min-height: 50px; border: none; border-radius: var(--gzo-r-btn);
  background: #1FA855; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
  box-shadow: 0 6px 16px -7px rgba(31, 168, 85, .7);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.gz-order .gzo-res-confirm__cta.is-busy { background: #7CBF9B; cursor: default; box-shadow: none; }

.gz-order .gzo-res-confirm__result {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 30px 14px;
}
.gz-order .gzo-res-confirm__ic {
  width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin-bottom: 18px;
}
.gz-order .gzo-res-confirm__ic svg { width: 30px; height: 30px; }
.gz-order .gzo-res-confirm__ic--ok { background: var(--gzo-success-bg); color: var(--gzo-success); }
.gz-order .gzo-res-confirm__ic--ok svg { width: 32px; height: 32px; }
.gz-order .gzo-res-confirm__ic--info { background: var(--gzo-info-bg); color: var(--gzo-info); }
.gz-order .gzo-res-confirm__ic--error { background: var(--gzo-error-bg); color: var(--gzo-error); }
.gz-order .gzo-res-confirm__rtitle { font-family: var(--gzo-font-display); font-weight: 700; font-size: 20px; }
.gz-order .gzo-res-confirm__rbody { font-size: 13px; line-height: 1.55; color: var(--gzo-text-2); margin-top: 7px; max-width: 280px; }

/* ------- desktop refinements ---------------------------------------------- */
@media (min-width: 720px) {
  .gz-order .gzo-res { padding: 32px 24px 40px; max-width: 560px; }
  .gz-order .gzo-res-pass__title { font-size: 22px; }
}

/* WhatsApp FAB is a menu-surface affordance only — hide it on the result screens
   (redesign_app.js sets data-order-view on <html>, mirroring the cart/checkout rules). */
html[data-order-view="pass"] .js-whatsapp-fab,
html[data-order-view="payment"] .js-whatsapp-fab,
html[data-order-view="confirm"] .js-whatsapp-fab { display: none !important; }

/* ------- print (isolate the Bestellpass ticket) --------------------------- */
@media print {
  .gzo-header, .gzo-bottomnav, .js-whatsapp-fab, #gzo-toasts,
  .gz-order .gzo-res-pass__header, .gz-order .gzo-res-pass__actions,
  .gz-order .gzo-res-cancel, .gz-order .gzo-res-again, .gz-order .gzo-res-pass__foot {
    display: none !important;
  }
  .gz-order .gzo-res--pass { background: #fff; }
  .gz-order .gzo-res-ticket { box-shadow: none; border: 1px solid var(--gzo-border); }
  .gz-order .gzo-res-ticket__notch { background: #fff; }
}