/**
 * Tailwind Main CSS
 * Main styles converted to Tailwind CSS
 * 
 * @package SCode_Theme
 * @since 2.2.0
 */

/* Import Tailwind base, components, and utilities */
@import 'tailwind.css';

/* Custom Tailwind Components */

/* Header Styles */
.header-main {
    @apply bg-white shadow-lg border-b border-gray-200;
}

.header-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.header-content {
    @apply flex items-center justify-between h-16;
}

.logo {
    @apply flex-shrink-0;
}

.logo img {
    @apply h-8 w-auto;
}

.nav-main {
    @apply hidden md:flex space-x-8;
}

.nav-link {
    @apply text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
}

.nav-link.active {
    @apply text-blue-600 bg-blue-50;
}

/* Mobile Menu */
.mobile-menu-button {
    @apply md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-blue-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500;
}

.mobile-menu {
    @apply md:hidden;
}

.mobile-menu-items {
    @apply px-2 pt-2 pb-3 space-y-1 sm:px-3;
}

.mobile-nav-link {
    @apply text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium;
}

/* Hero Section */
.hero-section {
    @apply bg-gradient-to-r from-blue-600 to-blue-800 text-white;
}

.hero-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24;
}

.hero-content {
    @apply text-center;
}

.hero-title {
    @apply text-4xl md:text-6xl font-bold mb-6;
}

.hero-subtitle {
    @apply text-xl md:text-2xl mb-8 text-blue-100;
}

.hero-cta {
    @apply inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50 transition-colors duration-200;
}

/* Product Grid */
.product-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
}

.product-card {
    @apply bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 overflow-hidden;
}

.product-image {
    @apply w-full h-48 object-cover;
}

.product-content {
    @apply p-4;
}

.product-title {
    @apply text-lg font-semibold text-gray-900 mb-2;
}

.product-price {
    @apply text-xl font-bold text-blue-600 mb-2;
}

.product-description {
    @apply text-gray-600 text-sm mb-4;
}

.product-actions {
    @apply flex space-x-2;
}

.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200;
}

.btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200;
}

/* Mini Cart Styles */
.mini-cart-container {
    @apply fixed top-0 right-0 h-full w-full max-w-md bg-white shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out z-50;
}

.mini-cart-container.open {
    @apply translate-x-0;
}

.cart-header {
    @apply bg-red-600 text-white p-4 flex items-center justify-between;
}

.cart-title {
    @apply text-lg font-semibold;
}

.cart-close {
    @apply text-white hover:text-gray-200 text-2xl;
}

.cart-content {
    @apply flex-1 overflow-y-auto p-4;
}

.cart-item {
    @apply flex items-center space-x-4 py-4 border-b border-gray-200;
}

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

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

.cart-item-name {
    @apply font-medium text-gray-900;
}

.cart-item-price {
    @apply text-red-600 font-semibold;
}

.cart-item-quantity {
    @apply flex items-center space-x-2 mt-2;
}

.qty-btn {
    @apply w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center text-sm font-medium;
}

.qty-display {
    @apply w-8 text-center text-sm font-medium;
}

.remove-item {
    @apply text-red-500 hover:text-red-700 text-sm;
}

.cart-footer {
    @apply p-4 border-t border-gray-200;
}

.cart-total {
    @apply flex justify-between items-center mb-4;
}

.total-label {
    @apply text-lg font-semibold text-gray-900;
}

.total-amount {
    @apply text-xl font-bold text-red-600;
}

.cart-actions {
    @apply space-y-2;
}

.btn-checkout {
    @apply w-full bg-red-600 hover:bg-red-700 text-white py-3 rounded-md font-medium transition-colors duration-200;
}

.btn-view-cart {
    @apply w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-3 rounded-md font-medium transition-colors duration-200;
}

/* Empty Cart */
.empty-cart {
    @apply text-center py-12;
}

.empty-cart-icon {
    @apply text-6xl text-gray-300 mb-4;
}

.empty-cart-text {
    @apply text-gray-500 text-lg mb-4;
}

.empty-cart-btn {
    @apply bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md font-medium transition-colors duration-200;
}

/* Responsive Design */
@media (max-width: 768px) {
    .mini-cart-container {
        @apply w-full max-w-none;
    }
    
    .hero-title {
        @apply text-3xl;
    }
    
    .hero-subtitle {
        @apply text-lg;
    }
    
    .product-grid {
        @apply grid-cols-1 sm:grid-cols-2;
    }
}

@media (max-width: 430px) {
    .cart-header {
        @apply p-3;
    }
    
    .cart-content {
        @apply p-3;
    }
    
    .cart-item {
        @apply py-3;
    }
    
    .cart-item-image {
        @apply w-12 h-12;
    }
}

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

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

.mini-cart-container.open {
    animation: slideIn 0.3s ease-out;
}

.mini-cart-container.closing {
    animation: slideOut 0.3s ease-in;
}

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

.loading::after {
    @apply absolute top-1/2 left-1/2 w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin;
    content: '';
    transform: translate(-50%, -50%);
}

/* Toast Notifications */
.toast {
    @apply fixed top-4 right-4 z-50 px-6 py-3 rounded-lg text-white font-medium shadow-lg transform transition-all duration-300;
}

.toast.success {
    @apply bg-green-500;
}

.toast.error {
    @apply bg-red-500;
}

.toast.info {
    @apply bg-blue-500;
}

/* Form Styles */
.form-group {
    @apply mb-4;
}

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

.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-checkbox {
    @apply h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded;
}

.form-radio {
    @apply h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300;
}

/* Button Variants */
.btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200;
}

.btn-sm {
    @apply px-3 py-1.5 text-xs;
}

.btn-lg {
    @apply px-6 py-3 text-base;
}

.btn-xl {
    @apply px-8 py-4 text-lg;
}

/* Color Variants */
.btn-blue {
    @apply bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500;
}

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

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

.btn-gray {
    @apply bg-gray-600 hover:bg-gray-700 text-white focus:ring-gray-500;
}

.btn-outline-blue {
    @apply border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500;
}

.btn-outline-red {
    @apply border-red-600 text-red-600 hover:bg-red-50 focus:ring-red-500;
}

/* Utility Classes */
.text-truncate {
    @apply overflow-hidden whitespace-nowrap text-ellipsis;
}

.visually-hidden {
    @apply sr-only;
}

.focus-visible {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

/* Print Styles */
@media print {
    .no-print {
        @apply hidden;
    }
    
    .print-only {
        @apply block;
    }
}