/* Jasmin Store - Pastel Pink & Candy PAUD Theme */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Quicksand:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --primary-pink: #ff4d8d;
  --primary-pink-dark: #e60067;
  --primary-pink-light: #ffe4ed;
  --accent-yellow: #ffd166;
  --accent-mint: #06d6a0;
  --accent-cyan: #4cc9f0;
  --bg-candy: #fff5f8;
  --text-dark: #2d232e;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-candy);
  color: var(--text-dark);
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Fredoka', 'Quicksand', sans-serif;
}

.font-body {
  font-family: 'Quicksand', 'Plus Jakarta Sans', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #ffeef4;
}
::-webkit-scrollbar-thumb {
  background: #fbb6ce;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #f687b3;
}

/* Floating Animations */
@keyframes float-gentle {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.animate-float {
  animation: float-gentle 4s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-gentle 4.5s ease-in-out 1.5s infinite;
}

/* Pulse Glow for WhatsApp & Buy Buttons */
@keyframes pulse-pink {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 77, 141, 0.45);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(255, 77, 141, 0);
  }
}

.pulse-pink {
  animation: pulse-pink 2s infinite;
}

/* Card Hover Effect */
.product-card {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 25px -5px rgba(255, 77, 141, 0.12), 0 10px 10px -5px rgba(255, 77, 141, 0.06);
}

/* Category Pill Card */
.cat-card-item {
  transition: all 0.25s ease;
}
.cat-card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px -4px rgba(255, 77, 141, 0.15);
}

/* Button Bounce */
.btn-bounce:active {
  transform: scale(0.96);
}

/* Modal Animation */
.modal-fade-in {
  animation: modalFadeIn 0.25s ease-out forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Glassmorphism */
.glass-nav-pink {
  background: rgba(255, 245, 248, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Official Stamp Effect for Invoices */
.paid-stamp {
  display: inline-block;
  padding: 6px 14px;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 2px;
  color: #059669;
  border: 3px dashed #059669;
  border-radius: 8px;
  transform: rotate(-10deg);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
  background-color: rgba(236, 253, 245, 0.85);
  user-select: none;
}

.pending-stamp {
  display: inline-block;
  padding: 6px 14px;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1px;
  color: #d97706;
  border: 3px dashed #d97706;
  border-radius: 8px;
  transform: rotate(-6deg);
  background-color: rgba(254, 243, 199, 0.85);
  user-select: none;
}

/* Print Stylesheet for Invoices & Resi */
@media print {
  body * {
    visibility: hidden;
  }
  
  #invoice-print-area, #invoice-print-area * {
    visibility: visible;
  }
  
  #invoice-print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
  }

  .no-print {
    display: none !important;
  }
}

/* Mobile PWA & Notch Safe Area Padding */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  nav[aria-label="Navigasi Bawah Ponsel"] {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  }
  body {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }
}