/**
 * Storefront Dynamic Color Styles
 * 
 * This CSS file provides a comprehensive theming system for the Sellzzy storefront.
 * It uses CSS custom properties (variables) that are dynamically updated by JavaScript
 * to enable real-time color theme changes without page reloads.
 * 
 * Key Features:
 * - Dynamic color theming via CSS variables
 * - Fallback colors for graceful degradation
 * - Skeleton loading animations with theme-aware colors
 * - Comprehensive component coverage (header, footer, buttons, forms, etc.)
 * - Navigation hover effects (bold text, preserved colors)
 * - Circular cart count badges with fixed dimensions
 * 
 * Usage: Include this file in storefront templates after the color integration JS
 * 
 * @version 1.0.0
 * @author Sellzzy Development Team
 */

:root {
    /* Backend color variables - basic white/gray defaults */
    --header-background-color: #ffffff;
    --header-text-color: #374151;
    --footer-background-color: #f9fafb;
    --footer-text-color: #6b7280;
    --primary-button-color: #303030;
    --secondary-button-color: #6b7280;
    --body-background-color: #ffffff;
    --brand-color: #374151;
    --primary-color: #374151;
    --secondary-color: #6b7280;
    --secondary-background-color: #f9fafb;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --text-color: #1f2937;
}

/* Header styling */
header,
#main-header-bar {
    background-color: var(--header-background-color) !important;
    color: var(--header-text-color) !important;
}

header a,
header span,
header p,
header .text-gray-600,
header .text-gray-700,
.nav-link,
.headerstorename {
    color: var(--header-text-color) !important;
}

/* Logo and store name */
.logoimg,
.storelogoimg,
.headerstorename {
    color: var(--header-text-color) !important;
}

/* Header icons */
header svg path {
    stroke: var(--header-text-color) !important;
}

/* Primary button colored icons */
.primary-icon {
    stroke: var(--primary-button-color) !important;
}

.primary-icon path {
    stroke: var(--primary-button-color) !important;
}

/* Search and cart icons specifically */
#desktop_search_svg,
#desktop_close_svg,
#mobile_search_svg,
#mobile_close_svg,
#allCartItems svg {
    stroke: var(--primary-button-color) !important;
}

#desktop_search_svg path,
#desktop_close_svg path,
#mobile_search_svg path,
#mobile_close_svg path,
#allCartItems svg path {
    stroke: var(--primary-button-color) !important;
}

/* Footer styling */
footer {
    background-color: var(--footer-background-color) !important;
    color: var(--footer-text-color) !important;
}

footer a,
footer span,
footer p,
footer li {
    color: var(--footer-text-color) !important;
}

/* Simple Button System */
.primary-button {
    background-color: var(--primary-button-color) !important;
    color: var(--body-background-color) !important;
    border: 1px solid var(--primary-button-color) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.secondary-button {
    background-color: transparent !important;
    color: var(--primary-button-color) !important;
    border: 1px solid var(--primary-button-color) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.primary-button:hover {
    filter: brightness(0.9) !important;
    transform: translateY(-1px) !important;
}

.secondary-button:hover {
    background-color: var(--primary-button-color) !important;
    color: var(--body-background-color) !important;
    transform: translateY(-1px) !important;
}

/* Legacy support - map old classes to new system */
.btn-primary,
.bg-blue-500,
.bg-sky-500,
#login-btn,
.bg-\[var\(--btn-background-color\)\] {
    background-color: var(--primary-button-color) !important;
    color: var(--body-background-color) !important;
    border: 1px solid var(--primary-button-color) !important;
}

.btn-secondary,
#signup-btn {
    background-color: transparent !important;
    color: var(--primary-button-color) !important;
    border: 1px solid var(--primary-button-color) !important;
}

/* Mobile menu button styling */
#small-menu .mobile-signup-btn {
    background-color: transparent !important;
    color: var(--primary-button-color) !important;
    border: 1px solid var(--primary-button-color) !important;
}

#small-menu .mobile-login-btn {
    background-color: var(--primary-button-color) !important;
    color: var(--body-background-color) !important;
    border: 1px solid var(--primary-button-color) !important;
}

/* Bundle section background */
#bundle-section,
#doubleBundleSection,
#threeBundleSecrtion,
#fourBundleSection {
    background-color: var(--secondary-background-color) !important;
}

/* Bundle button fixes */
.bundle-add-btn {
    padding: 0.25rem 1rem !important;
    background-color: var(--primary-button-color) !important;
    color: var(--body-background-color) !important;
    border: 1px solid var(--primary-button-color) !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
}

a[class*="bg-white/90"] {
    background-color: transparent !important;
    color: var(--primary-button-color) !important;
    border-radius: 0.375rem !important;
	padding: 0 !important;
}

a[class*="bg-white/90"]:hover {
    background-color: transparent !important;
    filter: brightness(0.9) !important;
	padding: 0 !important;
}


/* Cart count badge */
.count {
    background-color: var(--primary-button-color) !important;
    color: var(--body-background-color) !important;
}

/* Body and background */
body {
    background-color: var(--body-background-color) !important;
    /* color: var(--text-color) !important; */
}

/* Default text color for all elements - exclude buttons */
*:not(.primary-button):not(.secondary-button):not(.btn-primary):not(.btn-secondary):not(.bundle-add-btn):not(button) {
    color: inherit;
}

/* Brand color elements */
.brand-color,
.text-brand {
    color: var(--brand-color) !important;
}

.bg-brand {
    background-color: var(--brand-color) !important;
}

/* Primary color elements */
.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

/* Secondary color elements */
.text-secondary {
    color: var(--secondary-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

/* Secondary background */
.bg-secondary-background {
    background-color: var(--secondary-background-color) !important;
}

/* Shadow color */
.shadow-custom {
    box-shadow: 0 4px 6px var(--shadow-color) !important;
}

/* Hover effects with dynamic colors */
.btn-primary:hover,
.bg-blue-500:hover,
.bg-sky-500:hover {
    filter: brightness(0.9);
}

.btn-secondary:hover,
.bg-green-500:hover {
    filter: brightness(0.9);
}

/* Cart and interactive elements */
.cart-button {
    background-color: var(--primary-button-color) !important;
    color: var(--body-background-color) !important;
}

.cart-button:hover {
    background-color: var(--primary-button-color) !important;
    color: var(--body-background-color) !important;
    filter: brightness(0.9);
}

/* Product cards */
.product-card {
    background-color: var(--body-background-color) !important;
    color: var(--text-color) !important;
    /* box-shadow: 0 2px 8px var(--shadow-color) !important; */
	border-radius: 8px !important;
}

/* Text color system with opacity variations */
.text-primary {
    color: var(--text-color) !important;
}

.text-secondary {
    color: color-mix(in srgb, var(--text-color) 70%, transparent) !important;
}

.text-muted {
    color: color-mix(in srgb, var(--text-color) 50%, transparent) !important;
}

/* Headings - Full intensity */
h1, h2, h3, h4, h5, h6,
.product-title,
.product-name,
.section-title,
.store-title {
    color: var(--text-color) !important;
}

/* Descriptions - 70% opacity - exclude buttons */
.product-description,
.product-subtitle,
p:not(.primary-button):not(.secondary-button):not(.btn-primary):not(.btn-secondary) {
    color: color-mix(in srgb, var(--text-color) 70%, transparent) !important;
}

/* Prices - Full intensity with emphasis */
.product-price,
.price,
.cost,
.amount {
    color: var(--text-color) !important;
    font-weight: 600;
}

/* Spans in lists and features - exclude buttons */
span:not(.primary-button):not(.secondary-button):not(.btn-primary):not(.btn-secondary):not(.bundle-add-btn) {
    color: color-mix(in srgb, var(--text-color) 70%, transparent) !important;
}

/* List items and feature list items */
li {
    color: color-mix(in srgb, var(--text-color) 70%, transparent) !important;
}

li span {
    color: color-mix(in srgb, var(--text-color) 70%, transparent) !important;
}

/* Store name and by-line */
.text-sm.md\:text-base {
    color: color-mix(in srgb, var(--text-color) 60%, transparent) !important;
}

/* Card titles */
.text-card-title-size {
    color: var(--text-color) !important;
}


/* Navigation links */
.nav-link {
    color: var(--header-text-color) !important;
}

.nav-link:hover {
    color: var(--header-text-color) !important;
    font-weight: bold;
}

nav a:hover {
    color: var(--header-text-color) !important;
    font-weight: bold;
}

/* Override any other hover color changes */
#navigation_menu a:hover {
    color: var(--header-text-color) !important;
    font-weight: bold;
}

/* Form elements */
label {
    color: var(--text-color) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-color), 0.1) !important;
}

/* Loading animations */
.micro-loader {
    border-top-color: var(--primary-color) !important;
}

/* Icon wrappers - completely disable hover effects */
.icon-wrapper {
    background: transparent !important;
    transition: none !important;
}

.icon-wrapper:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    transform: none !important;
    filter: none !important;
}

.icon-wrapper:hover svg {
    background: transparent !important;
    background-color: transparent !important;
}

.icon-wrapper:hover svg path {
    stroke: var(--primary-button-color) !important;
}

/* Specific icon container overrides */
#desktop_search_icon,
#mobile_search_icon,
#allCartItems {
    background: transparent !important;
    transition: none !important;
}

#desktop_search_icon:hover,
#mobile_search_icon:hover,
#allCartItems:hover {
    background: transparent !important;
    background-color: transparent !important;
    transform: none !important;
    filter: none !important;
}

/* Storefront elements */
.section-title {
    color: var(--header-text-color) !important;
}

.view-all-link {
    color: var(--primary-color) !important;
}

.explore-more-btn {
    color: var(--primary-color) !important;
}

.nav-arrow {
    background-color: var(--primary-button-color) !important;
    color: white !important;
}

.feature-dot.active {
    background-color: var(--primary-button-color) !important;
}

.store-title {
    color: var(--header-text-color) !important;
}

.product-price {
    color: var(--primary-color) !important;
}

.add-to-cart-btn {
    background-color: var(--primary-button-color) !important;
    color: white !important;
}

/* Search bar styling */
.search-container input:focus {
    border-color: var(--primary-color) !important;
}

/* Mobile menu styling */
#small-menu {
    background-color: var(--header-background-color) !important;
    color: var(--header-text-color) !important;
}

#small-menu a {
    color: var(--header-text-color) !important;
}

/* Profile dropdown */
#customer-profile-card {
    background-color: var(--header-background-color) !important;
    color: var(--header-text-color) !important;
}

/* Banner and store title */
#store-title {
    color: var(--header-text-color) !important;
}

#storefront-banner {
    background-color: var(--secondary-background-color) !important;
}

/* Search component styling */
.search-input {
    background-color: var(--body-background-color) !important;
    border-color: var(--header-text-color) !important;
    color: var(--header-text-color) !important;
}

.search-input:focus {
    border-color: var(--primary-button-color) !important;
    box-shadow: 0 0 0 3px rgba(55, 65, 81, 0.1) !important;
}

.search-results {
    background-color: var(--body-background-color) !important;
    color: var(--header-text-color) !important;
    border-color: var(--header-text-color) !important;
}

.search-redirect-footer:hover {
    background-color: rgba(55, 65, 81, 0.1) !important;
}

/* Cart component styling */
#cart-popup-main .cart-popup-bar::-webkit-scrollbar-track {
    background: var(--body-background-color) !important;
}

#cart-popup-main .cart-popup-bar::-webkit-scrollbar-thumb {
    background: var(--header-text-color) !important;
}

.cart-list:hover {
    background-color: rgba(55, 65, 81, 0.05) !important;
    border-radius: 8px !important;
}

.cart-inner {
    transition: all 0.2s ease !important;
}