/* PeptiLab — custom styles layered on top of Tailwind (CDN).
   Tailwind handles most styling via utility classes in the HTML.
   This file holds the few rules that are awkward to express inline. */

/* Smooth, consistent scrollbar inside the cart drawer */
#cart-items {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
#cart-items::-webkit-scrollbar {
  width: 8px;
}
#cart-items::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Honeypot anti-spam field — visually removed but still in the DOM so bots
   fill it. Kept out of layout, tab order, and screen readers. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Karty wyboru przesyłki (rodzaj / obszar) */
.ship-opt {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  padding: 0.75rem 0.875rem;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.ship-opt:hover { border-color: #94a3b8; }
.ship-opt:has(input:checked) {
  border-color: #2f6bff;
  background: #eef6ff;
  box-shadow: 0 0 0 1px #2f6bff;
}
.ship-opt input { accent-color: #2f6bff; }

/* Checkout form fields */
.field {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.95rem;
  color: #0f172a;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field::placeholder { color: #94a3b8; }
.field:focus {
  outline: none;
  border-color: #2f6bff;
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.15);
}
/* Invalid state (toggled via .field-error class from JS) */
.field.field-error {
  border-color: #ef4444;
}
.field.field-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
/* Inline error message under a field */
.err {
  display: none;
  color: #ef4444;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}
.err.show { display: block; }

/* Subtle entrance animation for newly rendered cart rows */
.cart-row {
  animation: cart-row-in 0.25s ease both;
}
@keyframes cart-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}