/* Corpo */
body {
    background-image: url('/public/assets/images/shared/bg_optimized.jpg');
    /* Fundo otimizado */
    background-size: cover !important;
    /* Ocupa sempre 100% do viewport */
    background-position: center;
    /* Centraliza a imagem */
    background-attachment: fixed;
    /* Fundo fixo em dispositivos adequados */
    background-repeat: no-repeat;
    /* Evita repetição */
    font-family: Arial, sans-serif;
    /* Fonte padrão */
    overflow: auto;
    /* Restaura o comportamento normal de scroll */
    overflow-x: hidden !important;
    /* Evita scroll horizontal */
    width: 100%;
    margin: 0 !important;
    forced-color-adjust: auto;
}

/* Reserva permanente do espaço da scrollbar no root para evitar "jump"
   de layout quando qualquer modal abre/fecha (SweetAlert em login,
   modais arena em dashboard, etc.). O track fica sempre visível. */
html {
    scrollbar-gutter: stable;
}

/* Padding zero apenas em desktop - mobile controlado por responsive.css */
@media (min-width: 993px),
(min-width: 769px) and (orientation: landscape) {
    body {
        padding: 0 !important;
    }

    #content {
        padding: 0 !important;
    }
}


/* Mantém a scrollbar visível mas desabilita o scroll quando bloqueado.
   Usa apenas 'stable' (sem both-edges) porque o gutter já está
   reservado no <html>, evitando shift horizontal quando o body vira
   position:fixed. */
body.scroll-lock {
    overflow-y: scroll !important;
    position: fixed !important;
    width: 100% !important;
    scrollbar-gutter: stable !important;
}

/* Image lightbox: avoid reserving gutter on both edges (it shifts the navbar in Chrome). */
body.post-image-overlay-open.scroll-lock {
    scrollbar-gutter: stable !important;
}


/* Scrollbar com aparência desabilitada (cinza claro) quando scroll está bloqueado */
body.scroll-lock::-webkit-scrollbar-thumb {
    background-color: rgba(200, 200, 200, 0.3) !important;
}

#content {
    margin: 0 !important;
}

/* Alvo do scroll */
.scrollable {
    overflow: auto !important;
    overscroll-behavior: contain !important;
    /* Firefox: deixa só o polegar com cor, trilho transparente */
    scrollbar-width: thin !important;
    scrollbar-color: #1b2027 transparent !important;
    /* Evita salto de layout quando aparece a barra */
    scrollbar-gutter: stable !important;
}

/* WebKit (Chrome/Edge/Safari) */
.scrollable::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

.scrollable::-webkit-scrollbar-track {
    background: transparent !important;
}

.scrollable::-webkit-scrollbar-thumb {
    background-color: #1b2027 !important;
    border-radius: 8px !important;
    /* borda transparente cria “respiro”, parecendo flutuar */
    border: 2px solid transparent !important;
    background-clip: content-box !important;
}

/* Some botões/cantos antigos de scrollbar no WebKit */
.scrollable::-webkit-scrollbar-button {
    display: none !important;
}

.scrollable::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* (Opcional) Mostrar o thumb mais forte só ao interagir */
.scrollable::-webkit-scrollbar-thumb {
    opacity: 0.6 !important;
    transition: opacity .2s !important;
}

.scrollable:hover::-webkit-scrollbar-thumb,
.scrollable:focus-within::-webkit-scrollbar-thumb {
    opacity: 1 !important;
}

.logo {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    background-image: url('/public/assets/images/shared/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin-right: 8px;
    transition: box-shadow 0.2s;
}


/* Botão Azul LinkMedMe */
.btn-linkmedme {
    width: 100%;
    height: 50px;
    font-size: 1.2rem;
    padding: 8px 16px;
    border-radius: 6px;
    background-color: #9DD0D4;
    color: white !important;
    border-color: #9DD0D4;
    outline: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    /* Transição suave */
}

.btn-linkmedme:hover {
    background-color: #C9E7DE !important;
    border-color: #C9E7DE !important;
}

.btn-linkmedme:active,
.btn-linkmedme:focus {
    background-color: #C9E7DE !important;
    border-color: #C9E7DE !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Botão Verde LinkMedMe */
.btn-green-linkmedme {
    width: 100%;
    height: 50px;
    font-size: 1.2rem;
    padding: 10px 16px !important;
    border-radius: 6px;
    background-color: rgba(11, 153, 94, 1) !important;
    color: white !important;
    border-color: rgba(11, 153, 94, 1) !important;
    outline: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    /* Transição suave */
}

.btn-green-linkmedme:hover,
.btn-green-linkmedme:active,
.btn-green-linkmedme:focus {
    background-color: rgba(11, 153, 94, 0.8) !important;
    border-color: rgba(11, 153, 94, 0.8) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Botão Google */
.btn-google-linkmedme {
    width: 100%;
    height: 50px;
    font-size: 1.2rem;
    padding: 10px 16px !important;
    border-radius: 6px;
    background-color: #4285F4 !important;
    color: #fff !important;
    border: 1px solid #4285F4 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-google-linkmedme:hover {
    background-color: #357ae8 !important;
    border-color: #357ae8 !important;
}

.btn-google-linkmedme i {
    color: #fff !important;
}

button:focus,
input:focus,
[tabindex]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Social login buttons */
.social-login {
    display: flex;
    gap: 0.5rem;
}

.social-login>* {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 576px) {
    .social-login {
        flex-direction: column !important;
    }

    .social-login>* {
        width: 100% !important;
    }
}

#btn-google-login,
#btn-facebook-login {
    width: 100% !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
    cursor: pointer;
}

/* Google button - white with gray border */
#btn-google-login {
    background-color: #fff !important;
    color: #444 !important;
    border: 1px solid #dadce0 !important;
    position: relative;
    overflow: hidden;
}

#btn-google-login:hover {
    background-color: #f8f9fa !important;
    border-color: #c6c6c6 !important;
}

/* Facebook button - blue */
#btn-facebook-login,
#btn-facebook-login:active,
#btn-facebook-login:focus {
    background-color: #1877f2 !important;
    color: #fff !important;
    border: none !important;
}

#btn-facebook-login:hover {
    background-color: #166fe5 !important;
}

/* ========================================
   BREADCRUMB NAVIGATION - Estilos compartilhados
   Usado em: question-breadcrumb, study-breadcrumb
   ======================================== */

/* Breadcrumb Row - à esquerda em desktop/tablet */
#question-breadcrumb-row,
#study-breadcrumb-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1rem;
}

/* Breadcrumb nav - à esquerda em desktop/tablet */
#question-breadcrumb-nav,
#study-breadcrumb-nav {
    display: flex;
    justify-content: flex-start;
}

/* Breadcrumb base styles */
.breadcrumb.linkmedme-breadcrumb,
#question-breadcrumb,
#study-breadcrumb {
    background-color: transparent;
    padding-top: 22px !important;
    margin-bottom: 0;
    display: flex;
    justify-content: flex-start;
}

/* Breadcrumb items */
.breadcrumb.linkmedme-breadcrumb .breadcrumb-item,
#question-breadcrumb .breadcrumb-item,
#study-breadcrumb .breadcrumb-item {
    background-color: #fff;
    border-radius: 4px;
    padding: 4px 8px;
    margin-right: 6px;
    cursor: pointer;
    color: #1A212A;
    text-decoration: none;
}

/* Active item */
.breadcrumb.linkmedme-breadcrumb .breadcrumb-item.active,
#question-breadcrumb .breadcrumb-item.active,
#study-breadcrumb .breadcrumb-item.active {
    background-color: var(--brand, #9DD0D4);
    color: #fff;
    cursor: default;
}

.breadcrumb.linkmedme-breadcrumb .breadcrumb-item.active i,
#question-breadcrumb .breadcrumb-item.active i,
#study-breadcrumb .breadcrumb-item.active i {
    color: #fff !important;
}

/* Links and icons inside items - click goes to parent li */
.breadcrumb.linkmedme-breadcrumb .breadcrumb-item a,
.breadcrumb.linkmedme-breadcrumb .breadcrumb-item i,
#question-breadcrumb .breadcrumb-item a,
#question-breadcrumb .breadcrumb-item i,
#study-breadcrumb .breadcrumb-item a,
#study-breadcrumb .breadcrumb-item i {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
}

/* Remove default separator */
.breadcrumb.linkmedme-breadcrumb .breadcrumb-item+.breadcrumb-item::before,
#question-breadcrumb .breadcrumb-item+.breadcrumb-item::before,
#study-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content: none;
}

/* ========================================
   CARDS - Estilos compartilhados para cards de navegação
   Usado em: question-options, question-categories, question-year, study-options
   ======================================== */

/* Card tema base - Desktop */
.card-tema {
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.card-tema:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Cards de opções principais - Desktop (Categorias, Simulados, Aprendizado, Anatomia, Fisiologia) */
#question-options-container .card-tema,
#question-inep-container .card-tema,
#question-provas-container .card-tema,
#question-categories-container .card-tema,
#question-year-container .card-tema,
#study-options-container .card-tema,
#study-options-container .study-option-card,
#anatomy-topics-grid .card-tema,
#physiology-topics-grid .card-tema {
    min-height: 280px;
    max-height: 320px;
    border-radius: 12px;
}

/* Ícones dentro dos cards */
#question-options-container .card-tema .fa-3x,
#question-inep-container .card-tema .fa-3x,
#question-provas-container .card-tema .fa-3x,
#question-categories-container .card-tema .fa-3x,
#question-year-container .card-tema .fa-3x,
#study-options-container .card-tema .fa-3x,
#study-options-container .study-option-card .fa-3x,
#anatomy-topics-grid .card-tema .fa-3x,
#physiology-topics-grid .card-tema .fa-3x {
    pointer-events: none;
}

/* Ícones com cor padrão */
#question-options-container i,
#question-inep-container i,
#question-provas-container i,
#question-categories-container i,
#question-year-container i,
#study-options-container i,
#anatomy-topics-grid i,
#physiology-topics-grid i {
    color: #6c757d !important;
}

/* Quando o feed do dashboard estiver desativado, garantir que os ícones
   nos cards de estudo não recebam hover/efeitos visuais (Categorias/Simulados/Aprendizagem) */
body[data-feed-enabled="0"] .home-study-card .fa-3x,
body[data-feed-enabled="0"] .home-study-card:hover .fa-3x,
body[data-feed-enabled="0"] .home-study-card .fa-3x:hover {
    color: #6c757d !important;
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
    pointer-events: none !important;
}

/* ========================================
   CARDS - Mobile/Celular
   ======================================== */
@media (max-width: 992px) and (orientation: portrait),
(max-width: 768px) {

    /* Margens laterais para containers no mobile */
    #container-card-tema-questao,
    #container-study {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 15px !important;
        /* Espaço entre navbar e conteúdo */
    }

    /* Margem para containers de cards */
    #question-options-container,
    #question-inep-container,
    #question-provas-container,
    #question-categories-container,
    #question-year-container,
    #study-options-container,
    #anatomy-topics-grid,
    #physiology-topics-grid {
        padding: 0 4px;
    }

    /* Margem para container de questões */
    #questions-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Tamanho dos cards no mobile - altura flexível para títulos */
    #question-options-container .card-tema,
    #question-inep-container .card-tema,
    #question-provas-container .card-tema,
    #question-categories-container .card-tema,
    #question-year-container .card-tema,
    #study-options-container .card-tema,
    #study-options-container .study-option-card,
    #anatomy-topics-grid .card-tema,
    #physiology-topics-grid .card-tema {
        min-height: 140px;
        max-height: none;
        /* Remove limite para acomodar títulos longos */
        height: auto;
        border-radius: 12px;
    }

    /* Card body flexível */
    #question-options-container .card-tema .card-body,
    #question-inep-container .card-tema .card-body,
    #question-provas-container .card-tema .card-body,
    #question-categories-container .card-tema .card-body,
    #question-year-container .card-tema .card-body,
    #study-options-container .card-tema .card-body,
    #study-options-container .study-option-card .card-body,
    #anatomy-topics-grid .card-tema .card-body,
    #physiology-topics-grid .card-tema .card-body {
        padding: 12px 10px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    /* Ícones menores no mobile */
    #question-options-container .card-tema .fa-3x,
    #question-inep-container .card-tema .fa-3x,
    #question-provas-container .card-tema .fa-3x,
    #question-categories-container .card-tema .fa-3x,
    #question-year-container .card-tema .fa-3x,
    #study-options-container .card-tema .fa-3x,
    #study-options-container .study-option-card .fa-3x,
    #anatomy-topics-grid .card-tema .fa-3x,
    #physiology-topics-grid .card-tema .fa-3x {
        font-size: 1.75rem !important;
        pointer-events: none;
    }

    /* Títulos menores no mobile - com quebra de linha */
    #question-options-container .card-tema .card-title,
    #question-inep-container .card-tema .card-title,
    #question-provas-container .card-tema .card-title,
    #question-categories-container .card-tema .card-title,
    #question-year-container .card-tema .card-title,
    #study-options-container .card-tema .card-title,
    #study-options-container .study-option-card .card-title,
    #anatomy-topics-grid .card-tema .card-title,
    #physiology-topics-grid .card-tema .card-title {
        font-size: 0.85rem !important;
        margin-bottom: 0.25rem !important;
        white-space: normal !important;
        /* Permite quebra de linha */
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.2 !important;
        max-height: none !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        /* Máximo 3 linhas */
        -webkit-box-orient: vertical !important;
        word-break: break-word !important;
    }

    /* Títulos H5 dentro dos cards */
    #question-options-container .card-tema h5,
    #question-inep-container .card-tema h5,
    #question-provas-container .card-tema h5,
    #question-categories-container .card-tema h5,
    #question-year-container .card-tema h5,
    #study-options-container .card-tema h5,
    #study-options-container .study-option-card h5,
    #anatomy-topics-grid .card-tema h5,
    #physiology-topics-grid .card-tema h5 {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
    }

    /* Botões menores no mobile */
    #question-options-container .card-tema .btn,
    #question-inep-container .card-tema .btn,
    #question-provas-container .card-tema .btn,
    #question-categories-container .card-tema .btn,
    #question-year-container .card-tema .btn,
    #study-options-container .card-tema .btn,
    #study-options-container .study-option-card .btn,
    #anatomy-topics-grid .card-tema .btn,
    #physiology-topics-grid .card-tema .btn {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }

    /* Esconder descrição no mobile para economizar espaço */
    #question-options-container .card-tema .card-text,
    #question-inep-container .card-tema .card-text,
    #question-provas-container .card-tema .card-text,
    #question-categories-container .card-tema .card-text,
    #question-year-container .card-tema .card-text,
    #study-options-container .card-tema .card-text,
    #study-options-container .study-option-card .card-text,
    #anatomy-topics-grid .card-tema .card-text,
    #physiology-topics-grid .card-tema .card-text {
        display: none;
    }

    /* Breadcrumb no mobile - centralizado */
    #question-breadcrumb-row,
    #study-breadcrumb-row {
        padding-left: 12px !important;
        padding-right: 12px !important;
        justify-content: center !important;
        margin-bottom: 8px !important;
    }

    #question-breadcrumb-nav,
    #study-breadcrumb-nav {
        display: flex !important;
        justify-content: center !important;
    }

    #question-breadcrumb,
    #study-breadcrumb {
        padding-top: 8px !important;
        margin-bottom: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* Limitar largura do breadcrumb item no mobile */
    #question-breadcrumb .breadcrumb-item,
    #study-breadcrumb .breadcrumb-item {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}