/* ==========================================================================
   CUSTOM UTILITY CLASSES - Nutrition Expert Theme
   Reusable components and utilities for layout, animations, and features
   ========================================================================== */

/* ==========================================================================
   1. CART COMPONENTS
   ========================================================================== */
.header-cart {
  position: relative;
}

/* .cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff6b00;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
} */

/* ==========================================================================
   2. ANIMATION UTILITIES (Reusable)
   ========================================================================== */
.fade-in {
  animation: fadeIn 0.5s ease;
}

.slide-up {
  animation: slideUp 0.5s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Loading spinner */
.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #0066a1;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

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

/* Note: Modal, About Section, Smooth Scrolling, Screen Reader Text, and Print Styles
   have been moved to style.css for better organization */

.f-38 {
  font-size: 38px;
}

.f-32 {
  font-size: 32px;
}

.f-24 {
  font-size: 24px;
}

.f-20 {
  font-size: 20px;
}

.f-14 {
  font-size: 14px;
}
.f-18 {
  font-size: 18px;
}

.f-16 {
  font-size: 16px;
}

.fw-300 {
    font-weight: 300;
}
.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}

.text-sky-blue {
  color: #0294cf;
}

.text-deep-navy {
  color: #003758;
}

.text-deep-sea {
  color: #014f86;
}

.text-ocean-blue {
  color: #0066a1;
}

.text-earth-brown {
  color: #732a18;
}

.text-pastel-blue {
  color: #739bb4;
}

/* #1E1E1E */
.text-dark {
  color: #1e1e1e;
}

.text-black {
  color: #0f1113;
}

/* #6B7280 */
.text-lighter {
  color: #6b7280;
}

.text-lightest {
  color: #9ca3af;
}

/* #1F2937 */
.text-gray-dark {
  color: #1f2937;
}