/**
 * Estilos do Cardápio Digital
 * Layout inspirado em design moderno e clean
 */

:root {
    color-scheme: light;
    /* Cores principais */
    --primary-color: #FF6B35;
    --primary-hover: #e65a2e;
    --secondary-color: #8B1538;
    --accent-color: #D4AF37;         /* Dourado para destaques */
    --cta-color: #C41E3A;            /* Call-to-action vermelho */
    
    /* Textos */
    --text-dark: #2D0A1F;            /* Quase preto com tom bordô */
    --text-light: #5C1F3A;           /* Bordô médio para textos secundários */
    --text-muted: #8B6B7A;           /* Cinza-rosado para textos discretos */
    
    /* Backgrounds */
    --bg-light: #FFF8F5;             /* Bege muito claro (fundo principal) */
    --bg-white: #FFFFFF;             /* Branco puro para cards */
    --bg-cream: #FFF5EE;             /* Creme suave */
    
    /* Bordas e Sombras */
    --border-color: #F5E6E8;         /* Rosa muito claro */
    --shadow-sm: 0 2px 4px rgba(139, 21, 56, 0.08);
    --shadow-md: 0 4px 12px rgba(139, 21, 56, 0.12);
    --shadow-lg: 0 8px 24px rgba(139, 21, 56, 0.16);
    --shadow-hover: 0 12px 32px rgba(139, 21, 56, 0.20);
    
    /* Raios de Borda */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    
    /* Escala de Fonte (acessibilidade) */
    --font-scale: 1;
}

html {
    font-size: calc(16px * var(--font-scale));
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-dark);
    background: var(--bg-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.header {
    position: relative;
    visibility: visible;
    background: linear-gradient(135deg, var(--primary-color, #c41e3a) 0%, #8b1a1a 100%);
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
    /* Garante altura mínima para o banner aparecer em qualquer resolução */
    min-height: 140px;
}

/* Banner como fundo absoluto de todo o header */
.header-banner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    z-index: 0;
    /* Garante que o banner ocupe todo o espaço mesmo em telas de alta densidade */
    width: 100%;
    height: 100%;
}

/* Overlay em 2 camadas: vinheta lateral + gradiente base-para-topo */
.header-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.18) 0%,
            rgba(0, 0, 0, 0.55) 60%,
            rgba(0, 0, 0, 0.75) 100%);
    z-index: 1;
}

/* Body sobre o banner — layout em coluna */
.header-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1.25rem 1.125rem 1.25rem;
    max-width: 640px;
    margin: 0 auto;
    /* Garante que o header-body empurre o header para ter altura suficiente */
    box-sizing: border-box;
}

/* Linha superior: logo + nome */
.header-top {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.75rem;
}

/* Logo */
.header-logo {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.18);
}

/* Info ao lado da logo */
.header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

/* Título */
.header-title {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Subtítulo */
.header-subtitle {
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    letter-spacing: 0.2px;
}

/* Linha inferior: nav + botões — sempre em linha única */
.header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: nowrap;
    min-width: 0;
}

/* Nav horizontal — contém ícones + botões de pedido */
.header-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    width: 100%;
}

.header-body .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.header-body .nav-icon:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.4);
}

.header-body .nav-icon:active {
    transform: scale(0.9);
}

.header-body .nav-icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 480px) {
    .header-body {
        padding: 1rem 1rem 0.875rem;
    }

    .header-logo {
        width: 64px;
        height: 64px;
        border-radius: 12px;
    }

    .header-title {
        font-size: 1.15rem;
    }

    .header-subtitle {
        font-size: 0.75rem;
    }

    .header-body .nav-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }

    .header-body .nav-icon svg {
        width: 17px;
        height: 17px;
    }
}

/* Otimizações de performance para mobile */
@media (max-width: 768px) {
    /* Reduzir animações em dispositivos de baixo desempenho */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Hardware acceleration para elementos animados */
    .category-nav, .category-item, .category-nav-item, .modal-content {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
    
    /* Prevenir layout thrashing */
    .container {
        contain: layout style;
    }
    
    /* Otimizar font rendering */
    body {
        text-rendering: optimizeSpeed;
        -webkit-font-feature-settings: "kern" 1;
        font-feature-settings: "kern" 1;
    }
    
    /* Lazy loading para imagens */
    img:not([src]) {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
    }
    
    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    
    /* Otimizar scroll performance */
    .main-content {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Reduzir repaints durante scroll */
    .category-section {
        contain: layout;
    }
}

/* Barra de busca */
.search-container {
    max-width: 600px;
    margin: 1.5rem auto 0;
    position: relative;
}

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 1rem;
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none;
    z-index: 1;
}

.search-input {
    width: 100%;
    padding: 0.875rem 3rem 0.875rem 3rem;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    font-size: 1rem;
    color: var(--text-dark);
    transition: all 0.2s ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-input:focus {
    outline: none;
    background: white;
    border-color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.search-clear {
    position: absolute;
    right: 0.75rem;
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-dark);
}

.search-clear:hover {
    background: rgba(0, 0, 0, 0.15);
    transform: scale(1.1);
}

.search-clear:active {
    transform: scale(0.95);
}

/* Resultados da busca */
.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 0.5rem;
}

/* Search Loading State */
.search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1rem;
}

.search-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.search-loading p {
    color: #6B7280;
    font-size: 0.875rem;
    margin: 0;
}

.search-results-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-light);
    border-radius: 12px 12px 0 0;
}

.search-results-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
}

.search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-result-item:last-child {
    border-bottom: none;
    border-radius: 0 0 12px 12px;
}

.search-result-item:hover {
    background: var(--bg-light);
}

.search-result-item:active {
    background: var(--border-color);
}

.search-result-content {
    flex: 1;
}

.search-result-name {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.search-result-name mark {
    background: #fef08a;
    color: var(--text-dark);
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
    font-weight: 700;
}

.search-result-description {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.search-result-description mark {
    background: #fef08a;
    color: var(--text-dark);
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
}

.search-result-category {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.search-result-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.search-no-results {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--text-light);
}

.search-no-results svg {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.search-no-results p {
    margin: 0;
    font-size: 0.95rem;
}

.search-results-more {
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    background: var(--bg-light);
    border-radius: 0 0 12px 12px;
}

/* Navegação de categorias */
.category-nav {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    /* Otimizações mobile */
    touch-action: pan-y pinch-zoom;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    /* Melhorias sticky */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.category-nav-scroll {
    display: flex;
    gap: 0.625rem;
    padding: 1rem 2rem;
    overflow-x: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--primary-color) var(--bg-light); /* Firefox */
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
    /* Otimizações mobile */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    .category-nav-scroll {
        padding: 0.75rem 0.75rem;
        gap: 0.5rem;
        scroll-padding: 0 0.75rem;
        /* Melhorar área de toque */
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
    }
    
    .category-nav-item {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        font-weight: 600;
        border-radius: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
        /* Snap para melhor navegação */
        scroll-snap-align: start;
        flex-shrink: 0;
        /* Otimizações de toque */
        touch-action: manipulation;
        will-change: transform, background-color;
    }
    
    .category-nav-item.active {
        background: var(--primary-color);
        color: white;
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);
        transform: scale(1.02);
    }
    
    .category-nav-item:active {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }
    
    /* Feedback tátil melhorado */
    .category-nav-item:active:not(.active) {
        background: var(--bg-cream);
    }
}

.category-nav-scroll::-webkit-scrollbar {
    height: 6px;
}

.category-nav-scroll::-webkit-scrollbar-track {
    background: var(--bg-light);
    border-radius: 3px;
}

.category-nav-scroll::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.category-nav-scroll::-webkit-scrollbar-thumb:hover {
    background: #e65a2e;
}

/* Estados da navegação sticky */
.category-nav.scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
}

.category-nav.at-top {
    transform: translateY(0);
}

.category-nav.stuck {
    transform: translateY(0);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Animações suaves para mudanças de estado */
.category-nav {
    animation: stickyEntrance 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes stickyEntrance {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Melhorias para mobile */
@media (max-width: 768px) {
    .category-nav {
        top: 0;
        z-index: 100;
        /* Safe area support */
        padding-top: env(safe-area-inset-top, 0);
    }
    
    .category-nav.stuck {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
    
    /* Indicador visual quando sticky */
    .category-nav::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            var(--primary-color) 20%, 
            var(--primary-color) 80%, 
            transparent 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .category-nav.stuck::before {
        opacity: 1;
    }
}

.category-nav-item {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    background: var(--bg-light);
    color: var(--text-dark);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 1rem;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Otimizações de performance */
    will-change: transform, background-color;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.category-nav-item:active {
    transform: scale(0.92);
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
    .category-nav-item:hover {
        background: var(--primary-color);
        color: white;
        transform: translateY(-2px);
    }
}

/* Conteúdo principal */
.main-content {
    flex: 1;
    padding: 1.75rem 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 768px) {
    .main-content {
        padding: 1rem 0.875rem;
    }

    .mid-content-banner {
        margin: 0 0 1.5rem;
    }

    .mid-content-banner-inner {
        padding: 0.6rem 0.875rem;
        gap: 0.65rem;
    }

    .mid-content-banner-icon {
        width: 34px;
        height: 34px;
        margin-left: 0;
    }

    .mid-content-banner-text {
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .mid-content-banner-title {
        font-size: 0.84rem;
    }

    .mid-content-banner-desc {
        font-size: 0.76rem;
    }

    .mid-content-banner-watermark {
        width: 110px;
        height: 110px;
        right: -22px;
        opacity: 0.10;
    }

    .mid-content-banner-eyebrow {
        font-size: 0.66rem;
        margin-bottom: 0.3rem;
    }

    .mid-content-banner-balloon {
        width: 30px;
        height: 30px;
    }

    .mid-content-banner-confetti span {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 0.875rem 0.75rem;
    }
}

/* Seção de categoria */
.category-section {
    margin-bottom: 3rem;
    animation: fadeIn 0.6s ease-out;
}

.mid-content-banner {
    margin: 0 auto 2rem;
    max-width: 800px;
    animation: bannerEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mid-content-banner-inner {
    background: linear-gradient(135deg, #FFF9E6 0%, #FFE4F0 50%, #E8F9FF 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    box-shadow: 
        0 10px 40px rgba(255, 215, 0, 0.25),
        0 5px 20px rgba(255, 107, 157, 0.2),
        0 2px 10px rgba(78, 205, 196, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    animation: none;
}

.mid-content-banner-inner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #FFD700 0%, #FFB700 25%, #FF6B9D 50%, #FF1493 75%, #4ECDC4 100%);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    animation: borderShine 2s ease-in-out infinite;
    will-change: opacity;
}

.mid-content-banner-inner::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #FFD700, #FF6B9D, #4ECDC4, #FFD700);
    background-size: 300% 300%;
    border-radius: var(--radius-lg);
    z-index: -1;
    animation: none;
}

.mid-content-banner-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #FFD700 0%, #FFC700 50%, #FFB700 100%);
    border: 3px solid rgba(255, 255, 255, 1);
    color: #fff;
    position: relative;
    margin-left: 0.2rem;
    box-shadow: 
        0 8px 25px rgba(255, 215, 0, 0.6),
        0 4px 15px rgba(255, 183, 0, 0.4),
        0 0 20px rgba(255, 215, 0, 0.3),
        inset 0 -3px 8px rgba(0, 0, 0, 0.15),
        inset 0 2px 4px rgba(255, 255, 255, 0.6);
    animation: iconPulse 2s ease-in-out infinite;
}

.mid-content-banner-icon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3), transparent 70%);
    animation: iconGlow 2s ease-in-out infinite;
}

.mid-content-banner-icon svg {
    display: block;
}

.mid-content-banner-watermark {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 140px;
    height: 140px;
    color: var(--primary-color);
    opacity: 0.12;
    pointer-events: none;
}

.mid-content-banner-watermark svg {
    width: 100%;
    height: 100%;
}

.mid-content-banner-text {
    color: var(--text-dark);
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.4;
    position: relative;
    padding-right: 0.25rem;
}

.mid-content-banner-title {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-dark);
    font-size: 0.9rem;
    line-height: 1.3;
}

.mid-content-banner-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff;
    background: linear-gradient(135deg, #FF1493 0%, #FF6B9D 50%, #FF1493 100%);
    background-size: 200% 200%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    margin-bottom: 0.3rem;
    width: fit-content;
    box-shadow: 
        0 6px 15px rgba(255, 107, 157, 0.5),
        0 3px 8px rgba(255, 20, 147, 0.3),
        0 0 20px rgba(255, 107, 157, 0.2);
    animation: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.mid-content-banner-desc {
    margin-top: 0.2rem;
    font-weight: 600;
    color: #444;
    font-size: 0.8rem;
    line-height: 1.45;
}

.mid-content-banner-decorations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.mid-content-banner-balloon {
    position: absolute;
    width: 42px;
    height: 42px;
    opacity: 0.35;
    animation: float 3.5s ease-in-out infinite;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15));
}

.mid-content-banner-balloon-1 {
    top: 12%;
    right: 6%;
    color: #FF6B9D;
    animation-delay: 0s;
}

.mid-content-banner-balloon-2 {
    bottom: 18%;
    right: 3%;
    color: #4ECDC4;
    animation-delay: 1.8s;
}

.mid-content-banner-confetti {
    position: absolute;
    inset: 0;
}

.mid-content-banner-confetti span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    font-size: 1rem;
    opacity: 0;
    animation: sparkle 2.5s ease-in-out infinite;
    animation-delay: var(--delay);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(3deg); }
}

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50% { opacity: 0.65; transform: scale(1.1) rotate(180deg); }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* bannerPulse desabilitado — box-shadow animado causa repaint (CLS) */

@keyframes iconPulse {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.1);
    }
}

@keyframes iconGlow {
    0%, 100% { 
        opacity: 0.3;
        transform: scale(1);
    }
    50% { 
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* badgeShine desabilitado — background-position animado não é composto */

@keyframes borderShine {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* gradientRotate desabilitado — background-position animado não é composto */

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

/* ──────────── Category Header — Barra compacta sticky ──────────── */

.category-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    padding: 10px 1rem;
    background: var(--bg-body, #fff);
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    margin: 0 -1rem;
}

.category-header__text {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-color, #e8294a);
    margin: 0;
    line-height: 1.3;
}

.category-item-count {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    font-weight: 400;
    white-space: nowrap;
}

.category-header__badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1.3;
}

.cat-badge--available {
    background: #E1F5EE;
    color: #0F6E56;
}

.cat-badge--unavailable {
    background: #FEE2E2;
    color: #991B1B;
}

.cat-badge--suspended {
    background: #F3F4F6;
    color: #6B7280;
}

.cat-badge--time {
    background: #E8294A;
    color: #fff;
}

.cat-badge--time-opens {
    background: #E0F2FE;
    color: #0C4A6E;
}

.category-header__info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #888);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    margin-left: auto;
}

.category-header__info-btn:hover,
.category-header__info-btn:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    color: var(--primary-color, #e8294a);
}

/* Descrição inline (abaixo do header, acima dos itens) */
.category-desc-inline {
    font-size: 0.78rem;
    color: var(--text-muted, #666);
    margin: 4px 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    padding: 0;
}

/* Legacy — manter para compatibilidade caso alguma view use */
.category-info { flex: 1; min-width: 0; }
.category-description { display: none; }
.category-desc-toggle { display: none; }

/* Seção de Destaques — carrossel horizontal */
.featured-section {
    margin-bottom: 2.5rem;
}

.featured-title {
    color: var(--primary-color);
}

.featured-carousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
}

.featured-carousel::-webkit-scrollbar {
    display: none;
}

.featured-card {
    flex: 0 0 260px;
    scroll-snap-align: start;
    background: var(--bg-white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.featured-card:active {
    transform: scale(0.98);
}

@media (hover: hover) {
    .featured-card:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }
}

.featured-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.featured-card-image {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: var(--bg-skeleton);
}

.featured-card-image .featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-card-image .item-promo-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
}

.featured-card-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.featured-card-category {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.featured-card-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-card-desc {
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-card-footer {
    margin-top: auto;
    padding-top: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.featured-card-prices {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.featured-card-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
}

.featured-card-price-free {
    color: var(--success-color);
}

@media (max-width: 480px) {
    .featured-card {
        flex: 0 0 220px;
    }

    .featured-card-image {
        height: 120px;
    }
}

/* Seção de Categorias com imagens circulares - Sticky */
.categories-section {
    padding: 0.75rem 1rem;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    /* Empilha logo abaixo do banner de happy hour (se houver).
       A variável é publicada pelo HappyHourBanner JS e cai para 0 quando ausente/dismissed. */
    top: var(--hh-banner-height, 0px);
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: top 0.3s ease;
}

/* Campo de busca na seção de categorias */
.categories-section .search-container {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    margin-top: -2px;
}

.categories-section .search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    padding: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 38px;
    height: 38px;
    overflow: hidden;
    cursor: pointer;
}

.categories-section .search-wrapper svg {
    margin: auto;
}

.categories-section .search-wrapper.expanded {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    height: 38px;
    padding: 0.5rem 1rem;
    background: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.2);
    border-radius: 19px;
    z-index: 10;
    cursor: text;
    justify-content: flex-start;
}

.categories-section .search-wrapper:focus-within {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    height: 38px;
    padding: 0.5rem 1rem;
    background: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.2);
    border-radius: 19px;
    z-index: 10;
    cursor: text;
    justify-content: flex-start;
}

.categories-section .search-icon {
    color: var(--text-muted);
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 20px;
    height: 20px;
    display: block;
}

.categories-section .search-wrapper.expanded .search-icon,
.categories-section .search-wrapper:focus-within .search-icon {
    margin-right: 0.5rem;
    color: var(--primary-color);
}

/* Animação suave do botão */
.categories-section .search-wrapper {
    will-change: width, border-radius, transform;
}

/* Estado ativo do botão */
.categories-section .search-wrapper:active:not(.expanded) {
    transform: scale(0.95);
}

.categories-section .search-wrapper:not(.expanded):not(:focus-within):hover {
    background: rgba(255, 107, 53, 0.08);
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.categories-section .search-wrapper:not(.expanded):not(:focus-within):hover .search-icon {
    color: var(--primary-color);
}

.categories-section .search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.9rem;
    color: var(--text-dark);
    width: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.categories-section .search-wrapper.expanded .search-input,
.categories-section .search-wrapper:focus-within .search-input {
    width: 100%;
    opacity: 1;
}

.categories-section .search-input::placeholder {
    color: var(--text-muted);
}

.categories-section .search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    margin-left: 0.5rem;
    flex-shrink: 0;
    opacity: 0;
}

.categories-section .search-wrapper.expanded .search-clear,
.categories-section .search-wrapper:focus-within .search-clear {
    opacity: 1;
}

.categories-section .search-clear:hover {
    background: var(--border-color);
    color: var(--text-dark);
}

.categories-section .search-results {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 300px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
}

.categories-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0 0.75rem;
    position: relative;
    min-height: 30px;
    width: 100%;
}

.categories-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0d9488;
    margin: 0 0 0.5rem 0;
    letter-spacing: 0.3px;
    flex: 0 0 auto;
}

/* Botão de lupa no header de categorias */
.categories-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1.5px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-white);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
}

.categories-search-btn:hover,
.categories-search-btn.is-active {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(139, 21, 56, 0.05);
}

/* Barra de busca expansível */
.categories-search-bar {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
    margin: 0 0.75rem;
    position: relative;
}

.categories-search-bar.is-open {
    max-height: 400px;
    opacity: 1;
    margin: 0 0.75rem 0.5rem;
}

.categories-search-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-light);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.2s;
}

.categories-search-wrapper:focus-within {
    border-color: var(--primary-color);
    background: var(--bg-white);
}

.categories-search-wrapper svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.categories-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--text-dark);
    outline: none;
}

.categories-search-input::placeholder {
    color: var(--text-muted);
}

.categories-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.categories-search-clear:hover {
    background: var(--text-muted);
    color: var(--bg-white);
}

/* Resultados da busca */
.categories-search-results {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    margin-top: 0.4rem;
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
}

.cat-search-header {
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.cat-search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s;
}

.cat-search-item:last-child {
    border-bottom: none;
}

.cat-search-item:hover {
    background: var(--bg-light);
}

.cat-search-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.cat-search-thumb-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--bg-light);
    flex-shrink: 0;
}

.cat-search-info {
    flex: 1;
    min-width: 0;
}

.cat-search-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
    line-clamp: 1;
    -webkit-line-clamp: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-search-name mark {
    background: #fef08a;
    color: var(--text-dark);
    border-radius: 2px;
    font-weight: 700;
}

.cat-search-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.1rem;
}

.cat-search-desc mark {
    background: #fef08a;
    color: var(--text-dark);
    border-radius: 2px;
}

.cat-search-price {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color);
    flex-shrink: 0;
}

.cat-search-opt-match {
    font-size: 0.75rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-top: 0.15rem;
}

.cat-search-opt-match mark {
    background: rgba(139, 21, 56, 0.12);
    color: var(--primary-color);
    border-radius: 2px;
    font-weight: 700;
}

/* Item indisponível na busca */
.cat-search-item--unavailable {
    opacity: 0.55;
}

.cat-search-item--unavailable .cat-search-thumb {
    filter: grayscale(0.7);
}

/* Badges de disponibilidade */
.cat-search-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 0.3rem;
    white-space: nowrap;
    line-height: 1.4;
}

.cat-search-badge--missing {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.cat-search-badge--unavailable {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.cat-search-badge--time {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.cat-search-no-results {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.cat-search-no-results svg {
    margin-bottom: 0.5rem;
    opacity: 0.4;
}

.cat-search-no-results p {
    font-size: 0.875rem;
    margin: 0;
}

.categories-view-all {
    font-size: 0.875rem;
    color: #9ca3af;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.categories-view-all:hover {
    color: var(--primary-color);
}

.categories-nav {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.5rem 0.75rem;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -webkit-scroll-snap-type: mandatory;
    /* Otimizações mobile */
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.categories-nav::-webkit-scrollbar {
    display: none;
}

/* Wrapper das categorias com indicador visual de scroll */
.categories-nav-wrapper {
    position: relative;
}

/* Indicador visual de scroll horizontal - gradiente fade-out à direita */
.categories-nav-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0.95) 100%);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}

/* Ocultar gradiente quando scroll está no final */
.categories-nav-wrapper.scrolled-end::after {
    opacity: 0;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    text-decoration: none;
    color: var(--text-dark);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Snap e otimizações */
    scroll-snap-align: start;
    flex-shrink: 0;
    touch-action: manipulation;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.category-item:active {
    transform: scale(0.92);
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-item:hover {
    opacity: 0.9;
    transform: scale(0.98);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-item.active {
    opacity: 1;
    transform: scale(1);
    animation: categoryPulse 0.4s ease-out;
    padding: 0 0.5rem;
    margin: 0 0.25rem;
}

@keyframes categoryPulse {
    0% {
        transform: scale(0.92);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.category-item.active .category-image-wrapper {
    border-color: var(--primary-color);
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.4);
    transform: scale(1.05);
}

.category-item.active .category-name {
    color: var(--primary-color);
    font-weight: 600;
}

.category-image-wrapper {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.category-item:hover .category-image-wrapper {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.category-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover; /* Opera */
    object-fit: cover;
    font-family: 'object-fit: cover;'; /* IE polyfill */
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
}

.category-item:hover .category-image {
    transform: scale(1.1);
}

.category-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 1.5rem;
}

.category-name {
    font-size: 0.75rem;
    color: var(--text-dark);
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

/* Mobile - Categorias mais compactas */
@media (max-width: 768px) {
    .categories-section {
        padding: 0.625rem 0.875rem;
    }
    
    .categories-title {
        font-size: 0.95rem;
        margin: 0 0 0.625rem 0;
    }
    
    .category-image-wrapper {
        width: 64px;
        height: 64px;
    }
    
    .category-name {
        font-size: 0.7rem;
        max-width: 70px;
    }
    
    .category-item {
        min-width: 56px;
    }
    
    .category-section {
        margin-bottom: 2.5rem;
    }
}

@media (max-width: 480px) {
    .categories-section {
        padding: 0.5rem 0.75rem;
    }
    
    .categories-title {
        font-size: 0.9rem;
        margin: 0 0 0.5rem 0;
    }
    
    .category-image-wrapper {
        width: 58px;
        height: 58px;
    }
    
    .category-name {
        font-size: 0.68rem;
        max-width: 64px;
    }
    
    .category-section {
        margin-bottom: 2rem;
    }
}

/* ===========================================
   COLLAPSE / EXPAND DE CATEGORIAS
   =========================================== */

/* Header clicável */
.category-header[data-collapse-ready="1"] {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.category-header[data-collapse-ready="1"]:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: 6px;
}

/* Chevron indicador de collapse — fixo na linha do título */
.category-collapse-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: auto;
    color: var(--text-muted, #6b7280);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.category-collapsed .category-collapse-chevron {
    transform: rotate(-90deg);
}

/* Estado colapsado: esconder conteúdo */
.category-section.category-collapsed .items-grid,
.category-section.category-collapsed .favoritos-da-casa,
.category-section.category-collapsed .featured-items-grid,
.category-section.category-collapsed .category-desc-inline {
    display: none;
}

.category-section.category-collapsed .category-header {
    border-bottom-color: transparent;
}

.category-section.category-collapsed {
    margin-bottom: 0.5rem;
}

/* ──────────── Cabeçalho de Subcategoria ────────────
   Estilo clean: nome da subcategoria alinhado à direita,
   compacto, com linha sutil de separação entre grupos.
   Responsivo: mobile pequeno, mobile, tablet, desktop, wide.
*/

.subcategoria-header {
    display: block;
    padding: 0.3rem 0;
    margin: 0.6rem 0 0.3rem;
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    text-align: right;
}

/* Primeiro header no items-grid: sem linha duplicada, colado no topo */
.items-grid > .subcategoria-header:first-child {
    margin-top: -0.25rem;
    border-top: none;
    padding-top: 0;
}

.subcategoria-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-color, #c91f4d);
    letter-spacing: 0;
    line-height: 1.3;
}

/* Grids: header ocupa a linha inteira (desktop/tablet no items-grid, sempre no favoritos-grid) */
@media (min-width: 769px) {
    .items-grid > .subcategoria-header {
        grid-column: 1 / -1;
    }
}

/* favoritos-grid é grid em todas as larguras (2/3/4 colunas) */
.favoritos-grid > .subcategoria-header {
    grid-column: 1 / -1;
}

/* Primeiro header em containers alternativos (sem linha duplicada) */
.favoritos-grid > .subcategoria-header:first-child,
.favoritos-da-casa > .subcategoria-header:first-child {
    margin-top: -0.25rem;
    border-top: none;
    padding-top: 0;
}

/* Desktop grande (≥1440px) */
@media (min-width: 1440px) {
    .subcategoria-header {
        padding: 0.4rem 0;
        margin: 0.75rem 0 0.35rem;
    }

    .subcategoria-title {
        font-size: 0.95rem;
    }
}

/* Mobile padrão (≤768px)
   Compensa o items-grid com width:100vw/margin-left:calc(50% - 50vw)
   aplicando padding horizontal igual ao do .main-content. */
@media (max-width: 768px) {
    .subcategoria-header {
        padding: 0.25rem 0.875rem 0.2rem;
        margin: 0.5rem 0 0.2rem;
    }

    .subcategoria-title {
        font-size: 0.85rem;
    }
}

/* Mobile pequeno (≤480px): iPhone SE, Android compact */
@media (max-width: 480px) {
    .subcategoria-header {
        padding: 0.2rem 0.75rem 0.15rem;
        margin: 0.4rem 0 0.15rem;
    }

    .subcategoria-title {
        font-size: 0.8rem;
    }
}

/* Mobile muito pequeno (≤360px): Galaxy A10 HD+, iPhone 5/SE antigo */
@media (max-width: 360px) {
    .subcategoria-header {
        padding: 0.2rem 0.625rem 0.15rem;
        margin: 0.3rem 0 0.1rem;
    }

    .subcategoria-title {
        font-size: 0.75rem;
    }
}

/* Landscape mobile (evita header muito grande em altura pequena) */
@media (max-height: 500px) and (orientation: landscape) {
    .subcategoria-header {
        padding: 0.15rem 0;
        margin: 0.3rem 0 0.1rem;
    }
}

/* Grid de itens - Layout Lista (Mobile) e Grid 2x2 (Desktop) */
.items-grid {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 0.75rem;
}

/* Desktop: Grid 2x2 */
@media (min-width: 1025px) {
    .items-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Card do item - Layout Lista com imagem à direita */
.item-card {
    position: relative;
    background: var(--bg-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.06);
}


@media (hover: hover) {
    .item-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

.item-card.item-unavailable,
.item-card.item-missing {
    opacity: 0.6;
}

/* Itens em falta (MISSING) ou indisponíveis - grayscale nos internos */
.item-card.item-missing .item-image,
.item-card.item-missing .item-text,
.item-card.item-unavailable .item-image,
.item-card.item-unavailable .item-text {
    filter: grayscale(70%);
}

.favoritos-horizontal.item-missing,
.favoritos-hero.item-missing,
.favoritos-grid-item.item-missing {
    opacity: 0.6;
}

.favoritos-horizontal.item-missing .favoritos-horizontal-img,
.favoritos-horizontal.item-missing .favoritos-horizontal-body,
.favoritos-hero.item-missing .favoritos-hero-content,
.favoritos-grid-item.item-missing .favoritos-grid-img,
.favoritos-grid-item.item-missing .favoritos-grid-body {
    filter: grayscale(70%);
}

/* Destaque especial — item em evidência no Happy Hour */
.item-card.item-featured {
    border: 2px solid var(--accent-color);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.06) 0%, rgba(255, 107, 53, 0.04) 100%);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.18);
    position: relative;
}

.item-card.item-featured::after {
    content: '⭐';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: linear-gradient(135deg, var(--accent-color) 0%, #e6c64a 100%);
    color: #2D0A1F;
    font-size: 0.6rem;
    font-weight: 700;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(212, 175, 55, 0.4);
    z-index: 5;
}

.item-card.item-featured .item-image-wrapper {
    width: 124px;
    height: 124px;
}

@media (hover: hover) {
    .item-card.item-featured:hover {
        box-shadow: 0 6px 24px rgba(212, 175, 55, 0.25);
        border-color: #e6c64a;
    }
}

.item-card > .item-content {
    display: flex;
    align-items: stretch;
    gap: 0.875rem;
    padding: 0.875rem;
    min-height: 152px;
}

.items-grid--alternating .item-card:nth-child(even) > .item-content {
    flex-direction: row-reverse;
}

.item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.item-text .item-price-row {
    margin-top: auto;
    padding-top: 0.5rem;
}

.item-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

/* Badges da API no nome do item */
.item-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.2;
    white-space: nowrap;
    margin-left: 0.25rem;
}

.item-badge-best_seller {
    background: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);
    color: #fff;
}

.item-badge-new_item {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
}

.item-badge-recommended {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.item-badge-popular {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
}

.item-badge-adults {
    background: linear-gradient(135deg, #6b21a8 0%, #581c87 100%);
    color: #fff;
    font-size: 0.55rem;
    letter-spacing: 0.02em;
}

/* Modal de confirmação de idade (+18) */
.age-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.age-confirm-overlay.visible {
    opacity: 1;
}

.age-confirm-box {
    background: var(--bg-white);
    border-radius: 16px;
    padding: 2rem;
    max-width: 340px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.age-confirm-overlay.visible .age-confirm-box {
    transform: scale(1);
}

.age-confirm-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.age-confirm-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.age-confirm-text {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.4;
    margin-bottom: 1.25rem;
}

.age-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.age-confirm-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.age-confirm-yes {
    background: linear-gradient(135deg, #6b21a8 0%, #581c87 100%);
    color: #fff;
}

.age-confirm-yes:active {
    transform: scale(0.97);
}

.age-confirm-no {
    background: var(--bg-light);
    color: var(--text-light);
}

.age-confirm-no:active {
    transform: scale(0.97);
}

.item-description {
    font-size: 0.8125rem;
    color: var(--text-light);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.item-price-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.item-price-section {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
}

.item-price-original {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.item-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}

.item-price-prefix {
    font-size: 0.72rem; /* segue padrão de .modal-price-label */
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
    display: block; /* garante que o valor mantenha o tamanho normal */
    line-height: 1;
}

.item-price-max {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
}

.item-price-separator {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
    margin: 0 0.2rem;
}

/* Imagem do item à direita */
.item-image-wrapper {
    position: relative;
    width: 124px;
    height: 124px;
    flex-shrink: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--bg-cream);
}

.item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Badge de galeria de fotos (extra_images) */
.item-gallery-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 6px;
    z-index: 8;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.item-gallery-badge svg {
    flex-shrink: 0;
}

/* Badge overlay centralizado — padrão "Esgotado" */
.item-unavailable-badge,
.item-missing-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    z-index: 8;
    pointer-events: none;
    opacity: 1 !important;
    filter: none !important;
    border-radius: inherit;
}

.item-card.item-time-restricted {
    opacity: 0.55;
}

.item-badge-time {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(52, 73, 94, 0.12);
    color: #546e7a;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    vertical-align: middle;
    line-height: 1;
}

.item-badge-time svg {
    flex-shrink: 0;
}

/* Contador de recomendações abaixo da imagem */
.item-likes-counter {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.92);
    padding: 4px 8px;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    z-index: 8;
    transition: all 0.2s ease;
}

/* Ocultar contador quando não houver curtidas */
.item-likes-counter.hidden {
    display: none;
}

.item-likes-counter .counter-icon {
    color: var(--secondary-color);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.item-likes-counter .counter-number {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
    min-width: 12px;
    text-align: center;
}

/* Hover no card: contador fica mais visível */
.item-card:hover .item-likes-counter {
    background: rgba(255, 255, 255, 1);
}

/* Animação quando contador aumenta */
.item-likes-counter.pulse {
    animation: counterPulse 0.5s ease;
}

@keyframes counterPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.item-likes-counter.pulse .counter-icon {
    animation: heartBeat 0.5s ease;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1.1); }
    75% { transform: scale(1.15); }
}

/* Botão de favoritar - Badge sobre a imagem */
.item-favorite-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--secondary-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    clip-path: circle(50%);
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.item-favorite-btn:hover {
    background: #fff;
    transform: scale(1.08);
}

.item-favorite-btn:active {
    transform: scale(0.98);
}

/* Estado favoritado: coração preenchido vermelho */
.item-favorite-btn.favorited {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.95) 0%, rgba(139, 21, 56, 0.95) 100%);
    color: #ffffff;
    border-color: rgba(212, 175, 55, 0.5);
    opacity: 1;
}

.item-favorite-btn.favorited svg {
    fill: #ffffff;
}

.item-favorite-btn svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.item-favorite-btn:hover svg {
    transform: scale(1.15);
}

/* Animação de pulso quando favorita */
.item-favorite-btn.favorited svg {
    animation: heartPulse 0.5s ease;
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Animação shake para quando usuário tenta curtir novamente */
.item-favorite-btn.shake {
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Complementos */
.item-complements {
    margin: 1rem 0;
    padding: 0.75rem;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--secondary-color);
}

.complement-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    font-size: 0.85rem;
}

.complement-group:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.complement-group-name {
    font-weight: 500;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.complement-required {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1rem;
}

.complement-group-info {
    font-size: 0.75rem;
    color: var(--text-light);
    background: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    overflow: hidden;
    flex: 1;
}

.favoritos-da-casa {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 0.75rem;
}

.favoritos-hero {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    position: relative;
}

.favoritos-hero-content {
    height: 280px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 1rem;
    position: relative;
}

.favoritos-hero-content .item-favorite-btn {
    top: 10px;
    right: 10px;
}

.favoritos-hero-content .item-likes-counter {
    top: 10px;
    left: 10px;
    bottom: auto;
    right: auto;
}

.favoritos-hero-footer {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.favoritos-hero-title {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.favoritos-hero-price {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
    color: var(--text-dark);
    font-weight: 900;
    font-size: 1.1rem;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}

.favoritos-hero-price .item-price-original {
    color: rgba(45, 10, 31, 0.75);
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: line-through;
}

.favoritos-hero-price .item-price {
    color: var(--text-dark);
}

.favoritos-horizontal {
    position: relative;
    background: var(--bg-white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.favoritos-horizontal-content {
    display: flex;
    flex-direction: row;
    gap: 0.9rem;
    padding: 0.9rem;
}

.favoritos-horizontal-image {
    width: 35%;
    max-width: 160px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.favoritos-horizontal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.favoritos-horizontal-body {
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1;
    align-self: stretch;
}

.favoritos-horizontal-title {
    color: var(--text-dark);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.2;
}

.favoritos-horizontal-desc {
    color: var(--text-light);
    font-size: 0.82rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.favoritos-horizontal-description {
    color: var(--text-light);
    font-size: 0.85rem;
    line-height: 1.4;
    margin-top: 0.35rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.item-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.item-prep-time {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #666;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
    border-left: 2px solid #FF6B35;
    white-space: nowrap;
}

.item-serving-size {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.item-serving-size svg {
    flex-shrink: 0;
}

.item-serving-size-portion {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.25rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    color: #10b981;
    font-weight: 500;
}

.item-serving-size-portion svg {
    flex-shrink: 0;
    color: #10b981;
}

/* Legado — mantido para retrocompatibilidade caso algum lugar ainda use .item-portion-info */
.item-portion-info {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.item-portion-info svg {
    flex-shrink: 0;
    color: #10b981;
}

.favoritos-horizontal-price {
    margin-top: auto;
    padding-top: 0.5rem;
    align-self: flex-start;
    color: var(--primary-color);
    font-weight: 900;
    font-size: 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.favoritos-horizontal-price .item-price-original {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.favoritos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

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

@media (min-width: 1025px) {
    .favoritos-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.favoritos-grid-item {
    position: relative;
    background: var(--bg-white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
}

.favoritos-grid-item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.favoritos-grid-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bg-cream) 0%, var(--border-color) 100%);
    position: relative;
}

.favoritos-grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.favoritos-grid-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.35rem;
}

.favoritos-grid-title {
    color: var(--text-dark);
    font-weight: 800;
    font-size: 0.92rem;
    line-height: 1.2;
}

.favoritos-grid-price {
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--primary-color);
    font-weight: 900;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.favoritos-grid-price .item-price-original {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

/* Mensagens */
.error-message,
.empty-state {
    background: var(--bg-white);
    padding: 3rem 2rem;
    margin: 2rem 1.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
}

.error-message {
    border: 2px solid #fee2e2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.error-icon {
    color: #ef4444;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.error-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.error-description {
    font-size: 1rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

.error-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
    min-height: 48px;
}

.error-retry-btn:hover {
    background: #b91c1c;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.error-retry-btn:active {
    transform: scale(0.98);
}

.error-debug {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.error-debug code {
    font-family: 'Courier New', monospace;
    background: white;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.empty-state {
    color: var(--text-light);
}

/* ================================================
   Error Container (views/components/error.php)
   Escopado para não conflitar com .error-message acima
   ================================================ */

.error-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
}

.error-container .error-content {
    text-align: center;
    max-width: 500px;
}

.error-container .error-icon {
    color: #DC2626;
    margin-bottom: 1.5rem;
    animation: none;
}

.error-container .error-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1F2937;
    margin-bottom: 0.75rem;
}

.error-container .error-message {
    color: #6B7280;
    margin-bottom: 2rem;
    line-height: 1.6;
    border: none;
    padding: 0;
    box-shadow: none;
    background: none;
    display: block;
    max-width: none;
}

.error-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.error-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

.error-btn-primary {
    background: #DC2626;
    color: white;
}

.error-btn-primary:hover {
    background: #B91C1C;
}

.error-btn-secondary {
    background: #F3F4F6;
    color: #374151;
}

.error-btn-secondary:hover {
    background: #E5E7EB;
}

.error-details {
    margin-top: 2rem;
    text-align: left;
    background: #F9FAFB;
    border-radius: 0.5rem;
    padding: 1rem;
}

.error-details summary {
    cursor: pointer;
    font-weight: 500;
    color: #374151;
}

.error-details-content {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #6B7280;
}

.error-details-content p {
    margin: 0.5rem 0;
}

/* Footer - estilos em _ux-enhancements.css */

/* Badge de desconto */
.item-discount-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
    z-index: 3;
}

/* Badge de item destacado */
.item-highlighted-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: white;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.4);
    z-index: 3;
}

.item-highlighted-badge svg {
    width: 12px;
    height: 12px;
}

/* Badge +18 */
.item-adults-badge {
    position: absolute;
    top: 44px;
    right: 8px;
    background: rgba(52, 73, 94, 0.95);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    border: 2px solid rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 3;
}

/* Badges personalizados */
.item-custom-badge {
    position: absolute;
    top: 44px;
    left: 8px;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.item-badge-new_item {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.item-badge-recommended {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.item-badge-limited_edition {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

/* Unit type no preço */
.item-unit-type {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-light);
    margin-left: 0.25rem;
}

/* Contador regressivo de promoção */
.item-promo-countdown {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(255, 152, 0, 0.95);
    color: white;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
    animation: pulse-promo 2s ease-in-out infinite;
}

.item-promo-countdown.expired {
    background: rgba(158, 158, 158, 0.95);
    animation: none;
}

.item-promo-countdown svg {
    flex-shrink: 0;
}

.countdown-text {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@keyframes pulse-promo {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(255, 152, 0, 0.5);
    }
}

/* Badge de view_only */
.item-view-only-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(108, 117, 125, 0.95);
    color: white;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Contador de horário permitido */
.item-time-countdown {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(33, 150, 243, 0.95);
    color: white;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.item-time-countdown.available {
    background: rgba(76, 175, 80, 0.95);
}

.item-time-countdown.expired {
    background: rgba(158, 158, 158, 0.95);
}

/* Badge de fora do horário */
.item-unavailable-time-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(244, 67, 54, 0.95);
    color: white;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Preço original riscado */
.item-price-original {
    font-size: 0.9rem;
    color: var(--text-light);
    text-decoration: line-through;
    display: block;
    margin-bottom: 0.2rem;
}

/* Skeleton Screen Inicial */
#initial-skeleton {
    position: relative;
    z-index: 10;
}

#main-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Animações de transição */
.skeleton-fade-out {
    opacity: 0 !important;
    transform: translateY(-20px) !important;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out !important;
}

.content-fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out !important;
}

/* Dynamic Skeleton */
.dynamic-skeleton {
    padding: 1rem;
}

.dynamic-skeleton .skeleton-card {
    margin-bottom: 1rem;
}

/* Performance optimizations */
.skeleton-container,
.skeleton-card,
.skeleton-image,
.skeleton-title,
.skeleton-text,
.skeleton-price {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Responsive skeleton adjustments */
@media (max-width: 768px) {
    #initial-skeleton {
        padding: 0.5rem;
    }
    
    .skeleton-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .skeleton-nav {
        padding: 0.5rem 0;
    }
    
    .skeleton-nav-item {
        min-width: 100px;
        height: 2rem;
    }
}

@media (max-width: 480px) {
    .skeleton-header {
        padding: 1rem;
    }
    
    .skeleton-title {
        width: 150px;
    }
    
    .skeleton-image {
        height: 150px;
    }
}

/* Highlight de item encontrado na busca */
.item-card.search-highlighted {
    animation: searchHighlight 3s ease-in-out;
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
    transform: scale(1.02);
    z-index: 10;
    position: relative;
}

@keyframes searchHighlight {
    0% {
        background-color: rgba(255, 107, 53, 0.1);
        transform: scale(1.02);
        box-shadow: 0 0 30px rgba(255, 107, 53, 0.5);
    }
    50% {
        background-color: rgba(255, 107, 53, 0.05);
        transform: scale(1.01);
        box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
        box-shadow: none;
        border: 1px solid var(--border-color);
    }
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, var(--bg-light) 25%, var(--border-color) 50%, var(--bg-light) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-card {
    background: var(--bg-white);
    border-radius: 20px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.skeleton-image {
    width: 100%;
    height: 200px;
    margin-bottom: 1rem;
}

.skeleton-title {
    height: 24px;
    width: 70%;
    margin-bottom: 0.75rem;
}

.skeleton-text {
    height: 16px;
    width: 100%;
    margin-bottom: 0.5rem;
}

.skeleton-text-short {
    height: 16px;
    width: 40%;
}

.skeleton-price {
    height: 28px;
    width: 30%;
    margin-top: 1rem;
}

/* ================================================
   Loading Skeleton Inicial (views/components/loading-skeleton.php)
   ================================================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.skeleton-container {
    padding: 1rem;
    animation: fadeIn 0.3s ease-in;
}

/* Nav: círculos */
.skeleton-nav {
    display: flex;
    gap: 1.25rem;
    padding: 0.75rem 0 1.5rem;
    overflow: hidden;
}

.skeleton-nav-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.skeleton-nav-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.skeleton-nav-label {
    width: 48px;
    height: 10px;
    border-radius: 4px;
}

/* Section title */
.skeleton-section-title {
    height: 22px;
    width: 180px;
    margin-bottom: 1rem;
}

/* List card */
.skeleton-list-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-white, #fff);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.skeleton-list-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-card-title {
    height: 16px;
    width: 70%;
}

.skeleton-card-text {
    height: 12px;
    width: 100%;
}

.skeleton-card-text.short {
    width: 50%;
}

.skeleton-list-text .skeleton-price {
    height: 18px;
    width: 80px;
    margin-top: 0.25rem;
}

.skeleton-list-img {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    flex-shrink: 0;
}

/* Modal - Bottom Sheet Design */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.active {
    display: flex;
    opacity: 1;
    align-items: flex-end;
    justify-content: center;
}

.modal.active ~ * {
    pointer-events: none;
}

body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100vh;
    height: 100dvh;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
}

.modal-content {
    position: relative;
    background: var(--bg-white);
    border-radius: 22px 22px 0 0;
    max-width: 460px;
    width: 100%;
    max-height: 94vh;
    max-height: 94dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.25);
    animation: modalSlideUp 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    touch-action: pan-y;
}

/* Drag handle — indicador visual de que o modal pode ser arrastado */
.modal-drag-handle {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    z-index: 22;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Quando não há foto de topo, usar cor escura para contraste com fundo branco */
.modal-content:not(:has(.modal-photo-block)) .modal-drag-handle {
    background: rgba(0, 0, 0, 0.18);
    box-shadow: none;
}

/* Indicador visual de "voltar" que aparece durante swipe right */
.modal-back-hint {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: var(--text-dark, #1f2937);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    z-index: 1002;
    pointer-events: none;
    opacity: 0;
}

#modalBody {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    position: relative; /* âncora para o sticky title absolute */
}

/* Sticky title — aparece ao rolar a foto/cabeçalho para fora */
.modal-sticky-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 18; /* abaixo do .modal-close (z-index 20) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 4rem 0.75rem 1.25rem; /* pr maior para não cobrir o botão fechar */
    gap: 1.25rem;
    background: var(--bg-white, #fff);
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
    pointer-events: none;
}

.modal-sticky-title.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.modal-sticky-title-text {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark, #1a1a1a);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .modal-sticky-title {
        padding: 0.85rem 3.5rem 0.7rem 1rem;
    }
    .modal-sticky-title-text {
        font-size: 0.95rem;
    }
}

@keyframes modalSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0.5;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Botao Fechar - canto superior direito sobre a foto */
.modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.2s ease;
    opacity: 0;
    transform: scale(0.8);
}

.modal.active .modal-close {
    opacity: 1;
    transform: scale(1);
}

.modal-close:hover {
    background: var(--primary-color);
}

.modal-close:active {
    transform: scale(0.9);
}

.modal-close svg {
    color: white;
    width: 18px;
    height: 18px;
}

/* Bloco da Foto */
.modal-photo-block {
    flex-shrink: 0;
    position: relative;
}

.modal-item-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f0f0f0;
}

.modal-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.modal-item-image img,
.modal-item-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.18s ease;
}

.modal-item-image img.image-loading {
    opacity: 0.4;
}

.modal-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
    color: white;
    font-size: 0.7rem;
    pointer-events: none;
}

/* Shimmer de loading na imagem */
.modal-image-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: imageShimmer 1.5s infinite;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-image-container.loading::before {
    opacity: 1;
}

@keyframes imageShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Gradiente escuro na base da foto (40% altura) */
.modal-image-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 0 22px 16px;
    pointer-events: none;
    z-index: 5;
}

.modal-price-overlay {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 14px;
    border-radius: 12px;
}

.modal-price-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    white-space: nowrap;
}

.modal-price-original-overlay {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: line-through;
    white-space: nowrap;
}

.modal-price-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    white-space: nowrap;
}

/* Badge de desconto */
.modal-discount-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--primary-color);
    color: white;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 11;
}

/* Thumbnails horizontais */
.modal-image-thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 22px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: var(--bg-white);
    flex-shrink: 0;
}

.modal-image-thumbs::-webkit-scrollbar {
    display: none;
}

.modal-image-thumb {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.18s ease;
    opacity: 0.6;
}

.modal-image-thumb.active {
    border-color: var(--primary-color);
    opacity: 1;
    box-shadow: 0 0 0 1px var(--primary-color);
}

.modal-image-thumb:hover:not(.active) {
    opacity: 0.85;
}

.modal-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Setas de navegacao nas laterais da imagem */
.modal-image-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-dark);
    border-radius: 50%;
    font-size: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
}

.modal-image-container:hover .modal-image-nav {
    opacity: 1;
}

.modal-image-nav svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-dark);
    stroke-width: 2.5;
    fill: none;
}

.modal-image-prev {
    left: 0.5rem;
}

.modal-image-next {
    right: 0.5rem;
}

.modal-image-nav:hover:not(:disabled) {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) scale(1.08);
}

.modal-image-nav:disabled {
    opacity: 0 !important;
    cursor: default;
}

/* Dots indicadores centralizados */
.modal-image-dots {
    position: absolute;
    bottom: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 12px;
    z-index: 10;
}

.modal-image-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    cursor: pointer;
}

.modal-image-dot.active {
    background: white;
    transform: scale(1.3);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

/* Corpo Scrollavel — sem padding para que sticky headers colem na borda */
.modal-body-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Info do Item — carrega o padding que antes era do scroll */
.modal-item-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 22px 16px 22px;
}

.modal-item-name {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
    margin: 0;
}

/* Badges do item no modal */
.modal-item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.modal-item-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
}

.modal-item-badge-best_seller {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

.modal-item-badge-new_item {
    background: rgba(46, 204, 113, 0.1);
    color: #27ae60;
}

.modal-item-badge-recommended {
    background: rgba(52, 152, 219, 0.1);
    color: #2980b9;
}

.modal-item-badge-popular {
    background: rgba(241, 196, 15, 0.15);
    color: #d4a017;
}

.modal-item-badge-adults {
    background: rgba(142, 68, 173, 0.1);
    color: #8e44ad;
}

.modal-item-badge-unavailable {
    background: rgba(149, 165, 166, 0.15);
    color: #7f8c8d;
}

.modal-item-badge-missing {
    background: rgba(255, 152, 0, 0.15);
    color: #f57c00;
    font-weight: 600;
}

.modal-item-description {
    color: var(--text-light);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}

/* Container para tempo de preparo e serving size lado a lado */
.modal-item-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* Tempo de preparo no modal */
.modal-prep-time {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-light);
    font-size: 0.85rem;
}

.modal-prep-time svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

/* Serving size no modal */
.modal-serving-size {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-light);
    font-size: 0.85rem;
}

.modal-serving-size svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

/* Porção detalhada no modal */
.modal-portion-info {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-light);
    font-size: 0.85rem;
}

.modal-portion-info svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

/* Cross-sell "Peça junto" */
.modal-cross-sell {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.modal-cross-sell-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.modal-cross-sell-title svg {
    color: var(--primary-color);
}

.modal-cross-sell-list {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.modal-cross-sell-list::-webkit-scrollbar {
    display: none;
}

.modal-cross-sell-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-light);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    min-width: 0;
    flex-shrink: 0;
    max-width: 200px;
}

.modal-cross-sell-card:hover {
    border-color: var(--primary-color);
    background: var(--bg-white);
}

.cross-sell-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.cross-sell-thumb-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--border-color);
    flex-shrink: 0;
}

.cross-sell-info {
    min-width: 0;
}

.cross-sell-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.cross-sell-price {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Botão recomendar no modal */
.modal-recommend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.modal-recommend-row .modal-favorite-btn {
    position: static;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    width: auto;
    height: auto;
    min-width: unset;
    min-height: 36px;
    aspect-ratio: unset;
    background: rgba(196, 30, 58, 0.08);
    border: 1px solid rgba(196, 30, 58, 0.15);
    border-radius: 20px;
    clip-path: none;
    overflow: visible;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--secondary-color);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    z-index: auto;
}

.modal-recommend-row .modal-favorite-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: none;
}

.modal-rec-label {
    font-size: 0.82rem;
    font-weight: 600;
}

.modal-recommend-row .modal-favorite-btn:hover {
    background: rgba(196, 30, 58, 0.15);
    transform: scale(1.03);
    box-shadow: none;
    border-color: rgba(196, 30, 58, 0.25);
}

.modal-recommend-row .modal-favorite-btn.favorited {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.95), rgba(139, 21, 56, 0.95));
    color: white;
    border-color: transparent;
}

.modal-recommend-row .modal-favorite-btn.favorited .modal-rec-label {
    color: white;
}

/* Contador no modal */
.modal-likes-counter {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(196, 30, 58, 0.08);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--secondary-color);
}

.modal-likes-counter.hidden {
    display: none;
}

/* Notificação em tempo real de nova recomendação — toast fixo no modal */
.rec-live-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 10010;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #FFF5F7 0%, #FFF0F3 100%);
    border: 1px solid rgba(196, 30, 58, 0.2);
    border-radius: 28px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--secondary-color);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 
        0 4px 20px rgba(196, 30, 58, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
    pointer-events: none;
    max-width: 90vw;
}

.rec-live-notification.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.rec-live-notification svg {
    flex-shrink: 0;
    color: var(--secondary-color);
    animation: heartBeat 0.6s ease;
}

.rec-live-notification span {
    line-height: 1.3;
}

/* Preco inline (quando nao tem foto) */
.modal-price-inline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.modal-price-inline .price-final {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.modal-price-inline .price-separator {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
}

.modal-price-inline .price-original {
    font-size: 1rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

/* Badges */
.modal-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(52, 73, 94, 0.1);
    color: #34495e;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    width: fit-content;
}

.modal-time-badge svg {
    flex-shrink: 0;
}

.modal-promo-schedule-badge {
    display: inline-block;
    background: rgba(231, 76, 60, 0.1);
    color: var(--primary-color);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    width: fit-content;
}

/* Skeleton Loading */
.modal-skeleton {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.skeleton-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 12px;
}

.skeleton-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 22px;
}

.skeleton-title {
    height: 24px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    width: 60%;
}

.skeleton-text {
    height: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    width: 100%;
}

.skeleton-text.short {
    width: 40%;
}

.skeleton-price {
    height: 32px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    width: 120px;
}

.skeleton-actions {
    height: 36px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 20px;
    width: 140px;
}

/* ===========================================
   SOCIAL PROOF — VISUALIZAÇÕES DO DIA
   =========================================== */
.modal-social-proof {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.25rem 0.65rem;
    margin-bottom: 0.75rem;
}

.modal-social-proof svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* ===========================================
   FOOTER FIXO — Ações sempre visíveis na base
   Padrão Espetos Grill: footer nunca rola
   =========================================== */
.modal-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-white);
    z-index: 10;
}

.modal-footer .modal-recommend-row {
    margin-top: 0;
    flex: 1;
}

/* ===========================================
   FULLSCREEN MOBILE (≤480px)
   Inspirado no padrão Espetos Grill:
   modal ocupa 100% da tela em dispositivos pequenos
   =========================================== */
@media (max-width: 480px) {
    .modal.active {
        align-items: stretch;
        justify-content: stretch;
        padding: 0 !important;
    }

    .modal-content {
        max-width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
        animation: modalFadeIn 0.25s ease-out;
    }

    .modal-overlay {
        display: none;
    }

    .modal-close {
        top: 0.5rem;
        right: 0.5rem;
    }

    .modal-item-info {
        padding: 16px 16px 12px 16px;
    }

    .modal-item-name {
        font-size: 1.4rem;
    }

    .modal-item-description {
        font-size: 0.88rem;
    }

    .modal-footer {
        padding: 10px 16px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Modal de Imagem Ampliada */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: auto;
}

.image-modal.active {
    opacity: 1;
}

.image-modal.closing {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.image-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    pointer-events: auto;
    cursor: default;
}

.image-modal-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
}

/* Botao fechar - canto superior direito */
.image-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 20;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.image-modal-close svg {
    width: 20px;
    height: 20px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

.image-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

/* Area da imagem */
.image-modal-area {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: zoom-in;
    position: relative;
}

.image-modal-img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    transform-origin: center;
    transition: opacity 0.3s ease, transform 0.1s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.image-modal.active .image-modal-img {
    animation: imageZoomIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes imageZoomIn {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Setas laterais */
.image-modal-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 15;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.image-modal-nav-btn svg {
    width: 22px;
    height: 22px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

.image-modal-prev {
    left: 1rem;
}

.image-modal-next {
    right: 1rem;
}

.image-modal-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.1);
}

.image-modal-nav-btn:active:not(:disabled) {
    transform: translateY(-50%) scale(0.95);
}

.image-modal-nav-btn:disabled {
    opacity: 0.15;
    cursor: default;
}

/* Dots */
.image-modal-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 14px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 15;
}

.image-modal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
}

.image-modal-dot.active {
    background: white;
    transform: scale(1.3);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.image-modal-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.7);
}

/* Mobile */
@media (max-width: 768px) {
    .image-modal-close {
        top: 0.75rem;
        right: 0.75rem;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        z-index: 10000;
    }
    
    .image-modal-close svg {
        width: 18px;
        height: 18px;
    }
    
    .image-modal-nav-btn {
        width: 38px;
        height: 38px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    .image-modal-nav-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .image-modal-prev {
        left: 0.5rem;
    }
    
    .image-modal-next {
        right: 0.5rem;
    }
    
    .image-modal-img {
        max-width: 96vw;
        max-height: 85vh;
    }
    
    .image-modal-dots {
        bottom: 1rem;
        gap: 6px;
        padding: 5px 10px;
    }
    
    .image-modal-dot {
        width: 7px;
        height: 7px;
    }
}

/* Separador com texto centralizado */
.modal-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.modal-separator::before,
.modal-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.modal-separator span {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Container de Complementos */
.modal-complements {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

/* Grupo de Complemento */
.modal-complement-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Header sticky — padrão Espetos Grill
   top usa CSS variable --sticky-title-h (definida pelo ModalManager.bindStickyTitle)
   para não ficar sobreposto pelo .modal-sticky-title quando este estiver visível. */
.modal-complement-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 22px;
    background: var(--bg-light);
    border-top: 1px solid var(--border-color);
    position: sticky;
    top: var(--sticky-title-h, 0px);
    z-index: 5;
    transition: top 0.22s ease;
}

.modal-complement-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.modal-complement-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
    margin: 0;
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.modal-complement-subtitle {
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Badges compactas — bg sólido, texto branco */
.modal-complement-badges {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.modal-complement-badge {
    font-size: 0.625rem;
    font-weight: 400;
    color: white;
    background: var(--text-muted);
    padding: 3px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
}

.modal-complement-badge.counter {
    background: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.modal-complement-badge.required {
    background: var(--primary-color);
}

/* Lista de opcoes */
.modal-complement-options {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Card de opcao (somente leitura) */
.modal-option-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
    position: relative;
}

.modal-option-card:last-child {
    border-bottom: none;
}

.modal-option-card:hover {
    background: var(--bg-light);
}

/* Opções em falta (MISSING) - esmaecidas com grayscale */
.modal-option-card.missing {
    opacity: 0.5;
}

/* Aplicar grayscale apenas nos elementos internos, não na badge */
.modal-option-card.missing .modal-option-icon,
.modal-option-card.missing .modal-option-info,
.modal-option-card.missing .modal-option-price {
    filter: grayscale(80%);
}

/* Badge "Em falta" para opções MISSING - sempre visível */
.modal-option-card.missing::after {
    content: 'Em falta';
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(255, 152, 0, 0.95) !important;
    color: white !important;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3);
    opacity: 1 !important;
    filter: none !important;
}

/* Icone quadrado */
.modal-option-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #F2C4A0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    overflow: hidden;
}

.modal-option-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info da opcao */
.modal-option-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.modal-option-name {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.modal-option-description {
    font-size: 0.625rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.3;
    text-transform: uppercase;
}

/* Preco da opcao */
.modal-option-price {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-dark);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

.modal-option-price.free {
    color: #4CAF50;
    font-weight: 400;
}

/* Share Button */
.modal-share-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    background: none;
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 0.8rem;
    color: var(--c-text-muted, #6b7280);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.modal-share-btn:hover {
    background: var(--c-bg-hover, #f3f4f6);
    color: var(--c-text, #111827);
    border-color: var(--c-text-muted, #6b7280);
}

.modal-share-btn svg {
    flex-shrink: 0;
}

/* Share Toast */
@keyframes slideUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes slideDown {
    from { opacity: 1; transform: translate(-50%, 0); }
    to { opacity: 0; transform: translate(-50%, 20px); }
}

/* Skeleton Animations */
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes skeleton-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ================================================
   Modal de Feedback
   ================================================ */

.feedback-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feedback-modal.active {
    opacity: 1;
}

.feedback-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.feedback-modal-content {
    position: relative;
    background: var(--bg-white);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem 1.5rem 2rem;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.15);
}

.feedback-modal.active .feedback-modal-content {
    transform: translateY(0);
}

.feedback-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--bg-light);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-light);
    transition: background 0.2s, color 0.2s;
}

.feedback-modal-close:hover {
    background: #f1f1f1;
    color: var(--text-dark);
}

.feedback-modal-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-right: 2rem;
}

.feedback-modal-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.feedback-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 0.25rem;
}

.feedback-modal-subtitle {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
}

.feedback-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.feedback-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.feedback-stars-group {
    text-align: center;
}

.feedback-stars {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.feedback-star {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: #d1d5db;
    transition: color 0.15s, transform 0.15s;
}

.feedback-star svg {
    width: 36px;
    height: 36px;
    display: block;
}

.feedback-star.filled,
.feedback-star:hover {
    color: #f59e0b;
}

.feedback-star.filled svg {
    fill: #f59e0b;
    stroke: #f59e0b;
}

.feedback-star:hover {
    transform: scale(1.15);
}

.feedback-stars-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #f59e0b;
    min-height: 1.2em;
}

.feedback-field-group {
    display: flex;
    flex-direction: column;
}

.feedback-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feedback-category-btn {
    padding: 0.45rem 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 2rem;
    background: var(--bg-white);
    color: var(--text-dark);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
}

.feedback-category-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.feedback-category-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.feedback-textarea {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text-dark);
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.feedback-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.feedback-char-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
    margin-top: 0.25rem;
}

.feedback-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    color: #dc2626;
    font-size: 0.88rem;
    padding: 0.6rem 0.85rem;
}

.feedback-submit-btn {
    width: 100%;
    padding: 0.85rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    min-height: 48px;
}

.feedback-submit-btn:hover:not(:disabled) {
    filter: brightness(0.9);
}

.feedback-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.feedback-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    gap: 0.75rem;
}

.feedback-success-icon {
    font-size: 3rem;
}

.feedback-success-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.feedback-success-text {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.feedback-success-close {
    margin-top: 0.5rem;
    padding: 0.7rem 2rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
}

.footer-feedback-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}

.footer-feedback-link:hover {
    color: var(--text-light);
}

/* Responsividade Mobile para Lista de Itens */
@media (max-width: 768px) {
    .items-grid {
        gap: 0.5rem;
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }

    .item-card {
        border-radius: 0;
    }

    .item-card > .item-content {
        padding: 0.75rem;
        min-height: 148px;
        gap: 0.75rem;
    }

    .item-image-wrapper {
        width: 124px;
        height: 124px;
    }
    
    .item-name {
        font-size: 0.9375rem;
    }
    
    .item-description {
        font-size: 0.8125rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    
    .item-price {
        font-size: 1rem;
    }
    
    .item-favorite-btn {
        top: 6px;
        right: 6px;
        width: 32px;
        height: 32px;
    }
    
    .item-favorite-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .item-likes-counter {
        bottom: 4px;
        right: 4px;
        padding: 3px 6px;
        gap: 3px;
    }
    
    .item-likes-counter .counter-icon {
        width: 14px;
        height: 14px;
    }
    
    .item-likes-counter .counter-number {
        font-size: 0.6875rem;
    }
    
    .categories-section {
        padding: 0.75rem 0.75rem;
    }
    
    .categories-header {
        margin-bottom: 0.625rem;
        padding: 0 0.875rem;
        min-height: 34px;
        position: relative;
    }
    
    .categories-section .search-container {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        margin-top: -2px;
        z-index: 10;
    }
    
    .categories-section .search-wrapper {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .categories-section .search-icon {
        width: 20px;
        height: 20px;
        color: var(--text-muted);
        margin: 0;
        flex-shrink: 0;
        display: block;
    }
    
    .categories-section .search-wrapper.expanded,
    .categories-section .search-wrapper:focus-within {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: calc(100vw - 2rem);
        max-width: 320px;
        height: 44px;
        border-radius: 22px;
        background: white;
        border-color: var(--primary-color);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        z-index: 20;
    }
    
    .categories-section .search-input {
        padding: 0 1rem;
        font-size: 16px; /* Evita zoom no iOS */
        height: 44px;
        line-height: 44px;
    }
    
    .categories-section .search-results {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 40px);
        max-width: 400px;
        max-height: 50vh;
        overflow-y: auto;
        background: white;
        border: 2px solid var(--primary-color);
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        z-index: 9999;
        padding: 1rem;
    }
    
    /* Ajuste para telas muito pequenas */
    @media (max-width: 400px) {
        .categories-section .search-results {
            width: calc(100vw - 20px);
            bottom: 10px;
            max-width: none;
        }
    }
    
    /* Ajuste para quando o teclado está aberto */
    @media (max-height: 500px) {
        .categories-section .search-results {
            max-height: 40vh;
            bottom: 10px;
        }
    }
    
    .search-result-item {
        padding: 1rem;
        min-height: 60px; /* Área de toque maior */
    }
    
    .search-result-name {
        font-size: 1rem;
        line-height: 1.3;
    }
    
    .search-result-description {
        font-size: 0.9rem;
        margin-top: 0.25rem;
    }
    
    /* Melhor feedback visual em mobile */
    .categories-section .search-wrapper:active:not(.expanded) {
        transform: scale(0.92);
        background: rgba(255, 107, 53, 0.1);
    }
    
    /* Scroll suave nos resultados */
    .search-results::-webkit-scrollbar {
        width: 4px;
    }
    
    .search-results::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .search-results::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
    }
    
    /* Dispositivos muito pequenos */
    @media (max-width: 360px) {
        .categories-section .search-wrapper.expanded,
        .categories-section .search-wrapper:focus-within {
            width: calc(100vw - 1rem);
            right: 0.5rem;
            max-width: none;
        }
        
        .categories-section .search-results {
            width: calc(100vw - 1rem);
            max-width: none;
            right: 0.5rem;
            bottom: 0.5rem;
        }
        
        .categories-section .search-container {
            right: 0.5rem;
        }
    }
    
    /* Ajuste quando teclado está visível */
    @media (max-height: 500px) and (orientation: landscape) {
        .categories-section .search-results {
            bottom: 0.5rem;
            max-height: 30vh;
        }
    }
    
    /* Melhor feedback tátil */
    .search-result-item {
        -webkit-tap-highlight-color: rgba(255, 107, 53, 0.1);
        position: relative;
    }
    
    .search-result-item::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 107, 53, 0.05);
        opacity: 0;
        transition: opacity 0.1s ease;
        pointer-events: none;
    }
    
    .search-result-item:active::after {
        opacity: 1;
    }
    
    /* Ajustes para iOS Safari */
    @supports (-webkit-touch-callout: none) {
        .categories-section .search-input {
            -webkit-appearance: none;
            appearance: none;
            border-radius: 0;
        }
        
        .categories-section .search-wrapper {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
    }
    
    /* Prevenir zoom em landscape */
    @media (max-width: 768px) and (orientation: landscape) {
        .categories-section .search-wrapper.expanded,
        .categories-section .search-wrapper:focus-within {
            max-width: 280px;
        }
    }
    
    .category-image-wrapper {
        width: 64px;
        height: 64px;
    }
    
    .category-name {
        font-size: 0.6875rem;
        max-width: 64px;
    }
    
    .category-item {
        min-width: 72px;
    }
    
    /* Favoritos Hero */
    .favoritos-hero-content {
        height: 250px;
        padding: 0.875rem;
    }
    
    .favoritos-hero-title {
        font-size: 1.2rem;
    }
    
    .favoritos-hero-price {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }
    
    /* Favoritos Horizontal */
    .favoritos-horizontal-content {
        gap: 0.8rem;
        padding: 0.8rem;
    }
    
    .favoritos-horizontal-image {
        width: 34%;
        max-width: 140px;
    }
    
    .favoritos-horizontal-body {
        width: 66%;
    }
    
    .favoritos-horizontal-title {
        font-size: 1rem;
    }
    
    .favoritos-horizontal-desc {
        font-size: 0.8rem;
    }
    
    .favoritos-horizontal-price {
        font-size: 1rem;
    }
    
    /* Favoritos Grid */
    .favoritos-grid {
        gap: 11px;
    }
    
    .favoritos-grid-title {
        font-size: 0.88rem;
    }
    
    .favoritos-grid-price {
        font-size: 0.95rem;
    }
    
    .favoritos-grid-body {
        padding: 0.7rem;
    }
}

/* Telas pequenas (≤400px): Galaxy A10 HD+ (~360px), iPhone SE, etc. */
@media (max-width: 400px) {
    .items-grid {
        margin-left: -0.625rem;
        margin-right: -0.625rem;
    }

    .item-card > .item-content {
        padding: 0.625rem;
        min-height: 144px;
        gap: 0.625rem;
    }

    .item-image-wrapper {
        width: 124px;
        height: 124px;
    }

    .item-card.item-featured .item-image-wrapper {
        width: 124px;
        height: 124px;
    }

    .item-name {
        font-size: 0.875rem;
    }

    .item-description {
        font-size: 0.78rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .item-price {
        font-size: 0.9375rem;
    }

    .item-badge {
        font-size: 0.55rem;
        padding: 0.1rem 0.3rem;
    }

    .item-favorite-btn {
        top: 4px;
        right: 4px;
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }

    .item-favorite-btn svg {
        width: 16px;
        height: 16px;
    }

    .item-gallery-badge {
        font-size: 0.6rem;
        padding: 2px 5px;
    }

    .item-likes-counter {
        padding: 3px 6px;
        gap: 3px;
    }

    .item-likes-counter .counter-number {
        font-size: 0.65rem;
    }

    .item-likes-counter .counter-icon {
        width: 12px;
        height: 12px;
    }
    
    /* Favoritos Hero */
    .favoritos-hero-content {
        height: 220px;
        padding: 0.75rem;
    }
    
    .favoritos-hero-title {
        font-size: 1.1rem;
    }
    
    .favoritos-hero-price {
        font-size: 0.95rem;
        padding: 0.45rem 0.7rem;
    }
    
    /* Favoritos Horizontal */
    .favoritos-horizontal-content {
        gap: 0.75rem;
        padding: 0.75rem;
    }
    
    .favoritos-horizontal-image {
        width: 32%;
        max-width: 120px;
    }
    
    .favoritos-horizontal-body {
        width: 68%;
    }
    
    .favoritos-horizontal-title {
        font-size: 0.95rem;
    }
    
    .favoritos-horizontal-desc {
        font-size: 0.78rem;
    }
    
    .favoritos-horizontal-price {
        font-size: 0.95rem;
    }
    
    /* Favoritos Grid */
    .favoritos-grid {
        gap: 10px;
    }
    
    .favoritos-grid-title {
        font-size: 0.85rem;
    }
    
    .favoritos-grid-price {
        font-size: 0.9rem;
    }
}

/* Tablet e Desktop: Grid 2x2 com imagens GRANDES */
@media (min-width: 769px) and (max-width: 1024px) {
    .items-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .item-image-wrapper {
        width: 124px;
        height: 124px;
    }

    .item-content {
        padding: 1.25rem;
        min-height: 164px;
    }
}

/* Desktop: Imagens MUITO GRANDES no grid 2x2 */
@media (min-width: 1025px) {
    .item-image-wrapper {
        width: 124px;
        height: 124px;
    }

    .item-card > .item-content {
        padding: 1.5rem;
        gap: 1.5rem;
        min-height: 172px;
    }
}

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

.category-section {
    animation: fadeIn 0.5s ease-out;
}

/* Scroll suave */
html {
    scroll-behavior: smooth;
}

/* Loading state (opcional) */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.loading::after {
    content: "";
    width: 50px;
    height: 50px;
    border: 4px solid var(--bg-light);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Estilos para categorias com horário de funcionamento */

/* Badge de categoria indisponível */
.category-unavailable-badge {
    display: inline-block;
    background: #e74c3c;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* Legacy — manter por compatibilidade */
.category-schedule { display: none; }

/* Countdown timer (integrado ao cat-badge) */
.category-countdown {
    animation: countdownPulse 3s ease-in-out infinite;
    transition: background 0.5s ease;
}

/* Animação de pulso para countdown */
@keyframes countdownPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.5);
    }
}

/* Countdown urgente (< 30 minutos) */
.category-countdown.urgent {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    animation: urgentPulse 1s ease-in-out infinite;
}

@keyframes urgentPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.9;
    }
}

/* Countdown "abrindo em breve" (< 5 minutos para abrir) */
.category-countdown.starting-soon {
    background: linear-gradient(135deg, #1e88e5 0%, #42a5f5 100%);
    box-shadow: 0 2px 10px rgba(30, 136, 229, 0.45);
    animation: startingSoonPulse 1.2s ease-in-out infinite;
}

@keyframes startingSoonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 10px rgba(30, 136, 229, 0.45);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 4px 14px rgba(30, 136, 229, 0.6);
    }
}

/* Categoria indisponível - estilo opaco/cinza */
.category-section.category-unavailable {
    opacity: 0.6;
    position: relative;
    transition: opacity 0.8s ease, filter 0.8s ease;
}

.category-section.category-unavailable .category-title {
    color: var(--text-light);
    transition: color 0.5s ease;
}

.category-section.category-unavailable .items-grid,
.category-section.category-unavailable .favoritos-da-casa {
    pointer-events: none;
}

.category-section.category-unavailable .item-card,
.category-section.category-unavailable .favoritos-hero,
.category-section.category-unavailable .favoritos-horizontal,
.category-section.category-unavailable .favoritos-grid-item {
    opacity: 0.5;
    filter: grayscale(50%);
    transition: opacity 0.6s ease, filter 0.6s ease;
}

.category-section.category-unavailable .item-image,
.category-section.category-unavailable .favoritos-hero-content,
.category-section.category-unavailable .favoritos-horizontal-image,
.category-section.category-unavailable .favoritos-grid-image {
    filter: grayscale(70%);
    transition: filter 0.6s ease;
}

/* Animação de transição quando categoria muda de status */
.category-section.status-changing {
    animation: statusTransition 1s ease-in-out;
}

@keyframes statusTransition {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(0.98);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

/* Categoria disponível - transições suaves */
.category-section:not(.category-unavailable) {
    transition: opacity 0.8s ease, filter 0.8s ease;
}

.category-section:not(.category-unavailable) .item-card {
    transition: opacity 0.6s ease, filter 0.6s ease;
}

.category-section:not(.category-unavailable) .item-image {
    transition: filter 0.6s ease;
}

/* Item de navegação de categoria indisponível */
.category-item-unavailable {
    opacity: 0.4;
    filter: grayscale(60%);
}

.category-item-unavailable .category-name {
    color: var(--text-muted);
    text-decoration: line-through;
}

.category-item-unavailable:hover {
    opacity: 0.5;
}

/* Responsividade mobile */
@media (max-width: 768px) {
    /* Animações mais sutis no mobile */
    @keyframes countdownPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.02); }
    }
    
    @keyframes urgentPulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.03); opacity: 0.95; }
    }
    
    .category-section.status-changing {
        animation: statusTransition 0.6s ease-in-out;
    }
    
    .category-section.category-unavailable {
        opacity: 0.65;
    }
    
    .category-section.category-unavailable .item-card,
    .category-section.category-unavailable .favoritos-hero,
    .category-section.category-unavailable .favoritos-horizontal,
    .category-section.category-unavailable .favoritos-grid-item {
        opacity: 0.6;
    }
}

@media (max-width: 480px) {
    .cat-badge {
        font-size: 0.625rem;
        padding: 2px 6px;
    }
}

/* Estilos especiais para Happy Hour */

/* Badge Happy Hour */
.category-happy-hour-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #e91e63 0%, #c91f4d 100%);
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(201, 31, 77, 0.5);
    animation: happyHourPulse 2s ease-in-out infinite;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

@keyframes happyHourPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Variante cinza: Happy Hour suspenso por feriado ou véspera */
.category-happy-hour-badge--suspended {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.35);
    animation: none;
    text-transform: none;
    letter-spacing: 0.2px;
    font-weight: 600;
    white-space: normal;
    max-width: 100%;
}

.category-happy-hour-badge--suspended::before {
    content: none;
}

/* Seção Happy Hour com destaque especial */
.category-section.category-happy-hour {
    position: relative;
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.12) 0%, rgba(245, 87, 108, 0.12) 100%);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    margin: 1.5rem 0;
    animation: none;
    contain: layout paint;
}

.category-section.category-happy-hour::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #f093fb 100%);
    background-size: 200% 200%;
    border-radius: 16px;
    z-index: -1;
    opacity: 0.4;
    animation: none;
}

/* happyHourGlow desabilitado — box-shadow animado causa repaint (CLS) */

/* happyHourBorder desabilitado — background-position animado não é composto */

.category-section.category-happy-hour .category-header {
    margin-bottom: 1.5rem;
}

.category-section.category-happy-hour .category-title {
    /* Cor sólida com alto contraste */
    color: #c91f4d !important;
    font-weight: 700;
    font-size: 2rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.category-section.category-happy-hour .category-schedule {
    color: #666;
    font-weight: 500;
    margin-top: 0.5rem;
}

/* Item de navegação Happy Hour */
.category-item-happy-hour {
    position: relative;
    animation: happyHourNavPulse 2s ease-in-out infinite;
}

.category-item-happy-hour::after {
    content: '🍹';
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 1.2rem;
    animation: happyHourIconSpin 3s linear infinite;
}

@keyframes happyHourNavPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

@keyframes happyHourIconSpin {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-15deg);
    }
    75% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.category-item-happy-hour .category-image-wrapper {
    border: 3px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #f093fb 0%, #f5576c 100%) border-box;
    box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
}

.category-item-happy-hour .category-name {
    color: #f5576c;
    font-weight: 700;
}

/* Responsividade mobile para Happy Hour */
@media (max-width: 768px) {
    .category-happy-hour-badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }
    
    .category-section.category-happy-hour {
        padding: 1.25rem 0.875rem;
        margin: 1rem -0.875rem;
        border-radius: 0;
        contain: none;
    }
    
    .category-section.category-happy-hour .items-grid {
        width: 100%;
        margin-left: 0;
    }
    
    .category-section.category-happy-hour .category-title {
        font-size: 1.5rem;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        color: #c91f4d !important;
    }
    
    .category-section.category-happy-hour .category-header {
        margin-bottom: 1.25rem;
    }
    
    .category-item-happy-hour::after {
        font-size: 1rem;
        top: -3px;
        right: -3px;
    }
    
    /* Animações mais sutis no mobile */
    @keyframes happyHourPulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.03);
        }
    }
    
    @keyframes happyHourNavPulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
    }
}

@media (max-width: 480px) {
    .category-happy-hour-badge {
        font-size: 0.7rem;
        padding: 0.35rem 0.7rem;
    }
    
    .category-section.category-happy-hour {
        padding: 1rem 0.75rem;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }
    
    .category-section.category-happy-hour .items-grid {
        width: 100%;
        margin-left: 0;
    }
    
    .category-section.category-happy-hour .category-title {
        font-size: 1.3rem;
        color: #c91f4d !important;
    }
}

/* Breakpoint tablet (769–1024): title menor, padding reduzido */
@media (min-width: 769px) and (max-width: 1024px) {
    .category-section.category-happy-hour {
        padding: 1.75rem 1.25rem;
    }

    .category-section.category-happy-hour .category-title {
        font-size: 1.7rem;
    }
}

/* Pausa TODAS as animações da seção happy-hour quando marcada como invisível.
   A classe é aplicada/removida via IntersectionObserver no JS. */
.category-section.category-happy-hour.is-offscreen,
.category-section.category-happy-hour.is-offscreen::before,
.category-section.category-happy-hour.is-offscreen .category-happy-hour-badge {
    animation-play-state: paused;
}

/* Acessibilidade: respeita preferência por menos movimento.
   Override mais forte que os !important dos media queries (usa seletor >= especificidade). */
@media (prefers-reduced-motion: reduce) {
    .category-section.category-happy-hour,
    .category-section.category-happy-hour::before,
    .category-happy-hour-badge,
    .category-item-happy-hour,
    .category-item-happy-hour::after {
        animation: none !important;
    }

    /* will-change desnecessário se animação não roda */
    .category-section.category-happy-hour,
    .category-section.category-happy-hour::before {
        will-change: auto;
    }
}


/* Banner global adaptativo de Happy Hour
 * Aparece sticky no topo da página. Três variantes de estado controlam cor.
 */

.happy-hour-banner {
    position: sticky;
    top: 0;
    z-index: 101; /* acima da .categories-section (z-index: 100) */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Safe-area insets para iOS com notch / PWA standalone */
    padding:
        calc(0.6rem + env(safe-area-inset-top, 0px))
        calc(1rem + env(safe-area-inset-right, 0px))
        0.6rem
        calc(1rem + env(safe-area-inset-left, 0px));
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.5s ease, transform 0.3s ease, opacity 0.3s ease;
    /* GPU hint para animações serem compositadas */
    will-change: transform, background;
    /* Isola paint — mudanças internas não disparam repaint em outros elementos */
    contain: layout paint;
}

.happy-hour-banner__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.75rem;
}

.happy-hour-banner__headline {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
}

.happy-hour-banner__detail {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    opacity: 0.95;
    font-size: 0.85rem;
}

.happy-hour-banner__separator {
    opacity: 0.6;
}

.happy-hour-banner__countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.happy-hour-banner__cta {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
}

.happy-hour-banner__cta:hover,
.happy-hour-banner__cta:focus-visible {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

.happy-hour-banner__dismiss {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.happy-hour-banner__dismiss:hover,
.happy-hour-banner__dismiss:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

/* ──────────── Variantes por estado ──────────── */

/* Ativo — rosa/roxo vibrante (paleta do happy hour existente) */
.happy-hour-banner--active {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    animation: none;
}

/* Começando em breve — dourado pulsante (antecipação) */
.happy-hour-banner--starting-soon {
    background: linear-gradient(135deg, #f7b733 0%, #fc4a1a 100%);
    animation: none;
}

/* Aproximando — azul-petróleo calmo (informativo) */
.happy-hour-banner--approaching {
    background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%);
}

/* happyHourBannerPulse desabilitado — box-shadow animado causa CLS */

/* Dismissed (via JS) */
.happy-hour-banner.is-dismissed {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* ──────────── Responsivo ──────────── */

@media (max-width: 480px) {
    .happy-hour-banner {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
        font-size: 0.8rem;
    }

    .happy-hour-banner__headline {
        font-size: 0.85rem;
    }

    .happy-hour-banner__detail {
        font-size: 0.78rem;
    }

    .happy-hour-banner__cta {
        padding: 0.35rem 0.7rem;
        font-size: 0.78rem;
    }

    /* Em telas muito estreitas, deixa o detail quebrar linha */
    .happy-hour-banner__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
    }
}

/* ──────────── Breakpoint tablet estreito (481-768) ──────────── */
@media (min-width: 481px) and (max-width: 768px) {
    .happy-hour-banner {
        padding:
            calc(0.55rem + env(safe-area-inset-top, 0px))
            calc(0.85rem + env(safe-area-inset-right, 0px))
            0.55rem
            calc(0.85rem + env(safe-area-inset-left, 0px));
        font-size: 0.85rem;
        gap: 0.6rem;
    }

    /* Em telas apertadas, o horário fixo (às 18:00) é secundário ao countdown */
    .happy-hour-banner__time,
    .happy-hour-banner__separator {
        display: none;
    }
}

/* ──────────── Breakpoint tablet landscape (769-1024) ──────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    .happy-hour-banner {
        font-size: 0.88rem;
    }
}

/* ──────────── Ultra-wide (1400+) ──────────── */
@media (min-width: 1400px) {
    /* Centraliza o conteúdo sem esticar em telas enormes */
    .happy-hour-banner {
        justify-content: center;
        gap: 1.25rem;
    }

    .happy-hour-banner__content {
        flex: 0 1 auto;
        max-width: 900px;
    }
}

/* ──────────── Otimizações de performance ──────────── */

/* Quando dismissed, pausar animações (não ocupa mais CPU mesmo antes da remoção) */
.happy-hour-banner.is-dismissed {
    animation-play-state: paused;
}

/* Respeita preferências do usuário por menos movimento */
@media (prefers-reduced-motion: reduce) {
    .happy-hour-banner,
    .happy-hour-banner--active,
    .happy-hour-banner--starting-soon {
        animation: none !important;
        transition: opacity 0.2s ease;
    }

    .happy-hour-banner {
        will-change: auto;
    }
}

/* Desktop first-render: dica para o browser não pintar o banner se estiver fora da tela
   (ex.: logo após um dismiss com scroll já muito abaixo). Custo zero quando visível. */
@media (min-width: 1025px) {
    .happy-hour-banner.is-dismissed {
        content-visibility: hidden;
    }
}

/* Destaques Rotativos — Carrossel de banners promocionais
 * Segue padrão BEM do happy-hour-banner.
 */

.destaques-rotativos {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    margin: 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    contain: layout paint;
}

/* ──────────── Track & Slides ──────────── */

.destaques-rotativos__track {
    position: relative;
    width: 100%;
    min-height: 140px;
}

.destaques-rotativos__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--slide-bg, #c41e3a);
    color: var(--slide-color, #ffffff);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 0;
}

.destaques-rotativos__slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* ──────────── Imagem ──────────── */

.destaques-rotativos__img-wrap {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.destaques-rotativos__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.destaques-rotativos__slide:hover .destaques-rotativos__img {
    transform: scale(1.05);
}

/* ──────────── Conteúdo textual ──────────── */

.destaques-rotativos__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.destaques-rotativos__titulo {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.destaques-rotativos__subtitulo {
    font-size: 0.88rem;
    font-weight: 400;
    opacity: 0.9;
    margin: 0;
    line-height: 1.4;
}

.destaques-rotativos__cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    transition: background 0.2s ease, transform 0.2s ease;
}

.destaques-rotativos__cta:hover,
.destaques-rotativos__cta:focus-visible {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

/* ──────────── Setas de navegação ──────────── */

.destaques-rotativos__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.2s ease;
}

.destaques-rotativos:hover .destaques-rotativos__arrow,
.destaques-rotativos:focus-within .destaques-rotativos__arrow {
    opacity: 1;
}

.destaques-rotativos__arrow:hover {
    background: rgba(0, 0, 0, 0.5);
}

.destaques-rotativos__arrow--prev {
    left: 0.5rem;
}

.destaques-rotativos__arrow--next {
    right: 0.5rem;
}

/* ──────────── Dots ──────────── */

.destaques-rotativos__dots {
    position: absolute;
    bottom: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 0.4rem;
}

.destaques-rotativos__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.destaques-rotativos__dot.is-active {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.3);
}

.destaques-rotativos__dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

/* ──────────── Barra de progresso ──────────── */

.destaques-rotativos__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 3;
    overflow: hidden;
}

.destaques-rotativos__progress-bar {
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    width: 0%;
    animation: destaquesProgress 5s linear forwards;
    animation-play-state: running;
}

@keyframes destaquesProgress {
    from { width: 0%; }
    to { width: 100%; }
}

/* ──────────── Responsivo ──────────── */

@media (max-width: 480px) {
    .destaques-rotativos {
        margin: 0.75rem 0.5rem;
        border-radius: 10px;
    }

    .destaques-rotativos__track {
        min-height: 120px;
    }

    .destaques-rotativos__slide {
        padding: 1rem;
        gap: 0.75rem;
    }

    .destaques-rotativos__img-wrap {
        width: 72px;
        height: 72px;
        border-radius: 8px;
    }

    .destaques-rotativos__titulo {
        font-size: 0.95rem;
    }

    .destaques-rotativos__subtitulo {
        font-size: 0.8rem;
    }

    .destaques-rotativos__arrow {
        width: 28px;
        height: 28px;
    }

    .destaques-rotativos__arrow svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 360px) {
    .destaques-rotativos__slide {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.875rem;
        gap: 0.5rem;
    }

    .destaques-rotativos__img-wrap {
        width: 100%;
        height: 80px;
        border-radius: 8px;
    }

    .destaques-rotativos__track {
        min-height: 180px;
    }
}

/* Tablet e acima */
@media (min-width: 769px) {
    .destaques-rotativos {
        margin: 1.25rem auto;
        max-width: 640px;
    }

    .destaques-rotativos__img-wrap {
        width: 120px;
        height: 120px;
    }

    .destaques-rotativos__titulo {
        font-size: 1.25rem;
    }

    .destaques-rotativos__subtitulo {
        font-size: 0.92rem;
    }
}

/* ──────────── Performance / Acessibilidade ──────────── */

@media (prefers-reduced-motion: reduce) {
    .destaques-rotativos__slide {
        transition: none;
    }

    .destaques-rotativos__progress-bar {
        animation: none;
        width: 100%;
    }

    .destaques-rotativos__img {
        transition: none;
    }
}

/* Low-end: desabilitar transições e sombras pesadas */
.device-low-end .destaques-rotativos {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.device-low-end .destaques-rotativos__slide {
    transition: none;
}

.device-low-end .destaques-rotativos__progress-bar {
    animation: none;
    width: 100%;
}

/* Category Info Sheet — Bottom sheet com informações da categoria */

.cat-info-sheet__overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: background 0.3s ease;
    pointer-events: none;
}

.cat-info-sheet__overlay.is-visible {
    background: rgba(0, 0, 0, 0.4);
    pointer-events: auto;
}

.cat-info-sheet {
    width: 100%;
    max-width: 480px;
    max-height: 70vh;
    background: var(--bg-body, #fff);
    border-radius: 16px 16px 0 0;
    padding: 12px 20px 24px;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}

.cat-info-sheet.is-visible {
    transform: translateY(0);
}

.cat-info-sheet__handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color, #ddd);
    margin: 0 auto 16px;
}

.cat-info-sheet__content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cat-info-sheet__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark, #1a1a1a);
    margin: 0;
}

.cat-info-sheet__desc {
    font-size: 0.85rem;
    color: var(--text-muted, #666);
    line-height: 1.5;
    margin: 0;
}

.cat-info-sheet__schedule {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--bg-light, #f8f9fa);
    border-radius: 10px;
}

.cat-info-sheet__schedule-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cat-info-sheet__label {
    font-size: 0.8rem;
    color: var(--text-muted, #888);
    font-weight: 500;
}

.cat-info-sheet__value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark, #1a1a1a);
}

.cat-info-sheet__status--open {
    color: #0F6E56;
}

.cat-info-sheet__status--closed {
    color: #991B1B;
}

.cat-info-sheet__feriado {
    font-size: 0.82rem;
    color: #6B7280;
    background: #F3F4F6;
    padding: 10px 12px;
    border-radius: 8px;
    line-height: 1.4;
}

/* Desktop: centralizar como modal */
@media (min-width: 769px) {
    .cat-info-sheet__overlay {
        align-items: center;
    }

    .cat-info-sheet {
        border-radius: 16px;
        max-height: 60vh;
        transform: translateY(20px);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .cat-info-sheet.is-visible {
        transform: translateY(0);
        opacity: 1;
    }

    .cat-info-sheet__handle {
        display: none;
    }
}

/* Modal WiFi */
.wifi-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.wifi-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Fallback para navegadores sem backdrop-filter */
.no-backdrop-filter .modal-overlay,
.no-backdrop-filter .wifi-modal-overlay {
    background: rgba(0, 0, 0, 0.85);
}

.wifi-modal-content {
    position: relative;
    background: white;
    border-radius: 20px;
    padding: 2.5rem 2rem;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

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

.wifi-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--bg-light);
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1;
}

.wifi-modal-close:hover {
    background: var(--bg-medium, #e5e7eb);
    color: var(--text-dark);
}

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.wifi-modal-close svg {
    width: 18px;
    height: 18px;
}

.wifi-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.wifi-icon svg {
    color: white;
}

.wifi-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.wifi-subtitle {
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 2rem;
}

.wifi-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.wifi-field {
    text-align: left;
}

.wifi-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wifi-value {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-light);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 2px solid var(--border-color);
}

.wifi-value span {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    font-family: 'Courier New', monospace;
}

.wifi-copy {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: white;
    border: 2px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.wifi-copy:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.1);
}

.wifi-copy:hover svg {
    color: white;
}

.wifi-copy svg {
    color: var(--text-light);
    transition: color 0.2s ease;
}

.wifi-copy.copied {
    background: #10b981;
    border-color: #10b981;
    animation: copySuccess 0.4s ease;
}

.wifi-copy.copied svg {
    color: white;
}

@keyframes copySuccess {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Botão de conexão automática WiFi */
.wifi-connect-btn {
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.wifi-connect-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.wifi-connect-btn:active {
    transform: translateY(0);
}

.wifi-connect-btn svg {
    animation: wifiPulse 2s ease-in-out infinite;
}

@keyframes wifiPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* Container do QR Code */
.wifi-qr-container {
    text-align: center;
    padding: 1rem 0;
}

.wifi-qr-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 0.5rem;
}

.wifi-qr-header p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}

.wifi-qr-code {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5rem 0;
}

.wifi-qr-code img {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.wifi-qr-close {
    width: 100%;
    padding: 1rem;
    background: var(--bg-light);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wifi-qr-close:hover {
    background: var(--bg-medium);
}

.wifi-qr-close:active {
    transform: scale(0.98);
}

/* Responsividade mobile para WiFi modal */
@media (max-width: 768px) {
    .wifi-modal-content {
        padding: 2rem 1.5rem;
        max-width: 90%;
    }
    
    .wifi-modal-close {
        top: 1rem;
        right: 1rem;
    }
    
    .wifi-modal-close svg {
        width: 20px;
        height: 20px;
    }
    
    .wifi-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 1.25rem;
    }
    
    .wifi-icon svg {
        width: 48px;
        height: 48px;
    }
    
    .wifi-title {
        font-size: 1.5rem;
    }
    
    .wifi-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
    
    .wifi-value {
        padding: 0.875rem 1rem;
    }
    
    .wifi-value span {
        font-size: 1rem;
    }
    
    .wifi-copy {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .wifi-modal-content {
        padding: 1.75rem 1.25rem;
    }
    
    .wifi-modal-close {
        top: 0.75rem;
        right: 0.75rem;
    }
    
    .wifi-modal-close svg {
        width: 18px;
        height: 18px;
    }
    
    .wifi-icon {
        width: 60px;
        height: 60px;
    }
    
    .wifi-icon svg {
        width: 40px;
        height: 40px;
    }
    
    .wifi-title {
        font-size: 1.3rem;
    }
    
    .wifi-value span {
        font-size: 0.9rem;
    }
}

/* ========================================
   Jukebox - Seção de destaque premium
   ======================================== */

.jukebox-section {
    display: block;
    visibility: visible;
    background: linear-gradient(135deg, #0d0d1a 0%, #1a1035 40%, #0f1a3d 100%);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.jukebox-section:hover {
    transform: translateY(-1px);
}

.jukebox-section:active {
    transform: translateY(0);
}

/* Brilho ambiente dourado */
.jukebox-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 120% at 0% 50%, rgba(212, 175, 55, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 50% 100% at 100% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

/* Linha dourada inferior com brilho */
.jukebox-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 175, 55, 0.3) 15%,
        var(--accent-color) 50%,
        rgba(212, 175, 55, 0.3) 85%,
        transparent 100%);
}

/* Notas musicais flutuantes */
.jukebox-notes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.jukebox-notes span {
    position: absolute;
    font-size: 1rem;
    opacity: 0;
    animation: jukebox-float 6s ease-in-out infinite;
    color: var(--accent-color);
}

.jukebox-notes span:nth-child(1) {
    left: 8%;
    bottom: -10%;
    animation-delay: 0s;
    font-size: 0.9rem;
}
.jukebox-notes span:nth-child(2) {
    left: 25%;
    bottom: -10%;
    animation-delay: 1.5s;
    font-size: 0.75rem;
}
.jukebox-notes span:nth-child(3) {
    right: 20%;
    bottom: -10%;
    animation-delay: 3s;
    font-size: 1rem;
}
.jukebox-notes span:nth-child(4) {
    right: 8%;
    bottom: -10%;
    animation-delay: 4.2s;
    font-size: 0.8rem;
}

@keyframes jukebox-float {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    15% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.15;
    }
    100% {
        transform: translateY(-90px) rotate(15deg);
        opacity: 0;
    }
}

.jukebox-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Ícone com disco de vinil */
.jukebox-visual {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}

.jukebox-disc {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #1a1a2e 18%, transparent 19%),
        radial-gradient(circle at center, var(--accent-color) 20%, transparent 21%),
        radial-gradient(circle at center, #1a1a2e 22%, transparent 23%),
        conic-gradient(from 0deg, #2a2a3e, #3a3a4e, #2a2a3e, #3a3a4e, #2a2a3e, #3a3a4e, #2a2a3e);
    animation: jukebox-spin 4s linear infinite;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.jukebox-disc-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color) 0%, #b8941c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a2e;
}

.jukebox-disc-label svg {
    width: 13px;
    height: 13px;
}

@keyframes jukebox-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Equalizer animado */
.jukebox-eq {
    display: flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 24px;
    position: absolute;
    top: -4px;
    right: -6px;
}

.jukebox-eq span {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: var(--accent-color);
    animation: jukebox-eq-bar 1.2s ease-in-out infinite;
}

.jukebox-eq span:nth-child(1) {
    height: 8px;
    animation-delay: 0s;
}
.jukebox-eq span:nth-child(2) {
    height: 16px;
    animation-delay: 0.15s;
}
.jukebox-eq span:nth-child(3) {
    height: 10px;
    animation-delay: 0.3s;
}
.jukebox-eq span:nth-child(4) {
    height: 20px;
    animation-delay: 0.45s;
}

@keyframes jukebox-eq-bar {
    0%, 100% { transform: scaleY(0.4); opacity: 0.6; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* Texto */
.jukebox-text {
    flex: 1;
    min-width: 0;
}

.jukebox-text-content {
    flex: 1;
    min-width: 0;
}

.jukebox-title {
    font-family: 'Inter', 'Karla', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.3px;
}

.jukebox-title-accent {
    background: linear-gradient(135deg, var(--accent-color), #f0d060);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.jukebox-subtitle {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0.15rem 0 0;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: 0.2px;
}

/* Botão CTA pulsante "Clique aqui" */
.jukebox-cta-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--accent-color) 0%, #b8941c 100%);
    color: #0d0d1a;
    font-family: 'Inter', 'Karla', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
    animation: jukebox-cta-pulse 2s ease-in-out infinite;
}

@keyframes jukebox-cta-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 16px rgba(212, 175, 55, 0.5);
    }
}

.jukebox-section:hover .jukebox-cta-button {
    background: linear-gradient(135deg, #e8ca4a 0%, var(--accent-color) 100%);
    animation-play-state: paused;
    transform: scale(1.05);
}

.jukebox-section:active .jukebox-cta-button {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(212, 175, 55, 0.3);
}

/* Botão CTA removido - seção toda é clicável */

/* ========================================
   Responsivo
   ======================================== */

@media (max-width: 768px) {
    .jukebox-content {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    .jukebox-visual {
        width: 48px;
        height: 48px;
    }

    .jukebox-disc {
        width: 48px;
        height: 48px;
    }

    .jukebox-disc-label {
        width: 20px;
        height: 20px;
    }

    .jukebox-disc-label svg {
        width: 11px;
        height: 11px;
    }

    .jukebox-eq {
        height: 20px;
        top: -3px;
        right: -5px;
        gap: 2px;
    }

    .jukebox-eq span {
        width: 2.5px;
    }
    
    .jukebox-cta-button {
        padding: 0.45rem 0.875rem;
        font-size: 0.7rem;
    }

    .jukebox-title {
        font-size: 0.9rem;
    }

    .jukebox-subtitle {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .jukebox-content {
        padding: 0.625rem 0.875rem;
    }
    
    .jukebox-text {
        gap: 0.5rem;
    }
    
    .jukebox-cta-button {
        padding: 0.4rem 0.75rem;
        font-size: 0.65rem;
    }
}

@media (max-width: 360px) {
    .jukebox-visual {
        width: 42px;
        height: 42px;
    }

    .jukebox-disc {
        width: 42px;
        height: 42px;
    }

    .jukebox-disc-label {
        width: 18px;
        height: 18px;
    }

    .jukebox-disc-label svg {
        width: 10px;
        height: 10px;
    }
    
    .jukebox-cta-button {
        padding: 0.35rem 0.65rem;
        font-size: 0.62rem;
    }

    .jukebox-title {
        font-size: 0.85rem;
    }
    
    .jukebox-subtitle {
        font-size: 0.68rem;
    }
}

/* Respeitar preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .jukebox-disc,
    .jukebox-eq span,
    .jukebox-notes span,
    .jukebox-cta-button {
        animation: none;
    }

    .jukebox-notes span {
        display: none;
    }
}

/* Dispositivos low-end: desativar todas animações do jukebox */
.device-low-end .jukebox-disc,
.device-low-end .jukebox-eq span,
.device-low-end .jukebox-notes span,
.device-low-end .jukebox-cta-button {
    animation: none;
}

.device-low-end .jukebox-notes span {
    display: none;
}

.device-low-end .jukebox-section {
    transition: none;
}

/* =============================================
   BOTÕES DE PEDIDO (DELIVERY E LEVAR)
   ============================================= */

.ordering-buttons {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* Botões no Header — sempre inline com o nav, empurrados para a direita */
.ordering-buttons-header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
    margin-left: auto;
}

.ordering-buttons-header .ordering-btn {
    flex: none;
    width: auto;
    margin: 0;
}

/* Botões no Footer */
.ordering-buttons-footer {
    justify-content: flex-start;
}

/* Estilo Botões Separados */
.ordering-buttons-buttons {
    gap: 1rem;
}

.ordering-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    position: relative;
    overflow: visible;
    font-size: 0.8125rem;
    font-weight: 500;
    min-width: auto;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    height: 36px;
}

.ordering-btn svg,
.ordering-btn-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.ordering-btn-icon {
    font-size: 1.2em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tooltip para botões */
.ordering-btn-tooltip {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 1000;
}

.ordering-btn-tooltip::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid rgba(0, 0, 0, 0.9);
}

.ordering-btn:hover .ordering-btn-tooltip {
    opacity: 1;
    visibility: visible;
    bottom: -35px;
}

/* Classe para texto do botão */
.ordering-btn-text {
    transition: opacity 0.2s ease;
}

/* Removido efeito de brilho animado */

/* Botão Delivery */
.ordering-btn-delivery {
    background: rgba(34, 197, 94, 0.2);
    color: #bbf7d0;
    border: 1px solid rgba(34, 197, 94, 0.45);
}

.ordering-btn-delivery svg {
    color: #86efac;
    fill: #86efac;
}

.ordering-btn-delivery:hover {
    background: rgba(34, 197, 94, 0.35);
    color: #dcfce7;
    transform: translateY(-1px);
}

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

/* Botão Levar */
.ordering-btn-takeout {
    background: rgba(251, 191, 36, 0.2);
    color: #fde68a;
    border: 1px solid rgba(251, 191, 36, 0.45);
}

.ordering-btn-takeout svg {
    color: #fde68a;
    fill: #fde68a;
}

.ordering-btn-takeout:hover {
    background: rgba(251, 191, 36, 0.35);
    color: #fef3c7;
    transform: translateY(-1px);
}

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

/* Estilo Dropdown */
.ordering-dropdown {
    position: relative;
}

.ordering-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, var(--cta-color), #a01832);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
}

.ordering-dropdown-toggle:hover {
    background: linear-gradient(135deg, #a01832, #801428);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(196, 30, 58, 0.4);
}

.ordering-dropdown-toggle svg:last-child {
    transition: transform 0.3s ease;
}

.ordering-dropdown-toggle[aria-expanded="true"] svg:last-child {
    transform: rotate(180deg);
}

.ordering-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    margin-top: 0.5rem;
    overflow: hidden;
}

.ordering-dropdown-menu[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ordering-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--text-dark);
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border-color);
}

.ordering-dropdown-item:last-child {
    border-bottom: none;
}

.ordering-dropdown-item:hover {
    background: var(--bg-light);
    color: var(--primary-color);
    padding-left: 1.25rem;
}

.ordering-dropdown-item svg {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.ordering-dropdown-item:hover svg {
    color: var(--primary-color);
}

/* Animações de entrada — apenas quando não há preferência por movimento reduzido */
@media (prefers-reduced-motion: no-preference) {
    .ordering-buttons-buttons .ordering-btn {
        animation: slideInUp 0.4s ease forwards;
        opacity: 0;
    }

    .ordering-buttons-buttons .ordering-btn:nth-child(1) { animation-delay: 0.05s; }
    .ordering-buttons-buttons .ordering-btn:nth-child(2) { animation-delay: 0.12s; }

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

/* ── Responsividade ──────────────────────────────────────────────────────────
 *
 * Regra geral: media queries só afetam contexto footer (.ordering-buttons-footer)
 * ou o botão base (.ordering-btn) em ajustes universais.
 * O contexto header (.ordering-buttons-header) é sempre inline — sem overrides.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Tablet e mobile — footer expande para toda a largura */
@media (max-width: 768px) {
    .ordering-buttons-footer {
        gap: 0.5rem;
        justify-content: center;
    }

    .ordering-buttons-footer .ordering-btn {
        flex: 1;
        justify-content: center;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    /* Tooltips invisíveis em touch */
    .ordering-btn-tooltip {
        display: none;
    }

    /* Botões no header: mesma altura que nav-icon */
    .ordering-buttons-header .ordering-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.75rem;
        height: 36px;
        align-self: center;
    }

    .ordering-dropdown-toggle {
        padding: 0.5rem 0.875rem;
        font-size: 0.8rem;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: none;
    }

    .ordering-dropdown-menu {
        min-width: 160px;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .ordering-dropdown-item {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
}

/* Mobile pequeno — footer em linha completa */
@media (max-width: 480px) {
    .ordering-buttons-footer {
        flex-direction: row;
        width: 100%;
        gap: 0.5rem;
    }

    .ordering-buttons-footer .ordering-btn {
        flex: 1;
        font-size: 0.7rem;
    }

    /* Header: esconder texto, só ícone para economizar espaço */
    .ordering-buttons-header .ordering-btn-text {
        display: none;
    }

    .ordering-buttons-header .ordering-btn {
        padding: 0;
        width: 36px;
        height: 36px;
        justify-content: center;
        border-radius: 50%;
        align-self: center;
    }

    .ordering-buttons-header .ordering-btn svg {
        width: 16px;
        height: 16px;
    }

    .ordering-dropdown-menu {
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 2rem);
        max-width: 280px;
    }

    .ordering-dropdown-menu[aria-hidden="false"] {
        transform: translateX(-50%) translateY(0);
    }
}

/* Telas muito estreitas (≤360px, ex: Galaxy A10, iPhone SE) */
@media (max-width: 360px) {
    .ordering-buttons-header .ordering-btn {
        width: 34px;
        height: 34px;
    }

    .ordering-buttons-header .ordering-btn svg {
        width: 15px;
        height: 15px;
    }
}

/* Estados de hover e focus melhorados */
.ordering-btn:focus-visible,
.ordering-dropdown-toggle:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.ordering-dropdown-item:focus-visible {
    background: var(--bg-light);
    color: var(--primary-color);
}

/* Removido efeito de brilho adicional */

/* Estilos para categorias com horário de funcionamento */

/* Badge de categoria indisponível */
.category-unavailable-badge {
    display: inline-block;
    background: #e74c3c;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* Horário de funcionamento da categoria */
.category-schedule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-light);
    margin-top: 0.5rem;
    font-weight: 500;
}

.category-schedule svg {
    flex-shrink: 0;
}

/* Categoria indisponível - estilo opaco/cinza */
.category-section.category-unavailable {
    opacity: 0.6;
    position: relative;
}

.category-section.category-unavailable .category-title {
    color: var(--text-light);
}

.category-section.category-unavailable .items-grid,
.category-section.category-unavailable .favoritos-da-casa {
    pointer-events: none;
}

.category-section.category-unavailable .item-card,
.category-section.category-unavailable .favoritos-hero,
.category-section.category-unavailable .favoritos-horizontal,
.category-section.category-unavailable .favoritos-grid-item {
    opacity: 0.5;
    filter: grayscale(50%);
}

.category-section.category-unavailable .item-image,
.category-section.category-unavailable .favoritos-hero-content,
.category-section.category-unavailable .favoritos-horizontal-image,
.category-section.category-unavailable .favoritos-grid-image {
    filter: grayscale(70%);
}

/* Item de navegação de categoria indisponível */
.category-item-unavailable {
    opacity: 0.4;
    filter: grayscale(60%);
}

.category-item-unavailable .category-name {
    color: var(--text-muted);
    text-decoration: line-through;
}

.category-item-unavailable:hover {
    opacity: 0.5;
}

/* Responsividade mobile */
@media (max-width: 768px) {
    .category-unavailable-badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }
    
    .category-schedule {
        font-size: 0.8rem;
    }
}

/**
 * Mobile Design Enhancements
 * Baseado na skill mobile-design
 * Implementa: Touch targets, Feedback tátil, Tap highlights
 */

/* ========================================
   1. TOUCH TARGETS MÍNIMOS (44-48px)
   ======================================== */

/* Garantir touch targets em todos os elementos interativos */
.nav-icon,
.social-link,
.filter-btn,
.ordering-btn,
.wifi-btn,
.search-btn,
.recommendation-btn {
    min-height: 48px;
    min-width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
}

/* Links de navegação */
.header nav a,
.category-nav-item,
.modal-option-item {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Botões de ação */
button,
.btn,
.item-card,
.error-retry-btn {
    min-height: 48px;
    touch-action: manipulation;
}

/* ========================================
   2. FEEDBACK TÁTIL (Active States)
   ======================================== */

/* Feedback visual imediato ao toque */
.category-nav-item:active,
button:active,
.btn:active,
.nav-icon:active,
.modal-option-item:active {
    transform: scale(0.95);
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Feedback para navegação de categorias */
.category-nav-item:active {
    background: var(--primary-color);
    color: white;
}

/* Feedback para botões de complementos */
.modal-option-item:active {
    background: rgba(var(--primary-rgb, 52, 152, 219), 0.1);
}

/* ========================================
   3. TAP HIGHLIGHT CUSTOMIZADO
   ======================================== */

/* Remover highlight padrão do navegador e adicionar customizado */
* {
    -webkit-tap-highlight-color: rgba(52, 152, 219, 0.2);
    tap-highlight-color: rgba(52, 152, 219, 0.2);
}

/* Desabilitar highlight em elementos não interativos */
.item-image,
.skeleton,
.badge,
.price-display {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

/* ========================================
   4. THUMB ZONE OPTIMIZATION
   ======================================== */

/* Posicionar CTAs principais na zona do polegar (inferior) */
@media (max-width: 768px) {
    /* Footer do modal já é fixo via flex (ver _modal.css) */
    
    /* Espaçamento adequado para zona do polegar */
    .main-content {
        padding-bottom: 2rem;
    }
}

/* ========================================
   5. PERFORMANCE: REDUCED MOTION
   ======================================== */

/* Respeitar preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   6. MELHORIAS DE ESPAÇAMENTO MOBILE
   ======================================== */

@media (max-width: 640px) {
    /* Aumentar espaçamento entre itens para evitar toques acidentais */
    .items-grid {
        gap: 1rem;
    }
    
    /* Espaçamento adequado em listas de opções */
    .modal-option-item {
        margin-bottom: 0.5rem;
    }
    
    /* Padding confortável para áreas de toque */
    .category-nav-item {
        padding: 0.875rem 1.25rem;
        margin: 0 0.25rem;
    }
}

/* ========================================
   7. SCROLL PERFORMANCE
   ======================================== */

/* Otimizar scroll em dispositivos móveis */
.main-content,
.modal-body,
.category-nav-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* Prevenir scroll bounce em modais */
.modal.active {
    overscroll-behavior: none;
}

/* ========================================
   8. SAFE AREA (iPhone Notch/Dynamic Island)
   ======================================== */

@supports (padding: max(0px)) {
    .header,
    .category-nav {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    
    .modal.active {
        padding-top: max(1rem, env(safe-area-inset-top));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* ========================================
   9. ACCESSIBILITY: HIGH CONTRAST
   ======================================== */

@media (prefers-contrast: high) {
    .item-card,
    .category-nav-item,
    .modal-option-item {
        border: 2px solid currentColor;
    }
    
    button,
    .btn {
        border: 2px solid;
    }
}

/* ========================================
   10. LOADING STATES MOBILE
   ======================================== */

/* Feedback visual durante carregamento */
.loading {
    pointer-events: none;
    opacity: 0.6;
    cursor: wait;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--primary-color);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   11. LANDSCAPE ORIENTATION
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    /* Reduzir altura de elementos em landscape */
    .header {
        min-height: 60px;
    }
    
    .modal-item-image {
        max-height: 150px;
    }
    
    /* Otimizar uso de espaço horizontal */
    .items-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* ========================================
   12. FOCUS VISIBLE (Keyboard Navigation)
   ======================================== */

/* Melhorar visibilidade de foco para navegação por teclado */
*:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* Remover outline em mouse/touch, manter em keyboard */
*:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================
   13. SKIP NAVIGATION (Acessibilidade)
   ======================================== */

.skip-navigation {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    background: var(--primary-color);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-navigation:focus {
    top: 0;
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

/* ========================================
   14. BATTERY OPTIMIZATION
   ======================================== */

/* Reduzir animações quando bateria está baixa (experimental) */
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
    .lazy-fade-in,
    .skeleton-shimmer,
    .loading::after {
        animation: none !important;
    }
    
    /* Desabilitar imagens de fundo decorativas */
    .hero-image,
    .background-pattern {
        background-image: none !important;
    }
}

/* ========================================
   UX Enhancements
   Paleta: --primary-color (#FF6B35), --secondary-color (#8B1538),
           --accent-color (#D4AF37), --bg-light (#FFF8F5)
   ======================================== */

/* ===========================================
   1. BOTÃO VOLTAR AO TOPO
   =========================================== */
.scroll-top-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--bg-white);
    color: var(--secondary-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all 0.25s ease;
    z-index: 90;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (hover: hover) {
    .scroll-top-btn:hover {
        background: var(--secondary-color);
        color: #ffffff;
        border-color: var(--secondary-color);
        box-shadow: var(--shadow-lg);
    }
}

.scroll-top-btn:active {
    transform: scale(0.92);
    transition-duration: 0.1s;
}

/* ===========================================
   2. INDICADOR DE SCROLL NAS CATEGORIAS
   =========================================== */
.categories-nav-wrapper {
    position: relative;
    overflow: hidden;
}

.categories-nav-wrapper::before,
.categories-nav-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.categories-nav-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-light) 10%, transparent 100%);
}

.categories-nav-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-light) 10%, transparent 100%);
}

.categories-nav-wrapper.can-scroll-left::before {
    opacity: 1;
}

.categories-nav-wrapper.can-scroll-right::after {
    opacity: 1;
}

/* ===========================================
   3. SEPARADOR VISUAL ENTRE CATEGORIAS
   =========================================== */
.category-section + .category-section::before {
    content: '';
    display: block;
    width: 100%;
    max-width: 80px;
    height: 2px;
    background: var(--border-color);
    border-radius: 1px;
    margin: 0 auto 2rem;
}

/* ===========================================
   4. CONTAGEM DE ITENS NA CATEGORIA
   =========================================== */
.category-item-count {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.category-item-count svg {
    display: none;
}

/* ===========================================
   5. BADGE DE PROMOÇÃO (overlay na imagem)
   =========================================== */
.item-promo-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    padding: 0.15rem 0.4rem;
    background: var(--secondary-color);
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 600;
    border-radius: 4px;
    line-height: 1.3;
    letter-spacing: 0.2px;
}

.item-promo-timer {
    flex-basis: 100%;
    font-size: 0.68rem;
    font-weight: 600;
    color: #854F0B;
    background: #FAF0E1;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 1px;
    white-space: nowrap;
    width: fit-content;
    transition: background 0.3s, color 0.3s;
}

.item-promo-timer.urgent {
    background: #FEE2E2;
    color: #DC2626;
    animation: promo-pulse 2s ease-in-out infinite;
}

.item-promo-timer.expired {
    background: #F3F4F6;
    color: #9CA3AF;
    animation: none;
}

@keyframes promo-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===========================================
   6. FOOTER
   =========================================== */
.footer {
    background: var(--bg-white);
    color: var(--text-light);
    visibility: visible;
    padding: 0;
    border-top: 2px solid var(--border-color);
    font-size: 0.85rem;
    margin-top: auto;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 1.25rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.footer-col-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 0.75rem;
}

.footer-detail {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.footer-detail svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--primary-color);
    align-self: flex-start;
    margin-top: 3px;
}

.footer-hour {
    display: inline-block;
    background: var(--bg-light);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-dark);
    font-weight: 600;
    border: 1px solid var(--border-color);
}

/* Tags de pagamento */
.footer-payments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.footer-payment-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.675rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.footer-payment-tag svg {
    width: 11px;
    height: 11px;
    color: var(--primary-color);
    flex-shrink: 0;
}

/* Redes sociais */
.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem; /* 16px - espaçamento adequado para touch targets */
    margin-bottom: 0.75rem;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;  /* Touch target mínimo 44×44px */
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: var(--bg-light);
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
    /* Melhorar área de toque */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

@media (hover: hover) {
    .footer-social-link:hover {
        background: var(--primary-color);
        color: #ffffff;
        border-color: var(--primary-color);
    }
}

.footer-social-link:active {
    transform: scale(0.92);
}

.footer-social-link svg {
    width: 18px;  /* Ícone ligeiramente maior para equilíbrio visual */
    height: 18px;
}

/* Status aberto/fechado */
.footer-status {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 0.375rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.footer-status-open {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.footer-status-closed {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* ===========================================
   TOAST FEEDBACK
   =========================================== */
.toast-container {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    pointer-events: none;
}

.toast {
    background: var(--text-dark);
    color: #ffffff;
    padding: 0.6rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(12px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.footer-service-fee {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
    padding: 0.5rem 0 0;
    font-style: italic;
}

.footer-bottom {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.footer-bottom p {
    margin: 0.2rem 0;
}

.footer .dev-info {
    margin-top: 0.5rem;
}

.footer .dev-info a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.footer .dev-info a:hover {
    text-decoration: underline;
}

/* ===========================================
   7. RESPONSIVO — TABLET (≤1024px)
   =========================================== */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

/* ===========================================
   8. RESPONSIVO — MOBILE (≤768px)
   =========================================== */
@media (max-width: 768px) {
    .scroll-top-btn {
        bottom: 1rem;
        right: 1rem;
        width: 42px;
        height: 42px;
    }

    .categories-nav-wrapper::before,
    .categories-nav-wrapper::after {
        width: 24px;
    }

    .category-section + .category-section::before {
        max-width: 60px;
        margin-bottom: 1.5rem;
    }

    .category-item-count {
        font-size: 0.7rem;
        margin-left: 0.375rem;
    }

    .footer-content {
        padding: 1.5rem 1.25rem 1rem;
    }

    .footer-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        text-align: center;
        margin-bottom: 1rem;
    }

    .footer-grid .footer-col {
        width: 100%;
        padding: 0;
    }

    .footer-grid .footer-col-title {
        text-align: center;
        font-size: 0.75rem;
        margin-bottom: 0.375rem;
        color: var(--text-muted);
        font-weight: 600;
        letter-spacing: 0.3px;
        text-transform: uppercase;
    }

    .footer-grid .footer-col:first-child .footer-col-title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
        color: var(--text-dark);
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
    }

    /* Info centralizada e compacta */
    .footer-grid .footer-detail {
        justify-content: center;
        text-align: center;
        margin-bottom: 0.375rem;
        font-size: 0.75rem;
    }

    .footer-grid .footer-detail svg {
        width: 13px;
        height: 13px;
    }

    /* Horários inline */
    .footer-grid .footer-col:nth-child(2) {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.375rem;
        padding: 0.75rem 0;
        margin: 0.5rem 0;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }

    .footer-grid .footer-col:nth-child(2) .footer-detail {
        margin: 0;
    }

    .footer-grid .footer-hour {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }

    /* Pagamentos centrados */
    .footer-grid .footer-col:last-child {
        padding-top: 0.5rem;
    }

    .footer-grid .footer-payments {
        justify-content: center;
    }

    .footer-grid .footer-payment-tag {
        font-size: 0.625rem;
        padding: 0.15rem 0.4rem;
    }

    .footer-bottom {
        padding-top: 0.75rem;
    }
}

/* ===========================================
   9. RESPONSIVO — MOBILE PEQUENO (≤480px)
   =========================================== */
@media (max-width: 480px) {
    .scroll-top-btn {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-sm);
    }

    .categories-nav-wrapper::before,
    .categories-nav-wrapper::after {
        width: 18px;
    }

    .category-section + .category-section::before {
        max-width: 48px;
        margin-bottom: 1.25rem;
    }

    .footer-content {
        padding: 1.25rem 1rem 0.875rem;
    }

    .footer-detail {
        font-size: 0.72rem;
    }

    .footer-payment-tag {
        font-size: 0.625rem;
    }

    .footer-bottom {
        font-size: 0.65rem;
    }
}

/* ===========================================
   10. RESPONSIVO — TELAS MUITO PEQUENAS (≤360px)
   =========================================== */
@media (max-width: 360px) {
    .scroll-top-btn {
        bottom: 0.75rem;
        right: 0.75rem;
        width: 38px;
        height: 38px;
    }

    .scroll-top-btn svg {
        width: 16px;
        height: 16px;
    }

    .category-item-count {
        display: none;
    }

    .footer-payment-tag svg {
        display: none;
    }
}

/* ===========================================
   11. LANDSCAPE
   =========================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .scroll-top-btn {
        bottom: 0.75rem;
        right: 0.75rem;
        width: 38px;
        height: 38px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===========================================
   12. SAFE AREAS
   =========================================== */
@supports (padding: max(0px)) {
    .scroll-top-btn {
        bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
        right: max(1rem, env(safe-area-inset-right, 1rem));
    }

    .footer-content {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* ===========================================
   13. ACESSIBILIDADE
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    .scroll-top-btn {
        transition: opacity 0.15s ease, visibility 0.15s ease;
        transform: none;
    }
    .scroll-top-btn.visible {
        transform: none;
    }
}

@media (prefers-contrast: high) {
    .scroll-top-btn {
        border: 2px solid var(--text-dark);
    }
    .footer-payment-tag {
        border-color: var(--text-muted);
    }
    .item-promo-badge {
        border-color: var(--secondary-color);
    }
}

/* ===========================================
   14. CONTROLE DE TAMANHO DE FONTE
   =========================================== */
.font-size-control {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.font-size-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-white);
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 0;
    line-height: 1;
}

.font-size-btn:first-of-type {
    font-size: 0.75rem;
}

.font-size-btn:last-of-type {
    font-size: 1rem;
}

.font-size-btn.active {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

@media (hover: hover) {
    .font-size-btn:not(.active):hover {
        background: var(--bg-light);
        border-color: var(--text-muted);
        color: var(--text-dark);
    }
}

.font-size-btn:active {
    transform: scale(0.92);
}

@media print {
    .scroll-top-btn { display: none !important; }
    .footer-social { display: none; }
    .font-size-control { display: none; }
}

/* ========================================
   PWA INSTALL BANNER & INSTRUCTIONS
   ======================================== */

/* Banner flutuante inferior - COMPACTO */
.pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 1) 100%);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    padding: 0.625rem 0.875rem;
    padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    min-height: 64px;
    max-height: 72px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.pwa-install-banner.pwa-banner-visible {
    transform: translateY(0);
    opacity: 1;
}

.pwa-install-banner.pwa-banner-hiding {
    transform: translateY(100%);
    opacity: 0;
}

/* Corpo do banner */
.pwa-banner-body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.pwa-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pwa-banner-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.pwa-banner-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.pwa-banner-text strong {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
}

.pwa-banner-text span {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pwa-banner-hint {
    font-size: 0.7rem !important;
    color: var(--primary-color) !important;
    font-weight: 500;
}

/* Ações do banner */
.pwa-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.pwa-banner-install {
    padding: 0.5rem 0.875rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 40px;
    min-width: 44px;
}

.pwa-banner-install:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.pwa-banner-install:active {
    transform: scale(0.96);
}

.pwa-banner-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.pwa-banner-close:hover {
    background: var(--bg-light);
    color: var(--text-dark);
}

/* ========================================
   MODAL DE INSTRUÇÕES (iOS / Firefox / etc)
   ======================================== */

.pwa-instructions-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pwa-instructions-modal.pwa-instructions-visible {
    opacity: 1;
}

.pwa-instructions-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.pwa-instructions-content {
    position: relative;
    background: white;
    border-radius: 20px;
    padding: 2rem 1.5rem;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    text-align: center;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pwa-instructions-visible .pwa-instructions-content {
    transform: translateY(0) scale(1);
}

.pwa-instructions-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--bg-light);
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.pwa-instructions-close:hover {
    background: var(--border-color);
    color: var(--text-dark);
}

.pwa-instructions-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.3);
    overflow: hidden;
}

.pwa-instructions-icon-logo {
    background: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: 2px solid var(--border-color);
}

.pwa-instructions-icon-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.pwa-instructions-content h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 0.5rem 0;
}

.pwa-instructions-content > p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0 0 1.5rem 0;
    line-height: 1.4;
}

/* Steps */
.pwa-instructions-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
    margin-bottom: 1.5rem;
}

.pwa-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.pwa-step-number {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.pwa-step-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pwa-step-content strong {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
}

.pwa-step-detail {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* Botão OK */
.pwa-instructions-ok {
    width: 100%;
    padding: 0.875rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pwa-instructions-ok:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.pwa-instructions-ok:active {
    transform: scale(0.98);
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */

@media (max-width: 400px) {
    .pwa-install-banner {
        padding: 0.5rem 0.75rem;
        min-height: 60px;
        gap: 0.5rem;
    }

    .pwa-banner-icon {
        width: 36px;
        height: 36px;
    }

    .pwa-banner-text strong {
        font-size: 0.8125rem;
    }

    .pwa-banner-text span {
        font-size: 0.7rem;
    }

    .pwa-banner-install {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
        min-height: 36px;
    }

    .pwa-banner-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .pwa-instructions-content {
        padding: 1.5rem 1.25rem;
    }

    .pwa-instructions-icon {
        width: 60px;
        height: 60px;
        border-radius: 14px;
    }

    .pwa-instructions-icon svg {
        width: 36px;
        height: 36px;
    }

    .pwa-instructions-content h3 {
        font-size: 1.2rem;
    }
}

/* iOS bottom bar safe area */
@supports (padding: max(0px)) {
    .pwa-install-banner {
        padding-bottom: max(0.875rem, env(safe-area-inset-bottom));
    }
}

.pwa-update-banner {
    position: fixed;
    bottom: -120px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10020;
    background: #1a1a1a;
    color: #fff;
    border-radius: 12px;
    padding: 14px 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    transition: bottom .35s cubic-bezier(.34,1.56,.64,1);
    width: calc(100% - 32px);
    max-width: 480px;
}
.pwa-update-banner--visible { bottom: 24px; }
.pwa-update-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.pwa-update-text { font-size: .9rem; font-weight: 500; flex: 1; }
.pwa-update-actions { display: flex; gap: 8px; }
.pwa-update-btn-later {
    background: transparent;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: .85rem;
    cursor: pointer;
}
.pwa-update-btn-now {
    background: #ff6b35;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.pwa-update-btn-now:hover { background: #e55a24; }
@media (max-width: 480px) {
    .pwa-update-banner { width: calc(100% - 24px); left: 12px; transform: none; }
}

.waiter-nudge {
    position: fixed;
    bottom: -100px;
    right: 20px;
    z-index: 10010;
    background: #fff;
    color: #333;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 6px 28px rgba(0,0,0,.15);
    border-left: 4px solid #ff6b35;
    max-width: 300px;
    width: calc(100% - 40px);
    transition: bottom .4s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
    opacity: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.waiter-nudge--visible {
    bottom: 24px;
    opacity: 1;
}
.waiter-nudge__icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}
.waiter-nudge__body { flex: 1; }
.waiter-nudge__title {
    font-size: .85rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 3px;
}
.waiter-nudge__text {
    font-size: .8rem;
    color: #666;
    line-height: 1.4;
}
.waiter-nudge__close {
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    margin-top: -2px;
}
.waiter-nudge__close:hover { color: #555; }

@media (max-width: 480px) {
    .waiter-nudge {
        right: 12px;
        left: 12px;
        max-width: none;
        width: auto;
    }
}

/* ──────────── Tutorial Onboarding ──────────── */

/* z-index alto para ficar acima do .modal (z-index: 9999) */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 10500;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tutorial-overlay.visible {
    opacity: 1;
}

/* Spotlight: cria o "buraco" no overlay escuro via box-shadow gigante */
.tutorial-spotlight {
    position: fixed;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72);
    pointer-events: none;
    transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
    z-index: 10501;
    /* Pulsing ring decorativo */
    outline: 2px solid var(--primary-color, #c91f4d);
    outline-offset: 2px;
    animation: tutorialPulse 1.6s ease-in-out infinite;
}

.tutorial-spotlight--hidden {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72);
    outline: none;
    animation: none;
}

@keyframes tutorialPulse {
    0%, 100% {
        outline-color: var(--primary-color, #c91f4d);
        outline-width: 2px;
    }
    50% {
        outline-color: rgba(201, 31, 77, 0.5);
        outline-width: 4px;
    }
}

/* Tooltip card — fora do .tutorial-overlay para ficar acima de qualquer modal/contexto */
.tutorial-tooltip {
    position: fixed !important;
    z-index: 2147483647 !important; /* máximo de 32-bit signed int */
    pointer-events: auto !important;
    width: 320px;
    max-width: calc(100vw - 32px);
    /* Garante que botões de ação SEMPRE estejam acessíveis,
       mesmo em telas muito pequenas com tooltip + foto grande */
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    transition: top 0.3s ease, left 0.3s ease;
    animation: tutorialTooltipIn 0.35s ease-out;
    isolation: isolate;
}

.tutorial-tooltip * {
    pointer-events: auto !important;
}

.tutorial-tooltip button {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.tutorial-tooltip--center {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

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

.tutorial-tooltip--center {
    animation: tutorialTooltipCenterIn 0.35s ease-out;
}

@keyframes tutorialTooltipCenterIn {
    from { opacity: 0; transform: translate(-50%, -45%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

.tutorial-tooltip-step {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-color, #c91f4d);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.tutorial-tooltip-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark, #1a1a1a);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.tutorial-tooltip-text {
    font-size: 0.9rem;
    color: var(--text-light, #555);
    line-height: 1.5;
    margin: 0 0 1rem;
}

.tutorial-tooltip-text strong {
    color: var(--text-dark, #1a1a1a);
    font-weight: 700;
}

/* Indicador de progresso (dots) */
.tutorial-tooltip-progress {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 1rem;
}

.tutorial-progress-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    transition: all 0.25s ease;
}

.tutorial-progress-dot.active {
    background: var(--primary-color, #c91f4d);
    width: 18px;
    border-radius: 4px;
}

.tutorial-progress-dot.done {
    background: rgba(201, 31, 77, 0.4);
}

/* Ações */
.tutorial-tooltip-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.tutorial-tooltip-actions-right {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.tutorial-btn {
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    transition: background 0.15s, transform 0.1s;
}

.tutorial-btn:active {
    transform: scale(0.96);
}

.tutorial-btn-skip {
    background: transparent;
    color: var(--text-muted, #888);
    padding: 0.55rem 0.5rem;
}

.tutorial-btn-skip:hover {
    color: var(--text-dark, #333);
}

.tutorial-btn-skip:empty {
    display: none;
}

.tutorial-btn-prev {
    background: var(--bg-cream, #f8f5f0);
    color: var(--text-dark, #333);
}

.tutorial-btn-prev:hover {
    background: rgba(0, 0, 0, 0.06);
}

.tutorial-btn-next {
    background: var(--primary-color, #c91f4d);
    color: #fff;
}

.tutorial-btn-next:hover {
    background: var(--primary-dark, #a01840);
    filter: brightness(1.05);
}

/* Wide desktop (≥1440px): tooltip mais espaçoso */
@media (min-width: 1440px) {
    .tutorial-tooltip {
        width: 380px;
        padding: 1.5rem 1.5rem 1.15rem;
    }
    .tutorial-tooltip-title {
        font-size: 1.2rem;
    }
    .tutorial-tooltip-text {
        font-size: 0.95rem;
    }
}

/* Tablet (769–1024px): tooltip médio */
@media (min-width: 769px) and (max-width: 1024px) {
    .tutorial-tooltip {
        width: 340px;
    }
}

/* Mobile padrão (≤768px): tooltip mais largo, padding reduzido */
@media (max-width: 768px) {
    .tutorial-tooltip {
        width: calc(100vw - 28px);
        max-width: 380px;
        padding: 1.1rem 1.1rem 0.9rem;
    }
    .tutorial-tooltip-title {
        font-size: 1.05rem;
    }
    .tutorial-tooltip-text {
        font-size: 0.88rem;
        margin-bottom: 0.85rem;
    }
}

/* Mobile pequeno (≤480px) */
@media (max-width: 480px) {
    .tutorial-tooltip {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        padding: 1rem 1rem 0.85rem;
        border-radius: 12px;
    }
    .tutorial-tooltip-title {
        font-size: 1rem;
    }
    .tutorial-tooltip-text {
        font-size: 0.85rem;
        line-height: 1.45;
    }
    .tutorial-tooltip-step {
        font-size: 0.65rem;
        margin-bottom: 0.4rem;
    }
    .tutorial-tooltip-progress {
        margin-bottom: 0.85rem;
    }
    .tutorial-btn {
        font-size: 0.8rem;
        padding: 0.5rem 0.9rem;
    }
    .tutorial-btn-skip {
        padding: 0.5rem 0.4rem;
    }
}

/* Mobile muito pequeno (≤360px): iPhone SE 1ª gen, Android compact antigo */
@media (max-width: 360px) {
    .tutorial-tooltip {
        padding: 0.85rem 0.85rem 0.75rem;
    }
    .tutorial-tooltip-title {
        font-size: 0.95rem;
    }
    .tutorial-tooltip-text {
        font-size: 0.8rem;
    }
    .tutorial-btn {
        font-size: 0.75rem;
        padding: 0.45rem 0.75rem;
    }
    .tutorial-tooltip-actions-right {
        gap: 0.35rem;
    }
}

/* Landscape mobile (altura <= 500px): compactar verticalmente */
@media (max-height: 500px) and (orientation: landscape) {
    .tutorial-tooltip {
        padding: 0.75rem 1rem 0.65rem;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
    }
    .tutorial-tooltip-title {
        font-size: 0.95rem;
        margin-bottom: 0.3rem;
    }
    .tutorial-tooltip-text {
        font-size: 0.8rem;
        margin-bottom: 0.6rem;
    }
    .tutorial-tooltip-progress {
        margin-bottom: 0.6rem;
    }
    .tutorial-tooltip-step {
        margin-bottom: 0.3rem;
    }
}

/* Telas muito altas (1080p+): dar mais respiro nos passos centrais */
@media (min-height: 900px) {
    .tutorial-tooltip--center {
        padding: 1.75rem 1.75rem 1.35rem;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .tutorial-spotlight,
    .tutorial-tooltip,
    .tutorial-overlay {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   Chamar Garçom — Botão flutuante + Modal
   ============================================ */

/* Revelar FAB após CSS completo carregar (evita FOUC com critical.css) */
.chamar-garcom-fab {
    visibility: visible;
}

/* ── FAB (Floating Action Button) ─────────────────────────────────────────── */

.chamar-garcom-fab {
    position: fixed;
    bottom: 5.5rem;
    right: 1rem;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: var(--primary-color, #c41e3a);
    color: #fff;
    border-radius: 16px;
    padding: 0.75rem 0.875rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    min-width: 60px;
}

.chamar-garcom-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.chamar-garcom-fab:active {
    transform: scale(0.94);
}

.chamar-garcom-fab.cooldown {
    background: #2d7a4f;
    cursor: not-allowed;
    pointer-events: none;
}

.chamar-garcom-fab svg {
    flex-shrink: 0;
}

.chamar-garcom-fab-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.chamar-garcom-fab-label small {
    font-size: 0.68rem;
    font-weight: 600;
    opacity: 0.85;
}

/* ── Overlay ──────────────────────────────────────────────────────────────── */

.chamar-garcom-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 env(safe-area-inset-bottom, 0);
    overscroll-behavior: none;
    touch-action: none;
}

.chamar-garcom-overlay[hidden] {
    display: none;
}

/* ── Card / Bottom-sheet (mobile first) ────────────────────────────────────── */

.chamar-garcom-card {
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    animation: garcomSlideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    overscroll-behavior: contain;
    touch-action: pan-y;
}

@keyframes garcomSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Drag handle visual */
.chamar-garcom-card::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin: 0 auto 1.5rem;
}

.chamar-garcom-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    color: #555;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
}

.chamar-garcom-close:hover {
    background: #e8e8e8;
}

.chamar-garcom-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.chamar-garcom-icon svg {
    padding: 0.625rem;
    background: rgba(196, 30, 58, 0.08);
    border-radius: 16px;
    color: var(--primary-color, #c41e3a);
}

.chamar-garcom-title {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-dark, #2D0A1F);
    margin: 0 0 0.25rem;
}

.chamar-garcom-subtitle {
    font-size: 0.875rem;
    color: #777;
    text-align: center;
    margin: 0 0 1.5rem;
}

.chamar-garcom-mesa-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.chamar-garcom-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark, #2D0A1F);
}

.chamar-garcom-input {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    outline: none;
    color: var(--text-dark, #2D0A1F);
    transition: border-color 0.15s, background 0.15s;
    -moz-appearance: textfield;
    appearance: textfield;
}

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

.chamar-garcom-input:focus {
    border-color: var(--primary-color, #c41e3a);
}

.chamar-garcom-input.input-ok {
    border-color: #059669;
    background: #f0fdf4;
}

.chamar-garcom-input.input-erro {
    border-color: #dc2626;
    background: #fef2f2;
    animation: garcomShake 0.25s ease;
}

@keyframes garcomShake {
    0%, 100% { transform: translateX(0); }
    33%       { transform: translateX(-4px); }
    66%       { transform: translateX(4px); }
}

.chamar-garcom-submit {
    width: 100%;
    padding: 1rem;
    min-height: 52px;
    background: var(--primary-color, #c41e3a);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.chamar-garcom-submit:hover:not(:disabled) {
    background: #a01830;
}

.chamar-garcom-submit:active:not(:disabled) {
    transform: scale(0.97);
}

.chamar-garcom-submit:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* ── Motivos / Opções ─────────────────────────────────────────────────────── */

.chamar-garcom-motivos {
    margin-bottom: 1.25rem;
    animation: garcomSubExpand 0.22s ease;
}

.chamar-garcom-motivos-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    margin-bottom: 0.75rem;
}

.chamar-garcom-motivos-label::before,
.chamar-garcom-motivos-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e8e8e8;
}

.chamar-garcom-opcoes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chamar-garcom-opcao {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #f7f7f7;
    border: 2px solid #f0f0f0;
    border-radius: 14px;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-dark, #2D0A1F);
    text-align: left;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 56px;
    position: relative;
}

.chamar-garcom-opcao:hover {
    background: #f0f0f0;
    border-color: #ddd;
}

.chamar-garcom-opcao:active {
    transform: scale(0.98);
}

.chamar-garcom-opcao.selected {
    border-color: var(--primary-color, #c41e3a);
    background: #fff5f7;
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.08);
}

/* Ícone em bolha colorida */
.chamar-garcom-opcao-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #efefef;
    flex-shrink: 0;
    transition: background 0.15s;
    color: #555;
}

.chamar-garcom-opcao-icon svg {
    display: block;
}

/* Cores por motivo — normal */
[data-motivo="pedido"]     .chamar-garcom-opcao-icon { background: #fef3c7; color: #d97706; }
[data-motivo="limpar"]     .chamar-garcom-opcao-icon { background: #e0f2fe; color: #0284c7; }
[data-motivo="conta"]      .chamar-garcom-opcao-icon { background: #f0fdf4; color: #16a34a; }
[data-motivo="conta_cartao"]   .chamar-garcom-opcao-icon { background: #eff6ff; color: #2563eb; }
[data-motivo="conta_dinheiro"] .chamar-garcom-opcao-icon { background: #f0fdf4; color: #16a34a; }

/* Selecionado — intensifica fundo, mantém cor */
[data-motivo="pedido"].selected     .chamar-garcom-opcao-icon { background: #fde68a; }
[data-motivo="limpar"].selected     .chamar-garcom-opcao-icon { background: #bae6fd; }
[data-motivo="conta"].selected      .chamar-garcom-opcao-icon { background: #bbf7d0; }
[data-motivo="conta_cartao"].selected   .chamar-garcom-opcao-icon { background: #bfdbfe; }
[data-motivo="conta_dinheiro"].selected .chamar-garcom-opcao-icon { background: #bbf7d0; }

/* Texto da opção */
.chamar-garcom-opcao-texto {
    flex: 1;
    line-height: 1.3;
}

/* Checkmark / arrow à direita */
.chamar-garcom-opcao-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #ddd;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
    margin-left: auto;
}

.chamar-garcom-opcao.selected .chamar-garcom-opcao-check {
    background: var(--primary-color, #c41e3a);
    border-color: var(--primary-color, #c41e3a);
}

.chamar-garcom-opcao.selected .chamar-garcom-opcao-check::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
}

/* Arrow para opções com sub-menu */
.chamar-garcom-opcao-arrow {
    margin-left: auto;
    color: #bbb;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.2s, color 0.15s;
}

.chamar-garcom-opcao.selected .chamar-garcom-opcao-arrow {
    transform: rotate(90deg);
    color: var(--primary-color, #c41e3a);
}

/* Sub-opções — grid 2 colunas */
.chamar-garcom-sub {
    margin-top: 0.5rem;
    animation: garcomSubExpand 0.2s ease;
}

@keyframes garcomSubExpand {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chamar-garcom-sub-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #999;
    margin: 0 0 0.5rem;
    padding-left: 0.25rem;
}

.chamar-garcom-sub .chamar-garcom-opcoes {
    flex-direction: row;
    gap: 0.5rem;
}

.chamar-garcom-sub-opcao {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.875rem 0.5rem;
    min-height: 72px;
    border-radius: 12px;
    font-size: 0.875rem;
}

.chamar-garcom-sub-opcao .chamar-garcom-opcao-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.chamar-garcom-sub-opcao .chamar-garcom-opcao-check {
    display: none;
}

/* ── Feedback ─────────────────────────────────────────────────────────────── */

.chamar-garcom-feedback {
    margin: 0.875rem 0 0;
    font-size: 0.875rem;
    text-align: center;
    min-height: 1.25rem;
    font-weight: 600;
}

.chamar-garcom-feedback.success { color: #059669; }
.chamar-garcom-feedback.error   { color: #dc2626; }

/* ── Responsividade ───────────────────────────────────────────────────────── */

/* Mobile (<= 480px) — bottom-sheet que cresce com o conteúdo */
@media (max-width: 480px) {
    .chamar-garcom-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .chamar-garcom-card {
        max-width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: 24px 24px 0 0;
        padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
        animation: garcomSlideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    }
}

/* Telas muito pequenas (< 360px) — só ajusta FAB */
@media (max-width: 359px) {
    .chamar-garcom-fab {
        bottom: 4.5rem;
        right: 0.5rem;
        padding: 0.6rem 0.7rem;
        border-radius: 14px;
        min-width: 52px;
    }

    .chamar-garcom-fab svg {
        width: 20px;
        height: 20px;
    }

    .chamar-garcom-fab-label {
        font-size: 0.56rem;
    }
}

/* Landscape em mobile — reduz padding, card mais compacto */
@media (max-height: 500px) and (max-width: 900px) {
    .chamar-garcom-card {
        padding-top: 0.75rem;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    }

    .chamar-garcom-icon {
        display: none;
    }

    .chamar-garcom-title {
        font-size: 1rem;
        margin-bottom: 0.1rem;
    }

    .chamar-garcom-subtitle {
        font-size: 0.8rem;
        margin-bottom: 0.75rem;
    }

    .chamar-garcom-mesa-wrap {
        margin-bottom: 0.75rem;
    }

    .chamar-garcom-input {
        padding: 0.6rem 1rem;
        font-size: 1.25rem;
    }

    .chamar-garcom-opcao {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }

    .chamar-garcom-sub-opcao {
        min-height: 52px;
    }
}

/* Tablet / desktop (>= 600px) — modal centralizado, não bottom-sheet */
@media (min-width: 600px) {
    .chamar-garcom-overlay {
        align-items: center;
        padding: 1rem;
    }

    .chamar-garcom-card {
        border-radius: 24px;
        padding: 2rem 2rem calc(2rem + env(safe-area-inset-bottom, 0px));
        max-width: 440px;
        max-height: 90vh;
        max-height: 90dvh;
        animation: garcomFadeIn 0.22s ease;
    }

    .chamar-garcom-card::before {
        display: none;
    }

    .chamar-garcom-fab {
        bottom: 2rem;
        right: 2rem;
        padding: 0.875rem 1rem;
        border-radius: 18px;
        gap: 0.3rem;
    }

    .chamar-garcom-fab svg {
        width: 26px;
        height: 26px;
    }

    .chamar-garcom-fab-label {
        font-size: 0.65rem;
    }
}

/* Desktop grande (>= 1024px) */
@media (min-width: 1024px) {
    .chamar-garcom-fab {
        bottom: 2.5rem;
        right: 2.5rem;
        padding: 1rem 1.125rem;
        border-radius: 20px;
        gap: 0.35rem;
    }

    .chamar-garcom-fab svg {
        width: 28px;
        height: 28px;
    }

    .chamar-garcom-fab-label {
        font-size: 0.68rem;
    }
}

@keyframes garcomFadeIn {
    from { opacity: 0; transform: scale(0.97) translateY(6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ========================================
   PROTEÇÃO CONTRA DARK MODE FORÇADO
   ======================================== */

/*
 * Impede que navegadores (Chrome force-dark, Edge, etc.)
 * alterem as cores do layout automaticamente.
 *
 * Estratégia:
 * 1. forced-color-adjust: none → impede o browser de alterar cores
 * 2. @media dark → re-força variáveis CSS com valores light originais
 *    para que TODOS os elementos que usam var() fiquem protegidos
 * 3. Overrides pontuais para elementos com cores hardcoded
 */
html {
    forced-color-adjust: none;
    -ms-high-contrast-adjust: none;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light !important;
        /* Re-forçar variáveis com valores light originais */
        --primary-color: #FF6B35 !important;
        --primary-hover: #e65a2e !important;
        --secondary-color: #8B1538 !important;
        --accent-color: #D4AF37 !important;
        --cta-color: #C41E3A !important;
        --text-dark: #2D0A1F !important;
        --text-light: #5C1F3A !important;
        --text-muted: #8B6B7A !important;
        --bg-light: #FFF8F5 !important;
        --bg-white: #FFFFFF !important;
        --bg-cream: #FFF5EE !important;
        --border-color: #F5E6E8 !important;
    }

    /* Elementos com background/color que browsers podem inverter */
    body {
        background: #FFF8F5 !important;
        color: #2D0A1F !important;
    }

    .item-card,
    .modal-content {
        background: #FFFFFF !important;
        color: #2D0A1F !important;
    }

    .categories-section,
    .category-nav,
    .category-nav.scrolled {
        background: #FFFFFF !important;
    }

    .search-input {
        background: rgba(255, 255, 255, 0.95) !important;
        color: #2D0A1F !important;
    }

    .search-results {
        background: #FFFFFF !important;
    }

    .footer {
        background: #FFFFFF !important;
        color: #5C1F3A !important;
    }

    .modal-footer {
        background: #FFFFFF !important;
    }

    /* Elementos com cor hardcoded (não usam variáveis) */
    .categories-title {
        color: #0d9488 !important;
    }

    /* Modais WiFi */
    .wifi-modal-close {
        background: #FFF8F5 !important;
    }

    .wifi-title {
        color: #2D0A1F !important;
    }

    .wifi-value {
        background: #FFF8F5 !important;
        border-color: #F5E6E8 !important;
    }

    .wifi-copy {
        border-color: #F5E6E8 !important;
    }

    /* Prevenir inversão de imagens */
    img {
        forced-color-adjust: none;
    }
}