/* Gift cards: the buy page and the certificate. Built on legal.css (the
   felt, the gold, Cinzel and Mulish). The certificate is drawn in units of
   its own width (cqw), so the preview and the printed page match. */

main.wide { max-width: 68rem; }

.lead { font-size: 1.15rem; color: var(--cream); margin: 0 0 24px; max-width: 40rem; }

.shop { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .shop { grid-template-columns: 1fr; } .shop .preview { order: -1; } }

.order { display: grid; gap: 20px; }
.order h2 { margin: 0 0 4px; }
.order .help { color: var(--muted); font-size: .9rem; margin: 0 0 8px; }
.order label { display: grid; gap: 4px; font-weight: 700; font-size: .9rem; }
.order input, .order textarea {
  font: 15px var(--body); background: var(--felt-deep); color: var(--cream);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; width: 100%; min-width: 0;
}
.order textarea { resize: vertical; min-height: 4.5rem; }
.order input:focus-visible, .order textarea:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 1px; }
.names { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .names { grid-template-columns: 1fr; } }

.papers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .papers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.papers button {
  position: relative; aspect-ratio: 16 / 10; border-radius: 10px; cursor: pointer; padding: 0;
  border: 2px solid var(--line); background: var(--felt-deep) center / cover no-repeat;
  display: flex; align-items: flex-end;
}
.papers button span {
  width: 100%; font: 700 .72rem var(--body); color: var(--cream); padding: 3px 6px; text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75)); border-radius: 0 0 8px 8px;
}
.papers button[aria-pressed="true"] { border-color: var(--gold-hi); box-shadow: 0 0 0 2px var(--gold-hi); }
.papers button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

.pay { display: grid; gap: 6px; }
.pay .price { font: 700 1.6rem var(--display); color: var(--gold-hi); margin: 0; font-variant-numeric: tabular-nums; }
.pay .note, .pay .error { font-size: .85rem; margin: 0; }
.pay .note { color: var(--muted); }
.pay .error { color: #ff9a92; min-height: 1.2em; }
.button {
  font: 700 1.05rem var(--body); border-radius: 12px; padding: 12px 22px; cursor: pointer; text-align: center;
  border: 1px solid var(--gold); background: var(--gold); color: var(--felt-deep); text-decoration: none; display: inline-block;
}
.button.ghost { background: transparent; color: var(--gold-hi); }
.button:disabled { opacity: .6; cursor: wait; }
.button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

.preview { position: sticky; top: 16px; display: grid; gap: 10px; }
.preview .label { font: 700 .75rem var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0; }
.received { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--muted); font-size: .95rem; }

.more { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 36px; }
@media (max-width: 760px) { .more { grid-template-columns: 1fr; } }
.more ol { padding-left: 1.3rem; }
.terms { color: var(--muted); font-size: .85rem; margin-top: 28px; max-width: 46rem; }

/* ---- The certificate: a present ---- */
.present {
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 1.414; overflow: hidden;
  border-radius: 1.6cqw; box-shadow: 0 1.4cqw 4cqw rgba(0, 0, 0, .55);
  background: #0f3b2c;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.present .paper {
  position: absolute; inset: 0; background: var(--art) center / cover no-repeat;
}
/* A soft sheen, like wrapping paper catching the light. */
.present .paper::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, .16), transparent 35%, transparent 65%, rgba(0, 0, 0, .25));
}
.present .ribbon { position: absolute; box-shadow: 0 0 1.2cqw rgba(0, 0, 0, .45); }
.present .ribbon.v {
  top: 0; bottom: 0; left: 17cqw; width: 6cqw;
  background: linear-gradient(90deg, #7a4e0e, #d9a441 18%, #fff0c2 46%, #f3c969 60%, #b07d24 86%, #7a4e0e);
}
.present .ribbon.h {
  left: 0; right: 0; top: 18cqw; height: 6cqw;
  background: linear-gradient(180deg, #7a4e0e, #d9a441 18%, #fff0c2 46%, #f3c969 60%, #b07d24 86%, #7a4e0e);
}
.present .bow {
  position: absolute; width: 22cqw; left: 9cqw; top: 9.5cqw;
  filter: drop-shadow(0 .6cqw .8cqw rgba(0, 0, 0, .5));
}
.present .tag {
  position: absolute; top: 5cqw; bottom: 5cqw; right: 4.5cqw; width: 54cqw;
  background: #fbf6ea; color: #1b2a20; border-radius: 2cqw; padding: 3.2cqw 3.6cqw;
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .5), inset 0 0 0 .8cqw #fbf6ea, inset 0 0 0 1cqw #d9a441, inset 0 0 0 1.25cqw #fbf6ea, inset 0 0 0 1.4cqw #b07d24;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5cqw;
}
.present .tag p { margin: 0; }
.present .logo { width: 7cqw; height: 7cqw; border-radius: 1.2cqw; }
.present .kicker { font: 700 1.7cqw var(--body); letter-spacing: .3em; text-transform: uppercase; color: #8a6a2a; margin-top: .6cqw !important; }
.present .to { font: 700 5.4cqw/1.1 var(--display); color: #0f3b2c; text-wrap: balance; overflow-wrap: anywhere; }
.present .what { font: 700 2.6cqw var(--display); color: #a8741e; }
.present .from { font: italic 1.9cqw var(--body); color: #3d4a40; }
.present .msg { font: italic 1.9cqw/1.35 var(--body); color: #1b2a20; max-width: 44cqw; overflow-wrap: anywhere; flex: 1; display: flex; align-items: center; }
.present .claim { display: flex; align-items: center; gap: 2cqw; margin-top: .6cqw; }
.present .code {
  display: grid; gap: .3cqw; padding: 1cqw 2cqw; border: .25cqw dashed #b07d24; border-radius: 1.2cqw; background: #fff;
}
.present .code .label { font: 700 1.2cqw var(--body); letter-spacing: .2em; text-transform: uppercase; color: #8a6a2a; }
.present .code b { font: 700 2.9cqw ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .12em; color: #0f3b2c; }
.present .qr { width: 9cqw; height: 9cqw; }
.present .qr svg { width: 100%; height: 100%; display: block; }
.present .how { font: 1.35cqw var(--body); color: #5b665d; }

/* ---- The certificate page ---- */
.sheet { display: grid; gap: 16px; margin-top: 12px; }
.sheet .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sheet .status { color: var(--muted); margin: 0; }

@media print {
  @page { size: A4 landscape; margin: 8mm; }
  html, body { background: #fff !important; }
  body { padding: 0; }
  header, .no-print, h1, .status, .actions { display: none !important; }
  main { max-width: none; }
  .sheet { margin: 0; gap: 0; }
  /* One sheet: as wide as the page allows without running onto a second. */
  .present {
    width: min(100%, calc((100vh - 4mm) * 1.414)); margin: 0 auto;
    box-shadow: none; border-radius: 0; break-inside: avoid;
  }
}