/*
 * O gerador usa estes elementos como fonte do html2canvas. Eles precisam
 * continuar renderizados para a captura, mas nunca podem participar do
 * layout da página nem empurrar o modal para baixo. Esta regra pertence ao
 * módulo para que o gerador seja independente do tema ativo.
 */
#source-cards-container {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    z-index: -1 !important;
    width: 2000px !important;
}

/* O tema anima elementos ao entrarem na tela. As fontes dos cards ficam fora
 * da tela para o html2canvas e, sem este ajuste, foto e textos saem invisíveis. */
#source-cards-container .reveal-scroll {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* O preview deve respeitar a largura da coluna do modal. */
.preview-img-container img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* A interface do modal acompanha o tema; as artes capturadas abaixo não mudam. */
#modalCardGenerator {
    --mt-cardgen-primary:var(--global-palette-btn-bg, var(--color-content-link, var(--ast-global-color-0, var(--theme-palette-color-1, var(--wp--preset--color--primary, var(--accent, #0d6efd))))));
    --mt-cardgen-primary-hover:var(--global-palette-btn-hover-bg, var(--global-palette2, var(--mt-cardgen-primary)));
    --mt-cardgen-primary-contrast:var(--global-palette-btn, var(--theme-button-text-initial-color, var(--ast-global-color-5, var(--wp--preset--color--base, #fff))));
    --mt-cardgen-bg:var(--color-content-background, var(--global-palette9, var(--ast-global-color-5, var(--theme-palette-color-8, var(--wp--preset--color--base, #fff)))));
    --mt-cardgen-text:var(--color-content-title, var(--global-palette3, var(--ast-global-color-3, var(--contrast, var(--theme-palette-color-3, var(--wp--preset--color--contrast, #212529))))));
    --mt-cardgen-panel:color-mix(in srgb, var(--mt-cardgen-text) 6%, var(--mt-cardgen-bg));
    --mt-cardgen-muted:color-mix(in srgb, var(--mt-cardgen-text) 72%, transparent);
    --mt-cardgen-border:color-mix(in srgb, var(--mt-cardgen-text) 24%, transparent);
}

#modalCardGenerator .modal-content {
    background:var(--mt-cardgen-bg);
    color:var(--mt-cardgen-text);
    border:1px solid var(--mt-cardgen-border);
}
#modalCardGenerator .modal-header,
#modalCardGenerator .modal-footer { border-color:var(--mt-cardgen-border); }
#modalCardGenerator .modal-title,
#modalCardGenerator .modal-body h6 { color:var(--mt-cardgen-text); }
#modalCardGenerator .modal-body.bg-light { background:var(--mt-cardgen-panel) !important; color:var(--mt-cardgen-text); }
#modalCardGenerator .modal-footer.text-muted { color:var(--mt-cardgen-muted) !important; }
#modalCardGenerator .preview-img-container.bg-white {
    background:var(--mt-cardgen-bg) !important;
    border:1px solid var(--mt-cardgen-border);
    border-radius:8px;
}
#modalCardGenerator .preview-img-container img { border-color:var(--mt-cardgen-border); }

#modalCardGenerator .btn-success {
    background:var(--mt-cardgen-primary);
    border-color:var(--mt-cardgen-primary);
    color:var(--mt-cardgen-primary-contrast);
}
#modalCardGenerator .btn-success:hover,
#modalCardGenerator .btn-success:focus { background:var(--mt-cardgen-primary-hover); border-color:var(--mt-cardgen-primary-hover); color:var(--mt-cardgen-primary-contrast); }
#modalCardGenerator .btn-outline-dark,
#modalCardGenerator .mt-modal-close {
    background:transparent;
    border-color:var(--mt-cardgen-border);
    color:var(--mt-cardgen-primary);
}
#modalCardGenerator .btn-outline-dark:hover,
#modalCardGenerator .btn-outline-dark:focus,
#modalCardGenerator .mt-modal-close:hover,
#modalCardGenerator .mt-modal-close:focus {
    background:var(--mt-cardgen-primary);
    border-color:var(--mt-cardgen-primary);
    color:var(--mt-cardgen-primary-contrast);
}

/* Bandeira PNG local, isolada dos estilos do tema durante a exportação. */
#source-cards-container .mt-promo-card-flag {
    position: absolute;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    isolation: isolate;
    color: initial;
    box-sizing: border-box !important;
}

#source-cards-container .mt-promo-card-flag-media {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border: 4px solid rgba(255, 255, 255, .3) !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

#source-cards-container .mt-promo-card-flag-media > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
}

#source-cards-container .mt-promo-card-flag.is-elliptical .mt-promo-card-flag-media {
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
}

#source-cards-container .mt-promo-card-flag.is-elliptical .mt-promo-card-flag-media > img {
    width: auto !important;
    height: 100% !important;
    object-fit: contain !important;
}