/* ==========================================================================
   ORACY customer app - Batch CX-5 screen polish (Themes 1, 22 Oct 2026)
   Every rule is scoped to html[data-cx5]: on for every new style, and for a
   heritage tenant only when its brand says theme.cx5: true. Meerath: off.
   ========================================================================== */

/* ---- Orders and live tracking: the current step in words, then the bar ---- */
html[data-cx5] .cx5-status { display: grid; gap: 10px; margin: 16px 0 4px; }
html[data-cx5] .cx5-status strong { font-size: var(--cx-text-xl); font-weight: 700; color: var(--orange); line-height: 1.2; }
html[data-cx5] .cx5-status-done strong { color: var(--green); }
html[data-cx5] .cx5-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
html[data-cx5] .cx5-bar i { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; position: relative; }
html[data-cx5] .cx5-bar i.done { background: var(--orange); }
html[data-cx5] .cx5-bar i.now { background: color-mix(in srgb, var(--orange) 35%, var(--line)); }
html[data-cx5] .cx5-bar i.now::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 45%;
  border-radius: inherit;
  background: var(--orange);
  animation: cx5-progress 1.6s var(--cx-ease) infinite alternate;
}
html[data-cx5][dir="rtl"] .cx5-bar i.now::after { inset-inline-start: 0; }
@keyframes cx5-progress { from { width: 20%; } to { width: 80%; } }
/* the timeline under it is the record of what happened: quieter, with ticks for the steps done */
html[data-cx5] .cx5-status + .order-timeline { padding-top: 14px; }
html[data-cx5] .order-step { min-height: 44px; }
html[data-cx5] .order-step:not(:last-child)::after { background: var(--line); }
html[data-cx5] .order-step.done:not(:last-child)::after { background: var(--orange); }
html[data-cx5] .order-step-dot { background: var(--card); border-color: var(--line); }
html[data-cx5] .order-step.done .order-step-dot {
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.2 6 9.4 10.4 4.8' fill='none' stroke='%23000' stroke-opacity='.62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
html[data-cx5] .order-step-copy strong { color: var(--muted); font-weight: 500; }
html[data-cx5] .order-step.done .order-step-copy strong { color: var(--text); }
html[data-cx5] .order-step.now .order-step-copy strong { color: var(--text); font-weight: 700; }
html[data-cx5] .active-order-card,
html[data-cx5] .history-order-card { border-radius: var(--cx-radius-lg); }
html[data-cx5] .history-order-meta strong { color: var(--text); }
html[data-cx5] .orders-call-btn { margin-top: 14px; }

/* ---- Rewards card: the next reward, as a bar ---------------------------- */
html[data-cx5] .points {
  background: linear-gradient(140deg, color-mix(in srgb, var(--gold) 22%, var(--card)) 0%, var(--card) 62%);
  border-color: color-mix(in srgb, var(--gold) 34%, transparent);
  border-radius: var(--cx-radius-lg);
}
html[data-cx5] .points h2 { font-size: var(--cx-text-3xl); line-height: 1.1; margin: 4px 0 2px; }
html[data-cx5] .cx5-next { display: grid; gap: 7px; margin: 14px 0 2px; }
html[data-cx5] .cx5-next-bar { height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
html[data-cx5] .cx5-next-bar i { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
html[data-cx5] .cx5-next small { color: var(--text); font-size: var(--cx-text-sm); font-weight: 600; }

/* ---- Empty screens: a picture, a sentence, one button ------------------- */
html[data-cx5] .cx5-empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 56px 22px 24px; }
html[data-cx5] .cx5-empty-pic {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--orange) 12%, var(--card));
  color: var(--orange);
}
html[data-cx5] .cx5-empty-pic svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[data-cx5] .cx5-empty-pic svg circle { fill: currentColor; stroke: none; }
html[data-cx5] .cx5-empty h3 { margin: 0; font-size: var(--cx-text-xl); }
html[data-cx5] .cx5-empty p { margin: 0 0 12px; max-width: 30ch; color: var(--muted); font-size: var(--cx-text-md); line-height: 1.5; }
html[data-cx5] .cx5-empty .btn { width: auto; min-width: 200px; }
html[data-cx5] .orders-empty-state { border-radius: var(--cx-radius-lg); }
html[data-cx5] .empty { padding: 48px 16px; font-size: var(--cx-text-md); }

/* ---- Feedback: drawn faces --------------------------------------------- */
html[data-cx5] .feedback-screen .emoji-row button { display: grid; justify-items: center; gap: 6px; color: var(--muted); }
html[data-cx5] .feedback-screen .emoji-row span { margin: 0; line-height: 0; }
html[data-cx5] .cx5-face { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
html[data-cx5] .feedback-screen .emoji-row button.on { color: var(--orange); }

/* ---- Catering form: the introduction stands apart from the first field --- */
html[data-cx5] #app > .screen:has(> .catering-form) > p:first-of-type { margin: 2px 0 22px; color: var(--muted); font-size: var(--cx-text-md); line-height: 1.55; }
html[data-cx5] .catering-form { gap: 18px; }
html[data-cx5] .catering-form label { font-weight: 600; font-size: var(--cx-text-sm); }
html[data-cx5] .catering-form .consent { font-weight: 500; }

/* ---- Account: the Notifications row keeps its arrow on the same line ---- */
html[data-cx5] .account-list-item:has(> [data-care-badge]) { grid-template-columns: 44px minmax(0, 1fr) auto auto; }

/* ---- Branch and support: one radius and one surface ---------------------- */
html[data-cx5] .support-item,
html[data-cx5] .branch-card,
html[data-cx5] .more-item { border-radius: var(--cx-radius-lg); }

@media (prefers-reduced-motion: reduce) {
  html[data-cx5] .cx5-bar i.now::after { animation: none; width: 50%; }
}