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

body {
    background-color: #f8f8f8;
    font-family: 'Poppins', sans-serif;
}

/* Animações personalizadas */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* Estilos para botões */
.btn-primary {
    @apply bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 cursor-pointer;
}

.btn-secondary {
    @apply bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 cursor-pointer;
}

/* Estilos para produtos */
.product-card {
    @apply bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition duration-300;
}

/* Modal melhorado */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center;
    z-index: 9999;
    pointer-events: auto;
    padding: 16px;
    overflow: hidden;
}

.modal-content {
    @apply bg-white rounded-lg p-3 w-80 mx-4 relative max-h-96 overflow-y-auto;
    pointer-events: auto;
    z-index: 10000;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.modal-content.modal-narrow {
    max-width: 520px;
}

.modal-content.modal-wide {
    max-width: 680px;
}

.modal-content.modal-scroll {
    max-height: 85vh;
    overflow-y: auto;
}

#cart-modal .modal-content {
    padding: 24px;
    max-height: 85vh;
}

#pedidos-modal,
#promos-modal {
    overflow-y: auto;
}

#cart-items {
    max-height: 42vh;
    overflow-y: auto;
}

.cart-item {
    flex-wrap: wrap;
    align-items: flex-start;
}

.cart-item-image {
    width: 56px;
    height: 56px;
}

.cart-item-info {
    min-width: 180px;
}

.cart-item-actions {
    flex-wrap: wrap;
    gap: 8px;
}

#cart-modal .modal-content {
    padding: 24px;
}

@media (max-width: 640px) {
    .modal-overlay {
        align-items: center;
    }

    .modal-content {
        max-width: 100%;
        max-height: 90vh;
        padding: 20px;
        border-radius: 16px;
    }

    #cart-modal .modal-content {
        padding: 20px;
        max-height: 90vh;
    }

    #cart-items {
        max-height: 38vh;
    }

    .cart-item {
        flex-direction: column;
        gap: 12px;
    }

    .cart-item-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .cart-item-actions .remove-btn {
        margin-left: 0;
        width: 100%;
    }
}