@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .woocommerce-ordering {
        @apply relative inline-block;
    }

    .woocommerce-ordering select {
        @apply appearance-none bg-white border border-gray-200 text-gray-700 py-2 pl-4 pr-10 rounded-lg cursor-pointer hover:border-gray-300 focus:outline-none focus:ring-2 focus:border-transparent transition-colors;
        --tw-ring-color: var(--lacuna-brown);
    }

    .woocommerce-ordering::after {
        content: '';
        @apply absolute right-3 top-1/2 -translate-y-1/2 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-gray-400 pointer-events-none;
    }

    .woocommerce-pagination {
        @apply mt-12 flex justify-center;
    }

    .woocommerce-pagination ul {
        @apply flex gap-2;
    }

    .woocommerce-pagination .page-numbers {
        @apply inline-flex items-center justify-center w-10 h-10 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors;
    }

    .woocommerce-pagination .current {
        background: var(--lacuna-brown) !important;
        color: white !important;
        border-color: var(--lacuna-brown) !important;
    }
    
    .woocommerce-pagination .current:hover {
        background: var(--lacuna-light-brown) !important;
        border-color: var(--lacuna-light-brown) !important;
    }

    .products-grid.list-view .product-card {
        @apply flex gap-6;
    }

    .products-grid.list-view .product-card .image-container {
        @apply w-72;
    }

    .products-grid.list-view .product-info {
        @apply flex-1 py-4 pr-6;
    }

    .shop-loader {
        @apply fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50 flex items-center justify-center;
    }

    .shop-loader .spinner {
        @apply animate-spin rounded-full h-8 w-8 border-4 border-purple-500 border-t-transparent;
    }

    /* Filtros */
    .filter-section {
        @apply mb-6;
    }

    .filter-section h3 {
        @apply font-semibold text-gray-900 mb-4;
    }

    .filter-section .filter-group {
        @apply space-y-2;
    }

    .filter-checkbox {
        @apply form-checkbox text-purple-500 rounded;
    }

    .filter-label {
        @apply flex items-center cursor-pointer;
    }

    .filter-label span {
        @apply ml-2 text-sm text-gray-600;
    }

    /* Botões de visualização */
    .view-toggle {
        @apply p-2 text-gray-600 hover:bg-gray-50 transition-colors;
    }

    .view-toggle.active {
        @apply bg-gray-200 text-gray-900;
    }

    /* Mini Cart Personalizado */
    .mini-cart-overlay {
        @apply fixed inset-0 bg-black bg-opacity-50 z-50 hidden;
    }

    .mini-cart-container {
        @apply absolute top-0 right-0 w-full max-w-md h-full bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out overflow-hidden flex flex-col;
    }

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

    /* Estilos para modo E-commerce */
    .store-mode-ecommerce .secondary-btn {
        @apply bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-300;
    }

    .store-mode-ecommerce .checkout-btn {
        @apply bg-green-600 text-white hover:bg-green-700 border border-green-600;
    }

    /* Estilos para modo Orçamento */
    .store-mode-quote .secondary-btn {
        @apply bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-300;
    }

    .store-mode-quote .quote-submit-btn:disabled {
        @apply bg-gray-400 cursor-not-allowed;
    }

    /* Formulário de orçamento */
    .quote-form input,
    .quote-form textarea {
        @apply transition-colors;
    }

    .quote-form input:focus,
    .quote-form textarea:focus {
        @apply ring-2 ring-purple-500 border-purple-500;
    }

    /* Preços no e-commerce */
    .store-mode-ecommerce .product-price {
        @apply text-lg font-bold text-green-600;
    }

    .store-mode-quote .product-price {
        @apply text-sm text-gray-500 italic;
    }

    /* Loading states */
    .mini-cart-loader {
        backdrop-filter: blur(4px);
    }
}