/**
 * ============================================================================
 * DEAL FINDER WIDGET EFFECTS - OFFER CARD HOVER ANIMATIONS
 * ============================================================================
 * Interactive hover effects for deal cards with emoji animations.
 * ============================================================================
 */

/* ========================================================================== */
/* WIDGET CONTAINER EFFECTS */
/* ========================================================================== */
.deal-finder-widget {
  transition: all 0.3s ease; /* Smooth transitions */
}

/* WIDGET HOVER STATE - Shadow */
.deal-finder-widget:hover {
  border-color: #2a2530; /* Lighter border */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Drop shadow */
}

/* ========================================================================== */
/* DEAL LINK EFFECTS */
/* ========================================================================== */
.deal-finder-widget__link {
  transition: all 0.3s ease; /* Smooth transitions */
}

/* LINK HOVER STATE - Slide and shadow */
.deal-finder-widget__link:hover {
  background-color: #2a2530; /* Lighter background */
  transform: translateX(4px); /* Slide right */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Drop shadow */
}

/* ========================================================================== */
/* EMOJI EFFECTS */
/* ========================================================================== */
.deal-finder-widget__emoji {
  transition: transform 0.3s ease; /* Smooth transform */
}

/* EMOJI HOVER STATE - Scale and rotate */
.deal-finder-widget__link:hover .deal-finder-widget__emoji {
  transform: scale(1.2) rotate(10deg); /* Grow and tilt */
}

/* ========================================================================== */
/* DEAL NAME EFFECTS */
/* ========================================================================== */
.deal-finder-widget__name {
  transition: color 0.3s ease; /* Smooth color change */
}

/* NAME HOVER STATE - Brighten */
.deal-finder-widget__link:hover .deal-finder-widget__name {
  color: rgba(255, 255, 255, 0.9); /* Brighter white */
}

/* ========================================================================== */
/* PRICE EFFECTS */
/* ========================================================================== */
.deal-finder-widget__price {
  transition: all 0.3s ease; /* Smooth transitions */
}

/* PRICE HOVER STATE - Brighten and scale */
.deal-finder-widget__link:hover .deal-finder-widget__price {
  color: rgba(255, 255, 255, 1); /* Pure white */
  transform: scale(1.05); /* Scale up slightly */
}