/* ============================================================
   KCK Web - Custom CSS
   Tambahan untuk Tailwind: animations, decorations, custom utilities
   ============================================================ */

/* Paper grain background */
.grain {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(168, 29, 42, 0.04), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212, 165, 116, 0.06), transparent 50%);
}

/* Hero gradient */
.hero-bg {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(255, 77, 46, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(212, 165, 116, 0.22) 0%, transparent 50%),
    linear-gradient(180deg, #FFF6EC 0%, #FBE9D2 100%);
}

/* Promo card maroon gradient */
.promo-hero {
  background:
    radial-gradient(circle at 100% 0%, #FF4D2E 0%, transparent 60%),
    linear-gradient(135deg, #A91D2A 0%, #841421 50%, #5E0E18 100%);
}

/* Sambal splat decorative */
.splat::before {
  content: '';
  position: absolute;
  width: 110px; height: 110px;
  background: radial-gradient(closest-side, #FF4D2E 70%, transparent 72%);
  border-radius: 60% 40% 55% 45% / 50% 45% 55% 50%;
  filter: blur(0.4px);
  opacity: 0.95;
  z-index: 0;
}

/* Sticker badge (rotated playful tag) */
.sticker {
  display: inline-block;
  background: #FF4D2E;
  color: #FFF6EC;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  transform: rotate(-6deg);
  letter-spacing: 0.04em;
  box-shadow: 0 4px 0 rgba(168, 29, 42, 0.4);
  text-transform: uppercase;
}

.sticker-gold { background: #B58858; }
.sticker-ink { background: #1A0F0A; }

/* Pill toggle for pickup/delivery */
.pill-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #FBE9D2;
  border-radius: 999px;
}

.pill-toggle button {
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  color: #5E0E18;
  transition: all 0.2s ease;
  background: transparent;
  border: none;
  cursor: pointer;
}

.pill-toggle button.active {
  background: #A91D2A;
  color: #FFF6EC;
  box-shadow: 0 4px 12px -2px rgba(168, 29, 42, 0.5);
}

/* Chip filter */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #FFF6EC;
  border: 1.5px solid rgba(168, 29, 42, 0.2);
  font-size: 12px;
  font-weight: 600;
  color: #841421;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.chip.active {
  background: #A91D2A;
  color: #FFF6EC;
  border-color: #A91D2A;
}

.chip:hover:not(.active) {
  border-color: #A91D2A;
}

/* Buttons */
.btn-primary {
  background: #A91D2A;
  color: #FFF6EC;
  padding: 12px 24px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 6px 0 #5E0E18, 0 10px 24px -6px rgba(168, 29, 42, 0.4);
  transition: all 0.15s ease;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 4px 0 #5E0E18, 0 6px 16px -4px rgba(168, 29, 42, 0.4);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(6px);
  box-shadow: 0 0 0 #5E0E18;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  color: #A91D2A;
  padding: 12px 24px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid #A91D2A;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: #FAD9D9;
}

/* Product image gradients (mock untuk product tanpa image) */
.img-katsu1 { background: linear-gradient(135deg, #F4A261 0%, #E76F51 100%); }
.img-katsu2 { background: linear-gradient(135deg, #E9C46A 0%, #F4A261 100%); }
.img-katsu3 { background: linear-gradient(135deg, #E76F51 0%, #C8243A 100%); }
.img-katsu4 { background: linear-gradient(135deg, #84A98C 0%, #52796F 100%); }
.img-katsu5 { background: linear-gradient(135deg, #FFD166 0%, #F77F00 100%); }
.img-katsu6 { background: linear-gradient(135deg, #FCBF49 0%, #F4A261 100%); }

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.badge-pending { background: #FEF3C7; color: #92400E; }
.badge-paid { background: #DBEAFE; color: #1E40AF; }
.badge-preparing { background: #FED7AA; color: #9A3412; }
.badge-ready { background: #D1FAE5; color: #065F46; }
.badge-completed { background: #E5E7EB; color: #374151; }
.badge-cancelled { background: #FECACA; color: #991B1B; }

/* Product card hover */
.product-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -12px rgba(168, 29, 42, 0.28);
}

/* Floating cart button */
.floating-cart {
  position: fixed;
  bottom: 96px;
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #FF4D2E;
  box-shadow: 0 12px 28px -6px rgba(255, 77, 46, 0.6), 0 4px 0 #A91D2A;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF6EC;
  z-index: 40;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.floating-cart:hover { transform: scale(1.05); }

.floating-cart .badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #1A0F0A;
  color: #FFF6EC;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  border: 2px solid #FFF6EC;
}

/* Pulse animation for OTP/notification dots */
.pulse-dot {
  animation: pulseDot 1.4s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}

/* Float animation for hero illustration */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

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

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #FBE9D2 0%, #FFF6EC 50%, #FBE9D2 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Body styles */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #FFF6EC;
  color: #1A0F0A;
  -webkit-tap-highlight-color: transparent;
}

.font-display { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; }
.font-script { font-family: 'Caveat', cursive; }

/* Hide scrollbar pada horizontal scroll (filter chips) */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Mobile container max-width (looks good di desktop juga) */
.app-container {
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: #FFF6EC;
  position: relative;
  padding-bottom: 80px; /* space for bottom nav */
}

/* Padding adjustment when no bottom nav */
.app-container.no-nav { padding-bottom: 0; }

/* Sticky search/filter bar */
.sticky-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #FFF6EC;
  border-bottom: 1px solid rgba(168, 29, 42, 0.08);
}

/* Form input common style */
.input-field {
  width: 100%;
  padding: 12px 16px;
  background: white;
  border: 2px solid rgba(168, 29, 42, 0.15);
  border-radius: 14px;
  font-weight: 600;
  font-size: 14px;
  color: #1A0F0A;
  outline: none;
  transition: border-color 0.2s ease;
}

.input-field:focus {
  border-color: #A91D2A;
}

.input-field::placeholder {
  color: rgba(26, 15, 10, 0.3);
  font-weight: 400;
}

.input-error {
  border-color: #C8243A !important;
}