/* ========================================
   PÁGINA DE IMAGENS - CSS ESPECÍFICO
   Baseado EXATAMENTE no padrão da página Textos
   Usando seletores específicos para evitar conflitos
   ======================================== */

/* Prevenir scroll horizontal global */
.imagens-main-wrapper * {
    box-sizing: border-box;
}

/* ========================================
   VARIÁVEIS CSS (herdando do texto.css)
   ======================================== */
:root {
    /* Larguras fixas para sidebars, flexível para centro */
    --imagem-sidebar-w: 250px;
    --imagem-center-w: 1fr;
    --imagem-agencias-w: 290px;
    --resultados-lista-max-height: 570px !important;
    /* Largura máxima alinhada ao header */
    --imagem-page-max: min(100vw, 1536px);
    /* Altura máxima da grid de imagens antes de criar rolagem */
    --imagens-grid-max-height: 900px;
    /* Largura mínima dos cards da grid principal (ajustada por container query) */
    --card-min: 270px;
    /* Largura mínima de cada coluna do header (ajustada por container query) */
    --header-col-min: 260px;
}

/* ========================================
   LAYOUT PRINCIPAL (seguindo padrão textos)
   ======================================== */
.imagens-main-wrapper {
    background: #fff;
    max-width: var(--imagem-page-max);
    margin: 0 auto;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.imagens-container {
    display: flex;
    column-gap: clamp(12px, 1.6vw, 24px);
    align-items: start;
    width: 100%;
    padding: 0 64px;
    box-sizing: border-box;
}

/* Destaque do termo pesquisado (harmonizado com Textos) */
mark.search-highlight {
    background-color: #fff3b0;
    color: inherit;
}

/* ========================================
   SIDEBAR ESQUERDA - FILTROS (padrão textos)
   ======================================== */
.imagens-sidebar.filtros {
    background: transparent;
    border-right: 1px solid #e3e7ed;
    padding: 24px 0px;
    padding-right: clamp(12px, 1.2vw, 20px);
    /* largura fixa para sidebar esquerda */
    flex: 0 0 var(--imagem-sidebar-w);
    width: var(--imagem-sidebar-w);
    min-width: var(--imagem-sidebar-w);
    max-width: var(--imagem-sidebar-w);
}

.imagens-sidebar.filtros h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: clamp(16px, 1.25vw, 20px);
    color: #2c3e50;
    line-height: 1.3;
}

.imagens-sidebar.filtros .filtros-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.imagens-sidebar.filtros .filtros-busca {
    position: relative;
}

.imagens-sidebar.filtros .busca-imagens {
    width: 100%;
    padding: clamp(8px, 0.5vw, 10px) clamp(10px, 1.875vw, 32px) clamp(8px, 0.5vw, 10px) clamp(16px, 1vw, 18px);
    border: 1px solid #e3e7ed;
    border-radius: 8px;
    font-size: clamp(14px, 0.875vw, 15px);
    background: #f8f9fa;
    transition: all 0.3s ease;
    line-height: 1.5;
}

.imagens-sidebar.filtros .busca-imagens:focus {
    outline: none;
    border-color: #F15F56;
    background: white;
}

.imagens-sidebar.filtros .busca-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b0b8c6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: auto;
    z-index: 2;
}

.imagens-sidebar.filtros .filtros-categorias-title {
    font-size: 14px;
    color: #ACB5BD;
    margin-bottom: -10px;
}

.imagens-sidebar.filtros .filtros-categorias {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.imagens-sidebar.filtros .filtros-categorias input[type="checkbox"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    accent-color: #F15F56;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #ACB5BD;
    border-radius: 3px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.imagens-sidebar.filtros .filtros-categorias input[type="checkbox"]:checked {
    background-color: #F15F56;
    border-color: #F15F56;
}

.imagens-sidebar.filtros .filtros-categorias input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.imagens-sidebar.filtros .filtros-categorias input[type="checkbox"]:indeterminate {
    background-color: #F15F56;
    border-color: #F15F56;
}

.imagens-sidebar.filtros .filtros-categorias input[type="checkbox"]:indeterminate::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 7px;
    width: 10px;
    height: 2px;
    background-color: white;
    transform: none;
    border: none;
}

.imagens-sidebar.filtros .filtros-categorias input[type="checkbox"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

/* Estado visual para itens desabilitados (sem permissão) */
.imagens-sidebar.filtros .filtros-categorias label.disabled {
    color: #9aa4b2;
    cursor: not-allowed;
}

.imagens-sidebar.filtros .filtros-categorias label.disabled input[type="checkbox"] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ========================================
   MENU HIERÁRQUICO (igual ao texto.css)
   ======================================== */

/* Filtro de cadernos hierárquico - EXATAMENTE como Textos */
.categoria-item {
    position: relative;
    display: block;
    padding-left: 0;
    margin-bottom: 0;
}

.categoria-item.has-children {
    display: flex;
    align-items: center;
    position: relative;
}

.categoria-item.has-children.expanded {
    flex-direction: column;
    align-items: flex-start;
}

.categoria-item.has-children>.arrow {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    margin-top: 0;
    cursor: pointer;
    background: url('data:image/svg+xml;utf8,<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"><polyline points="3,4 6,8 9,4" fill="none" stroke="%236e7a8e" stroke-width="2"/></svg>') no-repeat center;
    transition: transform 0.2s;
    display: inline-block;
    vertical-align: middle;
}

.categoria-item.has-children>.arrow {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin-right: 2px;
    margin-left: -4px;
    margin-top: 0;
    cursor: pointer;
    background: url('data:image/svg+xml;utf8,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><polyline points="4,6 7,9 10,6" fill="none" stroke="%236e7a8e" stroke-width="2"/></svg>') no-repeat center;
    transition: transform 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

.categoria-item.has-children>.arrow:hover {
    background-color: #f0f0f0;
    box-shadow: 0 0 0 1px #e3e7ed;
}

.categoria-item.has-children>label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 6px 0;
}

.categoria-item.has-children>label .arrow {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin-right: 2px;
    margin-left: 0;
    margin-top: 0;
    cursor: pointer;
    background: url('data:image/svg+xml;utf8,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><polyline points="4,6 7,9 10,6" fill="none" stroke="%236e7a8e" stroke-width="2"/></svg>') no-repeat center;
    transition: transform 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

.categoria-item.has-children>label .arrow:hover {
    background-color: #f0f0f0;
    box-shadow: 0 0 0 1px #e3e7ed;
}

.categoria-item.has-children>label .arrow.collapsed {
    transform: rotate(-90deg);
}

.categoria-item .subcategorias {
    display: none;
    width: 85%;
    margin-left: 24px;
    margin-top: 2px;
    border-left: 1px solid #e3e7ed;
    padding-left: 10px;
}

.categoria-item.expanded>.subcategorias {
    display: block;
}

.categoria-item .subcategorias label {
    font-size: 13px;
    color: #495057;
    padding: 3px 0;
}

.categoria-item.has-children>.arrow {
    margin-right: 6px;
}

.categoria-item.has-children>label .arrow {
    pointer-events: auto;
}

.categoria-item.has-children>label .arrow * {
    pointer-events: none;
}

.arrow,
.arrow-placeholder {
    display: inline-block;
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin-right: 2px;
    margin-left: 0;
    vertical-align: middle;
}

.arrow-placeholder {
    background: none !important;
    cursor: default;
}

.pipe {
    color: #E8E8E8;
    font-size: 15px;
    font-weight: 400;
    user-select: none;
    margin-right: 8px;
}

.imagens-sidebar.filtros .filtros-botoes {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.imagens-sidebar.filtros .btn-aplicar,
.imagens-sidebar.filtros .btn-limpar {
    border-radius: 8px;
    padding: 8px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.imagens-sidebar.filtros .btn-aplicar {
    background: #F15F56;
    color: #fff;
    border: none;
}

.imagens-sidebar.filtros .btn-aplicar:hover {
    background: #E04E47;
}

.imagens-sidebar.filtros .btn-limpar {
    background: #fff;
    color: #F15F56;
    border: 1px solid #F15F56;
}

.imagens-sidebar.filtros .btn-limpar:hover {
    background: #fff7f5;
}

.imagens-sidebar.filtros .btn-aplicar:focus,
.imagens-sidebar.filtros .btn-limpar:focus {
    outline: none;
    box-shadow: 0 0 0 2px #F15F5633;
}

/* ========================================
   ÁREA PRINCIPAL (padrão textos)
   ======================================== */
.imagens-main-content {
    display: flex;
    flex-direction: column;
    /* Ocupa todo o espaço restante ao lado da sidebar */
    flex: 1 1 0;
    min-width: 0;
}

/* ========================================
   HEADER BAR (padrão textos)
   ======================================== */

/* ========================================
   TICKER AVISOS (IMAGENS)
   ======================================== */
.imagens-avisos-ticker {
    width: 100%;
    margin: 8px 0 0;
    border-radius: 8px;
    background: #fff7f5;
    box-shadow: 0 1px 0 rgba(18, 35, 53, 0.03);
    overflow: hidden;
}

.imagens-avisos-link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 10px;
    text-decoration: none;
}

.imagens-avisos-label {
    color: var(--orange-color);
    background: #fff7f5;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    padding: 5px 8px;
    flex: 0 0 auto;
}

.imagens-avisos-sep {
    color: #8aa1b7;
    font-size: 12px;
    font-weight: 600;
    flex: 0 0 auto;
}

.imagens-avisos-track {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    flex: 1 1 auto;
    padding: 1px 0;
}

.imagens-avisos-track::before,
.imagens-avisos-track::after {
    content: '';
    position: absolute;
    top: 0;
    width: 14px;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.imagens-avisos-track::before {
    left: 0;
    background: linear-gradient(90deg, #fff7f5 0%, rgba(255, 247, 245, 0) 100%);
}

.imagens-avisos-track::after {
    right: 0;
    background: linear-gradient(270deg, #fff7f5 0%, rgba(255, 247, 245, 0) 100%);
}

.imagens-avisos-text {
    color: #2c3e50;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
    padding-left: 100%;
    animation: imagens-avisos-marquee 32s linear infinite;
}

.imagens-avisos-link:hover {
    background: rgba(255, 255, 255, 0.55);
}

.imagens-avisos-link:hover .imagens-avisos-text {
    animation-play-state: paused;
}

@keyframes imagens-avisos-marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

@media (max-width: 768px) {
    .imagens-avisos-ticker {
        margin: 4px 0 7px;
        border-radius: 7px;
    }

    .imagens-avisos-link {
        min-height: 32px;
        padding: 0 8px;
        gap: 6px;
    }

    .imagens-avisos-label {
        font-size: 10px;
        padding: 4px 7px;
    }

    .imagens-avisos-sep {
        font-size: 11px;
    }

    .imagens-avisos-text {
        font-size: 13px;
    }
}

.imagens-header-bar {
    /* Layout fluido e "autoquebrável" baseado em Grid - EXATAMENTE como Textos */
    display: grid;
    /* Torna a barra um container para container queries */
    container-type: inline-size;
    container-name: img-header;
    /* Usa variável para controlar quando quebrar em mais linhas */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    grid-auto-flow: row dense;
    align-items: center;
    border-bottom: none;
    background: transparent;
    width: 100%;
    margin-bottom: 0;
    position: relative;
    /* Mantém altura mínima sem travar o crescimento */
    min-height: 66px;
}

/* Divisores: pseudo-elemento com altura fixa e centralizado verticalmente */
.imagens-header-bar>* {
    position: relative;
    /* Permite encolher sem overflow dentro da coluna */
    min-width: 0;
    max-width: 100%;
}

.imagens-header-bar>*:not(:first-child)::before {
    content: "";
    position: absolute;
    left: -20px;
    /* centraliza no gap de 6px entre colunas */
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: var(--border-color);
}

.imagens-header-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--border-color);
    /* permite que linhas adicionais do grid não fiquem sobrepostas à borda */
    pointer-events: none;
}

.imagens-header-bar .aba {
    color: var(--text-medium-gray);
    text-decoration: none;
    padding: 16px 8px;
    font-size: 14px;
    font-weight: 500;
    position: relative;
}

.imagens-header-bar .aba:hover {
    color: var(--orange-color);
}

.imagens-header-bar .aba.ativa {
    color: var(--orange-color);
    background: transparent;
    font-weight: 600;
    position: relative;
}

.imagens-header-bar .aba.ativa::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8px;
    height: 3px;
    background: var(--orange-color);
    border-radius: 2px;
    width: 100%;
    pointer-events: none;
    left: 0;
    right: 0;
    width: 100%;
    transform: none;
}

.imagens-header-bar .aba-dropdown-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    /* Alinha no início para evitar saltos entre colunas */
    justify-self: center;
    width: auto;
    min-width: 0;
    margin: 15px 0 15px 0;
}

.imagens-header-bar .aba-dropdown-wrapper::before {
    /* Divisores desativados para não "quebrar" quando o header ocupa múltiplas linhas */
    display: none;
}

.imagens-header-bar .aba-dropdown-wrapper::after {
    display: none;
}

.imagens-header-bar .aba-dropdown-wrapper .aba-label {
    color: var(--text-medium-gray);
    font-size: 14px;
    display: inline-block;
    min-width: 0;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.imagens-header-bar .dropdown-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0px 25px 0px 20px;
    font-size: 14px;
    color: #4b5a6c;
    cursor: pointer;
    outline: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%236e7a8e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 18px;
    font-weight: 600;
}

/* DESKTOP (padrão) */
/* Campo de data com espaço reservado para o ícone */
.imagens-header-bar .filtro-data-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.imagens-header-bar .filtro-data-input {
    background: #fff;
    border: 1px solid #e3e7ed;
    border-radius: 6px;
    padding: 4px 12px;
    /* espaço para o ícone do calendário à direita */
    padding-right: 28px;
    font-size: 14px;
    color: #4b5a6c;
    outline: none;
    font-weight: 500;
    box-sizing: border-box;
    transition: border 0.2s;
    width: clamp(180px, 22vw, 230px);
    /* remove deslocamento negativo que causava overflow */
    margin-left: 0;
}

/* Ajuste global para o ícone do calendário */
.imagens-header-bar .calendar-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    color: #4b5a6c;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
}

.imagens-header-bar .paginacao {
    color: #4b5a6c;
    font-size: 14px;
    white-space: nowrap;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 15px 0;
}

.imagens-header-bar .paginacao .paginacao-total {
    font-weight: 600;
    color: #2c3e50;
    white-space: pre;
    /* Preserva espaços exatamente como no HTML */
}

.imagens-header-bar .paginacao::before {
    display: none;
}

/* Reativa divisores também para itens que tinham ::before desativado */
.imagens-header-bar>.aba-dropdown-wrapper::before,
.imagens-header-bar>.paginacao::before {
    content: "";
    position: absolute;
    /* igual aos demais para centralizar no gap */
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: #e3e7ed;
    display: block;
}

.imagens-header-bar>.aba-dropdown-wrapper::before {
    left: -16px;
}

.imagens-header-bar>.paginacao::before {
    left: -30px;
}

.imagens-header-bar .setas {
    color: #6e7a8e;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
}

.imagens-header-bar .setas .seta-item {
    display: inline-block;
    width: 22px;
    height: 22px;
    text-indent: -9999px;
    /* esconde os caracteres ? ? > < */
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    color: #6e7a8e;
    /* mesma base das setas do menu de cadernos */
    transition: color 0.2s ease;
}

.imagens-header-bar .setas a.seta-item {
    cursor: pointer;
}

.imagens-header-bar .setas span.seta-item {
    cursor: default;
    opacity: 0.5;
}

/* Usa currentColor para permitir hover/color ativo */
.imagens-header-bar .setas .seta-item:nth-child(1) {
    /* primeira página: ? */
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><polyline points="10,3 6,8 10,13" fill="none" stroke="currentColor" stroke-width="2"/><polyline points="6,3 2,8 6,13" fill="none" stroke="currentColor" stroke-width="2"/></svg>');
}

.imagens-header-bar .setas .seta-item:nth-child(2) {
    /* anterior: < */
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><polyline points="10,3 5,8 10,13" fill="none" stroke="currentColor" stroke-width="2"/></svg>');
}

.imagens-header-bar .setas .seta-item:nth-child(3) {
    /* próxima: > */
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><polyline points="6,3 11,8 6,13" fill="none" stroke="currentColor" stroke-width="2"/></svg>');
}

.imagens-header-bar .setas .seta-item:nth-child(4) {
    /* última página: ? */
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><polyline points="6,3 10,8 6,13" fill="none" stroke="currentColor" stroke-width="2"/><polyline points="2,3 6,8 2,13" fill="none" stroke="currentColor" stroke-width="2"/></svg>');
}

.imagens-header-bar .setas .seta-item:hover {
    color: #F15F56;
}

/* ========================================
   WRAPPER DE CONTEÚDO (padrão textos)
   ======================================== */
.imagens-content-wrapper {
    display: flex;
    gap: clamp(12px, 1.6vw, 24px);
    margin-top: 20px;
    /* Respiro entre header e conteúdo */
    width: 100%;
}

.imagens-content-column {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 1;
    /* Torna a coluna um container para container queries da grid */
    container-type: inline-size;
    container-name: imagens;
}

/* ========================================
   GRID DE IMAGENS - 3 colunas fixas (igual página Agências)
   ======================================== */
.imagens-grid {
    display: grid;
    /* Grid fixo de 3 colunas - mesmo com 1 resultado, mantém layout de 3 colunas */
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.2vw, 16px);
    width: 100%;
    max-width: 100%;
    max-height: var(--imagens-grid-max-height, 900px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 12px;
    /* respiro entre cards e barra */
    scrollbar-gutter: stable;
    /* reserva espaço p/ barra quando surgir */
    /* Garante que cards fiquem alinhados à esquerda, mesmo quando sobra apenas 1 */
    justify-items: start;
    align-items: start;
    box-sizing: border-box;
}

/* Garante que cards não ultrapassem a largura da coluna do grid */
.imagens-grid>.imagem-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Media queries removidas - o grid agora se ajusta automaticamente */

/* Empty state (sem resultados / sem seleção) */
.empty-state {
    max-width: 720px;
    margin: 32px auto;
    padding: 32px 28px;
    background: #FFFFFF;
    border: 1px dashed #e3e7ed;
    border-radius: 12px;
    text-align: center;
    color: #6e7a8e;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
}

/* No modo Retranca (grid), o empty-state deve ocupar todas as colunas e ficar centralizado */
.imagens-grid>.empty-state {
    grid-column: 1 / -1;
    /* Ocupa todas as colunas do grid */
    justify-self: center;
    /* Centraliza horizontalmente */
    width: 100%;
    max-width: 720px;
    margin: 32px auto;
}

.empty-state-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px auto;
    border-radius: 50%;
    background: #fff7f5;
    position: relative;
}

.empty-state-icon:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="%23F15F56" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}

.empty-state-title {
    font-size: clamp(16px, 1.125vw, 18px);
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: clamp(6px, 0.5vw, 8px);
    line-height: 1.3;
}

.empty-state-desc {
    font-size: clamp(13px, 0.875vw, 14px);
    line-height: 1.6;
}

/* Lista (modo Título/Lide) */
.imagens-list-titulo {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1vw, 16px);
    width: 100%;
    max-height: var(--imagens-grid-max-height, 900px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: clamp(10px, 0.75vw, 12px);
    /* respiro entre conteúdo e barra */
    scrollbar-gutter: stable;
}

/* Lista (modo Título e Leads) */
.imagens-list-lide {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1vw, 16px);
    width: 100%;
    max-height: var(--imagens-grid-max-height, 900px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: clamp(10px, 0.75vw, 12px);
    scrollbar-gutter: stable;
}

.imagem-item-lide {
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.02);
    display: flex;
    gap: 40px;
    padding: 24px;
    align-items: center;
}

.imagem-item-lide .imagem-texto {
    flex: 1 1 auto;
}

.imagem-item-lide .imagem-info-title {
    font-weight: 700;
    font-size: clamp(15px, 1vw, 16px);
    color: #212529;
    line-height: 1.3;
}

.imagem-item-lide .imagem-info-meta {
    font-size: clamp(12px, 0.8125vw, 13px);
    color: #6e7a8e;
    margin-top: clamp(4px, 0.25vw, 6px);
    line-height: 1.4;
}

.imagem-item-lide .imagem-info-lead {
    font-size: clamp(13px, 0.875vw, 14px);
    color: #2c3e50;
    line-height: 1.5;
    margin-top: clamp(8px, 0.5vw, 10px);
}

.imagem-item-lide .imagem-media {
    position: relative;
    flex: 0 0 220px;
    width: 220px;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
}

.imagem-item-lide .imagem-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.imagem-item-lide .imagem-media-icon {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 28px;
    height: 28px;
    border-radius: 20%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F15F56;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.imagem-item-titulo {
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.02);
    display: flex;
    gap: 20px;
    padding: 16px;
}

.imagem-item-titulo .imagem-microcard {
    flex: 0 0 320px;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.imagem-item-titulo .imagem-thumb {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
}

.imagem-item-titulo .imagem-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 8px;
}

.imagem-item-titulo:hover .imagem-thumb img {
    transform: scale(1.03);
}

.imagem-item-titulo .imagem-detalhes {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #F6F7FA;
    border-radius: 8px;
    padding: 16px;
}

.imagem-item-titulo .imagem-info-title {
    font-weight: 700;
    font-size: clamp(15px, 1vw, 16px);
    color: #212529;
    line-height: 1.3;
}

.imagem-item-titulo .imagem-info-meta {
    font-size: clamp(12px, 0.8125vw, 13px);
    color: #6e7a8e;
    line-height: 1.4;
}

.imagem-item-titulo .imagem-info-text {
    font-size: clamp(13px, 0.875vw, 14px);
    color: #2c3e50;
    line-height: 1.5;
}

/* Bloco extra de informações no modo Título */
.imagem-item-titulo .imagem-info-extra {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed #e4e7ee;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #4a5568;
    font-size: 13px;
}

.imagem-item-titulo .imagem-info-credit {
    font-weight: 600;
    color: #2f3b4a;
}

.imagem-item-titulo .imagem-info-file {
    color: #6b7280;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
}

.imagem-item-titulo .imagem-actions {
    margin-top: 0;
}

.imagem-card {
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px;
    height: auto;
    min-height: 395px;
    gap: 16px;
    /* Garante que padding e border sejam incluídos no cálculo da largura */
    box-sizing: border-box;
    /* max-width será definido pelo grid (.imagens-grid > .imagem-card) para evitar esticar */
}

/* Cards responsivos para tablets */
@media (min-width: 769px) and (max-width: 1199px) {
    .imagem-card {
        min-height: 380px;
        padding: 14px;
        gap: 14px;
    }

    .imagem-container {
        height: 220px;
    }

    .imagem-container img {
        height: 220px;
    }

    .imagem-caption {
        font-size: 13px;
    }

    .action-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 6px;
    }

    .btn-comprar {
        padding: 10px 14px;
        height: 40px;
        font-size: 13px;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .imagem-card {
        min-height: 390px;
    }

    .action-btn {
        min-width: 36px;
        min-height: 36px;
    }
}

.imagem-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.imagem-container {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
    border-radius: 8px;
}

.imagem-container img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 8px;
}

.imagem-card:hover .imagem-container img {
    transform: scale(1.05);
}

.imagem-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 2;
}

.imagem-tag.exclusiva {
    background: rgba(255, 255, 255, 0.9);
    color: #212529;
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

.imagem-caption {
    padding: 0;
    margin-left: 5px;
    margin-right: 5px;
    font-size: clamp(13px, 0.875vw, 14px);
    color: #212529;
    line-height: 1.5;
    flex-grow: 1;
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: clamp(10px, 0.75vw, 12px);
}

.imagem-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.imagem-actions-icons {
    display: flex;
    gap: 10px;
    margin-left: 8px;
}

.action-btn {
    background: none;
    border: none;
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
}

.action-btn:hover {
    color: #F15F56;
}

.action-btn:active,
.action-btn:focus,
.action-btn:focus-visible {
    background: none;
    color: #ccc;
    transform: none;
    outline: none;
    border: none;
    box-shadow: none;
}

.btn-comprar {
    padding: 12px 16px;
    background: #F15F56;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn-comprar:hover {
    background: #E04E47;
    transform: translateY(-1px);
}

/* ========================================
   BUSCA AVANÇADA
   ======================================== */

.busca-avancada-container {
    margin: 0px 5px;
    padding: 0;
}

.busca-tipo {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.busca-tipo-option {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 14px;
    color: #4b5a6c;
    font-weight: 500;
}

.busca-tipo-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
    accent-color: #F15F56;
    width: 16px;
    height: 16px;
    display: inline-block;
    visibility: visible;
    opacity: 1;
    /* Cor laranja igual ao menu Textos */
}

.busca-tipo-option input[type="radio"]:checked+span {
    color: #212529;
    /* Cor laranja quando selecionado */
    font-weight: 600;
}

.busca-avancada-filtros {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 8px 30px 8px 16px;
    transition: all 0.3s ease;
}

.filtro-grupo {
    margin-bottom: 10px;
}

.filtro-grupo:last-child {
    margin-bottom: 5px;
}

.filtro-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 10px;
}

.filtro-titulo {
    font-size: 14px;
    font-weight: 600;
    color: #4b5a6c;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.filtro-icone {
    font-size: 12px;
    color: #6c757d;
    transition: transform 0.3s ease;
}

.filtro-header[aria-expanded="true"] .filtro-icone {
    transform: rotate(180deg);
}

/* Garantir que os filtros avançados sejam visíveis */
#busca-avancada-filtros {
    display: none;
}

#busca-avancada-filtros.show {
    display: block !important;
}

.filtro-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.filtro-titulo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #4b5a6c !important;
}

.filtro-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.filtro-content.show {
    max-height: 500px;
    overflow: visible;
}

.filtro-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filtro-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #4b5a6c;
    padding: 4px 0;
}

.filtro-checkbox input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: #F15F56;
    width: 16px;
    height: 16px;
    display: inline-block;
    visibility: visible;
    opacity: 1;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #ACB5BD;
    border-radius: 3px;
    background-color: #fff;
    position: relative;
    flex-shrink: 0;
    /* Cor laranja igual ao menu Textos */
}

.filtro-checkbox input[type="checkbox"]:checked {
    background-color: #F15F56;
    border-color: #F15F56;
}

.filtro-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.filtro-checkbox input[type="checkbox"]:indeterminate {
    background-color: #F15F56;
    border-color: #F15F56;
}

.filtro-checkbox input[type="checkbox"]:indeterminate::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 7px;
    width: 10px;
    height: 2px;
    background-color: white;
    transform: none;
    border: none;
}

.filtro-checkbox input[type="checkbox"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

.filtro-checkbox input[type="checkbox"]:checked+span {
    color: #212529;
    font-weight: 500;
}

/* ========================================
   MAIS ACESSADAS (específico para imagens)
   ======================================== */

.mais-acessadas-content {
    margin-bottom: 25px;
    overflow: visible;
    /* Permite que o hover seja visível */
    width: 100%;
    position: relative;
    padding-top: 4px;
    /* Espaço para o hover translateY(-2px) */
}

.imagens-mais-acessadas {
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.imagens-mais-acessadas .resultados-lista-container-mais-acessadas {
    padding: 0;
}

.imagens-mais-acessadas .mais-acessadas-header {
    padding: 20px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.imagens-mais-acessadas .mais-acessadas-header h3 {
    margin: 0;
    font-size: 18px;
    color: #2c3e50;
    font-weight: 700;
}

.imagens-mais-acessadas .mais-acessadas-pagination {
    display: flex;
    gap: 8px;
}

.imagens-mais-acessadas .pagination-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e3e7ed;
    background: white;
    border-radius: 4px;
    color: #6e7a8e;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    /* Remove o contorno padrão */
}

.imagens-mais-acessadas .pagination-btn:focus {
    outline: none;
    /* Remove o contorno no foco */
    box-shadow: none;
    /* Remove qualquer sombra de foco */
}

.imagens-mais-acessadas .pagination-btn:active {
    outline: none;
    /* Remove o contorno no clique */
    box-shadow: none;
    /* Remove qualquer sombra no clique */
}

.imagens-mais-acessadas .pagination-btn:hover {
    background: #fff7f5;
    border-color: #F15F56;
    color: #F15F56;
}

.imagens-mais-acessadas .pagination-btn:disabled {
    background: #f8f9fa;
    border-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.5;
    outline: none;
    /* Remove o contorno nos botões desabilitados */
    pointer-events: none;
}

.imagens-mais-acessadas .pagination-btn:disabled:hover {
    background: #f8f9fa;
    border-color: #e9ecef;
    color: #6c757d;
}

.imagens-grid-mais-acessadas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 4px 0 20px 0;
    overflow-x: hidden;
    overflow-y: visible;
}

.imagens-grid-mais-acessadas::-webkit-scrollbar {
    display: none;
}

.imagem-card-mais-acessada {
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
    position: relative;
    /* Grid interno: imagem (230px) / conteúdo que cresce / ações */
    display: grid;
    grid-template-rows: 230px 1fr auto;
    padding: 16px;
    width: 100%;
    min-width: 0;
    min-height: 395px;
    height: auto;
    gap: 16px;
    flex-shrink: 0;
}

.imagem-card-mais-acessada:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.imagem-numero {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    background: #F15F56;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}

/* Estilos específicos para elementos dentro dos cards "Mais Acessadas" */
.imagem-card-mais-acessada .imagem-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.imagem-card-mais-acessada .imagem-container img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 8px;
}

.imagem-card-mais-acessada:hover .imagem-container img {
    transform: scale(1.05);
}

.imagem-card-mais-acessada .imagem-caption {
    padding: 0;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 14px;
    color: #212529;
    line-height: 1.4;
    flex-grow: 1;
    border-bottom: 1px solid #E8E8E8;
}

.imagem-card-mais-acessada .imagem-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    min-width: 0;
}

.imagem-card-mais-acessada .imagem-actions-icons {
    display: flex;
    gap: 22px;
    margin-left: 12px;
    flex-shrink: 1;
    min-width: 0;
}

/* Loading State */
.imagens-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    width: 100%;
    min-height: 200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Garante centralização quando dentro de containers específicos */
.imagens-resultados .imagens-loading,
.imagens-grid .imagens-loading,
.imagens-list-titulo .imagens-loading,
.imagens-list-lide .imagens-loading {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1 / -1;
}

.imagens-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #F15F56;
    border-radius: 50%;
    animation: imagens-spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes imagens-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.imagens-loading p {
    color: #6c757d;
    font-size: 14px;
    margin: 0;
}

.imagem-card-mais-acessada .action-btn {
    background: none;
    border: none;
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imagem-card-mais-acessada .action-btn:hover {
    color: #F15F56;
}

.imagem-card-mais-acessada .action-btn:active,
.imagem-card-mais-acessada .action-btn:focus,
.imagem-card-mais-acessada .action-btn:focus-visible {
    background: none;
    color: #ccc;
    transform: none;
    outline: none;
    border: none;
    box-shadow: none;
}

.imagem-card-mais-acessada .btn-comprar {
    padding: 12px 16px;
    background: #F15F56;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    flex-shrink: 0;
}

.imagem-card-mais-acessada .btn-comprar:hover {
    background: #E04E47;
    transform: translateY(-1px);
}

/* ========================================
   RESPONSIVIDADE BOTÃO COMPRAR - MAIS ACESSADAS
   ======================================== */
@media (min-width: 1281px) and (max-width: 1319px) {
    .btn-comprar {
        font-size: 13px !important;
    }

    .imagem-actions-icons {
        margin-left: 0;
        gap: 0;
    }
}

@media (min-width: 769px) and (max-width: 1070px) {
    .imagem-actions-icons {
        margin-left: 0;
        gap: 0;
    }
}

/* Abaixo de 1320px: mostrar apenas "$" - APENAS para Mais Acessadas */
@media (max-width: 1319px) {

    .imagens-grid-mais-acessadas .btn-comprar {
        font-size: 0 !important;
        padding: 10px !important;
        width: 40px !important;
        min-width: 40px !important;
        position: relative !important;
        white-space: normal !important;
        overflow: hidden !important;
    }

    .imagens-grid-mais-acessadas .btn-comprar::before {
        content: "$" !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: white !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* Abaixo de 1110px: remover o botão - APENAS para Mais Acessadas */
@media (max-width: 1109px) {
    .imagens-grid-mais-acessadas .btn-comprar {
        display: none !important;
    }
}

/* Abaixo de 1195px: voltar a mostrar o botão completo - APENAS para Mais Acessadas */
@media (max-width: 1195px) {
    .imagens-grid-mais-acessadas .btn-comprar {
        display: flex !important;
        font-size: 14px !important;
        padding: 12px 16px !important;
        width: auto !important;
        min-width: auto !important;
    }

    .imagens-grid-mais-acessadas .btn-comprar::before {
        display: none !important;
    }
}

/* Abaixo de 974px: mostrar apenas "$" novamente - APENAS para Mais Acessadas */
@media (max-width: 974px) {

    .imagens-grid-mais-acessadas .btn-comprar,
    .btn-comprar {
        font-size: 0 !important;
        padding: 10px !important;
        width: 40px !important;
        min-width: 40px !important;
        position: relative !important;
        white-space: normal !important;
        overflow: hidden !important;
    }

    .imagens-grid-mais-acessadas .btn-comprar::before,
    .btn-comprar::before {
        content: "$" !important;
        display: block !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: white !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* Mobile: voltar a mostrar o botão completo - APENAS para Mais Acessadas */
@media (max-width: 768px) {

    .imagens-grid-mais-acessadas .btn-comprar,
    .btn-comprar {
        display: flex !important;
        font-size: 14px !important;
        padding: 12px 16px !important;
        width: auto !important;
        min-width: auto !important;
    }

    .imagens-grid-mais-acessadas .btn-comprar::before,
    .btn-comprar::before {
        display: none !important;
    }

    .imagens-sidebar.filtros h2 {
        text-align: center;
    }
}

@media (min-width: 769px) and (max-width: 840px) {

    .imagens-grid-mais-acessadas .btn-comprar,
    .btn-comprar {
        display: none !important;
    }
}

/* ========================================
   RESPONSIVIDADE (padrão textos)
   ======================================== */

/* Media query removida - o grid agora se ajusta automaticamente */

/* Container query: zona intermediária - mantém 3 colunas com cards menores */
@container imagens (max-width: 1000px) and (min-width: 900px) {
    .imagens-content-column {
        --card-min: 300px;
    }
}

/* Container query: quando a coluna central fica menor, força 2 colunas confortáveis */
@container imagens (max-width: 899px) and (min-width: 650px) {
    .imagens-content-column {
        --card-min: 460px;
    }
}

/* Responsividade - Tablet: 2 colunas */
@media (min-width: 769px) and (max-width: 1200px) {
    .imagens-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Fallback de viewport para navegadores sem container queries - zona intermediária */
@media (min-width: 1100px) and (max-width: 1200px) {
    .imagens-content-column {
        --card-min: 300px;
    }

    .btn-comprar {
        font-size: 13px !important;
    }
}

@media (min-width: 1201px) and (max-width: 1280px) {
    .imagem-actions-icons {
        gap: 0;
        margin: 0;
    }

    .imagens-header-bar .dropdown-select {
        padding: 0px 25px 0px 10px;
    }

    .btn-comprar {
        font-size: 13px !important;
    }
}


/* Fallback de viewport para navegadores sem container queries - 2 colunas */
@media (min-width: 769px) and (max-width: 1099px) {
    .imagens-content-column {
        --card-min: 460px;
    }
}

/* Container query: cabeçalho em coluna média/grande deve quebrar cedo e permitir quebra de linha na paginação */
@container img-header (max-width: 1079px) {
    .imagens-header-bar {
        --header-col-min: 320px;
    }

    .imagens-header-bar .paginacao {
        font-size: 12px;
        margin: 20px 0 10px 0px;
    }
}

/* Fallback de viewport para o cabeçalho */
@media (max-width: 1205px) {
    .imagens-header-bar {
        --header-col-min: 320px;
    }

    .imagens-header-bar .paginacao {
        white-space: normal;
    }

    .imagens-header-bar .filtro-data-wrapper {
        justify-content: center;
    }
}

/* Ajustes para quebra de linha do cabeçalho a partir de 1256px */
@media (max-width: 1205px) {
    .imagens-header-bar {
        /* Mantém o comportamento fluido com Grid também neste range */
        display: grid;
        grid-auto-flow: row dense;
        align-items: center;
    }

    .imagens-header-bar .aba {
        padding: 12px 8px;
        /* Reduz padding vertical para economizar espaço */
    }

    .imagens-header-bar .filtro-data-wrapper {
        margin-top: 4px;
        /* Adiciona margem superior para separar da linha anterior */
    }
}

/* Ocultar separadores verticais a partir de 1350px */
@media (max-width: 1350px) {

    .imagens-header-bar>.aba-dropdown-wrapper::before,
    .imagens-header-bar>.paginacao::before,
    .imagens-header-bar>*:not(:first-child)::before {
        display: none !important;
    }
}

/* Ocultar ícone do calendário a partir de 1021px */
@media (min-width: 769px) and (max-width: 1005px) {
    .imagens-header-bar .calendar-icon {
        display: none !important;
    }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .imagens-header-bar {
        gap: clamp(12px, 2vw, 20px);
    }

    /* Grid se ajusta automaticamente - sem necessidade de override */
    .imagens-grid-mais-acessadas {
        grid-template-columns: repeat(2, 1fr);
        justify-items: start;
        align-items: start;
    }

}

@media (min-width: 769px) and (max-width: 1199px) {

    /* Modo Título (lista) - tablet */
    .imagem-item-titulo {
        padding: 20px;
        gap: 16px;
    }

    .imagem-item-titulo .imagem-thumb {
        flex: 0 0 180px;
        height: 140px;
    }

    .imagem-item-titulo .imagem-thumb img {
        height: 140px;
    }

    /* Modo Lide - tablet */
    .imagem-item-lide {
        padding: 20px;
        gap: 20px;
    }

    .imagem-item-lide .imagem-media {
        flex: 0 0 200px;
        height: 130px;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .imagens-header-bar {
        gap: clamp(12px, 2vw, 20px);
    }

    /* Ajustes dos modais para tablet landscape */
    .imagem-modal {
        padding: 0 20px 20px;
    }

    .imagem-modal .modal-tabs {
        gap: 18px;
    }

    .imagem-modal .form-row {
        gap: 16px;
    }
}

@media (min-width: 769px) and (max-width: 1199px) {

    /* Ajustes dos modais para tablet */
    .imagem-modal {
        padding: 0 18px 18px;
    }

    .imagem-modal .modal-tabs {
        gap: 16px;
        flex-wrap: wrap;
    }

    .imagem-modal .modal-tabs .tab-link {
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        padding: 10px 6px 12px 6px;
    }

    .imagem-modal .modal-tabs .btn-comprar {
        margin-left: auto;
        width: auto;
        min-width: 120px;
    }

    .imagem-modal .form-row {
        gap: 12px;
    }

    .imagem-modal .form-row>label {
        width: 120px;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
    }

    .imagem-modal .zoom-image {
        max-height: 55vh;
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .btn-comprar {
        font-size: 13px !important;
    }

    .imagens-container {
        flex-direction: column;
        padding: 20px 15px;
        gap: 20px;
        width: 100%;
    }

    .imagens-sidebar.filtros {
        display: grid;
        width: 100%;
        max-width: 100%;
        padding: 20px;
        border: 1px solid #e3e7ed;
        border-radius: 8px;
        background: #fff;
        margin-bottom: 20px;
        justify-content: center;
        align-items: center;
    }

    .imagens-main-content {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin-left: 0;
    }

    .imagens-header-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
        padding: 15px;
        background: #fff;
        border: 1px solid #e3e7ed;
        border-radius: 8px;
    }

    .imagens-header-bar .filtro-data-input {
        width: 230px;
        display: block;
        margin-left: 0;
    }

    .imagens-header-bar .abas-header-mobile {
        width: 100%;
        display: flex;
        gap: clamp(12px, 1.25vw, 20px);
        border-bottom: 1px solid #e3e7ed;
        background: #fff;
        padding: 0 clamp(12px, 0.9375vw, 15px);
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: center;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .imagens-header-bar .abas-header-mobile .aba {
        flex: 1;
        min-width: 0;
        text-align: center;
        padding: 12px 8px;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .imagens-header-bar .aba-dropdown-wrapper,
    .imagens-header-bar .filtro-data-wrapper,
    .imagens-header-bar .paginacao {
        margin: 0 0 10px 0;
    }

    .imagens-header-bar::before {
        height: 0;
    }

    .imagens-content-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .imagens-content-column {
        order: 1;
        width: 100%;
        min-width: auto;
        margin: 0;
    }

    .imagens-grid {
        grid-template-columns: 1fr;
        gap: clamp(12px, 1vw, 16px);
        width: 100%;
        padding: 0;
        padding-right: clamp(12px, 1.5vw, 16px);
        overflow-x: hidden;
        justify-items: start;
        align-items: start;
    }

    .imagens-list-titulo,
    .imagens-list-lide {
        padding-right: clamp(12px, 1.5vw, 16px);
    }

    .imagens-grid-mais-acessadas {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(12px, 1vw, 16px);
        width: 100%;
        padding: 0;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .imagem-card-mais-acessada {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
        min-height: auto;
    }

    .imagens-sidebar.filtros .filtros-botoes {
        flex-direction: row;
        width: 100%;
        align-items: stretch;
        justify-content: center;
    }

    .imagens-sidebar.filtros .filtros-form {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    /* Ocultar separadores verticais no mobile */
    .imagens-header-bar>.aba-dropdown-wrapper::before,
    .imagens-header-bar>.paginacao::before,
    .imagens-header-bar>*:not(:first-child)::before {
        display: none !important;
    }

    /* Ajustes dos cards de imagem para mobile */
    .imagem-card {
        max-width: 100%;
        height: auto;
        padding: clamp(15px, 0.75vw, 12px);
        gap: clamp(10px, 0.75vw, 12px);
        box-sizing: border-box;
    }

    .imagem-item-titulo .imagem-microcard {
        flex: 0;
        width: 100%;
    }

    .imagem-container img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        max-width: 100%;
    }

    .imagem-actions {
        gap: 8px;
    }

    /* Modo Título (lista) - mobile */
    .imagem-item-titulo {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .imagem-item-titulo .imagem-thumb {
        width: 100%;
        max-width: 100%;
        height: 200px;
    }

    .imagem-item-titulo .imagem-thumb img {
        height: 200px;
    }

    .imagem-item-titulo .imagem-detalhes {
        width: 100%;
    }

    .imagem-item-titulo .imagem-info-title {
        font-size: 15px;
    }

    .imagem-item-titulo .imagem-info-meta {
        font-size: 12px;
        margin-top: 6px;
    }

    .imagem-item-titulo .imagem-info-text {
        font-size: 13px;
        margin-top: 8px;
    }

    /* Modo Lide - mobile */
    .imagem-item-lide {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .imagem-item-lide .imagem-media {
        width: 100%;
        flex: 1 1 100%;
        height: 200px;
        max-width: 100%;
    }

    .imagem-item-lide .imagem-texto {
        width: 100%;
    }

    .imagem-item-lide .imagem-info-title {
        font-size: 15px;
    }

    .imagem-item-lide .imagem-info-meta {
        font-size: 12px;
    }

    .imagem-item-lide .imagem-info-lead {
        font-size: 13px;
        margin-top: 8px;
    }

    /* Ajustes dos modais para mobile */
    .imagem-modal {
        padding: 0 16px 16px;
    }

    .imagem-modal .modal-tabs {
        flex-wrap: wrap;
        gap: 12px !important;
        padding-bottom: clamp(8px, 0.5vw, 10px);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .imagem-modal .modal-tabs .tab-link {
        padding: 10px 8px 12px 8px;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        white-space: nowrap;
        min-width: auto;
    }

    .imagem-modal .modal-tabs .btn-comprar {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
        order: 10;
        padding: 10px 14px;
        font-size: 13px;
        height: 44px;
    }

    .imagem-modal .tab-panels {
        padding-top: 8px;
    }

    /* Zoom image - mobile */
    .imagem-modal .zoom-image {
        max-height: 50vh;
    }

    /* Formulários - mobile */
    .imagem-modal .form-row {
        align-items: flex-start;
        gap: 8px;
        margin: 12px 0;
    }

    .imagem-modal .form-row>label {
        width: 100%;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        margin-bottom: 4px;
    }

    .imagem-modal .form-row input[type="text"],
    .imagem-modal .form-row input[type="email"],
    .imagem-modal .form-row textarea {
        width: 95%;
        min-width: 0;
        padding: 10px 12px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        min-height: 44px;
    }

    .imagem-modal .form-row.email-de-row {
        align-items: flex-start;
        gap: 18px !important;
    }

    .imagem-modal .form-row.email-de-row>label {
        width: 100%;
    }

    .imagem-modal .form-row.email-de-row .radios-group {
        flex-direction: column;
        gap: 0px !important;
        align-items: flex-start;
    }

    .imagem-modal .form-row.email-de-row .radios-group .radio-label {
        padding: 4px;
    }

    .imagem-modal .form-row.email-input-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0px !important;
    }

    .imagem-modal .form-row.email-input-row>label {
        width: 100%;
    }

    .imagem-modal .form-row.email-input-row input {
        width: 100%;
        min-height: 44px;
    }

    .imagem-modal .form-row.email-field-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .imagem-modal .form-row.email-field-row>label {
        width: 100%;
    }

    .imagem-modal .form-row.email-field-row input,
    .imagem-modal .form-row.email-field-row textarea {
        width: 100%;
        min-height: 44px;
    }

    .imagem-modal .form-row.checkbox-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .imagem-modal .form-row.checkbox-row .checkbox-group {
        width: 100%;
        gap: 12px;
    }

    .imagem-modal .form-row.checkbox-row .checkbox-label {
        width: 100%;
        padding: 10px;
        min-height: 44px;
    }

    .imagem-modal .email-top img,
    .imagem-modal .print-top img {
        width: 100%;
        max-width: 100%;
    }

    /* Botões de ação do modal - mobile */
    .imagem-modal .btn-aplicar-modal,
    .imagem-modal .btn-limpar-modal {
        min-height: 44px;
        padding: 12px 20px;
        font-size: 14px;
        width: 100%;
        transition: all 0.2s ease;
    }

    .imagem-modal .btn-aplicar-modal:active,
    .imagem-modal .btn-limpar-modal:active {
        transform: scale(0.98);
    }

    .imagem-modal .actions-row {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .imagem-modal .actions-row-center {
        flex-direction: column;
        gap: 10px;
    }

    /* Print modal: manter botões lado a lado e centralizados no mobile */
    .imagem-modal .tab-panel[data-panel="imprimir"] .actions-row,
    .imagem-modal .tab-panel[data-panel="imprimir"] .actions-row-center {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .imagem-modal .tab-panel[data-panel="imprimir"] .btn-aplicar-modal,
    .imagem-modal .tab-panel[data-panel="imprimir"] .btn-limpar-modal {
        width: auto;
    }

    .imagem-modal .actions-row-center .btn-aplicar-modal,
    .imagem-modal .actions-row-center .btn-limpar-modal {
        width: 100%;
    }

    /* Melhorar scroll em mobile */
    .imagem-modal .tab-panel {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .imagem-modal .tab-panel.show {
        display: block;
    }
}

/* ========================================
   ESTADOS E ANIMAÇÕES
   ======================================== */
.imagem-card.loading {
    opacity: 0.6;
    pointer-events: none;
}

.imagem-card.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #F15F56;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ========================================
   CALENDÁRIO (FLATPICKR) - padrão textos
   ======================================== */
.imagens-main-wrapper .flatpickr-calendar {
    font-family: 'Inter', sans-serif;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.imagens-main-wrapper .flatpickr-day.selected {
    background: #F15F56;
    border-color: #F15F56;
}

.imagens-main-wrapper .flatpickr-day.selected:hover {
    background: #E04E47;
    border-color: #E04E47;
}

.imagens-main-wrapper .flatpickr-day.today {
    border-color: #F15F56;
}

.imagens-main-wrapper .flatpickr-day.today:hover {
    background: #F15F56;
    color: white;
}

/* ==============================
   MODAL DE IMAGEM (casca)
   ============================== */
.imagem-modal {
    padding: 0 28px 28px;
    font-family: 'Inter', sans-serif;
}

/* Garantir que todos os elementos do modal usem Inter */
.imagem-modal,
.imagem-modal *,
.imagem-modal label,
.imagem-modal input,
.imagem-modal textarea,
.imagem-modal button,
.imagem-modal select {
    font-family: 'Inter', sans-serif !important;
}

.imagem-modal .modal-tabs {
    display: flex;
    align-items: center;
    gap: 22px;
    border-bottom: 1px solid #ececec;
    margin-bottom: 18px;
    position: relative;
}

.imagem-modal .modal-tabs .btn-comprar {
    margin-left: auto;
}

.imagem-modal .modal-tabs .btn-comprar.ativa {
    opacity: 1;
    background: #E04E47;
}

.imagem-modal .modal-tabs .tab-link {
    display: inline-block;
    padding: 12px 0 14px 0;
    color: #5a5f66;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px
}

.imagem-modal .modal-tabs .tab-link:hover {
    color: #F15F56
}

.imagem-modal .modal-tabs .tab-link.ativa {
    color: #F15F56;
    border-bottom: 3px solid #F15F56
}


.imagem-modal .tab-panels {
    padding-top: 10px
}

.imagem-modal .tab-panel {
    display: none
}

.imagem-modal .tab-panel.show {
    display: block
}

/* ========================================
   ABA COMPRAR (dentro do modal)
   ======================================== */
.comprar-content-modal {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}

.comprar-options-title {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    letter-spacing: -0.3px;
    text-align: left;
    width: 100%;
}

.comprar-title-divider {
    border: none;
    border-top: 1px solid #e3e7ed;
    margin: 0;
    padding: 0;
    width: 100%;
}

.comprar-radio-modal {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: #f8f9fa;
    border: 1px solid #ffffff;
    border-radius: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
    margin: 0;
}

.comprar-radio-modal:hover {
    background: #fff;
    border-color: #F15F56;
    box-shadow: 0 2px 8px rgba(241, 95, 86, 0.1);
}

.comprar-radio-modal input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #F15F56;
    margin: 0;
    flex-shrink: 0;
}

.comprar-radio-modal label {
    font-size: 15px;
    color: #2c3e50;
    cursor: pointer;
    margin: 0;
    font-weight: 500;
    flex: 1;
    user-select: none;
}

.comprar-image-large {
    text-align: center;
    margin: 0 auto;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #ffffff;
    max-width: 960px;
}

.comprar-image-large .imgbox {
    display: inline-block;
    padding: 0;
    background: transparent;
    border: none;
    text-align: center;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    max-width: 100%;
}

.comprar-image-large img,
.comprar-image-large .zoom-image {
    max-width: 100%;
    max-height: 60vh;
    height: auto;
    border: none;
    border-radius: 8px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    background: #fff;
}

.comprar-actions-modal {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
    padding: 16px 16px 16px;
    border-top: 1px solid #e3e7ed;
    width: 100%;
    position: sticky;
    bottom: 0;
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

/* microcópia sob o botão Comprar */
.comprar-helper {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
}

.comprar-error-modal {
    color: #dc3545;
    font-size: 14px;
    margin: 16px 0;
    padding: 12px 16px;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-weight: 500;
}

/* Estilos responsivos para modal de compra */
@media (max-width: 768px) {

    .comprar-options-title {
        font-size: 16px;
    }

    .comprar-radio-modal {
        padding: 14px 16px;
        gap: 10px;
    }

    .comprar-radio-modal label {
        font-size: 14px;
    }

    .comprar-image-large {
        padding: 16px;
    }

    .comprar-image-large img,
    .comprar-image-large .zoom-image {
        max-height: 50vh;
    }

    .comprar-actions-modal {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .comprar-actions-modal .btn-aplicar-modal,
    .comprar-actions-modal .btn-limpar-modal {
        width: 100%;
        min-width: auto;
    }
}

.imagem-modal .zoom-image {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    display: block
}

.imagem-modal .form-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 12px 0
}

.imagem-modal .form-row>label {
    width: 100px;
    color: #858E96;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    flex-shrink: 0;
}

.imagem-modal .form-row input[type=text],
.imagem-modal .form-row input[type=email] {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 10px 12px;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #212529;
    outline: none;
}

.imagem-modal .form-row input[type=text]:focus,
.imagem-modal .form-row input[type=email]:focus {
    outline: none;
    border-color: #e6e8eb;
    box-shadow: none;
}

.imagem-modal .form-row input[readonly] {
    cursor: default
}

.imagem-modal .form-row textarea {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #2c3e50;
    resize: none;
    min-height: 100px;
    line-height: 1.5;
    outline: none;
}

.imagem-modal .form-row textarea:focus {
    outline: none;
    border-color: #e6e8eb;
    box-shadow: none;
}

.imagem-modal .form-row textarea[readonly] {
    cursor: default;
}

.imagem-modal .form-row.radios label {
    width: auto;
    font-family: 'Inter', sans-serif;
    font-weight: 500
}

.imagem-modal .two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 10px 0
}

/* Botões do modal seguindo padrão Aplicar/Limpar */
.imagem-modal .btn-aplicar-modal {
    background: #F15F56;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.imagem-modal .btn-aplicar-modal:hover:not(:disabled) {
    background: #E04E47;
}

.imagem-modal .btn-aplicar-modal:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.imagem-modal .btn-aplicar-modal:focus {
    outline: none;
    box-shadow: 0 0 0 2px #F15F5633;
}

.imagem-modal .btn-limpar-modal {
    background: #fff;
    color: #F15F56;
    border: 1px solid #F15F56;
    border-radius: 8px;
    padding: 8px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.imagem-modal .btn-limpar-modal:hover {
    background: #fff7f5;
}

.imagem-modal .btn-limpar-modal:focus {
    outline: none;
    box-shadow: 0 0 0 2px #F15F5633;
}

/* Botões específicos do modal de compra (centralizados) */
.comprar-actions-modal .btn-aplicar-modal {
    background: #F15F56;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.comprar-actions-modal .btn-aplicar-modal:hover:not(:disabled) {
    background: #E04E47;
}

.comprar-actions-modal .btn-aplicar-modal:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.comprar-actions-modal .btn-aplicar-modal:focus {
    outline: none;
    box-shadow: 0 0 0 2px #F15F5633;
}

.comprar-actions-modal .btn-limpar-modal {
    background: #fff;
    color: #F15F56;
    border: 1px solid #F15F56;
    border-radius: 8px;
    padding: 8px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.comprar-actions-modal .btn-limpar-modal:hover {
    background: #fff7f5;
}

.comprar-actions-modal .btn-limpar-modal:focus {
    outline: none;
    box-shadow: 0 0 0 2px #F15F5633;
}

.imagem-modal .actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 0;
}

.imagem-modal .actions-row-center {
    justify-content: center;
}

.imagem-modal .email-message {
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.imagem-modal .email-message.fade-out {
    opacity: 0;
}

.imagem-modal .email-top {
    margin-bottom: 20px;
    text-align: left;
}

.imagem-modal .email-top img,
.imagem-modal .print-top img {
    width: 180px;
    height: auto;
    border-radius: 6px;
    display: block;
}

/* Estilos específicos para aba E-mail */
.imagem-modal .form-row.email-de-row {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.imagem-modal .form-row.email-de-row>label {
    width: 100px;
    color: #858E96;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    flex-shrink: 0;
}

.imagem-modal .form-row.email-de-row .radios-group {
    display: flex;
    gap: 24px;
}

.imagem-modal .form-row.email-de-row .radios-group .radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #2c3e50;
    cursor: pointer;
    margin: 0;
}

.imagem-modal .form-row.email-de-row .radios-group .radio-label input[type="radio"] {
    width: auto;
    margin: 0;
    cursor: pointer;
    accent-color: #F15F56;
}

.imagem-modal .form-row.email-input-row {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.imagem-modal .form-row.email-input-row>label {
    width: 100px;
    flex-shrink: 0;
}

.imagem-modal .form-row.email-input-row input {
    flex: 1;
    min-width: 0;
    height: auto;
    min-height: 32px;
    padding: 2px 12px;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #2c3e50;
    outline: none;
}

.imagem-modal .form-row.email-input-row input:focus {
    outline: none;
    border-color: #e6e8eb;
    box-shadow: none;
    font-style: normal;
}

.imagem-modal .form-row.email-field-row {
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.imagem-modal .form-row.email-field-row>label {
    width: 100px;
    color: #858E96;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    flex-shrink: 0;
}

.imagem-modal .form-row.email-field-row input,
.imagem-modal .form-row.email-field-row textarea {
    flex: 1;
    min-width: 0;
    padding: 2px 12px;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    font-size: 14px;
    height: auto;
    min-height: 32px;
}

.imagem-modal .form-row.checkbox-row {
    margin-top: 8px;
    margin-bottom: 0;
    justify-content: space-between;
    align-items: center;
}

.imagem-modal .form-row.checkbox-row .checkbox-group {
    display: flex;
    gap: 16px;
    align-items: center;
}

.imagem-modal .form-row.checkbox-row .checkbox-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.imagem-modal .form-row.checkbox-row .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #2c3e50;
    cursor: pointer;
    margin: 0;
}

.imagem-modal .form-row.checkbox-row .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #F15F56;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #ACB5BD;
    border-radius: 3px;
    background-color: #fff;
    position: relative;
    flex-shrink: 0;
}

.imagem-modal .form-row.checkbox-row .checkbox-label input[type="checkbox"]:checked {
    background-color: #F15F56;
    border-color: #F15F56;
}

.imagem-modal .form-row.checkbox-row .checkbox-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.imagem-modal .form-row.checkbox-row .checkbox-label input[type="checkbox"]:indeterminate {
    background-color: #F15F56;
    border-color: #F15F56;
}

.imagem-modal .form-row.checkbox-row .checkbox-label input[type="checkbox"]:indeterminate::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 7px;
    width: 10px;
    height: 2px;
    background-color: white;
    transform: none;
    border: none;
}

.imagem-modal .form-row.checkbox-row .checkbox-label input[type="checkbox"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

/* Informações abaixo da imagem na aba Ampliar */
.imagem-modal .imagem-ampliar-info {
    margin-top: 16px;
}

.imagem-modal .imagem-ampliar-descricao {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #212529;
    margin-bottom: 24px;
}

.imagem-modal .imagem-ampliar-cabecalho {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #212529;
    font-weight: 600;
    margin-bottom: 16px;
}

.imagem-modal .imagem-ampliar-descricao {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #212529;
    margin-bottom: 24px;
}

.imagem-modal .imagem-ampliar-credito {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #212529;
}

.imagem-modal .imagem-ampliar-id-data {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #212529;
}

/* Harmonização com a barra superior do modal (endereço) */
#news-modal .modal-header-top-bar {
    padding: 10px 16px 4px 16px
}

#news-modal .modal-header-top-bar .modal-header-title {
    font-size: 14px;
    color: #6b7280;
    font-weight: 600
}

#news-modal .modal-header-top-bar .modal-address-bar input {
    height: 34px;
    border: 1px solid #e6e8eb;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    color: #4b5563;
    background: #fafafa
}