/* ==========================================================================
   Pharus Skeleton — Sistema canônico unificado (mobile-view)
   --------------------------------------------------------------------------
   Consolidação dos 3 sistemas legados (.skeleton-*, .skeleton-produto-*,
   .skel-*) em `.pharus-skeleton` + variantes + modificadores.
   Camada 2 do ADR-002 (HTML canônico). Tokens de design-tokens.css.
   ==========================================================================

   USO BÁSICO:
     <div class="pharus-skeleton pharus-skeleton--text"></div>
     <div class="pharus-skeleton pharus-skeleton--card"></div>
     <div class="pharus-skeleton pharus-skeleton--avatar"></div>
     <div class="pharus-skeleton pharus-skeleton--thumbnail"></div>
     <div class="pharus-skeleton pharus-skeleton--produto"></div>

   MODIFICADORES DE ALTURA/LARGURA:
     pharus-skeleton--line-sm    (h=12px)
     pharus-skeleton--line-md    (h=16px)
     pharus-skeleton--line-lg    (h=24px)
     pharus-skeleton--title      (h=28px, 60%)
     pharus-skeleton--w60, --w80 (largura)

   CONTAINERS:
     pharus-skeleton-card        (card branco com padding + radius)
     pharus-skeleton-grid        (grid 2 col para imagens)
     pharus-skeleton-filter-row  (linha de filtro checkbox)
   ========================================================================== */

/* Base canônica — shimmer overlay via pseudo-elemento */
.pharus-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    display: block;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.pharus-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        var(--gray-100) 0%,
        var(--gray-200) 50%,
        var(--gray-100) 100%
    );
    background-size: 200% 100%;
    animation: pharus-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes pharus-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   Variantes principais (tipos semânticos)
   ========================================================================== */

/* Bloco de texto (linha de label/parágrafo) */
.pharus-skeleton--text {
    height: 14px;
    width: 80%;
    border-radius: var(--radius-xs);
}

/* Avatar circular */
.pharus-skeleton--avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* Thumbnail quadrada (imagem de produto) */
.pharus-skeleton--thumbnail {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
}

/* Card completo (placeholder de bloco) */
.pharus-skeleton--card {
    border-radius: var(--radius-md);
    padding: var(--space-4);
    min-height: 120px;
}

/* Banner (header ou hero) */
.pharus-skeleton--banner {
    width: 100%;
    height: 180px;
    border-radius: var(--radius-md);
}

/* Mapa/placa (retângulo alto) */
.pharus-skeleton--map {
    width: 100%;
    height: 120px;
    border-radius: var(--radius-sm);
}

/* Variante para bloco de produto (card vertical de oferta) */
.pharus-skeleton--produto {
    border-radius: var(--radius-sm);
}

/* Variante para imagem dentro de card (grid de galeria) */
.pharus-skeleton--image {
    width: 100%;
    height: 120px;
    border-radius: var(--radius-sm);
}

/* Variante para modal de imagens (altura maior) */
.pharus-skeleton--image-lg {
    width: 100%;
    height: 140px;
    border-radius: var(--radius-sm);
}

/* Variante para filtro (checkbox box) */
.pharus-skeleton--filter-box {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-xs);
    flex: 0 0 auto;
}

/* Variante para filtro (linha de label) */
.pharus-skeleton--filter-line {
    flex: 1;
    height: 14px;
    border-radius: var(--radius-sm);
}

/* Chat message bubble */
.pharus-skeleton--chat-bubble {
    height: 40px;
    border-radius: 16px;
    background: var(--gray-100);
}

/* Overlay sobre imagem que esta sendo processada (rembg + crop).
   Aplicado em wrapper `.editable-imagem` (position:relative) durante o
   AJAX de troca. Removido quando a imagem processada termina de carregar. */
.pharus-skeleton--overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: 2;
}
.editable-imagem.is-processing {
    position: relative;
}
.editable-imagem.is-processing > img {
    opacity: 0.35;
    transition: opacity 0.2s ease;
}

/* ==========================================================================
   Modificadores de tamanho (alturas)
   ========================================================================== */

.pharus-skeleton--line-sm    { height: 12px; }
.pharus-skeleton--line-md    { height: 16px; }
.pharus-skeleton--line-lg    { height: 24px; }
.pharus-skeleton--title      { height: 28px; width: 60%; }
.pharus-skeleton--title-sm   { height: 20px; width: 40%; }

/* Modificadores de largura */
.pharus-skeleton--w40 { width: 40%; }
.pharus-skeleton--w50 { width: 50%; }
.pharus-skeleton--w60 { width: 60%; }
.pharus-skeleton--w70 { width: 70%; }
.pharus-skeleton--w80 { width: 80%; }
.pharus-skeleton--w90 { width: 90%; }
.pharus-skeleton--full { width: 100%; }

/* Centralizado (para cards de produto centrados) */
.pharus-skeleton--center {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Containers reutilizáveis
   ========================================================================== */

/* Card branco envolvendo placeholders (padrão produto/loja/jornal) */
.pharus-skeleton-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-3) 0;
}

/* Grid 2-col para galeria de imagens */
.pharus-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3, 10px);
    width: 100%;
}

/* Linha de filtro (checkbox + label) */
.pharus-skeleton-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* ==========================================================================
   Task #307 Bloco C — Item 8 + Item 20
   Banner FOUC fix: esconde o #bannerRotate até o slick aplicar o carrossel.
   Antes, os 4 slides apareciam EMPILHADOS verticalmente por ~150ms antes
   do slick.init rodar (o que só roda após a 1ª imagem carregar). Com a
   regra abaixo, o container fica invisível até ganhar .slick-initialized
   — zero flash visual. min-height mantém espaço pra evitar layout shift
   enquanto o slick carrega.

   Mesma regra ajuda no Item 20: quando usuário troca de loja, loadBanners
   chama unslick() + rebuild — o container fica sem .slick-initialized
   por 1-2 frames, a regra esconde nesse meio-tempo.
   ========================================================================== */
/* Task #308 Fase 2 Item 26: min-height DEVE bater com o valor real do banner
   pós-carregado. Antes: skeleton 140px, banner real 160px (main-theme-two.css:773)
   — causava CLS de 20px quando o slick inicializava. Ajustado pra 160px (mesmo
   valor do #bannerRotate/.slick-list/.slick-track/.item). Media query @1359px
   abaixo cobre o cenário narrow onde .item img tem height:162px !important. */
#bannerRotate:not(.slick-initialized) {
    visibility: hidden;
    min-height: 160px;
}
@media (max-width: 1359px) {
    #bannerRotate:not(.slick-initialized) {
        min-height: 162px;
    }
}
#bannerRotate.slick-initialized {
    visibility: visible;
}

/* Quando não houver banners visíveis, JS adiciona .banner-none em .bannersRotate
   pra colapsar o container. Sem isso, o min-height: 160px do #bannerRotate
   reservava espaço cinza embaixo do skeleton oculto (~160px de gap antes de
   "OFERTAS DESTA SEMANA"). */
.bannersRotate.banner-none {
    display: none;
}