/* ══ Identidade visual ACECA (mesmos tokens do site institucional, Aceca.Adm/Web/css/main.css) ══ */
:root {
    --p: #a32bff;
    --mid: #7b0fcc;
    --dark: #47007b;
    --nav-bg: #47007b;
    --bg: #fdfaff;
    --bg2: #f5eeff;
    --surface: #ffffff;
    --surf2: #f0e6ff;
    --border: rgba(163,43,255,0.18);
    --border2: rgba(163,43,255,0.38);
    --text: #1a0030;
    --muted: #5a4070;
    --dimmed: #8b72a8;
    --grad: linear-gradient(135deg,#47007b 0%,#7b0fcc 55%,#a32bff 100%);
    --shadow: 0 4px 24px rgba(163,43,255,0.12);
    --shadow2: 0 8px 40px rgba(163,43,255,0.22);
}

@font-face {
    font-family: 'AcecaFont';
    src: url('fonts/acecafontfile.woff2') format('woff2'), url('fonts/acecafontfile.woff') format('woff'), url('fonts/acecafontfile.ttf') format('truetype');
    font-display: swap;
}

.custom_text {
    font-family: 'AcecaFont', Arial, sans-serif;
}

.brand-grad {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
}

/* O SweetAlert2 renderiza o título da modal como <h2 class="swal2-title"> - a regra acima
   (seletor de elemento, h1/h2/h3) vazava pra dentro dele, porque o CSS da própria lib não
   declara font-family no .swal2-title (só tamanho/peso/cor), esperando herdar a fonte do
   body. Confirmado via getComputedStyle no elemento real (fontFamily vinha "Cormorant
   Garamond", serif em vez de Outfit). Uma classe (.swal2-title) tem mais especificidade que
   um seletor de elemento (h1,h2,h3), então basta declarar aqui pra vencer sem !important. */
.swal2-title {
    font-family: 'Outfit', sans-serif;
}

.btn-primary {
    padding: 13px 30px;
    border-radius: 50px;
    background: var(--grad);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    box-shadow: 0 6px 28px rgba(123,15,204,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-block;
    letter-spacing: 0.03em;
}

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 36px rgba(123,15,204,0.55);
        color: #fff;
    }

.btn-outline {
    padding: 13px 30px;
    border-radius: 50px;
    border: 2px solid var(--dark);
    color: var(--dark);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: all 0.25s;
    display: inline-block;
    letter-spacing: 0.03em;
}

    .btn-outline:hover {
        background: var(--dark);
        color: #fff;
    }

.nav-logo-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow), 0 0 0 2px var(--border);
    overflow: hidden;
    flex-shrink: 0;
}

    .nav-logo-circle img {
        width: 100%;
        height: auto;
        display: block;
    }

.nav-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

/* "A.C.E.C.A." e "Leilão" usam fontes diferentes (AcecaFont x Outfit) no mesmo tamanho -
   align-items:center sozinho alinha o CENTRO da caixa de cada palavra, mas fontes com
   métricas de ascent/descent diferentes ficam com o traço visual descentralizado mesmo
   assim. Colocar as duas no mesmo container com align-items:baseline alinha pela base do
   texto de verdade, como texto normal misto faria. */
.nav-brand-text-row {
    flex-direction: row;
    align-items: baseline;
    gap: 0.4rem;
}

.nav-brand-name {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--dark);
    letter-spacing: 0.06em;
    line-height: 1;
}

.nav-brand-leilao {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--mid);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

.nav-brand-sub {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 3px;
}

.btn-login {
    display: inline-block;
    padding: 9px 30px;
    border-radius: 50px;
    background: var(--grad) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.79rem !important;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(123,15,204,0.35);
    transition: all 0.25s !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

    .btn-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(123,15,204,0.45);
    }

.btn-inscricao {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 50px;
    background: #FFCC24;
    border: 1px solid rgba(163,43,255,0.3) !important;
    color: var(--dark) !important;
    font-weight: 700 !important;
    font-size: 0.79rem !important;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none !important;
    transition: all 0.25s !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

    .btn-inscricao::after {
        display: none !important
    }
    /* Mesmo motivo do .btn-login:hover acima - var(--p) em vez de var(--dark) pra não sumir
   contra o fundo da navbar. */
    .btn-teste:hover {
        background: var(--mid) !important;
        color: #fff !important
    }

/* padding/margin do navbar e do gap/padding do #nav-links abaixo são CSS puro, não
   utilitário Tailwind (p-3/mb-3/gap-2/py-4/lg:gap-0/lg:py-0 como estava antes) - Bootstrap
   5 define classes com o MESMO NOME (.p-3, .py-4, .gap-2 etc.) só que numa escala de
   espaçamento diferente da do Tailwind, e sempre com `!important`. Isso fazia o Bootstrap
   vencer sempre (`!important` ganha de não-important independente de especificidade/ordem),
   inclusive por cima dos variants responsivos do Tailwind (lg:py-0, lg:gap-0 nunca tinham
   efeito) - foi a causa raiz da navbar ficando mais alta que a do institucional mesmo depois
   de ajustar só a fonte. Comprovado medindo o layout renderizado de verdade via CDP
   (CSS.getMatchedStylesForNode mostrou literalmente ".py-4 => padding:1.5rem!important"
   vencendo ".lg\:py-0 => padding:0px" sem important). Ver [[playbook]] - se aparecer de novo
   noutra tela, é o mesmo padrão: não usar classe Tailwind de espaçamento (p-, m-, gap- etc.)
   com número que colida com a escala do Bootstrap enquanto os dois estiverem carregados
   juntos - ou usa CSS explícito (como aqui) ou usa valor arbitrário do Tailwind (ex. w-[65%]),
   que o Bootstrap não gera. */
#navbar.nav {
    min-height: 76px;
    padding: 12px 0;
    margin-bottom: 12px;
    background: var(--surface) !important;
    border-bottom: 2px solid var(--border);
    box-shadow: 0 4px 24px rgba(163,43,255,0.1);
}

    #navbar .nav-link {
        display: inline-flex;
        align-items: center;
        padding: 9px 12px;
        color: var(--dark) !important;
        text-transform: uppercase;
        font-size: 0.79rem;
        font-weight: 500;
        letter-spacing: 0.06em;
    }

        #navbar .nav-link:hover {
            color: var(--p) !important;
        }

        #navbar .nav-link::before {
            display: none;
        }

    #navbar .active-underline {
        background-color: var(--mid);
    }

    #navbar #mobile-menu-toggle {
        color: var(--dark) !important;
    }

/* ══ Tema escuro da navbar (modelo do site institucional) - alternado pelo botão #nav-theme-toggle ══ */
#navbar[data-theme="dark"] {
    background: var(--nav-bg) !important;
    border-bottom: 2px solid rgba(255,255,255,0.12);
    box-shadow: 0 4px 32px rgba(71,0,123,0.45);
}

    #navbar[data-theme="dark"] .nav-logo-circle {
        box-shadow: 0 2px 16px rgba(255,255,255,0.35), 0 0 0 3px rgba(255,255,255,0.2);
    }

    #navbar[data-theme="dark"] .nav-brand-name,
    #navbar[data-theme="dark"] .nav-brand-leilao {
        color: #fff;
    }

    #navbar[data-theme="dark"] .nav-brand-sub {
        color: rgba(255,255,255,0.72);
    }

    #navbar[data-theme="dark"] .nav-link {
        color: rgba(255,255,255,0.88) !important;
    }

        #navbar[data-theme="dark"] .nav-link:hover {
            color: #fff !important;
        }

    #navbar[data-theme="dark"] .active-underline {
        background-color: #fff;
    }

    #navbar[data-theme="dark"] #mobile-menu-toggle {
        color: #fff !important;
    }

    #navbar[data-theme="dark"] .btn-login {
        background: #fff !important;
        color: var(--mid) !important;
        box-shadow: 0 4px 18px rgba(0,0,0,0.2);
    }

        #navbar[data-theme="dark"] .btn-login:hover {
            background: var(--mid) !important;
            color: #fff !important;
        }

#nav-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--border2);
    background: transparent;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.2s;
}

    #nav-theme-toggle:hover {
        transform: scale(1.08);
    }

    #nav-theme-toggle svg {
        width: 16px;
        height: 16px;
        border-radius: 50%;
    }

    #navbar[data-theme="dark"] #nav-theme-toggle {
        border-color: rgba(255,255,255,0.5);
    }

        #navbar[data-theme="dark"] #nav-theme-toggle path,
        #navbar[data-theme="dark"] #nav-theme-toggle circle {
            fill: #fff;
            stroke: #fff;
        }

        #navbar[data-theme="dark"] #nav-theme-toggle circle {
            fill: none;
        }

/* ══ Ícone de ajuda (?) ao lado de labels opcionais/obrigatórias - substitui texto fixo em tela ══ */
.hint-row {
    position: relative;
}

.hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--border2);
    border-radius: 50%;
    background: var(--surf2);
    color: var(--mid);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

    .hint-icon:hover,
    .hint-icon[aria-expanded="true"] {
        background: var(--mid);
        color: #fff;
        border-color: var(--mid);
    }

.hint-bubble {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    width: max-content;
    max-width: min(280px, 90vw);
    margin-top: 4px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surf2);
    box-shadow: var(--shadow);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 400;
}

/* Espaçamento do #nav-links em CSS puro (era gap-2/py-4/lg:gap-0/lg:py-0 do Tailwind,
   sempre vencido pelo .gap-2/.py-4 !important do Bootstrap - ver nota grande em
   #navbar.nav acima). Empilhado (mobile) tem respiro vertical entre os itens; em coluna
   única (lg+) some, porque o espaçamento horizontal já vem do lg:space-x-4. */
#nav-links {
    gap: 0.5rem;
    padding: 16px 0;
}

@media (min-width: 1024px) {
    #nav-links {
        gap: 0;
        padding: 0;
    }
}

/* ══ Navbar mobile/tablet - ACECA + Leilão não cabiam ao lado do menu hambúrguer em telas
   estreitas (texto cortado); menu aberto também virava lista corrida em vez de coluna. ══ */
@media (max-width: 1023px) {
    #nav-links a.nav-link,
    #nav-links a.btn-inscricao,
    #nav-links a.btn-login {
        width: 100%;
        text-align: center;
    }

    /* Os pills de Inscrição/Login tinham padding vertical menor (9px) que o espaço em
       branco ao redor dos links de texto - mesmo "gap" da coluna, mas a caixa do pill
       era mais baixa, então a distância perecida entre os pills ficava menor que entre
       os textos. Iguala a altura das caixas pra a mesma respiração visual. */
    #nav-links a.btn-inscricao,
    #nav-links a.btn-login {
        padding-top: 13px;
        padding-bottom: 13px;
    }
}

@media (max-width: 480px) {
    .nav-brand-link {
        gap: 0.5rem;
    }

    .nav-logo-circle {
        width: 40px;
        height: 40px;
    }

    .nav-brand-name {
        font-size: 1.4rem;
    }

    .nav-brand-leilao {
        font-size: 1.05rem;
    }
}

body {
    scroll-behavior: smooth;
    font-family: 'Outfit', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    position: relative;
}

/* ══ Watermark de fundo (imagem + véu lilás da marca por cima) ══ */
#wm {
    position: fixed;
    inset: 0;
    background-image: linear-gradient(rgba(245,238,255,0.92), rgba(245,238,255,0.92)), url("../img/backgrounds/bg-login.webp");
    background-size: cover;
    background-position: center 20%;
    background-attachment: fixed;
    pointer-events: none;
    z-index: 0;
    filter: grayscale(15%) contrast(0.95) brightness(0.95);
}

/* background-attachment:fixed força repaint a cada frame de scroll no Android e é
   ignorado de forma inconsistente no iOS - troca pra scroll normal no mobile. */
@media (max-width: 1024px) {
    #wm {
        background-attachment: scroll;
    }
}

#navbar, section, footer {
    position: relative;
    z-index: 1;
}


    body::-webkit-scrollbar {
        width: 5px;
        height: 0.3px;
    }

    body::-webkit-scrollbar-thumb {
        background-color: var(--mid);
        border-radius: 6px;
    }

    body::-webkit-scrollbar-track {
        background-color: whitesmoke;
    }

    body::-webkit-scrollbar-thumb:hover {
        background-color: #581c87;
    }

::selection {
    background-color: #3e004f;
    color: whitesmoke;
}

.nav-link {
    position: relative;
    text-decoration: none !important;
    color: #6a136c !important;
    transition: color 0.3s ease;
}

    .nav-link:hover {
        color: #813683 !important;
    }

    .nav-link::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 10px 10px 0px 0px;
        background: linear-gradient(180deg, #6b21a81c,#581c8769) !important;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .nav-link:hover::before {
        opacity: 1;
    }

    .nav-link::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        bottom: 0;
        left: 0;
        background-color: #4f0351;
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .nav-link:hover::after {
        transform: scaleX(1);
    }

    .nav-link.active::after {
        transform: scaleX(1);
    }

.active-underline {
    position: absolute;
    height: 2px;
    bottom: 0;
    background-color: #6a136c;
    transition: transform 0.3s ease, width 0.3s ease;
}

.nav-link.home-active::before {
    opacity: 1;
}

/* Dropdown de usuário do navbar (avatar/nome/cargo) - o min-width padrão do Bootstrap
   (10rem) é estreito demais pro cabeçalho avatar+nome+cargo, quebrando nomes compostos
   ("Rodrigo Silva") em duas linhas. white-space:nowrap sozinho não bastava porque o
   dropdown-menu continuava mais estreito que o texto. */
#dropdownUsuarioToggle + .dropdown-menu {
    min-width: 14rem;
}

#dropdownUsuarioToggle + .dropdown-menu .fw-semibold,
#dropdownUsuarioToggle + .dropdown-menu small {
    white-space: nowrap;
}

.nav {
    background: rgba(13, 13, 13, 0.138);
    backdrop-filter: blur(0px);
}


#toaster {
    display: none;
    position: fixed;
    top: 90px;
    right: 20px;
    color: #fff;
    padding: 12px 20px;
    border-radius: 5px;
    z-index: 9999;
}


a {
    text-decoration: none !important;
}

.dt-input {
    width: 200px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}


    .dt-input:focus {
        background-color: #f0f0f0;
        outline: none;
    }

.transition-all {
    transition: all 0.3s ease-in-out;
}


.dataTables_length label {
    font-weight: normal;
}

.dataTables_length select {
    margin: 1rem;
    padding: 1rem;
}


.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #b700ff !important;
    border-color: #c629d0c4 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: none !important;
    border: none !important;
}


.tooltip {
    background-color: #4F46E5;
    color: white;
}


/* The switch - the slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* ══ MODAL (Política de Privacidade / Termos de Uso) - portado do Aceca.Adm/Web/css/main.css,
   mesmo HTML/JS (openLegalModal/closeLegalModal/showLegalTab em site.js). Só as regras
   realmente usadas pela modal legal do rodapé - a modal de login do site institucional
   (.modal-logo/.modal-sub/.form-group/.btn-form/.login-err) não existe aqui, o Leilão já
   tem telas próprias de Login/Registration. ══ */
.modal-overlay {
    background: rgba(71,0,123,0.6);
    min-height: 100vh;
    margin: 0;
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    backdrop-filter: blur(12px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    .modal-overlay.open {
        display: flex;
    }

.modal {
    background: #fff;
    border-radius: 24px;
    padding: 44px 38px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 32px 80px rgba(71,0,123,0.3);
    animation: modalIn 0.3s ease;
    position: relative;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.9) translateY(18px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--dimmed);
    line-height: 1;
    transition: color 0.2s;
}

    .modal-close:hover {
        color: var(--dark);
    }

/* .modal.modal-legal: mesmo seletor do Aceca.Adm/Web/css/main.css (lá o .modal vem depois
   com max-width 420px e vencia o .modal-legal) - aqui garante que não dependa da ordem.
   1140px = largura da modal-xl do Bootstrap. */
.modal.modal-legal {
    max-width: 1140px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 36px 36px 12px;
}

.legal-tabs {
    display: flex;
    gap: 22px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.legal-tab {
    background: none;
    border: none;
    padding: 10px 2px 12px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dimmed);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

    .legal-tab.active {
        color: var(--dark);
    }

    .legal-tab:not(.active):hover {
        color: var(--muted);
    }

.legal-modal-body {
    overflow-y: auto;
    padding-right: 10px;
    padding-bottom: 26px;
}

.legal-content {
    color: var(--muted);
    font-weight: 300;
    line-height: 1.75;
    font-size: 0.9rem;
}

    .legal-content h2 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--text);
        margin: 24px 0 10px;
    }

        .legal-content h2:first-child {
            margin-top: 0;
        }

    .legal-content h3 {
        font-size: 0.98rem;
        font-weight: 700;
        color: var(--text);
        margin: 20px 0 8px;
    }

    .legal-content p {
        margin-bottom: 12px;
    }

    .legal-content ul,
    .legal-content ol {
        margin: 0 0 12px 1.3em;
    }

    .legal-content li {
        margin-bottom: 6px;
    }

    .legal-content a {
        color: var(--mid);
    }

@media (max-width: 768px) {
    .modal {
        padding: 30px 20px;
    }
}

@media (max-width: 600px) {
    .modal.modal-legal {
        padding: 26px 20px 8px;
        max-height: 88vh;
    }

    .legal-tabs {
        gap: 14px;
    }
}

/* ══ Painel Admin - navbar sempre escura (tema Semi Dark do Sneat já deixa o menu lateral
   sempre escuro; a navbar, por padrão, segue o modo claro/escuro escolhido - aqui ela é
   travada no escuro igual ao menu, a pedido do usuário, mesmo com o body/conteúdo claro). ══ */
#layout-navbar.bg-navbar-theme {
    background-color: #282a42 !important;
}

#layout-navbar.bg-navbar-theme .nav-link {
    color: #d1d1e7 !important;
}

    #layout-navbar.bg-navbar-theme .nav-link:hover,
    #layout-navbar.bg-navbar-theme .nav-link:focus {
        color: #ededff !important;
    }

/* "Leilões da ACECA" centralizado na navbar - não é um .nav-link, então não herdava a cor
   clara da regra acima e ficava escuro (baixo contraste) sobre o fundo escuro forçado. */
#layout-navbar.bg-navbar-theme .app-brand-text {
    color: #d1d1e7 !important;
}

/* Só o texto da navbar (não o da marca na sidebar, que continua 1.25rem/demo.css) - pedido
   maior (2.25rem) por estar sozinho, centralizado, num espaço bem mais largo. */
#navbar-collapse .app-brand-text {
    font-size: 2.25rem;
}

/* Reforça em !important as mesmas regras de troca logo normal/logo recolhido do core.css
   (ver .app-brand-img-collapsed lá) - o template-customizer.js injeta um SEGUNDO <link> de
   core.css via document.write em vez de substituir o original, então por um instante os
   dois convivem; esta regra garante que só um logo aparece de cada vez, sem depender da
   ordem exata entre esses dois <link> concorrentes. */
.app-brand-img-collapsed {
    display: none !important;
}

.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .app-brand-img {
    display: none !important;
}

.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .app-brand-img-collapsed {
    display: block !important;
}

/* Avatar do usuário no Swal "Seja bem-vindo/novamente" (ver Pages/Views/Login.cshtml) - mesmo
   padrão visual do Aceca.Adm (site.css lá), com a cor roxa própria do Leilão (--p). */
.swal-avatar-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid rgba(163, 43, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(163, 43, 255, .18);
}

.swal-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}