/* Ki Delivery — Cardápio: sheets e ficha do produto. Fatia contígua do frontend.css original (linhas 283–539); a ordem de carregamento preserva a cascata. Ver REFACTOR.md. */ /* -------------------------------------------------------------------------- Sheets (bottom sheets) -------------------------------------------------------------------------- */ .kid-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(15, 15, 18, .55); opacity: 0; transition: opacity .22s; } .kid-overlay.kid-show { opacity: 1; } .kid-sheet { position: fixed; left: 50%; bottom: 0; z-index: 60; transform: translate(-50%, 105%); width: min(100%, 560px); max-height: 92vh; max-height: 92dvh; background: #fff; border-radius: 24px 24px 0 0; display: flex; flex-direction: column; transition: transform .28s cubic-bezier(.32, .72, .28, 1); overflow: hidden; font-family: inherit; } .kid-sheet.kid-show { transform: translate(-50%, 0); } .kid-sheet--picker { max-height: 72vh; } /* Sheet coberta por outra (ex.: ficha do produto com o seletor de complemento por cima) não recebe toques: o toque atravessa para o overlay e fecha o seletor, em vez de reabrir o mesmo seletor e travar a tela. */ .kid-sheet--stacked { pointer-events: none; } /* Exceção: o X da ficha do produto continua tocável mesmo com o seletor aberto por cima — fecha o produto inteiro de uma vez. */ .kid-sheet--stacked .kid-sheet__close { pointer-events: auto; } /* Ficha do produto sobe quase até o topo, mas deixa uma faixa de overlay tocável para dar conta do "tocar fora para fechar" no celular. */ #kid-product-sheet { max-height: 94vh; max-height: 94dvh; } .kid-sheet__grab { width: 44px; height: 5px; border-radius: 999px; background: var(--kid-line); margin: 6px auto 2px; flex: 0 0 auto; } .kid-sheet__scroll { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; } /* Só a lista da sacola ganha fundo: é o que faz os cards brancos existirem visualmente. As etapas de dados e pagamento seguem em branco. */ .kid-sheet__scroll--cart { background: #fafafa; border-top: 1px solid var(--kid-line); } .kid-sheet__close { position: absolute; top: 14px; right: 14px; z-index: 5; width: 36px; height: 36px; border-radius: 50%; background: var(--kid-close-bg); color: transparent; font-size: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); } /* "Fechar" dos seletores (complemento/bairro) — texto puro, sem fundo. O padding é invisível e existe só para dar área de toque no celular. */ .kid-sheet__closetxt { position: absolute; top: 4px; right: 6px; z-index: 5; display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; padding: 0 14px; color: var(--kid-muted); font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; } .kid-sheet__closetxt:active { color: var(--kid-ink); } .kid-sheet--picker .kid-cart__title { padding-right: 76px; } /* "X" desenhado com dois traços para centralização perfeita (não depende do glifo ×). */ .kid-sheet__close::before, .kid-sheet__close::after, .kid-modal__close::before, .kid-modal__close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 15px; height: 2.5px; border-radius: 3px; background: #fff; } .kid-sheet__close::before, .kid-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); } .kid-sheet__close::after, .kid-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); } /* Produto */ .kid-prod__img { display: block; width: min(240px, calc(100% - 40px)); aspect-ratio: 1 / 1; height: auto; object-fit: var(--kid-card-fit, contain); object-position: center; margin: 12px auto 0; border-radius: 8px; flex: 0 0 auto; } .kid-prod__img--placeholder { display: flex; align-items: center; justify-content: center; font-size: 56px; background: var(--kid-surface); width: min(240px, calc(100% - 40px)); aspect-ratio: 1 / 1; height: auto; margin: 12px auto 0; border-radius: 8px; flex: 0 0 auto; } /* Troca da foto principal ao escolher um complemento. O fade curto evita o "pisca" seco da imagem nova entrando no lugar da anterior. */ .kid-prod__img--swap { animation: kid-hero-swap .22s ease-out; } @keyframes kid-hero-swap { from { opacity: .3; transform: scale(.97); } to { opacity: 1; transform: scale(1); } } .kid-prod__body { padding: 12px 20px 4px; } .kid-prod__name { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; } .kid-prod__desc { margin: 0 0 8px; font-size: 14px; color: var(--kid-muted); } .kid-prod__price { font-size: 17px; font-weight: 800; color: var(--kid-red); } .kid-group { padding: 12px 12px 4px; margin: 0 8px; border: 1.5px solid transparent; border-radius: 14px; transition: border-color .2s, background .2s; scroll-margin-top: 8px; } /* Grupo obrigatório não preenchido ao tentar adicionar */ .kid-group--error { border-color: var(--kid-red); background: var(--kid-red-tint); animation: kid-group-shake .45s ease; } .kid-group--error .kid-group__head { background: #fff; } .kid-group--error .kid-dropfield { border-color: var(--kid-red); background: #fff; } .kid-group__err { display: none; align-items: center; gap: 5px; margin: 0 2px 6px; font-size: 11.5px; font-weight: 700; color: var(--kid-red); } .kid-group--error .kid-group__err { display: flex; } @keyframes kid-group-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } @media (prefers-reduced-motion: reduce) { .kid-group--error, .kid-field--error { animation: none; } } .kid-group__head { display: flex; align-items: center; justify-content: space-between; background: var(--kid-surface); border-radius: 10px; padding: 10px 14px; margin-bottom: 4px; } .kid-group__name { font-size: 13.5px; font-weight: 800; } .kid-group__hint { font-size: 11.5px; font-weight: 600; color: var(--kid-muted); } .kid-group__hint--req { color: var(--kid-red); } .kid-opt, .kid-opt:hover, .kid-opt:focus, .kid-opt:focus-visible, .kid-opt:active { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 10px; text-align: left; background: transparent; color: var(--kid-ink); border: 0; border-bottom: 1px solid var(--kid-line); border-radius: 10px 10px 0 0; box-shadow: none; outline: none; text-decoration: none; transition: background .15s; } .kid-opt:last-child { border-bottom: 0; border-radius: 10px; } /* Selecionado: fundo clean, igual aos cards de pagamento */ .kid-opt--on, .kid-opt--on:hover, .kid-opt--on:focus, .kid-opt--on:active { background: var(--kid-red-tint); color: var(--kid-ink); } /* Miniatura da opção (ligada por complemento, no painel). O quadrado vazio existe para a opção sem foto: sem ele a lista fica com linhas tortas. */ .kid-opt__thumb { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; object-position: center; background: var(--kid-surface); display: block; } .kid-opt__thumb--empty { border: 1px solid var(--kid-line); } /* No campo fechado da lista suspensa a miniatura é menor: ali ela acompanha uma linha de texto, não uma opção inteira. */ .kid-dropfield .kid-opt__thumb { width: 34px; height: 34px; border-radius: 8px; } .kid-opt__name { flex: 1; font-size: 14.5px; font-weight: 600; } .kid-opt__price { font-size: 13px; font-weight: 700; color: var(--kid-muted); } .kid-opt__ctrl { width: 22px; height: 22px; flex: 0 0 auto; border: 2px solid #cfcfd4; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all .15s; } .kid-opt__ctrl--box { border-radius: 7px; } .kid-opt--on .kid-opt__ctrl { background: var(--kid-red); border-color: var(--kid-red); } .kid-opt--on .kid-opt__ctrl::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; } .kid-opt--on .kid-opt__ctrl--box::after { border-radius: 2px; } /* Complemento com quantidade — contador por opção. A linha é uma div (e não um botão) porque tem botões dentro. */ .kid-opt--qty { cursor: default; } .kid-opt__qty { flex: 0 0 auto; display: flex; align-items: center; } .kid-qty { display: flex; align-items: center; gap: 2px; border: 1.5px solid var(--kid-line); border-radius: 10px; background: #fff; overflow: hidden; } .kid-qty button { width: 34px; height: 34px; flex: 0 0 auto; font-size: 17px; font-weight: 700; line-height: 1; color: var(--kid-red); background: transparent; border: 0; display: flex; align-items: center; justify-content: center; } .kid-qty button:disabled { color: #cfcfd4; } .kid-qty__val { min-width: 24px; text-align: center; font-weight: 800; font-size: 14.5px; } .kid-qty__add { width: 34px; height: 34px; flex: 0 0 auto; font-size: 19px; font-weight: 700; line-height: 1; color: var(--kid-red); background: #fff; border: 1.5px solid var(--kid-line); border-radius: 10px; display: flex; align-items: center; justify-content: center; } .kid-qty__add:active { border-color: var(--kid-red); background: var(--kid-red-tint); } /* Variante com palavra no lugar do "+". A altura é a mesma do botão de símbolo — o que cresce é só a largura, e ela cresce até perto da largura do contador que vai substituir o botão, o que elimina o salto de layout no momento em que o cliente adiciona. */ .kid-qty__add--label { width: auto; padding: 0 12px; min-width: 76px; font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; } /* Complemento em lista suspensa — mesmo desenho do campo de bairro */ .kid-dropfield { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 12px 14px; margin: 2px 0 4px; text-align: left; border: 1.5px solid #dedee4; border-radius: 12px; font-size: 15px; background: var(--kid-surface); color: var(--kid-ink); transition: border-color .15s, background .15s; } .kid-dropfield:active { border-color: var(--kid-red); background: #fff; } .kid-dropfield__value { flex: 1; font-weight: 600; min-width: 0; } .kid-dropfield__value--empty { color: #9a9aa2; font-weight: 500; } .kid-dropfield__price { font-size: 12.5px; font-weight: 800; color: var(--kid-muted); } .kid-dropfield__chev { font-size: 20px; font-weight: 700; color: #9a9aa2; line-height: 1; flex: 0 0 auto; } .kid-note { padding: 14px 20px; } .kid-note textarea { width: 100%; min-height: 68px; resize: vertical; border: 1.5px solid var(--kid-line); border-radius: 12px; padding: 12px 14px; outline: none; } .kid-note textarea:focus { border-color: var(--kid-red); } .kid-prod__footer { flex: 0 0 auto; display: flex; gap: 12px; align-items: center; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--kid-line); background: #fff; } .kid-stepper { display: flex; align-items: center; gap: 2px; border: 1.5px solid var(--kid-line); border-radius: 12px; overflow: hidden; } .kid-stepper button { width: 42px; height: 46px; font-size: 20px; font-weight: 700; color: var(--kid-red); } .kid-stepper button:disabled { color: #cfcfd4; } .kid-stepper span { min-width: 28px; text-align: center; font-weight: 800; font-size: 15px; } .kid-btn { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: linear-gradient(135deg, var(--kid-red), var(--kid-red-dark)); color: var(--kid-btn-text); font-size: 15px; font-weight: 800; padding: 14px 18px; border-radius: 14px; box-shadow: 0 4px 12px rgba(15, 15, 18, .12); transition: transform .12s, opacity .15s; } .kid-btn { min-width: 0; } .kid-btn > span { white-space: nowrap; } .kid-btn:active { transform: scale(.97); } .kid-btn:disabled { opacity: .5; pointer-events: none; } .kid-btn--full { width: 100%; justify-content: center; } .kid-btn--ghost { background: var(--kid-red-tint); color: var(--kid-red-dark); box-shadow: none; } .kid-btn--wa { background: linear-gradient(135deg, #25d366, #1aa851); box-shadow: 0 4px 12px rgba(15, 15, 18, .12); } /* Descrição pequena da opção (ligada por complemento, no painel). A coluna flexível da linha vira uma pilha: nome e preço lado a lado em cima, descrição embaixo ocupando a largura inteira da coluna — da miniatura até o controle — para gastar menos linhas. O white-space e o overflow-wrap são explícitos de propósito: as linhas são