/* css-shared-order-tracking-thank-you.css — styles that only matter when one of these sections is on the page:
 * main-order-tracking, main-thank-you.
 * Linked from each of them (see the first line of the section file); theme.css
 * holds the common styles. */

.auth-field { display: grid; gap: 0.35rem; margin: 0; }

.auth-field > span,
.auth-field > label { font-size: 0.85rem; font-weight: 700; color: var(--ink); }

.auth-field small { font-weight: 400; color: var(--muted); }

.auth-field input,
.auth-phone__code {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}

.auth-phone__code { flex: 0 1 auto; width: auto; max-width: 9.5rem; padding-inline-end: 0.5rem; text-overflow: ellipsis; }

.thanks-page__inner { display: grid; gap: 1.25rem; max-width: 40rem; }

.thanks-hero { margin-bottom: 0.75rem; text-align: center; }

.thanks-hero__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.25rem; height: 4.25rem; margin-bottom: 1rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 6%, transparent);
  animation: thanks-pop 0.45s cubic-bezier(.2,.9,.3,1.3) both;
}

@media (prefers-reduced-motion: reduce) {
  .thanks-hero__check { animation: none; }
}
.thanks-text { margin: 0; color: var(--ink); line-height: 1.6; }

.thanks-meta { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--muted); }

.thanks-pay__form { display: grid; gap: 0.25rem; margin-top: 1rem; }

.thanks-pay__select { width: 100%; max-width: none; }

.thanks-pay .order-summary__submit { margin-top: 0.75rem; }

.thanks-lines { margin: 0 0 0.75rem; padding: 0; list-style: none; }

.thanks-lines > li { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }

.thanks-lines > li:first-child { padding-top: 0; }

.thanks-lines__row { display: flex; align-items: baseline; gap: 0.6rem; }

.thanks-lines__qty { flex: none; min-width: 1.8rem; padding: 0.05rem 0.4rem; border-radius: 6px; background: color-mix(in srgb, var(--ink) 6%, var(--surface)); font-size: 0.8rem; font-weight: 700; text-align: center; }

.thanks-lines__title { flex: 1; min-width: 0; font-weight: 600; }

.thanks-lines__price { flex: none; font-weight: 600; color: var(--muted); }

.thanks-lines__sel { margin: 0.3rem 0 0; padding-inline-start: 2.4rem; list-style: none; font-size: 0.85rem; color: var(--muted); }

.thanks-lines__sel span { color: var(--ink-soft, var(--muted)); }

.thanks-free { color: var(--success, #0a7d3a); font-weight: 600; }

.thanks-actions { display: grid; justify-items: center; gap: 0.9rem; margin-top: 0.5rem; }

.thanks-actions__more { font-size: 0.9rem; font-weight: 600; color: var(--accent); }

[dir="rtl"] .thanks-actions__track svg, [dir="rtl"] .thanks-pay .order-summary__submit svg { transform: scaleX(-1); }

/* The branch the order goes out from, under the service details. */
.thanks-branch { display: flex; align-items: center; gap: 0.45rem; margin: 0.85rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--muted); }

.thanks-branch strong { color: var(--ink); }

.thanks-branch svg { flex: none; color: var(--accent); }