/* Google Fonts for Luxury Aesthetics */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Outfit:wght@300;400;500;600;700;800&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
     /* Fonts */
     --bs-font-sans-serif: 'Pretendard', 'Outfit', sans-serif;
     --font-luxury-serif: 'Cinzel', serif;

     /* Color Tokens - Luxury Gold & Obsidian Black */
     --primary-gold: #c5a880;
     /* Champagne Gold */
     --accent-gold: #d4af37;
     /* Metallic Gold */
     --deep-gold: #b8860b;
     /* Dark Goldenrod */
     --light-gold: #f4ebd9;
     /* Soft gold */
     --obsidian-black: #0b0b0c;
     /* Pure deep obsidian black */
     --charcoal-black: #161618;
     /* Warm rich charcoal black */
     --bg-cream: #faf8f5;
     /* Soft warm premium cream background */
     --text-muted-gold: #8e8577;
     /* Soft gold-gray text */

     /* Bright Sky/Lavender Blue System (#a1c4fd family) */
     --accent-blue: #5b8ff9;
     /* Vibrant blue for high legibility on light backdrops */
     --light-blue: #a1c4fd;
     /* Requested soft sky blue (#a1c4fd) */
     --glow-blue-gradient: linear-gradient(135deg, rgba(161, 196, 253, 0.25) 0%, rgba(161, 196, 253, 0.08) 100%);

     /* Gradients */
     --gold-gradient: linear-gradient(135deg, #ffd700 0%, #d4af37 40%, #b8860b 80%, #aa7c11 100%);
     --dark-gradient: linear-gradient(180deg, #161618 0%, #0b0b0c 100%);
     --gold-glow-gradient: linear-gradient(135deg, rgba(91, 143, 249, 0.15) 0%, rgba(91, 143, 249, 0.05) 100%);

     /* Sophisticated Pearlescent Rainbow Gradients */
     --rainbow-gradient: linear-gradient(120deg, #ff9a9e 0%, #fecfef 20%, #a1c4fd 40%, #c2e9fb 60%, #e0c3fc 80%, #fbc2eb 100%);
     --rainbow-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.52) 100%);
     --rainbow-overlay-footer: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);

     /* Standard Bootstrap Override */
     --bs-primary: #5b8ff9;
     --bs-primary-rgb: 91, 143, 249;
}

body {
     font-family: var(--bs-font-sans-serif);
     background-color: var(--bg-cream);
     color: #2c2c2e;
     overflow-x: hidden;
}

.quantity-btn.rounded-start,
.quantity-btn.rounded-end {
     border: 1px solid #d9d9d9;
}

/* Animations */
@keyframes goldPulse {
     0% {
          box-shadow: 0 0 0 0 rgba(91, 143, 249, 0.4);
          background-color: var(--accent-blue);
     }

     50% {
          box-shadow: 0 0 0 10px rgba(91, 143, 249, 0);
          background-color: var(--charcoal-black);
     }

     100% {
          box-shadow: 0 0 0 0 rgba(91, 143, 249, 0);
          background-color: var(--accent-blue);
     }
}

@keyframes goldShine {
     0% {
          background-position: 0% 50%;
     }

     50% {
          background-position: 100% 50%;
     }

     100% {
          background-position: 0% 50%;
     }
}

@keyframes rainbowMove {
     0% {
          background-position: 0% 50%;
     }

     50% {
          background-position: 100% 50%;
     }

     100% {
          background-position: 0% 50%;
     }
}

.gold-pulse-btn {
     animation: goldPulse 4s infinite ease-in-out;
     color: #fff !important;
}

/* Typography Utilities */
.font-serif {
     font-family: var(--font-luxury-serif);
     /*letter-spacing: 0.08em;*/
}

/* Redefined gold text class to output bright sky/lavender blue icons/accents */
.text-gold {
     color: var(--accent-blue) !important;
}

.text-gradient-gold {
     background: var(--gold-gradient);
     background-clip: text;
     -webkit-background-clip: text;
     color: transparent;
     background-size: 200% auto;
     animation: goldShine 4s linear infinite;
}

.text-secondary-custom {
     color: var(--text-muted-gold);
}

.text-xs {
     font-size: 0.75rem;
}

.fw-medium {
     font-weight: 500 !important;
}

.ls-1 {
     letter-spacing: 0.1em;
}

/* Hover Effects */
.hover-primary:hover {
     color: var(--accent-blue) !important;
}

.hover-bg-subtle:hover {
     background-color: rgba(91, 143, 249, 0.08);
}

.transition-transform {
     transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Glassmorphic Navbar & Header with Pearlescent Rainbow */
.sticky-top {
     background: var(--rainbow-overlay), var(--rainbow-gradient) !important;
     background-size: 200% 200% !important;
     animation: rainbowMove 12s ease infinite;
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid rgba(161, 196, 253, 0.3);
     z-index: 1030;
}

.navbar-brand .text-logo {
     font-family: var(--bs-font-sans-serif);
     font-weight: 900;
     font-size: 1.4rem;
     background: linear-gradient(135deg, #111111 0%, #5bc6f9 50%, #111111 100%);
     background-clip: text;
     -webkit-background-clip: text;
     color: transparent;
     background-size: 200% auto;
     animation: goldShine 5s linear infinite;
     cursor: pointer;
}

.header-icons a {
     transition: all 0.3s ease;
     color: #1c1c1e !important;
}

.header-icons a:hover {
     color: var(--accent-blue) !important;
     transform: translateY(-2px);
}

/* Navigation Links */
.mainmenu a {
     font-size: 1.2rem;
     font-weight: 700;
     color: #1a1a1c !important;
     letter-spacing: 0.03em;
     transition: all 0.3s ease;
}

.mainmenu a:hover {
     color: var(--accent-blue) !important;
}

.mainmenu .submenu {
     background-color: #ffffff;
     border: 1px solid rgba(161, 196, 253, 0.3);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     border-radius: 12px;
     overflow: hidden;
}

.mainmenu .submenu a {
     font-size: 0.9rem;
     color: #2c2c2e !important;
     padding: 10px 20px;
     transition: all 0.2s ease;
}

.mainmenu .submenu a:hover {
     background: rgba(161, 196, 253, 0.1);
     color: var(--accent-blue) !important;
     padding-left: 24px;
}

/* Highlight submenu icons in bright sky blue */
.submenu i,
.dropdown-menu i {
     color: var(--accent-blue) !important;
}

/* Category Slider / Menu Swiper */
.menuSwiper .nav-link {
     font-weight: 600;
     color: #2c2c2e !important;
     transition: all 0.3s ease;
     padding: 8px 16px;
     border-radius: 30px;
     border: 1px solid transparent;
}

.menuSwiper .nav-link:hover,
.menuSwiper .swiper-slide-active .nav-link {
     color: var(--accent-blue) !important;
     background: rgba(161, 196, 253, 0.1);
     border-color: rgba(161, 196, 253, 0.2);
}

/* Search Bar Custom */
.search-bar form {
     border: 1px solid rgba(161, 196, 253, 0.3) !important;
     background-color: rgba(255, 255, 255, 0.4) !important;
     transition: all 0.3s ease;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-bar form:focus-within {
     border-color: var(--accent-blue) !important;
     background-color: rgba(255, 255, 255, 0.8) !important;
     box-shadow: 0 0 15px rgba(161, 196, 253, 0.15) !important;
}

.search-bar input {
     color: #2c2c2e !important;
}

.search-bar input::placeholder {
     color: rgba(0, 0, 0, 0.35);
}

.search-bar .btn-primary {
     background: linear-gradient(135deg, #a1c4fd 0%, #5b8ff9 100%) !important;
     border: none !important;
     color: #fff !important;
     font-weight: 700;
}

/* Product Card - Luxury Makeover */
.product-card {
     border: 1px solid rgba(161, 196, 253, 0.15);
     border-radius: 16px;
     transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     overflow: hidden;
     background: #ffffff;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
     position: relative;
}

.product-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 40px rgba(161, 196, 253, 0.08), 0 1px 3px rgba(0, 0, 0, 0.03);
     border-color: rgba(161, 196, 253, 0.35);
}

.card-img-wrap {
     position: relative;
     padding-bottom: 100%;
     overflow: hidden;
     background-color: #fafafa;
}

.card-img-wrap img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .card-img-wrap img {
     transform: scale(1.08);
}

.card-img-wrap::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 40%);
     pointer-events: none;
}

/* Custom Buttons */
.btn-gold {
     background: linear-gradient(135deg, #a1c4fd 0%, #5b8ff9 100%);
     color: #ffffff !important;
     font-weight: 700;
     border: none;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(91, 143, 249, 0.2);
}

.btn-gold:hover {
     transform: translateY(-1px);
     box-shadow: 0 8px 25px rgba(91, 143, 249, 0.35);
     opacity: 0.95;
}

.btn-outline-gold {
     border: 1px solid var(--light-blue);
     color: var(--accent-blue) !important;
     background: transparent;
     font-weight: 600;
     transition: all 0.3s ease;
}

.btn-outline-gold:hover {
     background: linear-gradient(135deg, #a1c4fd 0%, #5b8ff9 100%);
     color: #ffffff !important;
     border-color: transparent;
     box-shadow: 0 4px 15px rgba(91, 143, 249, 0.2);
}

/* PV Badge (MLM specific) */
.badge-pv {
     background: var(--glow-blue-gradient);
     border: 1px solid rgba(161, 196, 253, 0.4);
     color: var(--accent-blue) !important;
     font-weight: 700;
     letter-spacing: 0.05em;
     padding: 4px 10px;
     border-radius: 6px;
}

/* Profile / MyInfo Glassmorphism Header */
.glass-header {
     background: var(--rainbow-overlay), var(--rainbow-gradient) !important;
     background-size: 200% 200% !important;
     animation: rainbowMove 10s ease infinite;
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     border-bottom: 1px solid rgba(161, 196, 253, 0.2);
}

.profile-img-container {
     border: 2px solid var(--light-blue);
     box-shadow: 0 0 15px rgba(161, 196, 253, 0.2);
     border-radius: 50%;
}

.rounded-xl {
     border-radius: 16px;
}

.shadow-card {
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.btn-card {
     background: #ffffff;
     border: 1px solid rgba(161, 196, 253, 0.15);
     transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 30px rgba(161, 196, 253, 0.1);
     border-color: var(--accent-blue);
}

/* Mobile Bottom Navigation Bar with Pearlescent Rainbow */
.mobile-nav {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     width: 100%;
     z-index: 1040;
     background: var(--rainbow-overlay), var(--rainbow-gradient) !important;
     background-size: 200% 200% !important;
     animation: rainbowMove 12s ease infinite;
     border-top: 1px solid rgba(161, 196, 253, 0.25) !important;
     box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}

.mobile-nav a {
     color: #2c2c2e !important;
     transition: all 0.2s ease;
}

.mobile-nav a.dropdown-toggle::after {
     display: none;
}

.mobile-nav a:hover,
.mobile-nav .active {
     color: var(--accent-blue) !important;
}

.mobile-nav .center-dropup .dropdown-menu {
     background-color: #ffffff !important;
     border: 1px solid rgba(161, 196, 253, 0.25) !important;
     box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1) !important;
}

.mobile-nav .dropdown-item {
     color: #2c2c2e !important;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
     font-weight: 500;
}

.mobile-nav .dropdown-item:hover {
     background-color: rgba(161, 196, 253, 0.1) !important;
     color: var(--accent-blue) !important;
}

/* Footer Styling with Pearlescent Rainbow */
footer {
     background: var(--rainbow-overlay-footer), var(--rainbow-gradient) !important;
     background-size: 200% 200% !important;
     animation: rainbowMove 15s ease infinite;
     color: #3a3a3c !important;
     border-top: 1px solid rgba(161, 196, 253, 0.25) !important;
}

footer h5,
footer a {
     color: #1a1a1c !important;
     transition: all 0.3s ease;
}

footer a:hover {
     color: var(--accent-blue) !important;
     text-decoration: none;
}

/* Mobile padding adjustments */
@media (max-width: 991.98px) {
     body {
          padding-bottom: 90px;
     }
}