/* ========================================================= NACIONAL BURGUER - MOBILE.CSS LIMPO Ativado somente quando o JS adiciona a classe .nb-celular no . Desktop não é alterado. ========================================================= */ html.nb-celular, html.nb-celular body{ width:100% !important; max-width:100% !important; overflow-x:hidden !important; background:#090606 !important; } html.nb-celular *{ box-sizing:border-box !important; } html.nb-celular body{ padding-top:0 !important; } /* Cardápio completo em lista vertical, como no layout de referência */ html.nb-celular body #paginaCardapio .premium-grid{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; width:100% !important; max-width:none !important; } html.nb-celular body #paginaCardapio .premium-card{ display:grid !important; grid-template-columns:43% 57% !important; height:170px !important; min-height:170px !important; max-height:170px !important; border-radius:20px !important; overflow:hidden !important; background:linear-gradient(110deg, #171717 0%, #0e0e0e 100%) !important; } html.nb-celular body #paginaCardapio .premium-card > img{ width:100% !important; height:100% !important; min-height:170px !important; max-height:170px !important; object-fit:cover !important; -webkit-user-drag:none !important; user-select:none !important; touch-action:manipulation !important; cursor:pointer !important; } html.nb-celular body #paginaCardapio .premium-body{ min-width:0 !important; min-height:0 !important; overflow:hidden !important; padding:16px 14px 14px 18px !important; display:flex !important; flex-direction:column !important; justify-content:center !important; } html.nb-celular body #paginaCardapio .premium-tag{ font-size:8px !important; letter-spacing:.8px !important; } html.nb-celular body #paginaCardapio .premium-body h3{ margin-top:8px !important; font-size:22px !important; line-height:1 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; display:block !important; } html.nb-celular body #paginaCardapio .premium-body p{ margin-top:9px !important; min-height:0 !important; max-height:43px !important; font-size:10px !important; line-height:1.4 !important; height:43px !important; display:block !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important; padding-right:3px !important; } html.nb-celular body #paginaCardapio .premium-footer{ margin-top:auto !important; padding-top:10px !important; gap:8px !important; } html.nb-celular body #paginaCardapio .premium-price{ font-size:19px !important; } html.nb-celular body #paginaCardapio .add-btn{ width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important; flex:0 0 38px !important; border-radius:13px !important; font-size:22px !important; } html.nb-celular .product-description-modal{ padding:14px !important; } html.nb-celular .product-description-dialog{ display:flex !important; flex-direction:column !important; width:100% !important; max-height:calc(100dvh - 28px) !important; overflow:hidden !important; padding:18px !important; border-radius:22px !important; } html.nb-celular .product-description-image{ width:100% !important; height:min(30dvh, 230px) !important; min-height:120px !important; flex:0 1 auto !important; margin:0 0 14px !important; object-fit:contain !important; object-position:center !important; border-radius:15px !important; -webkit-user-drag:none !important; user-select:none !important; touch-action:none !important; pointer-events:none !important; } html.nb-celular .product-description-dialog > span, html.nb-celular .product-description-dialog > h3, html.nb-celular .product-description-price, html.nb-celular .product-description-add{ flex:0 0 auto !important; } html.nb-celular .product-description-dialog h3{ margin:7px 42px 10px 0 !important; font-size:27px !important; } html.nb-celular #descricaoProdutoTexto{ min-height:0 !important; overflow-y:auto !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important; font-size:13px !important; line-height:1.5 !important; } html.nb-celular .product-description-price{ margin-top:12px !important; font-size:24px !important; } html.nb-celular .product-description-add{ min-height:54px !important; margin-top:12px !important; } html.nb-celular .product-loading-panel{ min-height:auto !important; margin-bottom:14px !important; padding:22px !important; border-radius:22px !important; } html.nb-celular .product-loading-logo{ width:78px !important; height:78px !important; border-radius:18px !important; } html.nb-celular .product-loading-logo img{ width:64px !important; height:64px !important; } html.nb-celular .product-loading-copy strong{ font-size:24px !important; } html.nb-celular .product-loading-copy p{ font-size:12px !important; } /* ========================================================= HEADER MOBILE FINAL ========================================================= */ @media (max-width:900px){ html.nb-celular .topbar{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; transform:none !important; width:100% !important; max-width:100% !important; height:76px !important; min-height:76px !important; padding:8px 14px !important; background:#050505 !important; border:none !important; border-radius:0 !important; box-shadow:none !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; overflow:visible !important; z-index:99999 !important; } html.nb-celular .logo-area{ display:flex !important; align-items:center !important; gap:10px !important; flex:1 1 auto !important; width:auto !important; min-width:0 !important; cursor:pointer !important; overflow:visible !important; } /* Logo: 62px com padding 0 para a marca crescer sem aumentar a borda branca */ html.nb-celular #logoMini, html.nb-celular .logo-area img#logoMini{ display:block !important; width:54px !important; height:54px !important; min-width:54px !important; padding:0 !important; background:#510018 !important; border-radius:50% !important; object-fit:cover !important; object-position:center !important; transform:scale(0.90) !important; box-shadow: 0 3px 10px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,180,80,.12) !important; } html.nb-celular .logo-text{ display:flex !important; flex-direction:column !important; justify-content:center !important; gap:3px !important; min-width:0 !important; overflow:visible !important; } html.nb-celular .logo-text strong{ display:block !important; color:#fff !important; font-size:14px !important; font-weight:800 !important; line-height:1 !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; letter-spacing:-.25px !important; margin:0 !important; } html.nb-celular #statusLojaTopo{ display:block !important; color:#63ef82 !important; font-size:11px !important; font-weight:700 !important; line-height:1 !important; text-transform:none !important; margin:0 !important; } html.nb-celular #statusLojaTopo::before{ content:"●" !important; display:inline-block !important; margin-right:4px !important; color:#22e65b !important; font-size:9px !important; transform:none !important; } html.nb-celular .top-menu, html.nb-celular .right-icons{ display:none !important; } html.nb-celular .header-actions{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:10px !important; flex:0 0 auto !important; } html.nb-celular .cart-mobile-btn, html.nb-celular .menu-mobile-btn{ width:42px !important; height:42px !important; min-width:42px !important; border:none !important; border-radius:14px !important; background:#171717 !important; color:#fff !important; font-size:21px !important; line-height:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; position:relative !important; padding:0 !important; margin:0 !important; } html.nb-celular .menu-mobile-btn{ font-size:25px !important; font-weight:800 !important; transform:translateY(-1px); } html.nb-celular .cart-badge{ position:absolute !important; top:-6px !important; right:-6px !important; min-width:18px !important; height:18px !important; padding:0 5px !important; border-radius:999px !important; background:#ff2d55 !important; color:#fff !important; border:2px solid #050505 !important; font-size:10px !important; font-weight:800 !important; display:flex !important; align-items:center !important; justify-content:center !important; } html.nb-celular .hero{ margin-top:76px !important; } html.nb-celular .menu-premium, html.nb-celular .checkout-page, html.nb-celular .pedidos-premium, html.nb-celular .orders-page{ margin-top:82px !important; } } /* ========================================================= MENU MOBILE DOS 3 TRACINHOS ========================================================= */ .mobile-nav-overlay, .mobile-nav-drawer{ display:none; } html.nb-celular .mobile-nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(4px); z-index:99998; } html.nb-celular .mobile-nav-overlay.ativo{ display:block !important; } html.nb-celular .mobile-nav-drawer{ position:fixed; top:82px; right:14px; width:220px; padding:10px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background:#111; box-shadow:0 20px 60px rgba(0,0,0,.45); z-index:99999; } html.nb-celular .mobile-nav-drawer.ativo{ display:block !important; } html.nb-celular .mobile-nav-drawer button{ width:100%; height:44px; border:none; border-radius:13px; background:transparent; color:#fff; font-family:Poppins, sans-serif; font-size:13px; font-weight:800; text-align:left; padding:0 14px; } html.nb-celular .mobile-nav-drawer button:hover, html.nb-celular .mobile-nav-drawer button:active{ background:#f7a928; color:#111; } /* ========================================================= HERO MOBILE ========================================================= */ html.nb-celular .hero{ width:96% !important; max-width:96% !important; height:350px !important; border-radius:22px !important; overflow:hidden !important; } html.nb-celular .hero-slide{ background-size:cover !important; background-position:center center !important; } html.nb-celular .hero-overlay{ background:linear-gradient(90deg,rgba(8,8,8,.94) 0%,rgba(8,8,8,.68) 46%,rgba(8,8,8,.16) 100%) !important; } html.nb-celular .hero-content{ width:66% !important; max-width:66% !important; padding:22px 0 0 24px !important; } html.nb-celular .hero-badge{ padding:7px 12px !important; border-radius:999px !important; font-size:10.5px !important; gap:6px !important; } html.nb-celular .hero-content h1{ margin-top:12px !important; font-size:39px !important; line-height:.92 !important; letter-spacing:-.8px !important; } html.nb-celular .hero-content p{ margin-top:8px !important; font-size:12.5px !important; line-height:1.35 !important; max-width:245px !important; } html.nb-celular .hero-info{ gap:7px !important; margin-top:10px !important; flex-wrap:wrap !important; } html.nb-celular .hero-info span{ padding:8px 9px !important; border-radius:11px !important; font-size:9.5px !important; white-space:nowrap !important; } html.nb-celular .hero-btn{ height:40px !important; margin-top:10px !important; padding:0 16px !important; border-radius:12px !important; font-size:11px !important; } html.nb-celular .hero-arrow{ width:30px !important; height:30px !important; font-size:22px !important; border-color:rgba(255,255,255,.08) !important; background:rgba(25,7,10,.24) !important; color:rgba(255,255,255,.65) !important; opacity:.20 !important; backdrop-filter:none !important; box-shadow:none !important; transition:opacity .18s ease, background .18s ease, color .18s ease, transform .18s ease !important; } html.nb-celular .hero-arrow.left{left:12px !important;} html.nb-celular .hero-arrow.right{right:12px !important;} html.nb-celular .hero-dots{ bottom:11px !important; gap:7px !important; } html.nb-celular .hero-dot{ width:8px !important; height:8px !important; } /* ========================================================= SABORES NACIONAIS ========================================================= */ html.nb-celular .highlights{ width:92% !important; max-width:92% !important; margin:14px auto 0 !important; padding:18px !important; border-radius:22px !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; overflow:hidden !important; } html.nb-celular .highlights-title{ grid-column:1 / -1 !important; } html.nb-celular .highlights-title h2{ font-size:26px !important; line-height:1 !important; } html.nb-celular .highlights-line{ width:42px !important; height:4px !important; margin-top:10px !important; } html.nb-celular .highlight-card{ width:100% !important; max-width:100% !important; min-width:0 !important; min-height:78px !important; padding:11px 8px !important; border-radius:14px !important; overflow:hidden !important; } html.nb-celular .highlight-card .emoji{ font-size:20px !important; } html.nb-celular .highlight-card strong{ margin-top:5px !important; font-size:13px !important; line-height:1.05 !important; } html.nb-celular .highlight-card p{ margin-top:4px !important; font-size:8px !important; line-height:1.28 !important; } /* ========================================================= SEÇÃO NOSSOS HAMBÚRGUERES ========================================================= */ html.nb-celular .delivery-section{ width:92% !important; max-width:92% !important; margin:14px auto 46px !important; padding:20px 18px !important; border-radius:24px !important; overflow:hidden !important; } html.nb-celular .delivery-top{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:start !important; gap:10px !important; margin-bottom:20px !important; } html.nb-celular .delivery-title{ min-width:0 !important; width:100% !important; } html.nb-celular .delivery-pill, html.nb-celular .delivery-eyebrow{ display:inline-flex !important; width:auto !important; max-width:max-content !important; white-space:nowrap !important; font-size:8.5px !important; line-height:1 !important; padding:8px 10px !important; border-radius:999px !important; } html.nb-celular .delivery-title h2{ margin-top:14px !important; font-size:34px !important; line-height:.95 !important; letter-spacing:-.8px !important; } html.nb-celular .delivery-title p{ margin-top:10px !important; font-size:12px !important; line-height:1.45 !important; max-width:250px !important; } html.nb-celular .delivery-link-btn{ width:auto !important; min-width:118px !important; max-width:142px !important; height:38px !important; padding:0 10px !important; border-radius:13px !important; font-size:8.5px !important; white-space:nowrap !important; } html.nb-celular .premium-preview{ width:100% !important; overflow:hidden !important; } html.nb-celular .premium-products-row{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; width:100% !important; } html.nb-celular .product-card{ min-width:0 !important; width:100% !important; min-height:auto !important; border-radius:14px !important; overflow:hidden !important; } html.nb-celular .product-image-wrap{ height:112px !important; } html.nb-celular .product-card img{ width:100% !important; height:100% !important; object-fit:cover !important; } html.nb-celular .product-badge{ top:8px !important; left:8px !important; padding:5px 7px !important; border-radius:999px !important; font-size:7.5px !important; } html.nb-celular .product-content{ padding:9px !important; } html.nb-celular .product-category, html.nb-celular .product-tag{ font-size:6.5px !important; letter-spacing:.45px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } html.nb-celular .product-content h3{ margin-top:5px !important; font-size:15px !important; line-height:1.05 !important; overflow:hidden !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; } html.nb-celular .product-content p{ margin-top:6px !important; font-size:8.5px !important; line-height:1.3 !important; max-height:34px !important; overflow:hidden !important; } html.nb-celular .product-footer{ margin-top:8px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:5px !important; } html.nb-celular .product-price{ font-size:13px !important; line-height:1 !important; white-space:nowrap !important; } html.nb-celular .product-add, html.nb-celular .product-add-btn{ width:26px !important; height:26px !important; min-width:26px !important; max-width:26px !important; flex:0 0 26px !important; border-radius:9px !important; font-size:16px !important; display:flex !important; align-items:center !important; justify-content:center !important; position:static !important; transform:none !important; } html.nb-celular .preview-nav, html.nb-celular .delivery-arrow{ width:30px !important; height:30px !important; min-width:30px !important; font-size:19px !important; border-color:rgba(247,169,40,.10) !important; background:rgba(25,7,10,.24) !important; color:rgba(247,169,40,.72) !important; opacity:.20 !important; backdrop-filter:none !important; box-shadow:none !important; transition:opacity .18s ease, background .18s ease, color .18s ease, transform .18s ease !important; } html.nb-celular .hero-arrow:active, html.nb-celular .hero-arrow:focus-visible, html.nb-celular .preview-nav:active, html.nb-celular .preview-nav:focus-visible{ opacity:1 !important; background:#f7a928 !important; color:#15100c !important; border-color:#f7a928 !important; box-shadow:0 7px 18px rgba(247,169,40,.28) !important; } /* ========================================================= CARDÁPIO ========================================================= */ html.nb-celular .menu-premium{ width:92% !important; max-width:92% !important; margin-left:auto !important; margin-right:auto !important; margin-bottom:48px !important; } html.nb-celular .menu-header{ flex-direction:column !important; align-items:flex-start !important; gap:10px !important; margin-bottom:16px !important; } html.nb-celular .menu-header h1{ font-size:32px !important; line-height:1 !important; } html.nb-celular .menu-header p{ font-size:12px !important; } html.nb-celular .menu-top-filters{ display:block !important; margin-bottom:14px !important; } html.nb-celular .product-loading-message{ min-height:auto !important; margin-bottom:14px !important; padding:14px !important; border-radius:16px !important; grid-template-columns:36px 1fr !important; column-gap:10px !important; } html.nb-celular .product-loading-message span{ width:36px !important; height:36px !important; border-radius:12px !important; } html.nb-celular .product-loading-message span::before{ inset:8px !important; border-width:2px !important; } html.nb-celular .product-loading-message strong{ font-size:16px !important; } html.nb-celular .product-loading-message p{ font-size:11px !important; line-height:1.35 !important; } html.nb-celular .product-loading-grid{ grid-template-columns:1fr 1fr !important; gap:10px !important; } html.nb-celular .product-loading-mode-preview .product-loading-grid{ grid-template-columns:1fr !important; } html.nb-celular .product-loading-card, html.nb-celular .product-loading-mode-preview .product-loading-card{ min-height:260px !important; border-radius:16px !important; } html.nb-celular .product-loading-image, html.nb-celular .product-loading-grid .product-loading-card:not(.product-card) .product-loading-image{ height:126px !important; } html.nb-celular .product-loading-body{ padding:12px !important; } html.nb-celular .product-loading-body strong{ height:22px !important; } html.nb-celular .product-loading-body p{ height:38px !important; margin-bottom:14px !important; } html.nb-celular .categorias-premium{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; gap:6px !important; scrollbar-width:none !important; padding-bottom:4px !important; } html.nb-celular .categorias-premium::-webkit-scrollbar{ display:none !important; } html.nb-celular .categorias-premium button{ flex:0 0 auto !important; height:30px !important; padding:0 9px !important; border-radius:11px !important; font-size:9px !important; } html.nb-celular .premium-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; } html.nb-celular .premium-card{ border-radius:16px !important; overflow:hidden !important; } html.nb-celular .premium-card img{ width:100% !important; height:126px !important; object-fit:cover !important; } html.nb-celular .premium-body{ padding:10px !important; } html.nb-celular .premium-tag{ font-size:7px !important; letter-spacing:.5px !important; } html.nb-celular .premium-body h3{ font-size:16px !important; line-height:1.05 !important; margin-top:7px !important; overflow:hidden !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; } html.nb-celular .premium-body p{ font-size:8.5px !important; line-height:1.3 !important; min-height:34px !important; max-height:35px !important; overflow:hidden !important; margin-top:6px !important; } html.nb-celular .premium-footer{ margin-top:8px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:6px !important; } html.nb-celular .premium-price{ font-size:13.5px !important; line-height:1 !important; white-space:nowrap !important; } html.nb-celular .add-btn{ width:30px !important; height:30px !important; min-width:30px !important; min-height:30px !important; flex:0 0 30px !important; border-radius:10px !important; font-size:18px !important; line-height:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; } /* ========================================================= PEDIDOS ========================================================= */ html.nb-celular .pedidos-premium, html.nb-celular .orders-page{ width:92% !important; max-width:92% !important; margin-left:auto !important; margin-right:auto !important; margin-bottom:48px !important; padding:24px 18px !important; border-radius:26px !important; } html.nb-celular .pedidos-header{ margin-bottom:20px !important; } html.nb-celular .pedidos-header h1{ font-size:42px !important; line-height:.98 !important; letter-spacing:-1px !important; } html.nb-celular .pedidos-header p{ margin-top:12px !important; font-size:14px !important; line-height:1.45 !important; } html.nb-celular .pedidos-consulta{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; margin-bottom:20px !important; } html.nb-celular .pedidos-consulta input, html.nb-celular .pedidos-consulta button{ width:100% !important; height:52px !important; border-radius:16px !important; } html.nb-celular .pedidos-consulta input{ font-size:15px !important; padding:0 16px !important; } html.nb-celular .pedidos-consulta button{ font-size:14px !important; } html.nb-celular .pedidos-lista{ gap:12px !important; } /* ========================================================= CARRINHO / CHECKOUT ========================================================= */ html.nb-celular .cart-premium-page, html.nb-celular .checkout-page{ width:92% !important; max-width:92% !important; margin-left:auto !important; margin-right:auto !important; margin-bottom:48px !important; display:grid !important; grid-template-columns:1fr !important; gap:16px !important; } html.nb-celular .cart-title-row{ gap:12px !important; margin-bottom:18px !important; } html.nb-celular .cart-title-icon{ width:48px !important; height:48px !important; border-radius:16px !important; font-size:22px !important; } html.nb-celular .cart-title-row h1{ font-size:38px !important; line-height:1 !important; } html.nb-celular .cart-title-row p{ font-size:13px !important; line-height:1.35 !important; } html.nb-celular .cart-back-btn{ height:38px !important; padding:0 12px !important; font-size:11px !important; border-radius:12px !important; } html.nb-celular .cart-item-premium{ display:grid !important; grid-template-columns:70px 1fr !important; gap:12px !important; padding:12px !important; padding-top:18px !important; border-radius:18px !important; position:relative !important; } html.nb-celular .cart-item-premium img{ width:70px !important; height:58px !important; border-radius:12px !important; grid-column:1 !important; grid-row:1 !important; } html.nb-celular .cart-item-premium .cart-item-name{ grid-column:2 !important; grid-row:1 !important; min-width:0 !important; padding-right:30px !important; } html.nb-celular .cart-item-name strong{ font-size:18px !important; } html.nb-celular .cart-item-name p{ font-size:11px !important; line-height:1.35 !important; } html.nb-celular .cart-item-premium > div:nth-of-type(2){ grid-column:1 !important; grid-row:2 !important; align-self:end !important; min-width:92px !important; } html.nb-celular .cart-item-premium > div:nth-of-type(3){ grid-column:2 !important; grid-row:2 !important; align-self:end !important; justify-self:start !important; margin-left:20px !important; } html.nb-celular .cart-item-premium > div:nth-of-type(4){ grid-column:1 / -1 !important; grid-row:3 !important; padding-top:12px !important; border-top:1px solid rgba(255,255,255,.06) !important; } html.nb-celular .cart-item-premium .qty-control{ gap:9px !important; } html.nb-celular .cart-item-premium .qty-control button{ width:42px !important; height:42px !important; min-width:42px !important; } html.nb-celular .cart-item-premium .remove-cart{ position:absolute !important; top:10px !important; right:10px !important; z-index:2 !important; display:flex !important; align-items:center !important; justify-content:center !important; width:32px !important; height:32px !important; padding:0 !important; border:1px solid rgba(255,90,90,.3) !important; border-radius:10px !important; background:rgba(255,70,70,.12) !important; color:#ff7777 !important; opacity:1 !important; font-size:21px !important; line-height:1 !important; } html.nb-celular #checkoutTabItens .checkout-summary-inline > .summary-title, html.nb-celular #checkoutTabItens .checkout-method-box > .summary-title{ width:100% !important; justify-content:center !important; text-align:center !important; } html.nb-celular #checkoutTabItens .checkout-summary-inline > .summary-title > span, html.nb-celular #checkoutTabItens .checkout-method-box > .summary-title > span{ display:none !important; } html.nb-celular #checkoutTabItens .checkout-summary-inline > .summary-title strong, html.nb-celular #checkoutTabItens .checkout-method-box > .summary-title strong{ width:100% !important; text-align:center !important; } html.nb-celular .summary-card, html.nb-celular .coupon-card, html.nb-celular .custom-cart-card, html.nb-celular .cart-form-card, html.nb-celular .secure-box{ border-radius:22px !important; padding:16px !important; } html.nb-celular .summary-total strong, html.nb-celular .checkout-summary-inline .summary-total strong, html.nb-celular .summary-card .summary-total strong{ font-size:20px !important; line-height:1 !important; } html.nb-celular .summary-total span{ font-size:12px !important; } /* ========================================================= PEDIDO CONCLUÍDO - CONTENÇÃO MOBILE ========================================================= */ html.nb-celular #paginaPedidoConcluido, html.nb-celular #pedidoConcluidoConteudo, html.nb-celular #paginaPedidoConcluido .pedido-final-page, html.nb-celular #paginaPedidoConcluido .pedido-final-card, html.nb-celular #paginaPedidoConcluido .pedido-final-grid, html.nb-celular #paginaPedidoConcluido .pedido-final-main, html.nb-celular #paginaPedidoConcluido .pedido-final-section, html.nb-celular #paginaPedidoConcluido .pedido-final-summary{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; } html.nb-celular #paginaPedidoConcluido{ overflow-x:hidden !important; } html.nb-celular #paginaPedidoConcluido .pedido-final-page{ width:calc(100% - 24px) !important; margin:88px auto 36px !important; } html.nb-celular #paginaPedidoConcluido .pedido-final-card{ overflow:hidden !important; border-radius:24px !important; } html.nb-celular #paginaPedidoConcluido .pedido-final-grid{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:14px !important; padding:12px !important; } html.nb-celular #paginaPedidoConcluido .pedido-final-section, html.nb-celular #paginaPedidoConcluido .pedido-final-summary{ padding:18px !important; overflow:hidden !important; } html.nb-celular #paginaPedidoConcluido .pedido-final-section-title{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:8px !important; width:100% !important; min-width:0 !important; } html.nb-celular #paginaPedidoConcluido .pedido-final-section-title > strong, html.nb-celular #paginaPedidoConcluido .pedido-final-section-title > span{ display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; } html.nb-celular #paginaPedidoConcluido .pedido-final-section-title > span{ font-size:13px !important; line-height:1.35 !important; overflow-wrap:anywhere !important; word-break:break-word !important; } html.nb-celular #paginaPedidoConcluido .pedido-final-info-grid{ grid-template-columns:minmax(0,1fr) !important; width:100% !important; min-width:0 !important; } html.nb-celular #paginaPedidoConcluido .pedido-final-info-grid div, html.nb-celular #paginaPedidoConcluido .pedido-final-info-grid strong, html.nb-celular #paginaPedidoConcluido .pedido-final-itens, html.nb-celular #paginaPedidoConcluido .pedido-final-endereco, html.nb-celular #paginaPedidoConcluido .pedido-final-status, html.nb-celular #paginaPedidoConcluido .pedido-final-status div{ max-width:100% !important; min-width:0 !important; overflow-wrap:anywhere !important; word-break:break-word !important; } html.nb-celular #paginaPedidoConcluido .pedido-final-total{ gap:10px !important; } html.nb-celular #paginaPedidoConcluido .pedido-final-total strong{ min-width:0 !important; font-size:28px !important; white-space:nowrap !important; } /* ========================================================= ADMIN MOBILE ========================================================= */ html.nb-celular .admin-modal{ padding:8px !important; } html.nb-celular .admin-panel{ width:94vw !important; height:82vh !important; max-height:82vh !important; margin:74px auto 0 !important; border-radius:18px !important; overflow:hidden !important; } html.nb-celular .admin-close{ top:8px !important; right:8px !important; width:28px !important; height:28px !important; font-size:18px !important; } html.nb-celular .admin-login{ width:88% !important; margin:58px auto 0 !important; padding:18px !important; border-radius:18px !important; } html.nb-celular .admin-login h2{ font-size:24px !important; } html.nb-celular .admin-login p{ font-size:12px !important; margin-bottom:12px !important; } html.nb-celular .admin-login input{ height:40px !important; border-radius:11px !important; font-size:13px !important; margin-bottom:10px !important; } html.nb-celular .admin-login button, html.nb-celular .admin-btn{ height:40px !important; border-radius:11px !important; font-size:12px !important; padding:0 12px !important; } html.nb-celular .admin-area{ grid-template-columns:1fr !important; } html.nb-celular .admin-sidebar{ height:54px !important; min-height:54px !important; padding:8px !important; gap:6px !important; overflow-x:auto !important; } html.nb-celular .admin-sidebar button{ min-width:96px !important; height:34px !important; border-radius:10px !important; font-size:11px !important; padding:0 8px !important; text-align:center !important; } html.nb-celular .admin-content{ padding:12px !important; max-height:calc(82vh - 54px) !important; overflow:auto !important; } html.nb-celular .admin-header{ gap:8px !important; margin-bottom:12px !important; } html.nb-celular .admin-header h2{ font-size:22px !important; } html.nb-celular .admin-header p{ font-size:11px !important; } html.nb-celular .admin-grid{ grid-template-columns:1fr !important; gap:10px !important; } html.nb-celular .admin-card{ padding:12px !important; border-radius:16px !important; } html.nb-celular .admin-card h3{ font-size:15px !important; margin-bottom:10px !important; } html.nb-celular .admin-field{ margin-bottom:9px !important; } html.nb-celular .admin-field label{ font-size:10px !important; margin-bottom:4px !important; } html.nb-celular .admin-field input, html.nb-celular .admin-field select, html.nb-celular .admin-field textarea{ min-height:36px !important; border-radius:10px !important; font-size:12px !important; padding:0 10px !important; } html.nb-celular .admin-field textarea{ min-height:62px !important; padding:9px !important; } html.nb-celular .admin-table th{ font-size:9px !important; padding:0 6px !important; } html.nb-celular .admin-table td{ font-size:10px !important; padding:8px 6px !important; } html.nb-celular .admin-mini-btn{ padding:6px 7px !important; font-size:10px !important; border-radius:8px !important; } /* ========================================================= AJUSTES PARA TELAS MUITO PEQUENAS ========================================================= */ @media(max-width:380px){ html.nb-celular .topbar{ height:72px !important; min-height:72px !important; padding:7px 12px !important; } html.nb-celular #logoMini, html.nb-celular .logo-area img#logoMini{ width:56px !important; height:56px !important; min-width:56px !important; border-radius:16px !important; } html.nb-celular .logo-area{ gap:8px !important; } html.nb-celular .logo-text strong{ font-size:12px !important; } html.nb-celular #statusLojaTopo{ font-size:10px !important; } html.nb-celular .header-actions{ gap:8px !important; } html.nb-celular .cart-mobile-btn, html.nb-celular .menu-mobile-btn{ width:40px !important; height:40px !important; min-width:40px !important; } html.nb-celular .hero{ height:360px !important; margin-top:72px !important; } html.nb-celular .hero-content{ width:68% !important; max-width:68% !important; padding-top:20px !important; } html.nb-celular .hero-content h1{ font-size:35px !important; } html.nb-celular .hero-content p{ font-size:12px !important; } html.nb-celular .hero-info span{ font-size:8.8px !important; } html.nb-celular .premium-products-row{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; } html.nb-celular .product-image-wrap{ height:100px !important; } html.nb-celular .product-content h3{ font-size:13.5px !important; } html.nb-celular .product-price{ font-size:11.5px !important; } html.nb-celular .product-add, html.nb-celular .product-add-btn{ width:24px !important; height:24px !important; min-width:24px !important; font-size:14px !important; } html.nb-celular .premium-grid{ grid-template-columns:1fr 1fr !important; } html.nb-celular .premium-card img{ height:112px !important; } } /* ========================================================= HOTFIX MOBILE - HOME / CARRINHO / PEDIDOS ========================================================= */ @media (max-width:900px){ /* Status correto: aberto verde, fechado vermelho */ html.nb-celular #statusLojaTopo{ color:#32d74b !important; } html.nb-celular #statusLojaTopo:not(:empty){ font-weight:800 !important; } html.nb-celular #statusLojaTopo{ text-transform:uppercase !important; } html.nb-celular #statusLojaTopo[style*="255"], html.nb-celular #statusLojaTopo[style*="red"]{ color:#ff453a !important; } /* Corrige setas cortadas dos produtos */ html.nb-celular .preview-nav{ width:30px !important; height:30px !important; min-width:30px !important; border-radius:50% !important; font-size:17px !important; z-index:30 !important; overflow:visible !important; } html.nb-celular .preview-nav.left{ left:-6px !important; } html.nb-celular .preview-nav.right{ right:-6px !important; } html.nb-celular .premium-preview{ overflow:visible !important; } html.nb-celular .delivery-section{ overflow:hidden !important; } /* Centraliza título do carrinho */ html.nb-celular #paginaCarrinho .checkout-title{ width:100% !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; gap:10px !important; padding:0 18px !important; margin:26px auto 22px !important; } html.nb-celular #paginaCarrinho .checkout-title-icon{ margin:0 auto !important; } html.nb-celular #paginaCarrinho .checkout-title h1, html.nb-celular #paginaCarrinho .checkout-title p{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; } /* Meus pedidos menor e sem estourar lateral */ html.nb-celular .pedidos-premium{ width:92% !important; max-width:92% !important; padding:22px 18px !important; border-radius:24px !important; overflow:hidden !important; } html.nb-celular .pedidos-header h1{ font-size:42px !important; line-height:.95 !important; letter-spacing:-1px !important; } html.nb-celular .pedidos-header p{ font-size:14px !important; line-height:1.45 !important; } html.nb-celular .pedidos-consulta{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; } html.nb-celular .pedidos-consulta input, html.nb-celular .pedidos-consulta button{ width:100% !important; max-width:100% !important; } html.nb-celular .pedido-premium-card{ max-width:100% !important; overflow:hidden !important; } html.nb-celular .pedido-dados{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; } html.nb-celular .pedido-info{ min-width:0 !important; overflow:hidden !important; } html.nb-celular .pedido-info strong{ font-size:13px !important; word-break:break-word !important; } } /* Corrige bolinha do status no mobile */ @media (max-width:900px){ html.nb-celular #statusLojaTopo::before{ color:#32d74b !important; } html.nb-celular #statusLojaTopo[style*="ff453a"]::before, html.nb-celular #statusLojaTopo[style*="255, 69, 58"]::before, html.nb-celular #statusLojaTopo[style*="red"]::before{ color:#ff453a !important; } } /* ========================================================= MOBILE - PEDIDOS: TEMPO REAL + PROGRESSO DO STATUS ========================================================= */ @media (max-width:900px){ /* Afasta "Atualizado em tempo real" do código do pedido */ html.nb-celular .pedido-premium-top, html.nb-celular .pedido-card-header, html.nb-celular .pedido-status-header{ display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:14px !important; } html.nb-celular .pedido-premium-id, html.nb-celular .pedido-codigo, html.nb-celular .pedido-id{ max-width:68% !important; word-break:break-word !important; } html.nb-celular .pedido-tempo-real, html.nb-celular .pedido-atualizado, html.nb-celular .tempo-real-texto{ max-width:90px !important; text-align:right !important; font-size:10px !important; line-height:1.25 !important; color:rgba(255,255,255,.42) !important; flex-shrink:0 !important; } } /* ========================================================= MOBILE - CORREÇÃO MEUS PEDIDOS SEM SOBREPOSIÇÃO ========================================================= */ @media (max-width:900px){ html.nb-celular #paginaPedidos{ min-height:auto !important; height:auto !important; overflow:visible !important; } html.nb-celular .pedidos-premium{ display:block !important; height:auto !important; min-height:auto !important; max-height:none !important; overflow:visible !important; padding-bottom:28px !important; } html.nb-celular .pedidos-header{ position:relative !important; display:block !important; height:auto !important; min-height:auto !important; margin-bottom:18px !important; overflow:visible !important; } html.nb-celular .pedidos-header h1{ display:block !important; position:relative !important; font-size:42px !important; line-height:.98 !important; margin:0 0 12px !important; white-space:normal !important; } html.nb-celular .pedidos-header p{ display:block !important; position:relative !important; margin:0 !important; font-size:14px !important; line-height:1.45 !important; } html.nb-celular .pedidos-consulta{ position:relative !important; display:grid !important; grid-template-columns:1fr !important; gap:12px !important; margin:18px 0 20px !important; height:auto !important; min-height:auto !important; overflow:visible !important; } html.nb-celular .pedidos-consulta input, html.nb-celular .pedidos-consulta button{ position:relative !important; width:100% !important; max-width:100% !important; height:52px !important; min-height:52px !important; } html.nb-celular #historicoPedidos{ position:relative !important; display:grid !important; gap:14px !important; width:100% !important; max-height:none !important; overflow:visible !important; margin-top:8px !important; } html.nb-celular .pedido-premium-card{ position:relative !important; width:100% !important; max-width:100% !important; overflow:hidden !important; } } /* ========================================================= MOBILE - CARD PEDIDOS DEFINITIVO ========================================================= */ @media (max-width:900px){ html.nb-celular .pedido-premium-top{ display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:10px !important; width:100% !important; } html.nb-celular .pedido-premium-id{ width:100% !important; max-width:100% !important; font-size:24px !important; line-height:1.08 !important; word-break:normal !important; overflow-wrap:anywhere !important; } html.nb-celular .pedido-status{ align-self:flex-end !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:96px !important; margin:0 0 16px 0 !important; padding:8px 14px !important; border-radius:999px !important; background:rgba(34,197,94,.16) !important; border:1px solid rgba(34,197,94,.38) !important; color:#22c55e !important; font-size:12px !important; font-weight:900 !important; line-height:1 !important; position:relative !important; white-space:nowrap !important; } html.nb-celular .pedido-status::after{ position:absolute !important; top:100% !important; right:0 !important; margin-top:6px !important; width:130px !important; color:rgba(255,255,255,.42) !important; font-size:10px !important; font-weight:700 !important; line-height:1.15 !important; text-align:right !important; white-space:normal !important; } html.nb-celular .pedido-tempo-real, html.nb-celular .pedido-atualizado, html.nb-celular .tempo-real-texto{ display:none !important; } } /* ========================================================= MOBILE - LIMPAR DUPLICAÇÃO DO TEMPO REAL ========================================================= */ @media (max-width:900px){ html.nb-celular .pedido-premium-top{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:8px !important; width:100% !important; } html.nb-celular .pedido-premium-id{ width:100% !important; max-width:100% !important; font-size:24px !important; line-height:1.05 !important; overflow-wrap:anywhere !important; word-break:normal !important; } html.nb-celular .pedido-status{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:96px !important; margin:0 !important; padding:8px 14px !important; border-radius:999px !important; background:rgba(34,197,94,.16) !important; border:1px solid rgba(34,197,94,.38) !important; color:#22c55e !important; font-size:12px !important; font-weight:900 !important; line-height:1 !important; white-space:nowrap !important; } html.nb-celular .pedido-status::after, html.nb-celular .pedido-premium-top::after{ content:none !important; display:none !important; } html.nb-celular .pedido-tempo-real, html.nb-celular .pedido-atualizado, html.nb-celular .tempo-real-texto{ display:none !important; } } /* ========================================================= MOBILE - STATUS + TEMPO REAL (VERSÃO FINAL) ========================================================= */ @media (max-width:900px){ /* Mata TODOS os textos antigos */ .pedido-premium-top::after, .pedido-status::before{ content:none !important; display:none !important; } .pedido-tempo-real, .pedido-atualizado, .tempo-real-texto{ display:none !important; } .pedido-status{ position:relative !important; margin-right:145px !important; } .pedido-status::after{ content:"Atualizado em tempo real" !important; position:absolute !important; left:calc(100% + 10px) !important; top:50% !important; transform:translateY(-50%) !important; display:block !important; width:auto !important; min-width:130px !important; white-space:nowrap !important; color:rgba(255,255,255,.42) !important; font-size:10px !important; font-weight:700 !important; line-height:1 !important; } } /* ========================================================= LOGIN ADMIN MODAL - MOBILE SITE PRINCIPAL ========================================================= */ @media (max-width:900px){ html.nb-celular #modalAdmin{ display:flex !important; align-items:center !important; justify-content:center !important; padding:24px !important; } html.nb-celular #modalAdmin .admin-panel{ width:100% !important; max-width:390px !important; min-height:auto !important; padding:36px 28px !important; border-radius:26px !important; background:linear-gradient(145deg,#141414,#080808) !important; border:1px solid rgba(255,255,255,.08) !important; box-shadow:0 30px 90px rgba(0,0,0,.55) !important; } html.nb-celular #modalAdmin .admin-panel::before{ content:""; display:block; width:88px; height:88px; margin:0 auto 22px; border-radius:18px; background: #fff url("../assets/logo-optimized.png") center/100% no-repeat !important; } html.nb-celular #modalAdmin .admin-login{ width:100% !important; padding:0 !important; background:transparent !important; border:none !important; box-shadow:none !important; } html.nb-celular #modalAdmin .admin-login h2{ text-align:center !important; font-size:34px !important; line-height:1 !important; margin-bottom:12px !important; } html.nb-celular #modalAdmin .admin-login p{ text-align:center !important; color:#bcbcbc !important; font-size:15px !important; margin-bottom:26px !important; } html.nb-celular #modalAdmin .admin-login input{ width:100% !important; height:54px !important; margin-bottom:12px !important; border-radius:12px !important; background:#eef3ff !important; color:#111 !important; padding:0 16px !important; } html.nb-celular #modalAdmin .admin-login button{ width:100% !important; height:54px !important; border-radius:12px !important; background:#f7a928 !important; color:#111 !important; font-weight:900 !important; } }