/* ------------------------------------------------------------------
   Soft ID — halaman pembayaran QRIS
   Konsep: struk kasir. Tepi berlubang, angka pakai mono, satu warna
   aksen merah yang hanya dipakai untuk bingkai pemindaian.
------------------------------------------------------------------- */

:root {
  --ink:        #131a22;
  --ink-soft:   #5d6874;
  --hairline:   #dfe4e7;
  --paper:      #ffffff;
  --page:       #e7ebee;
  --accent:     #d2262e;
  --paid:       #0e7c5a;
  --pending:    #9a6a00;
  --failed:     #a3231a;

  --shell: 30rem;
  --r: 6px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 2.5rem 1rem 4rem;
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 50% 0%, #f3f6f8 0%, var(--page) 70%);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.wrap {
  display: flex;
  justify-content: center;
}

/* --- kartu struk ------------------------------------------------- */

.receipt {
  width: 100%;
  max-width: var(--shell);
  background: var(--paper);
  padding: 2rem 1.75rem 1.5rem;
  border-radius: var(--r);
  box-shadow:
    0 1px 2px rgba(19, 26, 34, .06),
    0 12px 32px -12px rgba(19, 26, 34, .22);
  position: relative;
}

/* tepi bergerigi atas dan bawah, seperti kertas struk yang disobek */
.receipt::before,
.receipt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  background:
    repeating-linear-gradient(-45deg,
      var(--paper) 0 6px, transparent 6px 12px);
}
.receipt::before { top: -7px; transform: scaleY(-1); }
.receipt::after  { bottom: -7px; }

.receipt__head {
  text-align: center;
}

.eyebrow {
  margin: 0 0 .5rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .688rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.receipt__head h1 {
  margin: 0;
  font-family: Archivo, Inter, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.sub {
  margin: .25rem 0 0;
  font-size: .813rem;
  color: var(--ink-soft);
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* garis perforasi antar blok */
.perf {
  height: 1px;
  margin: 1.5rem -1.75rem;
  background: repeating-linear-gradient(
    to right, var(--hairline) 0 6px, transparent 6px 12px);
  position: relative;
}
.perf::before,
.perf::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--page);
  transform: translateY(-50%);
}
.perf::before { left: -7px; }
.perf::after  { right: -7px; }

/* --- rincian tagihan --------------------------------------------- */

.lines { display: grid; gap: .625rem; }

.line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: .875rem;
}

.line--total {
  margin-top: .375rem;
  padding-top: .75rem;
  border-top: 1px solid var(--hairline);
  font-weight: 600;
}

.amount {
  font-family: Archivo, sans-serif;
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.line--meta { color: var(--ink-soft); font-size: .813rem; }

/* --- zona QR ------------------------------------------------------ */

.qr-zone { text-align: center; }

.qr-frame {
  position: relative;
  display: inline-block;
  padding: 1rem;
  margin-bottom: .875rem;
}

/* bingkai pemindai: empat sudut siku, bukan kotak penuh */
.qr-frame::before,
.qr-frame::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--accent);
}
.qr-frame::before {
  top: 0; left: 0;
  border-right: 0; border-bottom: 0;
}
.qr-frame::after {
  bottom: 0; right: 0;
  border-left: 0; border-top: 0;
}

.qr-frame img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 2px;
}

/* tirai yang menutup QR setelah lunas atau kedaluwarsa */
.qr-veil {
  position: absolute;
  inset: 1rem;
  display: none;
  place-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, .94);
  color: var(--paid);
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: 1.063rem;
  letter-spacing: -.01em;
  text-align: center;
}

[data-status="paid"]   .qr-veil { display: grid; }
[data-status="failed"] .qr-veil { display: grid; color: var(--failed); }

/* --- Snap tertanam -------------------------------------------------
   Snap dirender di dalam iframe milik Midtrans, jadi kartu putih dan
   sudut membulat di dalamnya tidak bisa kita ubah. Yang kita lakukan:
   melebarkan iframe sampai tepi kartu supaya tidak terlihat sebagai
   kotak di dalam kotak, dan mematikan elemen kita yang dobel dengan
   milik Snap (petunjuk scan dan hitung mundur).
------------------------------------------------------------------- */

.snap-slot {
  margin: -.5rem -1.75rem 0;   /* menembus padding kartu */
  min-height: 300px;
  background: transparent;
}

.snap-slot iframe {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 300px;
  margin: 0 auto;
  border: 0 !important;
  background: transparent !important;
  color-scheme: light;
}

.snap-loading {
  margin: 0;
  padding: 4rem 1rem;
  text-align: center;
  font-size: .875rem;
  color: var(--ink-soft);
}
.snap-loading a { color: var(--ink); }

/* Snap sudah punya petunjuk dan hitung mundurnya sendiri */
.qr-zone:has(.snap-slot) .scan-hint,
.qr-zone:has(.snap-slot) .countdown { display: none; }

/* Rapatkan jarak ke pembatas di bawahnya */
.qr-zone:has(.snap-slot) { margin-bottom: -.75rem; }

.scan-hint {
  margin: 0 auto;
  max-width: 22rem;
  font-size: .813rem;
  color: var(--ink-soft);
}

.countdown {
  margin: .75rem 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .813rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.countdown.is-expired { color: var(--failed); }

/* --- status ------------------------------------------------------- */

.status-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem;
  border-radius: var(--r);
  background: #f4f6f7;
  font-size: .875rem;
  font-weight: 500;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.status-bar--pending { color: var(--pending); }
.status-bar--paid    { color: var(--paid);    background: #e8f5ef; }
.status-bar--failed  { color: var(--failed);  background: #fdecea; }

.status-bar--pending .dot { animation: pulse 1.6s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

/* --- formulir ------------------------------------------------------ */

.form { display: grid; gap: 1rem; }

.field { display: grid; gap: .375rem; }

.field > span {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field input {
  width: 100%;
  padding: .625rem .75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: #fbfcfc;
  color: var(--ink);
  font: inherit;
}

.field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: var(--paper);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr .5fr;
  gap: .75rem;
}

.btn {
  margin-top: .25rem;
  padding: .813rem 1rem;
  border: 0;
  border-radius: var(--r);
  background: var(--ink);
  color: #fff;
  font-family: Archivo, sans-serif;
  font-size: .938rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s ease;
}
.btn:hover  { background: #29323d; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.note {
  margin: .875rem 0 0;
  text-align: center;
  font-size: .75rem;
  color: var(--ink-soft);
}
.note a { color: var(--ink); }

.alert {
  margin: 0 0 1.25rem;
  padding: .75rem .875rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  background: #fdecea;
  font-size: .813rem;
  color: var(--failed);
}

/* --- layar kecil ---------------------------------------------------- */

@media (max-width: 30rem) {
  body { padding: 1.25rem .75rem 3rem; }
  .receipt { padding: 1.5rem 1.25rem 1.25rem; }
  .perf { margin-inline: -1.25rem; }
  .snap-slot { margin-inline: -1.25rem; }
  .amount { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}