/* ==========================================================================
   Grisel Beauty Spa - Premium Services Styling
   ========================================================================== */

/* Service Grid Layout Refinement */
.services-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 1rem 0;
}

/* Service Card Interactive Animations */
.elementor-widget-image-box,
.service-card-item,
.e-gallery-item {
  background: var(--bg-secondary);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-bounce);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.elementor-widget-image-box:hover,
.service-card-item:hover,
.e-gallery-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-lavender);
}

/* Micro-animations for card images */
.elementor-image-box-img img,
.service-card-item img,
.e-gallery-item img {
  transition: var(--transition-smooth);
}

.elementor-widget-image-box:hover .elementor-image-box-img img,
.service-card-item:hover img,
.e-gallery-item:hover img {
  transform: scale(1.06);
}

/* Premium pricing badges */
.service-price-tag {
  display: inline-block;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  color: var(--accent-lavender);
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  box-shadow: var(--shadow-sm);
  margin-top: 0.5rem;
}