/* css/receipt.css — физический receipt (ТЗ §9.2, этап 4). */

/* Контейнер на финальном экране: перспектива для лёгкого наклона бумаги */
.result__receipt-mount {
  perspective: 1200px;
}

/*
 * Внешний блок анимации (ТЗ §9.2: выезд / thermal ощущение).
 * Тень — drop-shadow, чтобы не обрезалась clip-path у внутренней бумаги.
 */
.receipt {
  --receipt-ink: #080807;
  --receipt-paper: #ebe4d6;
  --receipt-paper-side: #d4cdbf;
  --receipt-accent-soft: rgba(140, 38, 234, 0.12);
  --receipt-accent-mid: rgba(92, 16, 168, 0.28);
  --receipt-accent-ink: rgba(42, 18, 62, 0.88);

  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 432px;
  margin-inline: auto;
  transform-style: preserve-3d;
  /* Одна аккуратная тень вместо тройной дымки — чтобы тень была «понятной». */
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.45));
}

/* Бумага: слегка серая, рваный низ, лёгкий наклон */
.receipt__paper {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  overflow: hidden;

  color: var(--receipt-ink);
  background-color: var(--receipt-paper);
  background-image:
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.52) 0%,
      rgba(255, 255, 255, 0) 42%,
      rgba(0, 0, 0, 0.04) 100%
    ),
    linear-gradient(180deg, #f7f2e9 0%, #efe9dc 100%);

  border-radius: 3px 3px 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 245, 0.72),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);

  transform: rotate(-1.15deg) rotateY(-5deg);
  transform-origin: 50% 0%;

  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - 14px),
    98.5% 100%,
    97% calc(100% - 10px),
    95.5% 100%,
    94% calc(100% - 11px),
    92.5% 100%,
    91% calc(100% - 9px),
    89.5% 100%,
    88% calc(100% - 12px),
    86.5% 100%,
    85% calc(100% - 10px),
    83.5% 100%,
    82% calc(100% - 11px),
    80.5% 100%,
    79% calc(100% - 9px),
    77.5% 100%,
    76% calc(100% - 12px),
    74.5% 100%,
    73% calc(100% - 10px),
    71.5% 100%,
    70% calc(100% - 11px),
    68.5% 100%,
    67% calc(100% - 9px),
    65.5% 100%,
    64% calc(100% - 12px),
    62.5% 100%,
    61% calc(100% - 10px),
    59.5% 100%,
    58% calc(100% - 11px),
    56.5% 100%,
    55% calc(100% - 9px),
    53.5% 100%,
    52% calc(100% - 12px),
    50.5% 100%,
    49% calc(100% - 10px),
    47.5% 100%,
    46% calc(100% - 11px),
    44.5% 100%,
    43% calc(100% - 9px),
    41.5% 100%,
    40% calc(100% - 12px),
    38.5% 100%,
    37% calc(100% - 10px),
    35.5% 100%,
    34% calc(100% - 11px),
    32.5% 100%,
    31% calc(100% - 9px),
    29.5% 100%,
    28% calc(100% - 12px),
    26.5% 100%,
    25% calc(100% - 10px),
    23.5% 100%,
    22% calc(100% - 11px),
    20.5% 100%,
    19% calc(100% - 9px),
    17.5% 100%,
    16% calc(100% - 12px),
    14.5% 100%,
    13% calc(100% - 10px),
    11.5% 100%,
    10% calc(100% - 11px),
    8.5% 100%,
    7% calc(100% - 9px),
    5.5% 100%,
    4% calc(100% - 12px),
    2.5% 100%,
    1% calc(100% - 10px),
    0% calc(100% - 14px)
  );
}

/* Волокна / шум бумаги */
.receipt__texture {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.03) 0 1px,
      transparent 1px 7px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.025) 0 1px,
      transparent 1px 9px
    );
}

.receipt__noise {
  pointer-events: none;
  position: absolute;
  inset: -18%;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image: radial-gradient(
      circle at 18% 22%,
      rgba(0, 0, 0, 0.55) 0 1px,
      transparent 2px 100%
    ),
    radial-gradient(circle at 72% 41%, rgba(0, 0, 0, 0.45) 0 1px, transparent 2px 100%),
    radial-gradient(circle at 44% 76%, rgba(0, 0, 0, 0.45) 0 1px, transparent 2px 100%),
    radial-gradient(circle at 88% 83%, rgba(0, 0, 0, 0.35) 0 1px, transparent 2px 100%);
  background-size: 7px 9px, 9px 8px, 8px 11px, 10px 10px;
}

.receipt__folds {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background:
    linear-gradient(115deg, transparent 44%, rgba(0, 0, 0, 0.06) 50%, transparent 56%),
    linear-gradient(-18deg, transparent 58%, rgba(0, 0, 0, 0.045) 63%, transparent 70%);
}

/* Лёгкая «термолента» */
.receipt__thermal {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.14;
  mix-blend-mode: multiply;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.09) 0 1px,
    transparent 1px 3px
  );
}

.receipt__body {
  position: relative;
  z-index: 1;
  padding: var(--space-6) var(--space-5) calc(var(--space-7) + 8px);
  font-family: var(--font-receipt);
  font-size: 1.18rem;
  line-height: 1.32;
  letter-spacing: 0.02em;
  text-rendering: geometricPrecision;
}

/* Перфорация как у отрывной ленты */
.receipt__tear-notch {
  height: 7px;
  margin: calc(-1 * var(--space-6) + var(--space-2)) calc(-1 * var(--space-5)) var(--space-4);
  pointer-events: none;
  opacity: 0.85;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 5px,
    rgba(12, 10, 8, 0.22) 5px 6px,
    transparent 6px 11px
  );
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-size: 100% 100%;
}

.receipt__rule {
  margin: 0;
  text-align: center;
  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: rgba(8, 8, 7, 0.72);
}

.receipt__rule--spaced {
  margin-top: var(--space-4);
}

.receipt__title-block {
  padding: var(--space-3) 0 var(--space-4);
  text-align: center;
  border-bottom: 1px dashed rgba(22, 21, 16, 0.22);
}

.receipt__title,
.receipt__subtitle {
  margin: 0;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--receipt-ink);
}

.receipt__title {
  font-size: clamp(1.05rem, 3vw, 1.2rem);
  text-shadow: 0 1px 0 rgba(255, 252, 245, 0.65);
}

.receipt__subtitle {
  margin-top: var(--space-3);
  font-size: 0.98rem;
  letter-spacing: 0.1em;
  color: var(--receipt-accent-ink);
}

.receipt__issued {
  margin: var(--space-4) 0 0;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(8, 8, 7, 0.58);
}

.receipt__issued time {
  letter-spacing: 0.08em;
  color: rgba(8, 8, 7, 0.82);
}

.receipt__heading {
  margin: var(--space-4) 0 var(--space-2);
  padding-left: var(--space-3);
  border-left: 3px solid var(--receipt-accent-mid);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--receipt-ink);
}

.receipt__heading--spaced {
  margin-top: var(--space-5);
}

.receipt__bullet {
  margin: 0 0 var(--space-2);
  padding-left: 1.15em;
  text-indent: -1.15em;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--receipt-ink);
  hyphens: auto;
}

.receipt__priority {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-3);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--receipt-accent-ink);
  border: 1px dashed rgba(92, 16, 168, 0.35);
  background: linear-gradient(
    180deg,
    rgba(140, 38, 234, 0.06) 0%,
    rgba(255, 252, 245, 0.35) 100%
  );
}

.receipt__footer {
  margin-top: var(--space-4);
  text-align: center;
}

.receipt__stamp {
  display: inline-block;
  padding: var(--space-4) var(--space-5);
  margin-inline: auto;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  border: 2px double rgba(22, 21, 16, 0.42);
  background:
    radial-gradient(
      ellipse 120% 80% at 50% 20%,
      rgba(140, 38, 234, 0.07),
      transparent 62%
    ),
    rgba(255, 252, 245, 0.55);
  transform: rotate(-1.2deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    2px 3px 0 rgba(12, 10, 8, 0.08);
}

.receipt__stamp-line {
  margin: 0;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--receipt-ink);
  letter-spacing: 0.06em;
}

.receipt__stamp-line + .receipt__stamp-line {
  margin-top: var(--space-2);
}

.receipt__stamp-line--status {
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.receipt__stamp-line--meta {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(8, 8, 7, 0.72);
}

.receipt__barcode {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px dashed rgba(22, 21, 16, 0.28);
}

.receipt__barcode-strip {
  position: relative;
  height: 56px;
  border-radius: 2px;
  opacity: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.06);
  /* Повторяющийся штрихкод (корректный tile для любой ширины) */
  background-image: repeating-linear-gradient(
    90deg,
    #050504 0 3px,
    #f2ebe0 3px 4px,
    #050504 4px 8px,
    #f2ebe0 8px 9px,
    #050504 9px 11px,
    #f2ebe0 11px 12px,
    #050504 12px 16px,
    #f2ebe0 16px 17px,
    #050504 17px 20px,
    #f2ebe0 20px 21px,
    #050504 21px 23px,
    #f2ebe0 23px 24px
  );
  filter: contrast(1.22) saturate(0.55);
}

.receipt__barcode-strip::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.06) 0 1px,
    transparent 1px 3px
  );
}

.receipt__barcode-digits {
  margin: var(--space-3) 0 0;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-align: center;
  color: rgba(8, 8, 7, 0.85);
}

/* Появление чека (ТЗ §9.2: из принтера). Уважается prefers-reduced-motion ниже. */
@keyframes receipt-print-in {
  0% {
    transform: translate3d(0, 58%, 0) scale(0.97);
    opacity: 0.04;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.12));
  }
  55% {
    opacity: 0.92;
    filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.38))
      drop-shadow(0 4px 10px rgba(0, 0, 0, 0.22));
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    filter: drop-shadow(0 32px 52px rgba(0, 0, 0, 0.62))
      drop-shadow(0 12px 24px rgba(0, 0, 0, 0.34))
      drop-shadow(0 0 20px rgba(140, 38, 234, 0.14));
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.receipt-motion-gsap) .screen--result.is-active #pt-receipt {
    animation: receipt-print-in 1.05s cubic-bezier(0.16, 0.88, 0.24, 1) both;
  }
}

html.receipt-motion-gsap .screen--result.is-active #pt-receipt {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .receipt__paper {
    transform: rotate(-1deg);
  }

  .receipt__stamp {
    transform: none;
  }
}

@media (max-width: 480px) {
  .receipt__body {
    padding: var(--space-5) var(--space-4) calc(var(--space-6) + 10px);
    font-size: 1rem;
  }

  .receipt__tear-notch {
    margin: calc(-1 * var(--space-5) + var(--space-2)) calc(-1 * var(--space-4)) var(--space-3);
  }

  .receipt__stamp {
    padding: var(--space-3) var(--space-4);
    transform: rotate(-0.85deg);
  }

  .receipt__paper {
    transform: rotate(-0.75deg) rotateY(-3deg);
  }
}

/* ----- Печать: только акт (удобно из финала, Ctrl+P). ----- */
@media print {
  @page {
    margin: 14mm 12mm;
  }

  html {
    background: #fff !important;
  }

  body {
    background: #fff !important;
    color: #121212 !important;
  }

  .skip-link,
  .background-layer,
  .decor-layer,
  .crt-stack,
  #share-toast {
    display: none !important;
  }

  .app-shell {
    padding: 0 !important;
    min-height: auto !important;
  }

  .app__topbar,
  .app__footer,
  .taymi-layer,
  .result-actions {
    display: none !important;
  }

  .main-with-taymi {
    display: block !important;
    gap: 0 !important;
  }

  #screens .screen {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  #screens #screen-result {
    display: block !important;
  }

  #screens #screen-result[hidden] {
    display: block !important;
  }

  .result__receipt-mount {
    perspective: none !important;
    padding-block: 0 !important;
  }

  .receipt {
    max-width: none !important;
    filter: none !important;
  }

  .receipt__paper {
    transform: none !important;
    clip-path: none !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    border: 1px solid #bfbaa8 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .receipt__texture,
  .receipt__noise,
  .receipt__folds,
  .receipt__thermal {
    opacity: 0.15 !important;
  }

  .receipt__stamp {
    transform: none !important;
  }

  .receipt__barcode-strip {
    filter: contrast(1.15) saturate(0.45) !important;
  }
}

/* ===== Экспортная брендовая карточка для соцсетей (PNG) ===== */
.receipt-export-card {
  position: fixed;
  left: -10000px;
  top: 0;
  z-index: -1;
  box-sizing: border-box;
  width: 480px;
  padding: 36px 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(140, 38, 234, 0.32), transparent 70%),
    linear-gradient(180deg, #1b1838 0%, #14122a 60%, #0d0b1c 100%);
  border: 2px solid rgba(140, 38, 234, 0.5);
  border-radius: 18px;
}

.receipt-export__header {
  font-family: var(--font-display, "Press Start 2P", monospace);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #f4f3ff;
  text-shadow: 0 0 14px rgba(140, 38, 234, 0.6);
}

/* Чек внутри карточки — ровный, без наклона и дымки, одна чистая тень. */
.receipt-export .receipt {
  max-width: 360px;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.4));
}

.receipt-export .receipt__paper {
  transform: none;
  clip-path: none;
  border-radius: 4px;
}

.receipt-export__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.receipt-export__cta {
  font-family: var(--font-body, "VT323", monospace);
  font-size: 19px;
  font-weight: 700;
  color: #5fff8f;
  text-shadow: 0 0 12px rgba(95, 255, 143, 0.45);
}

.receipt-export__url {
  font-family: var(--font-display, "Press Start 2P", monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #18d8f0;
}