/* Base custom styles and CSS Variables for Borneo Walet */
:root {
  --color-pure-black: #000000;
  --color-golden-yellow: #FFD700;
}

/* Ensure smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Base resets for touch targets, ensuring elements are easy to tap on mobile */
button, 
a, 
input, 
select, 
textarea {
    touch-action: manipulation;
}

/* Hide scrollbar for clean carousels later */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* ─────────────────────────────────────────────
   Premium Button Micro-Animations
   ───────────────────────────────────────────── */
/* Target all buttons and primary CTA links, excluding the segmented language toggles and quantity steppers */
button:not(.px-3):not(.px-6):not(#qty-minus):not(#qty-plus), 
a.bg-golden-yellow, 
a.bg-pure-black {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow;
}

/* Hover State: Float up slightly and cast a larger, softer shadow */
button:not(.px-3):not(.px-6):not(#mobile-menu-btn):not(#qty-minus):not(#qty-plus):hover, 
a.bg-golden-yellow:hover, 
a.bg-pure-black:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Active State: Tactile 'press' effect when clicked */
button:not(.px-3):not(.px-6):not(#mobile-menu-btn):not(#qty-minus):not(#qty-plus):active, 
a.bg-golden-yellow:active, 
a.bg-pure-black:active {
    transform: translateY(1px) scale(0.96);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Smooth out the language toggle specifically (no floating, just color fading) */
.px-3, .px-6 {
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}