/**
 * Tema Meshy - Estilo Escuro Moderno
 * Aplicar em todas as páginas do site
 */

/* ============================================
   FUNDO E CORES GLOBAIS
   ============================================ */

body,
html {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

/* Sobrescrever fundo da imagem */
body {
    background-image: none !important;
}

/* ============================================
   TIPOGRAFIA
   ============================================ */

body,
html {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 400;
    letter-spacing: -0.2px;
}

h1 {
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: -0.5px !important;
}

h2, h3, h4, h5, h6 {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
}

p {
    color: rgba(255, 255, 255, 0.7) !important;
}

a {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: color 0.2s ease !important;
}

a:hover {
    color: #10b981 !important;
}

/* ============================================
   BOTÕES - ESTILO MESHY
   ============================================ */

.botao,
button,
.btn,
input[type="submit"],
input[type="button"] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    letter-spacing: 0.2px !important;
}

.botao:hover,
button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3) !important;
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

.botao:active,
button:active,
.btn:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(0) !important;
}

/* Botão secundário */
.botao_categorias {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    backdrop-filter: blur(10px) !important;
}

.botao_categorias:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    scale: 1.05 !important;
}

.botao_categorias_press {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #10b981 !important;
}

/* ============================================
   INPUTS E FORMULÁRIOS
   ============================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    transition: all 0.2s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Barra de busca */
.search,
.search_barra_home {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

.search:focus,
.search_barra_home:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================
   CAIXAS E CONTAINERS
   ============================================ */

.caixa_plano,
.caixa_login,
.caixa_perfil {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.caixa_plano h1,
.caixa_plano h2,
.caixa_plano p,
.caixa_login h1,
.caixa_login h2,
.caixa_login p,
.caixa_perfil h3,
.caixa_perfil p {
    color: #ffffff !important;
}

/* ============================================
   MENU LATERAL E BARRAS
   ============================================ */

.barra_superior {
    background: rgba(26, 26, 26, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

.botao_barra {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.botao_barra:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ============================================
   ITENS DA BIBLIOTECA
   ============================================ */

.biblioteca_item_text {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.biblioteca_item:hover .biblioteca_item_text {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================
   TAGS E BADGES
   ============================================ */

.thumb-tag,
.btn_tag {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

.thumb-tag:hover,
.btn_tag:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.05) !important;
}

/* ============================================
   MODAIS E OVERLAYS
   ============================================ */

.big_img {
    background-color: rgba(26, 26, 26, 0.98) !important;
    background-size: 96% 96% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

.btn_big_img {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.btn_big_img:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================
   SCROLLBAR CUSTOMIZADA
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   LINKS E ELEMENTOS INTERATIVOS
   ============================================ */

.coracao-favorito {
    color: rgba(255, 255, 255, 0.6) !important;
}

.coracao-favorito:hover {
    color: #ff6b6b !important;
}

.coracao-favorito.favorito-ativo {
    color: #ff6b6b !important;
}

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

@media (max-width: 768px) {
    body,
    html {
        background: #1a1a1a !important;
    }
}

/* ============================================
   UTILITÁRIOS
   ============================================ */

.padding5, .padding10, .padding20 {
    /* Mantém padding, apenas ajusta cor se necessário */
}

.full {
    background: transparent !important;
}

.main {
    background: transparent !important;
}

/* Cards e containers gerais */
.container,
.container-box,
.canva {
    background: transparent !important;
}

/* Textos com cor escura - sobrescrever */
.text-dark,
.color-dark {
    color: rgba(255, 255, 255, 0.9) !important;
}