/* Supporting pages — same visual language as the storefront and delivery flow. */
body.content-ui,
body.order-center-ui,
body.mock-pay-ui {
  color: var(--ui-ink);
  background:
    radial-gradient(circle at 88% 8%, rgba(37, 99, 235,.18), transparent 23rem),
    linear-gradient(180deg, #f7f9fc 0, var(--ui-canvas) 100%);
  background-attachment: fixed;
}

.content-ui .header,
.order-center-ui .header {
  top: 10px;
  width: min(1320px, calc(100% - 28px));
  margin: 0 auto;
  border: 1px solid rgba(175,194,219,.8);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--ui-shadow-sm);
}

.content-ui .header-inner,
.order-center-ui .header-inner { height: 66px; }

.content-ui .logo-mark,
.order-center-ui .logo-mark {
  border-radius: 12px;
  background: var(--ui-forest-2);
  box-shadow: none;
}

.content-ui .logo-name,
.order-center-ui .logo-name {
  font-family: var(--ui-font);
  font-weight: 850;
  letter-spacing: -.02em;
}

.content-ui .btn-order,
.order-center-ui .btn-order,
.order-center-ui .oc-btn {
  min-height: 44px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-forest-2);
  color: #fff;
  box-shadow: 0 10px 22px rgba(11, 42, 74,.16);
  transition: transform .22s var(--ui-ease), background .22s ease;
}

.content-ui .btn-order:hover,
.order-center-ui .btn-order:hover,
.order-center-ui .oc-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--ui-forest);
}

.content-ui .doc {
  max-width: 900px;
  padding-top: 76px;
}

.content-ui .doc-eyebrow,
.order-center-ui .oc-eyebrow {
  display: none;
}

.content-ui .doc h1,
.order-center-ui .oc-title h1 {
  font-family: var(--ui-display);
  color: var(--ui-ink);
  font-weight: 900;
  letter-spacing: -.04em;
}

.content-ui .doc-card,
.order-center-ui .oc-search,
.order-center-ui .oc-card-box,
.order-center-ui .oc-kefu-card,
.order-center-ui .oc-empty {
  border: 1px solid rgba(175,194,219,.78);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-md);
}

.content-ui .doc-card { position: relative; overflow: hidden; padding-top: 40px; }
.content-ui .doc-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--ui-lime), var(--ui-info));
}

.content-ui .doc-card h2 { border-color: var(--ui-line); }
.content-ui .doc-card p,
.content-ui .doc-card li { color: var(--ui-ink-2); }
.content-ui .doc-tip { border-color: rgba(37,99,235,.32); background: rgba(37, 99, 235,.14); }

.content-ui .footer,
.order-center-ui .footer {
  margin-top: 42px;
  border: 0;
  background: var(--ui-forest-2);
}

.order-center-ui .oc-wrap { padding-top: 76px; }
.order-center-ui .oc-search { border: 0; overflow: hidden; }
.order-center-ui .oc-search::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--ui-lime), var(--ui-info));
}
.order-center-ui .oc-input-wrap,
.order-center-ui .oc-captcha-wrap,
.order-center-ui .oc-code-box {
  border-color: var(--ui-line);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-2);
}
.order-center-ui .oc-redeem-action { border: 0; background: var(--ui-lime); border-radius: var(--ui-radius-control); }

.mock-pay-ui { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.mock-pay-ui .card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 22px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-dark);
}
.mock-pay-ui .card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--ui-lime); }
.mock-pay-ui .amount { font-family: var(--ui-display); font-weight: 900; letter-spacing: -.05em; }
.mock-pay-ui .meta { background: var(--ui-surface-2); border: 1px solid var(--ui-line); }
.mock-pay-ui .btn { min-height: 48px; border-radius: var(--ui-radius-control); background: var(--ui-forest-2); }

@media (max-width: 640px) {
  .content-ui .header,
  .order-center-ui .header { top: 7px; width: calc(100% - 14px); }
  .content-ui .doc,
  .order-center-ui .oc-wrap { padding-top: 52px; }
  .content-ui .doc-card { padding: 28px 20px; }
}

/* Light supporting surfaces share the same commerce hierarchy. */
body.content-ui,
body.order-center-ui,
body.mock-pay-ui { background: var(--ui-canvas); }
.content-ui .logo-mark,
.order-center-ui .logo-mark { color: #fff; background: var(--ui-lime); }
.content-ui .btn-order,
.order-center-ui .btn-order,
.order-center-ui .oc-btn,
.mock-pay-ui .btn { color: #fff; background: var(--ui-lime); box-shadow: 0 8px 20px rgba(40,120,234,.18); }
.content-ui .doc-card::before,
.order-center-ui .oc-search::before { background: var(--ui-lime); }
.content-ui .footer,
.order-center-ui .footer { color: var(--ui-ink); background: #f1f3f6; }
.order-center-ui .oc-search { padding: 22px; }
.order-center-ui .oc-search-mark { color: var(--ui-lime) !important; background: var(--ui-info-soft) !important; }
.order-center-ui .oc-search-title { font-family: var(--ui-display) !important; color: var(--ui-ink) !important; }
.order-center-ui .oc-search-desc { color: var(--ui-muted) !important; }
.order-center-ui .oc-search-safe { border-color: var(--ui-line) !important; color: var(--ui-info) !important; background: var(--ui-info-soft) !important; }
.order-center-ui .oc-search-safe::before { color: #fff !important; background: var(--ui-info) !important; }
.order-center-ui .oc-search-row { border-color: var(--ui-line) !important; background: var(--ui-surface-2) !important; }
.order-center-ui .oc-input-wrap input,
.order-center-ui .oc-captcha-wrap { border-color: var(--ui-line) !important; color: var(--ui-ink) !important; background: #fff !important; }
.order-center-ui .oc-input-wrap:focus-within input { box-shadow: 0 0 0 3px rgba(40,120,234,.18) !important; }
.order-center-ui .oc-wrap { max-width: 1000px; padding-top: 46px; }
.order-center-ui .oc-title { margin-bottom: 28px; text-align: left; }
.order-center-ui .oc-title h1 { font-size: clamp(28px,4vw,38px); letter-spacing: -.025em; line-height: 1.3; }
.order-center-ui .oc-title p { color: var(--ui-muted); font-size: 14px; line-height: 1.7; }
.order-center-ui .oc-search { padding: 24px; border: 1px solid var(--ui-line); box-shadow: none; }
.order-center-ui .oc-search::before { display: none; }
.order-center-ui .oc-search-row { padding: 0; border: 0; background: transparent !important; gap: 12px; }
.order-center-ui .oc-input-wrap input::placeholder,
.order-center-ui .oc-captcha-wrap .oc-captcha-input::placeholder { color: var(--ui-muted); }
.order-center-ui .oc-search-safe { font-weight: 500; }
.order-center-ui .oc-card,.order-center-ui .oc-card-box,.order-center-ui .oc-kefu-card,.order-center-ui .oc-empty { border: 1px solid var(--ui-line); box-shadow: none; border-radius: 14px; }
.order-center-ui .oc-card:hover { transform: none; }
.order-center-ui .oc-kefu-card { margin-top: 24px; }
.order-center-ui .oc-redeem-action { color: #fff; }
.order-center-ui .oc-btn:disabled { color: #525b69; background: var(--ui-line); box-shadow: none; }
.content-ui .footer :is(.logo-name,h3),.order-center-ui .footer :is(.logo-name,h3) { color: var(--ui-ink); }
.content-ui .footer .logo .logo-name,.order-center-ui .footer .logo .logo-name { color: var(--ui-ink); }
.content-ui .footer .logo .logo-sub,.order-center-ui .footer .logo .logo-sub { color: var(--ui-ink-2); }
.content-ui .footer :is(a,p,.footer-bottom),.order-center-ui .footer :is(a,p,.footer-bottom) { color: var(--ui-ink-2); }
.order-center-ui .oc-captcha-img { object-fit: contain; background: var(--ui-surface-2); }
.content-ui .doc-card { box-shadow: none; padding-top: 28px; }
.content-ui .doc-card::before,.mock-pay-ui .card::before { display: none; }
.content-ui .doc h1 { font-size: clamp(28px,4vw,40px); letter-spacing: -.025em; }
.content-ui .doc p { line-height: 1.8; }
@media (max-width: 640px) {
  .order-center-ui .oc-wrap { padding-top: 32px; }
  .order-center-ui .oc-search { padding: 18px; }
  .order-center-ui .oc-search-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .order-center-ui .oc-btn { width: 100%; }
}