/*
 * Fotos das avaliações (13/10/2026). Prefixo avf-.
 * Miniaturas nas listas (página da peça, página da loja, home, painel e
 * admin), a foto ampliada em tela cheia com zoom e o campo de fotos do
 * formulário de avaliação. CSS próprio porque o /css/app.css do site público
 * é Tailwind purgado. Sem biblioteca. Ao mudar, suba o ?v= em
 * resources/views/partials/avaliacao-fotos-assets.blade.php.
 */

/* ---------- Miniaturas ---------- */
.avf-lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.avf-lista > li { margin: 0; padding: 0; }
.avf-mini { position: relative; display: block; width: 64px; height: 64px; margin: 0; padding: 0; border: 1px solid rgba(28, 25, 23, .10);
            border-radius: 12px; overflow: hidden; background: #f5f5f4; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.avf-mini img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.avf-mini:hover img { transform: scale(1.06); }
.avf-mini:focus-visible { outline: 3px solid #E8AF18; outline-offset: 2px; }
.avf-mini-lupa { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 999px; background: rgba(28, 25, 23, .58);
                 color: #fff; font-size: 10px; line-height: 1; display: grid; place-items: center; pointer-events: none; }
/* Moderação: maior, para a loja reconhecer a peça */
.avf-lista--g .avf-mini { width: 96px; height: 96px; border-radius: 14px; }
/* Home: o cartão é estreito no celular */
.avf-lista--p { gap: 6px; margin-top: 0; }
.avf-lista--p .avf-mini { width: 52px; height: 52px; border-radius: 10px; }
/* Cartão da home: o link da peça se estica sobre o cartão; a foto fica por cima dele */
.hm-av-card .avf-lista { position: relative; z-index: 2; }
.avf-selo { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #57534e; }
.avf-selo i { color: #287A00; }

/* ---------- Foto ampliada (tela cheia) ---------- */
.avf-lb { position: fixed; inset: 0; z-index: 2147483000; background: rgba(12, 10, 9, .95); color: #fff;
          -webkit-user-select: none; user-select: none; overscroll-behavior: contain; }
.avf-lb[hidden] { display: none; }
.avf-lb-palco { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
                padding: calc(64px + env(safe-area-inset-top)) 12px calc(64px + env(safe-area-inset-bottom)); }
.avf-lb-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; cursor: zoom-in;
              transform-origin: 50% 50%; transition: transform .22s ease, opacity .15s ease; touch-action: pinch-zoom; will-change: transform; }
.avf-lb-img.avf-carregando { opacity: .35; }
.avf-lb.avf-zoom .avf-lb-img { cursor: grab; touch-action: none; transition: none; }
.avf-lb.avf-zoom .avf-lb-img.avf-solto { transition: transform .22s ease; }
.avf-lb-btn { position: absolute; z-index: 2; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 999px;
              background: rgba(255, 255, 255, .14); color: #fff; font-size: 18px; line-height: 1; display: grid; place-items: center; cursor: pointer;
              -webkit-tap-highlight-color: transparent; }
.avf-lb-btn:hover { background: rgba(255, 255, 255, .26); }
.avf-lb-btn:focus-visible { outline: 3px solid #E8AF18; outline-offset: 2px; }
.avf-lb-btn[hidden] { display: none; }
.avf-lb-fechar { top: calc(10px + env(safe-area-inset-top)); right: 10px; }
.avf-lb-zoom { bottom: calc(10px + env(safe-area-inset-bottom)); right: 10px; }
.avf-lb-zoom[aria-pressed="true"] { background: #287A00; }
.avf-lb-ant, .avf-lb-prox { top: 50%; margin-top: -24px; }
.avf-lb-ant { left: 8px; }
.avf-lb-prox { right: 8px; }
.avf-lb-cont { position: absolute; top: calc(22px + env(safe-area-inset-top)); left: 18px; right: 70px; margin: 0; font-size: 14px; font-weight: 600;
               color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avf-lb-dica { position: absolute; left: 66px; right: 66px; bottom: calc(24px + env(safe-area-inset-bottom)); margin: 0; text-align: center;
               font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, .62); }
.avf-lb-erro { position: absolute; left: 16px; right: 16px; top: 50%; margin: -12px 0 0; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .8); }
.avf-lb-erro[hidden] { display: none; }
@media (min-width: 768px) {
    .avf-lb-palco { padding: 72px 84px; }
    .avf-lb-ant { left: 18px; }
    .avf-lb-prox { right: 18px; }
}
html.avf-travado, html.avf-travado body { overflow: hidden !important; }

/* ---------- Campo de fotos do formulário ---------- */
.avf-campo { margin: 0; }
.avf-rotulo { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 500; color: #78716c; }
.avf-ajuda { margin: 0 0 8px; font-size: 12.5px; line-height: 1.4; color: #57534e; }
.avf-escolhidas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.avf-escolhidas:empty { display: none; }
.avf-escolhida { position: relative; width: 76px; height: 76px; margin: 0; border-radius: 12px; overflow: hidden; background: #f5f5f4;
                 border: 1px solid rgba(28, 25, 23, .10); }
.avf-escolhida img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avf-escolhida-sem { display: grid; place-items: center; width: 100%; height: 100%; padding: 6px; text-align: center; font-size: 11px; line-height: 1.2; color: #78716c; }
.avf-escolhida-sem i { display: block; margin-bottom: 3px; font-size: 18px; color: #a8a29e; }
/* Botão de tirar: 44 px de toque, desenhado menor no canto */
.avf-tirar { position: absolute; top: -6px; right: -6px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent;
             display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.avf-tirar span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: rgba(28, 25, 23, .78); color: #fff;
                  font-size: 12px; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.avf-tirar:hover span { background: #b91c1c; }
.avf-tirar:focus-visible { outline: none; }
.avf-tirar:focus-visible span { outline: 3px solid #E8AF18; outline-offset: 1px; }
.avf-add { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; width: 100%; margin: 0;
           padding: 10px 14px; border: 1.5px dashed #a8a29e; border-radius: 12px; background: #fafaf9; color: #44403c; font-size: 14px;
           font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.avf-add:hover { border-color: #287A00; color: #1f5e00; background: #f3f8ee; }
.avf-add:focus-within { outline: 3px solid #b7d9a5; outline-offset: 2px; }
.avf-add i { color: #287A00; font-size: 16px; }
.avf-add[hidden] { display: none; }
.avf-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 0; }
.avf-limite { margin: 6px 0 0; font-size: 11.5px; color: #78716c; }
.avf-erro { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12.5px; line-height: 1.35; }
.avf-erro[hidden] { display: none; }
.avf-aviso { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 13px; line-height: 1.4; }
.avf-enviando { opacity: .7; cursor: progress; }

/* ---------- Seção "Fotos de quem comprou" da página da loja ---------- */
.avf-loja { margin-top: 48px; }
.avf-loja-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
.avf-loja-card { min-width: 0; padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 4px 16px rgba(28, 25, 23, .05);
                 border: 1px solid rgba(28, 25, 23, .05); }
.avf-loja-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.avf-loja-topo strong { color: #292524; }
.avf-loja-est { color: #E8AF18; font-size: 12px; letter-spacing: -1px; }
.avf-loja-est .avf-apagada { color: #e7e5e4; }
.avf-loja-data { margin-left: auto; font-size: 12px; color: #a8a29e; }
.avf-loja-texto { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #57534e; overflow-wrap: anywhere;
                  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.avf-loja-peca { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; font-size: 13px; font-weight: 600; color: #1f5e00; text-decoration: none; }
.avf-loja-peca:hover { text-decoration: underline; }
@media (min-width: 640px) { .avf-loja-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .avf-loja-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
    .avf-mini img, .avf-lb-img, .avf-lb.avf-zoom .avf-lb-img.avf-solto { transition: none; }
    .avf-mini:hover img { transform: none; }
}