/* -----------------------------------------------------------
   BARRA PRINCIPAL (A e B)   FUNDO BRANCO (modo claro)
----------------------------------------------------------- */
.topbar {
    width: 100%;
    background-color: #ffffff;
    padding: 6px 0;
    box-sizing: border-box;
}

/* ============================================================
   TOPBAR INNER — versão unificada e otimizada
============================================================ */
.topbar-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;

    flex-wrap: nowrap;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}
.topbar-inner::-webkit-scrollbar {
    display: none;
}

/* -----------------------------------------------------------
   GRUPOS DE BOTÕES
----------------------------------------------------------- */
.topbar-left,
.topbar-center,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-left a.btn-main,
.topbar-right a.btn-social {
    flex-shrink: 0;
}

/* -----------------------------------------------------------
   BOTÕES PRINCIPAIS
----------------------------------------------------------- */
.btn-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #b30000;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-main img {
    width: 18px;
    height: 18px;
}

.btn-main:hover {
    background-color: #d00000;
    transform: scale(1.05);
}

/* -----------------------------------------------------------
   BOTÕES CIRCULARES ( - R + )
----------------------------------------------------------- */
.btn-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #b30000;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-circle img {
    width: 18px;
    height: 18px;
}

.btn-circle:hover {
    transform: scale(1.15);
    background-color: #d00000;
}

/* -----------------------------------------------------------
   BOTÕES SOCIAIS
----------------------------------------------------------- */
.btn-social img {
    width: 22px;
    height: 22px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.btn-social img:hover {
    transform: scale(1.2);
}

/* -----------------------------------------------------------
   RESPONSIVIDADE (ajustes gerais)
----------------------------------------------------------- */
@media (max-width: 600px) {
    .btn-main {
        padding: 4px 8px; /* compactação leve */
        font-size: 12px;
    }

    .btn-circle {
        width: 24px;
        height: 24px;
    }

    .btn-main img,
    .btn-circle img {
        width: 16px;
        height: 16px;
    }

    .btn-social img,
    .btn-nav img {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .topbar-inner {
        gap: 4px;
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* -----------------------------------------------------------
   MODO ESCURO
----------------------------------------------------------- */
body.dark-mode .topbar {
    background-color: #3a3a3a !important;
}

body.dark-mode .topbar * {
    color: #ffffff !important;
}

body.dark-mode .topbar img {
    filter: none !important;
}

/* ============================================================
   CORREÇÃO DAS CORES DOS ÍCONES
============================================================ */
#themeIcon2,
#themeIcon2 * {
    stroke: #FFD700 !important;
    fill: #FFD700 !important;
}

.btn-main img[src*="book-1"],
.btn-main img[src*="book-1"] * {
    stroke: #FFFFFF !important;
    fill: #FFFFFF !important;
}

.btn-social img[src*="email"],
.btn-social img[src*="email"] * {
    stroke: #000000 !important;
    fill: #000000 !important;
}

/* ============================================================
   LAYOUT FINAL PARA SMARTPHONES — ORDEM EXATA
============================================================ */
@media (max-width: 600px) {

    .topbar-inner {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 10px;
    }

    /* LINHA 1 — ORDEM EXATA */
    .topbar-left {
        order: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px; /* compactação leve */
    }

    .topbar-center {
        order: 2;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .topbar-right {
        order: 3;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }

    /* LINHA 2 — ÍCONES SOCIAIS */
    .topbar-right .btn-social {
        order: 99;
        margin-top: 4px;
    }
}