/* ===========================================
   CARDÁPIO NOTAS FÁCIL - ESTILOS RESPONSIVOS
   Mobile First Approach
   =========================================== */

/* ========== BASE STYLES ========== */
:root {
    --primary: #ea580c;
    --primary-light: rgba(234, 88, 12, 0.1);
    --primary-shadow: rgba(234, 88, 12, 0.2);
    --secondary: #f3f4f6;
    --text-dark: #111827;
    --text-gray: #6b7280;
    --text-light: #9ca3af;
    --border-color: #e5e7eb;
    --white: #ffffff;
    --success: #16a34a;
}

/* Hide Scrollbar */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Tab Content */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Navigation Items */
.nav-item.active {
    color: var(--primary);
}

.nav-item.active svg {
    fill: currentColor;
}

/* Toast - Estilo moderno */
#toast {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

#toast.-translate-y-20 {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-100%);
}

#toast.translate-y-4 {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* ========== MOBILE (Default - até 767px) ========== */

/* App Container - Full width */
#app {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Header Banner - Sempre full width */
.header-banner {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Conteúdo centralizado */
.content-center {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Header Banner */
.header-banner {
    height: 12rem; /* h-48 */
}

/* Logo Container */
.logo-container {
    width: 6rem;
    height: 6rem;
}

/* Grid de Destaques - Mobile: 2 colunas */
#featured-list {
    grid-template-columns: repeat(2, 1fr);
}

/* Grid de Menu - Mobile: 1 coluna */
.menu-grid {
    grid-template-columns: 1fr;
}

/* Formulário de Perfil - Mobile: campos empilhados */
.form-grid {
    grid-template-columns: 1fr;
}

/* Bottom Navigation - Mobile: fixo na parte inferior */
#footer .fixed {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Checkout Bar - Mobile */
#checkout-bar {
    bottom: 5rem; /* Acima da navegação */
}

/* ========== TABLET (768px - 1023px) ========== */
@media (min-width: 768px) {
    /* App Container */
    #app {
        width: 100%;
        max-width: 100%;
    }

    /* Conteúdo centralizado */
    .container-responsive {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Header Banner - Maior */
    .header-banner {
        height: 16rem;
    }

    /* Logo Container - Maior */
    .logo-container {
        width: 8rem;
        height: 8rem;
    }

    /* Grid de Destaques - Tablet: 3 colunas */
    #featured-list {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Grid de Menu - Tablet: 2 colunas */
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Seções com mais padding */
    .section-padding {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Cards maiores */
    .card-item {
        padding: 1.5rem;
    }

    /* Formulário - Grid de 2 colunas */
    .form-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Bottom Navigation - Tablet: ícones maiores */
    #footer .nav-item i {
        width: 1.75rem;
        height: 1.75rem;
    }

    /* Toast - Maior */
    #toast {
        font-size: 1rem;
        padding: 1rem 1.5rem;
    }

    /* Checkout Bar - Centralizado */
    #checkout-bar {
        max-width: 768px;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }

    /* Search Input - Maior */
    .search-container input {
        padding: 1rem 1rem 1rem 3rem;
        font-size: 1rem;
    }
}

/* ========== DESKTOP (1024px+) ========== */
@media (min-width: 1024px) {
    /* Body - Remover padding inferior no desktop */
    body {
        padding-bottom: 0;
    }

    /* App Container */
    #app {
        width: 100%;
        max-width: 100%;
    }

    /* Conteúdo centralizado */
    .container-responsive {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Header Banner - Ainda maior */
    .header-banner {
        height: 20rem;
        border-radius: 0 0 1rem 1rem;
    }

    /* Logo Container - Desktop */
    .logo-container {
        width: 10rem;
        height: 10rem;
    }

    /* Grid de Destaques - Desktop: 4 colunas */
    #featured-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    /* Grid de Menu - Desktop: 2 colunas */
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Seções com mais padding */
    .section-padding {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    /* Bottom Navigation - Desktop: Full width */
    #footer > .fixed {
        width: 100%;
    }

    /* Nav items no desktop - Horizontal com mais espaço */
    #footer .nav-item {
        flex-direction: row;
        gap: 0.5rem;
    }

    #footer .nav-item span {
        font-size: 0.875rem;
    }

    /* Checkout Bar - Desktop */
    #checkout-bar {
        max-width: 1024px;
        border-radius: 1rem;
    }

    /* Formulário - Grid de 3 colunas onde apropriado */
    .form-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    /* Cards com hover effect */
    .card-hover {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .card-hover:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    }

    /* Promoções - Layout em grid */
    #promotions-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Histórico de pedidos - Grid */
    #order-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* ========== LARGE DESKTOP (1280px+) ========== */
@media (min-width: 1280px) {
    /* Conteúdo centralizado */
    .container-responsive {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Grid de Destaques - Large: 5 colunas */
    #featured-list {
        grid-template-columns: repeat(5, 1fr);
    }

    /* Grid de Menu - Large: 3 colunas */
    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========== UTILITY CLASSES ========== */

/* Container responsivo */
.container-responsive {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .container-responsive {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1024px) {
    .container-responsive {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* Grid responsivo genérico */
.grid-responsive {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Texto responsivo */
.text-responsive-sm {
    font-size: 0.875rem;
}

.text-responsive-base {
    font-size: 1rem;
}

.text-responsive-lg {
    font-size: 1.25rem;
}

.text-responsive-xl {
    font-size: 1.5rem;
}

@media (min-width: 768px) {
    .text-responsive-sm {
        font-size: 1rem;
    }

    .text-responsive-base {
        font-size: 1.125rem;
    }

    .text-responsive-lg {
        font-size: 1.5rem;
    }

    .text-responsive-xl {
        font-size: 1.875rem;
    }
}

@media (min-width: 1024px) {
    .text-responsive-lg {
        font-size: 1.75rem;
    }

    .text-responsive-xl {
        font-size: 2.25rem;
    }
}

/* Botão responsivo */
.btn-responsive {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .btn-responsive {
        padding: 1rem 2rem;
        font-size: 1rem;
    }
}

/* Imagem responsiva com aspect ratio */
.img-responsive {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Spacing responsivo */
.py-responsive {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .py-responsive {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

@media (min-width: 1024px) {
    .py-responsive {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* ========== ANIMAÇÕES ========== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

/* ========== PRINT STYLES ========== */
@media print {
    #footer,
    #checkout-bar,
    .nav-item {
        display: none !important;
    }

    body {
        padding-bottom: 0 !important;
    }

    #app {
        max-width: 100% !important;
    }
}