/**
 * Organikas Custom Styles
 * Main stylesheet for the cosmetics e-commerce website
 * Primary Brand Color: #611c46 (Deep Purple)
 */

/* Custom width classes for category carousel */
.w-1-7 {
    width: 14.2857143% !important; /* 1/7 */
}

.w-1-9 {
    width: 11.1111111% !important; /* 1/9 */
}

/* Ensure responsive category carousel behavior */
@media (min-width: 1024px) {
    .category-item {
        width: 11.1111111% !important; /* 1/9 for large screens */
        flex-shrink: 0 !important;
    }
    
    .category-carousel-container {
        overflow: visible !important; /* Show all items on desktop */
    }
    
    #category-carousel {
        transform: none !important; /* Disable transform on desktop */
    }
    
    #category-prev, #category-next {
        display: none !important; /* Hide navigation buttons on desktop */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .category-item {
        width: 14.2857143% !important; /* 1/7 for mid-level screens */
        flex-shrink: 0 !important;
    }
    
    .category-carousel-container {
        overflow: visible !important; /* Show all items on tablet */
    }
    
    #category-carousel {
        transform: none !important; /* Disable transform on tablet */
    }
    
    #category-prev, #category-next {
        display: none !important; /* Hide navigation buttons on tablet */
    }
}

@media (max-width: 767px) {
    .category-item {
        width: 33.3333333% !important; /* 1/3 for mobile */
        flex-shrink: 0 !important;
    }
    
    .category-carousel-container {
        overflow: hidden !important; /* Keep carousel behavior on mobile */
    }
}

/* Global font size and spacing adjustment - 92% of original size (15% larger than previous 80%) */
html {
    font-size: 92%;
}

/* Ensure consistent font size across the site */
body {
    font-size: 1rem; /* This will now be 92% of the default */
}

/* Adjust spacing and gaps globally */
* {
    --spacing-scale: 0.92;
}

/* Scale common spacing utilities */
.p-1 { padding: calc(0.25rem * 0.92) !important; }
.p-2 { padding: calc(0.5rem * 0.92) !important; }
.p-3 { padding: calc(0.75rem * 0.92) !important; }
.p-4 { padding: calc(1rem * 0.92) !important; }
.p-5 { padding: calc(1.25rem * 0.92) !important; }
.p-6 { padding: calc(1.5rem * 0.92) !important; }
.p-8 { padding: calc(2rem * 0.92) !important; }

.m-1 { margin: calc(0.25rem * 0.92) !important; }
.m-2 { margin: calc(0.5rem * 0.92) !important; }
.m-3 { margin: calc(0.75rem * 0.92) !important; }
.m-4 { margin: calc(1rem * 0.92) !important; }
.m-5 { margin: calc(1.25rem * 0.92) !important; }
.m-6 { margin: calc(1.5rem * 0.92) !important; }
.m-8 { margin: calc(2rem * 0.92) !important; }

/* Scale gaps */
.gap-1 { gap: calc(0.25rem * 0.92) !important; }
.gap-2 { gap: calc(0.5rem * 0.92) !important; }
.gap-3 { gap: calc(0.75rem * 0.92) !important; }
.gap-4 { gap: calc(1rem * 0.92) !important; }
.gap-5 { gap: calc(1.25rem * 0.92) !important; }
.gap-6 { gap: calc(1.5rem * 0.92) !important; }
.gap-8 { gap: calc(2rem * 0.92) !important; }

/* Scale specific padding/margin directions */
.px-3 { padding-left: calc(0.75rem * 0.92) !important; padding-right: calc(0.75rem * 0.92) !important; }
.px-4 { padding-left: calc(1rem * 0.92) !important; padding-right: calc(1rem * 0.92) !important; }
.px-6 { padding-left: calc(1.5rem * 0.92) !important; padding-right: calc(1.5rem * 0.92) !important; }
.py-2 { padding-top: calc(0.5rem * 0.92) !important; padding-bottom: calc(0.5rem * 0.92) !important; }
.py-3 { padding-top: calc(0.75rem * 0.92) !important; padding-bottom: calc(0.75rem * 0.92) !important; }
.py-4 { padding-top: calc(1rem * 0.92) !important; padding-bottom: calc(1rem * 0.92) !important; }

.mx-4 { margin-left: calc(1rem * 0.92) !important; margin-right: calc(1rem * 0.92) !important; }
.my-4 { margin-top: calc(1rem * 0.92) !important; margin-bottom: calc(1rem * 0.92) !important; }
.mb-4 { margin-bottom: calc(1rem * 0.92) !important; }
.mt-4 { margin-top: calc(1rem * 0.92) !important; }

/* Scale space between elements */
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: calc(0.5rem * 0.92) !important; }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: calc(0.75rem * 0.92) !important; }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: calc(1rem * 0.92) !important; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: calc(0.5rem * 0.92) !important; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: calc(0.75rem * 0.92) !important; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: calc(1rem * 0.92) !important; }

/* Ensure footer is always full width */
footer {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

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

/* Custom hover effects */
.hover-scale {
    transition: transform 0.3s ease;
}

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

/* Custom gradient backgrounds */
.gradient-primary {
    background: linear-gradient(135deg, #611c46 0%, #be185d 100%);
}

.gradient-accent {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Product card hover effects */
.product-card {
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #e5e7eb;
}

/* Custom button styles */
.btn-primary {
    background-color: #611c46;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #be185d;
}

.btn-secondary {
    @apply bg-gray-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-gray-700 transition duration-300;
}

.btn-accent {
    background-color: #f59e0b;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-accent:hover {
    background-color: #d97706;
}

/* Loading spinner */
.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #611c46;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Slider specific styles */
.slider-container {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 0.5rem;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide.active {
    opacity: 1;
}

.slide-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Mobile responsive slider */
@media (max-width: 768px) {
    .slider-container {
        height: 300px;
    }
}

/* Notification styles */
.notification {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.notification.show {
    transform: translateX(0);
}

/* Dropdown animations */
.group .absolute {
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* Custom scrollbar for category menu */
.category-menu::-webkit-scrollbar {
    width: 6px;
}

.category-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.category-menu::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.category-menu::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Form styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

/* Card hover effects */
.card-hover {
    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

/* Badge styles */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
    @apply bg-primary text-white;
}

.badge-accent {
    @apply bg-accent text-gray-800;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Custom scrollbar for category menu */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* For Firefox */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f8fafc;
}

/* Toast notifications */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.toast.show {
    transform: translateX(0);
}

.toast.success {
    background-color: #10b981;
}

.toast.error {
    background-color: #ef4444;
}

.toast.warning {
    background-color: #f59e0b;
}

.toast.info {
    background-color: #3b82f6;
}

/* Modal styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

/* Price styling */
.price-original {
    text-decoration: line-through;
    color: #6b7280;
}

.price-sale {
    color: #ef4444;
    font-weight: 600;
}

/* Badge styles */
.badge {
    @apply inline-block px-3 py-1 text-xs font-semibold rounded-full;
}

.badge-sale {
    @apply bg-red-100 text-red-800;
}

.badge-new {
    @apply bg-green-100 text-green-800;
}

.badge-featured {
    @apply bg-blue-100 text-blue-800;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .mobile-hidden {
        display: none;
    }
}

/* Slider Styles */
.slider-container {
    position: relative;
    height: 400px;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    align-items: center;
}

.slide.active {
    opacity: 1;
}

.slide-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.slider-btn {
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.indicator {
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background-color: white !important;
    transform: scale(1.2);
}

/* Category Menu Hover Effects */
.category-menu-item {
    position: relative;
    overflow: hidden;
}

.category-menu-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
    transition: left 0.5s ease;
}

.category-menu-item:hover::before {
    left: 100%;
}

/* Responsive Slider */
@media (max-width: 768px) {
    .slider-container {
        height: 300px;
    }
    
    /* Match category menu height with mobile slider */
    .lg\:w-1\/5 > div {
        height: 300px !important;
    }
    
    .slide-content .text-3xl {
        font-size: 1.5rem !important;
    }
    
    .slide-content .lg\:text-5xl {
        font-size: 2rem !important;
    }
    
    .slide-content .text-lg {
        font-size: 0.875rem !important;
    }
    
    .slide-content .lg\:text-xl {
        font-size: 1rem !important;
    }
}

/* Category menu specific responsive adjustments */
@media (max-width: 1024px) {
    .lg\:w-1\/5 > div {
        height: auto;
        min-height: 400px;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
}

/* Deals Carousel Styles */
.deals-carousel-container {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.deal-item {
    cursor: grab;
}

.deal-item:active {
    cursor: grabbing;
}

#deals-carousel {
    will-change: transform;
}

/* Line clamp utilities for text truncation */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Side Cart Styles */
#side-cart {
    max-width: 100vw;
}

@media (max-width: 768px) {
    #side-cart {
        width: 100vw;
        max-width: 100vw;
    }
}

/* Cart animation improvements */
#cart-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

#cart-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

/* Cart item hover effects */
.cart-item:hover {
    background-color: #f9fafb;
}

/* Quantity button styles */
.quantity-btn {
    transition: all 0.2s ease;
}

.quantity-btn:hover {
    border-color: #5b21b6;
    color: #5b21b6;
}

/* Coupon input focus styles */
#coupon-input:focus {
    box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.1);
}

/* Cart count badge animation */
#cart-count, #mobile-cart-count {
    animation: pulse 0.3s ease-in-out;
}

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

/* Cart icon hover effects */
#cart-icon:hover {
    transform: translateY(-1px);
}

#mobile-cart-icon:hover {
    background-color: rgba(91, 33, 182, 0.05);
}

/* Ensure cart icon is clickable */
#cart-icon, #mobile-cart-icon {
    cursor: pointer;
    user-select: none;
}

/* Product page button styles */
.border-3 {
    border-width: 3px;
}

/* Enhanced button hover effects */
#add-to-cart-btn {
    position: relative;
    overflow: hidden;
}

#add-to-cart-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(91, 33, 182, 0.1), transparent);
    transition: left 0.5s;
}

#add-to-cart-btn:hover::before {
    left: 100%;
}

#buy-now-btn {
    position: relative;
    overflow: hidden;
}

#buy-now-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

#buy-now-btn:hover::after {
    width: 300px;
    height: 300px;
}

/* Dark button specific styles */
#buy-now-btn {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

#buy-now-btn:hover {
    background: linear-gradient(135deg, #111827 0%, #000000 100%);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Button text should stay above the effects */
#add-to-cart-btn span, #add-to-cart-btn i,
#buy-now-btn span, #buy-now-btn i {
    position: relative;
    z-index: 1;
}

/* Side cart checkout button styling */
#checkout {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    transition: all 0.3s ease;
}

#checkout:hover {
    background: linear-gradient(135deg, #111827 0%, #000000 100%);
    transform: translateY(-1px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

#checkout::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

#checkout:hover::after {
    width: 300px;
    height: 300px;
}

#checkout span {
    position: relative;
    z-index: 1;
}

/* Place order button styling */
#place-order-btn {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    transition: all 0.3s ease;
}

#place-order-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #111827 0%, #000000 100%);
    transform: translateY(-1px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

#place-order-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

#place-order-btn:hover:not(:disabled)::after {
    width: 300px;
    height: 300px;
}

#place-order-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

#place-order-btn:disabled:hover {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
} 

/* Organikas Deep Purple Brand Color Overrides */
.bg-primary {
    background-color: #611c46 !important;
}

.text-primary {
    color: #611c46 !important;
}

.border-primary {
    border-color: #611c46 !important;
}

.hover\:bg-primary:hover {
    background-color: #611c46 !important;
}

.hover\:text-primary:hover {
    color: #611c46 !important;
}

.focus\:ring-primary:focus {
    --tw-ring-color: #611c46 !important;
}

.bg-primary-dark {
    background-color: #be185d !important;
}

.hover\:bg-primary-dark:hover {
    background-color: #be185d !important;
}

.text-primary-light {
    color: #db2777 !important;
}

/* Accent color updates */
.bg-accent {
    background-color: #f59e0b !important;
}

.text-accent {
    color: #f59e0b !important;
}

.hover\:bg-accent:hover {
    background-color: #f59e0b !important;
}

.hover\:bg-accent-dark:hover {
    background-color: #d97706 !important;
}

.text-accent-light {
    color: #fbbf24 !important;
}

/* Logo styling */
.logo-container img {
    filter: brightness(1.1);
    transition: all 0.3s ease;
}

.logo-container:hover img {
    filter: brightness(1.2);
    transform: scale(1.05);
}

/* Update existing quantity button hover to use new primary color */
.quantity-btn:hover {
    border-color: #611c46 !important;
    color: #611c46 !important;
}

/* Update coupon input focus to use new primary color */
#coupon-input:focus {
    box-shadow: 0 0 0 3px rgba(97, 28, 70, 0.1) !important;
}

/* Update add to cart button gradient */
#add-to-cart-btn::before {
    background: linear-gradient(90deg, transparent, rgba(97, 28, 70, 0.1), transparent) !important;
}

/* Ensure all primary color classes use #611c46 */
.bg-primary,
[style*="background-color: #5b21b6"],
[style*="background: linear-gradient(135deg, #5b21b6"],
[style*="background: linear-gradient(135deg, #7c3aed"] {
    background-color: #611c46 !important;
    background: linear-gradient(135deg, #611c46 0%, #be185d 100%) !important;
}

.text-primary,
[style*="color: #5b21b6"] {
    color: #611c46 !important;
}

.border-primary,
[style*="border-color: #5b21b6"] {
    border-color: #611c46 !important;
}

/* Top bar background */
header .bg-primary {
    background-color: #611c46 !important;
}

/* Cart button and other primary buttons */
#cart-icon,
.bg-primary,
button.bg-primary {
    background-color: #611c46 !important;
}

#cart-icon:hover,
.hover\:bg-primary-dark:hover,
button.bg-primary:hover {
    background-color: #be185d !important;
}

/* Search button */
.bg-primary.text-white {
    background-color: #611c46 !important;
}

.bg-primary.text-white:hover {
    background-color: #be185d !important;
}

/* Mobile cart count badge */
#mobile-cart-count.bg-primary {
    background-color: #611c46 !important;
}

/* Global color overrides - catch any remaining old colors */
* {
    /* Replace any old purple colors with our primary color */
}

/* Chart.js and other dynamic color overrides */
.chart-purple,
[data-color="purple"],
.bg-purple-600,
.bg-purple-700,
.bg-purple-800 {
    background-color: #611c46 !important;
}

.text-purple-600,
.text-purple-700,
.text-purple-800 {
    color: #611c46 !important;
}

.border-purple-600,
.border-purple-700,
.border-purple-800 {
    border-color: #611c46 !important;
}

/* Logo hover effect */
header img[alt="Organikas Logo"]:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Footer specific color overrides */
footer .hover\:text-primary:hover,
footer .text-primary {
    color: #611c46 !important;
}

footer .focus\:ring-primary:focus {
    --tw-ring-color: #611c46 !important;
}

footer button[style*="background-color: #611c46"]:hover {
    background-color: #be185d !important;
}

/* Ensure all accent colors in footer use primary color */
footer .hover\:text-accent:hover {
    color: #611c46 !important;
}

/* Back to top button hover effect */
#back-to-top:hover {
    background-color: #be185d !important;
    transform: scale(1.1) !important;
}

/* Header topbar background */
header .bg-primary {
    background-color: #611c46 !important;
}

/* Search button specific styling */
.bg-primary.text-white,
button.bg-primary {
    background-color: #611c46 !important;
}

.bg-primary.text-white:hover,
button.bg-primary:hover,
.hover\:bg-primary-dark:hover {
    background-color: #be185d !important;
}

/* Cart button and other primary buttons */
#cart-icon {
    background-color: #611c46 !important;
}

#cart-icon:hover {
    background-color: #be185d !important;
}

/* Footer background - darker version of primary color */
footer {
    background-color: #4c1d3a !important; /* Very dark purple */
}

/* Footer text contrast */
footer h3,
footer h4,
footer h5 {
    color: #ffffff !important;
}

footer p,
footer li a,
footer .text-gray-300 {
    color: #e5e7eb !important;
}

/* Footer hover effects with primary color */
footer a:hover,
footer .hover\:text-primary:hover {
    color: #e8b4b8 !important; /* Rose-gold color for better contrast */
}

/* Newsletter button in footer */
footer button[style*="background-color: #611c46"] {
    background-color: #611c46 !important;
}

footer button[style*="background-color: #611c46"]:hover {
    background-color: #be185d !important; /* Lighter primary for contrast */
}

/* Mobile menu toggle button */
#mobile-menu-toggle:hover {
    color: #611c46 !important;
}

/* Account dropdown hover */
.hover\:text-primary:hover {
    color: #611c46 !important;
}

/* Mobile cart button */
#mobile-cart-icon:hover {
    color: #611c46 !important;
}

/* Focus states for form elements */
input:focus,
textarea:focus,
select:focus {
    --tw-ring-color: #611c46 !important;
    border-color: #611c46 !important;
}

/* Newsletter button in footer */
footer .bg-primary {
    background-color: #611c46 !important;
}

footer .hover\:bg-primary-light:hover {
    background-color: #db2777 !important;
}

/* Ensure all primary backgrounds use our color */
.bg-primary,
.bg-primary-500 {
    background-color: #611c46 !important;
}

.bg-primary:hover,
.bg-primary-600:hover,
.hover\:bg-primary-dark:hover,
.hover\:bg-primary-600:hover {
    background-color: #be185d !important;
}

.bg-primary-700 {
    background-color: #be185d !important;
}

.bg-primary-800 {
    background-color: #9d174d !important;
}

.bg-primary-900 {
    background-color: #611c46 !important;
}

/* Text primary colors */
.text-primary,
.text-primary-500 {
    color: #611c46 !important;
}

.text-primary-600 {
    color: #db2777 !important;
}

.text-primary-700 {
    color: #be185d !important;
}

/* Gradient utilities for primary colors */
.from-primary-500 {
    --tw-gradient-from: #611c46 !important;
    --tw-gradient-to: rgb(97 28 70 / 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-primary-600 {
    --tw-gradient-to: #db2777 !important;
}

.from-primary-600 {
    --tw-gradient-from: #db2777 !important;
    --tw-gradient-to: rgb(219 39 119 / 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-primary-700 {
    --tw-gradient-to: #be185d !important;
}

.hover\:from-primary-600:hover {
    --tw-gradient-from: #db2777 !important;
    --tw-gradient-to: rgb(219 39 119 / 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.hover\:to-primary-700:hover {
    --tw-gradient-to: #be185d !important;
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}

/* Custom width utilities for carousels */
.w-1\/8 {
    width: 12.5%;
}

.w-1\/9 {
    width: 11.111111%;
}

.w-1\/10 {
    width: 10%;
}

@media (min-width: 768px) {
    .md\:w-1\/8 {
        width: 12.5%;
    }
    
    .md\:w-1\/9 {
        width: 11.111111%;
    }
    
    .md\:w-1\/10 {
        width: 10%;
    }
}

@media (min-width: 1024px) {
    .lg\:w-1\/8 {
        width: 12.5%;
    }
    
    .lg\:w-1\/9 {
        width: 11.111111%;
    }
    
    .lg\:w-1\/10 {
        width: 10%;
    }
}

@media (min-width: 1280px) {
    .xl\:w-1\/8 {
        width: 12.5%;
    }
    
    .xl\:w-1\/9 {
        width: 11.111111%;
    }
    
    .xl\:w-1\/10 {
        width: 10%;
    }
}

/* Mobile Footer Collapsible Styles */
@media (max-width: 768px) {
    .footer-section {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .footer-section:last-child {
        border-bottom: none;
    }
    
    .footer-section button {
        padding: 1rem 0;
        transition: all 0.2s ease;
    }
    
    .footer-section button:hover {
        background-color: rgba(255, 255, 255, 0.05);
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        border-radius: 0.5rem;
    }
    
    .footer-content {
        transition: max-height 0.3s ease-out;
        overflow: hidden;
    }
    
    .footer-content.hidden {
        max-height: 0 !important;
    }
    
    .footer-section i {
        transition: transform 0.2s ease;
    }
    
    /* Improve touch targets for mobile */
    .footer-section a {
        padding: 0.75rem 0;
        display: block;
        border-radius: 0.25rem;
        transition: all 0.2s ease;
    }
    
    .footer-section a:hover {
        background-color: rgba(255, 255, 255, 0.05);
        padding-left: 0.5rem;
        margin-left: -0.5rem;
    }
    
    /* Newsletter section in mobile footer */
    .footer-section .flex input {
        font-size: 0.875rem;
    }
    
    .footer-section .flex button {
        padding: 0.5rem 1rem;
    }
}