/* =============================================================
   Vitrine do Zap — Estilos do sistema (mobile-first)
   Paleta: verde WhatsApp institucional + tons neutros
   ============================================================= */

:root {
    --vz-primary: #128C7E;
    --vz-primary-dark: #0d6e63;
    --vz-accent: #25D366;
    --vz-bg: #f4f6f8;
    --vz-surface: #ffffff;
    --vz-text: #1f2937;
    --vz-muted: #6b7280;
    --vz-radius: 14px;
    --vz-shadow: 0 2px 12px rgba(16, 24, 40, .06);
}

body.vz-public,
body.vz-auth-body,
body.vz-admin-body {
    background: var(--vz-bg);
    color: var(--vz-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Bootstrap: cor primária do projeto */
.btn-primary {
    --bs-btn-bg: var(--vz-primary);
    --bs-btn-border-color: var(--vz-primary);
    --bs-btn-hover-bg: var(--vz-primary-dark);
    --bs-btn-hover-border-color: var(--vz-primary-dark);
    --bs-btn-active-bg: var(--vz-primary-dark);
    --bs-btn-active-border-color: var(--vz-primary-dark);
}
.btn-outline-primary {
    --bs-btn-color: var(--vz-primary);
    --bs-btn-border-color: var(--vz-primary);
    --bs-btn-hover-bg: var(--vz-primary);
    --bs-btn-hover-border-color: var(--vz-primary);
    --bs-btn-active-bg: var(--vz-primary);
    --bs-btn-active-border-color: var(--vz-primary);
}
.btn-link, a { color: var(--vz-primary); }
a:hover { color: var(--vz-primary-dark); }
.text-primary { color: var(--vz-primary) !important; }
.badge.text-bg-primary { background-color: var(--vz-primary) !important; }

.card {
    border: 1px solid rgba(16, 24, 40, .06);
    border-radius: var(--vz-radius);
    box-shadow: var(--vz-shadow);
}
.min-w-0 { min-width: 0; }

/* ------------------------- Cabeçalho ------------------------- */
.vz-header {
    background: var(--vz-surface);
    border-bottom: 1px solid rgba(16, 24, 40, .06);
}
.vz-brand-text { color: var(--vz-primary); }
.vz-city-chip {
    background: #eef7f5;
    color: var(--vz-primary);
    border: none;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    padding: .4rem .8rem;
    max-width: 52vw;
}
.vz-city-chip .vz-city-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 34vw;
}
@media (min-width: 992px) {
    .vz-city-chip, .vz-city-chip .vz-city-name { max-width: none; }
}

/* --------------------------- Hero ---------------------------- */
.vz-hero { background: linear-gradient(180deg, #eef7f5 0%, var(--vz-bg) 100%); }
.vz-hero-title { font-weight: 800; font-size: clamp(1.4rem, 4vw, 2.2rem); }

/* -------------------------- Busca ---------------------------- */
.vz-searchbox {
    position: relative;
    display: flex;
    gap: .5rem;
    max-width: 720px;
}
.vz-searchbox .form-control {
    border-radius: 12px;
    padding-left: 2.6rem;
    border: 1px solid rgba(16, 24, 40, .12);
}
.vz-searchbox .btn { border-radius: 12px; }
.vz-search-icon {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vz-muted);
    z-index: 5;
}
.vz-suggestions {
    max-width: 720px;
    background: var(--vz-surface);
    border-radius: 12px;
    box-shadow: var(--vz-shadow);
    margin-top: .35rem;
    overflow: hidden;
}
.vz-suggestions a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    text-decoration: none;
    color: var(--vz-text);
}
.vz-suggestions a:hover { background: #eef7f5; }

.vz-search-result {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.vz-search-result:hover {
    transform: translateY(-1px);
    box-shadow: 0 .45rem 1.25rem rgba(15, 23, 42, .08);
}
.vz-search-result .stretched-link::after { z-index: 1; }
.vz-search-result .badge,
.vz-search-result .small { position: relative; z-index: 2; }

/* ------------------------- Atalhos --------------------------- */
.vz-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .75rem;
}
.vz-shortcut { transition: transform .12s ease, box-shadow .12s ease; }
.vz-shortcut:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16, 24, 40, .1); }
.vz-shortcut-icon { font-size: 1.5rem; color: var(--vz-primary); }
.vz-shortcut span { color: var(--vz-text); }

/* Fitas roláveis (categorias, promoções, produtos) */
.vz-cat-scroll, .vz-card-scroll {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .4rem;
    scrollbar-width: thin;
}
.vz-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--vz-surface);
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: 999px;
    padding: .5rem .95rem;
    white-space: nowrap;
    text-decoration: none;
    color: var(--vz-text);
    font-size: .9rem;
    font-weight: 600;
}
.vz-cat-chip i { color: var(--vz-primary); }
.vz-cat-chip:hover { border-color: var(--vz-primary); color: var(--vz-primary); }

.vz-promo-card, .vz-product-card {
    min-width: 210px;
    max-width: 210px;
    flex-shrink: 0;
    transition: transform .12s ease;
}
.vz-promo-card:hover, .vz-product-card:hover { transform: translateY(-2px); }
.vz-product-img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    background-color: #f5f7f9;
    padding: 8px;
    border-radius: var(--vz-radius) var(--vz-radius) 0 0;
}
.vz-product-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2f5;
    color: #c3cdd5;
    font-size: 2rem;
}
.vz-2lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------------------- Estados vazios ----------------------- */
.vz-empty-icon { font-size: 2.2rem; color: #c3cdd5; display: inline-block; }
.vz-cta-card { background: linear-gradient(120deg, #eef7f5, #f6fbf7); }

.vz-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eef7f5;
    color: var(--vz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    overflow: hidden;
}
.vz-avatar-img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------- Perfil da empresa -------------------- */
.vz-cover {
    position: relative;
    height: 200px;
    background: linear-gradient(120deg, var(--vz-primary), var(--vz-accent));
    background-size: cover;
    background-position: center;
}
.vz-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(16, 24, 40, .45) 100%);
}
@media (min-width: 992px) { .vz-cover { height: 320px; } }
.vz-profile-head {
    margin-top: -72px;
    position: relative;
    z-index: 2;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
}
.vz-profile-head .card-body { padding: 1.1rem 1.25rem 1.25rem; }
.vz-profile-logo {
    width: 96px;
    height: 96px;
    margin-top: -44px;
    border-radius: 20px;
    background: #eef7f5;
    color: var(--vz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    flex-shrink: 0;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: var(--vz-shadow);
}
@media (min-width: 992px) { .vz-profile-logo { width: 116px; height: 116px; margin-top: -56px; } }
.vz-profile-logo img { width: 100%; height: 100%; object-fit: cover; }

/* Ações principais: no celular dividem a linha por igual, fáceis de tocar */
@media (max-width: 575.98px) {
    .vz-profile-head .vz-lead { flex: 1 1 calc(50% - .5rem); text-align: center; }
}

.vz-stars { color: #f5a524; }
.vz-stars .bi-star { color: #d8dde3; }
.vz-reply {
    background: #f2f7f6;
    border-left: 3px solid var(--vz-primary);
    border-radius: 8px;
    padding: .5rem .75rem;
    margin-top: .35rem;
}
.vz-promo-line { color: var(--vz-text); padding: .4rem 0; border-bottom: 1px dashed rgba(16,24,40,.1); }
.vz-promo-line:hover { color: var(--vz-primary); }

/* Estrelas clicáveis (formulário) */
.vz-rate { display: inline-flex; flex-direction: row-reverse; gap: .25rem; }
.vz-rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vz-rate label { color: #d8dde3; font-size: 1.4rem; cursor: pointer; }
.vz-rate label:hover, .vz-rate label:hover ~ label,
.vz-rate input:checked ~ label { color: #f5a524; }
.vz-rate input:focus-visible + label { outline: 3px solid rgba(18,140,126,.45); border-radius: 4px; }

/* ------------------- Navegação inferior ---------------------- */
.vz-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--vz-surface);
    border-top: 1px solid rgba(16, 24, 40, .08);
    display: flex;
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.vz-bottom-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: .5rem 0 .45rem;
    text-decoration: none;
    color: var(--vz-muted);
    font-size: .68rem;
    font-weight: 600;
}
.vz-bottom-item i { font-size: 1.25rem; }
.vz-bottom-item:hover, .vz-bottom-item.active { color: var(--vz-primary); }
.vz-main { min-height: 60vh; }
@media (max-width: 991.98px) {
    .vz-main { padding-bottom: 76px !important; }
}

/* ----------------------- Menu mobile ------------------------- */
.vz-menu-link {
    display: block;
    padding: .55rem .25rem;
    text-decoration: none;
    color: var(--vz-text);
    font-weight: 500;
    border-radius: 8px;
}
.vz-menu-link:hover { background: #eef7f5; color: var(--vz-primary); }

/* ------------------- Modal de cidades ------------------------ */
.vz-city-list { max-height: 46vh; overflow-y: auto; }
.vz-city-option {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: .7rem .75rem;
    border-radius: 10px;
    font-size: 1rem;
    color: var(--vz-text);
}
.vz-city-option:hover { background: #eef7f5; }

/* ---------------------- Autenticação ------------------------- */
.vz-auth-wrap { max-width: 520px; margin: 6vh auto; padding: 0 16px; }
.vz-auth-card { border-radius: 16px; }

/* -------------------------- Painéis -------------------------- */
.vz-admin-body { background: var(--vz-bg); }
.vz-sidebar {
    background: #0f3d38;
    color: #cfe6e2;
    height: 100vh;
    overflow-y: auto;      /* menu longo: rola sem esconder itens */
    scrollbar-width: thin;
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    transition: transform .2s ease;
    overflow-y: auto;
}
.vz-sidebar .vz-side-brand {
    color: #fff;
    font-weight: 700;
    padding: 1.1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}
.vz-side-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: #cfe6e2;
    padding: .6rem 1.2rem;
    text-decoration: none;
    font-size: .92rem;
    border-left: 3px solid transparent;
}
.vz-side-link:hover, .vz-side-link.active {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    border-left-color: var(--vz-accent);
}
.vz-side-section {
    padding: 1rem 1.2rem .35rem;
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8db8b1;
}
.vz-admin-content { margin-left: 250px; padding: 1.5rem; }
@media (max-width: 991.98px) {
    .vz-sidebar { transform: translateX(-100%); }
    .vz-sidebar.open { transform: translateX(0); }
    .vz-admin-content { margin-left: 0; padding: 1rem; }
}
.vz-topbar {
    background: var(--vz-surface);
    border-bottom: 1px solid rgba(16, 24, 40, .06);
    padding: .7rem 1rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}
@media (min-width: 992px) { .vz-topbar { margin-left: 250px; } }
.vz-stat-card .vz-stat-value { font-size: 1.5rem; font-weight: 800; }
.vz-stat-card .vz-stat-label { color: var(--vz-muted); font-size: .8rem; }
.vz-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: #eef7f5;
    color: var(--vz-primary);
    flex-shrink: 0;
}

/* Tabelas responsivas */
.vz-table-wrap { overflow-x: auto; border-radius: var(--vz-radius); }
.table > :not(caption) > * > * { padding: .7rem .75rem; }

/* Toasts */
.vz-toast-area {
    position: fixed;
    bottom: 84px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(92vw, 420px);
}
@media (min-width: 992px) {
    .vz-toast-area { bottom: 24px; right: 24px; left: auto; transform: none; }
}
.vz-toast {
    background: #111827;
    color: #fff;
    border-radius: 12px;
    padding: .8rem 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    font-size: .92rem;
    animation: vzToastIn .18s ease;
}
.vz-toast.success { background: var(--vz-primary); }
.vz-toast.danger { background: #b42318; }
@keyframes vzToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Skeleton loading */
.vz-skeleton {
    background: linear-gradient(90deg, #e9edf1 25%, #f4f6f8 50%, #e9edf1 75%);
    background-size: 200% 100%;
    animation: vzSkeleton 1.2s infinite;
    border-radius: 8px;
    min-height: 14px;
}
@keyframes vzSkeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Acessibilidade: foco visível e redução de animações */
:focus-visible { outline: 3px solid rgba(18, 140, 126, .45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Conteúdo institucional */
.vz-page-content p { color: var(--vz-text); line-height: 1.7; }

/* Rodapé */
.vz-footer { background: var(--vz-surface); border-top: 1px solid rgba(16, 24, 40, .06); }
.vz-footer a { text-decoration: none; color: var(--vz-muted); }
.vz-footer a:hover { color: var(--vz-primary); }

/* ---------------------------------------------------------
 * Botão flutuante do Samuca (Etapa 10.2)
 * --------------------------------------------------------- */
.vz-samuca-fab {
    position: fixed;
    right: 14px;
    bottom: 78px; /* acima da navegação inferior do celular */
    z-index: 1039;
    display: flex;
    align-items: center;
    gap: .55rem;
    background: var(--vz-primary, #128C7E);
    color: #fff;
    text-decoration: none;
    padding: .65rem .95rem;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(15, 61, 56, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.vz-samuca-fab:hover,
.vz-samuca-fab:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 61, 56, .45);
}
.vz-samuca-fab .bi-robot {
    font-size: 1.5rem;
    line-height: 1;
}
.vz-samuca-fab-label {
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .02em;
}
@media (min-width: 992px) {
    .vz-samuca-fab { bottom: 24px; right: 24px; }
}
/* Carrinho aberto: o robô sobe e encolhe para não cobrir o "Finalizar pedido" */
body.vz-cart-open .vz-samuca-fab { bottom: 148px; padding: .55rem; }
body.vz-cart-open .vz-samuca-fab-label { display: none; }

/* ---------------------- Status 24h (v11.6) ---------------------- */
.vz-story-circle { cursor: pointer; width: 76px; }
.vz-story-ring {
    display: inline-flex;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(#f7b733, #fc4a1a, #12c2a9, #f7b733);
    animation: vz-story-spin 6s linear infinite;
}
.vz-story-ring img, .vz-story-solid {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
}
.vz-story-solid {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
}
.vz-story-label { color: var(--vz-text); font-size: .68rem; line-height: 1.1; }
@keyframes vz-story-spin { to { filter: hue-rotate(20deg); } }

.vz-story-viewer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(8, 12, 16, .96);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.vz-story-stage {
    position: relative;
    width: min(430px, 100vw);
    height: min(88vh, 764px);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vz-story-stage img { width: 100%; height: 100%; object-fit: contain; }
.vz-story-bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; }
.vz-story-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.vz-story-bars span i { display: block; height: 100%; width: 0; background: #fff; transition: width .1s linear; }
.vz-story-top { position: absolute; top: 22px; left: 14px; right: 14px; z-index: 3; color: #fff; display: flex; align-items: center; gap: 8px; }
.vz-story-bottom { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 18px 14px; color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.vz-story-tap { position: absolute; top: 0; bottom: 0; width: 34%; z-index: 2; }
.vz-story-close { position: absolute; top: 16px; right: 12px; z-index: 4; }

/* Story: segurar o dedo pausa — sem menu de salvar imagem nem seleção */
.vz-story-stage, .vz-story-stage img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.vz-story-stage img { pointer-events: none; -webkit-user-drag: none; }