.default-btn.htmx-request { pointer-events: none; cursor: wait; }
.default-btn.htmx-request .btn-text { display: none !important; }
.default-btn.htmx-request .btn-loading { display: inline-flex !important; align-items: center; gap: 4px; }
#variantSelectionModal .btn-group { flex-wrap: wrap; gap: 4px; }
#variantSelectionModal .btn-group .btn-outline-secondary { border-radius: 4px !important; }
#variantSelectionModal .btn-check:checked + .btn-outline-secondary {
  background: var(--color-orange, var(--brand-primary));
  color: #fff;
  border-color: var(--color-orange, var(--brand-primary));
}
#variantSelectionModal .variant-modal-title { font-size: 1.35rem; margin-bottom: .5rem; }
#variantSelectionModal .variant-modal-placeholder {
  min-height: 220px;
  background: var(--color-off-white, #f5f5f5);
}
#variantSelectionModal .variant-option-group { display: flex; flex-wrap: wrap; gap: 4px; }
#variantSelectionModal .variant-modal-error:not(:empty) { margin-bottom: 1rem; }

#productPreviewModal .btn-group { flex-wrap: wrap; gap: 4px; }
#productPreviewModal .btn-group .btn-outline-secondary { border-radius: 4px !important; }
#productPreviewModal .btn-check:checked + .btn-outline-secondary {
  background: var(--color-orange, var(--brand-primary));
  color: #fff;
  border-color: var(--color-orange, var(--brand-primary));
}
#productPreviewModal .variant-modal-title { font-size: 1.35rem; margin-bottom: .5rem; }
#productPreviewModal .variant-modal-placeholder {
  min-height: 220px;
  background: var(--color-off-white, #f5f5f5);
}
#productPreviewModal .variant-option-group { display: flex; flex-wrap: wrap; gap: 4px; }
#productPreviewModal .variant-modal-error:not(:empty) { margin-bottom: 1rem; }

.product-preview-content > * {
  animation: fadeUp 0.4s backwards;
}
.product-preview-content > *:nth-child(1) { animation-delay: 0s; }
.product-preview-content > *:nth-child(2) { animation-delay: 0.05s; }
.product-preview-content > *:nth-child(3) { animation-delay: 0.1s; }

.preview-thumbnail-strip {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
}
.preview-thumbnail-strip .thumb-item {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.preview-thumbnail-strip .thumb-item.active,
.preview-thumbnail-strip .thumb-item:hover {
  border-color: var(--color-orange, var(--brand-primary));
}

.product-preview-content .in-stock {
  color: #28a745;
  font-weight: 500;
}
.product-preview-content .out-of-stock {
  color: #dc3545;
  font-weight: 500;
}

#waitlistModal .waitlist-modal-content {
  border: none;
  border-radius: 12px;
}

#waitlistModal .modal-body {
  padding: 2rem;
}

/* ===== Review Modal Star Rating ===== */
.star-ratingz {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 2px;
}
.star-ratingz input { display: none; }
.star-ratingz label {
  cursor: pointer;
  font-size: 1.5rem;
  color: #ddd;
  transition: color 0.2s;
}
.star-ratingz label::before { content: "\2605"; }
.star-ratingz input:checked + label,
.star-ratingz input:checked ~ label {
  color: #ffba0a;
}
.star-ratingz label:hover,
.star-ratingz label:hover ~ label {
  color: #ffba0a;
}
.star-ratingz input[disabled] ~ label {
  cursor: default;
}
#reviewProductModal .modal-content .star-ratingz label { font-size: 2rem; }

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
