/* Fominha — feed de descoberta gastronômica (Fase 1) */
:root{
  --fom-bg:#0f1115; --fom-card:#1a1d24; --fom-card2:#22262f;
  --fom-text:#f4f5f7; --fom-muted:#9aa3af; --fom-accent:#f59e0b; --fom-accent2:#ef4444;
  --fom-radius:16px; --fom-shadow:0 6px 20px rgba(0,0,0,.35);
  --fom-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
/* Tema Fominha sobre a receita compartilhada (/shared/subapp-base.css): âmbar→vermelho
 * + brilho ambiente no topo (o ingrediente que dá "profundidade"/alto nível). */
body.fom{
  --sa-accent:#f59e0b; --sa-accent2:#ef4444;
  --sa-grad:linear-gradient(135deg,#f59e0b,#ef4444);
  --sa-glow:rgba(245,158,11,.5); --sa-glow-shadow:0 14px 34px -14px rgba(245,158,11,.5);
  margin:0;font-family:var(--fom-font);color:var(--fom-text);padding-bottom:60px;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1100px 520px at 50% -8%,rgba(245,158,11,.15),transparent),var(--fom-bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Topbar */
.fom-top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:rgba(15,17,21,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.fom-logo{font-size:20px;font-weight:800;letter-spacing:-.5px;display:flex;align-items:center;gap:8px}
.fom-logo i{color:var(--fom-accent)}
.fom-city-pill{display:inline-flex;align-items:center;gap:7px;background:var(--fom-card2);border:1px solid rgba(255,255,255,.08);
  padding:7px 13px;border-radius:50px;font-size:13px;font-weight:600}
.fom-city-pill i:first-child{color:var(--fom-accent)}

/* Seletor de cidade */
.fom-wrap{max-width:680px;margin:0 auto;padding:32px 18px 60px}
.fom-h1{font-size:26px;font-weight:800;margin:8px 0 6px;letter-spacing:-.5px}
.fom-sub{color:var(--fom-muted);margin:0 0 26px;line-height:1.5}
.fom-cities{display:flex;flex-direction:column;gap:10px}
.fom-city{display:flex;align-items:center;justify-content:space-between;background:var(--fom-card);
  border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:15px 18px;transition:.18s}
.fom-city:hover{background:var(--fom-card2);transform:translateY(-1px)}
.fom-city-name{font-weight:700;font-size:16px}
.fom-city-name small{color:var(--fom-muted);font-weight:600;margin-left:6px;font-size:12px}
.fom-city-count{color:var(--fom-muted);font-size:13px}
.fom-empty{color:var(--fom-muted);text-align:center;padding:30px}
.fom-mp{display:inline-flex;align-items:center;gap:8px;margin-top:26px;color:var(--fom-muted);font-size:14px;font-weight:600}
.fom-mp:hover{color:var(--fom-text)}

/* Feed */
.fom-feed-wrap{max-width:1100px;margin:0 auto;padding:18px 14px 60px}
.fom-feed-h1{font-size:20px;font-weight:800;margin:6px 4px 18px;letter-spacing:-.4px}
.fom-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:640px){.fom-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:980px){.fom-grid{grid-template-columns:repeat(4,1fr);gap:18px}}

.fom-card{background:var(--fom-card);border-radius:var(--fom-radius);overflow:hidden;box-shadow:var(--fom-shadow);
  border:1px solid rgba(255,255,255,.05);transition:.2s;display:flex;flex-direction:column}
.fom-card:hover{transform:translateY(-3px);border-color:var(--sa-accent);box-shadow:var(--sa-glow-shadow)}
.fom-card-img{position:relative;aspect-ratio:1/1;background:var(--fom-card2);overflow:hidden}
.fom-card-img img{width:100%;height:100%;object-fit:cover;transition:.3s}
.fom-card:hover .fom-card-img img{transform:scale(1.05)}
.fom-card-price{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.78);color:#fff;
  font-weight:800;font-size:13px;padding:5px 10px;border-radius:50px;backdrop-filter:blur(4px)}
.fom-card-body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:8px;flex:1}
.fom-card-name{font-weight:700;font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fom-card-store{display:flex;align-items:center;gap:7px;margin-top:auto;color:var(--fom-muted);font-size:12px;font-weight:600}
.fom-card-store span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fom-card-store small{font-weight:500;opacity:.8}
.fom-card-logo{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--fom-card2)}

.fom-empty-feed{text-align:center;color:var(--fom-muted);padding:60px 20px}
.fom-empty-feed i{font-size:40px;color:var(--fom-accent);opacity:.7}
.fom-empty-feed p{margin:16px 0 20px}

.fom-foot{text-align:center;color:var(--fom-muted);font-size:12px;padding:30px 16px;border-top:1px solid rgba(255,255,255,.05);margin-top:30px}
.fom-foot strong{color:var(--fom-accent)}

/* ===== Cabeçalho do feed + toggle de modo ===== */
.fom-feed-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:6px 4px 16px;flex-wrap:wrap}
.fom-feed-tag{margin:4px 0 0;color:var(--fom-muted);font-size:13px;line-height:1.4}
.fom-feed-tag strong{color:var(--fom-accent)}
.fom-view-toggle{display:inline-flex;background:var(--fom-card);border:1px solid rgba(255,255,255,.08);border-radius:50px;padding:3px;flex-shrink:0}
.fom-vt{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--fom-muted);font-size:13px;font-weight:700;
  padding:8px 14px;border-radius:50px;cursor:pointer;font-family:inherit;transition:.18s}
.fom-vt.active{background:var(--sa-grad);color:#fff}

/* ===== Modo Deslizar (hero) ===== */
#fomMain[data-view="swipe"] #fomGrid{display:none}
#fomMain[data-view="grade"] #fomSwipe{display:none}
.fom-swipe{display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 0 10px}
.fom-stack{position:relative;width:100%;max-width:360px;height:min(64vh,520px);margin:0 auto;touch-action:pan-y}
.fom-sc{position:absolute;inset:0;background:var(--fom-card);border-radius:20px;overflow:hidden;
  box-shadow:var(--fom-shadow);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;
  cursor:grab;user-select:none;will-change:transform}
.fom-sc:active{cursor:grabbing}
.fom-sc-imgwrap{position:relative;flex:1;min-height:0;background:var(--fom-card2)}
.fom-sc-img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.fom-sc-price{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.8);color:#fff;font-weight:800;
  font-size:16px;padding:7px 13px;border-radius:50px;backdrop-filter:blur(4px)}
.fom-sc-badge{position:absolute;top:18px;font-size:22px;font-weight:900;letter-spacing:1px;padding:6px 14px;
  border-radius:10px;border:3px solid;opacity:0;transition:opacity .1s;pointer-events:none}
.fom-sc-like{right:18px;color:#22c55e;border-color:#22c55e;transform:rotate(12deg)}
.fom-sc-nope{left:18px;color:#ef4444;border-color:#ef4444;transform:rotate(-12deg)}
.fom-sc-body{padding:13px 15px 16px;flex-shrink:0}
.fom-sc-name{font-weight:800;font-size:18px;line-height:1.25;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fom-sc-store{display:flex;align-items:center;gap:8px;color:var(--fom-muted);font-size:13px;font-weight:600}
.fom-sc-store span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fom-sc-logo{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--fom-card2)}

.fom-swipe-actions{display:flex;align-items:center;justify-content:center;gap:22px}
.fom-act{width:60px;height:60px;border-radius:50%;border:2px solid rgba(255,255,255,.12);background:var(--fom-card);
  color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.16s;box-shadow:var(--fom-shadow)}
.fom-act:hover{transform:translateY(-2px) scale(1.05)}
.fom-act-no{color:#ef4444;border-color:rgba(239,68,68,.5)}
.fom-act-yes{color:#22c55e;border-color:rgba(34,197,94,.5)}
.fom-act-matches{width:50px;height:50px;font-size:18px;position:relative;color:#fff;
  background:var(--sa-grad);border-color:transparent;box-shadow:0 6px 18px -6px var(--sa-glow)}
.fom-act-matches:hover{transform:translateY(-2px) scale(1.08)}
.fom-act-matches span{position:absolute;top:-4px;right:-4px;background:#fff;color:var(--fom-accent2);font-size:11px;
  font-weight:800;min-width:18px;height:18px;border-radius:50px;display:flex;align-items:center;justify-content:center;
  padding:0 4px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.fom-swipe-hint{color:var(--fom-muted);font-size:12px}
.fom-swipe-end{text-align:center;padding:40px 16px;color:var(--fom-muted)}
.fom-swipe-end i{font-size:38px;color:var(--fom-accent)}
.fom-swipe-end p{margin:14px 0 18px;font-size:16px;color:var(--fom-text);font-weight:600}
.fom-swipe-end .fom-mp{display:flex;justify-content:center;margin:8px auto;max-width:280px;background:var(--fom-card);
  border:1px solid rgba(255,255,255,.08);padding:11px;border-radius:12px}

/* ===== Painel de matches ===== */
.fom-matches{position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:72vh;overflow:auto;
  background:var(--fom-card);border-top-left-radius:20px;border-top-right-radius:20px;
  box-shadow:0 -10px 40px rgba(0,0,0,.5);border-top:1px solid rgba(255,255,255,.08);animation:fomUp .25s ease}
@keyframes fomUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.fom-matches-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;position:sticky;top:0;background:var(--fom-card);border-bottom:1px solid rgba(255,255,255,.06)}
.fom-matches-head strong{font-size:16px}.fom-matches-head i{color:var(--fom-accent2)}
.fom-matches-head button{background:none;border:0;color:var(--fom-muted);font-size:20px;cursor:pointer}
.fom-matches-list{padding:8px}
.fom-match-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;transition:.15s}
.fom-match-item:hover{background:var(--fom-card2)}
.fom-match-item img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--fom-card2)}
.fom-match-info{flex:1;min-width:0}
.fom-match-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fom-match-store{color:var(--fom-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fom-match-go{background:var(--fom-accent);color:#1a1207;font-weight:800;font-size:13px;padding:8px 16px;border-radius:50px;flex-shrink:0}
.fom-match-del{background:none;border:0;color:var(--fom-muted);font-size:22px;line-height:1;width:34px;height:34px;border-radius:50%;flex-shrink:0;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center}
.fom-match-del:hover{background:rgba(244,63,94,.15);color:#f43f5e}
/* Selo de loja fechada (fora do horário) — topo-esquerda, não colide com o preço (rodapé-esquerda) */
.fom-closed{position:absolute;top:8px;left:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;
  background:rgba(15,23,42,.82);color:#fde68a;font-size:11px;font-weight:700;line-height:1.2;
  padding:5px 9px;border-radius:50px;max-width:calc(100% - 16px);backdrop-filter:blur(2px)}
.fom-closed i{font-size:10px}
.fom-is-closed .fom-sc-img,.fom-is-closed .fom-card-img img{filter:grayscale(.35) brightness(.82)}
.fom-matches-empty{color:var(--fom-muted);text-align:center;padding:24px 20px;font-size:14px}

/* ===== Seletor de cidade — tema Limpo/Premium (claro) ===== */
body.fom-light{background:#f6f7f9;color:#16181d}
.fom-pick{max-width:560px;margin:0 auto;min-height:100vh;background:#fff;display:flex;flex-direction:column;box-shadow:0 0 60px rgba(0,0,0,.06)}
.fom-pick-hero{position:relative;height:clamp(220px,40vh,320px);overflow:hidden}
.fom-hero-imgs{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr}
.fom-hero-img{width:100%;height:100%;object-fit:cover}
.fom-hero-img.hi0{grid-column:1/3}        /* primeira foto ocupa 2/3 */
.fom-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.78) 100%)}
.fom-pick-logo{position:absolute;top:16px;left:18px;color:#fff;font-size:22px;font-weight:800;letter-spacing:-.5px;display:flex;align-items:center;gap:8px;text-shadow:0 2px 8px rgba(0,0,0,.4);z-index:2}
.fom-pick-logo i{color:var(--fom-accent)}
.fom-pick-headline{position:absolute;left:20px;right:20px;bottom:18px;color:#fff;z-index:2}
.fom-pick-headline h1{font-size:24px;font-weight:800;margin:0 0 6px;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.fom-pick-headline h1 i{color:var(--fom-accent)}
.fom-pick-headline p{margin:0;font-size:14px;color:rgba(255,255,255,.92);text-shadow:0 1px 6px rgba(0,0,0,.5)}
.fom-pick-headline strong{color:var(--fom-accent)}

.fom-pick-body{padding:20px 18px 36px;display:flex;flex-direction:column;gap:14px}
.fom-geo{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--fom-accent);color:#1a1207;
  border:0;border-radius:14px;padding:15px;font-size:15px;font-weight:800;font-family:inherit;cursor:pointer;transition:.18s;box-shadow:0 4px 14px rgba(245,158,11,.35)}
.fom-geo:hover{filter:brightness(1.04);transform:translateY(-1px)}
.fom-geo:disabled{opacity:.7;cursor:default}
.fom-search{display:flex;align-items:center;gap:10px;background:#f0f1f4;border:1px solid #e3e5ea;border-radius:12px;padding:0 14px}
.fom-search i{color:#8a909c}
.fom-search input{flex:1;border:0;background:none;outline:none;padding:13px 0;font-size:15px;font-family:inherit;color:#16181d}
.fom-or{display:flex;align-items:center;gap:12px;color:#9aa0ac;font-size:12px;font-weight:600;margin:2px 0}
.fom-or::before,.fom-or::after{content:"";flex:1;height:1px;background:#e6e8ec}
.fom-cities{display:flex;flex-direction:column;gap:10px}
.fom-citycard{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #e9ebef;border-radius:14px;padding:10px 14px 10px 10px;transition:.16s}
.fom-citycard:hover{border-color:var(--fom-accent);box-shadow:0 4px 16px rgba(0,0,0,.07);transform:translateY(-1px)}
.fom-citycard-img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0;background:#eee}
.fom-citycard-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fom-citycard-name{font-weight:700;font-size:16px;color:#16181d}
.fom-citycard-name small{color:#9aa0ac;font-weight:600;font-size:12px;margin-left:4px}
.fom-citycard-count{color:#6b7280;font-size:13px}
.fom-citycard-arrow{color:#c4c8d0;font-size:14px}
.fom-mp-light{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;color:#6b7280;font-size:14px;font-weight:600;padding:8px}
.fom-mp-light:hover{color:#16181d}
body.fom-light .fom-empty{color:#9aa0ac;text-align:center;padding:24px}

/* ===== Seletor — tema ESCURO (variantes apetite/tinder) ===== */
body.fom-darkpick{background:var(--fom-bg);color:var(--fom-text)}
body.fom-darkpick .fom-pick{background:var(--fom-bg);box-shadow:none}
body.fom-darkpick .fom-search{background:var(--fom-card2);border-color:rgba(255,255,255,.08)}
body.fom-darkpick .fom-search i{color:var(--fom-muted)}
body.fom-darkpick .fom-search input{color:#fff}
body.fom-darkpick .fom-or{color:var(--fom-muted)}
body.fom-darkpick .fom-or::before,body.fom-darkpick .fom-or::after{background:rgba(255,255,255,.1)}
body.fom-darkpick .fom-citycard{background:var(--fom-card);border-color:rgba(255,255,255,.06)}
body.fom-darkpick .fom-citycard:hover{border-color:var(--fom-accent);box-shadow:0 4px 16px rgba(0,0,0,.4)}
body.fom-darkpick .fom-citycard-name{color:#fff}
body.fom-darkpick .fom-citycard-name small{color:var(--fom-muted)}
body.fom-darkpick .fom-citycard-count{color:var(--fom-muted)}
body.fom-darkpick .fom-citycard-arrow{color:rgba(255,255,255,.3)}
body.fom-darkpick .fom-mp-light{color:var(--fom-muted)}
body.fom-darkpick .fom-mp-light:hover{color:#fff}

/* --- Variante APETITE: colagem cheia --- */
.fom-apt-hero{position:relative;height:clamp(260px,46vh,380px);overflow:hidden}
.fom-apt-collage{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr}
.fom-apt-collage img{width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.fom-apt-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px 20px;background:linear-gradient(180deg,rgba(15,17,21,.55) 0%,rgba(15,17,21,.15) 40%,rgba(15,17,21,.92) 100%)}
.fom-apt-overlay .fom-pick-logo{position:absolute;top:18px;left:20px;color:#fff;font-size:22px;font-weight:800;display:flex;align-items:center;gap:8px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.fom-apt-overlay .fom-pick-logo i{color:var(--fom-accent)}
.fom-apt-overlay h1{font-size:30px;font-weight:900;margin:0 0 8px;color:#fff;line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.fom-apt-overlay p{margin:0;font-size:14px;color:rgba(255,255,255,.92);max-width:90%;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.fom-apt-overlay strong{color:var(--fom-accent)}

/* --- Variante TINDER: mini-baralho --- */
.fom-tin-hero{padding:18px 20px 8px;text-align:center}
.fom-tin-hero .fom-pick-logo{justify-content:center;color:#fff;font-size:22px;font-weight:800;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.fom-tin-hero .fom-pick-logo i{color:var(--fom-accent)}
.fom-tin-deck{position:relative;height:210px;margin:6px auto 16px;width:190px}
.fom-tin-card{position:absolute;top:0;left:50%;width:150px;height:200px;margin-left:-75px;border-radius:18px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.5);border:3px solid var(--fom-card)}
.fom-tin-card img{width:100%;height:100%;object-fit:cover}
.fom-tin-card.d0{transform:rotate(-9deg) translateX(-26px);z-index:1}
.fom-tin-card.d1{transform:rotate(0deg);z-index:3}
.fom-tin-card.d2{transform:rotate(9deg) translateX(26px);z-index:2}
.fom-tin-headline h1{font-size:24px;font-weight:900;margin:0 0 6px;color:#fff;line-height:1.15}
.fom-tin-headline p{margin:0 0 4px;color:var(--fom-muted);font-size:14px}
.fom-tin-headline strong{color:var(--fom-accent)}

/* ===== Botão Recarregar (ao lado do toggle) ===== */
.fom-head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.fom-reload{width:40px;height:40px;border-radius:50px;border:1px solid rgba(255,255,255,.08);background:var(--fom-card);
  color:var(--fom-muted);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s}
.fom-reload:hover{color:var(--fom-accent);border-color:rgba(245,158,11,.4);transform:rotate(-30deg)}
.fom-reload.loading{pointer-events:none;color:var(--fom-accent)}
.fom-reload.loading i{animation:fomspin .7s linear infinite}
@keyframes fomspin{to{transform:rotate(360deg)}}