/* Custom CSS for WiredHeadphoneStore */

/* Base styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
}

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

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

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

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

/* Product Card Styles */
.product-card {
    @apply bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

.product-image {
    @apply w-full h-64 object-cover bg-slate-100;
}

.product-badge {
    @apply absolute top-4 left-4 px-3 py-1 rounded-full text-xs font-semibold text-white;
}

.product-badge.flagship {
    @apply bg-red-600;
}

.product-badge.studio {
    @apply bg-emerald-600;
}

.product-badge.budget {
    @apply bg-blue-600;
}

.product-badge.iem {
    @apply bg-violet-600;
}

/* Star Rating Styles */
.star-rating {
    @apply flex items-center gap-1;
}

.star {
    @apply w-5 h-5 text-yellow-400 fill-current;
}

.star.empty {
    @apply text-slate-300;
}

.star.half {
    @apply text-yellow-400;
    background: linear-gradient(90deg, #fbbf24 50%, #cbd5e1 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Comparison Tool Styles */
.comparison-highlight {
    @apply bg-accent/10 font-semibold;
}

.comparison-winner {
    @apply bg-emerald-50 border-l-4 border-emerald-500;
}

/* Loading States */
.loading {
    @apply animate-pulse;
}

.loading-card {
    @apply bg-slate-200 rounded-2xl h-96;
}

.loading-text {
    @apply bg-slate-200 rounded h-4;
}

/* Mobile Menu Animation */
.mobile-menu-enter {
    transform: translateX(-100%);
    opacity: 0;
}

.mobile-menu-enter-active {
    transform: translateX(0);
    opacity: 1;
    transition: all 0.3s ease-in-out;
}

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

.mobile-menu-exit-active {
    transform: translateX(-100%);
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

/* Search Results */
.search-result-item {
    @apply p-3 hover:bg-slate-50 cursor-pointer border-b border-slate-100 last:border-b-0;
}

.search-result-item:hover {
    @apply bg-slate-50;
}

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

/* Focus styles for accessibility */
.focus-visible:focus {
    @apply outline-none ring-2 ring-accent ring-offset-2;
}

/* Custom button styles */
.btn-primary {
    @apply bg-accent hover:bg-blue-600 text-white font-semibold px-6 py-3 rounded-lg transition-colors shadow-lg hover:shadow-xl;
}

.btn-secondary {
    @apply bg-slate-100 hover:bg-slate-200 text-primary font-semibold px-6 py-3 rounded-lg transition-colors;
}

.btn-outline {
    @apply border-2 border-accent text-accent hover:bg-accent hover:text-white font-semibold px-6 py-3 rounded-lg transition-colors;
}

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

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-before: always;
    }
}

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

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

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

.slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Comparison panel styles */
.comparison-panel {
    @apply fixed right-0 top-0 h-full w-96 bg-white shadow-2xl transform translate-x-full transition-transform duration-300 z-50;
}

.comparison-panel.open {
    @apply translate-x-0;
}

.comparison-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-40 opacity-0 pointer-events-none transition-opacity duration-300;
}

.comparison-overlay.open {
    @apply opacity-100 pointer-events-auto;
}

/* Tooltip styles */
.tooltip {
    @apply absolute z-10 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow-lg opacity-0 pointer-events-none transition-opacity duration-200;
}

.tooltip.show {
    @apply opacity-100 pointer-events-auto;
}

/* Custom form styles */
.form-input {
    @apply w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-transparent transition-colors;
}

.form-select {
    @apply w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-transparent bg-white transition-colors;
}

/* Breadcrumb styles */
.breadcrumb {
    @apply flex items-center space-x-2 text-sm text-secondary;
}

.breadcrumb a {
    @apply hover:text-primary transition-colors;
}

.breadcrumb-separator {
    @apply mx-2 text-slate-400;
}

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

/* Spec comparison table */
.spec-table {
    @apply w-full border-collapse;
}

.spec-table th,
.spec-table td {
    @apply border-b border-slate-200 py-3 px-4 text-left;
}

.spec-table th {
    @apply bg-slate-50 font-semibold text-primary;
}

.spec-table tr:hover {
    @apply bg-slate-50;
}

/* Price display */
.price {
    @apply text-2xl font-bold text-primary;
}

.price-old {
    @apply text-lg text-slate-500 line-through;
}

.price-discount {
    @apply text-sm text-emerald-600 font-semibold;
}

/* Rating display */
.rating-number {
    @apply text-lg font-semibold text-primary;
}

.rating-text {
    @apply text-sm text-secondary;
}

/* Category filters */
.filter-active {
    @apply bg-accent text-white;
}

.filter-inactive {
    @apply bg-slate-100 text-secondary hover:bg-slate-200;
}

/* Responsive grid adjustments */
@media (max-width: 640px) {
    .grid-responsive {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .grid-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    .grid-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}