/* public/assets/css/giftcard.css
 *
 * Gift card styles. Used by:
 *   - /giftcard/index.php          (buyer preview)
 *   - /giftcard-view/index.php     (recipient inspection)
 *   - /giftcard-check/index.php    (after lookup, optional)
 *   - /admin/gift_card_view.php    (admin preview)
 *
 * One stylesheet, three display modes:
 *   - Embedded    (small, inside other UI like a list)
 *   - Standalone  (fills phone width when /giftcard-view/ is loaded directly)
 *   - Scan        (light + huge QR, after tapping "Show to staff")
 * Plus a print stylesheet that inverts to cream + dark for ink-friendly A4.
 */

/* ============================================================
   Base card structure (portrait, ~5:7 from its content; all themes use this)
   ============================================================ */

.gc-card {
  --gc-bg:     #1a1612;
  --gc-fg:     #f5ede0;
  --gc-accent: #d4a762;
  --gc-muted:  #cbbca6;   /* muted tones lightened 2026-10-04 for legibility; mirror gc_design_tokens() */
  --gc-msg-bg: rgba(212,167,98,0.08);
  --gc-msg-fg: #e8dcc5;

  width: 100%;
  max-width: 380px;
  /* No aspect-ratio (was 5/7): together with overflow:clip it fixed the
     height in Chrome and cut off the footer's last line (website) once the
     design icon made the content taller (found 2026-10-09, in every view).
     The content sets the height; it's ~5:7 anyway (~500 px without a
     message, ~630 with). Admin sets its own minimum (manage_gift_cards.php). */
  margin: 0 auto;
  background: var(--gc-bg);
  /* A soft glow of the design's accent at the top, fading into the dark card.
     Browsers without color-mix() ignore this line and keep the plain bg above. */
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--gc-accent) 28%, var(--gc-bg)) 0%, var(--gc-bg) 60%);
  color: var(--gc-fg);
  border-radius: 14px;
  border: 2px solid var(--gc-accent);   /* framed in the design's colour */
  /* clip, NOT hidden: clips the motif and corners without making the card a
     scroll container. */
  overflow: clip;
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: background 0.3s ease, color 0.3s ease;
}

.gc-card__motif {
  position: absolute;
  top: -24px;
  right: -24px;
  width: 170px;
  height: 170px;
  opacity: 0.35;   /* was 0.07: barely visible */
  pointer-events: none;
}

.gc-card__header {
  padding: 22px 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-bottom: 0.5px solid rgba(255,255,255,0.12);
  position: relative;
}

.gc-card__logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gc-accent);
  color: var(--gc-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 500;
}

/* Restaurant logo image (public/assets/logos/{slug}.png) instead of the
   lettered circle: no accent fill, kept round, whole logo visible. */
.gc-card__logo--img {
  width: 64px;
  height: 64px;
  background: none;
  object-fit: contain;
}

.gc-card__restaurant { text-align: center; }
.gc-card__name      { font-size: 16.5px; font-weight: 500; color: var(--gc-fg); }   /* ~10% larger than 15px */
/* Small card lines set to 12pt (16px) on 2026-10-04 (were 9–11px) — illegible on phones.
   The city line matches the restaurant name above it (size, colour, weight). */
.gc-card__tagline   { font-size: 15px; font-weight: 500; color: var(--gc-fg); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; }

/* Tighter gap between header (city) and occasion line: was 16px + 24px. */
.gc-card__amount-block { padding: 12px 20px 0; text-align: center; position: relative; }
/* The design's icon (gc_design_tokens()['icon']) above the occasion line. */
.gc-card__icon         { display: block; font-size: 40px; line-height: 1; margin: 4px 0 6px; }
.gc-card__occasion     { font-size: 16px; font-weight: 700; color: var(--gc-accent); letter-spacing: 0.12em; text-transform: uppercase; }
/* Second language under the occasion (e.g. Japanese, restaurants.giftcard_second_lang):
   same accent, no capitals or letter-spacing (they don't apply to Japanese). */
.gc-card__occasion-2   { font-size: 15px; font-weight: 600; color: var(--gc-accent); margin-top: 3px; }
.gc-card__occasion-2:empty { display: none; }
.gc-card__amount {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 52px;
  font-weight: 400;
  color: var(--gc-fg);
  line-height: 1;
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.gc-card__balance-note { font-size: 16px; color: var(--gc-muted); margin-top: 6px; }   /* also guests / subtitle / value lines */

.gc-card__message {
  margin: 20px 20px 0;
  padding: 14px 16px;
  background: var(--gc-msg-bg);
  border-radius: 8px;
  text-align: left;
  position: relative;
}
.gc-card__for { font-size: 16px; color: var(--gc-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.gc-card__msg-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  color: var(--gc-msg-fg);
  line-height: 1.55;
  font-style: italic;
}
.gc-card__from { font-size: 16px; color: var(--gc-muted); margin-top: 6px; text-align: right; }

.gc-card__footer {
  margin-top: auto;
  padding: 18px 20px 20px;
  border-top: 0.5px solid rgba(255,255,255,0.12);
  position: relative;
}
.gc-card__qr-wrap     { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gc-card__qr          { background: #f5ede0; padding: 6px; border-radius: 4px; line-height: 0; }
.gc-card__qr canvas,
.gc-card__qr img      { display: block; width: 84px; height: 84px; }
.gc-card__code        { text-align: center; }
.gc-card__code-value  { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; color: var(--gc-fg); letter-spacing: 0.05em; font-weight: 500; }
.gc-card__redeem-hint { font-size: 12px;   /* small enough that "Enter the code when booking…" fits on one line */ color: var(--gc-muted); margin-top: 5px; line-height: 1.5; }

/* Status banner overlay */
.gc-card[data-status="hold"]::after,
.gc-card[data-status="reserved"]::after,
.gc-card[data-status="redeemed"]::after,
.gc-card[data-status="void"]::after,
.gc-card[data-status="expired"]::after {
  content: attr(data-status-label);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-size: 28px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 8px 24px;
  border: 2px solid currentColor;
  border-radius: 4px;
  opacity: 0.6;
  pointer-events: none;
}
.gc-card[data-status="hold"]::after     { color: #f5c97a; }
.gc-card[data-status="reserved"]::after { color: #f5c97a; }
.gc-card[data-status="redeemed"]::after { color: #888; }
.gc-card[data-status="void"]::after,
.gc-card[data-status="expired"]::after  { color: #f56767; }

/* ============================================================
   Design themes
   ============================================================ */

.gc-design-default     { --gc-bg: #1a1612; --gc-fg: #f5ede0; --gc-accent: #d4a762; --gc-muted: #cbbca6; --gc-msg-bg: rgba(212,167,98,0.08); --gc-msg-fg: #e8dcc5; }
.gc-design-celebration { --gc-bg: #1a0f0c; --gc-fg: #fae8d8; --gc-accent: #e89060; --gc-muted: #d8bba4; --gc-msg-bg: rgba(232,144,96,0.10); --gc-msg-fg: #fae8d8; }
.gc-design-thanks      { --gc-bg: #1a201a; --gc-fg: #e8ecdc; --gc-accent: #a8b878; --gc-muted: #b3b99f; --gc-msg-bg: rgba(168,184,120,0.10); --gc-msg-fg: #e8ecdc; }
.gc-design-xmas        { --gc-bg: #0d2818; --gc-fg: #f0e6d2; --gc-accent: #c8412c; --gc-muted: #b0cbbd; --gc-msg-bg: rgba(200,65,44,0.10); --gc-msg-fg: #f0e6d2; }
/* 2026-10-15 — keep in sync with gc_design_tokens() in src/GiftCard.php */
.gc-design-just_because { --gc-bg: #1c0f17; --gc-fg: #f6e4ec; --gc-accent: #d97a9b; --gc-muted: #d3b5c3; --gc-msg-bg: rgba(217,122,155,0.10); --gc-msg-fg: #f6e4ec; }
.gc-design-anniversary  { --gc-bg: #1d0c10; --gc-fg: #f6e7da; --gc-accent: #c9a24d; --gc-muted: #d6bfa9; --gc-msg-bg: rgba(201,162,77,0.10); --gc-msg-fg: #f6e7da; }
.gc-design-seasons      { --gc-bg: #121a24; --gc-fg: #e6eef5; --gc-accent: #a9c4dc; --gc-muted: #b7c6d4; --gc-msg-bg: rgba(169,196,220,0.10); --gc-msg-fg: #e6eef5; }
.gc-design-newyear      { --gc-bg: #111111; --gc-fg: #f4ead8; --gc-accent: #d4af37; --gc-muted: #c9bfae; --gc-msg-bg: rgba(212,175,55,0.10); --gc-msg-fg: #f4ead8; }

/* ============================================================
   Standalone recipient page (/giftcard-view/)
   ============================================================ */

.gc-page {
  margin: 0; padding: 0;
  background: #0a0807;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #888;
}
.gc-page .gc-card { max-width: 420px; }
@media (max-width: 480px) {
  .gc-page .gc-card { width: calc(100vw - 24px); max-width: none; }
}
.gc-page__caption { margin-top: 14px; font-size: 11px; color: #666; text-align: center; max-width: 340px; line-height: 1.5; }
.gc-page__actions { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.gc-page__actions button,
.gc-page__actions a {
  padding: 10px 16px;
  background: rgba(255,255,255,0.06);
  color: #f5ede0;
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gc-page__actions button:hover,
.gc-page__actions a:hover { background: rgba(255,255,255,0.10); }

/* giftcard-view: all actions in one row ABOVE the card (wraps on phones). */
.gc-page__actions--top { margin: 0 auto 14px; max-width: 420px; }
.gc-page__actions a.gc-page__primary { background: #d4a762; color: #1a1612; border-color: #d4a762; font-weight: 600; }
.gc-page__actions a.gc-page__primary:hover { background: #e0b878; }
/* Recipient row: every button coloured. Green = the restaurant (like the
   email footer's Website/Menu), blue = show the card (like the email's
   "View your gift card online"). */
.gc-page__actions a.gc-page__btn-visit { background: #059669; color: #fff; border-color: #065f46; font-weight: 600; }
.gc-page__actions a.gc-page__btn-visit:hover { background: #047857; }
.gc-page__actions a.gc-page__btn-staff { background: #2563eb; color: #fff; border-color: #1e40af; font-weight: 600; }
.gc-page__actions a.gc-page__btn-staff:hover { background: #1d4ed8; }

/* Thank-you banner for the buyer, right after payment (?paid=1). */
.gc-page__paid {
  max-width: 380px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(120, 190, 120, 0.12);
  border: 1px solid rgba(120, 190, 120, 0.45);
  color: #dfeedd;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.gc-page__paid-links {
  margin-top: 10px;
  display: flex;               /* one short row of links that wraps on narrow phones */
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
}
.gc-page__paid-links a { color: #bfe3bb; font-weight: 600; text-decoration: underline; }

/* ============================================================
   Scan mode (light, big QR)
   ============================================================ */

.gc-page--scan { background: #fefdf9; color: #5a4a32; }
.gc-page--scan .gc-card { display: none; }

.gc-scan {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  width: 100%;
  max-width: 500px;
}
.gc-page--scan .gc-scan { display: flex; }
.gc-scan__amount-label  { font-size: 10px; color: #5a4a32; letter-spacing: 0.12em; text-transform: uppercase; }
.gc-scan__amount        { font-family: Georgia, serif; font-size: 44px; color: #1a1612; line-height: 1; margin-top: 4px; }
.gc-scan__qr            { background: #fff; padding: 12px; border-radius: 6px; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.1); line-height: 0; }
.gc-scan__qr canvas,
.gc-scan__qr img        { display: block; width: min(70vw, 320px); height: min(70vw, 320px); }
.gc-scan__code          { font-family: 'SF Mono', Menlo, monospace; font-size: 16px; color: #1a1612; letter-spacing: 0.05em; font-weight: 700; }
.gc-scan__meta          { font-size: 12px; color: #5a4a32; text-align: center; }

/* ============================================================
   Print: invert to cream + dark for A4
   ============================================================ */

@media print {
  @page { size: A4; margin: 20mm; }
  body { background: white !important; color: #1a1612 !important; }
  .gc-page__actions, .gc-page__caption, .no-print { display: none !important; }
  .gc-card {
    --gc-bg:     #fdfaf3 !important;
    --gc-fg:     #1a1612 !important;
    --gc-accent: #8b6320 !important;
    --gc-muted:  #5a4a32 !important;
    --gc-msg-bg: #f5ecd6 !important;
    --gc-msg-fg: #1a1612 !important;
    border: 0.5px solid #d4a762 !important;
    background: var(--gc-bg) !important;   /* no glow on paper */
    max-width: 110mm;
    margin: 10mm auto !important;
  }
  .gc-card__motif { opacity: 0.18 !important; }
  .gc-card__qr   { background: #fff !important; border: 0.5px solid #d4a762; }
  .gc-print-extra {
    display: block !important;
    margin: 8mm auto 0;
    max-width: 110mm;
    font-size: 9pt;
    color: #5a4a32;
    line-height: 1.7;
  }
}
.gc-print-extra { display: none; }