:where([class^="ri-"])::before {
    content: "\f3c2";
}

.glassmorphism {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-bg {
    background-image: url('/assets/images/background.png');
    background-size: cover;
    background-position: center;
    /* Allow background to scroll normally to prevent overlay issues */
    background-attachment: scroll;
}

/* Parallax effect removed for hero background to allow normal scrolling
   This class was causing the hero content to translate and overlap the background
   when scrolling. Kept as comment in case it's needed later. */

.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.product-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(114, 47, 55, 0.08);
}

.product-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 32px 64px rgba(114, 47, 55, 0.12), 0 16px 32px rgba(114, 47, 55, 0.08);
    border-color: rgba(200, 168, 130, 0.3);
}

.section-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(114, 47, 55, 0.1), transparent);
}

.elegant-gradient {
    background: linear-gradient(135deg, #722F37 0%, #8B4513 50%, #722F37 100%);
}

.cart-badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.mobile-menu.active {
    transform: translateX(0);
    opacity: 1;
}

/* Premium Navbar Styles */
.nav-scrolled {
    background: rgba(114, 47, 55, 0.98) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

.nav-link {
    position: relative;
    padding-bottom: 4px;
    animation: navLinkFloat 3s ease-in-out infinite;
}

.nav-link:nth-child(1) {
    animation-delay: 0s;
}

.nav-link:nth-child(2) {
    animation-delay: 0.2s;
}

.nav-link:nth-child(3) {
    animation-delay: 0.4s;
}

.nav-link:nth-child(4) {
    animation-delay: 0.6s;
}

.nav-link:nth-child(5) {
    animation-delay: 0.8s;
}

@keyframes navLinkFloat {
    0%, 100% {
        transform: translateY(0);
        text-shadow: 0 0 0 transparent;
    }
    50% {
        transform: translateY(-2px);
        text-shadow: 0 2px 8px rgba(200, 168, 130, 0.3);
    }
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #C8A882, transparent);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link::before {
    content: '◆';
    position: absolute;
    left: -20px;
    opacity: 0;
    color: #C8A882;
    font-size: 8px;
    transition: all 0.3s ease;
    animation: diamondPulse 2s ease-in-out infinite;
}

@keyframes diamondPulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.2);
        filter: brightness(1.5) drop-shadow(0 0 4px #C8A882);
    }
}

.nav-link:hover::before {
    opacity: 1;
    left: -15px;
}

.logo-container {
    transition: transform 0.3s ease;
    animation: logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.logo-container:hover {
    transform: scale(1.05) translateY(-3px);
    animation: none;
}

.logo-icon {
    background: linear-gradient(135deg, #C8A882 0%, #D4B896 100%);
    box-shadow: 0 4px 12px rgba(200, 168, 130, 0.3);
    transition: all 0.3s ease;
    position: relative;
}

.logo-icon::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #C8A882, #D4B896);
    border-radius: inherit;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.3s ease;
    z-index: -1;
}

.logo-icon:hover {
    box-shadow: 0 6px 20px rgba(200, 168, 130, 0.5);
    transform: rotate(5deg);
}

.logo-icon:hover::after {
    opacity: 0.6;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.mobile-menu-item {
    opacity: 0;
    transform: translateX(-30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.mobile-menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    background: linear-gradient(90deg, #C8A882, transparent);
    transform: translateY(-50%);
    transition: all 0.4s ease;
    border-radius: 0 4px 4px 0;
}

.mobile-menu-item:hover::before,
.mobile-menu-item:active::before {
    width: 4px;
    height: 100%;
}

.mobile-menu.active .mobile-menu-item {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.mobile-menu.active .mobile-menu-item:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-menu.active .mobile-menu-item:nth-child(2) {
    transition-delay: 0.2s;
}

.mobile-menu.active .mobile-menu-item:nth-child(3) {
    transition-delay: 0.3s;
}

.mobile-menu.active .mobile-menu-item:nth-child(4) {
    transition-delay: 0.4s;
}

.mobile-menu.active .mobile-menu-item:nth-child(5) {
    transition-delay: 0.5s;
}

.mobile-menu-item i {
    transition: all 0.3s ease;
    display: inline-block;
}

.mobile-menu-item:hover i,
.mobile-menu-item:active i {
    transform: scale(1.2) rotate(5deg);
    color: #C8A882;
}

/* Mobile Menu Welcome Section Animation */
.mobile-menu h3 {
    animation: slideInFromLeft 0.6s ease-out;
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile Menu Icon Container Animation */
.mobile-menu-item .w-10 {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-item:hover .w-10 {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 4px 12px rgba(200, 168, 130, 0.3);
}

/* Arrow Animation */
.mobile-menu-item .ri-arrow-right-s-line {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-item:hover .ri-arrow-right-s-line {
    transform: translateX(4px);
}

/* Social Media Button Enhanced Animation */
.mobile-menu a[class*="w-12"] {
    position: relative;
    overflow: hidden;
}

.mobile-menu a[class*="w-12"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(200, 168, 130, 0.2), rgba(200, 168, 130, 0.4));
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.mobile-menu a[class*="w-12"]:hover::before {
    transform: translateY(0);
}

.mobile-menu a[class*="w-12"] i {
    position: relative;
    z-index: 1;
}

.hamburger {
    width: 24px;
    height: 20px;
    position: relative;
    cursor: pointer;
}

.hamburger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: white;
    border-radius: 2px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: all 0.25s ease-in-out;
}

.hamburger span:nth-child(1) {
    top: 0px;
}

.hamburger span:nth-child(2) {
    top: 9px;
}

.hamburger span:nth-child(3) {
    top: 18px;
}

.hamburger.active span:nth-child(1) {
    top: 9px;
    transform: rotate(135deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.hamburger.active span:nth-child(3) {
    top: 9px;
    transform: rotate(-135deg);
}

/* Desktop Social Media Icons Animation */
nav .w-9 {
    position: relative;
    overflow: hidden;
}

nav .w-9::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(200, 168, 130, 0.4), transparent);
    opacity: 0;
    transform: scale(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

nav .w-9:hover::before {
    opacity: 1;
    transform: scale(1);
}

nav .w-9 i {
    transition: all 0.3s ease;
}

nav .w-9:hover i {
    animation: iconBounce 0.6s ease infinite;
}

@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* Contact Button Animation */
nav a[href="#contact"].bg-secondary {
    position: relative;
    overflow: hidden;
}

nav a[href="#contact"].bg-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

nav a[href="#contact"].bg-secondary:hover::before {
    left: 100%;
}

nav a[href="#contact"].bg-secondary {
    animation: buttonGlow 3s ease-in-out infinite;
}

@keyframes buttonGlow {
    0%, 100% {
        box-shadow: 0 0 0 rgba(200, 168, 130, 0);
    }
    50% {
        box-shadow: 0 0 20px rgba(200, 168, 130, 0.4);
    }
}

/* Filter Button Styles */
.filter-btn {
    position: relative;
    transform: scale(1);
}

.filter-btn:hover {
    transform: scale(1.05);
}

.filter-btn.active {
    background: linear-gradient(135deg, #722F37 0%, #8B4513 50%, #722F37 100%);
    box-shadow: 0 8px 24px rgba(114, 47, 55, 0.3);
}

/* Premium Badge Animation */
.premium-badge {
    position: relative;
    animation: premiumPulse 3s ease-in-out infinite;
}

@keyframes premiumPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.premium-badge::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #C8A882, #D4B896, #C8A882);
    border-radius: inherit;
    opacity: 0;
    animation: premiumGlow 3s ease-in-out infinite;
    z-index: -1;
}

@keyframes premiumGlow {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }
}

/* Star Animation */
.star-icon {
    display: inline-block;
    animation: starTwinkle 2s ease-in-out infinite;
}

.star-icon:nth-child(1) {
    animation-delay: 0s;
}

.star-icon:nth-child(2) {
    animation-delay: 0.2s;
}

.star-icon:nth-child(3) {
    animation-delay: 0.4s;
}

.star-icon:nth-child(4) {
    animation-delay: 0.6s;
}

.star-icon:nth-child(5) {
    animation-delay: 0.8s;
}

@keyframes starTwinkle {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.2);
        filter: brightness(1.3) drop-shadow(0 0 3px #C8A882);
    }
}

/* Product Card Filter Animation */
.product-card.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Newsletter Section Animations */
@keyframes float {

    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

    33% {
        transform: translateY(-20px) translateX(10px);
    }

    66% {
        transform: translateY(-10px) translateX(-10px);
    }
}

@keyframes float-delayed {

    0%,
    100% {
        transform: translateY(0) translateX(0) scale(1);
    }

    33% {
        transform: translateY(15px) translateX(-15px) scale(1.1);
    }

    66% {
        transform: translateY(-15px) translateX(15px) scale(0.9);
    }
}

@keyframes pulse-slow {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

@keyframes gradient-slow {

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

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

@keyframes bounce-gentle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

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

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

.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}

.animate-gradient-slow {
    background-size: 200% 200%;
    animation: gradient-slow 3s ease infinite;
}

.animate-bounce-gentle {
    animation: bounce-gentle 2s ease-in-out infinite;
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.scroll-to-top.hidden-for-footer {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
}

.scroll-to-top-btn {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, #722F37 0%, #8B4513 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(114, 47, 55, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.scroll-to-top-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #C8A882 0%, #D4B896 100%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.scroll-to-top-btn:hover::before {
    opacity: 1;
}

.scroll-to-top-btn:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 12px 32px rgba(114, 47, 55, 0.5), 0 6px 16px rgba(0, 0, 0, 0.3);
}

.scroll-to-top-btn:active {
    transform: translateY(-2px) scale(1.05);
}

.scroll-to-top-icon {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    color: white;
    transition: all 0.3s ease;
}

.scroll-to-top-btn:hover .scroll-to-top-icon {
    animation: bounce-gentle 0.6s ease infinite;
    color: #722F37;
}

/* Progress Ring */
.progress-ring {
    position: absolute;
    top: -4px;
    left: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    transform: rotate(-90deg);
}

.progress-ring-circle {
    fill: none;
    stroke: #C8A882;
    stroke-width: 3;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    transition: stroke-dashoffset 0.3s ease;
    filter: drop-shadow(0 0 6px rgba(200, 168, 130, 0.6));
}

@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
    }

    .scroll-to-top-btn {
        width: 3rem;
        height: 3rem;
    }

    .scroll-to-top-icon {
        font-size: 1.25rem;
    }
}

/* Language Selector Styles */
#lang-dropdown {
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.lang-option {
    cursor: pointer;
    position: relative;
}

.lang-option.active-lang {
    background-color: rgba(114, 47, 55, 0.05);
    border-left-color: #C8A882 !important;
}

.lang-option:hover {
    background-color: rgba(114, 47, 55, 0.05);
}

.lang-check {
    transition: opacity 0.3s ease;
}

.lang-option-mobile {
    cursor: pointer;
    position: relative;
}

.lang-option-mobile.active-lang {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #C8A882;
}

/* Translation Loading Animation */
#translation-loading {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Google Translate Widget Override */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body {
    top: 0 !important;
}

.goog-te-balloon-frame {
    display: none !important;
}

#goog-gt-tt {
    display: none !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Language Selector Animation */
#lang-toggle-btn:hover i:first-child {
    transform: scale(1.1);
}

#lang-dropdown {
    max-height: 400px;
    overflow-y: auto;
}

#lang-dropdown::-webkit-scrollbar {
    width: 6px;
}

#lang-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#lang-dropdown::-webkit-scrollbar-thumb {
    background: #C8A882;
    border-radius: 10px;
}

#lang-dropdown::-webkit-scrollbar-thumb:hover {
    background: #722F37;
}

/* Mobile Language Selector */
.lang-option-mobile {
    cursor: pointer !important;
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.lang-option-mobile:active {
    transform: scale(0.95);
}

.lang-option-mobile:hover {
    cursor: pointer;
}

/* Mobile menu language section */
#mobile-menu .lang-option-mobile {
    position: relative;
    z-index: 10;
}

/* Smooth transition for translated content */
body[class*="translated"] {
    transition: opacity 0.3s ease;
}

/* Language selector responsive */
@media (max-width: 768px) {
    #language-selector-desktop {
        display: none !important;
    }
    
    /* Ensure mobile language buttons are clickable */
    .lang-option-mobile {
        touch-action: manipulation;
        min-height: 80px;
    }
}