/* ============================================================================
   Gold-Lock card
   Scoped CSS for ui.js goldLockBlock(); no font imports, no generic SaaS wash.
   ========================================================================== */

.gold-lock {
  --gold-lock-accent: #f2c14e;
  --gold-lock-accent-strong: #ffe08a;
  --gold-lock-accent-dim: #b98a27;
  --gold-lock-ink: #171106;
  --gold-lock-line: rgba(242, 193, 78, 0.44);
  --gold-lock-glow: rgba(242, 193, 78, 0.18);
  --gold-lock-muted: #c8d0df;
  --accent: var(--gold-lock-accent);
  --accent-bright: var(--gold-lock-accent-strong);
  --accent-ink: var(--gold-lock-ink);
  --accent-line: var(--gold-lock-line);
  --accent-glow: var(--gold-lock-glow);

  position: relative;
  overflow: hidden;
  border-color: var(--gold-lock-line);
  background:
    radial-gradient(560px 220px at 12% -40%, var(--gold-lock-glow), transparent 72%),
    radial-gradient(420px 180px at 110% 0%, rgba(95, 208, 230, 0.08), transparent 68%),
    linear-gradient(145deg, rgba(242, 193, 78, 0.08), transparent 38%),
    linear-gradient(180deg, var(--ink-150), var(--ink-100));
  box-shadow: 0 0 0 1px rgba(242, 193, 78, 0.08), var(--shadow-sm);
}

.gold-lock::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--gold-lock-accent-strong), var(--gold-lock-accent-dim));
  box-shadow: 0 0 22px var(--gold-lock-glow);
}

.gold-lock::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.045) 42% 43%, transparent 43% 100%),
    radial-gradient(circle at 16% 28%, rgba(255, 224, 138, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 66%, rgba(95, 208, 230, 0.14) 0 1px, transparent 2px);
  opacity: 0.55;
}

.gold-lock > * {
  position: relative;
  z-index: 1;
}

.gold-lock > .row.between {
  align-items: center;
  min-height: 76px;
}

.gold-lock h3 {
  color: var(--text-strong);
  letter-spacing: 0.02em;
}

.gold-lock .muted {
  color: var(--gold-lock-muted);
}

.gold-lock svg {
  filter: drop-shadow(0 0 12px var(--gold-lock-glow));
}

.gold-lock .btn-primary {
  --bg: linear-gradient(180deg, var(--gold-lock-accent-strong), var(--gold-lock-accent));
  --fg: var(--gold-lock-ink);
  --bd: rgba(255, 224, 138, 0.2);
  box-shadow: 0 10px 26px -14px var(--gold-lock-glow);
}

.gold-lock .btn-primary:hover {
  --bg: linear-gradient(180deg, #fff0b0, var(--gold-lock-accent-strong));
  border-color: rgba(255, 224, 138, 0.42);
  box-shadow: 0 14px 34px -15px var(--gold-lock-glow);
}

.gold-lock .btn-primary:disabled {
  color: var(--gold-lock-muted);
  background: var(--ink-200);
  border-color: var(--line-bright);
  box-shadow: none;
}

.gold-lock-progress {
  position: relative;
  border: 1px solid rgba(255, 224, 138, 0.16);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.gold-lock-progress > div {
  background:
    linear-gradient(90deg, var(--gold-lock-accent-dim), var(--gold-lock-accent), var(--gold-lock-accent-strong)) !important;
  box-shadow: 0 0 18px var(--gold-lock-glow);
}

.gold-lock.running,
.gold-lock.is-running,
.gold-lock.gold-lock--running,
.gold-lock[data-state="running"],
.gold-lock:has(.gold-lock-progress) {
  --gold-lock-accent: #5fd0e6;
  --gold-lock-accent-strong: #9ee9f5;
  --gold-lock-accent-dim: #2d9cb1;
  --gold-lock-ink: #061318;
  --gold-lock-line: rgba(95, 208, 230, 0.42);
  --gold-lock-glow: rgba(95, 208, 230, 0.18);
}

.gold-lock.available,
.gold-lock.is-available,
.gold-lock.gold-lock--available,
.gold-lock[data-state="available"] {
  --gold-lock-accent: #c6f24e;
  --gold-lock-accent-strong: #e2ff7a;
  --gold-lock-accent-dim: #8fb12f;
  --gold-lock-ink: #11160a;
  --gold-lock-line: rgba(198, 242, 78, 0.42);
  --gold-lock-glow: rgba(198, 242, 78, 0.16);
}

.gold-lock.done,
.gold-lock.is-done,
.gold-lock.gold-lock--done,
.gold-lock[data-state="done"] {
  --gold-lock-accent: #57d99a;
  --gold-lock-accent-strong: #8cf0bd;
  --gold-lock-accent-dim: #2fa36c;
  --gold-lock-ink: #06150d;
  --gold-lock-line: rgba(87, 217, 154, 0.42);
  --gold-lock-glow: rgba(87, 217, 154, 0.17);
}

.gold-lock.locked,
.gold-lock.is-locked,
.gold-lock.gold-lock--locked,
.gold-lock[data-state="locked"] {
  --gold-lock-accent: #f2c14e;
  --gold-lock-accent-strong: #ffe08a;
  --gold-lock-accent-dim: #b98a27;
  --gold-lock-ink: #171106;
  --gold-lock-line: rgba(242, 193, 78, 0.44);
  --gold-lock-glow: rgba(242, 193, 78, 0.18);
}

@media (max-width: 620px) {
  .gold-lock > .row.between {
    align-items: stretch;
  }

  .gold-lock > .row.between > .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .gold-lock:has(.gold-lock-progress)::before {
    animation: gold-lock-pulse 2.8s var(--ease) infinite;
  }

  .gold-lock-progress > div {
    transition: width var(--dur-2) var(--ease) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gold-lock::before,
  .gold-lock-progress > div {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes gold-lock-pulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}