/* Receipt contact form. Everything is scoped to .receipt-contact.
 * Light: the app theme tokens, with the same values as fallbacks.
 * Dark: body.tg-dark (Telegram) or body.vk-dark (VK) set by the host; the dark
 * palette is spelled out here, so it does not depend on the host stylesheet.
 * data-theme="light|dark" on the form root overrides both. */
.receipt-contact {
  --rc-bg: var(--bg, #FBF9F6);
  --rc-card: var(--card, #F2ECE4);
  --rc-ink: var(--ink, #2B2A28);
  --rc-muted: var(--muted, #6E655C);
  --rc-line: var(--line, #E2D9CE);
  --rc-accent: var(--terra, #8A6F5C);
  --rc-accent-deep: var(--terra-deep, #755C4B);
  --rc-danger: #A6462B;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 36rem;
  min-width: 0;
  margin: 0 auto;
  padding: 18px;
  background: var(--rc-card);
  color: var(--rc-ink);
  border: 1px solid var(--rc-line);
  border-radius: var(--r-md, 16px);
  font: inherit;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
body.tg-dark .receipt-contact,
body.vk-dark .receipt-contact,
body .receipt-contact[data-theme="dark"] {
  --rc-bg: #1C1B18; --rc-card: #2A2924; --rc-ink: #F0EDE8; --rc-muted: #9E9487; --rc-line: #3A3830;
  --rc-accent: #8A6F5C; --rc-accent-deep: #755C4B; --rc-danger: #E7A08A; color-scheme: dark;
}
/* After the dark rule on purpose: an explicit light theme wins over the host dark class. */
body .receipt-contact[data-theme="light"] {
  --rc-bg: #FBF9F6; --rc-card: #F2ECE4; --rc-ink: #2B2A28; --rc-muted: #6E655C; --rc-line: #E2D9CE;
  --rc-accent: #8A6F5C; --rc-accent-deep: #755C4B; --rc-danger: #A6462B; color-scheme: light;
}
/* Where supported, the error colour is derived from the text colour, so it keeps
   its contrast on any host theme, including ones this file does not know about. */
@supports (color: color-mix(in srgb, red, blue)) {
  .receipt-contact,
  body.tg-dark .receipt-contact,
  body.vk-dark .receipt-contact,
  body .receipt-contact[data-theme] { --rc-danger: color-mix(in srgb, #C9603F 62%, var(--rc-ink)); }
}

.receipt-contact form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.receipt-contact p { margin: 0; }

.receipt-contact .receipt-contact-kind { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.receipt-contact legend { width: 100%; padding: 0; margin-bottom: 8px; font-weight: 600; }
.receipt-contact .receipt-contact-kind label { position: relative; flex: 1 1 8rem; min-width: 0; margin: 0; cursor: pointer; }
.receipt-contact .receipt-contact-kind input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.receipt-contact .receipt-contact-kind span {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 8px 14px;
  background: var(--rc-bg); color: var(--rc-ink); border: 1.5px solid var(--rc-line); border-radius: 999px; font-weight: 600;
}
.receipt-contact .receipt-contact-kind input:checked + span { background: var(--rc-accent); color: #fff; border-color: var(--rc-accent); }
.receipt-contact .receipt-contact-kind input:focus-visible + span { outline: 2px solid var(--rc-ink); outline-offset: 2px; }
.receipt-contact .receipt-contact-kind input:disabled + span { opacity: .55; cursor: not-allowed; }

.receipt-contact .receipt-contact-label { display: block; margin: 4px 0 -4px; font-weight: 600; }
.receipt-contact .receipt-contact-input {
  display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 16px; color: var(--rc-ink); background: var(--rc-bg);
  border: 1.5px solid var(--rc-line); border-radius: var(--r-sm, 12px);
}
.receipt-contact .receipt-contact-input::placeholder { color: var(--rc-muted); opacity: 1; }
.receipt-contact .receipt-contact-input:focus-visible { outline: 2px solid var(--rc-accent); outline-offset: 1px; border-color: var(--rc-accent); }
.receipt-contact .receipt-contact-input[aria-invalid="true"] { border-color: var(--rc-danger); }
.receipt-contact .receipt-contact-input:disabled { opacity: .55; cursor: not-allowed; }

.receipt-contact .receipt-contact-hint,
.receipt-contact .receipt-contact-note { font-size: 13px; color: var(--rc-muted); }
.receipt-contact .receipt-contact-error { font-size: 14px; font-weight: 600; color: var(--rc-danger); }
.receipt-contact .receipt-contact-error::before { content: "! "; }
.receipt-contact .receipt-contact-status { font-size: 14px; color: var(--rc-ink); }
.receipt-contact [hidden] { display: none; }

.receipt-contact .receipt-contact-submit {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 48px;
  margin: 4px 0 0; padding: 13px 26px; font: inherit; font-weight: 600; color: #fff; background: var(--rc-accent);
  border: 0; border-radius: 999px; cursor: pointer;
}
.receipt-contact .receipt-contact-submit:hover { background: var(--rc-accent-deep); }
.receipt-contact .receipt-contact-submit:focus-visible { outline: 2px solid var(--rc-ink); outline-offset: 2px; }
.receipt-contact .receipt-contact-submit:disabled { opacity: .55; cursor: not-allowed; }
.receipt-contact[aria-busy="true"] .receipt-contact-submit { cursor: progress; }