/* ============================================================================= Ordering Redesign — History + Order detail + System states (Batch 6) ----------------------------------------------------------------------------- Scoped under .gz-order; reuses the Batch-1 tokens (--gzo-*). Covers the SPA order-history list, the single-order detail (live tracking timeline + ETA + cancel window + reorder + optional consent-gated map), and the four standalone system-state screens (cart-changed / maintenance / rate-limit / subscription- lock). 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 forced dir=ltr in markup. ========================================================================== */ /* The WhatsApp FAB is menu-only chrome (same rule the cart/checkout/result CSS applies): hide it on every Batch-6 surface. redesign_app.js sets data-order-view on each render, so this toggles as the SPA navigates. */ html[data-order-view="history"] .js-whatsapp-fab, html[data-order-view="orderDetail"] .js-whatsapp-fab, html[data-order-view="cartChanged"] .js-whatsapp-fab, html[data-order-view="maintenance"] .js-whatsapp-fab, html[data-order-view="rateLimit"] .js-whatsapp-fab, html[data-order-view="subLock"] .js-whatsapp-fab { display: none !important; } .gz-order .gzo-hist, .gz-order .gzo-od { animation: gzo-rise var(--gzo-ease-rise); max-width: 640px; margin-inline: auto; padding: 4px 16px 30px; } /* ------- shared status pill ----------------------------------------------- */ .gz-order .gzo-hist-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; border-radius: var(--gzo-r-pill); padding: 5px 10px; font-family: var(--gzo-font-body); font-weight: 700; font-size: 11px; white-space: nowrap; } .gz-order .gzo-hist-pill__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; } .gz-order .gzo-hist-pill--warn { background: var(--gzo-warning-bg); color: var(--gzo-warning); } .gz-order .gzo-hist-pill--warn .gzo-hist-pill__dot { background: var(--gzo-warning-dot); } .gz-order .gzo-hist-pill--info { background: var(--gzo-info-bg); color: var(--gzo-info); } .gz-order .gzo-hist-pill--info .gzo-hist-pill__dot { background: var(--gzo-info); } .gz-order .gzo-hist-pill--ok { background: var(--gzo-success-bg); color: var(--gzo-success); } .gz-order .gzo-hist-pill--ok .gzo-hist-pill__dot { background: var(--gzo-success); } .gz-order .gzo-hist-pill--error { background: var(--gzo-error-bg); color: var(--gzo-error); } .gz-order .gzo-hist-pill--error .gzo-hist-pill__dot { background: var(--gzo-error); } /* ------- history list ----------------------------------------------------- */ .gz-order .gzo-hist__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 2px 8px; } .gz-order .gzo-hist__title { font-family: var(--gzo-font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; } .gz-order .gzo-hist__sub { font-size: 13px; color: var(--gzo-text-2); margin-top: 4px; } .gz-order .gzo-hist__clear { flex: none; margin-top: 3px; min-height: 32px; padding: 0 11px; border: 1px solid var(--gzo-border); background: var(--gzo-card); border-radius: 9px; font-family: var(--gzo-font-body); font-weight: 600; font-size: 11.5px; color: var(--gzo-muted); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: var(--gzo-tap); } .gz-order .gzo-hist__clear:active { transform: scale(.97); } /* Batch 9 (C17): the standalone below-the-list variant is desktop-only */ .gz-order .gzo-hist__clear--below { display: none; } .gz-order .gzo-hist-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px 60px; } .gz-order .gzo-hist-empty__ic { width: 78px; height: 78px; border-radius: 22px; background: var(--gzo-paper-alt); display: flex; align-items: center; justify-content: center; color: var(--gzo-muted-2, var(--gzo-muted)); margin-bottom: 16px; } .gz-order .gzo-hist-empty__ic svg { width: 34px; height: 34px; } .gz-order .gzo-hist-empty__t1 { font-family: var(--gzo-font-display); font-weight: 700; font-size: 19px; } .gz-order .gzo-hist-empty__t2 { font-size: 13.5px; line-height: 1.5; color: var(--gzo-text-2); margin: 7px 0 20px; max-width: 280px; } .gz-order .gzo-hist-empty__cta { min-height: 48px; padding: 0 22px; border: none; border-radius: 13px; background: var(--gzo-primary); color: #fff; font-family: var(--gzo-font-body); font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: var(--gzo-sh-cta); -webkit-tap-highlight-color: var(--gzo-tap); } .gz-order .gzo-hist-empty__cta:active { transform: scale(.98); } .gz-order .gzo-hist-list { display: flex; flex-direction: column; gap: 11px; padding: 8px 0 6px; } .gz-order .gzo-hist-card { display: block; width: 100%; text-align: start; cursor: pointer; background: var(--gzo-card); border: 1px solid var(--gzo-border); border-radius: 16px; padding: 14px; box-shadow: 0 1px 2px rgba(34, 31, 27, .03); -webkit-tap-highlight-color: var(--gzo-tap); } .gz-order .gzo-hist-card:active { transform: scale(.995); } .gz-order .gzo-hist-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gz-order .gzo-hist-card__id { font-family: var(--gzo-font-body); font-weight: 700; font-size: 15px; } .gz-order .gzo-hist-card__meta { font-size: 12px; color: var(--gzo-muted); margin-top: 3px; } .gz-order .gzo-hist-card__items { font-size: 12.5px; line-height: 1.4; color: var(--gzo-text-2); margin-top: 7px; } .gz-order .gzo-hist-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gzo-border); } .gz-order .gzo-hist-card__total { font-family: var(--gzo-font-body); font-weight: 600; font-size: 13px; } .gz-order .gzo-hist-card__more { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 12px; color: var(--gzo-primary); } .gz-order .gzo-hist-card__chev { width: 14px; height: 14px; } .gz-order [dir="rtl"] .gzo-hist-card__chev { transform: scaleX(-1); } /* ------- order detail ----------------------------------------------------- */ .gz-order .gzo-od { padding-top: 16px; } .gz-order .gzo-od__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gz-order .gzo-od__id { font-family: var(--gzo-font-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; } .gz-order .gzo-od__meta { font-size: 12.5px; color: var(--gzo-muted); margin-top: 3px; } .gz-order .gzo-od-track { background: var(--gzo-card); border: 1px solid var(--gzo-border); border-radius: 16px; padding: 16px; margin-top: 15px; } .gz-order .gzo-od-step { display: flex; gap: 12px; } .gz-order .gzo-od-step__rail { display: flex; flex-direction: column; align-items: center; } .gz-order .gzo-od-step__dot { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--gzo-paper-alt); color: var(--gzo-muted); } .gz-order .gzo-od-step__dot.is-done { background: var(--gzo-primary); color: #fff; } .gz-order .gzo-od-step__check { width: 14px; height: 14px; } /* Batch 10 (C21): pending dots are EMPTY on mobile (prototype mobile guards the check behind s.done); the ≥1024 desktop layer re-shows it as the prototype desktop's faint gray ✓ (currentColor = the dot's muted color). */ .gz-order .gzo-od-step__dot:not(.is-done) .gzo-od-step__check { display: none; } .gz-order .gzo-od-step__line { flex: 1; width: 2px; min-height: 16px; background: var(--gzo-border); } .gz-order .gzo-od-step__line.is-done { background: var(--gzo-primary); } .gz-order .gzo-od-step__body { padding-bottom: 14px; } .gz-order .gzo-od-step__title { font-family: var(--gzo-font-body); font-weight: 700; font-size: 13.5px; color: var(--gzo-muted); } .gz-order .gzo-od-step__title.is-done { color: var(--gzo-text); } .gz-order .gzo-od-step__sub { font-size: 11.5px; color: var(--gzo-muted); margin-top: 1px; } .gz-order .gzo-od-eta { display: flex; gap: 7px; align-items: center; background: #FBF8F2; border-radius: 10px; padding: 9px 11px; } .gz-order .gzo-od-eta__ic { width: 15px; height: 15px; flex: none; color: var(--gzo-warning); } .gz-order .gzo-od-eta span { font-weight: 600; font-size: 12px; color: var(--gzo-warning); } /* Batch 9 (C20): desktop ETA banner (above the timeline card) — mobile hides it */ .gz-order .gzo-od-eta-desk { display: none; background: #FBF1E6; border: 1px solid #EAD9BE; border-radius: 12px; padding: 12px 14px; margin-top: 15px; font-family: var(--gzo-font-body); font-weight: 600; font-size: 13px; color: #8A6A2B; } .gz-order .gzo-od-map { margin-top: 13px; border: 1px solid var(--gzo-border); border-radius: 13px; overflow: hidden; position: relative; height: 130px; } .gz-order .gzo-od-map--consent { background: repeating-linear-gradient(45deg, #EFE8DC 0 12px, #F3EDE3 12px 24px); } .gz-order .gzo-od-map__overlay { position: absolute; inset: 0; background: rgba(247, 243, 236, .84); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px; } .gz-order .gzo-od-map__ic { width: 22px; height: 22px; color: var(--gzo-muted); margin-bottom: 6px; } .gz-order .gzo-od-map__txt { font-weight: 600; font-size: 12px; color: var(--gzo-text); margin-bottom: 9px; } .gz-order .gzo-od-map__btn { border: none; background: var(--gzo-ink, #221F1B); color: #fff; border-radius: 9px; min-height: 36px; padding: 8px 14px; font-family: var(--gzo-font-body); font-weight: 600; font-size: 12px; cursor: pointer; } .gz-order .gzo-od-map--live { background: #E9EDE4; } .gz-order .gzo-od-map__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(140, 160, 130, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 160, 130, .25) 1px, transparent 1px); background-size: 22px 22px; } .gz-order .gzo-od-map__pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); color: var(--gzo-primary); } .gz-order .gzo-od-map__pin svg { width: 28px; height: 28px; } .gz-order .gzo-od-map__label { position: absolute; inset-block-end: 7px; inset-inline-start: 9px; font-weight: 600; font-size: 10px; color: #5C6B4F; background: rgba(255, 255, 255, .82); padding: 3px 7px; border-radius: 6px; } .gz-order .gzo-od-items { background: var(--gzo-card); border: 1px solid var(--gzo-border); border-radius: 16px; padding: 14px 16px; margin-top: 13px; } .gz-order .gzo-od-items__label { font-family: var(--gzo-font-body); font-weight: 700; font-size: 11px; color: var(--gzo-muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; } .gz-order .gzo-od-items__row { font-weight: 500; font-size: 13px; color: var(--gzo-text); padding: 3px 0; } .gz-order .gzo-od-items__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 9px; padding-top: 10px; border-top: 1px solid var(--gzo-border); } .gz-order .gzo-od-items__total-l { font-family: var(--gzo-font-display); font-weight: 700; font-size: 14px; } .gz-order .gzo-od-items__total-v { font-family: var(--gzo-font-body); font-weight: 700; font-size: 16px; } .gz-order .gzo-od-note { border-radius: 13px; padding: 13px 15px; margin-top: 13px; } .gz-order .gzo-od-note--info { background: var(--gzo-paper-alt); border: 1px solid var(--gzo-border); } .gz-order .gzo-od-note--refund { background: var(--gzo-error-bg); border: 1px solid var(--gzo-error-bg); display: flex; gap: 9px; } .gz-order .gzo-od-note__ic { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--gzo-error); } .gz-order .gzo-od-note__t1 { font-weight: 600; font-size: 12.5px; color: var(--gzo-text); } .gz-order .gzo-od-note--refund .gzo-od-note__t1 { color: var(--gzo-error); } .gz-order .gzo-od-note__t2 { font-size: 11.5px; line-height: 1.45; color: var(--gzo-muted); margin-top: 3px; } .gz-order .gzo-od-cancel { width: 100%; min-height: 46px; margin-top: 13px; border: 1.5px solid var(--gzo-error-bg); background: var(--gzo-card); color: var(--gzo-error); border-radius: 12px; font-family: var(--gzo-font-body); font-weight: 700; font-size: 13.5px; cursor: pointer; -webkit-tap-highlight-color: var(--gzo-tap); } .gz-order .gzo-od-cancel:active { transform: scale(.99); } .gz-order .gzo-od-reorder { width: 100%; min-height: 48px; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 13px; background: var(--gzo-primary); color: #fff; font-family: var(--gzo-font-body); font-weight: 700; font-size: 14.5px; cursor: pointer; box-shadow: var(--gzo-sh-cta); -webkit-tap-highlight-color: var(--gzo-tap); } .gz-order .gzo-od-reorder:active { transform: scale(.99); } .gz-order .gzo-od-reorder__ic { width: 17px; height: 17px; } .gz-order .gzo-od-contact { display: flex; gap: 8px; margin-top: 11px; } .gz-order .gzo-od-contact__btn { flex: 1; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 11px; font-family: var(--gzo-font-body); font-weight: 700; font-size: 12.5px; text-decoration: none; cursor: pointer; } .gz-order .gzo-od-contact__btn--wa { background: #1FA855; color: #fff; border: none; } .gz-order .gzo-od-contact__btn--tel { background: var(--gzo-card); color: var(--gzo-text); border: 1.5px solid var(--gzo-border); } .gz-order .gzo-od-contact__ic { width: 17px; height: 17px; flex: none; display: block; } /* ========================================================================= SYSTEM STATES (full-bleed standalone screens) ========================================================================= */ .gz-order .gzo-sys { animation: gzo-rise var(--gzo-ease-rise); min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 30px 22px 60px; } .gz-order .gzo-sys__card { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; text-align: center; } .gz-order .gzo-sys__ic { width: 70px; height: 70px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .gz-order .gzo-sys__ic svg { width: 32px; height: 32px; } .gz-order .gzo-sys__ic--warn { background: var(--gzo-warning-bg); color: var(--gzo-warning); } .gz-order .gzo-sys__ic--error { background: var(--gzo-error-bg); color: var(--gzo-error); } .gz-order .gzo-sys__ic--neutral { background: var(--gzo-paper-alt); color: var(--gzo-muted); } .gz-order .gzo-sys__title { font-family: var(--gzo-font-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; } .gz-order .gzo-sys__body { font-size: 13px; line-height: 1.55; color: var(--gzo-text-2); margin-top: 8px; max-width: 300px; } .gz-order .gzo-sys__contact { display: flex; gap: 9px; margin-top: 20px; width: 100%; max-width: 320px; } .gz-order .gzo-sys__contact-btn { flex: 1; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; font-family: var(--gzo-font-body); font-weight: 700; font-size: 13.5px; text-decoration: none; cursor: pointer; } .gz-order .gzo-sys__contact-btn--wa { background: #1FA855; color: #fff; border: none; } .gz-order .gzo-sys__contact-btn--tel { background: var(--gzo-card); color: var(--gzo-text); border: 1.5px solid var(--gzo-border); } .gz-order .gzo-sys__contact-ic { width: 17px; height: 17px; } .gz-order .gzo-sys__actions { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; width: 100%; max-width: 320px; } .gz-order .gzo-sys__btn { min-height: 48px; border-radius: 13px; font-family: var(--gzo-font-body); font-weight: 700; font-size: 14.5px; cursor: pointer; -webkit-tap-highlight-color: var(--gzo-tap); } .gz-order .gzo-sys__btn:active { transform: scale(.99); } .gz-order .gzo-sys__btn--primary { border: none; background: var(--gzo-primary); color: #fff; box-shadow: var(--gzo-sh-cta); } .gz-order .gzo-sys__btn--ghost { border: 1.5px solid var(--gzo-border); background: var(--gzo-card); color: var(--gzo-text); } .gz-order .gzo-sys__brand { font-size: 11px; color: var(--gzo-muted-2, var(--gzo-muted)); margin-top: 24px; } /* cart-changed change list */ .gz-order .gzo-sys-changes { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; width: 100%; max-width: 340px; } .gz-order .gzo-sys-change { display: flex; gap: 10px; align-items: center; text-align: start; background: var(--gzo-paper-alt); border: 1px solid var(--gzo-border); border-radius: 12px; padding: 11px 12px; } .gz-order .gzo-sys-change__ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; } .gz-order .gzo-sys-change__ic svg { width: 16px; height: 16px; } .gz-order .gzo-sys-change__ic--removed { background: var(--gzo-error-bg); color: var(--gzo-error); } .gz-order .gzo-sys-change__ic--price { background: var(--gzo-warning-bg); color: var(--gzo-warning); } .gz-order .gzo-sys-change__name { font-weight: 600; font-size: 13.5px; color: var(--gzo-text); } .gz-order .gzo-sys-change__note { font-size: 11.5px; color: var(--gzo-text-2); margin-top: 1px; } /* fallback when the client cannot pinpoint the change (price change / stale-cache online path) */ .gz-order .gzo-sys-hint { margin-top: 16px; width: 100%; max-width: 340px; background: var(--gzo-paper-alt); border: 1px solid var(--gzo-border); border-radius: 12px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5; color: var(--gzo-text-2); text-align: start; } /* The cart-changed screen keeps its actions full-bleed like the others. */ .gz-order .gzo-sys--cart .gzo-sys__actions { margin-top: 16px; }