/*
 Theme Name:   CoinsHub Child
 Theme URI:    https://coinshub.com.br
 Description:  Tema personalizado da CoinsHub (Filho do Hello Elementor)
 Author:       Jean Lucas
 Template:     hello-elementor
 Version:      1.1
*/

/* ============================================================
   [00] RESET DE SEGURANÇA (PARA MATAR A BORDA ESQUERDA)
   ============================================================ */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* ============================================================
   [01] VARIAVEIS E CORES GLOBAIS
   ============================================================ */
:root {
    --ch-blue: #0104FC;
    --ch-gold: #FFB703;
    --ch-gold-hover: #e6a502;
    --ch-black: #000000;
    --ch-dark-gray: #0a0a0a;
    --ch-card-bg: #111111;
    --ch-white: #ffffff;
    --ch-border: #1a1a1a;
}

/* ============================================================
   [02] ESTRUTURA DO PAINEL (DARK MODE)
   ============================================================ */
body.woocommerce-account, 
body.woocommerce-account #page,
body.woocommerce-account #content,
body.woocommerce-account .site-main,
.entry-content {
    background-color: var(--ch-black) !important;
}

.woocommerce-account .woocommerce {
    display: flex !important;
    gap: 40px;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    background: transparent !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1;
    background-color: var(--ch-dark-gray) !important; 
    padding: 35px;
    border-radius: 12px;
    border: 1px solid var(--ch-border) !important;
    color: var(--ch-white) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.woocommerce-MyAccount-content p, 
.woocommerce-MyAccount-content h1, 
.woocommerce-MyAccount-content h2, 
.woocommerce-MyAccount-content h3, 
.woocommerce-MyAccount-content label,
.woocommerce-MyAccount-content span:not(.ch-card-icon) {
    color: var(--ch-white) !important;
}

/* ============================================================
   [03] SIDEBAR (MENU LATERAL)
   ============================================================ */
.ch-account-navigation {
    width: 280px;
    background: var(--ch-black);
    border-radius: 12px;
    padding: 30px 20px;
    border: 1px solid var(--ch-border);
    box-shadow: 0 10px 30px rgba(1, 4, 252, 0.1);
}

.ch-user-profile {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--ch-border);
    padding-bottom: 20px;
}

.ch-welcome { display: block; color: #666; font-size: 12px; text-transform: uppercase; }
.ch-username { display: block; color: var(--ch-white); font-size: 18px; font-weight: bold; margin-top: 5px; }

.ch-account-menu { list-style: none; padding: 0; margin: 0; }
.ch-account-menu li a {
    display: block;
    padding: 12px 15px;
    color: #999;
    text-decoration: none;
    border-radius: 8px;
    transition: 0.3s;
    font-weight: 500;
}

.ch-account-menu li a:hover, 
.ch-account-menu .is-active a {
    background: var(--ch-blue);
    color: var(--ch-white);
}

/* ============================================================
   [04] DASHBOARD (CARDS)
   ============================================================ */
.ch-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.ch-dash-card {
    background: var(--ch-card-bg) !important;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    text-decoration: none !important;
    border: 1px solid #222 !important;
    transition: 0.3s;
    display: block;
    color: #ffffff !important;
}

.ch-dash-card:hover {
    border-color: var(--ch-blue) !important;
    transform: translateY(-5px);
    background: #161616 !important;
    box-shadow: 0 10px 30px rgba(1, 4, 252, 0.2);
}

.ch-card-icon { font-size: 35px; margin-bottom: 10px; display: block; }

.ch-dash-grid a.ch-dash-card h3,
.woocommerce-account .ch-dash-card h3 { 
    color: #ffffff !important;
    font-size: 17px !important;
    margin: 10px 0 !important;
    font-weight: 700 !important;
}

.ch-dash-card:hover h3 { color: var(--ch-blue) !important; }

/* ============================================================
   [05] PAGINA DE PEDIDOS
   ============================================================ */
body.woocommerce-account .ch-orders-list-new { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 15px !important; 
    width: 100% !important; 
}

body.woocommerce-account .ch-order-card-new {
    background: #111 !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 12px !important;
    padding: 20px 25px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 15px !important;
}

body.woocommerce-account .ch-main-info { display: flex !important; gap: 30px !important; }

body.woocommerce-account .ch-box .ch-label { display: block !important; font-size: 10px !important; color: #666 !important; text-transform: uppercase !important; margin-bottom: 3px !important; }
body.woocommerce-account .ch-box .ch-val { color: #fff !important; font-size: 14px !important; font-weight: 600 !important; }

body.woocommerce-account .ch-status-tag { font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase !important; padding: 4px 10px !important; border-radius: 4px !important; background: #222 !important; color: #aaa !important; }
body.woocommerce-account .ch-status-tag.completed { background: rgba(0, 255, 0, 0.1) !important; color: #00ff00 !important; }

body.woocommerce-account .ch-action-info { text-align: right !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 10px !important; }
body.woocommerce-account .ch-price { color: #fff !important; font-size: 16px !important; font-weight: 800 !important; display: block !important; }

body.woocommerce-account .ch-btn-view-new {
    background: #FFB703 !important;
    color: #000 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-block !important;
    width: fit-content !important;
}

/* ============================================================
   [06] RESPONSIVIDADE - CORREÇÃO DE VAZAMENTO
   ============================================================ */
@media (max-width: 991px) {
    /* CORREÇÃO PRINCIPAL: Muda de Flex para Bloco para não esmagar */
    .woocommerce-account .woocommerce {
        flex-direction: column !important;
        padding: 20px 10px !important; /* Diminuído padding para não apertar */
    }

    .ch-account-navigation {
        width: 100% !important; /* Menu ocupa largura total no mobile */
        margin-bottom: 20px !important;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 20px !important;
        width: 100% !important;
    }

    body.woocommerce-account .ch-order-card-new { flex-direction: column !important; align-items: flex-start !important; padding: 15px !important; }
    body.woocommerce-account .ch-main-info { flex-direction: column !important; width: 100% !important; gap: 0 !important; }
    
    body.woocommerce-account .ch-box {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid #1a1a1a !important;
    }

    body.woocommerce-account .ch-action-info { width: 100% !important; margin-top: 15px !important; align-items: center !important; }
    body.woocommerce-account .ch-total-box { display: flex !important; justify-content: space-between !important; width: 100% !important; margin-bottom: 10px !important; }
    body.woocommerce-account .ch-btn-view-new { width: 100% !important; height: 50px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
}

/* FORÇAR 3 COLUNAS NA HOME/LISTAGEM (DESKTOP) */
@media (min-width: 1024px) {
    .products.columns-3, 
    .elementor-grid, 
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* Força 3 colunas exatas */
        gap: 20px !important;
    }
    
    .woocommerce ul.products li.product {
        width: 100% !important; /* Deixa o grid controlar a largura */
        margin-right: 0 !important;
    }
}

/* MANTER 2 COLUNAS NO MOBILE (OPCIONAL) */
@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}