/* =========================================================
   WALA SOCIAL - GLOBAL
   Cores, reset e componentes compartilhados
   ========================================================= */

:root {
    --bg: #070a08;
    --panel: #0e1410;
    --panel2: #121b15;
    --line: #213027;

    --text: #f3f7f4;
    --muted: #8d9a91;

    --green: #21d768;
    --green2: #126b38;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}


/* =========================================================
   CONFIRMAÇÃO PERSONALIZADA
   ========================================================= */

/* Overlay */
.wala-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(5px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.16s ease,
        visibility 0.16s ease;
}

.wala-confirm-overlay.show {
    opacity: 1;
    visibility: visible;
}


/* Caixa de confirmação */
.wala-confirm {
    position: relative;

    width: min(430px, 100%);
    padding: 28px;

    border: 1px solid var(--line);
    border-radius: 22px;

    background: var(--panel);

    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);

    transform: translateY(10px) scale(0.98);
    transition: transform 0.16s ease;
}

.wala-confirm-overlay.show .wala-confirm {
    transform: translateY(0) scale(1);
}


/* =========================================================
   BOTÃO FECHAR
   ========================================================= */

.wala-confirm-close {
    position: absolute;
    top: 16px;
    right: 16px;

    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: var(--muted);

    cursor: pointer;
}

.wala-confirm-close:hover {
    background: var(--panel2);
    color: var(--text);
}


/* =========================================================
   ÍCONES
   ========================================================= */

.wala-confirm-close svg,
.wala-confirm-icon svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wala-confirm-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;
    margin-bottom: 18px;

    border-radius: 15px;

    background: rgba(33, 215, 104, 0.10);
    color: var(--green);
}

.wala-confirm-icon.danger {
    background: rgba(255, 76, 76, 0.10);
    color: #ff5d5d;
}


/* =========================================================
   CONTEÚDO
   ========================================================= */

.wala-confirm-content h3 {
    margin: 0 42px 8px 0;

    font-size: 20px;
    line-height: 1.25;
}

.wala-confirm-content p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
   AÇÕES
   ========================================================= */

.wala-confirm-actions {
    display: flex;
    justify-content: flex-end;

    gap: 10px;
    margin-top: 26px;
}


/* Botão padrão */
.wala-confirm-button {
    min-width: 105px;

    padding: 11px 17px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: var(--panel2);
    color: var(--text);

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

.wala-confirm-button:hover {
    transform: translateY(-1px);
    border-color: #34483b;
}


/* Botão confirmar */
.wala-confirm-accept {
    border-color: var(--green);

    background: var(--green);
    color: #041108;
}


/* Botão de ação perigosa */
.wala-confirm-accept.danger {
    border-color: #e54848;

    background: #e54848;
    color: #ffffff;
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 520px) {

    .wala-confirm {
        padding: 24px 20px 20px;
        border-radius: 18px;
    }

    .wala-confirm-actions {
        flex-direction: column-reverse;
    }

    .wala-confirm-button {
        width: 100%;
    }
}

/* Esconde a barra de rolagem, mas mantém o scroll funcionando */

html {
    scrollbar-width: none; /* Firefox */
}

body {
    -ms-overflow-style: none; /* navegadores antigos */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none; /* Chrome, Brave, Edge, Safari */
}


/* =========================================================
   SELO DE CONTA VERIFICADA
   ========================================================= */

.verified-badge {
    --verified-size: 17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--verified-size);
    height: var(--verified-size);

    margin-left: 4px;

    flex: 0 0 auto;
    vertical-align: -3px;
}

.verified-badge svg {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;
}

.verified-badge-shape {
    fill: #32d875;
}

.verified-badge-check {
    fill: #ffffff;
}


/* Selo de conta verificada */
.verified-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    margin-left:5px;
    vertical-align:-2px;
}

.verified-badge svg{
    width:100%;
    height:100%;
    display:block;
}

.verified-badge-shape{
    fill:#19e66f;
}

.verified-badge-check{
    fill:#fff;
}
/* =========================================================
   BOTÃO HAMBÚRGUER
========================================================= */

button.back-button {
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
        font-size: 25px; /* tamanho do ☰ */
    padding: 0;
}


/* =========================================================
   MENU LATERAL
========================================================= */

.side-menu {
    position: fixed;

    top: 0;
    left: -300px;

    width: 280px;
    height: 100vh;

    padding: 22px 18px;

    box-sizing: border-box;

    background: #0b0b0b;

    z-index: 10001;

    transition: left 0.25s ease;

    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.65);
}


/* MENU ABERTO */

.side-menu.active {
    left: 0;
}


/* =========================================================
   TOPO DO MENU
========================================================= */

.side-menu-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 5px 5px 20px;

    border-bottom: 1px solid #222;
}


.side-menu-logo {
    color: #00ff88;

    font-size: 26px;
    font-weight: 900;
}


/* X */

.side-menu-header button {
    width: 40px;
    height: 40px;

    border: 0;

    border-radius: 50%;

    background: #181818;

    color: #fff;

    font-size: 20px;

    cursor: pointer;
}


/* =========================================================
   LINKS
========================================================= */

.side-menu-links {
    margin-top: 20px;
}


.side-menu-links a {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px;

    margin-bottom: 5px;

    border-radius: 9px;

    color: #fff;

    text-decoration: none;

    font-size: 16px;
    font-weight: 600;

    transition: background 0.2s;
}


.side-menu-links a:hover {
    background: #1b1b1b;
}


.side-menu-links a span {
    width: 25px;

    text-align: center;

    font-size: 20px;
}


/* =========================================================
   FUNDO ESCURO
========================================================= */

.menu-overlay {
    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.72);

    z-index: 10000;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.menu-overlay.active {
    opacity: 1;

    visibility: visible;
}

/* IMAGENS DO MENU */

.side-menu-links .menu-img {
    width: 42px;
    height: 42px;

    object-fit: cover;

    border-radius: 8px;

    flex-shrink: 0;
}


/* TEXTO */

.side-menu-links a span {
    width: auto;

    font-size: 16px;

    text-align: left;
}