/* FireBlanket Reviews Master Stylesheet */

/* Base container styling */
.fb-reviews-container,
#fb-reviews-widget,
.fb-reviews-widget {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  line-height: 1.5;
  color: #111827;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* Layout utilities */
.mb-8 { margin-bottom: 2rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-1\.5 { margin-bottom: 0.375rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mr-3 { margin-right: 0.75rem !important; }
.mr-1 { margin-right: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.mt-4 { margin-top: 1rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-4 { padding: 1rem !important; }

/* Grid layout */
.grid { display: grid !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.gap-4 { gap: 1rem !important; }
.gap-10 { gap: 2.5rem !important; }

/* Flex layout */
.flex { display: flex !important; }
.flex-grow { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.items-center { align-items: center !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }

/* Text alignment */
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Typography */
.text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
.text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
.text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
.text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
.leading-relaxed { line-height: 1.625 !important; }

/* Font weights */
.font-bold { font-weight: 700 !important; }
.font-semibold { font-weight: 600 !important; }
.font-medium { font-weight: 500 !important; }
.font-normal { font-weight: 400 !important; }

/* Colors */
.text-gray-900 { color: #111827 !important; }
.text-gray-800 { color: #1F2937 !important; }
.text-gray-700 { color: #374151 !important; }
.text-gray-600 { color: #4B5563 !important; }
.text-gray-500 { color: #6B7280 !important; }
.text-gray-300 { color: #D1D5DB !important; }
.text-\[\#10B981\] { color: #10B981 !important; }
.text-\[\#00B67A\] { color: #00B67A !important; }

/* Background colors */
.bg-gray-200 { background-color: #E5E7EB !important; }
.bg-white { background-color: #FFFFFF !important; }
.bg-\[\#10B981\] { background-color: #10B981 !important; }
.bg-\[\#f7f7f7\] { background-color: #f7f7f7 !important; }

/* SVG utilities */
.fill-current { fill: currentColor !important; }

/* Sizing */
.w-full { width: 100% !important; }
.w-10 { width: 2.5rem !important; }
.w-5 { width: 1.25rem !important; }
.w-4 { width: 1rem !important; }
.w-3\.5 { width: 0.875rem !important; }
.w-8 { width: 2rem !important; }
.h-10 { height: 2.5rem !important; }
.h-5 { height: 1.25rem !important; }
.h-4 { height: 1rem !important; }
.h-3\.5 { height: 0.875rem !important; }
.h-1\.5 { height: 0.375rem !important; }
.h-full { height: 100% !important; }

/* Position and layout */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.rounded-full { border-radius: 9999px !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-md { border-radius: 0.375rem !important; }
.overflow-hidden { overflow: hidden !important; }
.border { border-width: 1px !important; }
.border-gray-200 { border-color: #E5E7EB !important; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }

/* Responsive utilities */
@media (min-width: 768px) {
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:col-span-5 { grid-column: span 5 / span 5 !important; }
  .md\:col-span-4 { grid-column: span 4 / span 4 !important; }
  .md\:col-span-3 { grid-column: span 3 / span 3 !important; }
  .md\:gap-10 { gap: 2.5rem !important; }
  .md\:mb-0 { margin-bottom: 0 !important; }
}

/* Reviews specific styling */
.review-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Star styling */
.star-rating svg,
svg.star-icon {
  color: #10B981;
  fill: #10B981;
  width: 1rem;
  height: 1rem;
}

/* Product image styling */
.product-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
}

.product-image-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  left: 0;
}

/* Load more button */
button.load-more {
  width: 100%;
  padding: 0.75rem;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  color: #374151;
}

button.load-more:hover {
  background-color: #e5e7eb;
}

/* ReviewCard component specific */
.verified-buyer-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.25rem;
}

.review-author-initial {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  font-weight: 500;
}

/* Force visibility of react components */
[data-reactroot] {
  display: block !important;
  visibility: visible !important;
}