/* ROTMARIE · Cycle Product Finder — custom styles
   Tailwind covers ~90% of layout. This file holds the
   bits Tailwind can't express: animated quiz transitions,
   selected-option state, soft grain, focus rings. */

html { scroll-behavior: smooth; }

body { background: linear-gradient(180deg,#f6fbff 0%, #fff 320px); }

.font-display { font-family: 'Fraunces', ui-serif, Georgia, serif; font-feature-settings: "ss01","ss02"; }

/* Subtle paper grain on the page so the gradients feel
   printed rather than flat. Cheap, ~3kb as data-uri. */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .04;
  background-image: radial-gradient(rgba(60,72,88,.6) 1px, transparent 1px);
  background-size: 3px 3px;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ---------------- Quiz screens ---------------- */
.screen { animation: fadeUp .42s cubic-bezier(.2,.7,.2,1); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------- Answer options ---------------- */
.opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid #c9e1f4;
  background: #fff;
  color: #3c4858;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.opt:hover {
  border-color: #0092ff;
  background: #f3f9ff;
  transform: translateY(-1px);
}
.opt:focus-visible {
  outline: none;
  border-color: #0092ff;
  box-shadow: 0 0 0 6px rgba(0,146,255,0.12);
}
.opt.is-selected {
  border-color: #0092ff;
  background: #ecf5ff;
  box-shadow: 0 0 0 6px rgba(0,146,255,0.10);
}
.opt.is-selected .opt-emoji {
  background: #0092ff;
  color: #fff;
}
.opt-emoji {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: #eaf4ff;
  color: #0092ff;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease;
}
.opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-title { font-weight: 600; color: #490000; font-size: 15px; }
.opt-sub   { font-size: 12.5px; color: #687484; line-height: 1.3; }

.opt-feature { border-color: #b51737; }
.opt-feature .opt-emoji { background: #fff1f3; color: #b51737; }

/* ---------------- Product card ---------------- */
.sku {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 16px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #c9e1f4;
  align-items: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sku:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -12px rgba(60,72,88,.18); }
.sku-img {
  width: 96px; height: 96px; border-radius: 14px;
  background: #f3f9ff; object-fit: cover;
}
.sku-title { font-family: 'Fraunces', serif; font-weight: 600; color: #490000; font-size: 18px; }
.sku-tag   { display:inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #0092ff; }
.sku-desc  { font-size: 13.5px; color: #687484; line-height: 1.45; margin-top: 4px; }
.sku-price { font-weight: 600; color: #490000; font-size: 16px; white-space: nowrap; }
.sku-check {
  width: 22px; height: 22px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #0092ff; color: #fff;
}

@media (max-width: 520px) {
  .sku { grid-template-columns: 72px 1fr; }
  .sku-img { width: 72px; height: 72px; }
  .sku-price-col { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
}

/* ---------------- Toast ---------------- */
#cartToast { animation: rise .35s cubic-bezier(.2,.7,.2,1); }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------- Misc ---------------- */
::selection { background: #c9e1f4; color: #490000; }

button, a { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .screen, #cartToast, .sku { animation: none !important; transition: none !important; }
}