/* FeiraFácil — estilos do app (separado do index.html). Ao mudar este arquivo, troque o ?v= no index.html. */
        .hide { display: none !important; }
        
        /* ESTILO APERFEIÇOADO DE BARRACAS EM DESTAQUE - REFORÇADO */
        .store-card.destacada, .card-destacado {
            border: 3px solid #f59e0b !important;
            background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%) !important;
            box-shadow: 0 12px 30px -5px rgba(245, 158, 11, 0.35), 0 8px 12px -6px rgba(245, 158, 11, 0.25) !important;
            position: relative;
        }

        @keyframes pulseGlow {
            0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.45); transform: scale(1); }
            50% { box-shadow: 0 0 28px rgba(245, 158, 11, 0.8); transform: scale(1.008); }
        }

        .badge-destaque-animado {
            animation: pulseGlow 2.5s infinite ease-in-out;
        }

        button, a, .transition-custom {
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Ajuste do mapa Leaflet */
        .leaflet-popup-content-wrapper {
            border-radius: 1rem !important;
            padding: 4px !important;
        }


        /* ================================================================
           FEIRAFÁCIL — TEMA ALINHADO AO LOGIN (dark glass verde)
           Mesma linguagem visual de login.html: fundo liso #0e1411 (sem
           brilhos nem pontinhos), cartões neutros, bordas translúcidas;
           o verde fica só para botões, itens ativos e status. Mantém IDs, eventos, funções e lógica.
           ================================================================ */
        :root {
            --ff-ink: 255,255,255;
            --ff-scheme: dark;
            --ff-bg-rgb: 14,20,17;
            --ff-s-rgb: 24,31,27;
            --ff-s1: #111814;
            --ff-s2: #1a211d;
            --ff-s3: #18211c;
            --ff-em-txt-0: #a7f3d0;
            --ff-gold-txt-3: #fbbf24;
            --ff-rose-txt: #fb7185;
            --ff-blue-txt: #93c5fd;
            --ff-purple-txt: #d8b4fe;
            --ff-bg: #0e1411;
            --ff-bg-2: #141b17;
            --ff-solid: #161d19;
            --ff-glass: rgba(var(--ff-ink),.045);
            --ff-glass-2: rgba(var(--ff-ink),.065);
            --ff-glass-3: rgba(var(--ff-ink),.10);
            --ff-line: rgba(var(--ff-ink),.10);
            --ff-line-soft: rgba(var(--ff-ink),.07);
            --ff-txt: rgb(var(--ff-ink));
            --ff-txt-2: rgba(var(--ff-ink),.82);
            --ff-txt-3: rgba(var(--ff-ink),.58);
            --ff-txt-4: rgba(var(--ff-ink),.40);
            --ff-txt-5: rgba(var(--ff-ink),.30);
            --ff-em: #10b981;
            --ff-em-2: #059669;
            --ff-em-3: #047857;
            --ff-em-txt: #6ee7b7;
            --ff-em-txt-2: #34d399;
            --ff-em-soft: rgba(16,185,129,.12);
            --ff-em-line: rgba(16,185,129,.28);
            --ff-gold-txt: #fcd34d;
            --ff-gold-txt-2: #fde68a;
            --ff-gold-soft: rgba(245,158,11,.10);
            --ff-gold-line: rgba(245,158,11,.40);
            --ff-radius-lg: 24px;
            --ff-shadow: 0 18px 40px rgba(0,0,0,.28);
        }

        /* ---------- BASE ---------- */
        html { background: var(--ff-bg); color-scheme: var(--ff-scheme); }
        body {
            font-family: 'Plus Jakarta Sans', sans-serif !important;
            background:
                var(--ff-bg) !important;
            background-attachment: fixed !important;
            color: var(--ff-txt) !important;
            letter-spacing: -0.01em;
            min-height: 100vh;
            overflow-wrap: break-word; /* nome comprido sem espaço não estoura a tela */
        }
        #appPrincipal { position: relative; z-index: 1; }
        button, input, select, textarea { font-family: inherit !important; }
        button, a { -webkit-tap-highlight-color: transparent; }
        ::selection { background: var(--ff-em) !important; color: #fff !important; }
        /* borda padrão do Tailwind (cinza claro) → translúcida */
        body *, body *::before, body *::after { border-color: var(--ff-line); }

        /* ---------- SUPERFÍCIES (cartões de vidro) ---------- */
        body .bg-white, body .bg-white\/95, body .bg-white\/80 { background-color: var(--ff-glass) !important; }
        body .bg-slate-50, body .bg-slate-50\/50, body .bg-slate-50\/70, body .bg-slate-50\/80 { background-color: rgba(var(--ff-ink),.035) !important; }
        body .bg-slate-100, body .bg-slate-200\/80 { background-color: var(--ff-glass-2) !important; }
        body .bg-slate-300 { background-color: rgba(var(--ff-ink),.16) !important; }
        body .hover\:bg-slate-100:hover, body .hover\:bg-slate-200:hover { background-color: var(--ff-glass-3) !important; }
        body .bg-slate-800, body .bg-slate-800\/90 { background-color: rgba(var(--ff-ink),.06) !important; }
        body .bg-slate-900, body .bg-slate-900\/90 { background-color: rgba(0,0,0,.35) !important; border: 1px solid var(--ff-line); }
        body .hover\:bg-slate-800:hover, body .hover\:bg-slate-900:hover { background-color: rgba(0,0,0,.5) !important; }

        /* Cartões principais: raio e borda como no login */
        #appPrincipal .rounded-3xl.bg-white,
        #appPrincipal .rounded-3xl.bg-slate-50 {
            border: 1px solid var(--ff-line) !important;
            box-shadow: var(--ff-shadow) !important;
        }
        #appPrincipal main > div > .rounded-3xl { border-radius: 24px !important; }

        /* Sombras claras → sombras profundas */
        body .shadow-xs, body .shadow-sm { box-shadow: 0 6px 18px rgba(0,0,0,.18) !important; }
        body .shadow-md, body .shadow-lg { box-shadow: 0 14px 32px rgba(0,0,0,.28) !important; }
        body .shadow-xl, body .shadow-2xl { box-shadow: 0 24px 56px rgba(0,0,0,.40) !important; }

        /* ---------- TEXTOS ---------- */
        body .text-slate-900, body .text-slate-800 { color: var(--ff-txt) !important; }
        body .text-slate-700 { color: var(--ff-txt-2) !important; }
        body .text-slate-600 { color: var(--ff-txt-3) !important; }
        body .text-slate-500 { color: rgba(var(--ff-ink),.50) !important; }
        body .text-slate-400 { color: var(--ff-txt-4) !important; }
        body .text-slate-300 { color: var(--ff-txt-5) !important; }
        body .hover\:text-slate-600:hover { color: rgba(var(--ff-ink),.75) !important; }
        body .hover\:text-slate-800:hover { color: rgb(var(--ff-ink)) !important; }

        body .text-emerald-900, body .text-emerald-800 { color: var(--ff-em-txt-0) !important; }
        body .text-emerald-700 { color: var(--ff-em-txt) !important; }
        body .text-emerald-600, body .text-emerald-500 { color: var(--ff-em-txt-2) !important; }
        body .group:focus-within .group-focus-within\:text-emerald-600 { color: var(--ff-em-txt-2) !important; }

        body .text-amber-950, body .text-amber-900, body .text-amber-800 { color: var(--ff-gold-txt-2) !important; }
        body .text-amber-700, body .text-amber-600 { color: var(--ff-gold-txt) !important; }
        body .text-rose-800 { color: var(--ff-rose-txt) !important; }
        body .text-rose-600 { color: var(--ff-rose-txt) !important; }
        body .text-blue-800 { color: var(--ff-blue-txt) !important; }
        body .text-purple-800 { color: var(--ff-purple-txt) !important; }

        /* ---------- BORDAS ---------- */
        body .border-slate-100 { border-color: var(--ff-line-soft) !important; }
        body .border-slate-200, body .border-slate-200\/80, body .border-slate-300 { border-color: var(--ff-line) !important; }
        body .border-emerald-100, body .border-emerald-100\/80,
        body .border-emerald-200, body .border-emerald-200\/60, body .border-emerald-200\/80 { border-color: var(--ff-em-line) !important; }
        body .border-emerald-300 { border-color: rgba(16,185,129,.40) !important; }
        body .border-emerald-500, body .border-emerald-500\/80, body .border-emerald-600 { border-color: rgba(16,185,129,.65) !important; }
        body .hover\:border-emerald-300:hover, body .hover\:border-emerald-400:hover { border-color: rgba(16,185,129,.55) !important; }
        body .border-amber-200, body .border-amber-300 { border-color: rgba(245,158,11,.30) !important; }
        body .border-amber-400, body .border-amber-400\/80, body .border-amber-500 { border-color: var(--ff-gold-line) !important; }
        body .border-rose-200 { border-color: rgba(244,63,94,.30) !important; }
        body .hover\:border-rose-300:hover { border-color: rgba(244,63,94,.5) !important; }
        body .border-white { border-color: var(--ff-bg) !important; }

        /* ---------- FUNDOS COLORIDOS SUAVES ---------- */
        body .bg-emerald-50, body .bg-emerald-50\/50, body .bg-emerald-50\/80 { background-color: var(--ff-em-soft) !important; }
        body .bg-emerald-100 { background-color: rgba(16,185,129,.18) !important; }
        body .bg-emerald-600\/10 { background-color: rgba(16,185,129,.12) !important; }
        body .hover\:bg-emerald-50:hover { background-color: rgba(16,185,129,.16) !important; }
        body .hover\:bg-emerald-100:hover, body .hover\:bg-emerald-600\/20:hover { background-color: rgba(16,185,129,.22) !important; }
        body .hover\:bg-emerald-200:hover { background-color: rgba(16,185,129,.28) !important; }
        body .bg-amber-50, body .bg-amber-50\/40, body .bg-amber-50\/80 { background-color: var(--ff-gold-soft) !important; }
        body .bg-amber-100, body .bg-amber-100\/80 { background-color: rgba(245,158,11,.16) !important; }
        body .hover\:bg-amber-100:hover { background-color: rgba(245,158,11,.22) !important; }
        body .bg-rose-100 { background-color: rgba(244,63,94,.16) !important; }
        body .hover\:bg-rose-50:hover { background-color: rgba(244,63,94,.12) !important; }
        body .bg-blue-100 { background-color: rgba(59,130,246,.18) !important; }
        body .bg-purple-100 { background-color: rgba(168,85,247,.18) !important; }

        /* ---------- BOTÃO PRIMÁRIO (igual ao "Entrar na feira") ---------- */
        body .bg-emerald-600 { background: linear-gradient(135deg, #10b981, #059669) !important; }
        body .bg-emerald-600:hover, body .hover\:bg-emerald-700:hover { background: linear-gradient(135deg, #059669, #047857) !important; }
        body button.bg-emerald-600, body a.bg-emerald-600 {
            box-shadow: 0 8px 22px rgba(16,185,129,.32) !important;
            font-weight: 800 !important;
        }
        body button.bg-emerald-600:hover, body a.bg-emerald-600:hover { box-shadow: 0 12px 28px rgba(16,185,129,.45) !important; }
        body button.bg-emerald-600:active, body a.bg-emerald-600:active { transform: scale(.98); }
        body .bg-emerald-700 { background: rgba(16,185,129,.18) !important; border: 1px solid var(--ff-em-line); color: var(--ff-em-txt-0) !important; }
        body .hover\:bg-emerald-800:hover { background: rgba(16,185,129,.28) !important; }

        /* ---------- CAMPOS (iguais ao .input-field do login) ---------- */
        body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
        body select, body textarea {
            background: rgba(var(--ff-ink),.06) !important;
            border: 1px solid var(--ff-line) !important;
            border-radius: 14px !important;
            color: rgb(var(--ff-ink)) !important;
            font-weight: 500;
            transition: all .2s;
        }
        body input::placeholder, body textarea::placeholder { color: rgba(var(--ff-ink),.30) !important; }
        body input:not([type="checkbox"]):not([type="radio"]):focus, body select:focus, body textarea:focus {
            outline: none !important;
            border-color: rgba(16,185,129,.6) !important;
            background: rgba(var(--ff-ink),.07) !important;
            box-shadow: 0 0 0 3px rgba(16,185,129,.12) !important;
        }
        body input[readonly] { background: rgba(var(--ff-ink),.03) !important; color: rgba(var(--ff-ink),.6) !important; }
        body select option { background: var(--ff-solid); color: rgb(var(--ff-ink)); }
        body input[type="file"] {
            background: rgba(var(--ff-ink),.04) !important; border: 1px dashed rgba(var(--ff-ink),.16) !important;
            border-radius: 14px !important; color: rgba(var(--ff-ink),.55) !important;
        }
        body input[type="file"]::file-selector-button {
            background: rgba(16,185,129,.16); color: var(--ff-em-txt); border: 0; border-radius: 10px;
            padding: 8px 14px; margin-right: 12px; font-weight: 700; cursor: pointer;
        }
        body input[type="checkbox"], body input[type="radio"] { accent-color: var(--ff-em); }
        /* Rótulos de formulário no estilo do login */
        #appPrincipal label.block.uppercase { color: rgba(var(--ff-ink),.35) !important; letter-spacing: .06em !important; }

        /* ---------- TELA DE CARREGAMENTO ---------- */
        #loadingScreen {
            background:
                var(--ff-bg) !important;
        }
        #loadingScreen .text-lg.font-extrabold { font-weight: 900 !important; letter-spacing: -.02em !important; font-size: 22px !important; }

        /* ---------- CABEÇALHO ---------- */
        #appPrincipal > header {
            background: rgba(var(--ff-bg-rgb),.78) !important;
            color: rgb(var(--ff-ink)) !important;
            border-bottom: 1px solid rgba(var(--ff-ink),.07) !important;
            box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
            backdrop-filter: blur(20px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
            padding: 12px 16px !important;
            padding-top: max(12px, env(safe-area-inset-top)) !important;
        }
        #appPrincipal > header > div { max-width: 600px !important; }
        #appPrincipal > header h1 { color: rgb(var(--ff-ink)) !important; font-size: 17px !important; font-weight: 900 !important; letter-spacing: -.02em !important; }
        #appPrincipal > header h1 > span {
            width: 38px !important; height: 38px !important; border-radius: 13px !important;
            background: linear-gradient(135deg, #10b981, #059669) !important;
            box-shadow: 0 8px 24px rgba(16,185,129,.4) !important;
        }
        #appPrincipal > header button {
            background: rgba(var(--ff-ink),.06) !important;
            color: rgba(var(--ff-ink),.75) !important;
            border: 1px solid var(--ff-line) !important;
            min-height: 36px;
        }
        #appPrincipal > header button:hover { background: rgba(var(--ff-ink),.10) !important; color: rgb(var(--ff-ink)) !important; }
        /* Botão "Baixar app" no cabeçalho */
        #appPrincipal > header .ff-btn-app {
            background: linear-gradient(135deg, #10b981, #059669) !important;
            color: #fff !important; border: 0 !important;
            box-shadow: 0 6px 18px rgba(16,185,129,.35) !important;
            font-weight: 800 !important;
        }
        #appPrincipal > header .ff-btn-app:hover { background: linear-gradient(135deg, #059669, #047857) !important; color: #fff !important; }

        /* ---------- LARGURA / ESPAÇAMENTO ---------- */
        #appPrincipal main {
            max-width: 600px !important;
            padding: 18px 16px 110px !important;
            margin-left: auto !important; margin-right: auto !important;
        }
        #appPrincipal main > div { animation: ffFadeIn .24s ease both; }
        @keyframes ffFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

        /* ---------- DESTAQUES VIP (ouro sobre fundo escuro) ---------- */
        body .from-amber-300.via-amber-200, body .from-amber-400.via-amber-300 {
            background: linear-gradient(135deg, rgba(245,158,11,.20) 0%, rgba(245,158,11,.06) 50%, rgba(251,191,36,.14) 100%) !important;
            border: 1px solid var(--ff-gold-line) !important;
            box-shadow: 0 0 0 1px rgba(245,158,11,.06) inset, 0 20px 48px rgba(0,0,0,.35) !important;
            color: var(--ff-gold-txt-2) !important;
        }
        body .from-amber-300.via-amber-200 { border-radius: 24px !important; padding: 16px !important; min-height: 0 !important; }
        body .from-amber-300.via-amber-200 > button {
            width: 34px !important; height: 34px !important;
            background: rgba(var(--ff-bg-rgb),.7) !important; color: var(--ff-gold-txt-2) !important; border: 1px solid var(--ff-gold-line) !important;
        }
        body .from-amber-300.via-amber-200 h3 { font-size: 12px !important; letter-spacing: .10em !important; }
        .badge-destaque-animado { animation: none !important; }
        body .from-white.via-amber-50 {
            background: linear-gradient(160deg, rgba(var(--ff-bg-rgb),.75), rgba(var(--ff-s-rgb),.65)) !important;
            border: 1px solid var(--ff-gold-line) !important;
            box-shadow: 0 0 22px rgba(245,158,11,.12) !important;
            border-radius: 20px !important; padding: 16px !important;
        }
        body .from-amber-50\/90.via-white {
            background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(var(--ff-ink),.03) 60%) !important;
            border: 1px solid var(--ff-gold-line) !important;
            box-shadow: 0 0 18px rgba(245,158,11,.10) !important;
        }
        .store-card.destacada, .card-destacado {
            border: 1px solid var(--ff-gold-line) !important;
            background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(var(--ff-ink),.03)) !important;
            box-shadow: 0 0 18px rgba(245,158,11,.12) !important;
        }

        /* ---------- CARROSSEL "BARRACAS EM DESTAQUE" ---------- */
        .ff-dest {
            position: relative; padding: 16px; border-radius: 24px;
            background: linear-gradient(145deg, rgba(245,158,11,.14) 0%, rgba(var(--ff-ink),.03) 55%, rgba(245,158,11,.08) 100%);
            border: 1px solid rgba(245,158,11,.32);
            box-shadow: 0 0 0 1px rgba(245,158,11,.05) inset, 0 18px 40px rgba(0,0,0,.28);
        }
        .ff-dest-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
        .ff-dest-titulo { display: flex; align-items: center; gap: 11px; min-width: 0; }
        .ff-dest-coroa {
            flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, var(--ff-gold-txt-3), #d97706); color: #3b2503; font-size: 15px;
            box-shadow: 0 6px 18px rgba(245,158,11,.35);
        }
        .ff-dest-titulo h3 { margin: 0; color: rgb(var(--ff-ink)) !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: -.02em; line-height: 1.2; }
        .ff-dest-titulo p { margin: 2px 0 0; color: var(--ff-gold-txt-2); opacity: .75; font-size: 11.5px; font-weight: 600; }
        .ff-dest-nav { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(var(--ff-bg-rgb),.55); border: 1px solid rgba(var(--ff-ink),.08); }
        .ff-dest-nav button {
            width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent; color: var(--ff-gold-txt-2); cursor: pointer; font-size: 11px;
            display: flex; align-items: center; justify-content: center;
        }
        .ff-dest-nav button:hover { background: rgba(245,158,11,.16); }
        #carrosselIndicador { min-width: 34px; text-align: center; font-size: 11px; font-weight: 800; color: rgba(var(--ff-ink),.7); font-variant-numeric: tabular-nums; }

        .ff-dest-palco { touch-action: pan-y; }
        .ff-dest-card {
            display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center;
            padding: 14px; border-radius: 18px; cursor: pointer;
            background: rgba(var(--ff-bg-rgb),.62); border: 1px solid rgba(var(--ff-ink),.08);
            transition: border-color .2s, transform .2s;
            animation: ffDestEntra .35s cubic-bezier(.2,.8,.2,1) both;
        }
        .ff-dest-card.is-vip { border-color: rgba(245,158,11,.30); }
        .ff-dest-card:hover { border-color: rgba(245,158,11,.55); }
        .ff-dest-card:active { transform: scale(.99); }
        .ff-dest-card:focus-visible { outline: 2px solid var(--ff-gold-txt-3); outline-offset: 2px; }
        @keyframes ffDestEntra { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

        .ff-dest-foto {
            width: 76px; height: 76px; border-radius: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center;
            background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.30); color: var(--ff-gold-txt-3); font-size: 26px;
        }
        .ff-dest-card.is-vip .ff-dest-foto { box-shadow: 0 0 0 3px rgba(245,158,11,.14); }
        .ff-dest-foto img { width: 100%; height: 100%; object-fit: cover; }
        .ff-dest-info { min-width: 0; }
        .ff-dest-tags { display: flex; gap: 6px; margin-bottom: 5px; }
        .ff-tag-vip, .ff-tag-status {
            display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
            font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
        }
        .ff-tag-vip { background: linear-gradient(135deg, var(--ff-gold-txt-3), #d97706); color: #3b2503; }
        .ff-tag-status.aberta { background: rgba(16,185,129,.16); color: var(--ff-em-txt); }
        .ff-tag-status.fechada { background: rgba(var(--ff-ink),.08); color: rgba(var(--ff-ink),.5); }
        .ff-dest-info h4 {
            margin: 0; color: rgb(var(--ff-ink)) !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.25; letter-spacing: -.02em;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .ff-dest-dono { margin: 3px 0 0; color: rgba(var(--ff-ink),.5); font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ff-dest-dono i { font-size: 9px; margin-right: 3px; opacity: .7; }
        .ff-dest-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 7px; }
        .ff-dest-meta span { display: inline-flex; align-items: center; gap: 5px; color: rgba(var(--ff-ink),.65); font-size: 11px; font-weight: 600; }
        .ff-dest-meta i { font-size: 10px; color: var(--ff-gold-txt-3); }
        .ff-dest-meta span:nth-child(3) i { color: var(--ff-em-txt-2); }
        .ff-dest-cta {
            grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
            padding: 12px 14px; border-radius: 13px; margin-top: 2px;
            background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-size: 13px; font-weight: 800;
            box-shadow: 0 8px 20px rgba(16,185,129,.28);
        }
        .ff-dest-card:hover .ff-dest-cta i { transform: translateX(3px); }
        .ff-dest-cta i { transition: transform .2s; font-size: 12px; }

        .ff-dest-pontos { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
        .ff-dest-pontos:empty { display: none; }
        .ff-dest-pontos button {
            width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
            background: rgba(var(--ff-ink),.22); transition: all .25s;
        }
        .ff-dest-pontos button.ativo { width: 20px; background: var(--ff-gold-txt-3); }
        .ff-dest-vazio { text-align: center; padding: 22px 10px; color: rgba(var(--ff-ink),.45); font-size: 12.5px; font-weight: 600; }
        .ff-dest-vazio i { font-size: 22px; color: rgba(245,158,11,.6); margin-bottom: 8px; display: block; }
        @media (min-width: 640px) {
            .ff-dest-card { grid-template-columns: 88px 1fr auto; }
            .ff-dest-foto { width: 88px; height: 88px; }
            .ff-dest-cta { grid-column: auto; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 16px; text-align: center; max-width: 120px; line-height: 1.2; font-size: 12px; }
        }

        /* ---------- PAINEL FEIRANTE / ADMIN ---------- */
        body .from-slate-800.to-slate-900 {
            background: linear-gradient(145deg, var(--ff-solid), var(--ff-bg)) !important;
            border: 1px solid var(--ff-line) !important;
            box-shadow: var(--ff-shadow) !important;
        }
        #visãoAdmin > div:nth-child(2) { background: rgba(var(--ff-ink),.05) !important; border-radius: 16px !important; padding: 6px !important; }

        /* ---------- SUCESSO ---------- */
        #telaSucessoPedido { border: 1px solid var(--ff-line) !important; border-radius: 28px !important; padding: 28px 20px !important; }
        #telaSucessoPedido h2 { font-size: 22px !important; letter-spacing: -.03em !important; font-weight: 900 !important; }

        /* ---------- PEDIDOS / CONVERSAS / CHAT ---------- */

        /* ---------- PERFIL (enxuto: topo + seções que abrem ao tocar) ---------- */
        .ff-perfil-topo { display: flex; align-items: center; gap: 16px; padding: 6px 4px 2px; }
        .ff-perfil-foto {
            position: relative; flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            background: rgba(var(--ff-ink),.06); border: 1px solid var(--ff-line); color: var(--ff-em-txt); font-size: 28px;
        }
        .ff-perfil-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
        .ff-perfil-foto-cam {
            position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: var(--ff-em-2); color: #fff; font-size: 11px; border: 2px solid var(--ff-bg);
        }
        .ff-perfil-nome { min-width: 0; }
        .ff-perfil-nome h2 { margin: 0; color: rgb(var(--ff-ink)); font-size: 20px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-perfil-nome p { margin: 3px 0 0; color: var(--ff-txt-4); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        .ff-pendencia { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 18px; background: var(--ff-gold-soft); border: 1px solid rgba(245,158,11,.30); }
        .ff-pendencia > i { flex: 0 0 auto; color: var(--ff-gold-txt-3); font-size: 17px; }
        .ff-pendencia strong { display: block; color: var(--ff-gold-txt-2); font-size: 13px; font-weight: 800; }
        .ff-pendencia span { display: block; margin-top: 1px; color: rgba(var(--ff-ink),.55); font-size: 11.5px; line-height: 1.4; }
        .ff-pendencia button { flex: 0 0 auto; border: 0; border-radius: 11px; padding: 9px 13px; cursor: pointer; background: #f59e0b; color: #1f1300; font-size: 12px; font-weight: 800; }

        /* Lista: as linhas ficam separadas por 1px (só entre as que aparecem) */
        .ff-perfil-lista { display: flex; flex-direction: column; gap: 1px; overflow: hidden; border-radius: 20px; background: var(--ff-line-soft); border: 1px solid var(--ff-line); }
        .ff-perfil-lista > * { background: var(--ff-bg-2); }
        .ff-sec { scroll-margin-top: 84px; }
        .ff-sec > summary, .ff-linha {
            list-style: none; display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 16px;
            cursor: pointer; text-align: left; border: 0; color: rgb(var(--ff-ink));
        }
        .ff-sec > summary::-webkit-details-marker { display: none; }
        a.ff-linha { text-decoration: none; }
        .ff-sec > summary:focus-visible, .ff-linha:focus-visible { outline: 2px solid var(--ff-em-txt-2); outline-offset: -2px; }
        .ff-sec-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(var(--ff-ink),.06); color: var(--ff-em-txt); font-size: 14px; }
        .ff-sec-txt { flex: 1; min-width: 0; }
        .ff-sec-txt strong { display: block; color: rgb(var(--ff-ink)); font-size: 14px; font-weight: 800; }
        .ff-sec-txt small { display: block; margin-top: 2px; color: var(--ff-txt-4); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-sec-seta { color: var(--ff-txt-5); font-size: 12px; transition: transform .2s; }
        .ff-sec[open] .ff-sec-seta { transform: rotate(180deg); }
        .ff-sec-corpo, .ff-pilha { display: flex; flex-direction: column; gap: 14px; }
        .ff-sec-corpo { padding: 2px 16px 18px; }
        .ff-sec-corpo label { display: block; color: var(--ff-txt-3); font-size: 12px; font-weight: 700; }
        .ff-sec-corpo label em { font-style: normal; font-weight: 500; color: var(--ff-txt-5); }
        .ff-sec-corpo label input, .ff-sec-corpo label select { display: block; width: 100%; margin-top: 6px; padding: 13px 14px; font-size: 14px; }
        .ff-sec-salvar {
            width: 100%; min-height: 48px; border: 0; border-radius: 14px; cursor: pointer; color: #fff; font-size: 14px; font-weight: 800;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            background: linear-gradient(135deg, #10b981, #059669);
        }
        .ff-sec-salvar:hover { background: linear-gradient(135deg, #059669, #047857); }
        .ff-sec-salvar:disabled { opacity: .6; cursor: wait; }
        .ff-sec-nota { margin: 0; color: var(--ff-txt-3); font-size: 12px; line-height: 1.5; }
        .ff-sec-nota.ff-centro { text-align: center; color: var(--ff-txt-5); font-size: 11px; }
        .ff-esgotado .ff-thumb, .ff-esgotado .ff-preco { opacity: .45; filter: grayscale(1); }
        .ff-tag-acabou { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(244,63,94,.14); color: var(--ff-rose-txt); font-size: 10.5px; font-weight: 800; vertical-align: 2px; }
        .ff-btn-acabou { flex: none; height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--ff-line); background: rgba(var(--ff-ink),.05); color: var(--ff-txt-2); font-size: 11.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
        .ff-btn-acabou.voltou { border-color: rgba(16,185,129,.45); color: var(--ff-em-txt); background: transparent; }
        .ff-btn-acabou:disabled { opacity: .5; }
        .ff-atalho-repetir { box-sizing: border-box; cursor: default; overflow: hidden; }
        .ff-atalho-repetir .ff-btn-sec { flex: 0 0 auto; width: auto; min-height: 38px; padding: 0 14px; font-size: 12.5px; }
        /* ---------- HORÁRIO DE FUNCIONAMENTO ---------- */
        .ff-horarios { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--ff-ink),.04); border: 1px solid var(--ff-line); }
        .ff-horarios > span { color: var(--ff-txt-3); font-size: 12px; font-weight: 700; }
        .ff-horarios > span em { font-style: normal; font-weight: 500; color: var(--ff-txt-5); }
        .ff-hor-linha { display: flex; align-items: center; gap: 8px; }
        .ff-hor-dia { display: flex !important; align-items: center; gap: 8px; width: 74px; flex: none; color: rgb(var(--ff-ink)) !important; font-size: 13px !important; cursor: pointer; }
        .ff-hor-dia input { width: 18px !important; height: 18px; margin: 0 !important; padding: 0 !important; flex: none; }
        .ff-hor-linha input[type="time"] { flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px; }
        .ff-hor-linha input[type="time"]:disabled { opacity: .35; }
        .ff-hor-linha small { color: var(--ff-txt-4); font-size: 12px; }
        .ff-horario-info { margin-top: 4px; color: var(--ff-txt-3); font-size: 12.5px; line-height: 1.45; }
        .ff-horario-info strong { color: var(--ff-em-txt); font-weight: 800; }
        .ff-horario-info strong.fechado { color: var(--ff-txt-2); }
        .ff-local { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--ff-ink),.04); border: 1px solid var(--ff-line); }
        .ff-local span { display: block; color: var(--ff-txt-3); font-size: 12px; font-weight: 700; }
        .ff-local strong { display: block; margin-top: 2px; color: rgb(var(--ff-ink)); font-size: 13px; font-weight: 700; }
        .ff-local button { flex: 0 0 auto; padding: 9px 12px; border-radius: 11px; border: 1px solid rgba(16,185,129,.45); background: transparent; color: var(--ff-em-txt); font-size: 12px; font-weight: 800; cursor: pointer; }
        .ff-mp-passos { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ff-txt-2); font-size: 12.5px; line-height: 1.45; }
        .ff-mp-btn { background: #009ee3 !important; color: #fff !important; }
        .ff-mp-btn:hover { background: #0086c3 !important; }
        .ff-ok { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; background: var(--ff-em-soft); }
        .ff-ok i { margin-top: 1px; color: var(--ff-em-txt); font-size: 20px; }
        .ff-ok p { margin: 0; color: var(--ff-txt-2); font-size: 12.5px; line-height: 1.5; }
        .ff-ok strong { display: block; color: rgb(var(--ff-ink)); font-size: 13.5px; }
        .ff-linha-sair .ff-sec-ico { background: rgba(244,63,94,.12); color: var(--ff-rose-txt); }
        .ff-linha-sair .ff-sec-txt strong { color: var(--ff-rose-txt); }

        /* Suporte: no app o botão flutuante cobria listas e o "Finalizar pedido".
           O chat abre por Perfil → Ajuda e suporte (data-suporte-ia); fechar é pela própria janela. */
        #toggle-iframe-btn { display: none !important; }

        /* ---------- COMPONENTES ENXUTOS (mesmo estilo do Perfil) ---------- */
        .ff-titulo-tela { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 2px 0; }
        .ff-titulo-tela h2 { margin: 0; color: rgb(var(--ff-ink)); font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
        .ff-titulo-tela h2.ff-titulo-chat { font-size: 15px; font-weight: 800; color: var(--ff-txt-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-secao-titulo { margin: 4px 4px 8px; color: var(--ff-txt-3); font-size: 13px; font-weight: 800; }
        .ff-btn-icone {
            flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
            border: 1px solid var(--ff-line); background: rgba(var(--ff-ink),.05); color: var(--ff-txt-2); font-size: 15px;
        }
        .ff-titulo-tela .ff-btn-icone { width: 38px; height: 38px; border-radius: 12px; font-size: 13px; }
        .ff-btn-icone.ativo { background: rgba(16,185,129,.9); border-color: transparent; color: #fff; }
        .ff-voltar {
            display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 11px; border-radius: 12px; cursor: pointer;
            border: 1px solid var(--ff-line); background: rgba(var(--ff-ink),.05); color: var(--ff-txt-2); font-size: 13px; font-weight: 700;
        }
        .ff-card { border-radius: 20px; background: var(--ff-bg-2); border: 1px solid var(--ff-line); padding: 14px; }
        .ff-card-mapa { padding: 6px; }

        /* ---------- INÍCIO: mapa no topo + resumo do feirante ---------- */
        .ff-mapa-topo { padding: 6px; }
        .ff-mapa-cab { display: flex; align-items: center; gap: 10px; padding: 6px 6px 10px 8px; }
        .ff-mapa-ponto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ff-em); box-shadow: 0 0 0 4px var(--ff-em-soft); }
        .ff-mapa-ponto.zero { background: var(--ff-txt-4); box-shadow: 0 0 0 4px rgba(var(--ff-ink),.06); }
        .ff-mapa-cab strong { display: block; color: rgb(var(--ff-ink)); font-size: 14px; font-weight: 800; line-height: 1.25; }
        .ff-mapa-cab small { display: block; color: var(--ff-txt-3); font-size: 12px; margin-top: 1px; line-height: 1.35; }
        .ff-mapa-cab small button { padding: 0; border: 0; background: none; color: var(--ff-em-txt); font-weight: 800; font-size: 12px; cursor: pointer; }
        .ff-mapa-min { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 11px; border: 1px solid var(--ff-line); background: rgba(var(--ff-ink),.05); color: var(--ff-txt-2); font-size: 12px; font-weight: 700; cursor: pointer; }
        .ff-mapa-min i { font-size: 11px; }
        .ff-mapa-topo.minimizado .ff-mapa-cab { padding-bottom: 6px; }
        .ff-mapa-topo.minimizado #mapaExplorarCorpo { display: none; }
        .ff-mapa-legenda { display: flex; gap: 14px; padding: 8px 8px 4px; color: var(--ff-txt-3); font-size: 11.5px; font-weight: 700; }
        .ff-mapa-legenda span { display: inline-flex; align-items: center; gap: 6px; }
        .ff-mapa-legenda i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
        .ff-pino { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; color: rgb(var(--ff-ink)); font-size: 12px; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
        .ff-pino.aberta { background: #059669; }
        .ff-pino.destaque { background: #f59e0b; }
        .ff-pino.fechada { background: #64748b; opacity: .75; }
        .ff-pino.voce { background: #2563eb; }
        .ff-hoje { display: block; width: 100%; text-align: left; padding: 14px; border-radius: 20px; cursor: pointer; background: var(--ff-em-soft); border: 1px solid var(--ff-em-line); color: inherit; }
        .ff-hoje-topo { display: flex; align-items: center; gap: 8px; color: var(--ff-txt-2); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
        .ff-hoje-topo small { margin-left: auto; color: var(--ff-txt-3); font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; }
        .ff-hoje-topo i { color: var(--ff-txt-4); font-size: 11px; }
        .ff-hoje-grade { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 10px; margin-top: 10px; }
        .ff-hoje-grade strong { display: block; color: rgb(var(--ff-ink)); font-size: 17px; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; }
        .ff-hoje-grade > span:first-child strong { color: var(--ff-em-txt); font-size: 20px; }
        .ff-hoje-grade > span { display: block; min-width: 0; }
        .ff-hoje-grade small { display: block; margin-top: 1px; color: var(--ff-txt-3); font-size: 11.5px; font-weight: 700; }
        .ff-hoje-rodape { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--ff-line-soft); color: var(--ff-txt-3); font-size: 12px; font-weight: 600; }

        /* ---------- ENTREGA PELA UBER ---------- */
        .ff-uber-caixa { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--ff-ink),.04); border: 1px solid var(--ff-line); }
        .ff-uber-caixa i.ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #000; color: #fff; font-size: 14px; }
        .ff-uber-caixa div { flex: 1; min-width: 0; }
        .ff-uber-caixa strong { display: block; color: rgb(var(--ff-ink)); font-size: 13.5px; font-weight: 800; }
        .ff-uber-caixa small { display: block; color: var(--ff-txt-3); font-size: 12px; margin-top: 1px; }
        .ff-uber-caixa button { flex: none; padding: 9px 12px; border-radius: 11px; border: 1px solid rgba(16,185,129,.45); background: transparent; color: var(--ff-em-txt); font-size: 12px; font-weight: 800; cursor: pointer; }
        .ff-seg button[disabled] { opacity: .35; cursor: not-allowed; }
        .ff-sem-tit { color: #38bdf8; }
        html[data-tema="claro"] .ff-sem-tit { color: #0369a1; }
        .ff-sem-btn { background: #0ea5e9 !important; color: #fff !important; }
        .ff-sem-btn:hover { background: #0284c7 !important; }
        .ff-seg button.ff-bloqueado { opacity: .45; cursor: not-allowed; }
        .ff-pedido-end { display: flex; gap: 8px; margin: 8px 0 0; color: var(--ff-txt-2); font-size: 12.5px; line-height: 1.45; }
        .ff-pedido-end i { margin-top: 3px; color: var(--ff-txt-4); font-size: 11px; }
        .ff-uber-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 9px 11px; border-radius: 12px; background: rgba(var(--ff-ink),.04); border: 1px solid var(--ff-line); color: var(--ff-txt-2); font-size: 12.5px; font-weight: 700; }
        .ff-uber-linha .marca { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 7px; border-radius: 6px; background: #000; color: #fff; font-size: 10.5px; font-weight: 900; letter-spacing: .02em; }
        .ff-uber-linha .acoes { margin-left: auto; display: flex; gap: 6px; }
        .ff-uber-linha a, .ff-uber-linha button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--ff-line); background: rgba(var(--ff-ink),.06); color: rgb(var(--ff-ink)); font-size: 12px; font-weight: 800; text-decoration: none; cursor: pointer; }
        .ff-uber-linha button.pri { background: rgba(16,185,129,.9); border-color: transparent; }
        .ff-uber-linha .erro { flex-basis: 100%; color: var(--ff-rose-txt); font-weight: 600; font-size: 11.5px; }
        .ff-uber-bloco { display: grid; gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--ff-line-soft); }
        .ff-uber-chave { display: flex !important; gap: 12px; align-items: flex-start; cursor: pointer; }
        .ff-uber-chave input { width: 20px !important; height: 20px; margin: 2px 0 0 !important; padding: 0 !important; accent-color: #10b981; flex: none; }
        .ff-uber-chave strong { display: block; color: rgb(var(--ff-ink)); font-size: 13.5px; }
        .ff-uber-chave small { display: block; margin-top: 2px; color: var(--ff-txt-3); font-size: 12px; font-weight: 500; line-height: 1.45; }

        /* ---------- AVISOS, TERMOS, PIX DIRETO, APARÊNCIA ---------- */
        .ff-ponto-novo { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: #f43f5e; vertical-align: middle; }
        .ff-termos-ov { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: flex-end; justify-content: center; background: rgba(4,6,5,.6); opacity: 0; transition: opacity .2s; }
        .ff-termos-ov.on { opacity: 1; }
        .ff-termos-caixa { width: 100%; max-width: 720px; height: 92vh; height: 92dvh; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; overflow: hidden; background: var(--ff-bg); border: 1px solid var(--ff-line); }
        .ff-termos-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ff-line); }
        .ff-termos-topo strong { color: rgb(var(--ff-ink)); font-size: 15px; }
        .ff-termos-topo button { height: 36px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--ff-line); background: rgba(var(--ff-ink),.06); color: rgb(var(--ff-ink)); font-weight: 800; font-size: 13px; cursor: pointer; }
        .ff-termos-caixa iframe { flex: 1; width: 100%; border: 0; background: var(--ff-bg); }
        .ff-pix-direto { display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: var(--ff-bg-2); border: 1px solid var(--ff-line); text-align: center; }
        .ff-pix-direto .valor { color: rgb(var(--ff-ink)); font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
        .ff-pix-direto .qr { width: 196px; height: 196px; margin: 0 auto; padding: 8px; border-radius: 16px; background: #fff; }
        .ff-pix-direto .qr img, .ff-pix-direto .qr canvas { width: 180px !important; height: 180px !important; }
        .ff-pix-direto .codigo { font-family: ui-monospace, monospace; font-size: 10.5px; line-height: 1.4; word-break: break-all; padding: 10px; border-radius: 12px; background: rgba(var(--ff-ink),.05); color: var(--ff-txt-2); user-select: all; }
        .ff-pix-direto .nota { color: var(--ff-txt-3); font-size: 12px; line-height: 1.5; }
        .ff-tema-seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; border-radius: 13px; background: rgba(var(--ff-ink),.05); border: 1px solid var(--ff-line); }
        .ff-tema-seg button { min-height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--ff-txt-3); font-size: 12.5px; font-weight: 800; cursor: pointer; }
        .ff-tema-seg button.ativo { background: rgba(16,185,129,.9); color: #fff; }
        .ff-pino.vip { width: 38px; height: 38px; font-size: 15px; border: 3px solid #fbbf24; box-shadow: 0 0 0 4px rgba(251,191,36,.35), 0 6px 14px rgba(0,0,0,.4); }
        .ff-pino.vip.aberta, .ff-pino.vip.destaque { background: #f59e0b; }
        .ff-pino .coroa { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); color: #fbbf24; font-size: 13px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
        .ff-pino { position: relative; }

        /* ---------- PERFIL DA BARRACA INCOMPLETO ---------- */
        .ff-check { padding: 16px; border-radius: 20px; background: var(--ff-gold-soft); border: 1px solid var(--ff-gold-line); }
        .ff-check-topo { display: flex; align-items: center; gap: 12px; }
        .ff-check-topo i.ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(245,158,11,.18); color: var(--ff-gold-txt-3); }
        .ff-check-topo strong { display: block; color: rgb(var(--ff-ink)); font-size: 14.5px; font-weight: 800; }
        .ff-check-topo small { display: block; color: var(--ff-txt-3); font-size: 12px; margin-top: 1px; }
        .ff-check-barra { height: 6px; margin: 12px 0 10px; border-radius: 99px; background: rgba(var(--ff-ink),.08); overflow: hidden; }
        .ff-check-barra span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f59e0b, #10b981); }
        .ff-check-lista { display: grid; gap: 6px; }
        .ff-check-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--ff-line); background: var(--ff-bg-2); color: rgb(var(--ff-ink)); font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
        .ff-check-item i.st { flex: none; width: 20px; text-align: center; }
        .ff-check-item.ok { opacity: .6; cursor: default; }
        .ff-check-item.ok i.st { color: var(--ff-em-txt-2); }
        .ff-check-item:not(.ok) i.st { color: var(--ff-gold-txt-3); }
        .ff-check-item .ir { margin-left: auto; color: var(--ff-txt-4); font-size: 11px; }

        /* Busca */
        .ff-busca { display: flex; gap: 8px; align-items: center; }
        .ff-busca input { width: 100%; height: 46px; padding: 0 14px 0 42px !important; font-size: 14px; border-radius: 14px !important; }
        .ff-busca input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
        .ff-busca-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ff-txt-5); font-size: 14px; pointer-events: none; }

        /* Chips (filtros e categorias) */
        .ff-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
        .ff-chip {
            flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
            border-radius: 12px; border: 1px solid var(--ff-line); background: rgba(var(--ff-ink),.05);
            color: var(--ff-txt-2); font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer;
        }
        .ff-chip i { font-size: 11px; opacity: .8; }
        .ff-chip.ativo { background: rgba(16,185,129,.9); border-color: transparent; color: #fff; }

        /* Lista agrupada (linhas separadas por 1px) */
        .ff-lista { display: flex; flex-direction: column; gap: 1px; overflow: hidden; border-radius: 20px; background: var(--ff-line-soft); border: 1px solid var(--ff-line); }
        .ff-lista > * { background: var(--ff-bg-2); }
        .ff-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; color: rgb(var(--ff-ink)); border: 0; }
        .ff-item[role="button"], button.ff-item, a.ff-item { cursor: pointer; }
        .ff-item[role="button"]:hover, button.ff-item:hover { background: var(--ff-s3); }
        .ff-item:focus-visible { outline: 2px solid var(--ff-em-txt-2); outline-offset: -2px; }
        .ff-item.destaque { box-shadow: inset 3px 0 0 #f59e0b; }
        .ff-item-cab { padding: 10px 14px; gap: 8px; color: var(--ff-txt-3); font-size: 12.5px; font-weight: 800; }
        .ff-item-cab i { color: var(--ff-em-txt); }
        .ff-thumb {
            position: relative; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; overflow: hidden;
            display: flex; align-items: center; justify-content: center;
            background: rgba(var(--ff-ink),.06); color: var(--ff-em-txt); font-size: 17px;
        }
        .ff-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .ff-thumb-ouro { background: rgba(245,158,11,.14); color: var(--ff-gold-txt-3); }
        /* chave aberta/fechada: o tema escuro sobrescrevia o verde da chave ligada */
        #toggleStatusBarracaFeirante:checked + div { background: #059669 !important; }
        .ff-thumb-g { width: 68px; height: 68px; border-radius: 20px; font-size: 24px; }
        .ff-item-txt { flex: 1; min-width: 0; }
        .ff-item-txt strong { display: block; color: rgb(var(--ff-ink)); font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-item-txt small { display: block; margin-top: 2px; color: var(--ff-txt-4); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-item-lado { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
        .ff-item-lado small { color: var(--ff-txt-5); font-size: 11px; }
        .ff-preco { color: var(--ff-em-txt-2); font-weight: 800; }
        .ff-coroa { color: var(--ff-gold-txt-3); font-size: .8em; }
        .ff-fechada { color: var(--ff-rose-txt) !important; font-weight: 700; }
        .ff-mais {
            flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; border: 0; cursor: pointer; color: #fff; font-size: 13px;
            display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #10b981, #059669);
        }
        .ff-fav { flex: 0 0 auto; width: 36px; height: 36px; border: 0; background: transparent; color: var(--ff-rose-txt); cursor: pointer; font-size: 15px; }
        .ff-icone-acao { flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--ff-txt-3); cursor: pointer; }
        .ff-icone-acao:hover { background: rgba(var(--ff-ink),.06); color: rgb(var(--ff-ink)); }
        .ff-icone-acao.perigo:hover { color: var(--ff-rose-txt); }
        .ff-vazio { margin: 0; padding: 26px 16px; text-align: center; color: var(--ff-txt-4); font-size: 13px; line-height: 1.5; }
        .ff-vazio > i { display: block; margin-bottom: 10px; font-size: 28px; color: var(--ff-txt-5); }

        /* Botões secundários e ações em linha */
        .ff-acoes { display: flex; gap: 8px; }
        .ff-btn-sec {
            flex: 1; min-height: 42px; padding: 0 14px; border-radius: 12px; cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center; gap: 7px;
            border: 1px solid var(--ff-line); background: rgba(var(--ff-ink),.05); color: var(--ff-txt-2); font-size: 13px; font-weight: 800;
        }
        .ff-btn-sec:hover { background: rgba(var(--ff-ink),.09); color: rgb(var(--ff-ink)); }
        .ff-btn-sec.pri { background: rgba(16,185,129,.9); border-color: transparent; color: #fff; }

        /* Tags de status */
        .ff-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; background: rgba(var(--ff-ink),.08); color: var(--ff-txt-3); }
        .ff-st-aguardando, .ff-st-pix_aguardando { background: rgba(245,158,11,.15); color: var(--ff-gold-txt); }
        .ff-st-confirmado { background: rgba(59,130,246,.16); color: var(--ff-blue-txt); }
        .ff-st-em_preparo { background: rgba(168,85,247,.16); color: var(--ff-purple-txt); }
        .ff-st-pronto { background: rgba(16,185,129,.16); color: var(--ff-em-txt); }
        .ff-st-cancelado { background: rgba(244,63,94,.15); color: var(--ff-rose-txt); }

        /* Segmentos (entrega, pagamento, abas do feirante) */
        .ff-seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; border-radius: 15px; background: rgba(var(--ff-ink),.05); border: 1px solid var(--ff-line); }
        .ff-seg-3 { grid-template-columns: repeat(3, 1fr); }
        .ff-seg button {
            min-height: 42px; padding: 6px 8px; border: 0; border-radius: 11px; background: transparent; cursor: pointer;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.2;
            color: var(--ff-txt-3); font-size: 13px; font-weight: 800;
        }
        .ff-seg button small { color: var(--ff-txt-5); font-size: 11px; font-weight: 600; }
        .ff-seg button.ativo { background: rgba(16,185,129,.9); color: #fff; }
        .ff-seg button.ativo small { color: rgba(var(--ff-ink),.8); }

        /* Formulários (mesmos campos do Perfil) */
        .ff-form { display: flex; flex-direction: column; gap: 14px; }
        .ff-form label { display: block; color: var(--ff-txt-3); font-size: 12px; font-weight: 700; }
        .ff-form label em { font-style: normal; font-weight: 500; color: var(--ff-txt-5); }
        .ff-form label input, .ff-form label select, .ff-form label textarea { display: block; width: 100%; margin-top: 6px; padding: 13px 14px; font-size: 14px; }
        .ff-form label textarea { resize: none; }
        .ff-form-titulo { margin: 0; color: rgb(var(--ff-ink)); font-size: 16px; font-weight: 900; }

        /* Carrinho */
        .ff-qtd-p { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; border-radius: 12px; background: rgba(var(--ff-ink),.06); border: 1px solid var(--ff-line); }
        .ff-qtd-p button { width: 34px; height: 36px; border: 0; background: transparent; color: var(--ff-em-txt); cursor: pointer; font-size: 11px; }
        .ff-qtd-p span { min-width: 20px; text-align: center; color: rgb(var(--ff-ink)); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
        .ff-resumo { display: flex; flex-direction: column; gap: 8px; }
        .ff-linha-valor { display: flex; justify-content: space-between; color: var(--ff-txt-3); font-size: 13.5px; font-variant-numeric: tabular-nums; }
        .ff-linha-valor.ff-total { padding-top: 8px; border-top: 1px solid var(--ff-line-soft); color: rgb(var(--ff-ink)); font-size: 17px; font-weight: 900; }
        .ff-resumo-sucesso { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; color: var(--ff-txt-3); font-size: 13px; }
        .ff-resumo-sucesso b { color: rgb(var(--ff-ink)); }

        /* Pedidos */
        .ff-pedido-topo { display: flex; align-items: center; gap: 12px; }
        .ff-pedido-itens { margin: 10px 0 0; color: var(--ff-txt-2); font-size: 13px; line-height: 1.45; }
        .ff-pedido-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
        .ff-pedido-rodape .ff-preco { font-size: 15px; }
        .ff-pedido-rodape .ff-acoes .ff-btn-sec { flex: 0 0 auto; min-height: 38px; font-size: 12.5px; }
        .ff-pedido-meta { margin: 4px 0 0; color: var(--ff-txt-4); font-size: 12.5px; }
        .ff-pedido-acoes { display: flex; gap: 8px; margin-top: 12px; }
        .ff-pedido-acoes .ff-btn-sec { flex: 0 0 auto; }
        .ff-select { flex: 1; min-width: 0; height: 40px; padding: 0 12px !important; font-size: 13px !important; border-radius: 12px !important; }

        /* Barraca */
        .ff-barraca-topo { display: flex; align-items: center; gap: 14px; }
        .ff-barraca-topo h2 { margin: 0; color: rgb(var(--ff-ink)); font-size: 20px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; }
        .ff-barraca-topo p { margin: 4px 0 0; color: var(--ff-txt-4); font-size: 12.5px; font-weight: 600; }
        .ff-avaliar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; background: rgba(var(--ff-ink),.04); border: 1px solid var(--ff-line); color: var(--ff-txt-3); font-size: 12.5px; font-weight: 700; }
        .ff-avaliar .ff-estrela { font-size: 18px; }

        /* Chat */
        .ff-chat { display: flex; flex-direction: column; height: calc(100vh - 252px); height: calc(100dvh - 252px); min-height: 300px; padding: 10px; }
        .ff-chat-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px; }
        .ff-msg { max-width: 82%; padding: 9px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.4; word-wrap: break-word; }
        .ff-msg small { display: block; margin-top: 3px; font-size: 10.5px; opacity: .6; }
        .ff-msg.minha { align-self: flex-end; background: #059669; color: #fff; border-bottom-right-radius: 5px; }
        .ff-msg.outra { align-self: flex-start; background: rgba(var(--ff-ink),.07); color: var(--ff-txt-2); border-bottom-left-radius: 5px; }
        .ff-chat-envio { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--ff-line-soft); }
        .ff-chat-envio input { flex: 1; min-width: 0; height: 44px; padding: 0 14px !important; font-size: 14px; }
        .ff-chat-envio button { flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 13px; cursor: pointer; color: #fff; background: linear-gradient(135deg, #10b981, #059669); }

        /* ---------- AVISO RÁPIDO (toast) ---------- */
        #ffToastCaixa { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 72px); z-index: 100002; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
        .ff-toast {
            pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 440px; width: max-content;
            padding: 11px 12px 11px 16px; border-radius: 14px; background: rgba(var(--ff-s-rgb),.96); border: 1px solid rgba(16,185,129,.35);
            color: var(--ff-em-txt-0); font-size: 13px; font-weight: 700; box-shadow: 0 14px 32px rgba(0,0,0,.45);
            transform: translateY(-12px); opacity: 0; transition: transform .25s, opacity .25s;
        }
        .ff-toast.on { transform: none; opacity: 1; }
        .ff-toast button { flex: 0 0 auto; border: 0; border-radius: 10px; padding: 7px 11px; background: rgba(16,185,129,.2); color: var(--ff-em-txt); font-weight: 800; font-size: 12px; cursor: pointer; }

        /* ---------- DETALHE DO PRODUTO (sheet) ---------- */
        .ff-sheet-ov { position: fixed; inset: 0; z-index: 100000; background: rgba(4,6,5,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .25s; }
        .ff-sheet-ov.on { opacity: 1; }
        .ff-sheet {
            position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
            background: linear-gradient(180deg, var(--ff-s2), var(--ff-bg)); border: 1px solid rgba(var(--ff-ink),.10); border-bottom: 0;
            border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px rgba(0,0,0,.5);
            transform: translateY(40px); transition: transform .3s cubic-bezier(.2,.8,.2,1);
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        .ff-sheet-ov.on .ff-sheet { transform: none; }
        @media (min-width: 640px) { .ff-sheet-ov { align-items: center; padding: 20px; } .ff-sheet { border-radius: 28px; border-bottom: 1px solid rgba(var(--ff-ink),.10); } }
        .ff-sheet-alca { position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(var(--ff-ink),.35); z-index: 2; }
        .ff-sheet-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 12px; border: 0; background: rgba(var(--ff-bg-rgb),.7); color: rgb(var(--ff-ink)); cursor: pointer; backdrop-filter: blur(6px); }
        .ff-sheet-foto { aspect-ratio: 4 / 3; max-height: 46vh; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(var(--ff-ink),.04); color: var(--ff-em-txt-2); font-size: 54px; border-radius: 28px 28px 0 0; }
        .ff-sheet-foto img { width: 100%; height: 100%; object-fit: cover; }
        .ff-sheet-foto.sem-foto { aspect-ratio: auto; height: 150px; }
        .ff-sheet-corpo { padding: 20px 20px 22px; }
        .ff-sheet-corpo h3 { margin: 0; color: rgb(var(--ff-ink)) !important; font-size: 21px !important; font-weight: 900 !important; letter-spacing: -.03em; line-height: 1.2; }
        .ff-sheet-preco { margin: 6px 0 0; color: var(--ff-em-txt-2); font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
        .ff-sheet-preco span { color: rgba(var(--ff-ink),.45); font-size: 13px; font-weight: 600; }
        .ff-sheet-desc { margin: 14px 0 0; color: rgba(var(--ff-ink),.72); font-size: 14px; line-height: 1.55; white-space: pre-line; }
        .ff-sheet-desc.vazia { color: rgba(var(--ff-ink),.38); font-style: italic; font-size: 13px; }
        .ff-sheet-barraca { width: 100%; margin-top: 18px; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(var(--ff-ink),.04); border: 1px solid rgba(var(--ff-ink),.08); color: rgba(var(--ff-ink),.5); cursor: pointer; text-align: left; }
        .ff-sheet-barraca:hover { border-color: rgba(16,185,129,.4); }
        .ff-sheet-barraca-foto { width: 42px; height: 42px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: rgba(16,185,129,.14); color: var(--ff-em-txt); }
        .ff-sheet-barraca-foto img { width: 100%; height: 100%; object-fit: cover; }
        .ff-sheet-barraca-txt { flex: 1; min-width: 0; }
        .ff-sheet-barraca-txt small { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(var(--ff-ink),.38); }
        .ff-sheet-barraca-txt strong { display: block; color: rgb(var(--ff-ink)); font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ff-sheet-acoes { display: flex; gap: 10px; margin-top: 18px; }
        .ff-qtd { display: flex; align-items: center; border-radius: 14px; background: rgba(var(--ff-ink),.06); border: 1px solid rgba(var(--ff-ink),.10); }
        .ff-qtd button { width: 44px; height: 52px; border: 0; background: transparent; color: var(--ff-em-txt); cursor: pointer; font-size: 13px; }
        .ff-qtd span { min-width: 26px; text-align: center; color: rgb(var(--ff-ink)); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
        .ff-sheet-add { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; min-height: 52px; border: 0; border-radius: 14px; cursor: pointer; background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 8px 24px rgba(16,185,129,.4); }
        .ff-sheet-add:hover { background: linear-gradient(135deg, #059669, #047857); }
        .ff-sheet-add span { font-variant-numeric: tabular-nums; }
        .ff-sheet-aviso { margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--ff-ink),.04); color: rgba(var(--ff-ink),.5); font-size: 13px; font-weight: 600; text-align: center; }

        /* ---------- CONFIRMAÇÃO ---------- */
        .ff-confirm-ov { align-items: center; padding: 20px; z-index: 100003; }
        .ff-confirm { width: 100%; max-width: 380px; padding: 22px 20px 18px; border-radius: 24px; background: linear-gradient(180deg, var(--ff-s2), var(--ff-bg)); border: 1px solid rgba(var(--ff-ink),.10); box-shadow: 0 30px 60px rgba(0,0,0,.5); transform: scale(.96); transition: transform .2s; }
        .ff-confirm-ov.on .ff-confirm { transform: none; }
        .ff-confirm p { margin: 0; color: rgba(var(--ff-ink),.85); font-size: 14.5px; line-height: 1.5; }
        .ff-confirm p b { color: rgb(var(--ff-ink)); }
        .ff-confirm-acoes { display: flex; gap: 8px; margin-top: 18px; }
        .ff-confirm-acoes button, .ff-confirm-acoes a { flex: 1; min-height: 46px; border-radius: 13px; font-weight: 800; font-size: 13.5px; cursor: pointer; border: 0; }
        .ff-confirm-nao { background: rgba(var(--ff-ink),.06); color: rgba(var(--ff-ink),.75); border: 1px solid rgba(var(--ff-ink),.10) !important; }
        .ff-confirm-sim { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 8px 20px rgba(16,185,129,.3); }

        /* ---------- ESTRELAS DE AVALIAÇÃO ---------- */
        .ff-estrela { border: 0; background: transparent; padding: 4px 3px; font-size: 20px; cursor: pointer; line-height: 1; transition: transform .15s; }
        .ff-estrela:hover { transform: scale(1.18); }
        .ff-estrela.text-amber-400\/50 { color: rgba(251,191,36,.5) !important; }

        /* ---------- PAINEL DO ADMIN ---------- */
        #visãoAdmin > div:nth-child(2) button.bg-white { background: rgba(16,185,129,.9) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(16,185,129,.3) !important; }
        .ff-badge-num { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: #f43f5e; color: #fff; font-size: 10px; font-weight: 800; }
        /* Admin: janelas de edição e listas */
        .ff-adm-sheet { padding: 0; }
        .ff-adm-form { padding: 26px 18px 18px; display: flex; flex-direction: column; gap: 11px; }
        .ff-adm-form h3 { margin: 0 44px 2px 0; color: rgb(var(--ff-ink)); font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
        .ff-adm-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
        .ff-adm-campo > span { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgba(var(--ff-ink),.5); }
        .ff-adm-campo input, .ff-adm-campo select, .ff-adm-campo textarea, .ff-adm-select-status {
            width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; font-size: 14px;
            background: rgba(var(--ff-ink),.05); border: 1px solid rgba(var(--ff-ink),.14); color: rgb(var(--ff-ink)); outline: none; }
        .ff-adm-campo textarea { min-height: 80px; resize: vertical; font-family: inherit; }
        .ff-adm-campo input:focus, .ff-adm-campo select:focus, .ff-adm-campo textarea:focus { border-color: rgba(16,185,129,.6); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
        .ff-adm-campo select option, .ff-adm-select-status option { color: #111; }
        .ff-adm-select-status { min-height: 38px; font-size: 12.5px; font-weight: 700; }
        .ff-adm-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .ff-adm-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(var(--ff-ink),.8); cursor: pointer; }
        .ff-adm-check input { width: 18px; height: 18px; accent-color: #10b981; }
        .ff-adm-foto-bloco { display: flex; align-items: center; gap: 14px; }
        .ff-adm-foto { width: 84px; height: 84px; flex: 0 0 auto; border-radius: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(var(--ff-ink),.06); color: var(--ff-em-txt); font-size: 28px; }
        .ff-adm-foto img, .ff-adm-mini img { width: 100%; height: 100%; object-fit: cover; }
        .ff-adm-foto-acoes { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
        .ff-adm-arquivo { display: inline-flex; align-items: center; gap: 7px; }
        .ff-adm-linha { display: flex; align-items: center; gap: 10px; }
        .ff-adm-mini { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(16,185,129,.12); color: var(--ff-em-txt); font-size: 16px; }
        .ff-adm-mini.redondo { border-radius: 50%; }
        .ff-adm-perigo { color: #f43f5e !important; border-color: rgba(244,63,94,.35) !important; }
        .ff-adm-opcoes { display: flex; flex-direction: column; gap: 8px; }
        .ff-adm-opcao { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid rgba(var(--ff-ink),.12); background: rgba(var(--ff-ink),.04); color: rgb(var(--ff-ink)); font-weight: 700; font-size: 14px; cursor: pointer; }
        .ff-adm-opcao input { accent-color: #10b981; width: 18px; height: 18px; }
        .ff-adm-opcao.perigo { color: #f43f5e; }
        .ff-adm-opcao:has(input:checked) { border-color: rgba(16,185,129,.6); background: rgba(16,185,129,.1); }
        .ff-rec-item { padding: 12px; border-radius: 16px; background: rgba(var(--ff-ink),.04); border: 1px solid rgba(var(--ff-ink),.08); display: flex; flex-direction: column; gap: 6px; }
        .ff-rec-item.aberto { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.05); }
        .ff-rec-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
        .ff-rec-nome { margin: 0; color: rgb(var(--ff-ink)); font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ff-rec-sub { margin: 0; color: rgba(var(--ff-ink),.5); font-size: 11.5px; line-height: 1.45; }
        .ff-rec-status { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; }
        .ff-rec-status.pend { background: rgba(245,158,11,.16); color: var(--ff-gold-txt); }
        .ff-rec-status.env { background: rgba(59,130,246,.18); color: var(--ff-blue-txt); }
        .ff-rec-status.ok { background: rgba(16,185,129,.16); color: var(--ff-em-txt); }
        .ff-rec-status.canc { background: rgba(var(--ff-ink),.08); color: rgba(var(--ff-ink),.5); }
        .ff-rec-acoes { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
        .ff-rec-btn { flex: 1; min-height: 40px; border: 0; border-radius: 12px; cursor: pointer; background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-weight: 800; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
        .ff-rec-btn-sec { min-height: 40px; padding: 0 14px; border-radius: 12px; cursor: pointer; background: rgba(var(--ff-ink),.05); border: 1px solid rgba(var(--ff-ink),.12); color: rgba(var(--ff-ink),.75); font-weight: 700; font-size: 12.5px; }
        .ff-codigo-grande { margin: 14px 0 8px !important; text-align: center; font-size: 34px !important; font-weight: 900; letter-spacing: .3em; color: var(--ff-em-txt) !important; font-variant-numeric: tabular-nums; }
        .ff-link-botao { display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
        .ff-aviso-reconstrucao { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.3); color: var(--ff-gold-txt); font-size: 12px; line-height: 1.45; }
        .ff-aviso-reconstrucao p { margin: 0; }

        /* ---------- REPETIR PEDIDO ---------- */

        /* ---------- PAINEL DE VENDAS ---------- */
        .ff-vendas { display: flex; flex-direction: column; gap: 12px; }
        .ff-vendas-periodos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
        .ff-vendas-periodos::-webkit-scrollbar { display: none; }
        .ff-vendas-periodos button { flex: 0 0 auto; padding: 8px 13px; border-radius: 11px; border: 1px solid rgba(var(--ff-ink),.10); background: rgba(var(--ff-ink),.04); color: rgba(var(--ff-ink),.6); font-size: 12px; font-weight: 700; cursor: pointer; }
        .ff-vendas-periodos button.ativo { background: rgba(16,185,129,.9); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,.3); }
        #conteudoVendas { display: flex; flex-direction: column; gap: 12px; }
        .ff-vendas-carregando, .ff-vendas-nada { color: rgba(var(--ff-ink),.45); font-size: 12.5px; font-weight: 600; text-align: center; padding: 18px 0; }
        .ff-vendas-vazio { text-align: center; padding: 26px 16px; color: rgba(var(--ff-ink),.5); font-size: 13px; }
        .ff-vendas-vazio i { font-size: 30px; color: rgba(16,185,129,.55); display: block; margin-bottom: 10px; }
        .ff-vendas-vazio button { margin-top: 12px; padding: 9px 16px; border-radius: 11px; border: 1px solid rgba(16,185,129,.4); background: transparent; color: var(--ff-em-txt); font-weight: 700; cursor: pointer; }
        .ff-vendas-hero { padding: 18px; border-radius: 20px; background: linear-gradient(145deg, rgba(16,185,129,.18), rgba(16,185,129,.04)); border: 1px solid rgba(16,185,129,.28); }
        .ff-vendas-hero p { margin: 0; color: rgba(var(--ff-ink),.55); font-size: 12px; font-weight: 600; }
        .ff-vendas-areceber { display: block; margin-top: 6px; color: rgba(var(--ff-ink),.6); font-size: 12px; font-weight: 600; line-height: 1.35; }
        .ff-pix-espera { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(245,158,11,.12); color: var(--ff-gold-txt); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
        .ff-pix-espera i { margin-top: 2px; }
        .ff-vendas-hero strong { display: block; margin-top: 4px; color: rgb(var(--ff-ink)); font-size: 30px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
        .ff-vendas-aberto { margin-top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; border: 0; background: rgba(245,158,11,.14); color: var(--ff-gold-txt); font-size: 11.5px; font-weight: 800; cursor: pointer; }
        .ff-vendas-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .ff-vendas-kpis div { padding: 12px; border-radius: 16px; background: rgba(var(--ff-ink),.04); border: 1px solid rgba(var(--ff-ink),.08); min-width: 0; }
        .ff-vendas-kpis span { display: block; color: rgba(var(--ff-ink),.45); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
        .ff-vendas-kpis strong { display: block; margin-top: 4px; color: rgb(var(--ff-ink)); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ff-vendas-card { padding: 14px; border-radius: 18px; background: rgba(var(--ff-ink),.04); border: 1px solid rgba(var(--ff-ink),.08); }
        .ff-vendas-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .ff-vendas-card-head h4 { margin: 0; color: rgb(var(--ff-ink)) !important; font-size: 13px !important; font-weight: 800 !important; }
        .ff-vendas-link { border: 0; background: transparent; color: var(--ff-em-txt); font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 4px 0; }
        .ff-grafico { position: relative; padding-top: 16px; }
        .ff-grafico svg { width: 100%; height: 160px; display: block; overflow: visible; }
        .ff-grafico-topo { position: absolute; top: 0; left: 0; color: rgba(var(--ff-ink),.4); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
        .ff-grafico .grade { stroke: rgba(var(--ff-ink),.08); stroke-width: 1; vector-effect: non-scaling-stroke; }
        .ff-grafico .marca { fill: #059669; transition: fill .15s; pointer-events: none; }
        .ff-grafico .barra.ativa .marca, .ff-grafico .barra:hover .marca { fill: #10b981; }
        .ff-grafico .alvo { fill: transparent; cursor: pointer; }
        .ff-grafico .barra.ativa .alvo { fill: rgba(var(--ff-ink),.04); }
        .ff-grafico .eixo { fill: rgba(var(--ff-ink),.4); font-size: 9px; font-weight: 600; text-anchor: middle; }
        .ff-grafico-tip { position: absolute; top: -6px; z-index: 3; pointer-events: none; padding: 8px 10px; border-radius: 10px; background: var(--ff-bg); border: 1px solid rgba(var(--ff-ink),.14); box-shadow: 0 10px 24px rgba(0,0,0,.45); white-space: nowrap; }
        .ff-grafico-tip b { display: block; color: rgba(var(--ff-ink),.55); font-size: 10.5px; font-weight: 700; }
        .ff-grafico-tip span { display: block; color: rgb(var(--ff-ink)); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
        .ff-grafico-tip small { color: rgba(var(--ff-ink),.5); font-size: 10.5px; }
        .ff-vendas-tabela { margin-top: 10px; max-height: 240px; overflow: auto; }
        .ff-vendas-tabela table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
        .ff-vendas-tabela th { text-align: left; color: rgba(var(--ff-ink),.45); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 4px; border-bottom: 1px solid rgba(var(--ff-ink),.10); }
        .ff-vendas-tabela td { color: rgba(var(--ff-ink),.8); padding: 7px 4px; border-bottom: 1px solid rgba(var(--ff-ink),.05); }
        .ff-vendas-tabela td:last-child, .ff-vendas-tabela th:last-child { text-align: right; }
        .ff-vendas-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
        .ff-vendas-top li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(var(--ff-ink),.05); }
        .ff-vendas-top li:last-child { border-bottom: 0; }
        .ff-vendas-pos { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(16,185,129,.14); color: var(--ff-em-txt); font-size: 11px; font-weight: 800; }
        .ff-vendas-top-nome { flex: 1; min-width: 0; color: rgb(var(--ff-ink)); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ff-vendas-top-nome small { display: block; color: rgba(var(--ff-ink),.45); font-size: 11px; font-weight: 600; }
        .ff-vendas-top b { color: rgb(var(--ff-ink)); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
        .ff-vendas-top b small { color: rgba(var(--ff-ink),.45); font-size: 10.5px; font-weight: 600; }
        .ff-vendas-sub { margin: 4px 0 6px; color: rgba(var(--ff-ink),.4); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
        .ff-vendas-pct { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
        .ff-vendas-pct li { display: grid; grid-template-columns: minmax(90px, 1fr) 1.4fr 40px; align-items: center; gap: 10px; color: rgba(var(--ff-ink),.8); font-size: 12.5px; font-weight: 600; }
        .ff-vendas-pct b { text-align: right; color: rgb(var(--ff-ink)); font-weight: 800; font-variant-numeric: tabular-nums; }
        .ff-vendas-barra { height: 8px; border-radius: 8px; background: rgba(var(--ff-ink),.07); overflow: hidden; }
        .ff-vendas-barra i { display: block; height: 100%; border-radius: 8px; background: #059669; }

        /* ---------- NAVEGAÇÃO INFERIOR ---------- */
        #navCliente, #navFeirante, #navAdmin {
            background: rgba(var(--ff-bg-rgb),.86) !important;
            border-top: 1px solid rgba(var(--ff-ink),.07) !important;
            box-shadow: 0 -12px 34px rgba(0,0,0,.35) !important;
            backdrop-filter: blur(20px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
            padding: 6px 8px max(7px, env(safe-area-inset-bottom)) !important;
        }
        #navCliente > div, #navFeirante > div, #navAdmin > div { max-width: 600px !important; gap: 4px; }
        #navCliente button, #navFeirante button, #navAdmin button {
            position: relative; min-width: 62px; min-height: 50px; padding: 6px 7px !important; border-radius: 14px !important;
            font-size: 10px !important; font-weight: 700 !important; color: rgba(var(--ff-ink),.40) !important;
        }
        #navCliente button i, #navFeirante button i, #navAdmin button i { font-size: 17px !important; margin-bottom: 3px !important; }
        #navCliente button.text-emerald-600, #navFeirante button.text-emerald-600, #navAdmin button.text-emerald-600 {
            background: rgba(16,185,129,.14) !important; color: var(--ff-em-txt) !important;
        }
        #navCliente button:hover, #navFeirante button:hover, #navAdmin button:hover { background: rgba(var(--ff-ink),.05) !important; color: rgba(var(--ff-ink),.75) !important; }
        #navCliente span[id^="badge"], #navFeirante span[id^="badge"], #navAdmin span[id^="badge"] { box-shadow: 0 0 0 2px var(--ff-bg) !important; }

        /* ---------- MODAIS (PIX, planos) ---------- */
        body [id^="modal"].fixed {
            background: rgba(4,6,5,.72) !important;
            backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
        }
        body [id^="modal"].fixed > div {
            background: linear-gradient(180deg, rgba(var(--ff-s-rgb),.98), rgba(var(--ff-bg-rgb),.99)) !important;
            border: 1px solid var(--ff-line) !important;
            border-radius: 28px !important;
            box-shadow: 0 32px 64px rgba(0,0,0,.55) !important;
            color: rgb(var(--ff-ink));
        }
        #modalEscolhaPlano > div { max-height: min(88vh, 760px); overflow: auto; }
        #modalPix img { background: #fff !important; }

        /* ---------- MAPA (Leaflet em modo escuro) ---------- */
        #mapaExplorarWrapper { border-radius: 20px !important; border: 1px solid var(--ff-line) !important; padding: 6px !important; }
        #mapaExplorar { border-radius: 15px !important; background: var(--ff-s1) !important; }
        html:not([data-tema="claro"]) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.6); }
        .leaflet-container { background: var(--ff-s1) !important; }
        .leaflet-bar a, .leaflet-control-zoom a { background: var(--ff-solid) !important; color: var(--ff-em-txt) !important; border-color: var(--ff-line) !important; }
        .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--ff-solid) !important; color: rgb(var(--ff-ink)) !important; border: 1px solid var(--ff-line); }
        .leaflet-popup-content-wrapper { border-radius: 16px !important; padding: 4px !important; box-shadow: 0 14px 32px rgba(0,0,0,.45) !important; }
        .leaflet-container a.leaflet-popup-close-button { color: rgba(var(--ff-ink),.6) !important; }
        .leaflet-control-attribution { background: rgba(var(--ff-bg-rgb),.7) !important; color: rgba(var(--ff-ink),.45) !important; }
        .leaflet-control-attribution a { color: var(--ff-em-txt) !important; }

        /* ---------- TIPOGRAFIA ---------- */
        #appPrincipal h2 { font-weight: 800 !important; }
        #appPrincipal h3, #appPrincipal h4 { font-weight: 800 !important; }
        #appPrincipal p { line-height: 1.5; }
        #appPrincipal .text-\[9px\] { font-size: 10px !important; }
        #appPrincipal .text-\[10px\] { font-size: 10.5px !important; }

        /* Barra de rolagem discreta */
        * { scrollbar-color: rgba(var(--ff-ink),.15) transparent; }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
        }
        @media (min-width: 768px) {
            #appPrincipal main { max-width: 760px !important; }
            #navCliente > div, #navFeirante > div, #navAdmin > div { max-width: 760px !important; }
        }
        @media (max-width: 420px) {
            #appPrincipal main { padding-left: 12px !important; padding-right: 12px !important; }
            #navCliente button, #navFeirante button, #navAdmin button { min-width: 56px; }
            #appPrincipal > header .ff-btn-app .ff-btn-app-txt { display: none; }
        }

        /* ================= TEMA CLARO (Perfil → Aparência) ================= */
        html[data-tema="claro"] {
            --ff-ink: 17,26,21;
            --ff-scheme: light;
            --ff-bg: #f3f5f2;
            --ff-bg-rgb: 243,245,242;
            --ff-bg-2: #ffffff;
            --ff-solid: #ffffff;
            --ff-s1: #f7f9f6;
            --ff-s2: #eef2ee;
            --ff-s3: #ffffff;
            --ff-s-rgb: 255,255,255;
            --ff-glass: #ffffff;
            --ff-glass-2: rgba(17,26,21,.04);
            --ff-glass-3: rgba(17,26,21,.07);
            --ff-line: rgba(17,26,21,.12);
            --ff-line-soft: rgba(17,26,21,.08);
            --ff-em-txt: #047857;
            --ff-em-txt-2: #059669;
            --ff-em-txt-0: #065f46;
            --ff-em-soft: rgba(16,185,129,.10);
            --ff-em-line: rgba(5,150,105,.30);
            --ff-gold-txt: #b45309;
            --ff-gold-txt-2: #92400e;
            --ff-gold-txt-3: #d97706;
            --ff-gold-soft: rgba(245,158,11,.10);
            --ff-rose-txt: #e11d48;
            --ff-blue-txt: #1d4ed8;
            --ff-purple-txt: #7e22ce;
            --ff-shadow: 0 10px 28px rgba(17,26,21,.08);
        }
        html[data-tema="claro"] body .shadow-xs, html[data-tema="claro"] body .shadow-sm { box-shadow: 0 2px 8px rgba(17,26,21,.06) !important; }
        html[data-tema="claro"] body .shadow-md, html[data-tema="claro"] body .shadow-lg { box-shadow: 0 8px 22px rgba(17,26,21,.08) !important; }
        html[data-tema="claro"] body .shadow-xl, html[data-tema="claro"] body .shadow-2xl { box-shadow: 0 16px 40px rgba(17,26,21,.12) !important; }
        html[data-tema="claro"] .ff-card, html[data-tema="claro"] .ff-lista, html[data-tema="claro"] .ff-sec { box-shadow: 0 1px 2px rgba(17,26,21,.05); }
        html[data-tema="claro"] input::placeholder, html[data-tema="claro"] textarea::placeholder { color: rgba(17,26,21,.40) !important; }
        html[data-tema="claro"] .ff-busca input::-webkit-search-cancel-button { filter: none; }
        html[data-tema="claro"] .ff-uber-caixa i.ico, html[data-tema="claro"] .ff-uber-linha .marca { background: #000; color: #fff; }

        /* Chave Feira | Serviços no topo do Início */
        .ff-modo button { min-height: 58px; padding: 8px 10px; }
        .ff-modo button > span { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; }
        .ff-modo button > span i { font-size: 13px; }
        .ff-modo button.ativo small { color: rgba(255,255,255,.85); }
        #avisoAtendimentoServico { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--ff-em-soft); border: 1px solid var(--ff-em-line); }
        #avisoAtendimentoServico i { margin-top: 2px; color: var(--ff-em-txt); }

        /* ================= MOTOBOY ================= */
        /* Tela do motoboy */
        .ff-mb-disp .ff-thumb { transition: background .2s, color .2s; }
        .ff-mb-disp .ff-thumb.ff-mb-on { background: rgba(16,185,129,.9); color: #fff; }
        #mbToggleDisponivel:checked + div { background: #059669 !important; }
        .ff-mb-conta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px; }
        .ff-mb-conta > i { font-size: 30px; color: var(--ff-gold-txt-3); }
        .ff-mb-conta strong { color: rgb(var(--ff-ink)); font-size: 16px; font-weight: 900; }
        .ff-mb-conta p { margin: 0; color: var(--ff-txt-3); font-size: 13px; line-height: 1.5; }
        .ff-mb-conta .ff-btn-sec { flex: none; margin-top: 6px; }
        .ff-mb-cab-lista { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
        .ff-mb-cab-lista .ff-secao-titulo { margin-bottom: 8px; }
        .ff-mb-corrida { display: flex; flex-direction: column; gap: 10px; }
        .ff-mb-corrida-topo { display: flex; align-items: center; gap: 12px; }
        .ff-mb-valor { flex: none; color: var(--ff-em-txt); font-size: 19px; font-weight: 900; letter-spacing: -.02em; }
        .ff-mb-dist { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ff-txt-3); font-size: 12.5px; font-weight: 700; }
        .ff-mb-dist i { color: var(--ff-txt-5); margin-right: 3px; }
        .ff-mb-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
        .ff-mb-botoes .ff-btn-sec { min-height: 38px; font-size: 12.5px; text-decoration: none; }
        .ff-mb-atual { display: flex; flex-direction: column; gap: 12px; border-color: var(--ff-em-line); }
        .ff-mb-atual-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ff-txt-3); font-size: 12.5px; font-weight: 700; }
        .ff-mb-tag { padding: 4px 10px; border-radius: 999px; background: rgba(16,185,129,.9); color: #fff; font-size: 11.5px; font-weight: 800; }
        .ff-mb-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
        .ff-mb-passos li { position: relative; padding: 10px 12px 10px 14px; border-radius: 14px; border: 1px solid var(--ff-line); background: rgba(var(--ff-ink),.03); display: flex; flex-direction: column; gap: 2px; opacity: .6; }
        .ff-mb-passos li.agora { opacity: 1; border-color: var(--ff-em-line); background: var(--ff-em-soft); }
        .ff-mb-passos li.feito { opacity: .55; }
        .ff-mb-passos li.feito strong::after { content: ' ✓'; color: var(--ff-em-txt); }
        .ff-mb-passos strong { color: rgb(var(--ff-ink)); font-size: 13.5px; font-weight: 800; }
        .ff-mb-passos strong i { color: var(--ff-em-txt); margin-right: 4px; font-size: 12px; }
        .ff-mb-passos span { color: var(--ff-txt-2); font-size: 13.5px; font-weight: 700; }
        .ff-mb-passos small { color: var(--ff-txt-3); font-size: 12px; line-height: 1.4; }
        .ff-mb-receber { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 11px 13px; border-radius: 14px; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.35); color: var(--ff-txt-2); font-size: 13px; line-height: 1.45; }
        .ff-mb-receber i { margin-top: 2px; color: var(--ff-gold-txt-3); font-size: 15px; }
        .ff-mb-receber b { color: var(--ff-gold-txt); }

        /* Carrinho: lugar da entrega */
        .ff-mb-mapa-caixa { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--ff-line); }
        .ff-mb-mapa { width: 100%; height: 210px; z-index: 1; }
        .ff-mb-gps { position: absolute; left: 10px; bottom: 10px; z-index: 500; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 12px; border: 0; cursor: pointer; background: #059669; color: #fff; font-size: 12.5px; font-weight: 800; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
        .ff-mb-mapa.hide + .ff-mb-gps { position: static; width: 100%; justify-content: center; border-radius: 0; }
        .ff-mb-end-linha { display: grid; grid-template-columns: 1fr 96px; gap: 12px; }
        .ff-mb-caixa i.ico { background: #059669 !important; }
        .ff-seg button.ativo#labelMotoboy small { color: rgba(255,255,255,.85); }
        .ff-mb-linha-taxa { color: var(--ff-gold-txt) !important; font-size: 13px; }
        .ff-mb-linha-taxa i { margin-right: 4px; }

        /* Pedidos: linha da entrega por motoboy */
        .ff-uber-linha .marca.mb { background: #059669; gap: 4px; }
        .ff-mb-quem { display: inline-flex; align-items: center; gap: 8px; flex-basis: 100%; color: var(--ff-txt-2); font-size: 12.5px; }
        .ff-mb-quem .ff-thumb { width: 30px; height: 30px; border-radius: 50%; font-size: 12px; }
        .ff-mb-quem b { color: rgb(var(--ff-ink)); letter-spacing: .04em; }
        .ff-mb-pagar { flex-basis: 100%; color: var(--ff-txt-3); font-size: 12px; font-weight: 600; line-height: 1.45; }
        .ff-mb-pagar b { color: var(--ff-gold-txt); }
        .ff-mb-pagar i { color: var(--ff-gold-txt-3); margin-right: 3px; }
        .ff-uber-linha .ff-mb-pagar button { height: 24px; padding: 0 8px; font-size: 11px; margin-left: 4px; }

        /* ADM: valores da entrega */
        .ff-adm-mb-config { display: grid; gap: 10px; }
        .ff-adm-mb-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        html[data-tema="claro"] .ff-mb-passos li.agora { background: rgba(16,185,129,.08); }

        /* Motoboy: taxa do app */
        .ff-mb-taxa { display: flex; flex-direction: column; gap: 12px; border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.06); }
        .ff-mb-taxa.bloq { border-color: rgba(244,63,94,.45); background: rgba(244,63,94,.07); }
        .ff-mb-taxa-topo { display: flex; gap: 12px; align-items: flex-start; }
        .ff-mb-taxa-topo > i { margin-top: 2px; font-size: 18px; color: var(--ff-gold-txt-3); }
        .ff-mb-taxa.bloq .ff-mb-taxa-topo > i { color: var(--ff-rose-txt); }
        .ff-mb-taxa-topo strong { display: block; color: rgb(var(--ff-ink)); font-size: 14.5px; font-weight: 900; }
        .ff-mb-taxa-topo small { display: block; margin-top: 3px; color: var(--ff-txt-3); font-size: 12.5px; line-height: 1.45; }
        .ff-mb-botoes .ff-btn-sec[disabled] { opacity: .45; cursor: not-allowed; }

        /* ================================================================
           LIMPEZA DO CAMINHO DO CLIENTE (30/09/2026)
           Início mais enxuto, barraca, carrinho e tela do PIX.
           ================================================================ */
        /* Início: chave Feira | Serviços numa linha só */
        .ff-modo button { min-height: 40px; padding: 6px 10px; }
        .ff-modo button small { display: none; }
        .ff-modo button > span { font-size: 13.5px; }

        /* Início: mapa fechado vira uma linha discreta */
        .ff-mapa-topo.minimizado { padding: 4px 6px; }
        .ff-mapa-topo.minimizado .ff-mapa-cab { padding: 6px 4px 6px 8px; }
        .ff-mapa-topo.minimizado .ff-mapa-cab strong { font-size: 13px; }
        .ff-mapa-topo.minimizado .ff-mapa-cab small { font-size: 11.5px; }
        .ff-mapa-topo.minimizado .ff-mapa-min { height: 32px; background: transparent; border-color: var(--ff-em-line); color: var(--ff-em-txt); }

        /* Início: faixa "Em destaque" (só barracas que pagaram destaque) */
        .ff-dest.ff-dest-faixa { padding: 0; border: 0; background: none !important; box-shadow: none !important; border-radius: 0; }
        .ff-dest-faixa .ff-secao-titulo .ff-coroa { margin-right: 2px; }
        .ff-dest-trilho { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 4px; scroll-snap-type: x proximity; }
        .ff-dest-mini {
            flex: 0 0 auto; width: 132px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
            padding: 8px; border-radius: 16px; border: 1px solid var(--ff-gold-line); background: var(--ff-gold-soft);
            text-align: left; cursor: pointer; scroll-snap-align: start; color: rgb(var(--ff-ink));
        }
        .ff-dest-mini:active { transform: scale(.98); }
        .ff-dest-mini-foto {
            width: 100%; height: 72px; border-radius: 11px; overflow: hidden; margin-bottom: 6px;
            display: flex; align-items: center; justify-content: center; background: rgba(var(--ff-ink),.06); color: var(--ff-gold-txt-3); font-size: 20px;
        }
        .ff-dest-mini-foto img { width: 100%; height: 100%; object-fit: cover; }
        .ff-dest-mini strong { width: 100%; font-size: 12.5px; font-weight: 800; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-dest-mini small { width: 100%; color: var(--ff-txt-3); font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-dest-mini.fechada { opacity: .6; }

        /* Início: "Ver todas as barracas" no fim da lista curta */
        .ff-ver-todas {
            display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; border: 0; cursor: pointer;
            color: var(--ff-em-txt); font-size: 13px; font-weight: 800;
        }
        .ff-ver-todas i { font-size: 11px; }

        /* Barraca: "Como chegar" e "Conversar" pequenos e iguais (o destaque fica nos produtos) */
        .ff-acoes-mini { gap: 8px; }
        .ff-acoes-mini .ff-btn-sec { flex: 0 0 auto; width: auto; min-height: 36px; padding: 0 14px; font-size: 12.5px; }

        /* Aviso "no carrinho": embaixo, acima do menu (não cobre o Voltar) */
        #ffToastCaixaBaixo { position: fixed; left: 0; right: 0; bottom: calc(max(7px, env(safe-area-inset-bottom, 0px)) + 88px); z-index: 100002; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
        #ffToastCaixaBaixo .ff-toast { transform: translateY(12px); }
        #ffToastCaixaBaixo .ff-toast.on { transform: none; }
        body:has(#telaCarrinho:not(.hide)) #ffToastCaixaBaixo { display: none; }

        /* Carrinho: só "Retirar" disponível → uma linha, sem botões */
        .ff-entrega-unica { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ff-line); background: rgba(var(--ff-ink),.04); color: rgb(var(--ff-ink)); font-size: 13.5px; font-weight: 800; }
        .ff-entrega-unica i { color: var(--ff-em-txt); }
        .ff-entrega-unica small { margin-left: auto; color: var(--ff-em-txt); font-size: 12px; font-weight: 800; }

        /* Carrinho: link pequeno (CPF na nota) */
        .ff-link-mini { display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0; background: none; cursor: pointer; color: var(--ff-em-txt); font-size: 12.5px; font-weight: 800; }
        .ff-link-mini i { font-size: 10px; }
        .ff-link-mini em { color: var(--ff-txt-4); font-style: normal; font-weight: 600; }

        /* Carrinho: barra com total + Finalizar, presa acima do menu */
        .ff-barra-finalizar {
            position: sticky; bottom: calc(max(7px, env(safe-area-inset-bottom, 0px)) + 88px); z-index: 20;
            display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 18px;
            background: rgba(var(--ff-s-rgb),.97); border: 1px solid var(--ff-line); box-shadow: 0 10px 30px rgba(0,0,0,.35);
        }
        .ff-barra-total { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
        .ff-barra-total small { color: var(--ff-txt-3); font-size: 11.5px; font-weight: 700; }
        .ff-barra-total strong { color: rgb(var(--ff-ink)); font-size: 18px; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; }
        .ff-barra-finalizar .ff-sec-salvar { flex: 1; width: auto; }
        html[data-tema="claro"] .ff-barra-finalizar { box-shadow: 0 8px 24px rgba(17,26,21,.12); }

        /* Depois de finalizar: PIX a pagar */
        #sucessoIcone.ff-suc-pendente { background: rgba(245,158,11,.16) !important; color: var(--ff-gold-txt-3) !important; }
        .ff-pix-qr { border-radius: 14px; border: 1px solid var(--ff-line); padding: 0 12px; }
        .ff-pix-qr summary { padding: 11px 0; cursor: pointer; color: var(--ff-txt-2); font-size: 12.5px; font-weight: 800; list-style: none; }
        .ff-pix-qr summary::-webkit-details-marker { display: none; }
        .ff-pix-qr summary::before { content: '\25B8'; display: inline-block; margin-right: 6px; transition: transform .2s; }
        .ff-pix-qr[open] summary::before { transform: rotate(90deg); }
        .ff-pix-qr > img { width: 196px; height: 196px; margin: 0 auto 12px; padding: 8px; border-radius: 16px; background: #fff; display: block; }
        .ff-pix-qr .qr { margin-bottom: 12px; }
        .ff-pix-status { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ff-txt-3); font-size: 12.5px; font-weight: 700; }
        .ff-pix-status.pago { color: var(--ff-em-txt); }
        #caixaPixPedido.pago .ff-pix-copiar { display: none; }
        /* Com o teclado aberto (preenchendo endereço/CPF), a barra volta para o fim da tela e não cobre o campo */
        body:has(#telaCarrinho input:focus) .ff-barra-finalizar { position: static; }

        /* Confirmação antes de fixar a localização da barraca */
        .ff-confirma-local { max-width: 420px; }
        .ff-confirma-local h3 { margin: 0 0 8px; color: rgb(var(--ff-ink)); font-size: 17px; font-weight: 900; letter-spacing: -.02em; }
        .ff-confirma-local p { font-size: 13.5px; }
        .ff-confirma-mapa { height: 220px; margin-top: 14px; border-radius: 16px; overflow: hidden; border: 1px solid var(--ff-line); }
        .ff-confirma-nota { margin-top: 10px !important; color: var(--ff-txt-3) !important; font-size: 12.5px !important; line-height: 1.45 !important; }
        .ff-confirma-nota.alerta { color: var(--ff-gold-txt) !important; }
        html[data-tema="claro"] .ff-confirma-nota.alerta { color: #b45309 !important; }
        .ff-confirma-local .ff-confirm-sim i { margin-right: 4px; }
        .ff-pino-grande { width: 38px; height: 38px; font-size: 15px; box-shadow: 0 6px 16px rgba(0,0,0,.45); }
        .ff-confirma-nota:empty { display: none; }
        .ff-pino-grande { color: #fff; }

        /* ================================================================
           JEITO DE REDE SOCIAL (30/09/2026): topo, menu flutuante, bolinhas,
           feed de barracas, grade de produtos e perfil da barraca.
           Cores e nome do FeiraFácil (verde), só o formato lembra o Instagram.
           ================================================================ */
        /* Topo: sem sombra pesada; ícones redondos à direita */
        #appPrincipal > header { box-shadow: none !important; border-bottom: 1px solid rgba(var(--ff-ink),.06) !important; padding-top: max(10px, env(safe-area-inset-top)) !important; padding-bottom: 10px !important; }
        #appPrincipal > header h1 { font-size: 19px !important; }
        #appPrincipal > header h1 > span { width: 34px !important; height: 34px !important; border-radius: 11px !important; box-shadow: none !important; }
        #appPrincipal > header .ff-btn-app { box-shadow: none !important; }
        #appPrincipal > header .ff-topo-icone {
            position: relative; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50% !important;
            display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
            background: transparent !important; border: 0 !important; color: rgb(var(--ff-ink)) !important;
        }
        #appPrincipal > header .ff-topo-icone.hide { display: none; }
        #appPrincipal > header .ff-topo-icone.ativo { color: var(--ff-em-txt) !important; }
        .ff-topo-badge { position: absolute; top: 6px; right: 5px; width: 10px; height: 10px; border-radius: 50%; background: #f43f5e; box-shadow: 0 0 0 2px var(--ff-bg); }
        .ff-topo-badge.hide { display: none; }

        /* Menu de baixo flutuante (todos os perfis); o do cliente é só ícones */
        #navCliente, #navFeirante, #navAdmin, #navMotoboy {
            left: 12px !important; right: 12px !important; bottom: max(8px, env(safe-area-inset-bottom)) !important;
            max-width: 480px; margin: 0 auto; border-radius: 30px !important; padding: 6px !important;
            border: 1px solid rgba(var(--ff-ink),.10) !important; border-top: 1px solid rgba(var(--ff-ink),.10) !important;
            background: rgba(var(--ff-bg-rgb),.88) !important; box-shadow: 0 12px 34px rgba(0,0,0,.45) !important;
            backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
        }
        #navCliente > div, #navFeirante > div, #navAdmin > div, #navMotoboy > div { padding: 0 !important; gap: 2px; }
        #navFeirante button, #navAdmin button, #navMotoboy button { border-radius: 24px !important; }
        #navCliente.ff-nav-icones button { flex: 1; min-width: 0; min-height: 50px; padding: 0 !important; border-radius: 24px !important; align-items: center; justify-content: center; }
        #navCliente.ff-nav-icones button i { font-size: 21px !important; margin: 0 !important; }
        #navCliente.ff-nav-icones button.text-emerald-600 { background: rgba(var(--ff-ink),.10) !important; color: rgb(var(--ff-ink)) !important; }
        #navCliente.ff-nav-icones #badgeCarrinho { top: 5px !important; right: calc(50% - 20px) !important; }
        #navCliente.ff-nav-icones #badgeMeusPedidos { top: 9px !important; right: calc(50% - 16px) !important; }
        .ff-nav-avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
        .ff-nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
        #navCliente button.text-emerald-600 .ff-nav-avatar { box-shadow: 0 0 0 2px rgb(var(--ff-ink)); }
        html[data-tema="claro"] #navCliente, html[data-tema="claro"] #navFeirante, html[data-tema="claro"] #navAdmin, html[data-tema="claro"] #navMotoboy { box-shadow: 0 10px 28px rgba(17,26,21,.16) !important; }
        /* o menu agora flutua: avisos e a barra do carrinho sobem só o necessário */
        #ffToastCaixaBaixo { bottom: calc(max(8px, env(safe-area-inset-bottom, 0px)) + 78px); }
        .ff-barra-finalizar { bottom: calc(max(8px, env(safe-area-inset-bottom, 0px)) + 78px); }

        /* Bolinhas do topo (stories) */
        .ff-stories { display: flex; gap: 14px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; }
        .ff-stories.hide { display: none; }
        .ff-story { flex: 0 0 auto; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; color: rgb(var(--ff-ink)); }
        .ff-story small { width: 100%; font-size: 11.5px; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(var(--ff-ink),.85); }
        .ff-story-anel { position: relative; width: 70px; height: 70px; border-radius: 50%; padding: 3px; display: block; }
        .ff-story-anel.verde { background: linear-gradient(45deg, #059669, #34d399 55%, #a7f3d0); }
        .ff-story-anel.ouro { background: linear-gradient(45deg, #d97706, #fbbf24 55%, #fde68a); }
        .ff-story-anel.cinza { background: rgba(var(--ff-ink),.18); padding: 2px; }
        .ff-story-anel.eu { background: rgba(var(--ff-ink),.18); padding: 2px; }
        .ff-story-foto { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--ff-bg-2); border: 3px solid var(--ff-bg); color: var(--ff-em-txt); font-size: 22px; }
        .ff-story-foto img { width: 100%; height: 100%; object-fit: cover; }
        .ff-story-coroa { position: absolute; top: -4px; right: -2px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; background: #f59e0b; color: #fff; border: 2px solid var(--ff-bg); }

        /* Feed: cada barraca é um post de ponta a ponta */
        .ff-feed { display: flex; flex-direction: column; gap: 6px; margin: 0 -16px; }
        .ff-feed > .ff-vazio { margin: 0 16px; }
        .ff-post { padding-bottom: 14px; border-bottom: 1px solid rgba(var(--ff-ink),.06); }
        .ff-post-cab { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
        .ff-post-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; padding: 0; border: 0; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(var(--ff-ink),.08); color: var(--ff-em-txt); font-size: 15px; box-shadow: 0 0 0 1px rgba(var(--ff-ink),.12); }
        .ff-post-avatar.verde { box-shadow: 0 0 0 2px var(--ff-bg), 0 0 0 4px #10b981; }
        .ff-post-avatar.ouro { box-shadow: 0 0 0 2px var(--ff-bg), 0 0 0 4px #f59e0b; }
        .ff-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .ff-post-quem { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: rgb(var(--ff-ink)); }
        .ff-post-quem strong { display: block; font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-post-quem small { display: block; margin-top: 1px; color: var(--ff-txt-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-seguir-mini { flex: 0 0 auto; height: 32px; padding: 0 14px; border-radius: 9px; border: 0; cursor: pointer; font-size: 13px; font-weight: 800; background: #10b981; color: #fff; }
        .ff-seguir-mini.seguindo { background: rgba(var(--ff-ink),.10); color: rgb(var(--ff-ink)); }
        .ff-post-midia { position: relative; }
        .ff-post-carrossel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; background: rgba(var(--ff-ink),.04); }
        .ff-post-slide { position: relative; flex: 0 0 100%; aspect-ratio: 1 / 1; scroll-snap-align: start; overflow: hidden; border: 0; padding: 0; cursor: pointer; background: rgba(var(--ff-ink),.05); color: rgb(var(--ff-ink)); display: block; }
        .ff-post-slide > img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .ff-post-sem-foto { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; color: var(--ff-em-txt); background: linear-gradient(135deg, rgba(16,185,129,.16), rgba(var(--ff-ink),.04)); }
        .ff-post-sem-foto img { width: 100%; height: 100%; object-fit: cover; }
        .ff-post-prod { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 44px 70px 14px 14px; text-align: left; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,0)); }
        .ff-post-prod strong { font-size: 16px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
        .ff-post-prod em { font-style: normal; font-size: 15px; font-weight: 900; color: #6ee7b7; }
        .ff-post-prod em small { color: rgba(255,255,255,.8); font-size: 12px; font-weight: 600; }
        .ff-post-prod .ff-tag-acabou { align-self: flex-start; margin-top: 4px; }
        .ff-post-slide.esgotado > img { filter: grayscale(.7) brightness(.8); }
        .ff-post-add { position: absolute; right: 14px; bottom: 14px; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
        .ff-post-add:active { transform: scale(.94); }
        .ff-post-mais { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(135deg, rgba(16,185,129,.20), rgba(var(--ff-ink),.05)); }
        .ff-post-mais strong { font-size: 40px; font-weight: 900; color: var(--ff-em-txt); }
        .ff-post-mais span { font-size: 14px; font-weight: 700; color: var(--ff-txt-2); }
        .ff-post-contador { position: absolute; top: 12px; right: 12px; padding: 4px 9px; border-radius: 12px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; pointer-events: none; }
        .ff-post-pontos { display: flex; justify-content: center; gap: 4px; margin-top: 8px; height: 6px; }
        .ff-post-pontos i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--ff-ink),.25); transition: background .2s; }
        .ff-post-pontos i.on { background: #10b981; }
        .ff-post-acoes { display: flex; align-items: center; gap: 4px; padding: 4px 8px 0; margin-top: -14px; }
        .ff-post-acoes > button, .ff-post-acoes > a { width: 42px; height: 42px; border-radius: 50%; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; color: rgb(var(--ff-ink)); text-decoration: none; }
        .ff-post-acoes > .ff-post-ver { width: auto; margin-left: auto; padding: 0 8px; font-size: 13px; font-weight: 800; color: var(--ff-em-txt); gap: 6px; border-radius: 10px; }
        .ff-post-acoes > .ff-post-ver i { font-size: 11px; }
        .ff-post-nums { margin: 2px 14px 0; font-size: 13.5px; color: rgb(var(--ff-ink)); }
        .ff-post-legenda { margin: 3px 14px 0; font-size: 13.5px; line-height: 1.4; color: rgba(var(--ff-ink),.85); }
        .ff-post-legenda b { color: rgb(var(--ff-ink)); font-weight: 800; }
        .ff-post-todos { display: block; margin: 4px 14px 0; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ff-txt-3); font-size: 13.5px; }
        .ff-post.fechada .ff-post-carrossel { opacity: .6; }

        /* Grade de produtos (Buscar e perfil da barraca) */
        .ff-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -16px; }
        .ff-grade > .ff-vazio { grid-column: 1 / -1; margin: 0 16px; }
        .ff-tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; background: rgba(var(--ff-ink),.06); }
        .ff-tile > img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .ff-tile-sem-foto { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--ff-em-txt); }
        .ff-tile-info { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 18px 7px 6px; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,0)); line-height: 1.2; }
        .ff-tile-info strong { font-size: 11.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-tile-info em { font-style: normal; font-size: 12.5px; font-weight: 900; color: #6ee7b7; }
        .ff-tile-add { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; background: rgba(16,185,129,.92); box-shadow: 0 3px 10px rgba(0,0,0,.35); }
        .ff-tile-acabou { position: absolute; top: 6px; left: 6px; padding: 3px 7px; border-radius: 8px; background: rgba(0,0,0,.65); color: #fff; font-size: 10.5px; font-weight: 800; }
        .ff-tile.esgotado > img { filter: grayscale(.7) brightness(.8); }

        /* Perfil da barraca */
        .ff-perfil-barraca { display: flex; flex-direction: column; gap: 12px; }
        .ff-perfil-topo { display: flex; align-items: center; gap: 8px; margin: -4px -8px 0; }
        .ff-perfil-topo strong { flex: 1; text-align: center; font-size: 16px; font-weight: 800; color: rgb(var(--ff-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-perfil-voltar { width: 42px; height: 42px; border-radius: 50%; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; color: rgb(var(--ff-ink)); }
        .ff-perfil-cab { display: flex; align-items: center; gap: 18px; }
        .ff-perfil-foto { flex: 0 0 auto; width: 92px; height: 92px; border-radius: 50%; padding: 3px; background: linear-gradient(45deg, #059669, #34d399 55%, #a7f3d0); }
        .ff-perfil-foto.ouro { background: linear-gradient(45deg, #d97706, #fbbf24 55%, #fde68a); }
        .ff-perfil-foto-in { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--ff-bg-2); border: 3px solid var(--ff-bg); color: var(--ff-em-txt); font-size: 30px; }
        .ff-perfil-foto-in img { width: 100%; height: 100%; object-fit: cover; }
        .ff-perfil-nums { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
        .ff-perfil-nums strong { display: block; font-size: 17px; font-weight: 900; color: rgb(var(--ff-ink)); white-space: nowrap; }
        .ff-perfil-nums small { display: block; font-size: 12.5px; color: var(--ff-txt-2); }
        .ff-perfil-bio h2 { margin: 0; font-size: 15px; font-weight: 800; color: rgb(var(--ff-ink)); }
        .ff-perfil-bio p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: rgba(var(--ff-ink),.85); }
        .ff-perfil-bio .ff-perfil-cat { color: var(--ff-txt-3); }
        .ff-perfil-bio p i { width: 16px; color: var(--ff-txt-3); }
        .ff-perfil-botoes { display: flex; gap: 6px; }
        .ff-perfil-btn { flex: 1; height: 36px; border-radius: 10px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 800; text-decoration: none; background: rgba(var(--ff-ink),.10); color: rgb(var(--ff-ink)); }
        .ff-perfil-btn.hide { display: none; }
        .ff-perfil-btn.pri { background: #10b981; color: #fff; }
        .ff-perfil-btn.pri.seguindo { background: rgba(var(--ff-ink),.10); color: rgb(var(--ff-ink)); }
        .ff-perfil-aba { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px -16px 0; padding: 10px 0; border-top: 1px solid rgba(var(--ff-ink),.08); box-shadow: inset 0 -1px 0 rgb(var(--ff-ink)); color: rgb(var(--ff-ink)); font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
        .ff-perfil-barraca .ff-grade { margin-top: -12px; }
        .ff-perfil-barraca .ff-avaliar { margin-top: 6px; }

        /* Ponta a ponta: o respiro lateral do app é 16px (12px em celular) */
        :root { --ff-pad: 16px; }
        @media (max-width: 420px) { :root { --ff-pad: 12px; } }
        .ff-stories, .ff-feed, .ff-grade, .ff-perfil-aba { margin-left: calc(-1 * var(--ff-pad)); margin-right: calc(-1 * var(--ff-pad)); }
        .ff-stories { padding-left: var(--ff-pad); padding-right: var(--ff-pad); }
        /* bolinhas do carrossel no meio da fileira de ícones (como no Instagram) */
        .ff-post-acoes { position: relative; margin-top: 2px; }
        .ff-post-acoes .ff-post-pontos { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; pointer-events: none; }
        /* Início: Feira | Serviços como abas finas (texto + risquinho) */
        #visãoUnificadaExplorar .ff-chave-modo { background: none; border: 0; padding: 0; gap: 0; margin-bottom: -4px; border-bottom: 1px solid rgba(var(--ff-ink),.08); border-radius: 0; }
        #visãoUnificadaExplorar .ff-chave-modo button { min-height: 40px; border-radius: 0; background: none !important; color: var(--ff-txt-3); box-shadow: inset 0 0 0 transparent; }
        #visãoUnificadaExplorar .ff-chave-modo button.ativo { color: rgb(var(--ff-ink)); box-shadow: inset 0 -2px 0 rgb(var(--ff-ink)); }
        #visãoUnificadaExplorar .ff-chave-modo.hide { display: none; }

        /* ================================================================
           DESTAQUE PAGO COM MAIS PESO (30/09/2026): vitrine dourada no Início,
           posts dourados no feed e alfinete pulsando no mapa.
           ================================================================ */
        /* Vitrine dourada */
        .ff-vitrine { position: relative; margin: 0 calc(-1 * var(--ff-pad)); padding: 14px 0 12px; background: linear-gradient(180deg, rgba(245,158,11,.14), rgba(245,158,11,.03)); border-top: 1px solid rgba(245,158,11,.30); border-bottom: 1px solid rgba(245,158,11,.20); }
        .ff-vitrine.hide { display: none; }
        .ff-vitrine-cab { display: flex; align-items: center; gap: 10px; padding: 0 var(--ff-pad) 10px; }
        .ff-vitrine-coroa { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 6px 16px rgba(217,119,6,.35); }
        .ff-vitrine-cab h3 { margin: 0; font-size: 15.5px; font-weight: 900; letter-spacing: -.02em; color: rgb(var(--ff-ink)); }
        .ff-vitrine-cab p { margin: 1px 0 0; font-size: 12px; font-weight: 600; color: var(--ff-gold-txt); }
        html[data-tema="claro"] .ff-vitrine-cab p { color: #b45309; }
        .ff-vitrine-trilho { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px var(--ff-pad) 4px; scroll-padding: 0 var(--ff-pad); }
        .ff-vit-card { flex: 0 0 86%; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; cursor: pointer; background: var(--ff-bg-2); border: 1.5px solid rgba(245,158,11,.55); box-shadow: 0 10px 26px rgba(0,0,0,.28), 0 0 0 3px rgba(245,158,11,.08); }
        .ff-vitrine-trilho.um .ff-vit-card { flex-basis: 100%; }
        .ff-vit-card:active { transform: scale(.99); }
        .ff-vit-card.fechada .ff-vit-capa { opacity: .6; }
        .ff-vit-capa { position: relative; aspect-ratio: 16 / 9; background: rgba(var(--ff-ink),.06); }
        .ff-vit-mosaico { position: absolute; inset: 0; display: grid; gap: 2px; }
        .ff-vit-mosaico img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .ff-vit-mosaico.n2 { grid-template-columns: 1fr 1fr; }
        .ff-vit-mosaico.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
        .ff-vit-mosaico.n3 img:first-child { grid-row: 1 / 3; }
        .ff-vit-sem-foto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 42px; color: var(--ff-gold-txt-3); }
        .ff-vit-sem-foto img { width: 100%; height: 100%; object-fit: cover; }
        .ff-vit-selo { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; font-size: 11px; font-weight: 900; letter-spacing: .06em; color: #422006; background: linear-gradient(135deg, #fde68a, #fbbf24); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
        .ff-vit-fechada { position: absolute; top: 10px; right: 10px; padding: 5px 9px; border-radius: 10px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; font-weight: 800; }
        .ff-vit-corpo { display: flex; align-items: flex-start; gap: 12px; padding: 0 14px; margin-top: -22px; position: relative; }
        .ff-vit-avatar { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--ff-gold-txt-3); background: var(--ff-bg-2); border: 3px solid var(--ff-bg-2); box-shadow: 0 0 0 2px #f59e0b; }
        .ff-vit-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .ff-vit-info { min-width: 0; padding-top: 26px; }
        .ff-vit-info strong { display: block; font-size: 16px; font-weight: 900; letter-spacing: -.02em; color: rgb(var(--ff-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-vit-info small { display: block; margin-top: 1px; font-size: 12px; color: var(--ff-txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-vit-info em { display: block; margin-top: 3px; font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--ff-em-txt); }
        .ff-vit-acoes { display: flex; align-items: center; gap: 8px; padding: 12px 14px 14px; }
        .ff-vit-ver { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 12px; font-size: 13.5px; font-weight: 900; color: #422006; background: linear-gradient(135deg, #fde68a, #fbbf24 60%, #f59e0b); }
        .ff-vit-ver i { font-size: 12px; }
        .ff-vitrine-pontos { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
        .ff-vitrine-pontos:empty { display: none; }
        .ff-vitrine-pontos i { width: 6px; height: 6px; border-radius: 3px; background: rgba(var(--ff-ink),.22); transition: width .2s, background .2s; }
        .ff-vitrine-pontos i.on { width: 18px; background: #f59e0b; }
        /* convite para o feirante sem destaque */
        .ff-vit-convite { border-style: dashed; background: linear-gradient(135deg, rgba(245,158,11,.10), var(--ff-bg-2)); }
        .ff-vit-convite .ff-vit-capa { background: none; }
        .ff-vit-convite-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 0 20px; }
        .ff-vit-convite-txt i { font-size: 30px; color: #f59e0b; }
        .ff-vit-convite-txt strong { font-size: 18px; font-weight: 900; color: rgb(var(--ff-ink)); }
        .ff-vit-convite-txt small { font-size: 12.5px; color: var(--ff-txt-3); }

        /* Botão Seguir dourado (destaques) */
        .ff-seguir-ouro { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #422006; }
        .ff-seguir-ouro.seguindo { background: rgba(var(--ff-ink),.10); color: rgb(var(--ff-ink)); }

        /* Posts dourados no feed */
        .ff-post.destaque { background: linear-gradient(180deg, rgba(245,158,11,.10), rgba(245,158,11,0) 70%); border-top: 1px solid rgba(245,158,11,.35); border-bottom: 1px solid rgba(245,158,11,.25); }
        .ff-post-selo { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--ff-gold-txt-3); }
        html[data-tema="claro"] .ff-post-selo { color: #b45309; }
        .ff-post-cta { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; border: 0; cursor: pointer; font-size: 14px; font-weight: 900; color: #422006; background: linear-gradient(90deg, #fde68a, #fbbf24 55%, #f59e0b); }
        .ff-post-cta span { display: inline-flex; align-items: center; gap: 8px; }
        .ff-post.destaque .ff-post-acoes { margin-top: 4px; }

        /* Mapa: destaque grande, dourado e pulsando */
        .ff-pino.vip { width: 46px; height: 46px; font-size: 17px; overflow: visible; }
        .ff-pino.vip img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
        .ff-pino.pulsa::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid #fbbf24; animation: ffPulsaPino 1.8s ease-out infinite; pointer-events: none; }
        @keyframes ffPulsaPino { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
        @media (prefers-reduced-motion: reduce) { .ff-pino.pulsa::after { animation: none; } }
        .ff-pino .coroa { top: -15px; font-size: 14px; }
        .ff-pop-vip { width: 210px; display: flex; flex-direction: column; gap: 3px; font-family: inherit; }
        .ff-pop-capa { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; margin-bottom: 6px; background: rgba(var(--ff-ink),.06); }
        .ff-pop-capa .ff-vit-selo { top: 6px; left: 6px; padding: 3px 7px; font-size: 9.5px; }
        .ff-pop-vip strong { font-size: 14px; font-weight: 900; color: rgb(var(--ff-ink)); }
        .ff-pop-vip small { font-size: 11.5px; font-weight: 700; }
        .ff-pop-vip button { margin-top: 6px; height: 34px; border: 0; border-radius: 10px; cursor: pointer; font-size: 12.5px; font-weight: 900; color: #422006; background: linear-gradient(135deg, #fde68a, #fbbf24); }
        .ff-pino { position: relative; }
        .ff-vit-capa { overflow: hidden; }
        .ff-vit-mosaico { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
        .ff-vit-mosaico.n2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
        .ff-vit-mosaico.n3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
        .ff-vit-mosaico img { min-height: 0; }
        .ff-pop-vip { width: 190px; }
        .ff-pop-capa { aspect-ratio: 5 / 2; }

        /* ================================================================
           IMPULSIONAR POST, DESTACAR PRODUTO E PROMOÇÕES (30/09/2026)
           ================================================================ */
        .ff-thumb-verde { background: rgba(16,185,129,.16); color: var(--ff-em-txt); }
        /* preço de/por */
        .ff-preco-por { color: #fb7185; font-weight: 900; }
        html[data-tema="claro"] .ff-preco-por { color: #e11d48; }
        .ff-preco-de { color: rgba(var(--ff-ink),.45); font-weight: 600; font-size: .85em; }
        .ff-post-prod .ff-preco-por, .ff-tile-info .ff-preco-por, .ff-pcard .ff-preco-por { color: #fda4af; }
        .ff-post-prod .ff-preco-de, .ff-tile-info .ff-preco-de { color: rgba(255,255,255,.75); }
        .ff-selo-promo { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 8px; background: #e11d48; color: #fff; font-size: 11.5px; font-weight: 900; letter-spacing: .02em; vertical-align: middle; }
        .ff-selo-ouro { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 8px; font-size: 11px; font-weight: 900; color: #422006; background: linear-gradient(135deg, #fde68a, #fbbf24); }
        /* selos no carrossel do feed */
        .ff-slide-selos { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; pointer-events: none; }
        .ff-slide-selos .ff-selo-promo { font-size: 13px; padding: 4px 9px; }
        .ff-post-prazo { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.85); }
        /* post impulsionado (verde) */
        .ff-post.impulsionado { background: linear-gradient(180deg, rgba(16,185,129,.08), rgba(16,185,129,0) 60%); border-top: 1px solid rgba(16,185,129,.30); }
        .ff-post-impulso { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--ff-em-txt); }
        /* grade: coroa e -% */
        .ff-tile.destaque { box-shadow: inset 0 0 0 2px #f59e0b; }
        .ff-tile-coroa { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #422006; background: linear-gradient(135deg, #fde68a, #fbbf24); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
        .ff-tile-promo { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 7px; background: #e11d48; color: #fff; font-size: 11px; font-weight: 900; }
        .ff-tile.destaque .ff-tile-promo { top: 34px; }
        .ff-tile-info em { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
        /* faixas do Início */
        .ff-faixa { display: flex; flex-direction: column; gap: 8px; }
        .ff-faixa.hide { display: none; }
        .ff-faixa-titulo { display: flex; align-items: center; gap: 7px; margin: 0 2px; font-size: 15px; font-weight: 900; letter-spacing: -.02em; color: rgb(var(--ff-ink)); }
        .ff-faixa-titulo small { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ff-txt-3); }
        .ff-faixa-ouro .ff-faixa-titulo i { color: #f59e0b; }
        .ff-faixa-promo .ff-faixa-titulo i { color: #e11d48; }
        .ff-faixa-trilho { display: flex; gap: 10px; overflow-x: auto; margin: 0 calc(-1 * var(--ff-pad)); padding: 2px var(--ff-pad) 4px; scroll-snap-type: x proximity; }
        .ff-pcard { flex: 0 0 auto; width: 138px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; scroll-snap-align: start; }
        .ff-pcard-foto { position: relative; width: 138px; height: 138px; border-radius: 16px; overflow: hidden; display: block; background: rgba(var(--ff-ink),.06); margin-bottom: 4px; }
        .ff-pcard-foto > img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .ff-pcard.destaque .ff-pcard-foto { box-shadow: inset 0 0 0 2px #f59e0b, 0 6px 16px rgba(245,158,11,.18); }
        .ff-pcard.promo .ff-pcard-foto { box-shadow: inset 0 0 0 2px rgba(225,29,72,.7); }
        .ff-pcard-coroa { position: absolute; top: 7px; left: 7px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #422006; background: linear-gradient(135deg, #fde68a, #fbbf24); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
        .ff-pcard-promo { position: absolute; bottom: 8px; left: 8px; padding: 3px 8px; border-radius: 8px; background: #e11d48; color: #fff; font-size: 13px; font-weight: 900; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
        .ff-pcard .ff-tile-add { top: auto; bottom: 8px; right: 8px; }
        .ff-pcard strong { font-size: 13px; font-weight: 800; color: rgb(var(--ff-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-pcard em { font-style: normal; font-size: 13.5px; font-weight: 900; color: var(--ff-em-txt); display: flex; flex-wrap: wrap; gap: 0 5px; align-items: baseline; }
        .ff-pcard .ff-preco-por { color: #fb7185; }
        html[data-tema="claro"] .ff-pcard .ff-preco-por { color: #e11d48; }
        .ff-pcard small { font-size: 11.5px; color: var(--ff-txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-faixa-promo .ff-pcard small { color: #fb7185; font-weight: 700; }
        html[data-tema="claro"] .ff-faixa-promo .ff-pcard small { color: #e11d48; }
        /* detalhe do produto */
        .ff-sheet-preco .ff-preco-de { font-size: 15px; margin-left: 4px; }
        .ff-sheet-preco .ff-selo-promo { font-size: 12.5px; margin-left: 4px; }
        .ff-sheet-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
        .ff-sheet-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9px; font-size: 12px; font-weight: 800; }
        .ff-sheet-tags .promo { background: rgba(225,29,72,.14); color: #fb7185; }
        html[data-tema="claro"] .ff-sheet-tags .promo { color: #be123c; }
        .ff-sheet-tags .ouro { background: rgba(245,158,11,.16); color: var(--ff-gold-txt-3); }
        html[data-tema="claro"] .ff-sheet-tags .ouro { color: #b45309; }
        /* feirante: ações de cada produto */
        .ff-prod-bloco { display: flex; flex-direction: column; }
        .ff-prod-acoes { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
        .ff-chip-acao { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border-radius: 10px; cursor: pointer; font-size: 11.5px; white-space: nowrap; font-weight: 800; border: 1px solid var(--ff-line); background: rgba(var(--ff-ink),.04); color: var(--ff-txt-2); }
        .ff-chip-acao.promo i { color: #fb7185; }
        .ff-chip-acao.ouro i { color: #f59e0b; }
        .ff-chip-acao.promo.ativo { border-color: rgba(225,29,72,.5); background: rgba(225,29,72,.10); color: #fb7185; }
        .ff-chip-acao.ouro.ativo { border-color: rgba(245,158,11,.55); background: rgba(245,158,11,.12); color: var(--ff-gold-txt-3); }
        html[data-tema="claro"] .ff-chip-acao.promo.ativo { color: #be123c; }
        html[data-tema="claro"] .ff-chip-acao.ouro.ativo { color: #b45309; }
        /* janela da promoção */
        .ff-promo-caixa { max-width: 400px; }
        .ff-promo-caixa h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 900; color: rgb(var(--ff-ink)); }
        .ff-promo-caixa h3 i { color: #e11d48; }
        .ff-promo-caixa p { font-size: 13.5px; }
        .ff-promo-ativa { margin-top: 6px !important; color: #fb7185 !important; font-weight: 800; }
        .ff-promo-campo { display: block; margin-top: 14px; color: var(--ff-txt-3); font-size: 12.5px; font-weight: 800; }
        .ff-promo-campo span { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 0 14px; height: 52px; border-radius: 14px; border: 1px solid var(--ff-line); background: rgba(var(--ff-ink),.05); }
        .ff-promo-campo em { font-style: normal; font-weight: 800; color: var(--ff-txt-3); font-size: 18px; }
        body .ff-promo-campo #promoPrecoInput, body .ff-promo-campo #promoPrecoInput:focus { flex: 1; min-width: 0; height: 100%; border: 0 !important; border-radius: 0 !important; background: none !important; padding: 0 !important; font-size: 22px; font-weight: 900; color: rgb(var(--ff-ink)) !important; outline: none !important; box-shadow: none !important; }
        .ff-promo-campo span:focus-within { border-color: rgba(16,185,129,.6); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
        .ff-promo-pct { margin-top: 6px !important; min-height: 18px; color: var(--ff-em-txt) !important; font-size: 12.5px !important; font-weight: 800; }
        .ff-promo-pct.erro { color: #fb7185 !important; }
        .ff-promo-rotulo { display: block; margin-top: 10px; color: var(--ff-txt-3); font-size: 12.5px; font-weight: 800; }
        .ff-promo-caixa .ff-chips { margin-top: 6px; flex-wrap: wrap; }
        .ff-promo-nota { margin-top: 12px !important; color: var(--ff-txt-3) !important; font-size: 12px !important; line-height: 1.45 !important; }

        /* ══════════ ENTREGAS: VÁRIAS BARRACAS, CÓDIGO, MAPA AO VIVO E ESTRELAS ══════════ */
        /* carrinho com várias barracas */
        .ff-item-cab .ff-cab-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-item-cab .ff-cab-sub { flex: none; color: var(--ff-txt-2); font-weight: 800; }
        .ff-carrinho-varias { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 11px 13px; border-radius: 14px; background: var(--ff-em-soft); border: 1px solid var(--ff-em-line); color: var(--ff-txt-2); font-size: 12.5px; line-height: 1.45; }
        .ff-carrinho-varias i { margin-top: 2px; color: var(--ff-em-txt); }
        .ff-carrinho-varias b { color: rgb(var(--ff-ink)); }
        #notaReofertaMotoboy i { color: var(--ff-gold-txt-3); margin-right: 3px; }
        /* tela de sucesso: um PIX por barraca */
        .ff-pix-varios { text-align: left; gap: 10px; padding: 14px; }
        .ff-pix-varios-topo { display: flex; align-items: center; gap: 10px; }
        .ff-pix-varios-topo .n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ff-em-soft); color: var(--ff-em-txt); font-size: 12px; font-weight: 900; }
        .ff-pix-varios-topo strong { flex: 1; min-width: 0; color: rgb(var(--ff-ink)); font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ff-pix-varios-topo span:last-child { flex: none; color: var(--ff-txt-3); font-size: 12.5px; font-weight: 800; }
        .ff-pix-varios .ff-pix-status { justify-content: flex-start; }
        .ff-pix-varios.pago { border-color: var(--ff-em-line); background: var(--ff-em-soft); }
        .ff-pix-varios.pago .ff-pix-copiar { display: none; }
        .ff-pix-varios.pago .n { background: #10b981; color: #fff; }
        /* pedido do cliente: entrega junta */
        .ff-junto-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
        .ff-junto-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(var(--ff-ink),.03); border: 1px solid var(--ff-line); }
        .ff-junto-item .ff-thumb { width: 38px; height: 38px; border-radius: 11px; }
        .ff-junto-item .ff-item-txt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .ff-junto-item.cancelado { opacity: .55; }
        .ff-junto-lado { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11.5px; font-weight: 800; }
        .ff-junto-chat { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: 8px; border: 1px solid var(--ff-line); background: rgba(var(--ff-ink),.05); color: var(--ff-txt-2); font-size: 12px; cursor: pointer; }
        .ff-junto-chat .ff-ponto-novo { position: absolute; top: -3px; right: -3px; }
        /* linha do motoboy: junto, subiu, código, PIX, estrelas */
        .ff-mb-junto, .ff-mb-subiu { flex-basis: 100%; color: var(--ff-txt-3); font-size: 12px; font-weight: 600; line-height: 1.45; }
        .ff-mb-junto i { color: var(--ff-em-txt); margin-right: 3px; }
        .ff-mb-subiu { color: var(--ff-gold-txt); }
        .ff-mb-codigo { flex-basis: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; background: rgba(37,99,235,.10); border: 1px dashed rgba(96,165,250,.55); }
        .ff-mb-codigo > i { color: #60a5fa; font-size: 15px; }
        .ff-mb-codigo > span { display: flex; flex-direction: column; color: var(--ff-txt-2); font-size: 12px; font-weight: 700; }
        .ff-mb-codigo b { color: rgb(var(--ff-ink)); font-size: 22px; font-weight: 900; letter-spacing: .28em; font-variant-numeric: tabular-nums; line-height: 1.15; }
        .ff-mb-codigo small { color: var(--ff-txt-3); font-size: 11.5px; font-weight: 600; }
        .ff-mb-pagar { display: flex; gap: 4px; align-items: flex-start; }
        .ff-mb-pagar > span small { display: block; margin-top: 2px; color: var(--ff-txt-4); font-size: 11px; }
        .ff-mb-avaliar { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--ff-txt-2); font-size: 12.5px; font-weight: 700; }
        .ff-mb-avaliar .estrelas { display: inline-flex; gap: 2px; }
        .ff-uber-linha .ff-mb-avaliar .estrelas button { width: 32px; height: 32px; padding: 0; justify-content: center; border: 0; background: none; color: #f59e0b; font-size: 22px; line-height: 1; }
        .ff-mb-nota-dada { flex-basis: 100%; color: var(--ff-gold-txt); font-size: 12.5px; font-weight: 800; }
        /* mapa ao vivo */
        .ff-mb-rastreio { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; }
        .ff-mb-rastreio-mapa { height: 210px; border-radius: 14px; overflow: hidden; border: 1px solid var(--ff-line); z-index: 0; }
        .ff-mb-previsao { margin: 0; color: var(--ff-txt-2); font-size: 12.5px; font-weight: 700; }
        .ff-mb-previsao i { color: var(--ff-em-txt); margin-right: 4px; }
        .ff-mb-previsao b { color: rgb(var(--ff-ink)); }
        .ff-pino.ff-pino-moto { width: 36px; height: 36px; background: #f59e0b; color: #111; font-size: 15px; border-width: 3px; }
        .ff-pino.ff-pino-moto::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid rgba(245,158,11,.6); animation: ffPulsaPino 1.8s ease-out infinite; pointer-events: none; }
        /* janela de estrelas */
        .ff-avaliar-mb { text-align: center; }
        .ff-avaliar-mb h3 { margin: 0 0 4px; color: rgb(var(--ff-ink)); font-size: 17px; font-weight: 900; }
        .ff-avaliar-mb .estrelas { display: flex; justify-content: center; gap: 4px; margin: 8px 0 2px; }
        .ff-avaliar-mb .estrelas button { width: 46px; height: 46px; border: 0; background: none; color: rgba(var(--ff-ink),.22); font-size: 36px; line-height: 1; cursor: pointer; transition: transform .12s, color .12s; }
        .ff-avaliar-mb .estrelas button.on { color: #f59e0b; }
        .ff-avaliar-mb .estrelas button:active { transform: scale(.88); }
        .ff-avaliar-mb-txt { min-height: 18px; margin: 0 0 10px; color: var(--ff-gold-txt); font-size: 13px; font-weight: 800; }
        .ff-avaliar-mb textarea { width: 100%; padding: 11px 13px; font-size: 14px; resize: none; text-align: left; }
        /* motoboy: corrida junta, várias paradas, código */
        .ff-mb-corrida.junta { border-color: var(--ff-em-line); }
        .ff-mb-valor small { display: block; color: var(--ff-gold-txt); font-size: 11px; font-weight: 800; text-align: right; letter-spacing: 0; }
        .ff-mb-separando { font-style: normal; color: var(--ff-gold-txt); font-size: 11.5px; font-weight: 800; }
        .ff-mb-passos .ff-mb-peguei { margin-top: 8px; }
        .ff-mb-cod-aviso { background: rgba(37,99,235,.10); border-color: rgba(96,165,250,.45); }
        .ff-mb-cod-aviso i { color: #60a5fa; }
        .ff-mb-cod-aviso b { color: rgb(var(--ff-ink)); }
        .ff-codigo-caixa { text-align: center; }
        .ff-codigo-caixa h3 { margin: 0 0 6px; display: flex; align-items: center; justify-content: center; gap: 8px; color: rgb(var(--ff-ink)); font-size: 17px; font-weight: 900; }
        .ff-codigo-caixa h3 i { color: #60a5fa; }
        body .ff-codigo-caixa #mbCodigoInput { width: 190px; height: 64px; margin: 12px auto 0; display: block; text-align: center; font-size: 34px !important; font-weight: 900; letter-spacing: .4em; padding: 0 0 0 .4em !important; font-variant-numeric: tabular-nums; }
        .ff-codigo-erro { min-height: 18px; margin: 8px 0 0 !important; color: var(--ff-rose-txt) !important; font-size: 12.5px !important; font-weight: 700; }
        .ff-mb-nota-media { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ff-line); color: var(--ff-gold-txt); font-size: 16px; font-weight: 900; }
        .ff-mb-nota-media small { color: var(--ff-txt-3); font-size: 12px; font-weight: 700; }
        html[data-tema="claro"] .ff-mb-codigo { background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.35); }
        html[data-tema="claro"] .ff-mb-codigo > i, html[data-tema="claro"] .ff-mb-cod-aviso i, html[data-tema="claro"] .ff-codigo-caixa h3 i { color: #2563eb; }
        html[data-tema="claro"] .ff-mb-subiu, html[data-tema="claro"] .ff-mb-separando { color: #b45309; }

        /* ═══════════ STORY, CURTIDAS E COMENTÁRIOS (atualizacao-banco-14.sql) ═══════════ */
        /* Anel de story novo: degradê verde → amarelo → laranja (a cor do FeiraFácil) */
        .ff-story-item { position: relative; flex: 0 0 auto; display: block; }
        .ff-story-anel.story { padding: 3px; background: conic-gradient(from 210deg, #10b981, #84cc16, #facc15, #f97316, #10b981); }
        .ff-story-mais { position: absolute; top: 48px; left: 48px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ff-bg); background: #10b981; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
        .ff-post-avatar.story::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; padding: 2px; background: conic-gradient(from 210deg, #10b981, #84cc16, #facc15, #f97316, #10b981); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
        .ff-post-avatar.story { overflow: visible; position: relative; box-shadow: 0 0 0 2px var(--ff-bg); }
        .ff-post-avatar.story img { border-radius: 50%; }
        .ff-perfil-foto.story { background: conic-gradient(from 210deg, #10b981, #84cc16, #facc15, #f97316, #10b981); }
        .ff-perfil-foto.clicavel { cursor: pointer; }
        .ff-thumb-story { background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(249,115,22,.18)); color: #f97316; }

        /* Tela cheia do story */
        .ff-story-ov { position: fixed; inset: 0; z-index: 100001; background: #000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; touch-action: none; }
        .ff-story-ov.on { opacity: 1; }
        .ff-story-palco { position: relative; width: 100%; height: 100%; max-width: 480px; overflow: hidden; background: #000; color: #fff; user-select: none; -webkit-user-select: none; }
        @media (min-width: 640px) { .ff-story-palco { height: min(100%, 860px); border-radius: 18px; } }
        .ff-story-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
        .ff-story-carregando { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 28px; color: rgba(255,255,255,.8); display: none; }
        .ff-story-ov.carregando .ff-story-carregando { display: block; }
        .ff-story-barras { position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px; z-index: 3; display: flex; gap: 4px; }
        .ff-story-barras span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
        .ff-story-barras i { display: block; height: 100%; width: 0; background: #fff; }
        .ff-story-cab { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 6px 8px 24px 12px; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)); }
        .ff-story-quem { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: #fff; cursor: pointer; text-align: left; }
        .ff-story-av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.2); font-size: 14px; border: 2px solid rgba(255,255,255,.85); }
        .ff-story-av img { width: 100%; height: 100%; object-fit: cover; }
        .ff-story-nome { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
        .ff-story-nome strong { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
        .ff-story-nome small { flex: 0 0 auto; font-size: 12.5px; color: rgba(255,255,255,.75); }
        .ff-story-titulo { flex: 1; font-size: 16px; font-weight: 800; }
        .ff-story-btn { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.25); color: #fff; font-size: 19px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
        .ff-story-btn.hide { display: none; }
        .ff-story-toque { position: absolute; left: 0; right: 0; top: 70px; bottom: 90px; z-index: 2; }
        .ff-story-legenda { position: absolute; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 3; margin: 0; padding: 40px 18px 12px; font-size: 16px; font-weight: 700; line-height: 1.4; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.7); background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0)); pointer-events: none; white-space: pre-wrap; overflow-wrap: anywhere; }
        .ff-story-legenda.hide { display: none; }
        .ff-story-rodape { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(0,0,0,.55); }
        .ff-story-acao { height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.08); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
        .ff-story-acao.pri { flex: 1; border-color: transparent; background: #10b981; }
        .ff-story-acao:disabled { opacity: .6; }
        .ff-story-rodape .ff-acao-curtir { width: 44px; padding: 0; font-size: 19px; }
        .ff-story-rodape .ff-acao-curtir.on { color: #f43f5e; border-color: rgba(244,63,94,.6); }
        .ff-story-vistas { flex: 1; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9); display: inline-flex; align-items: center; gap: 8px; }
        .ff-story-rodape .ff-story-vistas + .ff-story-acao.pri { flex: 0 0 auto; }
        /* Postar story */
        .ff-story-editor .ff-story-cab { top: env(safe-area-inset-top, 0px); }
        .ff-story-editor-rodape { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 30px 14px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, rgba(0,0,0,.85) 60%, rgba(0,0,0,0)); }
        .ff-story-legenda-campo { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 48px; border-radius: 24px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
        .ff-story-legenda-campo input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font-size: 16px; }
        .ff-story-legenda-campo input::placeholder { color: rgba(255,255,255,.65) !important; }
        .ff-story-legenda-campo small { color: rgba(255,255,255,.6); font-size: 12px; }
        .ff-story-dica { margin: 10px 4px; font-size: 12.5px; color: rgba(255,255,255,.75); }
        .ff-story-editor-botoes { display: flex; gap: 8px; }

        /* Curtir */
        .ff-acao-curtir.on, .ff-acao-curtir.on i { color: #f43f5e; }
        .ff-acao-curtir.pop i { animation: ffCoracao .45s cubic-bezier(.2,.8,.2,1.4); }
        @keyframes ffCoracao { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
        .ff-post-pontos-foto { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; pointer-events: none; }
        .ff-post-pontos-foto i { background: rgba(255,255,255,.55); box-shadow: 0 0 3px rgba(0,0,0,.4); }
        .ff-post-pontos-foto i.on { background: #fff; }
        .ff-post-nums.hide { display: none; }
        .ff-post-coments { display: block; margin: 4px 14px 0; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ff-txt-3); font-size: 13.5px; text-align: left; }

        /* Perfil: curtidas e comentários */
        .ff-perfil-social { display: flex; gap: 8px; margin: 0 0 12px; }
        .ff-perfil-social.hide { display: none; }
        .ff-perfil-social-btn { flex: 1; height: 38px; border-radius: 10px; border: 1px solid rgba(var(--ff-ink),.12); background: rgba(var(--ff-ink),.04); color: rgb(var(--ff-ink)); font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
        .ff-perfil-social-btn b { font-weight: 900; }
        .ff-perfil-social-btn.so-numero { cursor: default; }
        .ff-perfil-social-btn.on { border-color: rgba(244,63,94,.45); background: rgba(244,63,94,.08); }

        /* Resumo do feirante: seguidores, curtidas, comentários, story */
        .ff-hoje-social { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; color: var(--ff-txt-2); font-size: 12px; font-weight: 700; }
        .ff-hoje-social.hide { display: none; }
        .ff-hoje-social i { color: var(--ff-em-txt); margin-right: 3px; }

        /* Comentários */
        .ff-coment-sheet { display: flex; flex-direction: column; height: min(82vh, 720px); overflow: hidden; }
        .ff-coment-cab { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; padding: 24px 60px 10px 18px; border-bottom: 1px solid rgba(var(--ff-ink),.08); }
        .ff-coment-cab strong { font-size: 17px; font-weight: 900; color: rgb(var(--ff-ink)); }
        .ff-coment-cab small { color: var(--ff-txt-3); font-size: 13px; }
        .ff-coment-privado { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin: 8px 14px 0; padding: 9px 12px; border-radius: 12px; border: 0; background: rgba(16,185,129,.10); color: var(--ff-txt-2); font-size: 12.5px; text-align: left; cursor: pointer; }
        .ff-coment-privado b { color: var(--ff-em-txt); }
        .ff-coment-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 14px 12px; }
        .ff-coment { display: flex; gap: 10px; padding: 10px 0; }
        .ff-coment-foto { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(var(--ff-ink),.08); color: var(--ff-em-txt); font-size: 13px; }
        .ff-coment-foto img { width: 100%; height: 100%; object-fit: cover; }
        .ff-coment-corpo { flex: 1; min-width: 0; }
        .ff-coment-topo { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; }
        .ff-coment-nome { padding: 0; border: 0; background: none; font-size: 13.5px; font-weight: 800; color: rgb(var(--ff-ink)); cursor: pointer; }
        strong.ff-coment-nome { cursor: default; }
        .ff-coment-topo small { color: var(--ff-txt-3); font-size: 12px; }
        .ff-coment-tag { padding: 1px 7px; border-radius: 8px; font-size: 10.5px; font-weight: 800; background: rgba(16,185,129,.16); color: var(--ff-em-txt); }
        .ff-coment-tag.equipe { background: rgba(59,130,246,.16); color: #60a5fa; }
        .ff-coment-resp-a { margin: 2px 0 0; font-size: 12px; color: var(--ff-txt-3); }
        .ff-coment-resp-a i { font-size: 10px; margin-right: 3px; }
        .ff-coment-txt { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: rgba(var(--ff-ink),.92); white-space: pre-wrap; overflow-wrap: anywhere; }
        .ff-coment-acoes { display: flex; gap: 14px; margin-top: 4px; }
        .ff-coment-acoes button { padding: 0; border: 0; background: none; cursor: pointer; font-size: 12px; font-weight: 800; color: var(--ff-txt-3); }
        .ff-coment-acoes button.apagar { color: #f87171; }
        .ff-coment.dono .ff-coment-txt { color: rgb(var(--ff-ink)); }
        .ff-coment-vazio { margin: 32px 10px; text-align: center; color: var(--ff-txt-3); font-size: 14px; line-height: 1.5; }
        .ff-coment-vazio i { display: block; font-size: 30px; margin-bottom: 10px; color: var(--ff-em-txt); opacity: .8; }
        .ff-coment-antigos { display: block; margin: 4px auto 6px; padding: 6px 12px; border-radius: 10px; border: 0; background: rgba(var(--ff-ink),.06); color: var(--ff-txt-2); font-size: 12.5px; font-weight: 800; cursor: pointer; }
        .ff-coment-form { flex: 0 0 auto; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(var(--ff-ink),.08); background: var(--ff-bg); }
        .ff-coment-form.hide { display: none; }
        .ff-coment-resp { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 8px; font-size: 12.5px; color: var(--ff-txt-2); }
        .ff-coment-resp.hide { display: none; }
        .ff-coment-resp button { border: 0; background: none; color: var(--ff-txt-3); cursor: pointer; font-size: 14px; }
        .ff-coment-linha { display: flex; align-items: center; gap: 8px; }
        .ff-coment-linha input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 21px; border: 1px solid rgba(var(--ff-ink),.14); background: rgba(var(--ff-ink),.05); color: rgb(var(--ff-ink)); font-size: 16px; outline: none; }
        .ff-coment-linha input:focus { border-color: #10b981; }
        .ff-coment-enviar { flex: 0 0 auto; height: 42px; padding: 0 12px; border: 0; background: none; color: var(--ff-em-txt); font-size: 14px; font-weight: 900; cursor: pointer; }
        .ff-coment-enviar:disabled { opacity: .5; }

        /* Mapa: botão de voltar ao centro */
        .ff-mapa-centro { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--ff-line); background: var(--ff-solid); color: var(--ff-em-txt); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
        .ff-mapa-centro:active { transform: scale(.94); }
        html[data-tema="claro"] .ff-coment-tag.equipe { color: #1d4ed8; }
        html[data-tema="claro"] .ff-coment-acoes button.apagar { color: #dc2626; }

        /* Cartaz com QR code (cartaz.html) */
        a.ff-item { text-decoration: none; color: inherit; }
        .ff-adm-cartaz { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255,210,63,.14); color: #fde68a; font-size: 13px; font-weight: 800; text-decoration: none; }
        .ff-adm-cartaz i:last-child { margin-left: auto; font-size: 11px; opacity: .8; }

/* ---------- AVISOS DO ADM + DIAS GRÁTIS (12/10/2026) ---------- */
.ff-adm-atalhos { display: flex; gap: 8px; flex-wrap: wrap; }
.ff-adm-atalhos > button { flex: 1 1 140px; }
.ff-aviso-adm-txt { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(var(--ff-ink),.8); max-height: 7.3em; overflow: hidden; }
.ff-adm-situacao { font-weight: 700; }
.ff-adm-situacao.gratis, .ff-adm-situacao.plano { color: var(--ff-em-txt); }
.ff-adm-situacao.vencido { color: #f43f5e; }
.ff-adm-campo > span small { font-weight: 600; text-transform: none; letter-spacing: 0; float: right; }
.ff-adm-zap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ff-adm-zap-btn i, .ff-zap-btn i { font-size: 15px; }
.ff-adm-quem { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(var(--ff-ink),.85); }
.ff-adm-quem small { color: rgba(var(--ff-ink),.55); font-size: 12px; }
.ff-adm-dias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ff-adm-dias label { cursor: pointer; }
.ff-adm-dias input { position: absolute; opacity: 0; pointer-events: none; }
.ff-adm-dias span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; border-radius: 14px; font-size: 22px; font-weight: 900; color: rgb(var(--ff-ink)); background: rgba(var(--ff-ink),.05); border: 2px solid rgba(var(--ff-ink),.10); transition: border-color .15s, background .15s; }
.ff-adm-dias span small { font-size: 11px; font-weight: 700; color: rgba(var(--ff-ink),.55); }
.ff-adm-dias input:checked + span { border-color: #10b981; background: rgba(16,185,129,.14); }
.ff-adm-dias input:focus-visible + span { box-shadow: 0 0 0 3px rgba(16,185,129,.35); }
.ff-zap-lista { display: flex; flex-direction: column; gap: 8px; }
.ff-zap-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--ff-ink),.04); border: 1px solid rgba(var(--ff-ink),.08); }
.ff-zap-item strong { display: block; font-size: 13.5px; color: rgb(var(--ff-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-zap-item small { font-size: 11.5px; color: rgba(var(--ff-ink),.55); }
.ff-zap-btn { flex: 0 0 auto; padding: 0 14px; text-decoration: none; background: linear-gradient(135deg, #25d366, #128c7e); }
.ff-zap-item.feito { opacity: .7; }
.ff-zap-item.feito .ff-zap-btn { background: rgba(var(--ff-ink),.12); color: rgba(var(--ff-ink),.75); }
/* Sininho do feirante */
.ff-topo-num { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #f43f5e; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--ff-bg); }
.ff-topo-num.hide { display: none; }
/* Caixa de avisos */
.ff-avadm-sheet { padding: 26px 16px 20px; }
.ff-avadm-sheet > h3 { margin: 0 44px 14px 0; font-size: 18px; font-weight: 900; color: rgb(var(--ff-ink)); }
.ff-avadm-lista { display: flex; flex-direction: column; gap: 10px; }
.ff-avadm-plano { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(16,185,129,.3); background: rgba(16,185,129,.1); color: rgb(var(--ff-ink)); font: inherit; }
.ff-avadm-plano > i:first-child { font-size: 18px; color: var(--ff-em-txt); }
.ff-avadm-plano span { flex: 1; display: flex; flex-direction: column; }
.ff-avadm-plano strong { font-size: 13.5px; }
.ff-avadm-plano small { font-size: 12px; color: rgba(var(--ff-ink),.6); }
.ff-avadm-plano.venc { cursor: pointer; border-color: rgba(244,63,94,.35); background: rgba(244,63,94,.08); }
.ff-avadm-plano.venc > i:first-child { color: #f43f5e; }
.ff-avadm-item { padding: 13px 14px; border-radius: 16px; background: rgba(var(--ff-ink),.04); border: 1px solid rgba(var(--ff-ink),.08); }
.ff-avadm-item.novo { border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.07); }
.ff-avadm-item.presente { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.08); }
.ff-avadm-item header { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; }
.ff-avadm-item strong { font-size: 14px; color: rgb(var(--ff-ink)); }
.ff-avadm-item p { margin: 6px 0; font-size: 13.5px; line-height: 1.5; color: rgba(var(--ff-ink),.82); overflow-wrap: anywhere; }
.ff-avadm-item small { font-size: 11.5px; color: rgba(var(--ff-ink),.5); }
.ff-avadm-novo { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: #10b981; color: #fff; font-size: 10.5px; font-weight: 800; }
/* Janela do aviso importante / dias grátis */
.ff-avadm-janela { text-align: center; }
.ff-avadm-janela .ff-avadm-ico { font-size: 44px; line-height: 1; margin-bottom: 8px; }
.ff-avadm-janela h3 { margin: 0 0 10px; font-size: 19px; font-weight: 900; color: rgb(var(--ff-ink)); }
.ff-avadm-janela p { text-align: left; max-height: 45vh; overflow-y: auto; overflow-wrap: anywhere; }
.ff-avadm-janela > small { display: block; margin-top: 10px; font-size: 11.5px; color: rgba(var(--ff-ink),.5); }
.ff-avadm-janela.presente { border-color: rgba(245,158,11,.45); }

/* ================================================================
   VISITANTE (SEM CONTA) — 13/10/2026
   Botão "Entrar" no topo, janela "Criar conta / Já tenho conta / Agora não",
   aviso de entrega no carrinho e a faixa "Entre para comentar".
   ================================================================ */
#appPrincipal > header .ff-topo-entrar {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; min-height: 38px; padding: 0 14px;
    border-radius: 12px !important; font-size: 13.5px; font-weight: 800; cursor: pointer; white-space: nowrap;
    background: transparent !important; color: var(--ff-em-txt) !important; border: 1.5px solid var(--ff-em-line) !important;
}
#appPrincipal > header .ff-topo-entrar:hover { background: var(--ff-em-soft) !important; color: var(--ff-em-txt) !important; }
#appPrincipal > header .ff-topo-entrar i { font-size: 13px; }

.ff-conta-caixa { text-align: center; padding-top: 26px; }
.ff-conta-ico { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 10px 26px rgba(16,185,129,.35); }
.ff-conta-caixa h3 { margin: 0 0 8px; font-size: 19px; font-weight: 900; letter-spacing: -.01em; color: rgb(var(--ff-ink)); }
.ff-conta-caixa p { font-size: 14px; color: var(--ff-txt-2); }
.ff-conta-botoes { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.ff-conta-botoes button { min-height: 48px; border-radius: 14px; font-weight: 800; font-size: 14.5px; cursor: pointer; border: 0; }
.ff-conta-depois { margin-top: 8px; padding: 10px 16px; border: 0; background: none; color: var(--ff-txt-3); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.ff-conta-depois:hover { color: rgb(var(--ff-ink)); }

.ff-entrega-visitante { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 12px 12px 14px; border-radius: 14px; border: 1px dashed var(--ff-em-line); background: var(--ff-em-soft); }
.ff-entrega-visitante > i { font-size: 18px; color: var(--ff-em-txt); }
.ff-entrega-visitante span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ff-entrega-visitante strong { font-size: 13.5px; color: rgb(var(--ff-ink)); }
.ff-entrega-visitante small { font-size: 12px; line-height: 1.4; color: var(--ff-txt-3); }
.ff-entrega-visitante button { flex: 0 0 auto; height: 36px; padding: 0 14px; border-radius: 11px; border: 0; background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; }

.ff-coment-entrar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(var(--ff-ink),.08); background: var(--ff-bg); }
.ff-coment-entrar span { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--ff-txt-2); }
.ff-coment-entrar button { flex: 0 0 auto; height: 38px; padding: 0 16px; border-radius: 12px; border: 0; background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; }

/* ---------- PAINEL DO ADM: HOJE NO APP + COBRAR INCOMPLETAS (13/10/2026) ---------- */
.ff-adm-hoje { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: rgba(var(--ff-ink),.04); border: 1px solid var(--ff-line); }
.ff-adm-hoje-tit { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ff-em-txt); }
.ff-adm-hoje-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ff-adm-hoje-grade span { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 12px; background: rgba(var(--ff-ink),.05); min-width: 0; }
.ff-adm-hoje-grade strong { font-size: 18px; font-weight: 900; line-height: 1.15; color: rgb(var(--ff-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-adm-hoje-grade small { font-size: 11px; font-weight: 600; line-height: 1.25; color: var(--ff-txt-3); }
.ff-adm-hoje-sub { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ff-txt-3); }
.ff-adm-hoje-alerta { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 9px 10px; border: 1px solid rgba(244,63,94,.35); border-radius: 12px; background: rgba(244,63,94,.10); color: var(--ff-rose-txt); font-size: 12px; font-weight: 700; line-height: 1.35; text-align: left; cursor: pointer; }
.ff-adm-hoje-alerta i { margin-top: 2px; }
@media (min-width: 520px) { .ff-adm-hoje-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ff-adm-falta { color: var(--ff-gold-txt) !important; font-weight: 700; }
.ff-adm-falta i { margin-right: 3px; }
.ff-adm-cobrar { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.ff-adm-cobrar-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--ff-ink),.04); border: 1px solid rgba(var(--ff-ink),.08); cursor: pointer; }
.ff-adm-cobrar-item input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: #10b981; }
.ff-adm-cobrar-item span { min-width: 0; }
.ff-adm-cobrar-item strong { display: block; font-size: 13.5px; color: rgb(var(--ff-ink)); }
.ff-adm-cobrar-item small { display: block; font-size: 11.5px; line-height: 1.35; color: rgba(var(--ff-ink),.6); }
/* Tema claro: título do painel e link dos cartazes ficavam claros demais sobre o fundo branco */
html[data-tema="claro"] #visãoAdmin > div:first-child h2 { color: var(--ff-txt) !important; }
html[data-tema="claro"] .ff-adm-cartaz { background: var(--ff-gold-soft); color: var(--ff-gold-txt-2); }
/* Ranking de indicações no painel do ADM (13/10/2026) */
.ff-adm-rank summary { cursor: pointer; font-size: 12px; font-weight: 800; color: var(--ff-gold-txt); list-style: none; }
.ff-adm-rank summary::-webkit-details-marker { display: none; }
.ff-adm-rank ol { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; counter-reset: rk; }
.ff-adm-rank li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(var(--ff-ink),.05); font-size: 12.5px; color: rgb(var(--ff-ink)); counter-increment: rk; }
.ff-adm-rank li::before { content: counter(rk); font-weight: 900; color: var(--ff-txt-3); min-width: 14px; }
.ff-adm-rank li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-adm-rank li b { font-size: 15px; } .ff-adm-rank li small { color: var(--ff-txt-3); font-size: 11px; }

/* ---------- CUPONS DE 5% E CONVITES (14/10/2026) ---------- */
.ff-cupom-faixa { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(245,158,11,.35); background: var(--ff-gold-soft); color: rgb(var(--ff-ink)); text-align: left; cursor: pointer; }
.ff-cupom-faixa > i:first-child { font-size: 22px; color: var(--ff-gold-txt-3); }
.ff-cupom-faixa span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ff-cupom-faixa strong { font-size: 14px; font-weight: 800; } .ff-cupom-faixa small { font-size: 12px; color: var(--ff-txt-3); }
.ff-cupons { display: flex; flex-direction: column; gap: 8px; }
.ff-cupons-topo { display: flex; gap: 10px; align-items: flex-start; } .ff-cupons-topo > i { font-size: 20px; color: var(--ff-gold-txt-3); margin-top: 2px; }
.ff-cupons-topo strong { display: block; font-size: 15px; font-weight: 800; } .ff-cupons-topo small { font-size: 12px; color: var(--ff-txt-3); line-height: 1.4; }
.ff-cupom-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--ff-ink),.05); border: 1px dashed rgba(245,158,11,.5); }
.ff-cupom-pct { font-size: 18px; font-weight: 900; color: var(--ff-gold-txt-3); min-width: 44px; }
.ff-cupom-item strong { display: block; font-size: 13.5px; } .ff-cupom-item small { font-size: 11.5px; color: var(--ff-txt-3); }
.ff-cupom-vazio { margin: 0; font-size: 12.5px; color: var(--ff-txt-3); }
.ff-convite { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--ff-em-soft); border: 1px solid var(--ff-em-line); }
.ff-convite strong { font-size: 14px; } .ff-convite small { font-size: 12px; color: var(--ff-txt-2); line-height: 1.4; }
.ff-convite-link code { display: block; font-size: 11px; word-break: break-all; color: var(--ff-txt-3); }
.ff-selo-cupom { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--ff-gold-soft); color: var(--ff-gold-txt); font-size: 11px; font-weight: 800; }
.ff-desc-tag { font-size: 11px; font-weight: 700; color: var(--ff-gold-txt); }
.ff-adm-dias { grid-template-columns: repeat(4, 1fr); }
.ff-adm-rank li .ff-link-mini { margin-left: 4px; }
/* Importar catálogo do WhatsApp (14/10/2026) */
#btnImportarWhats { margin-top: 12px; width: 100%; text-align: left; }
.ff-imp-lista { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.ff-imp-item { display: flex; gap: 10px; padding: 8px; border-radius: 14px; background: rgba(var(--ff-ink),.04); border: 1px solid rgba(var(--ff-ink),.08); }
.ff-imp-item.ok { border-color: var(--ff-em-line); background: var(--ff-em-soft); } .ff-imp-item.erro { border-color: rgba(244,63,94,.45); }
.ff-imp-foto { flex: 0 0 56px; height: 56px; border-radius: 12px; background: rgba(var(--ff-ink),.08); display: flex; align-items: center; justify-content: center; color: var(--ff-txt-3); cursor: pointer; overflow: hidden; }
.ff-imp-foto img { width: 100%; height: 100%; object-fit: cover; }
.ff-imp-campos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ff-imp-campos input { width: 100%; min-width: 0; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--ff-line); background: var(--ff-solid); color: rgb(var(--ff-ink)); font-size: 13px; }
.ff-imp-linha { display: grid; grid-template-columns: 1fr 72px 32px; gap: 6px; align-items: center; }
.ff-imp-x { height: 32px; border-radius: 10px; border: 1px solid var(--ff-line); background: transparent; color: var(--ff-txt-3); cursor: pointer; }
.ff-imp-st { text-align: center; } .ff-imp-erro { color: var(--ff-rose-txt); font-size: 11.5px; }

        /* ADM: mapa para escolher onde a barraca fica */
        .ff-adm-mapa-bloco { display: flex; flex-direction: column; gap: 8px; }
        .ff-adm-mapa-titulo { margin: 0; font-size: 13px; font-weight: 800; color: rgb(var(--ff-ink)); }
        .ff-adm-mapa-busca { display: flex; gap: 6px; }
        .ff-adm-mapa-busca input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid rgba(var(--ff-ink),.14); border-radius: 12px; padding: 9px 12px; font-size: 14px; background: rgba(var(--ff-ink),.05); color: rgb(var(--ff-ink)); outline: none; }
        .ff-adm-mapa-busca .ff-rec-btn-sec { padding: 0 12px; }
        .ff-adm-mapa { height: 230px; border-radius: 14px; overflow: hidden; background: rgba(var(--ff-ink),.06); position: relative; z-index: 0; }
        .ff-adm-mapa .ff-vazio { padding: 24px 14px; }

.ff-cupom-linha { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--ff-gold-soft); border: 1px solid rgba(245,158,11,.3); }
.ff-cupom-linha > i { font-size: 18px; color: var(--ff-gold-txt-3); flex: 0 0 auto; }
.ff-cupom-linha > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ff-cupom-linha strong { font-size: 13.5px; } .ff-cupom-linha small { font-size: 11.5px; color: var(--ff-txt-3); }
.ff-cupom-btn { flex: 0 0 auto; padding: 8px 12px; }

/* Gerenciar: chave da barraca sozinha no topo + dois atalhos */
.ff-chave-barraca { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: var(--ff-bg-2); border: 1px solid var(--ff-line); }
.ff-chave-barraca .ff-thumb { width: 46px; height: 46px; font-size: 18px; }
.ff-chave-barraca strong { font-size: 16px; font-weight: 900; }
.ff-atalhos-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ff-atalho { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border-radius: 18px; text-align: left; color: rgb(var(--ff-ink)); background: var(--ff-bg-2); border: 1px solid var(--ff-line); cursor: pointer; }
.ff-atalho:active { transform: scale(.98); }
.ff-atalho strong { display: block; font-size: 14px; font-weight: 900; }
.ff-atalho small { display: block; font-size: 11.5px; color: var(--ff-txt-3); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-atalho strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ffGrupoSheet .ff-lista { margin-top: 4px; }

/* Lista de produtos do feirante, enxuta */
.ff-prod-linha { cursor: pointer; }
.ff-ptag { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 7px; font-size: 10.5px; font-weight: 800; vertical-align: 1px; }
.ff-ptag.promo { background: rgba(225,29,72,.12); color: #fb7185; }
html[data-tema="claro"] .ff-ptag.promo { color: #be123c; }
.ff-ptag.ouro { background: rgba(245,158,11,.14); color: var(--ff-gold-txt-3); }
.ff-thumb-promo { background: rgba(225,29,72,.12); color: #fb7185; }
.ff-thumb-perigo { background: rgba(225,29,72,.10); color: #f43f5e; }

/* ================= EFEITOS (14/10): só com movimento permitido no aparelho ================= */
@media (prefers-reduced-motion: no-preference) {
    /* Vitrine dourada: brilho passando no selo e na borda; foto com zoom lento; toque afunda */
    .ff-vit-card { position: relative; transition: transform .18s ease, box-shadow .18s ease; }
    .ff-vit-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
        background: linear-gradient(115deg, transparent 35%, rgba(255,241,170,.22) 48%, rgba(255,255,255,.38) 50%, rgba(255,241,170,.22) 52%, transparent 65%);
        background-size: 250% 100%; animation: ffBrilhoCard 7s ease-in-out infinite; }
    @keyframes ffBrilhoCard { 0%, 70% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
    .ff-vit-selo { background-size: 220% 100%; background-image: linear-gradient(110deg, #fde68a 0%, #fbbf24 40%, #fff7cc 50%, #fbbf24 60%, #fde68a 100%); animation: ffBrilhoSelo 4s ease-in-out infinite; }
    @keyframes ffBrilhoSelo { 0%, 60% { background-position: 100% 0; } 100% { background-position: 0 0; } }
    .ff-vit-capa { overflow: hidden; }
    .ff-vit-mosaico img, .ff-vit-sem-foto img { animation: ffKenBurns 12s ease-in-out infinite alternate; transform-origin: 50% 50%; }
    .ff-vit-mosaico img:nth-child(2) { animation-delay: -4s; transform-origin: 30% 60%; }
    .ff-vit-mosaico img:nth-child(3) { animation-delay: -8s; transform-origin: 70% 40%; }
    @keyframes ffKenBurns { from { transform: scale(1); } to { transform: scale(1.09); } }
    .ff-vit-card:active { transform: scale(.98) translateY(1px); box-shadow: 0 4px 12px rgba(0,0,0,.22), 0 0 0 3px rgba(245,158,11,.08); }
    #vitrineDestaques { will-change: transform; }

    /* Bolinha verde pulsando nas barracas abertas */
    .ff-dot-aberta::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #10b981; animation: ffDotPulso 2.2s ease-out infinite; }
    @keyframes ffDotPulso { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }

    /* Número do carrinho dá um pulo quando entra item */
    .ff-badge-pop { animation: ffBadgePop .45s cubic-bezier(.2,1.6,.4,1); }
    @keyframes ffBadgePop { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }

    /* Check que se desenha no pedido confirmado */
    .ff-suc-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ffDesenhaCheck .6s ease-out .15s forwards; }
    @keyframes ffDesenhaCheck { to { stroke-dashoffset: 0; } }
    #sucessoIcone.ff-suc-pop { animation: ffBadgePop .55s cubic-bezier(.2,1.6,.4,1); }

    /* Esqueleto enquanto a feira carrega */
    .ff-skel { position: relative; overflow: hidden; background: rgba(var(--ff-ink),.07); border-radius: 12px; }
    .ff-skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(var(--ff-ink),.08), transparent); animation: ffSkel 1.4s ease-in-out infinite; }
    @keyframes ffSkel { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
}
.ff-dot-aberta { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #10b981; margin: 0 5px 1px 0; vertical-align: middle; }
.ff-skel { background: rgba(var(--ff-ink),.07); border-radius: 12px; }
.ff-skel-story { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto; }
.ff-skel-post { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ff-skel-post .ff-skel-cab { display: flex; align-items: center; gap: 10px; }
.ff-skel-post .ff-skel-foto { aspect-ratio: 4 / 3; border-radius: 16px; }
.ff-suc-check { width: 34px; height: 34px; display: block; }
.ff-suc-check path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
#ffConfete { position: fixed; inset: 0; z-index: 100010; pointer-events: none; }

/* Zonas de feira: selo e chip */
.ff-selo-zona { display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(16,185,129,.14); color: var(--ff-em-txt); font-size: 11px; font-weight: 800; border: 0; cursor: pointer; font-family: inherit; }
.ff-selo-zona.mini { font-size: 10.5px; padding: 0 7px; vertical-align: 1px; }
.ff-chip-zona { border-color: rgba(16,185,129,.45) !important; }
.ff-adm-zonas { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* Seletor de feira no topo, ao lado da logo */
#appPrincipal > header .ff-topo-feira { display: inline-flex; align-items: center; gap: 5px; height: 30px; max-width: 132px; padding: 0 9px 0 8px; border-radius: 999px; border: 1px solid var(--ff-em-line); background: var(--ff-em-soft); color: var(--ff-em-txt); font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
#appPrincipal > header .ff-topo-feira.hide { display: none; }
#appPrincipal > header .ff-topo-feira > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#appPrincipal > header .ff-topo-feira i:first-child { font-size: 11px; }
#appPrincipal > header .ff-topo-feira .ff-topo-feira-seta { font-size: 9px; opacity: .7; }
#appPrincipal > header .ff-topo-feira.escolhida { background: #10b981; color: #fff; border-color: #10b981; }
@media (max-width: 360px) { #appPrincipal > header .ff-topo-feira { max-width: 96px; } }
.ff-feiras-lista .ff-item.ativo { background: var(--ff-em-soft); }
.ff-feiras-lista .ff-item.ativo strong { color: var(--ff-em-txt); }
.ff-feiras-ok { color: var(--ff-em-txt); font-size: 16px; }

/* ===== Lista de compras ===== */
.ff-lista-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--ff-line); background: var(--ff-bg-2); color: rgb(var(--ff-ink)); text-align: left; cursor: pointer; }
.ff-lista-card > i:first-child { font-size: 20px; color: var(--ff-em-txt); }
.ff-lista-card span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ff-lista-card strong { font-size: 14px; font-weight: 800; } .ff-lista-card small { font-size: 12px; color: var(--ff-txt-3); }
.ff-lista-card b.n { color: var(--ff-em-txt); }
.ff-lista-add { display: flex; gap: 6px; }
.ff-lista-add input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid rgba(var(--ff-ink),.14); border-radius: 12px; padding: 9px 12px; font-size: 15px; background: rgba(var(--ff-ink),.05); color: rgb(var(--ff-ink)); outline: none; }
.ff-lista-add input:focus { border-color: rgba(16,185,129,.6); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.ff-lista-itens { display: flex; flex-direction: column; gap: 6px; }
.ff-lista-item { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 14px; background: rgba(var(--ff-ink),.04); border: 1px solid rgba(var(--ff-ink),.08); }
.ff-lista-item.ok { opacity: .55; } .ff-lista-item.ok .ff-lista-nome { text-decoration: line-through; }
.ff-lista-check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(var(--ff-ink),.25); background: transparent; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.ff-lista-item.ok .ff-lista-check { background: #10b981; border-color: #10b981; }
.ff-lista-txt { flex: 1; min-width: 0; }
.ff-lista-nome { display: block; font-size: 14.5px; font-weight: 800; color: rgb(var(--ff-ink)); }
.ff-lista-onde { display: block; font-size: 12px; color: var(--ff-txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-lista-onde b { color: var(--ff-em-txt); font-weight: 800; } .ff-lista-onde .fechada { color: #fb7185; }
.ff-lista-onde button { border: 0; background: none; color: var(--ff-em-txt); font-weight: 800; font-size: 12px; padding: 0; cursor: pointer; font-family: inherit; }
.ff-lista-mais { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; border: 0; background: #10b981; color: #fff; cursor: pointer; font-size: 14px; }
.ff-lista-mais:disabled { opacity: .35; }
.ff-lista-mais.no { background: rgba(16,185,129,.18); color: var(--ff-em-txt); }
.ff-lista-x { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; border: 0; background: transparent; color: var(--ff-txt-3); cursor: pointer; }
.ff-lista-rodape { display: flex; gap: 8px; flex-wrap: wrap; }
.ff-lista-vazia { margin: 0; padding: 18px 10px; text-align: center; font-size: 13px; color: var(--ff-txt-3); }
.ff-lista-sug { display: flex; gap: 6px; flex-wrap: wrap; }
.ff-lista-sug button { border: 1px solid var(--ff-line); background: rgba(var(--ff-ink),.04); color: rgb(var(--ff-ink)); border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }

/* ===== Selos do cliente ===== */
.ff-selos { display: flex; flex-direction: column; gap: 8px; }
.ff-selos-topo { display: flex; align-items: center; gap: 10px; } .ff-selos-topo > i { font-size: 20px; color: var(--ff-gold-txt-3); }
.ff-selos-topo strong { display: block; font-size: 15px; font-weight: 800; } .ff-selos-topo small { font-size: 12px; color: var(--ff-txt-3); }
.ff-selos-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ff-selo { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 9px; border-radius: 14px; background: rgba(var(--ff-ink),.04); border: 1px solid rgba(var(--ff-ink),.08); text-align: center; }
.ff-selo .emoji { font-size: 26px; line-height: 1; filter: grayscale(1); opacity: .45; }
.ff-selo strong { font-size: 12px; font-weight: 800; line-height: 1.2; } .ff-selo small { font-size: 10.5px; color: var(--ff-txt-3); line-height: 1.25; }
.ff-selo .barra { width: 100%; height: 4px; border-radius: 2px; background: rgba(var(--ff-ink),.1); overflow: hidden; margin-top: 2px; }
.ff-selo .barra i { display: block; height: 100%; background: #10b981; border-radius: 2px; }
.ff-selo.ok { background: var(--ff-gold-soft); border-color: rgba(245,158,11,.4); }
.ff-selo.ok .emoji { filter: none; opacity: 1; }
.ff-selo.ok strong { color: var(--ff-gold-txt); }
@media (prefers-reduced-motion: no-preference) { .ff-selo.novo .emoji { animation: ffBadgePop .6s cubic-bezier(.2,1.6,.4,1); } }
.ff-fregues-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--ff-gold-soft); color: var(--ff-gold-txt); font-size: 10.5px; font-weight: 800; vertical-align: 1px; }

/* ===== Alerta de preço (sino) ===== */
.ff-sheet-sino { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--ff-line); background: rgba(var(--ff-ink),.04); color: rgb(var(--ff-ink)); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.ff-sheet-sino.on { border-color: rgba(245,158,11,.5); background: var(--ff-gold-soft); color: var(--ff-gold-txt); }
.ff-sheet-sino i { font-size: 14px; }
.ff-alertas { display: flex; flex-direction: column; gap: 6px; }
.ff-alertas-topo { display: flex; align-items: center; gap: 10px; } .ff-alertas-topo > i { font-size: 18px; color: var(--ff-gold-txt-3); }
.ff-alertas-topo strong { display: block; font-size: 15px; font-weight: 800; } .ff-alertas-topo small { font-size: 12px; color: var(--ff-txt-3); }
.ff-alerta-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(var(--ff-ink),.04); border: 1px solid rgba(var(--ff-ink),.08); }
.ff-alerta-item span { flex: 1; min-width: 0; } .ff-alerta-item strong { display: block; font-size: 13.5px; } .ff-alerta-item small { font-size: 11.5px; color: var(--ff-txt-3); }
.ff-alerta-item button { border: 0; background: transparent; color: var(--ff-txt-3); cursor: pointer; width: 30px; height: 30px; border-radius: 10px; }

/* ===== Faixa "Amanhã tem feira!" / "Hoje tem feira!" ===== */
.ff-feira-faixa { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px 12px 14px; border-radius: 16px; text-align: left; cursor: pointer; color: #fff;
    background: linear-gradient(135deg, #059669, #10b981 60%, #34d399); border: 0; box-shadow: 0 10px 24px rgba(16,185,129,.28); position: relative; overflow: hidden; }
.ff-feira-faixa.hoje { background: linear-gradient(135deg, #d97706, #f59e0b 60%, #fbbf24); box-shadow: 0 10px 24px rgba(245,158,11,.28); color: #3b2305; }
.ff-feira-faixa .ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.ff-feira-faixa .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ff-feira-faixa strong { font-size: 15px; font-weight: 900; letter-spacing: -.01em; }
.ff-feira-faixa small { font-size: 12px; opacity: .9; line-height: 1.35; }
.ff-feira-faixa .x { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,0,0,.18); color: inherit; cursor: pointer; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
    .ff-feira-faixa::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%); background-size: 250% 100%; animation: ffBrilhoCard 8s ease-in-out infinite; }
}
.ff-feira-lista .ff-item small b { color: var(--ff-em-txt); }

/* ADM: dias da feira na zona */
.ff-adm-dias-feira { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(var(--ff-ink),.04); border: 1px solid rgba(var(--ff-ink),.08); }
.ff-adm-dias-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.ff-adm-dia { display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 10px; border: 1px solid rgba(var(--ff-ink),.14); background: rgba(var(--ff-ink),.04); font-size: 12px; font-weight: 800; cursor: pointer; color: var(--ff-txt-2); }
.ff-adm-dia input { position: absolute; opacity: 0; width: 0; height: 0; }
.ff-adm-dia.on { background: #10b981; border-color: #10b981; color: #fff; }

/* ================================================================
   VISUAL "FEIRA" (Perfil → Aparência → ✨ Feira, ou "Ativar" no convite do Início)
   Claro, verde-folha e amarelo, cartões brancos arredondados, banner e atalhos no Início,
   menu de baixo com nomes e o carrinho amarelo no meio. Vale só com html[data-visual="feira"]
   (sempre junto com data-tema="claro"), então os outros visuais não mudam.
   ================================================================ */
.ff-so-feira { display: none !important; }
html[data-visual="feira"] .ff-so-feira { display: revert !important; }
html[data-visual="feira"] .ff-so-feira.hide { display: none !important; }
/* o nome do app fica num span próprio: não herda a caixa do ícone do logo */
#appPrincipal > header h1 > span.ff-logo-txt { width: auto !important; height: auto !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
html[data-visual="feira"] {
    --ff-ink: 16,42,27;
    --ff-bg: #f5f8f2;
    --ff-bg-rgb: 245,248,242;
    --ff-bg-2: #ffffff;
    --ff-line: rgba(16,42,27,.10);
    --ff-line-soft: rgba(16,42,27,.07);
    --ff-em: #16a34a;
    --ff-em-2: #15803d;
    --ff-em-3: #0f6b33;
    --ff-em-txt: #15803d;
    --ff-em-txt-2: #16a34a;
    --ff-em-txt-0: #0f5c2e;
    --ff-em-soft: rgba(22,163,74,.10);
    --ff-em-line: rgba(22,163,74,.28);
    --ff-gold-txt: #b45309;
    --ff-gold-txt-3: #f59e0b;
    --fv-verde-esc: #0e5a2c;
    --fv-verde: #16a34a;
    --fv-amarelo: #fcc419;
    --fv-amarelo-2: #f5b301;
    --fv-creme: #fffaeb;
    --fv-creme-borda: #f4e3b5;
    --ff-shadow: 0 8px 24px rgba(16,42,27,.07);
}
html[data-visual="feira"] body {
    background:
        radial-gradient(120% 340px at 50% -120px, rgba(22,163,74,.16), transparent 70%),
        var(--ff-bg) !important;
    background-attachment: scroll !important;
}

/* ---------- Topo: branco, logo verde grande, "Da feira para sua casa" ---------- */
html[data-visual="feira"] #appPrincipal > header {
    background: rgba(255,255,255,.94) !important;
    border-bottom: 0 !important;
    box-shadow: 0 6px 22px rgba(16,42,27,.06) !important;
    border-radius: 0 0 22px 22px;
    padding-top: max(12px, env(safe-area-inset-top)) !important; padding-bottom: 12px !important;
}
html[data-visual="feira"] #appPrincipal > header h1 { font-size: 22px !important; color: #0f3d22 !important; gap: 10px !important; }
html[data-visual="feira"] #appPrincipal > header h1 > span:first-child {
    width: 46px !important; height: 46px !important; border-radius: 14px !important; font-size: 20px !important; color: #fff;
    background: linear-gradient(145deg, #22c55e, #15803d 70%) !important;
    box-shadow: 0 8px 18px rgba(21,128,61,.30), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
html[data-visual="feira"] #appPrincipal > header h1 .ff-logo-txt { display: flex; flex-direction: column; line-height: 1.05; }
html[data-visual="feira"] #appPrincipal > header h1 .ff-logo-txt small { font-size: 12px; font-weight: 600; letter-spacing: 0; color: #4b6152; margin-top: 3px; white-space: nowrap; }
html[data-visual="feira"] #appPrincipal > header h1 .ff-logo-txt small i { color: #22c55e; font-size: 11px; }
html[data-visual="feira"] #appPrincipal > header .ff-topo-icone {
    width: 42px; height: 42px; min-height: 42px; font-size: 18px;
    background: #fff !important; color: #0f3d22 !important;
    box-shadow: 0 4px 14px rgba(16,42,27,.10) !important;
}
html[data-visual="feira"] #appPrincipal > header .ff-topo-icone.hide { display: none; }
html[data-visual="feira"] #appPrincipal > header .ff-topo-num { background: #ef4444 !important; color: #fff !important; }
html[data-visual="feira"] #appPrincipal > header .ff-btn-app { background: linear-gradient(135deg, #22c55e, #15803d) !important; }
html[data-visual="feira"] #appPrincipal > header .ff-topo-feira { background: #f0fdf4; border-color: rgba(22,163,74,.30); color: #15803d; }
html[data-visual="feira"] #appPrincipal > header .ff-topo-feira.escolhida { background: #16a34a; border-color: #16a34a; color: #fff; }
html[data-visual="feira"] #appPrincipal > header .ff-topo-entrar { background: var(--fv-amarelo) !important; color: #3b2a00 !important; border: 0 !important; font-weight: 800; }
/* logo grande + seletor de feira: em tela estreita o subtítulo dá lugar ao seletor */
@media (max-width: 400px) {
    html[data-visual="feira"] #appPrincipal > header h1:has(+ #btnFeiraTopo:not(.hide)) .ff-logo-txt small { display: none !important; }
    html[data-visual="feira"] #appPrincipal > header h1:has(+ #btnFeiraTopo:not(.hide)) { font-size: 19px !important; }
    html[data-visual="feira"] #appPrincipal > header h1:has(+ #btnFeiraTopo:not(.hide)) > span:first-child { width: 40px !important; height: 40px !important; }
}

/* ---------- Início: busca, banner e atalhos ---------- */
.ff-hero-feira-bloco { display: flex; flex-direction: column; gap: 14px; }
html:not([data-visual="feira"]) .ff-hero-so-feira { display: none !important; }
.ff-hero-busca {
    display: flex; align-items: center; gap: 12px; width: 100%; height: 50px; padding: 0 18px; border-radius: 999px;
    background: #fff; border: 1px solid rgba(16,42,27,.06); box-shadow: 0 6px 18px rgba(16,42,27,.07);
    color: #6b7c71; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.ff-hero-busca i { color: #0f3d22; font-size: 17px; }
.ff-hero-busca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-hero-feira {
    position: relative; overflow: hidden; border-radius: 24px; min-height: 238px; display: flex; align-items: stretch;
    background:
        linear-gradient(90deg, #0f2e1a 0%, rgba(15,46,26,.93) 34%, rgba(15,46,26,.45) 62%, rgba(15,46,26,.05) 100%),
        #12371f url('hero-feira.jpg') 100% 62% / 62% auto no-repeat;
    box-shadow: 0 14px 30px rgba(16,42,27,.20);
}
.ff-hero-txt { position: relative; z-index: 1; padding: 22px 20px 20px; max-width: 74%; display: flex; flex-direction: column; justify-content: center; color: #fff; }
.ff-hero-txt h2 { margin: 0; font-size: 25px; line-height: 1.12; font-weight: 900; letter-spacing: -.03em; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.ff-hero-txt p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.35; color: rgba(255,255,255,.88); font-weight: 500; }
.ff-hero-cta {
    align-self: flex-start; margin-top: 16px; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 20px;
    border: 0; border-radius: 999px; background: var(--fv-amarelo, #fcc419); color: #2d2200; font-size: 14.5px; font-weight: 800; cursor: pointer;
    box-shadow: 0 8px 18px rgba(245,179,1,.35);
}
.ff-hero-cta:active { transform: scale(.97); }
@media (prefers-reduced-motion: no-preference) {
    .ff-hero-feira { animation: ffHeroZoom 16s ease-in-out infinite alternate; }
    @keyframes ffHeroZoom { from { background-size: 100% 100%, 62% auto; } to { background-size: 100% 100%, 70% auto; } }
}
.ff-hero-atalhos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ff-hero-atalhos button {
    display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 11px; min-width: 0;
    border-radius: 18px; background: #fff; border: 1px solid rgba(16,42,27,.05); box-shadow: 0 6px 16px rgba(16,42,27,.06);
    color: #1d3a28; font-size: 11.5px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer;
}
.ff-hero-atalhos .ico { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.ff-hero-atalhos .ico.verde { background: #e8f7ee; color: #15803d; }
.ff-hero-atalhos .ico.laranja { background: #fff1e6; color: #f97316; }
.ff-hero-atalhos .ico.verde2 { background: #e6f6ec; color: #16a34a; }
.ff-hero-atalhos .ico.amarelo { background: #fff7d6; color: #f59e0b; }

/* Convite para ativar (aparece nos outros visuais, uma vez) */
.ff-convite-visual {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 40px 12px 12px; border-radius: 18px;
    background: linear-gradient(135deg, #f0fdf4, #fffbeb); border: 1px solid rgba(22,163,74,.30); color: #10301c;
}
.ff-convite-visual-amostra { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; background: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 6px; box-shadow: 0 4px 12px rgba(16,42,27,.12); }
.ff-convite-visual-amostra i { border-radius: 4px; background: #16a34a; }
.ff-convite-visual-amostra i:nth-child(2) { background: #fcc419; }
.ff-convite-visual-amostra i:nth-child(3) { grid-column: span 2; background: #0e5a2c; }
.ff-convite-visual-txt { flex: 1; min-width: 0; }
.ff-convite-visual-txt strong { display: block; font-size: 14px; font-weight: 800; color: #10301c; }
.ff-convite-visual-txt small { display: block; font-size: 11.5px; line-height: 1.35; color: #44604f; margin-top: 2px; }
.ff-convite-visual-btn { flex: 0 0 auto; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: #16a34a; color: #fff; font-size: 13.5px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 14px rgba(22,163,74,.30); }
.ff-convite-visual-x { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border: 0; background: transparent; color: #5b7465; font-size: 20px; line-height: 1; cursor: pointer; }
html[data-tema="escuro"] .ff-convite-visual { background: linear-gradient(135deg, rgba(22,163,74,.16), rgba(252,196,25,.10)); color: #fff; }
html[data-tema="escuro"] .ff-convite-visual-txt strong { color: #fff; }
html[data-tema="escuro"] .ff-convite-visual-txt small, html[data-tema="escuro"] .ff-convite-visual-x { color: rgba(255,255,255,.7); }

/* Aparência: a opção nova em destaque */
.ff-tema-seg .ff-tema-feira-opc:not(.ativo) { color: #15803d; background: rgba(252,196,25,.18); }
html[data-tema="escuro"] .ff-tema-seg .ff-tema-feira-opc:not(.ativo) { color: #fcd34d; }
html[data-visual="feira"] .ff-tema-seg button.ativo { background: #16a34a; }

/* ---------- Cartões, títulos e botões ---------- */
html[data-visual="feira"] .ff-card,
html[data-visual="feira"] .ff-lista,
html[data-visual="feira"] .ff-sec,
html[data-visual="feira"] .ff-perfil-lista { border-radius: 20px; border-color: rgba(16,42,27,.06) !important; box-shadow: 0 6px 18px rgba(16,42,27,.06) !important; background: #fff; }
html[data-visual="feira"] .ff-sec-salvar,
html[data-visual="feira"] .ff-perfil-btn.pri:not(.seguindo) { background: linear-gradient(135deg, #1fae55, #15803d) !important; color: #fff !important; border-radius: 14px; box-shadow: 0 6px 14px rgba(21,128,61,.22); }
html[data-visual="feira"] .ff-perfil-btn { border-radius: 14px; height: 42px; background: #fff; border: 1px solid rgba(16,42,27,.10); box-shadow: 0 3px 10px rgba(16,42,27,.05); }
html[data-visual="feira"] .ff-chip.ativo { background: #16a34a !important; color: #fff !important; border-color: #16a34a !important; }
html[data-visual="feira"] .ff-chip { border-radius: 999px; background: #fff; box-shadow: 0 3px 10px rgba(16,42,27,.05); }
html[data-visual="feira"] .ff-tile-add { background: #16a34a !important; color: #fff !important; border-radius: 10px !important; }
html[data-visual="feira"] .ff-secao-titulo, html[data-visual="feira"] .ff-faixa-titulo { color: #10301c; font-weight: 900; }

/* Barracas em destaque: cartão branco, selo amarelo "DESTAQUE" */
html[data-visual="feira"] .ff-vitrine { background: transparent; border: 0; padding-top: 4px; }
html[data-visual="feira"] .ff-vitrine-coroa { background: transparent; box-shadow: none; color: #f59e0b; font-size: 20px; width: 26px; }
html[data-visual="feira"] .ff-vitrine-cab h3 { font-size: 18px; color: #10301c; }
html[data-visual="feira"] .ff-vitrine-cab p { color: #6b7c71; }
html[data-visual="feira"] .ff-vit-card { background: #fff !important; border: 1px solid rgba(16,42,27,.06) !important; border-radius: 22px !important; box-shadow: 0 10px 24px rgba(16,42,27,.09) !important; }
html[data-visual="feira"] .ff-vit-selo { background: var(--fv-amarelo) !important; color: #3a2a00 !important; border-radius: 999px !important; font-weight: 900 !important; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
html[data-visual="feira"] .ff-vit-info strong { color: #10301c !important; }
html[data-visual="feira"] .ff-vit-info em { color: #15803d !important; font-weight: 800; }
html[data-visual="feira"] .ff-vit-ver { color: #15803d !important; }
html[data-visual="feira"] .ff-vitrine-pontos i.on { background: #16a34a; }

/* ---------- Menu de baixo: nomes nos ícones, ativo verde-escuro, carrinho amarelo no meio ---------- */
html[data-visual="feira"] #navCliente, html[data-visual="feira"] #navFeirante, html[data-visual="feira"] #navAdmin, html[data-visual="feira"] #navMotoboy {
    background: rgba(255,255,255,.97) !important; border: 1px solid rgba(16,42,27,.06) !important; border-radius: 28px !important;
    box-shadow: 0 12px 30px rgba(16,42,27,.16) !important; overflow: visible;
}
html[data-visual="feira"] #navCliente button, html[data-visual="feira"] #navFeirante button, html[data-visual="feira"] #navAdmin button, html[data-visual="feira"] #navMotoboy button { color: #4a5d50 !important; border-radius: 20px !important; }
html[data-visual="feira"] #navCliente button.text-emerald-600, html[data-visual="feira"] #navFeirante button.text-emerald-600, html[data-visual="feira"] #navAdmin button.text-emerald-600, html[data-visual="feira"] #navMotoboy button.text-emerald-600 {
    background: linear-gradient(160deg, #157a3c, #0e5a2c) !important; color: #fff !important; box-shadow: 0 6px 14px rgba(14,90,44,.30);
}
html[data-visual="feira"] #navCliente.ff-nav-icones button { flex-direction: column; gap: 3px; min-height: 56px; font-size: 10.5px !important; font-weight: 700 !important; }
html[data-visual="feira"] #navCliente.ff-nav-icones button i { font-size: 19px !important; }
html[data-visual="feira"] #navCliente.ff-nav-icones button::after { content: attr(aria-label); line-height: 1; }
html[data-visual="feira"] #navCliente.ff-nav-icones #tabBuscarBtn::after { content: 'Categorias'; }
html[data-visual="feira"] #tabExplorarBtn { order: 1; }
html[data-visual="feira"] #tabBuscarBtn { order: 2; }
html[data-visual="feira"] #tabCarrinhoBtn { order: 3; }
html[data-visual="feira"] #tabMeusPedidosBtn { order: 4; }
html[data-visual="feira"] #tabPerfilBtn { order: 5; }
html[data-visual="feira"] #navCliente.ff-nav-icones #tabCarrinhoBtn,
html[data-visual="feira"] #navCliente.ff-nav-icones #tabCarrinhoBtn.text-emerald-600 {
    flex: 0 0 64px; width: 64px; height: 64px; min-height: 64px; margin-top: -26px; align-self: flex-start;
    border-radius: 50% !important; background: radial-gradient(circle at 35% 30%, #ffd84d, #f5b301) !important; color: #24320f !important;
    box-shadow: 0 10px 22px rgba(245,179,1,.45), 0 0 0 5px #fff !important;
}
html[data-visual="feira"] #navCliente.ff-nav-icones #tabCarrinhoBtn::after { content: none; }
html[data-visual="feira"] #navCliente.ff-nav-icones #tabCarrinhoBtn i { font-size: 24px !important; }
html[data-visual="feira"] #navCliente.ff-nav-icones #badgeCarrinho { top: 2px !important; right: 2px !important; box-shadow: 0 0 0 2px #fff !important; }
html[data-visual="feira"] #navCliente.ff-nav-icones #badgeMeusPedidos { top: 6px !important; }
html[data-visual="feira"] #navCliente button.text-emerald-600 .ff-nav-avatar { box-shadow: 0 0 0 2px #fff; }
html[data-visual="feira"] #navCliente .ff-nav-avatar { width: 21px; height: 21px; }
html[data-visual="feira"] #navCliente .ff-nav-avatar i { font-size: 19px !important; }
html[data-visual="feira"] .app-main { padding-bottom: 28px; }

/* ---------- Perfil: topo verde com curva, cartões creme de cupom e convite ---------- */
html[data-visual="feira"] #telaPerfil > .ff-perfil-topo {
    position: relative; margin: -16px -16px 4px; padding: 26px 20px 46px; gap: 16px;
    background: linear-gradient(150deg, #157a3c 0%, #0e5a2c 70%); color: #fff;
    border-radius: 0 0 0 0; clip-path: ellipse(120% 100% at 30% 0%);
}
html[data-visual="feira"] #telaPerfil > .ff-perfil-topo::after { content: ''; position: absolute; right: -30px; bottom: -10px; width: 62%; height: 60px; background: var(--fv-amarelo); border-radius: 60% 0 0 0; opacity: .95; z-index: 0; transform: rotate(-6deg); }
html[data-visual="feira"] #telaPerfil > .ff-perfil-topo > * { position: relative; z-index: 1; }
html[data-visual="feira"] #telaPerfil .ff-perfil-foto { box-shadow: 0 0 0 4px #fff, 0 10px 22px rgba(0,0,0,.25); background: #e9f8ef; color: #15803d; }
html[data-visual="feira"] #telaPerfil .ff-perfil-nome h2 { color: #fff !important; }
html[data-visual="feira"] #telaPerfil .ff-perfil-nome p { color: rgba(255,255,255,.82) !important; }
html[data-visual="feira"] .ff-pendencia,
html[data-visual="feira"] .ff-cupons { background: var(--fv-creme) !important; border: 1px solid var(--fv-creme-borda) !important; border-radius: 20px !important; box-shadow: 0 6px 16px rgba(180,120,0,.08) !important; }
html[data-visual="feira"] .ff-selo { background: #f3faf5; border-color: rgba(22,163,74,.12); border-radius: 16px; }
html[data-visual="feira"] .ff-selo .barra i { background: #16a34a; }

/* Página da barraca */
html[data-visual="feira"] .ff-perfil-barraca .ff-perfil-foto { box-shadow: 0 0 0 4px #fff, 0 8px 18px rgba(16,42,27,.18); }
html[data-visual="feira"] .ff-coroa { color: #f5b301 !important; }

/* ================= ANÚNCIOS DO APP NO FEED (16/10/2026) ================= */
.ff-anuncio {
    --an-cor: #10b981; --an-fundo: rgba(16,185,129,.10); --an-borda: rgba(16,185,129,.30); --an-btn-txt: #fff;
    margin: 4px 0 18px; padding: 12px 14px 14px; border-radius: 20px; background: linear-gradient(135deg, var(--an-fundo), rgba(var(--ff-ink),.02));
    border: 1px solid var(--an-borda); display: flex; flex-direction: column; gap: 10px; transition: opacity .2s, transform .2s;
}
.ff-anuncio.saindo { opacity: 0; transform: scale(.97); }
.ff-anuncio.cor-amarelo { --an-cor: #f5b301; --an-fundo: rgba(252,196,25,.16); --an-borda: rgba(245,179,1,.40); --an-btn-txt: #2d2200; }
.ff-anuncio.cor-azul { --an-cor: #3b82f6; --an-fundo: rgba(59,130,246,.12); --an-borda: rgba(59,130,246,.32); }
.ff-anuncio.cor-rosa { --an-cor: #ec4899; --an-fundo: rgba(236,72,153,.12); --an-borda: rgba(236,72,153,.30); }
.ff-anuncio.cor-roxo { --an-cor: #8b5cf6; --an-fundo: rgba(139,92,246,.12); --an-borda: rgba(139,92,246,.30); }
.ff-anuncio-topo { display: flex; align-items: center; gap: 7px; }
.ff-anuncio-marca { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; background: linear-gradient(135deg, #10b981, #059669); }
.ff-anuncio-topo small { flex: 1; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--ff-txt-4); }
.ff-anuncio-x { width: 30px; height: 30px; margin: -6px -6px -6px 0; border: 0; border-radius: 50%; background: transparent; color: var(--ff-txt-4); font-size: 20px; line-height: 1; cursor: pointer; }
.ff-anuncio-x:hover { background: rgba(var(--ff-ink),.06); }
.ff-anuncio-corpo { display: flex; gap: 12px; align-items: flex-start; }
.ff-anuncio-emoji { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: var(--ff-bg-2); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.ff-anuncio-corpo strong { display: block; font-size: 15.5px; font-weight: 900; line-height: 1.25; letter-spacing: -.01em; color: rgb(var(--ff-ink)); }
.ff-anuncio-corpo p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--ff-txt-3); }
.ff-anuncio-btn { align-self: stretch; height: 42px; border: 0; border-radius: 13px; background: var(--an-cor); color: var(--an-btn-txt); font-size: 14px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ff-anuncio-btn:active { transform: scale(.98); }
html[data-visual="feira"] .ff-anuncio { background: #fff; box-shadow: 0 8px 20px rgba(16,42,27,.07); border-color: var(--an-borda); }
html[data-visual="feira"] .ff-anuncio-emoji { background: var(--an-fundo); box-shadow: none; }
/* ADM: lista dos automáticos e prévia */
.ff-adm-auto { display: grid; gap: 6px; margin-top: 6px; }
.ff-adm-auto label { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 12px; background: rgba(var(--ff-ink),.04); font-size: 12.5px; font-weight: 700; }
.ff-adm-auto label span { flex: 1; min-width: 0; }
.ff-adm-auto label small { font-weight: 600; color: var(--ff-txt-4); white-space: nowrap; }
.ff-adm-previa-anuncio .ff-anuncio { margin: 6px 0 0; pointer-events: none; }

/* ================= BANNER "BARRACAS EM DESTAQUE" (17/10/2026, arte do Matheus) =================
   Verde-escuro com a foto do caixote à direita, selo amarelo, título branco + amarelo, botão
   "Ver destaques" e os 3 selos (Produtos frescos · Qualidade garantida · Direto do produtor).
   Igual em todos os visuais (cores próprias). Foto: hero-feira.jpg (recorte da arte). */
.ff-banner-dest {
    position: relative; overflow: hidden; border-radius: 24px; color: #fff; isolation: isolate;
    background: #0d3f22; box-shadow: 0 14px 30px rgba(8,40,20,.28);
}
.ff-banner-dest::before { /* foto */
    content: ''; position: absolute; z-index: -2; top: 0; right: 0; bottom: 0; width: 72%;
    background: url('hero-feira.jpg') 30% 55% / cover no-repeat;
}
.ff-banner-dest::after { /* degradê verde por cima da foto, do texto para a direita */
    content: ''; position: absolute; z-index: -1; inset: 0;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(34,120,60,.35), transparent 60%),
        linear-gradient(90deg, #0d3f22 0%, #0d3f22 30%, rgba(13,63,34,.88) 46%, rgba(13,63,34,.35) 70%, rgba(13,63,34,0) 88%);
}
.ff-banner-txt { position: relative; padding: 18px 18px 14px; max-width: 78%; display: flex; flex-direction: column; align-items: flex-start; }
.ff-banner-selo {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
    background: #fcc419; color: #20310f; font-size: 10.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.ff-banner-selo i { font-size: 11px; }
.ff-banner-txt h2 { margin: 12px 0 0; font-size: 25px; line-height: 1.08; font-weight: 900; letter-spacing: -.03em; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.30); }
.ff-banner-txt h2 em { display: block; font-style: normal; color: #fcc419; }
.ff-banner-txt p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.35; font-weight: 500; color: rgba(255,255,255,.90); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.ff-banner-txt .ff-hero-cta { margin-top: 14px; }
.ff-banner-selos {
    list-style: none; margin: 4px 12px 12px; padding: 9px 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 16px; background: rgba(6,32,17,.62); border: 1px solid rgba(255,255,255,.10);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ff-banner-selos li { display: flex; align-items: center; gap: 7px; padding: 0 7px; min-width: 0; font-size: 11.5px; font-weight: 700; line-height: 1.2; color: rgba(255,255,255,.92); }
.ff-banner-selos li + li { border-left: 1px solid rgba(255,255,255,.18); }
.ff-banner-selos i { flex: 0 0 auto; font-size: 17px; color: #fcc419; }
.ff-banner-selos span { min-width: 0; }
@media (min-width: 520px) {
    .ff-banner-txt { padding: 24px 24px 16px; }
    .ff-banner-txt h2 { font-size: 31px; }
    .ff-banner-selos { margin: 4px 20px 18px; max-width: 420px; }
}
@media (prefers-reduced-motion: no-preference) {
    .ff-banner-dest::before { animation: ffBannerZoom 16s ease-in-out infinite alternate; transform-origin: 70% 60%; }
    @keyframes ffBannerZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
}

/* ===== 19/10/2026: story visto, selo NOVO, várias fotos, cadastro por fotos, Chegou na feira, cadastro profissional ===== */
/* Story já visto: anel cinza grosso + ▶ (toque para rever) */
.ff-story-anel.visto { padding: 3px; background: linear-gradient(45deg, rgba(var(--ff-ink),.42), rgba(var(--ff-ink),.22)); }
.ff-story-rever { position: absolute; right: -1px; bottom: 2px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; padding-left: 2px; background: #64748b; color: #fff; border: 2px solid var(--ff-bg); }
.ff-post-avatar.visto { overflow: visible; position: relative; box-shadow: 0 0 0 2px var(--ff-bg); }
.ff-post-avatar.visto::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; padding: 2px; background: rgba(var(--ff-ink),.35); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.ff-post-avatar.visto img { border-radius: 50%; }
.ff-perfil-foto.visto { background: rgba(var(--ff-ink),.32); }
/* Barraca nova: etiqueta NOVO por 3 dias */
.ff-story-novo { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; line-height: 15px; color: #fff; background: linear-gradient(90deg, #db2777, #f97316); border: 2px solid var(--ff-bg); white-space: nowrap; box-shadow: 0 2px 6px rgba(219,39,119,.35); }
.ff-story-item.nova .ff-story small { color: rgb(var(--ff-ink)); font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
    .ff-story-novo { animation: ffNovoPulsa 2.4s ease-in-out infinite; }
    @keyframes ffNovoPulsa { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.08); } }
}

/* Detalhe do produto: carrossel de fotos */
.ff-sheet-galeria { position: relative; display: block; }
.ff-galeria-trilho { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.ff-galeria-trilho img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.ff-galeria-num { position: absolute; top: 12px; left: 12px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff; background: rgba(0,0,0,.5); }
.ff-galeria-pontos { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.ff-galeria-pontos i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 2px rgba(0,0,0,.4); transition: width .2s; }
.ff-galeria-pontos i.on { width: 16px; border-radius: 4px; background: #fff; }
.ff-galeria-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: #0f172a; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.ff-galeria-seta.esq { left: 10px; } .ff-galeria-seta.dir { right: 10px; }
.ff-sheet-galeria.no-inicio .ff-galeria-seta.esq, .ff-sheet-galeria.no-fim .ff-galeria-seta.dir { opacity: 0; pointer-events: none; }
.ff-sheet-galeria.no-inicio.no-fim .ff-galeria-seta { opacity: 0; }
@media (hover: none) { .ff-galeria-seta { display: none; } }

/* Formulário: mais fotos */
.ff-mais-fotos { display: flex; flex-direction: column; gap: 6px; }
.ff-mais-fotos.hide { display: none; }
.ff-mais-fotos-tit { font-size: 13px; font-weight: 700; color: rgba(var(--ff-ink),.85); }
.ff-mais-fotos-tit em { font-style: normal; font-weight: 500; color: var(--ff-txt-3); }
.ff-mais-fotos-grade { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-mais-foto { position: relative; width: 72px; height: 72px; border-radius: 14px; overflow: hidden; background: rgba(var(--ff-ink),.06); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; }
.ff-mais-foto img { width: 100%; height: 100%; object-fit: cover; }
.ff-mais-foto > button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ff-mais-foto.add { border: 2px dashed rgba(var(--ff-ink),.25); background: transparent; color: var(--ff-em-txt); cursor: pointer; font-size: 18px; }
.ff-mais-foto.add small { font-size: 10.5px; font-weight: 700; }
.ff-mais-foto.adm { flex-direction: column; height: auto; padding-bottom: 4px; }
.ff-mais-foto.adm img { height: 64px; }
.ff-mais-foto.adm .ff-adm-check { font-size: 11px; }
.ff-imp-mais { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* Card de produto: selo Novo e quantas fotos */
.ff-pcard-novo { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 900; color: #fff; background: linear-gradient(90deg, #db2777, #f97316); }
.ff-pcard-fotos { position: absolute; bottom: 8px; left: 8px; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: #fff; background: rgba(0,0,0,.55); }
/* Chegou na feira: cartões maiores que passam sozinhos */
.ff-faixa-novo .ff-faixa-titulo i { color: #db2777; }
.ff-trilho-novo { scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.ff-trilho-novo .ff-pcard { width: 168px; }
.ff-trilho-novo .ff-pcard-foto { width: 168px; height: 168px; border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }

/* Cadastro profissional */
.ff-cadpro-inclui { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ff-cadpro-inclui li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.35; color: rgba(var(--ff-ink),.88); }
.ff-cadpro-inclui li i { width: 18px; margin-top: 2px; color: var(--ff-em-txt); text-align: center; }
.ff-cadpro-pacotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.ff-cadpro-pac { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border-radius: 16px; border: 2px solid rgba(var(--ff-ink),.12); background: rgba(var(--ff-ink),.03); color: rgb(var(--ff-ink)); cursor: pointer; text-align: left; }
.ff-cadpro-pac strong { font-size: 12.5px; font-weight: 700; }
.ff-cadpro-pac b { font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
.ff-cadpro-pac small { font-size: 11px; color: var(--ff-txt-3); }
.ff-cadpro-pac.ativo { border-color: #10b981; background: rgba(16,185,129,.12); }
.ff-cadpro-mini { font-size: 12px; }
.ff-cadpro-passos { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ff-cadpro-passos li { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--ff-txt-3); }
.ff-cadpro-passos li span { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; background: rgba(var(--ff-ink),.08); }
.ff-cadpro-passos li.feito span { background: #10b981; color: #fff; }
.ff-cadpro-passos li.atual { color: rgb(var(--ff-ink)); }
.ff-cadpro-passos li.atual span { background: #f59e0b; color: #fff; box-shadow: 0 0 0 4px rgba(245,158,11,.2); }
.ff-cadpro-feitos { font-size: 13px; padding: 9px 12px; border-radius: 12px; background: rgba(16,185,129,.12); color: rgb(var(--ff-ink)); }
.ff-cadpro-feitos i { color: #10b981; }
.ff-cadpro-obs { font-size: 13px; padding: 9px 12px; border-radius: 12px; background: rgba(245,158,11,.12); color: rgb(var(--ff-ink)); }
.ff-cadpro-hist { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: rgba(var(--ff-ink),.8); }
.ff-cadpro-hist small { color: var(--ff-txt-3); }
.ff-cadpro-adm { display: flex; flex-direction: column; gap: 8px; }
.ff-cadpro-ped { display: flex; flex-direction: column; gap: 5px; padding: 10px 0; border-top: 1px solid rgba(var(--ff-ink),.08); }
.ff-cadpro-ped .ff-rec-nome small { font-weight: 500; color: var(--ff-txt-3); }
.ff-cadpro-mat summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ff-em-txt); }
.ff-cadpro-mat p { font-size: 12.5px; margin-top: 4px; white-space: normal; }
.ff-cadpro-acoes .ff-rec-btn, .ff-cadpro-acoes .ff-rec-btn-sec { font-size: 12px; padding: 7px 10px; }

/* ===== 19/10/2026: Maker ===== */
.ff-maker-atalho { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(219,39,119,.35); background: linear-gradient(90deg, rgba(219,39,119,.14), rgba(249,115,22,.10)); color: rgb(var(--ff-ink)); cursor: pointer; text-align: left; }
.ff-maker-atalho > i:first-child { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #db2777, #f97316); color: #fff; font-size: 16px; flex: 0 0 auto; }
.ff-maker-atalho span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ff-maker-atalho strong { font-size: 14px; font-weight: 800; }
.ff-maker-atalho small { font-size: 12px; color: var(--ff-txt-3); }
.ff-maker-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ff-maker-numeros span { display: flex; flex-direction: column; padding: 10px; border-radius: 14px; background: rgba(var(--ff-ink),.05); }
.ff-maker-numeros b { font-size: 20px; font-weight: 900; color: rgb(var(--ff-ink)); }
.ff-maker-numeros small { font-size: 11px; color: var(--ff-txt-3); line-height: 1.2; }
.ff-maker-alerta { color: #f97316; font-weight: 800; }
.ff-maker-voltar { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--ff-em-txt); font-weight: 700; font-size: 13px; cursor: pointer; }
.ff-maker-pedido { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(245,158,11,.10); font-size: 12.5px; color: rgb(var(--ff-ink)); }
.ff-maker-pedido summary { cursor: pointer; font-weight: 700; color: var(--ff-em-txt); }
.ff-maker-pedido small { color: var(--ff-txt-3); }
.ff-maker-cam { flex: 0 0 auto; cursor: pointer; }
.ff-maker-selo { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: linear-gradient(90deg, #db2777, #f97316); color: #fff; vertical-align: middle; }
.ff-maker-on { color: #db2777 !important; border-color: rgba(219,39,119,.5) !important; }
.ff-maker-busca { width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(var(--ff-ink),.15); background: rgba(var(--ff-ink),.04); color: rgb(var(--ff-ink)); font-size: 13px; }
.ff-maker-barras { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; padding: 2px; }
.ff-maker-bar small { color: var(--ff-txt-3); }
.ff-maker-bar.hide { display: none; }

/* ===== 19/10/2026: ditar por voz ===== */
.ff-form-titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ff-voz-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(16,185,129,.45); background: rgba(16,185,129,.12); color: var(--ff-em-txt); font-weight: 800; font-size: 13px; cursor: pointer; }
.ff-voz-btn.hide { display: none; }
.ff-voz-btn.ouvindo, .ff-imp-voz.ouvindo { background: #e11d48; border-color: #e11d48; color: #fff; }
.ff-voz-dica { font-size: 12.5px; padding: 8px 12px; border-radius: 12px; background: rgba(16,185,129,.10); color: rgb(var(--ff-ink)); }
.ff-voz-dica.hide { display: none; }
.ff-imp-voz { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(16,185,129,.45); background: rgba(16,185,129,.12); color: var(--ff-em-txt); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ff-voz-grande { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 18px; border: 0; background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-size: 16px; font-weight: 900; cursor: pointer; box-shadow: 0 8px 22px rgba(16,185,129,.3); }
.ff-voz-grande i { font-size: 20px; }
.ff-voz-grande.ouvindo { background: linear-gradient(135deg, #e11d48, #be123c); box-shadow: 0 8px 22px rgba(225,29,72,.35); }
.ff-voz-parcial { font-size: 13.5px; font-style: italic; color: rgb(var(--ff-ink)); padding: 8px 12px; border-radius: 12px; background: rgba(var(--ff-ink),.05); min-height: 36px; }
@media (prefers-reduced-motion: no-preference) {
    .ff-voz-btn.ouvindo, .ff-voz-grande.ouvindo, .ff-imp-voz.ouvindo { animation: ffVozPulsa 1.2s ease-in-out infinite; }
    @keyframes ffVozPulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(225,29,72,.45); } 50% { box-shadow: 0 0 0 10px rgba(225,29,72,0); } }
}
.ff-imp-linha:has(.ff-imp-voz) { grid-template-columns: 1fr 64px 32px 32px; }
.ff-imp-linha .ff-imp-voz { width: 32px; height: 32px; }

/* ===== 19/10/2026: Novo produto mais limpo ===== */
.ff-fotos-linha { display: flex; gap: 10px; align-items: flex-start; }
.ff-foto-pick { position: relative; flex: 0 0 auto; width: 96px !important; height: 96px; border-radius: 18px; overflow: hidden; cursor: pointer; display: flex !important; align-items: center; justify-content: center; border: 2px dashed rgba(16,185,129,.55); background: rgba(16,185,129,.08); color: var(--ff-em-txt); margin: 0 !important; }
.ff-foto-pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ff-foto-pick.tem { border-style: solid; border-color: transparent; }
.ff-foto-pick.tem .ff-foto-pick-vazio { display: none; }
.ff-foto-pick-vazio { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 24px; }
.ff-foto-pick-vazio small { font-size: 12px; font-weight: 800; }
.ff-fotos-linha .ff-mais-fotos { flex: 1; min-width: 0; }
.ff-fotos-linha .ff-mais-fotos-grade { gap: 6px; }
.ff-fotos-linha .ff-mais-foto { width: 56px; height: 56px; border-radius: 12px; }
.ff-fotos-linha .ff-mais-foto.add { width: auto; min-width: 56px; padding: 0 10px; font-size: 14px; }
.ff-unid-chips { margin-top: -4px; flex-wrap: wrap; }
.ff-unid-chips .ff-chip { padding: 5px 12px; font-size: 12.5px; }
.ff-link-mini { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--ff-em-txt); font-weight: 700; font-size: 13px; cursor: pointer; }
.ff-link-mini.hide, #campoDescricao.hide { display: none; }
.ff-varios { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ff-varios-caixa { display: flex; flex-direction: column; gap: 8px; }
.ff-varios-caixa.hide, #btnMostrarVarios.hide { display: none; }
.ff-varios-tit { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ff-txt-3); margin-left: 2px; }
.ff-varios-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.ff-varios-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 16px; border: 1px solid rgba(var(--ff-ink),.10); background: var(--ff-bg-2); color: rgb(var(--ff-ink)); font-size: 12.5px; font-weight: 800; cursor: pointer; }
.ff-varios-btn i { font-size: 20px; color: var(--ff-em-txt); }
.ff-varios-btn.hide { display: none; }
.ff-varios-equipe { align-self: center; color: #d97706; }
.ff-form .ff-mais-foto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin: 0; }
.ff-form .ff-mais-foto.add { color: var(--ff-em-txt); font-size: 14px; }
.ff-form .ff-mais-foto.add small { font-size: 10.5px; line-height: 1.1; text-align: center; }
/* 20/10: "Mais fotos" do mesmo tamanho e formato da "Foto" principal */
.ff-form .ff-fotos-linha .ff-mais-fotos { flex: 0 0 auto; min-width: 0; }
.ff-form .ff-fotos-linha .ff-mais-fotos-grade { gap: 8px; }
.ff-form .ff-fotos-linha .ff-mais-foto,
.ff-form .ff-fotos-linha .ff-mais-foto.add { width: 96px !important; height: 96px; min-width: 96px; border-radius: 18px; padding: 0; }
/* 20/10: contato da Maker (perfil acessível pelo cadastro profissional) */
.ff-maker-perfil { text-align: center; }
.ff-maker-perfil-foto { width: 96px; height: 96px; margin: 4px auto 10px; border-radius: 50%; overflow: hidden; }
.ff-maker-perfil-foto img { width: 100%; height: 100%; object-fit: cover; }
.ff-maker-perfil .ff-rec-btn { display: flex; justify-content: center; margin: 14px 0 6px; }
.ff-cadpro-contato { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.ff-cadpro-contato p { font-size: 14px; color: rgba(var(--ff-ink),.85); text-align: center; margin: 0; }
.ff-cadpro-contato .ff-rec-btn { display: flex; justify-content: center; }

/* Android (Play Store): compras digitais fora do app */
.ff-loja-android .ff-so-web { display: none !important; }
        .ff-adm-filtros-pedidos { display: flex; gap: 6px; flex-wrap: wrap; }

/* ===== Cartão da feira escolhida: Ir até a feira ===== */
#cardFeiraEscolhida { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(22,163,74,.10); border: 1px solid rgba(22,163,74,.28); }
#cardFeiraEscolhida.hide { display: none; }
.ff-card-feira-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ff-card-feira-rotulo { font-size: 12px; font-weight: 700; opacity: .75; }
.ff-card-feira-txt strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-card-feira-txt small { font-size: 12.5px; opacity: .75; }
.ff-card-feira-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: #16a34a; color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; }
#ffIrFeira a.ff-item { text-decoration: none; color: inherit; }