/* VITAHERO NUTRITION - Custom UI & Responsive Styles */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --primary: #0284c7;
  --primary-dark: #0369a1;
  --secondary: #0f172a;
  --accent: #10b981;
  --bg-slate: #f8fafc;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fafbfc;
  color: #1e293b;
}

/* Smooth Transitions */
* {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Active Language Button */
.active-lang {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Glow effects & Badges */
.glow-primary {
  box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.25);
}

.hero-gradient {
  background: radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.08) 0%, rgba(248, 250, 252, 0) 50%),
              linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
}

.trust-badge-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

/* Custom Product Card Hover */
.product-card:hover {
  transform: translateY(-4px);
}

/* Line clamp helpers */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Custom micro typography */
.text-2xs {
  font-size: 0.70rem;
}
.text-3xs {
  font-size: 0.625rem;
}