/* Product Section Improvements */
.product-card-wrapper {
  border-radius: 1rem; /* 16px rounded corners */
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Add rounded corners to common elements */
.component .bg-card,
.component [class*="bg-card"] {
  border-radius: 0.75rem; /* 12px */
}

/* Modal improvements */
.component [role="dialog"] .bg-background {
  border-radius: 1.5rem; /* 24px */
}

/* Button rounding */
.component button {
  border-radius: 0.5rem; /* 8px */
}

/* Input field rounding */
.component input[type="text"] {
  border-radius: 0.75rem; /* 12px */
}

/* Global Button Rounding */
button {
  border-radius: 0.5rem !important; /* 8px rounded corners */
}

/* Input buttons and form controls */
input[type="button"],
input[type="submit"],
input[type="reset"] {
  border-radius: 0.5rem !important;
}

/* Link buttons (styled as buttons) */
a[class*="btn"],
a[class*="button"],
.button,
.btn {
  border-radius: 0.5rem !important;
}

/* Specific button variants for different sizes */
.btn-sm,
.button-sm,
button.small {
  border-radius: 0.375rem !important; /* 6px for smaller buttons */
}

.btn-lg,
.button-lg,
button.large {
  border-radius: 0.75rem !important; /* 12px for larger buttons */
}

/* Icon-only buttons (usually smaller/circular) */
button[class*="icon"],
.icon-button,
button:has(svg):not(:has(span)):not(:has(div)) {
  border-radius: 0.5rem !important;
}

/* Floating action buttons or circular buttons */
.btn-circle,
.button-circle,
button.circle {
  border-radius: 50% !important;
}

/* Toggle buttons and switches */
.toggle,
.switch,
[role="switch"] {
  border-radius: 9999px !important; /* Fully rounded for toggles */
}

/* Button groups - adjust for connected buttons */
.btn-group button:first-child,
.button-group button:first-child {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.btn-group button:last-child,
.button-group button:last-child {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.btn-group button:not(:first-child):not(:last-child),
.button-group button:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}

/* Dropdown buttons */
.dropdown-toggle::after {
  border-radius: 0.25rem;
}

/* Ensure consistent rounding for common frameworks */
/* Bootstrap buttons */
.btn {
  border-radius: 0.5rem !important;
}

/* Tailwind buttons */
.rounded-none {
  border-radius: 0.5rem !important;
}

/* Override any existing button rounding */
button[class*="rounded"],
.btn[class*="rounded"],
.button[class*="rounded"] {
  border-radius: 0.5rem !important;
}

/* Special cases - preserve intended circular buttons */
button[class*="rounded-full"],
.btn[class*="rounded-full"],
.button[class*="rounded-full"] {
  border-radius: 50% !important;
}

/* Pagination buttons */
.pagination button,
.pagination a {
  border-radius: 0.5rem !important;
}

/* Tab buttons */
.tab,
.tabs button,
[role="tab"] {
  border-radius: 0.5rem !important;
}

/* Close buttons (X buttons) */
.close,
.btn-close,
button[aria-label*="close"],
button[aria-label*="Close"] {
  border-radius: 0.375rem !important;
}

/* Product card grid spacing */
.product-grid {
  display: grid;
  gap: 1.5rem; /* 24px gap between cards */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Alternative: If using flexbox layout */
.product-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.product-flex > * {
  flex: 1 1 280px;
  max-width: 400px;
}

/* Individual card spacing (fallback) */
.product-card {
  margin-bottom: 1.5rem !important;
  margin-right: 1.5rem !important;
}

/* Remove margin from last items to prevent extra space */
.product-card:last-child,
.product-card:nth-last-child(-n+3) {
  margin-bottom: 0 !important;
}

/* Mobile responsive spacing */
@media (max-width: 768px) {
  .product-grid {
    gap: 1rem;
    grid-template-columns: 1fr;
  }
  
  .product-flex {
    gap: 1rem;
  }
  
  .product-card {
    margin-bottom: 1rem !important;
    margin-right: 0 !important;
  }
}