/* Barneo Products Widget - Component Styles */

/* Main container */
.barneo-products-widget {
  padding: var(--barneo-spacing-2xl);
  height: fit-content;
}

/* Заголовок */
.barneo-products-title {
  font-size: var(--barneo-font-size-2xl);
  font-weight: var(--barneo-font-weight-bold);
  margin-bottom: var(--barneo-spacing-lg);
  color: var(--barneo-text-primary);
}

/* Product Card */
.barneo-product-card {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border-radius: var(--barneo-radius-xl);
  transition: var(--barneo-product-card-transition);
  cursor: pointer;
  overflow: hidden;
  gap: 16px;
}

/* Верхний блок с border */
.barneo-product-top {
  border: 1px solid var(--barneo-product-card-border);
  border-radius: var(--barneo-radius-xl);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Заголовок с метаданными и кнопкой избранного */
.barneo-product-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 1rem 1rem 0 1rem;
}

/* Product Metadata (Code and Article) */
.barneo-product-metadata {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.barneo-product-code {
  color: var(--barneo-primary);
  font-weight: var(--barneo-font-weight-bold);
  font-size: var(--barneo-font-size-xs);
  cursor: pointer;
}

.barneo-product-article {
  color: var(--barneo-text-primary);
  font-weight: var(--barneo-font-weight-bold);
  font-size: var(--barneo-font-size-xs);
  cursor: pointer;
}

/* Heart Icon */
.barneo-product-heart {
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--barneo-transition-normal);
}

.barneo-product-heart:hover {
  transform: scale(1.2);
}

.barneo-product-heart svg {
  width: 20px;
  height: 20px;
  color: var(--barneo-text-muted);
  transition: color var(--barneo-transition-normal);
}

.barneo-product-heart.is-in-favourites svg {
  color: var(--barneo-error);
}

/* Product Image */
.barneo-product-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--barneo-radius-xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.barneo-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--barneo-radius-xl);
}

.barneo-product-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--barneo-product-image-placeholder-bg);
  border-radius: var(--barneo-radius-xl);
  font-size: 48px;
  color: var(--barneo-text-muted);
}

/* Нижний блок без border */
.barneo-product-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
  flex: 1;
}

/* Первый подблок: цена, бренд, тег */
.barneo-product-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Product Price */
.barneo-product-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--barneo-text-primary);
}

/* Product Brand */
.barneo-product-brand {
  display: flex;
  align-items: center;
  gap: var(--barneo-spacing-sm);
  font-weight: 700;
  font-size: 1rem;
  color: var(--barneo-text-primary);
}

.barneo-product-brand-checkmark {
  width: 16px;
  height: 16px;
  color: var(--barneo-primary);
}

/* Product Availability */
.barneo-product-availability {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--barneo-spacing-xs) var(--barneo-spacing-md);
  border-radius: var(--barneo-radius-md);
  font-weight: var(--barneo-font-weight-bold);
  font-size: var(--barneo-font-size-xs);
  width: fit-content;
}

.barneo-product-availability--in-stock {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--barneo-success);
}

.barneo-product-availability--out-of-stock {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--barneo-error);
}

/* Второй подблок: название, доставка, кнопка */
.barneo-product-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Product Title */
.barneo-product-title {
  margin: 0;
  font-size: var(--barneo-font-size-base);
  font-weight: var(--barneo-font-weight-medium);
  color: var(--barneo-text-primary);
  line-height: var(--barneo-line-height-tight);
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: break-word;
  word-spacing: normal;
  transition: color var(--barneo-transition-normal);
}

.barneo-product-title:hover {
  color: var(--barneo-primary);
}

/* Delivery Info */
.barneo-product-delivery {
  color: var(--barneo-success);
  font-size: var(--barneo-font-size-sm);
  font-weight: var(--barneo-font-weight-normal);
}

/* Add to Cart Button */
.barneo-product-add-to-cart {
  width: 100%;
  padding: var(--barneo-spacing-md);
  background-color: var(--barneo-primary);
  color: var(--barneo-white);
  border: none;
  border-radius: var(--barneo-radius-lg);
  font-weight: var(--barneo-font-weight-bold);
  font-size: 18px;
  cursor: pointer;
  transition: all var(--barneo-transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.barneo-product-add-to-cart:hover {
  background-color: var(--barneo-primary-hover);
  transform: translateY(-1px);
}

.barneo-product-add-to-cart:disabled {
  background-color: var(--barneo-bg-disabled);
  color: var(--barneo-text-disabled);
  cursor: not-allowed;
  transform: none;
}

/* Pagination */
.barneo-products-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--barneo-spacing-sm);
  padding: var(--barneo-spacing-lg) 0;
  border-top: 1px solid var(--barneo-border-light);
  margin-top: var(--barneo-spacing-lg);
}

.barneo-pagination-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: var(--barneo-spacing-sm);
  background-color: transparent;
  border: none;
  border-radius: 50%;
  color: var(--barneo-text-muted);
  font-weight: var(--barneo-font-weight-medium);
  cursor: pointer;
  transition: all var(--barneo-transition-normal);
  font-family: var(--barneo-font-family);
}

.barneo-pagination-button svg {
  width: 20px;
  height: 20px;
  transition: color var(--barneo-transition-normal);
}

.barneo-pagination-button:hover:not(:disabled) {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--barneo-primary);
}

.barneo-pagination-button:disabled {
  color: var(--barneo-text-disabled);
  cursor: not-allowed;
}

.barneo-pagination-pages {
  display: flex;
  gap: var(--barneo-spacing-sm);
}

.barneo-pagination-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: var(--barneo-spacing-sm);
  background-color: transparent;
  border: none;
  border-radius: 50%;
  color: var(--barneo-text-muted);
  font-size: var(--barneo-font-size-base);
  font-weight: var(--barneo-font-weight-medium);
  cursor: pointer;
  transition: all var(--barneo-transition-normal);
  font-family: var(--barneo-font-family);
}

.barneo-pagination-page:hover {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--barneo-primary);
}

.barneo-pagination-page--active {
  background-color: var(--barneo-primary);
  color: var(--barneo-white);
  border-radius: 50%;
}

.barneo-pagination-page--active:hover {
  background-color: var(--barneo-primary-hover);
  color: var(--barneo-white);
}

/* Loading State */
.barneo-products-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--barneo-loading-text-color);
  font-size: var(--barneo-font-size-base);
}

.barneo-products-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--barneo-border-light);
  border-top: 2px solid var(--barneo-loading-spinner-color);
  border-radius: var(--barneo-radius-full);
  animation: spin 1s linear infinite;
  margin-right: var(--barneo-spacing-sm);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Empty State */
.barneo-products-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--barneo-spacing-3xl) var(--barneo-spacing-lg);
}

.barneo-products-empty-icon {
  font-size: 48px;
  margin-bottom: var(--barneo-spacing-sm);
  color: var(--barneo-empty-icon-color);
}

.barneo-products-empty-content {
  text-align: center;
}

.barneo-products-empty-title {
  font-size: var(--barneo-font-size-lg);
  color: var(--barneo-primary);
  font-weight: var(--barneo-font-weight-semibold);
  margin-bottom: var(--barneo-spacing-xs);
}

.barneo-products-empty-text {
  color: var(--barneo-empty-text-color);
  font-size: var(--barneo-font-size-sm);
}

/* Error State */
.barneo-products-error {
  padding: var(--barneo-spacing-lg);
  background-color: var(--barneo-error-bg);
  border: 1px solid var(--barneo-error-border);
  border-radius: var(--barneo-radius-md);
  color: var(--barneo-error-text-color);
  font-size: var(--barneo-font-size-sm);
  text-align: center;
}