/* GoldenPC Custom Styles */

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #121212;
    color: #FFFFFF;
}

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

::-webkit-scrollbar-track {
    background: #1E1E1E;
}

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

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

/* Golden Accent Styles */
.text-golden {
    color: #FFD700;
}

.bg-golden {
    background-color: #FFD700;
}

.border-golden {
    border-color: #FFD700;
}

.hover\:text-golden:hover {
    color: #FFD700;
}

.hover\:border-golden:hover {
    border-color: #FFD700;
}

.hover\:bg-golden:hover {
    background-color: #FFD700;
}

/* Card Background */
.bg-card {
    background-color: #1E1E1E;
}

.bg-charcoal {
    background-color: #121212;
}

/* Glow Effects */
.glow-golden {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.glow-golden-hover:hover {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}

/* Category Card Hover */
.category-card {
    transition: all 0.3s ease;
}

.category-card:hover {
    border-color: #FFD700;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.25);
    transform: translateY(-4px);
}

/* Product Card */
.product-card {
    transition: all 0.3s ease;
}

.product-card:hover {
    border-color: #FFD700;
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.product-card .add-to-cart-btn {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.product-card:hover .add-to-cart-btn {
    opacity: 1;
    transform: translateY(0);
}

/* Button Styles */
.btn-primary {
    background-color: #FFD700;
    color: #000000;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #FFED4A;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid #FFD700;
    color: #FFD700;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #FFD700;
    color: #000000;
}

/* Price Range Slider */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: #374151;
    height: 6px;
    border-radius: 3px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #FFD700;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    margin-top: -6px;
    transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

input[type="range"]::-moz-range-track {
    background: #374151;
    height: 6px;
    border-radius: 3px;
}

input[type="range"]::-moz-range-thumb {
    background: #FFD700;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border: none;
    transition: all 0.2s ease;
}

/* Checkbox Styles */
.custom-checkbox {
    appearance: none;
    background-color: #1E1E1E;
    border: 2px solid #4B5563;
    border-radius: 4px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.custom-checkbox:checked {
    background-color: #FFD700;
    border-color: #FFD700;
}

.custom-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes pulse-golden {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

.animate-slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

.animate-pulse-golden {
    animation: pulse-golden 2s infinite;
}

/* Loading Skeleton */
.skeleton {
    background: linear-gradient(90deg, #1E1E1E 25%, #2D2D2D 50%, #1E1E1E 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Quick View Modal */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

/* Cart Drawer */
.cart-drawer {
    transition: transform 0.3s ease-in-out;
}

/* Image Gallery */
.gallery-thumbnail {
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

.gallery-thumbnail:hover,
.gallery-thumbnail.active {
    border-color: #FFD700;
}

/* Star Rating */
.star-rating {
    color: #FFD700;
}

.star-rating.empty {
    color: #4B5563;
}

/* Tab Navigation */
.tab-btn {
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.tab-btn.active {
    color: #FFD700;
    border-bottom-color: #FFD700;
}

/* PC Builder */
.builder-step {
    position: relative;
}

.builder-step::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -50%;
    width: 100%;
    height: 2px;
    background: #374151;
    transform: translateY(-50%);
    z-index: 0;
}

.builder-step:last-child::after {
    display: none;
}

.builder-step.completed::after {
    background: #FFD700;
}

.builder-step-indicator {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.builder-step.active .builder-step-indicator,
.builder-step.completed .builder-step-indicator {
    background-color: #FFD700;
    color: #000000;
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    z-index: 9999;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast.success {
    background-color: #FFD700;
    color: #000000;
}

.toast.error {
    background-color: #EF4444;
    color: #FFFFFF;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .product-card:hover {
        transform: none;
    }
    
    .product-card .add-to-cart-btn {
        opacity: 1;
        transform: none;
    }
}

/* Print Styles for PC Builder Export */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
}

/* ==================== LIGHT THEME ==================== */

/* Light Theme Base - Force body background */
.light-theme,
.light-theme body,
html.light-theme body {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Light Theme Scrollbar */
.light-theme ::-webkit-scrollbar-track {
    background: #e5e7eb;
}

.light-theme ::-webkit-scrollbar-thumb {
    background: #9ca3af;
}

.light-theme ::-webkit-scrollbar-thumb:hover {
    background: #FFD700;
}

/* Light Theme Cards */
.light-theme .bg-card,
.light-theme .bg-card.rounded-xl {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

.light-theme .bg-charcoal {
    background-color: #f9fafb !important;
}

/* Light Theme Text */
.light-theme .text-white {
    color: #111827 !important;
}

.light-theme .text-gray-300,
.light-theme .text-gray-400 {
    color: #6b7280 !important;
}

.light-theme .text-gray-500 {
    color: #9ca3af !important;
}

/* Light Theme Borders */
.light-theme .border-gray-700,
.light-theme .border-gray-800 {
    border-color: #e5e7eb !important;
}

/* Light Theme Header */
.light-theme header,
.light-theme header.bg-card,
.light-theme .bg-charcoal\/95,
.light-theme header.border-gray-800 {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #e5e7eb !important;
}

/* Light Theme - remove golden top bar */
.light-theme header .bg-golden,
.light-theme header div.bg-golden {
    background-color: #1f2937 !important;
    color: #FFD700 !important;
}

/* Light Theme Header Text */
.light-theme header .text-white,
.light-theme header span.text-white,
.light-theme header a.text-white {
    color: #1f2937 !important;
}

.light-theme header .text-gray-400 {
    color: #6b7280 !important;
}

/* Light Theme Header Logo */
.light-theme header .text-golden {
    color: #FFD700 !important;
}

/* Light Theme Header Input */
.light-theme header input[type="text"],
.light-theme header input[type="search"] {
    background-color: #f9fafb !important;
    border-color: #e5e7eb !important;
    color: #1f2937 !important;
}

.light-theme header input::placeholder {
    color: #9ca3af !important;
}

/* Light Theme - Cart badge in header */
.light-theme header #cart-count {
    background-color: #FFD700 !important;
    color: #000000 !important;
}

/* Light Theme Footer */
.light-theme footer {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Light Theme Buttons */
.light-theme .btn-primary {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #000000;
}

.light-theme .btn-secondary {
    border-color: #d1d5db;
    color: #374151;
}

.light-theme .btn-secondary:hover {
    background-color: #f3f4f6;
}

/* Light Theme Inputs */
.light-theme input[type="text"],
.light-theme input[type="email"],
.light-theme input[type="tel"],
.light-theme input[type="password"],
.light-theme input[type="number"],
.light-theme select,
.light-theme textarea {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

.light-theme input::placeholder,
.light-theme textarea::placeholder {
    color: #9ca3af !important;
}

/* Light Theme Checkboxes */
.light-theme .custom-checkbox {
    background-color: #ffffff;
    border-color: #d1d5db;
}

.light-theme .custom-checkbox:checked {
    background-color: #FFD700;
    border-color: #FFD700;
}

/* Light Theme Cart Drawer */
.light-theme #cart-drawer {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Light Theme Modal Backdrops */
.light-theme .bg-black\/50,
.light-theme .bg-black\/80 {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Light Theme Navigation Links */
.light-theme nav a,
.light-theme .text-gray-300 {
    color: #4b5563 !important;
}

.light-theme nav a:hover,
.light-theme .hover\:text-white:hover {
    color: #111827 !important;
}

/* Light Theme Product Cards */
.light-theme .product-card {
    background-color: #ffffff;
    border-color: #e5e7eb;
}

.light-theme .product-card:hover {
    border-color: #FFD700;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Light Theme - Product Card Add to Cart button needs dark text */
.light-theme .product-card .bg-golden {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
    color: #ffffff !important;
}

.light-theme .product-card .bg-golden:hover {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%) !important;
}

/* Light Theme - Quick View button */
.light-theme .product-card .bg-card {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

.light-theme .product-card .bg-card:hover {
    background-color: #f3f4f6 !important;
}

/* Light Theme - Product Card Text Colors */
.light-theme .product-card .text-white {
    color: #1f2937 !important;
}

/* Light Theme Cart Quantity Controls */
.light-theme .bg-charcoal.border-gray-700 {
    background-color: #f3f4f6 !important;
    border-color: #e5e7eb !important;
}

.light-theme .bg-charcoal.border-gray-700 button {
    color: #6b7280 !important;
}

.light-theme .bg-charcoal.border-gray-700 button:hover {
    color: #1f2937 !important;
}

.light-theme .bg-charcoal.border-gray-700 span {
    color: #1f2937 !important;
}

/* Light Theme Cart Item Images */
.light-theme .w-20.h-20.bg-gray-800 {
    background-color: #f3f4f6 !important;
}

/* Light Theme Delete/Trash buttons */
.light-theme button.text-red-400 {
    color: #ef4444 !important;
}

.light-theme button.text-red-400:hover {
    color: #dc2626 !important;
}

.light-theme .product-card .text-gray-400 {
    color: #6b7280 !important;
}

.light-theme .product-card .line-through {
    color: #9ca3af !important;
}

/* Light Theme - Stock badge */
.light-theme .product-card .bg-green-500\/20 {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #16a34a !important;
}

/* Light Theme PC Builder */
.light-theme .bg-charcoal.border-gray-800,
.light-theme #power-estimate {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

.light-theme #power-estimate .text-gray-400,
.light-theme .bg-charcoal .text-gray-400 {
    color: #6b7280 !important;
}

.light-theme .bg-charcoal .text-golden,
.light-theme #power-estimate .text-golden {
    color: #FFD700 !important;
}

/* Light Theme PC Builder Component List */
.light-theme .component-item,
.light-theme .component-card {
    background-color: #f9fafb !important;
    border-color: #e5e7eb !important;
}

.light-theme .component-item:hover,
.light-theme .component-card:hover {
    background-color: #f3f4f6 !important;
}

/* Light Theme PC Builder - Selected Item */
.light-theme .component-item.selected,
.light-theme .component-card.selected {
    background-color: rgba(255, 215, 0, 0.1) !important;
    border-color: #FFD700 !important;
}

/* Light Theme PC Builder - Builder Step */
.light-theme .builder-step.active {
    background-color: rgba(255, 215, 0, 0.1) !important;
}

.light-theme .builder-step .text-white {
    color: #1f2937 !important;
}

/* Light Theme PC Builder - Clear Build button */
.light-theme button.text-red-400 {
    color: #ef4444 !important;
}

.light-theme button.text-red-400:hover {
    color: #dc2626 !important;
}

/* Light Theme - Label badges */
.light-theme .product-card .bg-red-500 {
    background-color: #ef4444 !important;
}

.light-theme .product-card .bg-golden\/20 {
    background-color: rgba(255, 215, 0, 0.2) !important;
}

/* Light Theme Modal Buttons */
.light-theme #quote-modal .bg-golden {
    background-color: #FFD700 !important;
    color: #000000 !important;
}

.light-theme #quote-modal .bg-gray-200 {
    background-color: #e5e7eb !important;
    color: #1f2937 !important;
}

.light-theme #quote-modal .bg-gray-200:hover {
    background-color: #d1d5db !important;
}

/* Light Theme - Ensure any button with golden bg has black text */
.light-theme button.bg-golden,
.light-theme .btn-primary {
    background-color: #FFD700 !important;
    color: #000000 !important;
}

/* Light Theme Active Filters */
.light-theme .active-filter-tag {
    background-color: #fef3c7;
    border-color: #fbbf24;
    color: #92400e;
}

/* Light Theme Dropdowns */
.light-theme .group:hover .group-hover\:visible {
    background-color: #ffffff;
    border-color: #e5e7eb;
}

/* Light Theme Table Headers */
.light-theme th {
    background-color: #f9fafb;
    color: #374151;
}

/* Light Theme Code/Pre blocks */
.light-theme pre,
.light-theme code {
    background-color: #f3f4f6;
    color: #1f2937;
}

/* Light Theme Hover States */
.light-theme .hover\:bg-gray-800:hover {
    background-color: #f3f4f6 !important;
}

.light-theme .hover\:bg-gray-700:hover {
    background-color: #e5e7eb !important;
}

/* Ensure golden accents stay golden in both themes */
.light-theme .text-golden,
.light-theme .bg-golden,
.light-theme .hover\:text-golden:hover {
    color: #FFD700 !important;
}

.light-theme .bg-golden {
    background-color: #FFD700 !important;
}

.light-theme .border-golden,
.light-theme .focus\:border-golden:focus {
    border-color: #FFD700 !important;
}

/* Light Theme Focus Rings */
.light-theme .focus\:ring-golden:focus {
    --tw-ring-color: #FFD700 !important;
}

/* Light Theme Glow Effects */
.light-theme .glow-golden {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

/* Light Theme Hero Section Gradients */
.light-theme .bg-gradient-to-r.from-charcoal {
    background: linear-gradient(to right, #f3f4f6 0%, rgba(243, 244, 246, 0.9) 50%, rgba(243, 244, 246, 0.5) 100%) !important;
}

.light-theme .bg-gradient-to-t.from-charcoal {
    background: linear-gradient(to top, #f3f4f6 0%, transparent 100%) !important;
}

/* Light Theme Category Card Overlays - change charcoal gradient to white */
.light-theme [class*="bg-gradient-to-t"][class*="from-charcoal"] {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%) !important;
}

/* Light Theme - ensure text on image cards is readable (dark text on white gradient) */
.light-theme [class*="bg-gradient-to-t"] .text-white,
.light-theme .group [class*="bg-gradient-to-t"] h3,
.light-theme #category-grid a h3,
.light-theme #category-grid .text-white {
    color: #111827 !important;
}

/* Keep golden hover color */
.light-theme #category-grid a:hover h3 {
    color: #FFD700 !important;
}

/* Light Theme Hero Text Fixes */
.light-theme h1.text-white,
.light-theme .hero-title,
.light-theme .text-4xl.text-white,
.light-theme .text-5xl.text-white,
.light-theme .text-6xl.text-white,
.light-theme h2.text-white,
.light-theme h3.text-white,
.light-theme h2.text-3xl,
.light-theme p.text-gray-300,
.light-theme p.text-xl {
    color: #111827 !important;
}

/* Light Theme Hero Badge */
.light-theme .bg-golden\/20 {
    background-color: rgba(255, 215, 0, 0.2) !important;
}

.light-theme .border-golden\/30 {
    border-color: rgba(255, 215, 0, 0.3) !important;
}

.light-theme .text-golden {
    color: #FFD700 !important;
}

/* Light Theme Stats Section */
.light-theme .border-gray-700,
.light-theme .border-t.border-gray-700 {
    border-color: #e5e7eb !important;
}

.light-theme .text-gray-400 {
    color: #6b7280 !important;
}

/* Light Theme Category Section Background */
.light-theme section.py-16.bg-charcoal,
.light-theme section.bg-charcoal {
    background-color: #ffffff !important;
}

/* Light Theme Category Section Text */
.light-theme section.bg-charcoal .text-white,
.light-theme section.py-16.bg-charcoal h2,
.light-theme section.py-16.bg-charcoal p {
    color: #111827 !important;
}

.light-theme section.bg-charcoal .text-gray-400 {
    color: #6b7280 !important;
}

/* Light Theme Features Section */
.light-theme .border-y.border-gray-800.bg-charcoal {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Light Theme Feature Cards */
.light-theme .bg-golden\/10 {
    background-color: rgba(255, 215, 0, 0.15) !important;
}

/* Light Theme Features Section Text */
.light-theme .border-y.border-gray-800.bg-charcoal h3.text-white,
.light-theme .border-y.border-gray-800.bg-charcoal p.text-gray-400 {
    color: #1f2937 !important;
}

/* Light Theme Features Section - ensure icon containers don't overflow */
.light-theme .border-y.border-gray-800.bg-charcoal .bg-golden\/10 {
    background-color: rgba(255, 215, 0, 0.2) !important;
    position: relative;
    overflow: hidden;
}

.light-theme .border-y.border-gray-800.bg-charcoal .flex-shrink-0 {
    flex-shrink: 0 !important;
}

/* Light Theme Footer Social Icons - make them light */
.light-theme footer .bg-gray-800,
.light-theme footer a.bg-gray-800,
.light-theme footer .w-8.h-8.bg-gray-800,
.light-theme footer .rounded-lg.bg-gray-800 {
    background-color: #e5e7eb !important;
    border: 1px solid #d1d5db;
}

.light-theme footer .bg-gray-800:hover,
.light-theme footer a.bg-gray-800:hover {
    background-color: #FFD700 !important;
    border-color: #FFD700;
}

.light-theme footer .bg-gray-800 i,
.light-theme footer a.bg-gray-800 i,
.light-theme footer .text-gray-400 {
    color: #374151 !important;
}

.light-theme footer .bg-gray-800:hover i,
.light-theme footer a.bg-gray-800:hover i {
    color: #000000 !important;
}

/* Light Theme Payment method badges */
.light-theme footer .bg-gray-700,
.light-theme footer .w-10.h-6.bg-gray-700 {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

/* Light Theme Footer Text */
.light-theme footer h3,
.light-theme footer .text-white {
    color: #1f2937 !important;
}

.light-theme footer p,
.light-theme footer span,
.light-theme footer a:not(.bg-gray-800) {
    color: #6b7280 !important;
}

.light-theme footer a:hover {
    color: #FFD700 !important;
}

/* Light Theme Footer Border */
.light-theme footer,
.light-theme footer .border-t,
.light-theme footer .border-gray-800 {
    border-color: #e5e7eb !important;
}