/* ============================================================
   Order form — daily harvest-cutoff countdown + subtle CTA/card
   animations. Shared across the old single-step form and the new
   form. Everything is scoped under #order-form. Behavior lives in
   order-urgency.js.
   ============================================================ */

/* --- Countdown bar injected into the old single-step modal --- */
#order-form .order-countdown {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 11px 13px;
  color: #6d3100;
  background: linear-gradient(90deg, #fff2cc, #fff8e6);
  border: 1px solid #efd995;
  border-radius: 11px;
}

#order-form .order-countdown-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e85d04;
  box-shadow: 0 0 0 5px rgba(232, 93, 4, 0.12);
  animation: of-dot-blink 1.4s ease-in-out infinite;
}

#order-form .order-countdown-text strong {
  display: block;
  font-size: 0.86rem;
  line-height: 1.25;
}

#order-form .order-countdown-text small {
  display: block;
  margin-top: 2px;
  color: #86521d;
  font-size: 0.74rem;
  line-height: 1.3;
}

/* Monospace-ish countdown digits, used in both form variants */
#order-form .order-countdown-time {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #a1410a;
  white-space: nowrap;
}

/* New-form urgency panel reuses .of-urgency; just style its digits */
#order-form .of-urgency .order-countdown-time { color: #a1410a; }

/* --- Subtle animations --- */
@keyframes of-cta-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 18px rgba(45, 106, 79, 0.22); }
  50%      { transform: scale(1.016); box-shadow: 0 12px 26px rgba(45, 106, 79, 0.34); }
}

@keyframes of-dot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* Primary submit CTA in either form (old .btn-full / new .of-primary) */
#order-form button[type="submit"] {
  animation: of-cta-pulse 2.6s ease-in-out infinite;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  will-change: transform;
}

#order-form button[type="submit"]:hover {
  transform: translateY(-1px) scale(1.012);
  filter: brightness(1.03);
  animation-play-state: paused;
}

#order-form button[type="submit"]:active {
  transform: translateY(1px) scale(0.99);
  animation-play-state: paused;
}

/* Pack options: smooth hover lift */
#order-form .bundle-option,
#order-form .of-pack-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

#order-form .bundle-option:hover,
#order-form .of-pack-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(23, 63, 45, 0.12);
}

/* Edit-pack pill + back link get a gentle hover too */
#order-form .of-mini-edit,
#order-form .of-back,
#order-form .modal-close {
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
#order-form .modal-close:hover { transform: scale(1.08); }

/* Input focus glow (covers the old form, which lacks the redesign CSS) */
#order-form input:focus,
#order-form select:focus {
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.14);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  #order-form button[type="submit"],
  #order-form .order-countdown-dot {
    animation: none;
  }
  #order-form button[type="submit"]:hover,
  #order-form .bundle-option:hover,
  #order-form .of-pack-card:hover { transform: none; }
}