/* Reusable, screen-agnostic component styles. */

/* ---------------------------------------------------------------------
   App bar (top header)
--------------------------------------------------------------------- */
.app-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* Grows downward by the safe-area inset (fullscreen mode has no native
     status bar to hold the clock/battery clear of our header anymore, so
     we pad for it ourselves) instead of centering content into a fixed
     height that would otherwise sit under it. */
  height: calc(var(--header-height) + var(--tg-safe-area-top));
  padding-top: var(--tg-safe-area-top);
  max-width: var(--app-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--margin);
  background: var(--glass-bar-bg);
  backdrop-filter: var(--glass-bar-blur);
  -webkit-backdrop-filter: var(--glass-bar-blur);
  border-bottom: 1px solid var(--glass-bar-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.app-bar__icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--c-on-surface-variant);
  transition: opacity 0.15s ease;
}
.app-bar__icon-btn:active {
  opacity: 0.7;
}

.app-bar__title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.app-bar__title {
  font: var(--text-headline-sm);
  color: var(--c-on-surface);
  line-height: 1.2;
}
.app-bar__logo {
  /* was 40px tall / 220px max — a touch too small next to the header */
  height: 52px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}

/* Brand mark shown alone in the header (see public/assets/logo-mark*.png). */
.app-bar__logo-mark {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}
.app-bar__subtitle {
  font: var(--text-label-sm);
  color: var(--c-on-surface-variant);
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}
.app-bar__subtitle-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--c-tertiary);
  display: inline-block;
}

/* Right-aligned brand block used on the select-service header (brand name
   + tiny Persian subtitle stacked, RTL-start aligned) plus the instant
   -delivery pill on the opposite side. */
.app-bar__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: right;
}
.app-bar__brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.app-bar__brand-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--c-on-surface);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.app-bar__brand-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-on-surface-variant);
  margin-top: 1px;
  line-height: 1;
}
.app-bar__delivery-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
}
.app-bar__delivery-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: #10b981;
  margin-inline-start: 6px;
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ---------------------------------------------------------------------
   Security note pill (below the header on the select-service screen)
--------------------------------------------------------------------- */
.security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.45) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.04);
}
.security-note__icon {
  width: 14px;
  height: 14px;
  color: #f59e0b;
  flex-shrink: 0;
}
.security-note__text {
  font: var(--text-label-sm);
  color: var(--c-on-surface-variant);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Main scroll canvas
--------------------------------------------------------------------- */
.app-main {
  flex: 1;
  min-height: 0; /* required so a flex child can actually shrink and scroll instead of stretching #app taller than the viewport */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-inline: var(--margin);
  padding-top: calc(var(--header-height) + var(--tg-safe-area-top) + var(--space-md));
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
/* Bottom clearance so the last row of content can scroll fully ABOVE the
   fixed bottom bar(s). It is a real flex item (not padding-bottom) on
   purpose: trailing padding of a scroll container is dropped from the
   scrollable area by some WebViews, a spacer element never is.
   Screens override --main-clearance (confirm/result set a fixed value; the
   select screen measures its two floating docks at runtime — see
   js/screens/select-service.js). The default is >= 120px. */
.app-main::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: var(--main-clearance, calc(120px + var(--tg-safe-area-bottom)));
}

/* ---------------------------------------------------------------------
   Step progress indicator
--------------------------------------------------------------------- */
.step-progress {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}
.step-progress__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 4px;
  margin-bottom: var(--space-sm);
}
.step-progress__label {
  font: var(--text-label-sm);
  color: var(--c-primary);
  font-weight: 700;
}
.step-progress__percent {
  font: var(--text-label-sm);
  color: var(--c-secondary);
  font-weight: 500;
}
.step-progress__bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
/* The wizard is 4 steps: select -> recipient -> confirm & pay -> result.
   (The old standalone "در حال انتقال به درگاه" screen was folded into the
   confirm step's پرداخت button, and the recipient-username field was split
   out of "select" into its own screen — see recipient.js.) The base
   .step-progress__bars above is already a 4-column grid, so no override is
   needed for the 4-step wizard; --3 is kept only in case some screen still
   wants a 3-bar layout. */
.step-progress__bars--3 {
  grid-template-columns: repeat(3, 1fr);
}
.step-progress__bar {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--c-surface-container-highest);
}
/* Two shades of the same blue: steps you have already PASSED are the pale
   blue, the step you are ON is the strong deep blue, upcoming steps stay grey. */
.step-progress__bar--done {
  background: #bae6fd;
}
.step-progress__bar--active {
  background: #0284c7;
  box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.15), 0 2px 8px -2px rgba(2, 132, 199, 0.55);
}

/* ---------------------------------------------------------------------
   Segmented control (tabs)
--------------------------------------------------------------------- */
.segmented {
  display: flex;
  align-items: center;
  background: var(--c-surface-container-high);
  border: 1px solid color-mix(in srgb, var(--c-outline-variant) 60%, transparent);
  border-radius: var(--radius-xl);
  padding: 4px;
  gap: 4px;
}
.segmented__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  font: var(--text-label-md);
  font-weight: 700;
  color: var(--c-secondary);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.segmented__btn--active {
  background: var(--c-surface-container-lowest);
  color: var(--c-primary);
  border: 1px solid color-mix(in srgb, var(--c-outline-variant) 40%, transparent);
}
.segmented__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Card (generic container)
--------------------------------------------------------------------- */
.card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.52) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-lg);
  box-shadow: var(--glass-shadow);
}
.card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--c-surface-container-high);
}
.card__row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.card__label {
  font: var(--text-body-sm);
  color: var(--c-secondary);
  font-weight: 500;
}
.card__value {
  font: var(--text-body-md);
  color: var(--c-on-surface);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Quantity stepper
--------------------------------------------------------------------- */
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 8px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}
.stepper__btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: rgba(100, 116, 139, 0.1);
  border: 1px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-on-surface-variant);
  transition: background-color 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
}
.stepper__btn:active {
  transform: scale(0.95);
  background: rgba(100, 116, 139, 0.18);
}
.stepper__btn--plus {
  background: rgba(0, 152, 234, 0.1);
  border-color: rgba(56, 189, 248, 0.2);
  color: var(--c-primary-container);
}
.stepper__btn--plus:active {
  background: rgba(0, 152, 234, 0.2);
}
.stepper__display {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.stepper__value-row {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: text;
  border-radius: var(--radius-md);
  padding: 2px 8px;
  transition: background-color 0.15s ease;
}
.stepper__value-row:hover,
.stepper__value-row:focus-visible {
  background: rgba(0, 152, 234, 0.08);
  outline: none;
}
.stepper__value {
  font: var(--text-headline-lg-mobile);
  font-weight: 800;
  color: var(--c-on-surface);
  letter-spacing: -0.01em;
  min-width: 3ch;
  text-align: center;
}
/* Same visual weight as .stepper__value while active, so swapping the
   read-only span for this input doesn't shift layout. */
.stepper__value-input {
  font: var(--text-headline-lg-mobile);
  font-weight: 800;
  color: var(--c-on-surface);
  letter-spacing: -0.01em;
  min-width: 5ch;
  width: 6ch;
  text-align: center;
  border: none;
  border-bottom: 2px solid var(--c-primary);
  background: transparent;
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}
.stepper__value-input::-webkit-outer-spin-button,
.stepper__value-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper__unit-label {
  font: var(--text-label-sm);
  color: var(--c-on-surface-variant);
  font-weight: 700;
}
.stepper__star-icon {
  color: #f59e0b;
  filter: drop-shadow(0 1px 1px rgba(245, 158, 11, 0.25));
}

/* Tiered-discount strip under the quantity stepper: shows the volume
   discount the CURRENT quantity already earns and how far the next tier
   is (see paintTierProgress in select-service.js). */
.tier-strip {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--c-tertiary) 7%, rgba(255, 255, 255, 0.7));
  border: 1px solid color-mix(in srgb, var(--c-tertiary) 20%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tier-strip__dots {
  display: flex;
  gap: 6px;
}
.tier-strip__dot {
  flex: 1;
  height: 5px;
  border-radius: var(--radius-full);
  background: rgba(100, 116, 139, 0.18);
  transition: background-color 0.2s ease;
}
.tier-strip__dot--on {
  background: var(--c-tertiary-container);
}
.tier-strip__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tier-strip__current {
  display: flex;
  align-items: center;
  gap: 5px;
  font: var(--text-label-md);
  font-weight: 800;
}
.tier-strip__current .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.tier-strip__current--on {
  color: #15803d;
}
.tier-strip__current--none {
  color: var(--c-on-surface-variant);
  font-weight: 700;
}
.tier-strip__next {
  font: var(--text-label-sm);
  font-weight: 600;
  color: var(--c-on-surface-variant);
  line-height: 1.6;
}
.tier-strip__next b {
  color: var(--c-primary-container);
  font-weight: 800;
}
.tier-strip__next--max {
  color: #15803d;
  font-weight: 700;
}

/* Header row above the number box: field label + per-unit rate, used on
   the stars stepper card. */
.stepper-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-inline: 2px;
}
.stepper-card__label {
  font: var(--text-label-md);
  font-weight: 700;
  color: var(--c-on-surface-variant);
}
.stepper-card__rate {
  font: var(--text-label-sm);
  color: var(--c-on-surface-variant);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Preset chips
--------------------------------------------------------------------- */
.chip-row {
  /* Flex-wrap instead of a fixed 3-column grid: with 5 presets the second
     row (2 chips) centers itself under the first instead of leaving an
     empty slot on one side. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.chip-row > .chip {
  /* exactly 3 per row: (100% - 2 gaps) / 3 */
  flex: 0 0 calc((100% - 20px) / 3);
  min-width: 0;
  text-align: center;
}
.chip {
  padding: 10px 4px;
  border-radius: var(--radius-lg);
  font: var(--text-label-md);
  font-weight: 800;
  text-align: center;
  /* Frosted-glass surface for EVERY chip (selected or not). The old white
     border + white fill vanished against the white card behind it, so the
     unselected presets read as plain text. A translucent slate border and a
     faint cool tint keep them visibly tappable while staying light. */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.34) 100%),
    rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(100, 116, 139, 0.24);
  color: var(--c-on-surface-variant);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.chip:active {
  transform: scale(0.97);
}
.chip--active {
  /* Same 1px border as the other chips + a 1px ring, so selecting a chip
     doesn't change its box size. */
  border-color: var(--c-primary);
  background: linear-gradient(to bottom, rgba(0, 152, 234, 0.2), rgba(0, 152, 234, 0.1));
  color: var(--c-primary-container);
  font-weight: 800;
  transform: scale(1.03);
  box-shadow: 0 0 0 1px var(--c-primary), 0 2px 8px rgba(0, 152, 234, 0.16);
}
.chip--stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  min-height: 88px;
}
/* Fixed-height slot at the top of every preset card. Holds either the green
   "٪N ارزون‌تر" pill or, on the baseline card, a neutral "قیمت پایه" pill —
   so all six cards have the same three rows (badge / number / tag) and
   line up exactly, instead of the pill-less cards looking shorter and
   off-balance. */
.chip__badge-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
}
.chip__base {
  display: inline-flex;
  align-items: center;
  font: var(--text-label-sm);
  font-size: 10px;
  font-weight: 700;
  color: var(--c-on-surface-variant);
  background: rgba(100, 116, 139, 0.1);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  line-height: 1.6;
  white-space: nowrap;
}
.chip--active .chip__base {
  color: var(--c-primary-container);
  background: rgba(0, 152, 234, 0.12);
  border-color: rgba(0, 152, 234, 0.3);
}
.chip__qty {
  font: var(--text-label-md);
  font-weight: 800;
}
.chip__tag {
  font: var(--text-label-sm);
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.1;
}
.chip__tag--muted {
  color: var(--c-on-surface-variant);
  font-weight: 600;
}
/* Real, computed-from-price discount badge (see fetchPresetDiscounts in
   select-service.js) — a small green pill above the quantity so the "این
   بسته ارزون‌تره" signal reads before the number itself. */
.chip__discount {
  display: inline-flex;
  align-items: center;
  font: var(--text-label-sm);
  font-size: 10px;
  font-weight: 800;
  color: #15803d;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  line-height: 1.6;
  white-space: nowrap;
}
.chip--active .chip__discount {
  color: #166534;
  background: rgba(34, 197, 94, 0.22);
  border-color: rgba(34, 197, 94, 0.4);
}
.stars-pack-hint {
  font: var(--text-label-sm);
  color: var(--c-on-surface-variant);
  margin: 0 0 10px;
  line-height: 1.5;
}
.chip-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 14px 0;
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--c-outline-variant) 80%, transparent);
  background: var(--c-surface-container-lowest);
  color: var(--c-secondary);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip-tile--active {
  border-color: var(--c-primary);
  background: var(--c-primary);
  color: var(--c-on-primary);
}
.chip-tile__num {
  font: var(--text-headline-sm);
  font-weight: 700;
}
.chip-tile__unit {
  font: var(--text-label-sm);
}

/* ---------------------------------------------------------------------
   Text input
--------------------------------------------------------------------- */
.field-label {
  display: block;
  font: var(--text-label-lg);
  color: var(--c-on-surface);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.input-wrap__prefix {
  position: absolute;
  left: 12px;
  color: var(--c-secondary);
  font-weight: 700;
  font-size: 16px;
  pointer-events: none;
  user-select: none;
}
.text-input {
  width: 100%;
  /* Very light blue-grey plate + soft border: the field stays visible on the
     white card instead of blending into it (valid / invalid tint it below). */
  background: #f3f6fb;
  border: 1px solid #d3dce8;
  border-radius: var(--radius-xl);
  padding: 14px 12px 14px 36px;
  font: var(--text-body-md);
  color: var(--c-on-surface);
  font-weight: 600;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
/* Room on the right for the validation tick (the "@" prefix sits on the left). */
.input-wrap .text-input {
  padding-right: 42px;
}
.text-input::placeholder {
  color: var(--c-outline);
}
.text-input:focus {
  outline: none;
  background: #ffffff;
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 0 3px rgba(0, 152, 234, 0.15);
}
/* Live validation on the recipient field. --invalid = a definite format
   problem (soft red border); --valid = a small green tick in the corner. */
.input-wrap--invalid .text-input,
.input-wrap--invalid .text-input:focus {
  background: #fff5f5;
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.03);
}
.input-wrap--valid .text-input,
.input-wrap--valid .text-input:focus {
  background: #f1fbf6;
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08), inset 0 1px 3px rgba(0, 0, 0, 0.03);
}
.input-wrap__check {
  position: absolute;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  /* White tick on a solid green disc — the old dark-green tick on a 14%
     green tint barely read against the field. */
  color: #ffffff;
  background: var(--c-tertiary-container);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.input-wrap__check .icon {
  width: 15px;
  height: 15px;
}
/* The path carries its own stroke attributes, so the override has to
   target the path itself (not the <svg>) to actually take effect. */
.input-wrap__check .icon path {
  stroke: #ffffff;
  stroke-width: 3;
}
.input-wrap--valid .input-wrap__check {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .input-wrap__check {
    transition: opacity 0.01s linear;
    transform: none;
  }
}
/* keep the status line off the recipient card above it */
.recipient-preview + .field-status {
  margin-top: 12px;
}
.field-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: var(--text-label-sm);
  min-height: 16px;
}
.field-status__hint {
  color: var(--c-secondary);
}
.field-status__ok {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--c-secondary);
}
.field-status__ok-badge {
  color: var(--c-tertiary);
  font-weight: 700;
}
.field-status__error {
  color: var(--c-error);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Gift message (optional text box) —
   confirm-order screen, gift orders only.
--------------------------------------------------------------------- */
.text-input--textarea {
  padding: 12px 14px;
  resize: none;
  font-family: inherit;
  line-height: 1.6;
  min-height: 76px;
}

/* Recipient name + avatar preview, shown under the username field once a
   Telegram lookup succeeds (see resolveRecipient in api.js). Hidden by
   default — most lookups miss (Bot API can only resolve users it has
   already seen), so this only appears on an actual match. */
.recipient-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-top: 8px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--c-tertiary) 8%, var(--c-surface-container-low));
  border: 1px solid color-mix(in srgb, var(--c-tertiary) 20%, transparent);
  animation: recipient-preview-in 0.18s ease;
}
.recipient-preview .recipient-card {
  width: 100%;
}
/* Same look as .recipient-preview (tinted plate + border), for the order
   summary's «تحویل‌گیرنده» row on the confirm screen. */
.recipient-box {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--c-tertiary) 8%, var(--c-surface-container-low));
  border: 1px solid color-mix(in srgb, var(--c-tertiary) 20%, transparent);
}
@keyframes recipient-preview-in {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}
.recipient-preview__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--c-surface-container-high);
}
.recipient-preview__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-outline);
}
.recipient-preview__avatar--placeholder .icon {
  width: 20px;
  height: 20px;
}
.recipient-preview__name {
  font: var(--text-body-sm);
  font-weight: 700;
  color: var(--c-on-surface);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipient-preview__check {
  color: var(--c-tertiary);
  flex-shrink: 0;
}
.recipient-preview__check .icon {
  width: 16px;
  height: 16px;
}

/* Two-line "who is this actually going to" card — full name on top,
   @username underneath, avatar photo beside both. Shared markup between
   screen 1 (public/js/lib/recipient-card.js) and screen 2's order
   summary, so the buyer sees the same visual confirmation in both places. */
/* Avatar on the LEFT, name with the @username stacked right under it, and
   the verified tick (when shown) on the RIGHT. The markup order is avatar,
   text, tick; row-reverse flips that for RTL so the avatar ends up leftmost. */
.recipient-card {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.recipient-card__avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--c-surface-container-high);
}
.recipient-card__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-outline);
}
.recipient-card__avatar--placeholder .icon {
  width: 60%;
  height: 60%;
}
.recipient-card__lines {
  display: flex;
  flex-direction: column;
  /* both lines start on the same left edge, right beside the avatar (the
     @username is LTR text, which otherwise ends up offset from the name) */
  align-items: flex-end;
  min-width: 0;
  gap: 1px;
}
.recipient-card__fullname {
  font: var(--text-body-sm);
  font-weight: 700;
  color: var(--c-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipient-card__username {
  font: var(--text-label-sm);
  color: var(--c-secondary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipient-card__check {
  color: var(--c-tertiary);
  flex-shrink: 0;
  display: flex;
  /* pushes the tick to the far right of a full-width card */
  margin-left: auto;
}
.recipient-card__check .icon {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------------------------
   Badges
--------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font: var(--text-label-sm);
  font-weight: 700;
}
.badge--primary {
  color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary-fixed) 50%, transparent);
}
.badge--success {
  color: var(--c-tertiary);
  background: color-mix(in srgb, var(--c-tertiary) 10%, transparent);
}

/* ---------------------------------------------------------------------
   Info / guarantee micro-card
--------------------------------------------------------------------- */
.info-note {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 12px 14px;
}
.info-note__icon {
  color: var(--c-primary);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.info-note__text {
  font: var(--text-label-sm);
  color: var(--c-on-surface-variant);
  line-height: 1.6;
}

/* ---------------------------------------------------------------------
   Error banner
--------------------------------------------------------------------- */
.error-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--c-error-container);
  border: 1px solid color-mix(in srgb, var(--c-error) 30%, transparent);
  border-radius: var(--radius-lg);
  padding: 12px;
}
.error-banner__icon {
  color: var(--c-error);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.error-banner__text {
  font: var(--text-label-sm);
  color: var(--c-on-error-container);
  line-height: 1.6;
  flex: 1;
}

/* ---------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------- */
.btn-primary {
  width: 100%;
  height: 54px;
  background: var(--c-primary-gradient);
  color: var(--c-on-primary);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: var(--radius-xl);
  font: var(--text-label-lg);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--glow-sky);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.btn-primary:active {
  transform: scale(0.98);
  filter: brightness(1.05);
}
.btn-secondary {
  width: 100%;
  height: 48px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--c-on-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  font: var(--text-label-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.15s ease;
}
.btn-secondary:active {
  background: rgba(255, 255, 255, 0.85);
}
.btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Loading state (see js/lib/button.js). The label + icon fade out but keep
   their space, so the button never changes width; a spinner fades in on top.
   Deliberately NOT :disabled — that would dim the whole button to 50%,
   which reads as "broken" rather than "working". pointer-events:none is what
   blocks repeat taps (JS also guards against them). */
.btn-primary,
.btn-secondary {
  position: relative;
}
.btn-primary > :not(.btn-spinner),
.btn-secondary > :not(.btn-spinner) {
  transition: opacity 0.18s ease;
}
.is-loading {
  pointer-events: none;
  cursor: progress;
}
.is-loading > :not(.btn-spinner) {
  opacity: 0;
}
.btn-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  border: 2.5px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  animation: btn-spin 0.7s linear infinite;
}
.is-loading > .btn-spinner {
  opacity: 1;
}
@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* a spinner is functional feedback, so slow it down rather than remove it */
  .btn-spinner {
    animation-duration: 1.6s;
  }
}

/* ---------------------------------------------------------------------
   Bottom action dock
--------------------------------------------------------------------- */
.action-dock {
  /* Same recipe as the tab bar / price dock on screen 1: a floating,
     rounded, blurred glass card inset from the screen edges — not a
     full-width strip glued to the bottom. */
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: var(--tabbar-bottom);
  z-index: 40;
  max-width: calc(var(--app-max-width, 100vw) - 24px);
  margin: 0 auto;
  background: var(--glass-bar-bg);
  backdrop-filter: var(--glass-bar-blur);
  -webkit-backdrop-filter: var(--glass-bar-blur);
  border: 1px solid var(--glass-bar-border);
  border-radius: var(--radius-2xl);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: max(0px, env(safe-area-inset-bottom), var(--tg-safe-area-bottom));
}
.action-dock--split {
  flex-direction: row;
}
.action-dock--split .btn-primary,
.action-dock--split .btn-secondary {
  flex: 1;
  width: auto;
}
/* Back is a secondary escape hatch on the confirm+pay screen — most people
   are here to finish, not to leave — so it shrinks to a small icon-only
   button (~20% of the dock) and lets "پرداخت" (~80%) read as the obvious
   next step. */
.action-dock--split .btn-secondary--compact {
  flex: 0 0 auto;
  width: 54px;
  padding: 0;
}

.dock-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-block: 2px;
}
.dock-dots__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--c-surface-container-highest);
}
.dock-dots__dot--active {
  width: 10px;
  height: 10px;
  background: var(--c-primary);
}
.dock-dots__dot--done {
  background: var(--c-primary);
}

/* ---------------------------------------------------------------------
   Skeleton loading placeholder
--------------------------------------------------------------------- */
.skeleton {
  display: inline-block;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--c-surface-container-high) 25%,
    var(--c-surface-container-highest) 37%,
    var(--c-surface-container-high) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}

/* ---------------------------------------------------------------------
   Bottom stack (select screen): the price dock and the tab bar live in ONE
   fixed container and stack with a fixed gap. They used to be two
   independently fixed elements whose offsets were guessed from a magic
   tab-bar height — and only the price dock added the Telegram safe-area
   inset, so on devices reporting one the two drifted ~35px apart.
--------------------------------------------------------------------- */
.bottom-stack {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: var(--tabbar-bottom);
  z-index: 45;
  max-width: calc(var(--app-max-width, 100vw) - 24px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--dock-gap);
  /* the gap between the two bars stays click-through to the content behind */
  pointer-events: none;
}
.bottom-stack > * {
  pointer-events: auto;
}

/* ---------------------------------------------------------------------
   Glass bottom tab bar (mimics Telegram's own native tab bar: translucent,
   blurred, floating over content — only shown on the service-select screen)
--------------------------------------------------------------------- */
.glass-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 6px;
  border-radius: var(--radius-2xl);

  /* The glass effect: translucent surface + blur + hairline border + a
     soft shadow lifting the floating pill off the content behind it.
     Opacity kept low enough that the blur is actually visible (a near-
     opaque background defeats backdrop-filter visually even where the
     WebView supports it) — matches Telegram's own frosted panels. */
  background: var(--glass-bar-bg);
  backdrop-filter: var(--glass-bar-blur);
  -webkit-backdrop-filter: var(--glass-bar-blur);
  border: 1px solid var(--glass-bar-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.glass-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--radius-xl);
  color: var(--c-outline);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.glass-tabbar__item--active {
  color: var(--c-primary-container);
  background: rgba(0, 152, 234, 0.12);
  font-weight: 700;
}
.glass-tabbar__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.glass-tabbar__item--active .glass-tabbar__icon-wrap {
  transform: scale(1.1);
}
.glass-tabbar__icon {
  width: 20px;
  height: 20px;
}
.glass-tabbar__label {
  font: var(--text-label-sm);
  font-weight: 600;
}


/* ---------------------------------------------------------------------
   Screen transition (subtle fade+rise on navigation)
--------------------------------------------------------------------- */
.screen-enter {
  animation: screen-enter-anim 0.22s ease;
}
@keyframes screen-enter-anim {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen-enter {
    animation: none;
  }
}

/* ---------------------------------------------------------------------
   Service hero (icon badge + title + description, top of select screen)
--------------------------------------------------------------------- */
.service-hero {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-top: 4px;
}
.service-hero__badge {
  /* Sized like .tile--lg; the colour/gloss comes from .tile + its type modifier
     (added in select-service.js), so this is no longer a flat white square. */
  --tile-size: 52px;
  --tile-glyph: 28px;
}
.service-hero__title {
  font: var(--text-headline-md);
  color: var(--c-on-surface);
  font-weight: 900;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.service-hero__title-icon {
  width: 16px;
  height: 16px;
  color: #fbbf24;
}
.service-hero__desc {
  font: var(--text-body-sm);
  color: var(--c-on-surface-variant);
  line-height: 1.7;
  margin-top: 2px;
}

/* ---------------------------------------------------------------------
   Gift grid + gift card
--------------------------------------------------------------------- */
.gift-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 16px;
}
/* One muted line above the grid instead of the same tagline repeated inside
   every card. */
.gift-hint {
  margin: 0 0 var(--space-sm);
  text-align: center;
  font: var(--text-label-sm);
  color: var(--c-on-surface-variant);
}
.gift-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* top padding leaves room for the star-price badge in the corner */
  padding: 38px var(--space-sm) var(--space-lg);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--glass-border);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.52) 100%);
  box-shadow: var(--glass-shadow);
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.gift-card--active {
  border: 2px solid rgba(56, 189, 248, 0.8);
  background: rgba(0, 152, 234, 0.1);
  box-shadow: var(--glass-shadow-float), 0 0 0 2px rgba(56, 189, 248, 0.3);
  transform: scale(1.02);
}
/* The gift sits directly on the white card — no circle / tinted plate behind it. */
.gift-card__emoji {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  line-height: 1;
}
.gift-card__name {
  font: var(--text-label-md);
  font-weight: 700;
  color: var(--c-on-surface);
}
/* Star price: gold pill in the top-left corner. */
.gift-card__price {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--radius-full);
  font: var(--text-label-md);
  font-weight: 800;
  line-height: 16px;
  color: #92400e;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid rgba(217, 119, 6, 0.3);
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
}
.gift-card__price-icon {
  width: 14px;
  height: 14px;
  color: #f59e0b;
  flex-shrink: 0;
}
/* "Limited" tag: top-right corner, opposite the price, so it never changes
   a card's height (all cards in a row stay the same). */
.gift-card__tag {
  position: absolute;
  top: 8px;
  right: 8px;
  font: var(--text-label-sm);
  font-weight: 700;
  line-height: 18px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, #e11d48 10%, transparent);
  color: #be123c;
}
.gift-card__emoji-wrap {
  position: relative;
  display: flex;
}
/* Selected-gift tick, pinned to the corner of the emoji. */
.gift-card__check svg {
  width: 13px;
  height: 13px;
}
.gift-card__check {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: var(--radius-full);
  background: var(--c-primary);
  color: var(--c-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------
   Premium plan list
--------------------------------------------------------------------- */
.plan-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.plan-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* <button> centers its text by default; cards must read start-aligned
     (right in RTL) so subtitles sit exactly under the plan title. */
  text-align: start;
  gap: 16px;
  /* Roomy on purpose: this screen has a lot of empty space, so the plan
     boxes get generous VERTICAL padding + a real minimum height instead of
     hugging their content. Horizontal padding stays moderate — the title,
     badge and price share one row and must not be squeezed into wrapping. */
  padding: 26px var(--space-lg);
  min-height: 112px;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.plan-card--featured {
  /* room for the ribbon tab that sits inside the top edge */
  padding-top: calc(26px + 14px);
  min-height: 128px;
  transform: scale(1.015);
  /* Warm gold instead of the app's usual blue: the "پیشنهاد ویژه" badge in
     this card is already blue, and the ribbon needs to read as its own
     thing. (The blue selection border still wins once the card is active.) */
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow:
    0 12px 32px rgba(245, 158, 11, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
/* "Most valuable" tab: sits INSIDE the top edge of the 12-month card, so it
   can never poke out over the neighbouring card's border. Gold gradient
   (dark amber text keeps it readable), deliberately NOT the blue of the
   "پیشنهاد ویژه" badge next to the title. */
.plan-card__ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font: var(--text-label-sm);
  font-weight: 800;
  color: #7c2d12;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 55%, #f59e0b 100%);
  border: 1px solid rgba(217, 119, 6, 0.5);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 2px 14px 3px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}
.plan-card--active {
  border: 2px solid rgba(34, 158, 217, 0.55);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--glass-shadow-float), 0 0 0 2px rgba(34, 158, 217, 0.15);
}
.plan-card--featured.plan-card--active {
  transform: scale(1.02);
}
.plan-card__radio {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: 2px solid var(--c-outline-variant);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}
.plan-card--active .plan-card__radio {
  border-color: var(--c-primary);
  background: var(--c-primary);
}
.plan-card__radio-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--c-on-primary);
}
.plan-card__body {
  flex: 1;
  min-width: 0;
  padding-inline-end: 4px;
  /* title row and subtitle share one start edge (right in RTL) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}
.plan-card__title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}
.plan-card__title {
  font: var(--text-label-lg);
  font-weight: 800;
  color: var(--c-on-surface);
  white-space: nowrap;
}
.plan-card__badge {
  font: var(--text-label-sm);
  font-weight: 800;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
  color: var(--c-primary);
}
.plan-card__discount {
  /* legacy alias — prefer plan-card__badge */
  font: var(--text-label-sm);
  font-weight: 800;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
  color: var(--c-primary);
}
.plan-card__sub {
  display: block;
  text-align: start;
  font: var(--text-label-sm);
  font-size: 12px;
  color: var(--c-secondary);
  font-weight: 500;
  margin-top: 6px;
}
.plan-card__price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.plan-card__price {
  font: var(--text-label-lg);
  font-size: 15px;
  font-weight: 800;
  color: var(--c-on-surface);
  white-space: nowrap;
}
.plan-card__monthly {
  font: var(--text-label-sm);
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Sticky price + CTA footer (used by select screen, sits above tab bar)
--------------------------------------------------------------------- */
.price-dock {
  background: var(--glass-bar-bg);
  backdrop-filter: var(--glass-bar-blur);
  -webkit-backdrop-filter: var(--glass-bar-blur);
  border: 1px solid var(--glass-bar-border);
  border-radius: var(--radius-2xl);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12);
  padding: 12px;
  /* Price on one side, call-to-action on the other (RTL: price on the right). */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.price-dock__info {
  flex: 0 0 auto;
  min-width: 0;
  text-align: start;
}
.price-dock__label {
  display: block;
  font: var(--text-label-sm);
  color: var(--c-on-surface-variant);
  font-weight: 500;
  margin-bottom: 2px;
}
.price-dock__value {
  font: var(--text-headline-sm);
  color: var(--c-on-surface);
  font-weight: 800;
  white-space: nowrap;
  min-height: 26px;
}
.price-dock .btn-primary {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  max-width: 220px;
  height: 48px;
  padding-inline: 12px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Icon helper (inline SVG sizing)
--------------------------------------------------------------------- */
.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
}

/* ---------------------------------------------------------------------
   Feature guide article (under the info note on the پرمیوم / استارز / گیفت tabs).
   Title + first few lines are always visible; a toggle button reveals the
   rest. js/lib/feature-article.js drives the max-height transition; the
   em-based value below is the no-JS-measurement fallback for the same
   4-line height (4 lines x 1.95 line-height = 7.8em).
--------------------------------------------------------------------- */
.feature-article {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* scrollIntoView() (used when closing the article) must clear the fixed header */
  scroll-margin-top: calc(var(--header-height) + var(--tg-safe-area-top) + var(--space-md));
}
.feature-article__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.feature-article__badge {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  font-size: 24px;
  background: var(--fa-badge-bg, linear-gradient(135deg, #a5b4fc 0%, #818cf8 45%, #f0abfc 100%));
  box-shadow:
    0 8px 20px -6px var(--fa-badge-shadow, rgba(99, 102, 241, 0.5)),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.feature-article__head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.feature-article__kicker {
  font: var(--text-label-sm);
  font-weight: 800;
  color: #6366f1;
}
.feature-article__title {
  font: var(--text-headline-sm);
  font-weight: 900;
  line-height: 1.5;
  color: var(--c-on-surface);
}
.feature-article__body {
  position: relative;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.95;
  color: #475569;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-article__body.is-collapsed {
  max-height: 7.8em;
  /* fade the last visible line out instead of chopping it mid-glyph */
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.feature-article__more {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pa-section {
  --pa-tint: var(--c-primary);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px dashed color-mix(in srgb, var(--c-outline) 50%, transparent);
}
.pa-section__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pa-section__sticker {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  font-size: 21px;
  line-height: 1;
  background: color-mix(in srgb, var(--pa-tint) 14%, #ffffff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pa-tint) 24%, transparent) inset;
}
.pa-section__title {
  font: var(--text-label-lg);
  font-weight: 800;
  line-height: 1.6;
  color: var(--c-on-surface);
}
.pa-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pa-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.9);
  /* a coloured edge on the start side, in the section's tint */
  border-inline-start: 3px solid color-mix(in srgb, var(--pa-tint) 55%, transparent);
}
.pa-list__emoji {
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
}
.pa-list__text {
  min-width: 0;
  font-size: 13px;
  line-height: 1.85;
}
.pa-list__text strong {
  font-weight: 800;
  color: var(--c-on-surface);
}
.pa-note {
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  font-size: 12.5px;
  line-height: 1.85;
  color: #78350f;
  background: color-mix(in srgb, #f59e0b 10%, #ffffff);
  border: 1px solid color-mix(in srgb, #f59e0b 28%, transparent);
}
.feature-article__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 46px;
  border-radius: var(--radius-xl);
  font: var(--text-label-lg);
  color: var(--c-primary-container);
  background: color-mix(in srgb, var(--c-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-primary) 22%, transparent);
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.feature-article__toggle:active {
  transform: scale(0.98);
  background: color-mix(in srgb, var(--c-primary) 18%, transparent);
}
.feature-article__toggle:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.feature-article__toggle-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}
.feature-article__toggle[aria-expanded="true"] .feature-article__toggle-icon {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .feature-article__body,
  .feature-article__toggle-icon {
    transition: none;
  }
}

/* "برای خودم می‌خوام" — under the recipient field; fills in the buyer's own
   @username. Pressed/active while the field holds that username. */
.self-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-sm);
  padding: 8px 14px 8px 12px;
  border-radius: var(--radius-full);
  font: var(--text-label-md);
  font-weight: 700;
  color: var(--c-primary-container);
  background: color-mix(in srgb, var(--c-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-primary) 24%, transparent);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.self-btn .icon {
  width: 18px;
  height: 18px;
}
.self-btn:active {
  transform: scale(0.97);
}
.self-btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.self-btn--active {
  color: #ffffff;
  background: var(--c-primary);
  border-color: var(--c-primary);
}


/* ---------------------------------------------------------------------
   Header account menu (avatar + chevron + dropdown)
--------------------------------------------------------------------- */
.app-bar__account {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.acct {
  position: relative;
}
.acct__btn {
  /* 44px touch target (the visible avatar inside is ~36px). */
  min-width: 44px;
  min-height: 44px;
  padding: 0 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* The page is RTL, which would flip the [avatar][chevron] pair. Pin the
     pair's own order so the avatar always sits on the outer screen edge and
     the chevron tucks in beside it, right next to the avatar. */
  direction: ltr;
  border-radius: var(--radius-full);
  color: var(--c-on-surface-variant);
}
.acct__btn:active {
  opacity: 0.75;
}
.acct__btn:focus-visible,
.acct__item:focus-visible,
.terms-link:focus-visible,
.sheet__close:focus-visible,
.order-row:focus-visible {
  outline: 2px solid var(--brand-azure);
  outline-offset: 2px;
}
.acct__chev {
  display: flex;
  transition: transform 0.18s ease;
}
.acct__chev .icon {
  width: 16px;
  height: 16px;
}
.acct__btn[aria-expanded="true"] .acct__chev {
  transform: rotate(180deg);
}

.acct-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  background: var(--c-primary-gradient);
  box-shadow: 0 2px 8px -2px rgba(2, 132, 199, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.95);
  display: block;
  /* the photo is clipped to the circle; the status dot sits OUTSIDE the clip */
}
.acct-avatar__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 800 15px/1 var(--font-family);
  border-radius: 50%;
}
.acct-avatar__img[hidden] {
  display: none;
}
.acct-avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.acct-avatar[data-has-photo="1"] .acct-avatar__img {
  opacity: 1;
}
.acct-avatar[data-has-photo="1"] .acct-avatar__fallback {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .acct__chev { transition: none; }
}

.acct__menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 60;
  min-width: 190px;
  padding: 6px;
  border-radius: var(--radius-xl);
  /* Deliberately a plain, opaque white card — no blur/transparency — so the
     items stay easy to read over whatever is behind it. */
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acct__item {
  min-height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: var(--radius-lg);
  font: var(--text-label-lg);
  font-weight: 600;
  color: var(--c-on-surface);
  text-align: start;
}
.acct__item .icon {
  width: 20px;
  height: 20px;
  color: var(--brand-blue);
  flex-shrink: 0;
}
.acct__item:active,
.acct__item:hover {
  background: rgba(2, 132, 199, 0.08);
}

/* ---------------------------------------------------------------------
   Bottom sheet (terms, orders)
--------------------------------------------------------------------- */
/* The sheet is mounted on <body>, OUTSIDE #app (whose overflow:clip and forced
   z-index:1 on children let the page and its fixed docks paint over / trap
   it). position:fixed pins it to the whole screen above everything. */
.sheet-root {
  position: fixed;
  font-family: var(--font-family);
  color: var(--c-on-surface);
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.sheet-root--open {
  pointer-events: auto;
}
.sheet-backdrop {
  position: absolute;
  inset: 0;
  /* Dark shade + a little blur: everything behind the sheet (page content,
     the blue pay buttons, the bottom docks) drops back so the terms/orders
     text is what you read. Tapping anywhere on this closes the sheet. */
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
  touch-action: none;
}
.sheet-root--open .sheet-backdrop {
  opacity: 1;
}
.sheet {
  /* Floating liquid-glass card, inset from the edges with rounded corners on
     ALL sides (same look as the tab bar / price dock) — not a full-width
     slab attached to the bottom. */
  position: relative;
  width: calc(100% - 24px);
  max-width: 540px;
  max-height: var(--sheet-max-h, 70dvh);
  margin-bottom: max(12px, env(safe-area-inset-bottom), var(--tg-safe-area-bottom));
  display: flex;
  flex-direction: column;
  /* Frosted white, but dense (~94%): still the app's glass look, yet the
     page behind can no longer bleed through and muddy the text. */
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.3);
  transform: translateY(110%);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  outline: none;
  overflow: hidden;
}
.sheet-root--open .sheet {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-backdrop { transition: none; }
}
.sheet__grab {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--c-outline-variant);
  margin: 8px auto 0;
  flex-shrink: 0;
}
.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px 8px 8px;
  flex-shrink: 0;
}
.sheet__title {
  font: var(--text-headline-sm);
  color: var(--c-on-surface);
  padding-inline-start: 8px;
}
.sheet__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--c-on-surface-variant);
}
.sheet__close .icon {
  width: 20px;
  height: 20px;
}
.sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 4px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sheet__footer {
  flex-shrink: 0;
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sheet-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  padding: 24px 0;
}
.sheet-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 8px;
  text-align: center;
}
.sheet-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 132, 199, 0.1);
  color: var(--brand-blue);
}
.sheet-empty__icon--err {
  background: var(--c-error-container);
  color: var(--c-error);
}
.sheet-empty__icon .icon {
  width: 28px;
  height: 28px;
}
.sheet-empty__text {
  font: var(--text-body-md);
  color: var(--c-secondary);
}

/* Terms */
.terms-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.terms-list__item {
  position: relative;
  padding-inline-start: 18px;
  font: var(--text-body-md);
  line-height: 1.9;
  color: var(--c-on-surface);
}
.terms-list__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.85em;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--brand-azure);
}
.terms-link {
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--text-label-lg);
  color: var(--brand-blue);
}
.terms-link .icon {
  width: 18px;
  height: 18px;
}
.terms-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  background: rgba(2, 132, 199, 0.06);
  border: 1px solid rgba(2, 132, 199, 0.18);
  cursor: pointer;
}
.terms-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.terms-check__box {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: 2px solid var(--brand-azure);
  background: #fff;
  color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.terms-check__box .icon {
  width: 16px;
  height: 16px;
}
.terms-check input:checked + .terms-check__box {
  background: var(--c-primary-gradient);
  color: #fff;
  border-color: transparent;
}
.terms-check input:focus-visible + .terms-check__box {
  outline: 2px solid var(--brand-azure);
  outline-offset: 2px;
}
.terms-check__text {
  font: var(--text-label-lg);
  color: var(--c-on-surface);
}
.terms-full__h {
  font: var(--text-label-lg);
  font-weight: 800;
  color: var(--brand-deep);
  margin-top: 10px;
}
.terms-full__p {
  font: var(--text-body-md);
  line-height: 2;
  color: var(--c-on-surface);
  white-space: pre-line;
}

/* Orders list + detail */
.order-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-row {
  width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-align: start;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 14px -8px rgba(31, 38, 135, 0.18);
}
.order-row:active {
  background: rgba(2, 132, 199, 0.06);
}
/* Shared cute "sticker" tile — used by the orders list, the purchase hero,
   the recipient summary and the confirm-order rows, so every icon looks the
   same everywhere. A squircle with a saturated gradient, a white glyph, a
   glossy top highlight and a tiny sparkle. Colour comes from the type
   modifier (stars = gold, premium = violet, gift = pink, default = sky). */
.tile,
.order-row__icon {
  --tile-size: 44px;
  --tile-glyph: 24px;
  width: var(--tile-size);
  height: var(--tile-size);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--tile-size) * 0.34);
  color: #fff;
  background: linear-gradient(140deg, #38bdf8 0%, #0ea5e9 55%, #0284c7 100%);
  box-shadow: 0 6px 12px -6px rgba(2, 132, 199, 0.65), inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(3, 105, 161, 0.25);
  position: relative;
  overflow: hidden;
}
.tile::after,
.order-row__icon::after {
  content: "";
  position: absolute;
  top: calc(var(--tile-size) * 0.11);
  inset-inline-start: calc(var(--tile-size) * 0.14);
  width: calc(var(--tile-size) * 0.2);
  height: calc(var(--tile-size) * 0.11);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: rotate(-28deg);
}
.tile--stars,
.order-row__icon--stars {
  background: linear-gradient(140deg, #fde047 0%, #fbbf24 55%, #f59e0b 100%);
  box-shadow: 0 6px 12px -6px rgba(217, 119, 6, 0.7), inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 0 rgba(180, 83, 9, 0.22);
}
.tile--premium,
.order-row__icon--premium {
  background: linear-gradient(140deg, #c4b5fd 0%, #a78bfa 55%, #8b5cf6 100%);
  box-shadow: 0 6px 12px -6px rgba(109, 40, 217, 0.65), inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(91, 33, 182, 0.22);
}
.tile--gift,
.order-row__icon--gift {
  background: linear-gradient(140deg, #fda4af 0%, #fb7185 55%, #f43f5e 100%);
  box-shadow: 0 6px 12px -6px rgba(225, 29, 72, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(159, 18, 57, 0.2);
}
.tile--sky {
  /* recipient / delivery / generic rows */
  background: linear-gradient(140deg, #38bdf8 0%, #0ea5e9 55%, #0284c7 100%);
}
.tile--mint {
  background: linear-gradient(140deg, #6ee7b7 0%, #34d399 55%, #10b981 100%);
  box-shadow: 0 6px 12px -6px rgba(5, 150, 105, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(4, 120, 87, 0.2);
}
/* A raw gift emoji standing in for the tile's usual SVG glyph (see
   summaryRow's `emoji` param) — sized/centered the same as .icon so it
   drops into the same spot without the row needing any other change. */
.tile__emoji {
  font-size: var(--tile-glyph, 24px);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tile--sm {
  --tile-size: 34px;
  --tile-glyph: 19px;
}
.tile--lg {
  --tile-size: 52px;
  --tile-glyph: 28px;
}
.tile .icon,
.order-row__icon .icon {
  width: var(--tile-glyph);
  height: var(--tile-glyph);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
.order-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.order-row__title {
  font: var(--text-label-lg);
  color: var(--c-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-row__meta {
  display: flex;
  gap: 4px;
  font: var(--text-label-sm);
  color: var(--c-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
}
.order-row__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.order-row__price {
  font: var(--text-label-sm);
  color: var(--c-on-surface-variant);
}
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font: var(--text-label-sm);
  white-space: nowrap;
}
.status-badge--active { color: #b45309; background: rgba(245, 158, 11, 0.14); }
.status-badge--done { color: #047857; background: rgba(16, 185, 129, 0.14); }
.status-badge--failed { color: #b91c1c; background: rgba(239, 68, 68, 0.12); }
.order-detail .card__value {
  text-align: end;
}


/* ---------------------------------------------------------------------
   Confirm-order screen — friendlier, "cute" summary
--------------------------------------------------------------------- */
.confirm-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 0;
}
.confirm-hero .tile {
  --tile-size: 56px;
  --tile-glyph: 30px;
  animation: confirm-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.confirm-hero__title {
  font: var(--text-headline-sm);
  font-weight: 900;
  color: var(--c-on-surface);
}
.confirm-hero__sub {
  font: var(--text-body-sm);
  color: var(--c-on-surface-variant);
}
@keyframes confirm-pop {
  0% { transform: scale(0.6) rotate(-8deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .confirm-hero .tile { animation: none; }
}

.summary-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 14px 12px;
  border-radius: 24px;
}
.summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(2, 132, 199, 0.18);
}
.summary-row:last-child {
  border-bottom: none;
}
.summary-row__label {
  font: var(--text-label-sm);
  color: var(--c-secondary);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
/* The value takes the rest of the line and sits at its far (left) end,
   directly facing the label. */
.summary-row__value {
  flex: 1;
  min-width: 0;
  text-align: start;
  font: var(--text-label-lg);
  font-weight: 800;
  color: var(--c-on-surface);
  /* RTL row: `start` is the right edge, so push the text to the LEFT end. */
  text-align: left;
  overflow-wrap: anywhere;
}
.summary-row__value[dir="ltr"] {
  text-align: right; /* an LTR @username reads naturally, ending at the left edge */
  direction: ltr;
  unicode-bidi: plaintext;
}
/* The recipient as a plain value (no box), pinned to the LEFT edge like the
   other rows' values. The wrapper is forced LTR so "flex-start" means LEFT
   (in the page's RTL flow it meant RIGHT, which is why the card sat on the
   wrong side). Inside, the text lines are RTL/LTR again as they should be. */
.summary-row__value--person {
  display: flex;
  direction: ltr;
  justify-content: flex-start;
  overflow: hidden;
  text-align: left;
}
.summary-row__value--person .recipient-card {
  /* LTR wrapper: avatar first (left), then the name/@username beside it */
  flex-direction: row;
  gap: 8px;
  max-width: 100%;
}
.summary-row__value--person .recipient-card__lines {
  align-items: flex-start;
  text-align: left;
}
.summary-row__value--person .recipient-card__fullname {
  font-weight: 800;
  font-size: 13px;
}
.summary-row--wide {
  padding: 8px 0;
}




/* "Pay with Telegram Stars": a quiet, soft-white glass button (like the other
   secondary buttons) with only a warm hint — amber text + a small gold star
   tile — instead of a big yellow slab, so it doesn't fight the main
   «پرداخت» button for attention. */
.btn-stars {
  background: rgba(255, 255, 255, 0.7);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.28);
  box-shadow: none;
}
.btn-stars .btn-icon {
  width: 18px;
  height: 18px;
  color: #f59e0b;
}
.btn-stars:active {
  background: rgba(254, 243, 199, 0.75);
}


/* Brand value on the delivery row: same weight as the others, with the brand
   colour so it reads as a selling point, not just a spec. */
.summary-row__value--brand {
  color: #059669;
}

/* The total is now a normal row (same width, same sticker, same alignment as
   the rows above), just with a bigger, coloured number. */
.summary-row__value--price {
  font: var(--text-headline-sm);
  font-weight: 900;
  color: #0369a1;
  white-space: nowrap;
}
.summary-row__unit {
  font: var(--text-label-sm);
  font-weight: 700;
  margin-inline-start: 4px;
}
.summary-hint {
  margin: 0;
  padding: 6px 0 4px;
  text-align: left;
  font: var(--text-label-sm);
  color: var(--c-on-surface-variant);
}

/* "No login · automatic · private" strip under the summary. */
.trust-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(209, 250, 229, 0.7) 0%, rgba(236, 253, 245, 0.8) 100%);
  border: 1px solid rgba(52, 211, 153, 0.35);
  margin-bottom: var(--space-md);
}
.trust-strip__text {
  font: var(--text-label-sm);
  line-height: 1.7;
  color: var(--c-on-surface-variant);
}
.trust-strip__text strong {
  display: block;
  font: var(--text-label-lg);
  font-weight: 800;
  color: #047857;
}