/* ===== SAVED FOR LATER DROPDOWN STYLES ===== */

:root {
  /* Dropdown Colors - Customize per client */
  --saved-for-later-dropdown-bg: #ffffff;
  --saved-for-later-dropdown-border: #ddd;
  --saved-for-later-dropdown-shadow: rgba(0, 0, 0, 0.15);
  --saved-for-later-dropdown-header-bg: #f8f9fa;
  --saved-for-later-dropdown-header-border: #eee;
  
  /* Button Colors - Match main page or customize */
  --saved-for-later-dropdown-btn-bg: #007bff;
  --saved-for-later-dropdown-btn-hover: #0056b3;
  --saved-for-later-dropdown-btn-text: #ffffff;
  
  /* Text Colors - Consistent with main page */
  --saved-for-later-dropdown-text-primary: #333;
  --saved-for-later-dropdown-text-secondary: #666;
  --saved-for-later-dropdown-text-muted: #999;
  --saved-for-later-dropdown-text-error: #dc3545;
  
  /* Icon Colors */
  --saved-for-later-icon-bg: rgba(255, 255, 255, 0.9);
  --saved-for-later-icon-bg-hover: rgba(255, 255, 255, 1);
  --saved-for-later-icon-basket-bg: rgba(220, 53, 69, 0.9);
  --saved-for-later-icon-basket-hover: rgba(220, 53, 69, 1);
  
  /* Spacing and Sizing */
  --saved-for-later-dropdown-width: 300px;
  --saved-for-later-dropdown-max-height: 400px;
  --saved-for-later-dropdown-padding: 12px 16px;
  --saved-for-later-dropdown-gap: 12px;
  
  /* Border Radius */
  --saved-for-later-dropdown-radius: 8px;
  --saved-for-later-icon-radius: 50%;
  --saved-for-later-icon-basket-radius: 4px;
  
  /* Transitions */
  --saved-for-later-transition: 0.2s ease;
  --saved-for-later-transition-slow: 0.3s ease;
}

/* Header Icon Container */
.savedForLater-header-icon {
  display: flex;
  cursor: pointer;
  position: relative;
  align-items: center;
  height: 75px;
  width: 75px;
  justify-content: center;
}

.savedForLater-header-icon img {
  font-size: 20px;
  color: #333;
  transition: color 0.3s ease;
  display: block;
}

/* Dropdown Menu */
.savedForLater-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--saved-for-later-dropdown-bg);
  border: 1px solid var(--saved-for-later-dropdown-border);
  border-radius: var(--saved-for-later-dropdown-radius);
  box-shadow: 0 4px 12px var(--saved-for-later-dropdown-shadow);
  width: var(--saved-for-later-dropdown-width);
  max-height: var(--saved-for-later-dropdown-max-height);
  overflow-y: auto;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--saved-for-later-transition-slow), visibility var(--saved-for-later-transition-slow);
}

.savedForLater-dropdown.visible {
  opacity: 1;
  visibility: visible;
}

/* Dropdown Header */
.savedForLater-dropdown-header {
  padding: var(--saved-for-later-dropdown-padding);
  border-bottom: 1px solid var(--saved-for-later-dropdown-header-border);
  font-weight: bold;
  color: var(--saved-for-later-dropdown-text-primary);
  background: var(--saved-for-later-dropdown-header-bg);
  border-radius: var(--saved-for-later-dropdown-radius) var(--saved-for-later-dropdown-radius) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.savedForLater-dropdown-buttons {
  display: flex;
  gap: 8px;
}

.savedForLater-view-all-btn {
  background: var(--saved-for-later-dropdown-btn-bg);
  color: var(--saved-for-later-dropdown-btn-text);
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color var(--saved-for-later-transition);
}

.savedForLater-view-all-btn:hover {
  background: var(--saved-for-later-dropdown-btn-hover);
}

/* Loading State */
.savedForLater-loading {
  padding: 20px;
  text-align: center;
  color: var(--saved-for-later-dropdown-text-secondary);
}

/* Empty State */
.savedForLater-empty {
  padding: 20px;
  text-align: center;
  color: var(--saved-for-later-dropdown-text-secondary);
}

/* Product Card in Dropdown */
.savedForLater-dropdown-card {
  padding: var(--saved-for-later-dropdown-padding);
  border-bottom: 1px solid var(--saved-for-later-dropdown-header-border);
  display: flex;
  align-items: center;
  gap: var(--saved-for-later-dropdown-gap);
  transition: background-color var(--saved-for-later-transition);
  cursor: pointer;
}

.savedForLater-dropdown-card:hover {
  background-color: var(--saved-for-later-dropdown-header-bg);
}

.savedForLater-dropdown-card:last-child {
  border-bottom: none;
}

/* Product Image in Dropdown */
.savedForLater-dropdown-image-container {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  background: #f8f9fa;
}

.savedForLater-dropdown-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Product Info in Dropdown */
.savedForLater-dropdown-info {
  flex: 1;
  min-width: 0;
}

.savedForLater-dropdown-name {
  font-weight: 500;
  color: var(--saved-for-later-dropdown-text-primary);
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Price Container in Dropdown */
.savedForLater-dropdown-price-container {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.savedForLater-dropdown-original-price {
  color: var(--saved-for-later-dropdown-text-muted);
  text-decoration: line-through;
}

.savedForLater-dropdown-sale-price {
  color: var(--saved-for-later-dropdown-text-error);
  font-weight: bold;
}

.savedForLater-dropdown-regular-price {
  color: var(--saved-for-later-dropdown-text-primary);
  font-weight: bold;
}

.savedForLater-dropdown-discount-badge {
  background: var(--saved-for-later-dropdown-text-error);
  color: var(--saved-for-later-dropdown-btn-text);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
}

/* Remove Button in Dropdown */
.savedForLater-dropdown-remove-btn {
  background: none;
  border: none;
  color: var(--saved-for-later-dropdown-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color var(--saved-for-later-transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.savedForLater-dropdown-remove-btn:hover {
  color: var(--saved-for-later-dropdown-text-error);
}

/* Heart Icon Container - Base Styles */
.savedForLater-icon-container {
  position: absolute;
  cursor: pointer;
  z-index: 10;
  background: var(--saved-for-later-icon-bg);
  border-radius: var(--saved-for-later-icon-radius);
  padding: 5px;
  transition: transform var(--saved-for-later-transition);
}

.savedForLater-icon-container:hover {
  transform: scale(1.1);
}

.savedForLater-icon-container img {
  width: 20px;
  height: 20px;
  display: block;
}

/* Product Page Icon */
.savedForLater-icon-product {
  bottom: 10px;
  right: 10px;
  background: var(--saved-for-later-icon-bg-hover);
  box-shadow: 0 2px 8px var(--saved-for-later-dropdown-shadow);
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.savedForLater-icon-product:hover {
  background: var(--saved-for-later-icon-bg-hover);
  box-shadow: 0 4px 12px var(--saved-for-later-dropdown-shadow);
}

/* Listing Page Icon */
.savedForLater-icon-listing {
  top: 10px;
  right: 10px;
  background: var(--saved-for-later-icon-bg);
  box-shadow: 0 2px 6px var(--saved-for-later-dropdown-shadow);
}

.savedForLater-icon-listing:hover {
  background: var(--saved-for-later-icon-bg-hover);
  box-shadow: 0 3px 8px var(--saved-for-later-dropdown-shadow);
}

/* Basket Page Icon */
.savedForLater-icon-basket {
  top: 0px;
  left: 0px;
  background: var(--saved-for-later-icon-basket-bg);
  color: var(--saved-for-later-dropdown-btn-text);
  border-radius: var(--saved-for-later-icon-basket-radius);
  padding: 8px;
}

.savedForLater-icon-basket:hover {
  background: var(--saved-for-later-icon-basket-hover);
  transform: scale(1.05);
}

.savedForLater-icon-basket img {
  filter: brightness(0) invert(1);
}

/* Error State */
.savedForLater-error {
  padding: 20px;
  text-align: center;
  color: var(--saved-for-later-dropdown-text-error);
}

.savedForLater-error-message {
  margin-bottom: 8px;
}

.savedForLater-error-details {
  font-size: 12px;
  color: var(--saved-for-later-dropdown-text-secondary);
}