/* PixelSolution Custom Styles */

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

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

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

    50% {
        transform: scale(1.05);
    }
}

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

.slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

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

/* Navigation Styles */
.nav-link {
    position: relative;
    font-weight: 500;
}

    .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -5px;
        left: 50%;
        background: linear-gradient(135deg, #1e40af, #f97316);
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .nav-link:hover::after,
    .nav-link.active::after {
        width: 100%;
    }

/* Button Styles */
.btn {
    @apply px-6 py-3 rounded-lg font-medium transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
}

.btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800;
}

.btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white;
}

.btn-orange {
    @apply bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
}

/* Card Styles */
.card {
    @apply bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1;
}

.card-product {
    @apply overflow-hidden border border-gray-200 bg-white rounded-xl shadow-md hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
}

.card-product:hover {
    @apply border-blue-300;
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-product img {
    @apply transition-all duration-500 ease-out;
}

.card-product:hover img {
    @apply transform scale-110;
    filter: brightness(1.05) saturate(1.1);
}

.card-product .product-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-300;
}

.card-product:hover .product-overlay {
    @apply opacity-100;
}

/* Hero Section */
.hero-gradient {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #f97316 100%);
}

.hero-pattern {
    background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 2px, transparent 2px), radial-gradient(circle at 75% 75%, rgba(255,255,255,0.1) 2px, transparent 2px);
    background-size: 50px 50px;
}

/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 1rem 0;
}

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

@media (max-width: 640px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Rating Stars */
.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.star {
    color: #d1d5db;
    transition: color 0.2s;
}

    .star.filled {
        color: #fbbf24;
    }

    .star.interactive:hover {
        color: #f59e0b;
        cursor: pointer;
    }

/* Price Display */
.price {
    font-weight: 700;
    color: #1e40af;
}

.price-large {
    font-size: 1.5rem;
}

.price-discounted {
    color: #ef4444;
}

.price-original {
    color: #9ca3af;
    text-decoration: line-through;
}

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

.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;
}

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

.badge-new {
    @apply bg-gradient-to-r from-green-400 to-green-500 text-white;
}

.badge-sale {
    @apply bg-gradient-to-r from-red-500 to-red-600 text-white;
}

/* Loading Animation */
.loading-spinner {
    border: 2px solid #f3f4f6;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

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

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

/* Form Styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200;
}

    .form-input:focus {
        @apply outline-none;
    }

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

.form-error {
    @apply text-red-500 text-sm mt-1;
}

/* Cart Styles */
.cart-item {
    @apply border-b border-gray-200 py-4;
}

    .cart-item:last-child {
        @apply border-b-0;
    }

.quantity-input {
    @apply w-16 h-10 text-center border-t border-b border-gray-300 bg-white text-gray-900 font-semibold text-lg focus:outline-none focus:bg-blue-50 focus:border-blue-300 transition-all duration-200;
    -moz-appearance: textfield;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-btn {
    @apply w-10 h-10 flex items-center justify-center bg-white border border-gray-300 text-gray-600 hover:bg-blue-50 hover:border-blue-300 hover:text-blue-600 transition-all duration-200 font-semibold text-lg;
    cursor: pointer;
    user-select: none;
}

.quantity-btn:first-child {
    @apply rounded-l-lg border-r-0;
}

.quantity-btn:last-child {
    @apply rounded-r-lg border-l-0;
}

.quantity-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.quantity-btn:active {
    transform: scale(0.95);
}

/* Order Status Colors */
.status-pending {
    @apply text-yellow-600 bg-yellow-50;
}

.status-processing {
    @apply text-blue-600 bg-blue-50;
}

.status-delivered {
    @apply text-green-600 bg-green-50;
}

.status-completed {
    @apply text-purple-600 bg-purple-50;
}

.status-cancelled {
    @apply text-red-600 bg-red-50;
}

/* Responsive Image */
.responsive-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Category Card */
.category-card {
    @apply relative overflow-hidden rounded-xl group cursor-pointer;
}

    .category-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, rgba(30, 64, 175, 0.8), rgba(249, 115, 22, 0.8));
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
    }

    .category-card:hover::before {
        opacity: 1;
    }

    .category-card .content {
        @apply relative z-10 p-6 text-center transition-transform duration-300;
    }

    .category-card:hover .content {
        @apply transform -translate-y-2;
    }

/* Search Results */
.search-highlight {
    @apply bg-yellow-200 px-1 rounded;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .btn {
        @apply px-4 py-2 text-sm;
    }

    .card-product {
        @apply rounded-lg;
    }
}

/* Utility Classes */
.text-gradient {
    background: linear-gradient(135deg, #1e40af, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-pixel-gradient {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #f97316 100%);
}

.shadow-pixel {
    box-shadow: 0 10px 25px -3px rgba(30, 64, 175, 0.1), 0 4px 6px -2px rgba(30, 64, 175, 0.05);
}

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

/* Focus Styles */
*:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

button:focus,
a:focus {
    outline-offset: 2px;
}

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

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
    .dark-mode-support {
        /* Add dark mode styles if needed */
    }
}

/* Accessibility Improvements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

    .btn-primary {
        background: #000;
        border: 2px solid #000;
    }
}

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

/* Live Chat Styles */
.chat-window {
    background: white;
    border: 1px solid #e5e7eb;
}

.chat-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.whatsapp-bg {
    background-color: #f0f2f5;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(16, 185, 129, 0.05) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.05) 2px, transparent 2px);
    background-size: 30px 30px;
}

.whatsapp-widget {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}

/* Message Bubble Styles */
.message-bubble-customer {
    background: linear-gradient(135deg, #dcf8c6 0%, #d4f8c4 100%);
    color: #1f2937;
    border-radius: 18px 18px 4px 18px;
    border: 1px solid #bbf7d0;
    margin-left: auto;
}

.message-bubble-bot {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #1e40af;
    border-radius: 18px 18px 18px 4px;
    border: 1px solid #c7d2fe;
    margin-right: auto;
}

.message-bubble-admin {
    background: linear-gradient(135deg, #fce7f3 0%, #f3e8ff 100%);
    color: #7c2d12;
    border-radius: 18px 18px 18px 4px;
    border: 1px solid #f3e8ff;
    margin-right: auto;
}

/* Dark mode support for chat */
.dark .chat-window {
    background: #1f2937;
    border-color: #374151;
}

.dark .whatsapp-bg {
    background-color: #111827;
}

.dark .message-bubble-customer {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    color: #d1fae5;
    border-color: #065f46;
}

.dark .message-bubble-bot {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
    color: #dbeafe;
    border-color: #1e3a8a;
}

.dark .message-bubble-admin {
    background: linear-gradient(135deg, #7c2d12 0%, #92400e 100%);
    color: #fef3c7;
    border-color: #7c2d12;
}

/* Chat animations */
@keyframes bounce-gentle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.animate-bounce-gentle {
    animation: bounce-gentle 2s infinite;
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slide-up 0.3s ease-out;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}