/* CraftWishes — site UI layer on top of Tailwind (glassmorphism + motion) */

.cw-blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cw-blobs span {
  position: absolute; width: 42vmax; height: 42vmax; border-radius: 50%;
  filter: blur(80px); opacity: .35; animation: cw-float 22s ease-in-out infinite alternate;
}
.cw-blobs span:nth-child(1) { background: #f1d6b8; top: -12vmax; left: -10vmax; }
.cw-blobs span:nth-child(2) { background: #e9c3cf; bottom: -14vmax; right: -12vmax; animation-delay: -7s; }
.cw-blobs span:nth-child(3) { background: #e8cf8f; top: 30%; left: 55%; width: 26vmax; height: 26vmax; opacity: .18; animation-delay: -14s; }
.dark .cw-blobs span { opacity: .22; }
@keyframes cw-float { to { transform: translate(6vmax, 4vmax) scale(1.12); } }

.glass {
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .7);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 10px 40px -14px rgba(94, 20, 48, .16);
}
.dark .glass {
  background: rgba(30, 20, 24, .6);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 10px 40px -12px rgba(0, 0, 0, .6);
}
.card {
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 1.25rem; box-shadow: 0 8px 30px -14px rgba(76, 29, 149, .25);
}
.dark .card { background: rgba(28, 22, 46, .6); border-color: rgba(255,255,255,.07); }

.glass-btn {
  display: inline-grid; place-items: center; border-radius: .75rem;
  background: rgba(255,255,255,.6); border: 1px solid rgba(15,23,42,.08); transition: transform .15s, background .2s;
}
.dark .glass-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.glass-btn:hover { transform: translateY(-1px); }

.glass-input, .field {
  width: 100%; border-radius: .8rem; padding: .7rem .9rem; font-size: .95rem;
  background: rgba(255,255,255,.75); border: 1px solid rgba(15,23,42,.12); color: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.glass-input { width: auto; }
.dark .glass-input, .dark .field { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.field:focus, .glass-input:focus { outline: none; border-color: #9b2c52; box-shadow: 0 0 0 4px rgba(155,44,82,.15); }
.dark select.field option, .dark select.glass-input option { background: #1e1418; }
.label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.help { font-size: .78rem; color: #64748b; margin-top: .3rem; }
.dark .help { color: #94a3b8; }
.err { font-size: .8rem; color: #dc2626; margin-top: .3rem; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.4rem; border-radius: .9rem; font-weight: 600; color: #fff;
  color: #fff8ec; background: linear-gradient(135deg, #43101f, #7d1d40 60%, #9b2c52); box-shadow: inset 0 0 0 1px rgba(232,200,130,.45), 0 12px 28px -12px rgba(94,20,48,.7);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: inset 0 0 0 1px rgba(232,200,130,.7), 0 16px 34px -12px rgba(94,20,48,.8); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem .9rem; border-radius: .75rem; font-weight: 500; font-size: .875rem;
  background: rgba(255,255,255,.65); border: 1px solid rgba(15,23,42,.1); transition: background .2s, transform .15s;
}
.btn-ghost:hover { background: #fff; transform: translateY(-1px); }
.dark .btn-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.dark .btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-danger { color: #dc2626; }

.nav-link { padding: .45rem .75rem; border-radius: .6rem; transition: background .2s; }
.nav-link:hover { background: rgba(125,29,64,.08); }

.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }

.fade-up { opacity: 0; transform: translateY(16px); animation: cw-up .7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes cw-up { to { opacity: 1; transform: none; } }
.cw-flash { animation: cw-up .4s ease-out; }

/* Wizard */
.wiz-step { display: none; }
.wiz-step.active { display: block; animation: cw-up .45s ease-out; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice > div { transition: transform .15s, box-shadow .2s, border-color .2s; border: 2px solid transparent; }
.choice:hover > div { transform: translateY(-2px); }
.choice input:checked + div { border-color: #9b2c52; box-shadow: 0 0 0 4px rgba(155,44,82,.2); }
.choice input:disabled + div { opacity: .5; cursor: not-allowed; }
.choice input:focus-visible + div { outline: 2px solid #9b2c52; outline-offset: 2px; }

.progress-bar { height: 6px; border-radius: 999px; background: rgba(139,92,246,.15); overflow: hidden; }
.progress-bar > span { display: block; height: 100%; background: linear-gradient(90deg,#7d1d40,#c9a24a); transition: width .4s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- premium layer (v4) ---------- */
.cw-logo{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:600 13px/1 "Cormorant Garamond",serif;letter-spacing:.06em;color:#f3dca4;background:radial-gradient(circle at 30% 25%,#7d1d40,#2a0a14);box-shadow:inset 0 0 0 1px rgba(232,200,130,.6),0 6px 16px -6px rgba(42,10,20,.6)}
.gold-text{background:linear-gradient(100deg,#a8832f 0%,#f3dca4 22%,#c9a24a 42%,#fff1c8 55%,#b58a35 75%,#e9cd88 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cw-foil 7s ease-in-out infinite}
@keyframes cw-foil{50%{background-position:100% 0}}
.hairline{height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,74,.7),transparent)}
.eyebrow{font:600 11.5px/1.2 Inter,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#a8832f}
.dark .eyebrow{color:#e2c078}
.lux-card{background:#fffdf9;border:1px solid #eadfcd;border-radius:22px;box-shadow:0 1px 0 #fff inset,0 18px 40px -28px rgba(66,25,30,.45)}
.dark .lux-card{background:#17110f;border-color:#2e221f}
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.5rem;border-radius:999px;font-weight:600;color:#2a0a14;background:linear-gradient(135deg,#f3dca4,#c9a24a 55%,#e9cd88);box-shadow:0 12px 28px -12px rgba(169,131,47,.8),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .15s,filter .2s}
.btn-gold:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.5rem;border-radius:999px;font-weight:600;border:1px solid rgba(232,200,130,.55);color:#f3e6cf;transition:background .2s}
.btn-line:hover{background:rgba(232,200,130,.12)}

/* Header bar: solid ivory in light mode so the logo and links stay crisp over any background */
header > nav.glass{background:rgba(255,250,242,.95);border-color:rgba(201,162,74,.35)}
.dark header > nav.glass{background:rgba(24,16,18,.88);border-color:rgba(226,192,120,.18)}