/* GiftList theme — token overrides on top of styling.css.
   Crimson primary with a warm gold-amber accent for the claim action.
   Page bg keeps the warm cream wash (matches hh/ul); only the product-photo
   frame (.img-white-bg) is forced to pure white below — products with cut-out
   backgrounds need a clean white panel, not the cream surface-2 we use
   everywhere else. */
:root {
  --color-bg: #fff8f5;
  --color-bg-soft: #fde8e3;
  --color-surface: #ffffff;
  --color-surface-2: #fdf2ed;
  --color-text: #2a1612;
  --color-text-muted: #7a5c54;
  --color-border: #f0d8cf;
  --color-primary: #b91c47;
  --color-primary-hover: #911538;
  --color-primary-soft: rgba(185, 28, 71, 0.10);
  --color-accent: #d97706;
  --color-accent-hover: #b45309;
  --color-accent-soft: rgba(217, 119, 6, 0.10);
  --color-success: #047857;
  /* Muted "taken" palette — gifts already claimed slide to the bottom and dim.
     Tokenised so the .is-claimed-by-other state can read against either light
     or dark backgrounds without recomputing in every selector. */
  --color-claimed-bg: #f3ece8;
  --color-claimed-text: #7a5c54;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a0d0a;
    --color-bg-soft: #2a1612;
    --color-surface: #251612;
    --color-surface-2: #2e1c17;
    --color-text: #fdf2ed;
    --color-text-muted: #b39990;
    --color-border: #4a2e26;
    --color-primary: #f87171;
    --color-primary-hover: #fca5a5;
    --color-primary-soft: rgba(248, 113, 113, 0.18);
    --color-accent: #fbbf24;
    --color-accent-hover: #fcd34d;
    --color-accent-soft: rgba(251, 191, 36, 0.18);
    --color-claimed-bg: #1f1410;
    --color-claimed-text: #8a7066;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);
  }
}

/* Subtle crimson + gold background washes (desktop only — mobile stays flat) */
@media (min-width: 681px) {
  body {
    background:
      radial-gradient(1200px 600px at 50% -10%, rgba(185, 28, 71, 0.08), transparent 60%),
      radial-gradient(900px 500px at 100% 100%, rgba(217, 119, 6, 0.07), transparent 70%),
      var(--color-bg);
    background-attachment: fixed;
  }
}

/* Claim CTAs use the gold-amber accent so the primary action (claim / start)
   reads warmly against the crimson visit button. */
.btn-success,
#new-project a,
.start-project a {
  color: #2a1612;
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-success:hover,
#new-project a:hover,
.start-project a:hover {
  color: #fff;
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
.btn-success.disabled, .btn-success:disabled {
  background: color-mix(in oklab, var(--color-accent) 55%, white);
  border-color: color-mix(in oklab, var(--color-accent) 55%, white);
}

/* Release-claim X mirrors the upvotelist remove-upvote — outlined accent, must
   reset the background that .btn-success would otherwise paint over the glyph. */
.remove-upvote {
  color: var(--color-accent);
  background: transparent;
  border-color: var(--color-accent);
}
.remove-upvote:hover {
  background: var(--color-accent-soft);
}

/* Claim pulse keeps the accent tint so it harmonises with the gold CTA */
@keyframes votePulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 var(--color-accent-soft); }
  45%  { transform: scale(1.06); box-shadow: 0 0 0 10px transparent; }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}

/* =============================================================
   Gift-specific: claimed-by-other state.
   The claim button is replaced with a "Taken by X" pill; the card
   dims and slides to the bottom (sort handled in JS). Hover still
   reveals the visit link so other guests can see what was picked.
   ============================================================= */
.card.is-claimed-by-other {
  background: var(--color-claimed-bg);
  opacity: 0.78;
}
.card.is-claimed-by-other:hover {
  opacity: 1;
}
.card.is-claimed-by-other .card-title {
  color: var(--color-claimed-text);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, var(--color-claimed-text) 50%, transparent);
}
/* Beat the pink .card-body wash for claimed cards so the right half drops
   back to the muted claimed-bg. The left half (.card-image.img-white-bg)
   intentionally keeps its white frame — product cutouts still need a
   clean white panel to read cleanly, and the opacity dim + strikethrough
   title + Taken pill already carry the "taken" signal on the body side. */
.card.is-claimed-by-other .card-body.card-column {
  background-color: var(--color-claimed-bg);
}
.taken-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: auto;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--color-claimed-bg);
  color: var(--color-claimed-text);
  border: 1px solid var(--color-border);
  cursor: not-allowed;
  user-select: none;
}
.taken-pill .taken-pill-name {
  margin-left: 6px;
  color: var(--color-primary);
}

/* Claim visibility setting in Personalise. */
.surprise-mode-row {
  margin-top: var(--size-3);
  padding: var(--size-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  display: flex;
  align-items: flex-start;
  gap: var(--size-2);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-align: left;
}
.surprise-mode-row input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
}
.surprise-mode-row label {
  flex: 1 1 auto;
  cursor: pointer;
  line-height: 1.4;
}
.surprise-mode-row label strong {
  color: var(--color-text);
  display: block;
  margin-bottom: 2px;
}

/* (Note: white-bg image frame colour is now set inline by project.js when
   the filename ends in -fff — see addListing(). Theme-level override that
   used to live here has been removed so the per-image detection drives
   rendering directly instead of going via a CSS variable.) */

/* Card body (title / info textarea / buttons column) gets a translucent
   rose wash so the right half of each card reads warmer than the white
   product-photo half. The 47-hex alpha keeps it light enough that the
   info textarea (with its own white .form-control bg) still pops. */
.card-body.card-column {
  background: #f59e9e47;
}

/* Homepage hero cards — giftlist-specific imagery added May 2026. */
.card1 { background-image: url('/static/images-homepage/gl-1.webp'); }
.card2 { background-image: url('/static/images-homepage/gl-2.webp'); }
.card3 { background-image: url('/static/images-homepage/gl-3.webp'); }

@media (prefers-color-scheme: dark) {
  .btn-success:not(.remove-upvote), .btn-success:not(.remove-upvote):hover, .btn-success:not(.remove-upvote):focus,
  #new-project a, #new-project a:hover, .start-project a, .start-project a:hover {
    color:var(--color-bg);
  }
}