/* Location-based pricing styles - optimized for performance */

/* Use transform for animations instead of layout-triggering properties */
#pricing-loading {
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
}

#currency-indicator {
  font-weight: 500;
  margin-bottom: 1rem;
}

.pricing-amount {
  font-weight: bold;
  transition: background-color 0.3s ease;
  will-change: background-color;
}

/* Loading animation for pricing detection - using transform for better performance */
#pricing-loading .icon {
  animation: spin 1s linear infinite;
  will-change: transform;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Highlight pricing changes - optimized to avoid layout thrashing */
.pricing-amount.updated {
  animation: priceHighlight 0.5s ease-in-out;
}

@keyframes priceHighlight {
  0% { background-color: transparent; }
  50% { background-color: rgba(72, 199, 142, 0.2); }
  100% { background-color: transparent; }
}

/* Responsive currency indicator */
@media (max-width: 768px) {
  #currency-indicator {
    font-size: 0.875rem;
  }
}

/* Pricing disclaimer styling */
#pricing-disclaimer {
  font-style: italic;
}

/* Override notification padding for better mobile display */
.notification.is-info.is-light {
  padding: 0.75rem 1rem;
}

.notification.is-info.is-light .icon {
  margin-right: 0.5rem;
}

/* Performance optimization: Use content-visibility for off-screen elements */
.card {
  content-visibility: auto;
  contain-intrinsic-size: 400px;
}

/* Prevent layout shift by reserving space for pricing elements */
.pricing-amount {
  min-height: 1.5em;
  display: inline-block;
}