/* ==========================================================================
   TimeSaver Wine — custom styles layered on top of Tailwind (CDN)
   Keep this file tiny: only what Tailwind utility classes can't express.
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

::selection {
  background: #722f37;
  color: #faf6ef;
}

:focus-visible {
  outline: 2px solid #c9a227;
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Ad placeholder slots (replace inner markup with your ad network tag)
   -------------------------------------------------------------------------- */
.ad-container::before {
  content: 'Advertisement';
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Temperature slider
   -------------------------------------------------------------------------- */
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 9999px;
  background: linear-gradient(to right, #b9707c, #722f37);
  outline: none;
  cursor: pointer;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #faf6ef;
  border: 3px solid #722f37;
  cursor: pointer;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
}
input[type='range']::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #faf6ef;
  border: 3px solid #722f37;
  cursor: pointer;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
}

/* --------------------------------------------------------------------------
   FAQ accordion (native <details>)
   -------------------------------------------------------------------------- */
details.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .faq-icon {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #f3e2e4;
  color: #652c38;
  font-weight: 700;
  transition: transform 0.2s ease, background 0.2s ease;
}
details.faq[open] summary .faq-icon {
  background: #722f37;
  color: #faf6ef;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Countdown timer ring
   -------------------------------------------------------------------------- */
.ring-progress {
  transition: stroke-dashoffset 0.3s linear;
}

/* --------------------------------------------------------------------------
   Hero texture — pure CSS, no image requests
   -------------------------------------------------------------------------- */
.hero-texture {
  background:
    radial-gradient(1100px 500px at 15% -10%, rgb(201 162 39 / 0.14), transparent 60%),
    radial-gradient(900px 480px at 95% 0%, rgb(185 112 124 / 0.22), transparent 55%),
    linear-gradient(160deg, #33151c 0%, #4a1f28 45%, #33151c 100%);
}

/* --------------------------------------------------------------------------
   Mobile bottom tab bar — reserve space so it never covers footer content
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body {
    padding-bottom: 64px;
  }
}

/* --------------------------------------------------------------------------
   Print styles
   -------------------------------------------------------------------------- */
@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}