/* Printable gift card (2026-10-13) — Views/Shared/GiftCard/_GiftCard.cshtml.
   The card is designed on a 1680 x 792 canvas and sized in container units (1cqw = 1/100 of
   the card width), so the same markup is a thumbnail on the voucher form, a preview in the
   checkout and a full page for printing. Fonts: Cormorant Garamond (titles, names, note,
   amount) + Jost (labels, tagline), loaded by _GiftCardAssets. */

/* Template colours. Declared on the template class too, so a picker swatch
   (<i class="gc--birthday">) can read them outside a card. */
.gc, .gc--gift {
  --gc-bg: #eef0ea; --gc-ink: #2b2f29; --gc-soft: #50574c; --gc-accent: #5a6650;
  --gc-border: #9aa596; --gc-rule: #c9cfc4; --gc-orn: #cfd5c9;
}
.gc {
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 1680 / 792; overflow: hidden;
  background: var(--gc-bg); color: var(--gc-ink);
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  border-radius: 0; text-align: left; line-height: 1.2;
}
.gc--birthday    { --gc-bg: #f7f0e4; --gc-ink: #2b251d; --gc-soft: #4a4136; --gc-accent: #8a6a2c; --gc-border: #b48d4c; --gc-rule: #dccdb3; --gc-orn: #e6d9c0; }
.gc--christmas   { --gc-bg: #1f3a2e; --gc-ink: #f4efe3; --gc-soft: #dcd6c6; --gc-accent: #d2b46b; --gc-border: #c9a85d; --gc-rule: #4b6656; --gc-orn: #3f5c48; }
.gc--mothersday  { --gc-bg: #f6ece8; --gc-ink: #3a2328; --gc-soft: #5b4146; --gc-accent: #9b4d57; --gc-border: #c08d92; --gc-rule: #e2cfcd; --gc-orn: #ead4d3; }
.gc--valentines  { --gc-bg: #4b1c26; --gc-ink: #f8eae3; --gc-soft: #e8d3cb; --gc-accent: #e9bba8; --gc-border: #d7a891; --gc-rule: #6f3a45; --gc-orn: #6b3641; }
.gc--anniversary { --gc-bg: #faf8f3; --gc-ink: #1f2a3c; --gc-soft: #3f4a5c; --gc-accent: #7c6338; --gc-border: #a78b5c; --gc-rule: #e1dbcf; --gc-orn: #e8e2d6; }

.gc-frame { position: absolute; inset: 1.67cqw; border: max(1px, .12cqw) solid var(--gc-border); pointer-events: none; }
.gc-orn { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--gc-orn); }

/* ---- left: logo, title, tagline, note ---- */
.gc-logo {
  position: absolute; left: 6.19cqw; top: 4.76cqw; width: 18.1cqw; height: 6.43cqw;
  display: flex; align-items: center; justify-content: flex-start;
}
/* No text-transform: the studio name is a proper noun — upper-casing it with the card's
   language would turn "Voice" into "VOİCE" on a Turkish card. */
.gc-logo.is-text {
  justify-content: center; border: max(1px, .1cqw) dashed var(--gc-border);
  font-size: 1.45cqw; letter-spacing: .06em; color: var(--gc-soft);
  padding: 0 1cqw; text-align: center; overflow: hidden;
}
.gc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.gc-head { position: absolute; left: 6.19cqw; top: 17.2cqw; width: 55cqw; }
.gc-title {
  margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500;
  font-size: 5.6cqw; line-height: 1.05; color: var(--gc-ink); letter-spacing: -.005em;
}
.gc-tagline { margin: 1cqw 0 0; font-size: 1.68cqw; font-weight: 300; line-height: 1.55; color: var(--gc-soft); max-width: 54cqw; }

.gc-note { position: absolute; left: 6.19cqw; top: 34.3cqw; width: 52cqw; }
.gc-label {
  font-size: 1.3cqw; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--gc-soft);
}
/* At most two lines (user decision 2026-10-15): gift-card.js steps a longer note's size down
   (in cqw, so the fit holds at every card width); the clamp only stops text no reader types.
   A word longer than the line breaks instead of running out of the card. */
.gc-message {
  margin-top: 1.4cqw; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 2.05cqw; line-height: 1.4; color: var(--gc-ink); white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* While gift-card.js measures: the whole note, unclamped. */
.gc-message.gc-measure { display: block; overflow: visible; }

/* ---- divider + right: amount, for/from, code ---- */
.gc-divider { position: absolute; left: 65.45cqw; top: 4.76cqw; bottom: 4.76cqw; border-left: max(1px, .08cqw) dashed var(--gc-border); opacity: .8; }
.gc-right { position: absolute; left: 69.76cqw; right: 6.2cqw; top: 5cqw; bottom: 4.5cqw; display: flex; flex-direction: column; }
.gc-kicker { font-size: 1.45cqw; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gc-accent); }
/* The amount is the card's most important fact: large, bold, lining figures (old-style
   figures made "10" read as the letters "IO"). */
.gc-amount {
  margin-top: 1.2cqw; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: 6.6cqw; line-height: .95; color: var(--gc-ink); font-variant-numeric: lining-nums;
  letter-spacing: -.01em; white-space: nowrap;
}
/* Long amounts ("€ 1.250,50") step down so they stay inside the right column. */
.gc-amount.is-long { font-size: 5.2cqw; }
.gc-amount.is-xlong { font-size: 4.2cqw; }
.gc-valid { margin-top: .7cqw; font-size: 1.1cqw; letter-spacing: .06em; color: var(--gc-soft); min-height: 1.4cqw; }
.gc-field { margin-top: 2.4cqw; }
.gc-field + .gc-field { margin-top: 1.8cqw; }
.gc-name {
  margin-top: .7cqw; padding-bottom: .9cqw; border-bottom: max(1px, .1cqw) solid var(--gc-rule);
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.45cqw; line-height: 1.15; color: var(--gc-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 2.82cqw;
}
.gc-codebox { margin-top: auto; }
.gc-code { margin-top: .7cqw; font-size: 1.85cqw; font-weight: 500; letter-spacing: .12em; color: var(--gc-ink); white-space: nowrap; }

/* Empty value in a preview: the placeholder, greyed. */
.gc .is-placeholder { opacity: .45; }