/* Overdijk Beton — Custom CSS */

/* Verberg Alpine x-cloak elementen direct bij laden — vóór Alpine init */
[x-cloak] { display: none !important; }

:root {
  --navy: #0A3D62;
  --navy-light: #1E5F8A;
  --navy-dark: #062a45;
  --navy-pale: #EBF3FA;
}

html { scroll-behavior: smooth; }

/* Smooth cart badge pulse */
@keyframes badgePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.badge-pop { animation: badgePop .3s ease; }

/* Hero gradient overlay */
.hero-overlay {
  background: linear-gradient(135deg, rgba(10,61,98,.82) 0%, rgba(10,61,98,.45) 60%, rgba(0,0,0,.15) 100%);
}

/* Product card hover lift */
.product-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(10,61,98,.15);
}

/* Navy accent border on card hover */
.product-card:hover .card-border {
  border-color: var(--navy-light);
}

/* Sticky nav backdrop */
.nav-scrolled {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Modal backdrop blur */
.modal-backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Category card scale */
.category-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.category-card:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 32px rgba(10,61,98,.18);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: var(--navy-light); border-radius: 3px; }

/* Subtle text selection */
::selection { background: rgba(30,95,138,.25); }

/* Trust badge icons */
.trust-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  flex-shrink: 0;
}

/* Button transitions */
button, a { transition: all .2s ease; }

/* Footer gradient */
.footer-gradient {
  background: linear-gradient(180deg, #0A3D62 0%, #062a45 100%);
}

/* Floating cart button bounce */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}
.cart-float:hover { animation: float .6s ease infinite; }

/* Notification toast */
.toast-enter { animation: slideInRight .3s ease; }
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}