/* ==========================================================================
   AntStoreVN - Main Stylesheet
   Separated CSS architecture for core components, utilities, and layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Variables)
   -------------------------------------------------------------------------- */
:root {
  --scrollbar-width: 6px;
  --scrollbar-track: #0f172a;
  --scrollbar-thumb: #ea580c;
  --scrollbar-thumb-hover: #f97316;
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Page-specific scrollbar accents */
body.page-groupbuy,
.page-accent-rose {
  --scrollbar-thumb: #f43f5e;
  --scrollbar-thumb-hover: #fb7185;
}

body.page-vip,
.page-accent-amber {
  --scrollbar-thumb: #f59e0b;
  --scrollbar-thumb-hover: #fbbf24;
}

/* --------------------------------------------------------------------------
   Custom Scrollbars
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Utility to completely hide scrollbar while preserving scrolling */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* --------------------------------------------------------------------------
   Glassmorphism Effects
   -------------------------------------------------------------------------- */
.glass-header {
  background: rgba(18, 18, 23, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glass-panel {
  background: rgba(18, 18, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-dropdown {
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* --------------------------------------------------------------------------
   Interactive & Animation Helpers
   -------------------------------------------------------------------------- */
.modal-backdrop-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Subtle glowing pulse */
@keyframes subtlePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.02);
  }
}

.animate-subtle-pulse {
  animation: subtlePulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Card hover lift effect */
.card-hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.card-hover-lift:hover {
  transform: translateY(-3px);
}

/* Line clamp utilities for legacy browser compatibility */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Password Masking & Browser / iCloud Password Manager Popup Suppression
   -------------------------------------------------------------------------- */
input.asvn-masked-password {
  -webkit-text-security: disc !important;
  text-security: disc !important;
  font-family: var(--font-sans);
}

input::-ms-reveal,
input::-ms-clear,
input::-webkit-credentials-auto-fill-button,
input::-webkit-contacts-auto-fill-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}