/**
 * Wallpaper Custom Official (WPCO) - Design System & Custom CSS
 * Colors from design/warna.txt:
 * #262626, #525152, #606060, #dddddd, #efefef, #f5841f, #ffa300, #1f6f76, #269da1, #b2dadc
 */

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

@font-face {
  font-family: 'Montserrat Local';
  src: url('/assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --wpco-primary: #1f6f76;
  --wpco-primary-dark: #165359;
  --wpco-primary-light: #269da1;
  --wpco-accent-teal: #b2dadc;
  --wpco-orange: #f5841f;
  --wpco-orange-dark: #d96f13;
  --wpco-amber: #ffa300;
  --wpco-dark: #262626;
  --wpco-gray-dark: #525152;
  --wpco-gray-muted: #606060;
  --wpco-border: #dddddd;
  --wpco-bg-gray: #efefef;
  --wpco-red: #ef4444;
}

body {
  font-family: 'Montserrat', 'Montserrat Local', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--wpco-dark);
  background-color: #fafbfc;
  -webkit-font-smoothing: antialiased;
}

/* Custom Utilities */
.bg-wpco-primary { background-color: var(--wpco-primary); }
.bg-wpco-primary-dark { background-color: var(--wpco-primary-dark); }
.bg-wpco-secondary { background-color: var(--wpco-primary-light); }
.bg-wpco-accent { background-color: var(--wpco-accent-teal); }
.bg-wpco-orange { background-color: var(--wpco-orange); }
.bg-wpco-orange-dark { background-color: var(--wpco-orange-dark); }
.bg-wpco-amber { background-color: var(--wpco-amber); }
.bg-wpco-gray { background-color: var(--wpco-bg-gray); }

.text-wpco-primary { color: var(--wpco-primary); }
.text-wpco-primary-light { color: var(--wpco-primary-light); }
.text-wpco-orange { color: var(--wpco-orange); }
.text-wpco-amber { color: var(--wpco-amber); }
.text-wpco-dark { color: var(--wpco-dark); }
.text-wpco-gray { color: var(--wpco-gray-dark); }
.text-wpco-muted { color: var(--wpco-gray-muted); }

.border-wpco { border-color: var(--wpco-border); }
.border-wpco-primary { border-color: var(--wpco-primary); }
.border-wpco-orange { border-color: var(--wpco-orange); }

/* Buttons */
.btn-wpco-primary {
  background-color: var(--wpco-primary);
  color: #ffffff;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}
.btn-wpco-primary:hover {
  background-color: var(--wpco-primary-dark);
  box-shadow: 0 4px 14px rgba(31, 111, 118, 0.35);
}

.btn-wpco-orange {
  background-color: var(--wpco-orange);
  color: #ffffff;
  font-weight: 700;
  transition: all 0.2s ease-in-out;
}
.btn-wpco-orange:hover {
  background-color: var(--wpco-orange-dark);
  box-shadow: 0 4px 14px rgba(245, 132, 31, 0.4);
}

.btn-wpco-outline {
  border: 1.5px solid var(--wpco-primary);
  color: var(--wpco-primary);
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}
.btn-wpco-outline:hover {
  background-color: var(--wpco-primary);
  color: #ffffff;
}

/* Product Card Styling */
.product-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 0.85rem;
  overflow: hidden;
  position: relative;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  border-color: #cbd5e1;
}

/* Discount Badge */
.badge-discount {
  background-color: var(--wpco-red);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 0.375rem;
  letter-spacing: 0.02em;
}

/* Hide scrollbar for clean horizontal scrolling */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Slider transition */
.slide-fade-enter {
  opacity: 0;
  transform: scale(0.98);
}
.slide-fade-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: all 0.4s ease-out;
}

/* Mobile Sticky Bottom Bar */
.mobile-bottom-bar {
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}