/* BookHaven Custom Styles */

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
    }
}

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: #78716c;
}

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

body {
    line-height: 1.7;
}

/* Custom Button Styles */
.btn-primary {
    @apply bg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-primary-dark transform hover:scale-105 transition-all duration-200 shadow-lg hover:shadow-xl;
}

.btn-secondary {
    @apply bg-secondary text-primary px-6 py-3 rounded-lg font-semibold hover:bg-yellow-500 transform hover:scale-105 transition-all duration-200 shadow-lg hover:shadow-xl;
}

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

/* Navigation Enhancements */
.nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.nav-link:hover::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #d4af37, #f4d03f);
    border-radius: 2px;
}

/* Search and Cart Popups */
.search-popup.active,
.cart-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-popup,
.cart-popup {
    transform: translateY(-10px);
}

/* Mobile Menu */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-menu.active {
    max-height: 400px;
}

/* Book Card Styles */
.book-card {
    @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group;
    transform: translateY(0);
}

.book-card:hover {
    transform: translateY(-8px);
}

.book-card .book-cover {
    @apply w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300;
}

.book-card .book-info {
    @apply p-6;
}

.book-card .book-title {
    @apply font-serif text-xl font-semibold text-primary mb-2 group-hover:text-secondary transition-colors duration-200;
}

.book-card .book-author {
    @apply text-warm-gray-600 text-sm mb-3;
}

.book-card .book-description {
    @apply text-warm-gray-700 text-sm mb-4 line-clamp-3;
}

.book-card .book-price {
    @apply text-2xl font-bold text-primary mb-4;
}

.book-card .add-to-cart-btn {
    @apply w-full bg-primary text-white py-2 px-4 rounded-lg font-semibold hover:bg-primary-dark transition-colors duration-200 transform hover:scale-105;
}

.book-card .add-to-cart-btn:hover {
    animation: pulse-glow 1s infinite;
}

/* Category Card Enhancements */
.category-card {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(30, 58, 95, 0.1);
}

.category-card:hover {
    box-shadow: 0 20px 40px rgba(30, 58, 95, 0.1);
}

/* Featured Section Background */
.featured-bg {
    background: linear-gradient(135deg, #fafaf9 0%, #f5f5f4 100%);
    position: relative;
}

.featured-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(30, 58, 95, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Newsletter Section */
.newsletter-section {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 50%, #1e3a5f 100%);
    position: relative;
    overflow: hidden;
}

.newsletter-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

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

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

.form-textarea {
    @apply w-full px-4 py-3 border border-warm-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200 resize-vertical min-h-32;
}

/* Cart Items */
.cart-item {
    @apply flex items-center space-x-3 py-3 border-b border-warm-gray-200 last:border-b-0;
}

.cart-item-image {
    @apply w-12 h-16 object-cover rounded;
}

.cart-item-info {
    @apply flex-1;
}

.cart-item-title {
    @apply font-semibold text-sm text-primary line-clamp-1;
}

.cart-item-author {
    @apply text-xs text-warm-gray-600;
}

.cart-item-price {
    @apply text-sm font-bold text-primary;
}

.cart-item-remove {
    @apply text-warm-gray-400 hover:text-red-500 transition-colors cursor-pointer;
}

/* Search Results */
.search-result-item {
    @apply flex items-center space-x-3 py-2 px-3 hover:bg-warm-gray-50 rounded cursor-pointer transition-colors;
}

.search-result-image {
    @apply w-8 h-10 object-cover rounded;
}

.search-result-info {
    @apply flex-1;
}

.search-result-title {
    @apply font-semibold text-sm text-primary line-clamp-1;
}

.search-result-author {
    @apply text-xs text-warm-gray-600;
}

/* Loading States */
.loading {
    @apply opacity-50 pointer-events-none;
}

.spinner {
    @apply animate-spin rounded-full h-6 w-6 border-b-2 border-primary;
}

/* Utility Classes */
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Page Transition Effects */
.page-enter {
    opacity: 0;
    transform: translateY(20px);
}

.page-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Book Grid Layouts */
.book-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (max-width: 768px) {
    .book-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1.5rem;
    }
}

/* Filter Sidebar */
.filter-sidebar {
    @apply bg-white rounded-xl shadow-lg p-6 sticky top-20;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}

.filter-group {
    @apply mb-6;
}

.filter-title {
    @apply font-semibold text-primary mb-3 text-lg;
}

.filter-option {
    @apply flex items-center space-x-2 py-1;
}

.filter-checkbox {
    @apply w-4 h-4 text-primary bg-warm-gray-100 border-warm-gray-300 rounded focus:ring-primary focus:ring-2;
}

.filter-label {
    @apply text-warm-gray-700 cursor-pointer flex-1;
}

/* Badge Styles */
.badge {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}

.badge-bestseller {
    @apply bg-secondary text-primary;
}

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

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

/* Tooltip */
.tooltip {
    @apply absolute z-50 px-2 py-1 text-xs text-white bg-warm-gray-900 rounded shadow-lg opacity-0 pointer-events-none transition-opacity duration-200;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1c1917;
}

.tooltip-trigger:hover .tooltip {
    @apply opacity-100;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .book-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .book-card {
        border: 2px solid #000;
    }
    
    .btn-primary {
        border: 2px solid #fff;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Support (Future Enhancement) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1c1917;
        --text-primary: #f5f5f4;
        --bg-secondary: #292524;
    }
}