/* --- CORES BRASIL ELETRO --- */
:root {
    --be-blue: #004797;      /* Azul Principal */
    --be-green: #009c3b;     /* Verde Bandeira (Sucesso/Botões) */
    --be-yellow: #ffdf00;    /* Amarelo Ouro (Detalhes) */
    --be-bg: #f5f7fa;        /* Fundo bem clarinho */
    --be-white: #ffffff;
    --be-text: #1f2937;
    --be-gray: #6b7280;
    --radius: 16px;
}

/* Classe base para Material Symbols */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* === 1. LIMPEZA GERAL === */
body.be-dashboard-active {
    background-color: var(--be-bg) !important;
    margin: 0 !important;
    font-family: 'Roboto', sans-serif;
}

/* Esconde cabeçalho e rodapé do tema */
body.be-dashboard-active #masthead,
body.be-dashboard-active .site-header,
body.be-dashboard-active .footer-wrapper,
body.be-dashboard-active .elementor-location-header {
    display: none !important;
}

/* === 2. LAYOUT PRINCIPAL EM GRID ===
   Linha 1: Header (Minha Conta / Olá, Artur / Brasil Eletro)
   Linha 2: Coluna 1 = Menu lateral (Início, Meus Pedidos, etc.)
            Coluna 2 = Conteúdo (formulário, pedidos, etc.)
*/
.woocommerce-account .woocommerce {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
        "header header"
        "nav    content";
    column-gap: 28px;
    max-width: 1100px;
    margin: 80px auto 40px auto;
    padding: 0 20px;
}

/* Header ocupa a linha inteira */
.be-dashboard-header {
    grid-area: header;
    width: 100%;
    margin-bottom: 10px;
}

/* Menu lateral fica logo abaixo do header, à esquerda */
.woocommerce-account .woocommerce-MyAccount-navigation {
    grid-area: nav;
    width: 260px !important;
}

/* Conteúdo fica à direita do menu */
.woocommerce-account .woocommerce-MyAccount-content {
    grid-area: content;
    background: var(--be-white);
    padding: 50px;
    border-radius: var(--radius);
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);
    min-height: 500px;
}

/* --- BOTÃO "VOLTAR" (A SETINHA) --- */
.be-back-link {
    position: absolute;
    top: 30px;
    left: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--be-gray);
    font-weight: 600;
    font-size: 14px;
    background: white;
    padding: 8px 16px;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 9999;
}
.be-back-link:hover {
    color: var(--be-blue);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.woocommerce .be-back-link { display: none; }
body > .be-back-link { display: flex; }

/* === 3. MENU LATERAL === */
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-MyAccount-navigation ul li {
    margin-bottom: 8px;
    border: none !important;
}

.woocommerce-MyAccount-navigation ul li a {
    display: flex !important;
    align-items: center;
    padding: 14px 20px;
    color: var(--be-gray);
    text-decoration: none !important;
    border-radius: 12px;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.2s;
    background: transparent;
}

/* Hover com detalhe Amarelo */
.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: white;
    color: var(--be-blue);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-left: 4px solid var(--be-yellow);
}

/* Item Ativo com detalhe Azul */
.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: white;
    color: var(--be-blue);
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 71, 151, 0.1);
    border-left: 4px solid var(--be-blue);
}

/* Ícones do Menu */
.woocommerce-MyAccount-navigation ul li a::before {
    font-family: 'Material Symbols Outlined';
    margin-right: 12px;
    font-size: 22px;
}

.woocommerce-MyAccount-navigation-link--dashboard a::before { content: "dashboard"; }
.woocommerce-MyAccount-navigation-link--orders a::before { content: "receipt_long"; }
.woocommerce-MyAccount-navigation-link--edit-address a::before { content: "location_on"; }
.woocommerce-MyAccount-navigation-link--edit-account a::before { content: "person"; }
.woocommerce-MyAccount-navigation-link--payment-methods a::before { content: "account_balance_wallet"; }
.woocommerce-MyAccount-navigation-link--support a::before { content: "support_agent"; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "logout"; color: #ef4444; }

/* === 4. CABEÇALHO PERSONALIZADO (Topo do conteúdo geral) === */
.be-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.be-page-title h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--be-blue);
    margin: 0 0 5px 0;
    letter-spacing: -0.5px;
}

.be-welcome-text {
    color: var(--be-gray);
    margin: 0;
    font-size: 15px;
}

/* LOGO DA LOJA (Header direito) */
.be-brand-area {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 71, 151, 0.05);
    padding: 8px 16px;
    border-radius: 50px;
}

.brand-icon {
    color: var(--be-blue);
    font-size: 24px;
}

.brand-name {
    color: var(--be-blue);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === 5. FORMULÁRIOS & BOTÕES === */
.woocommerce-form-row {
    margin-bottom: 20px;
}

.woocommerce-form-row label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--be-text);
}

.woocommerce-Input {
    width: 100%;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #f9fafb;
    outline: none;
    transition: all 0.2s;
}

.woocommerce-Input:focus {
    border-color: var(--be-blue);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 71, 151, 0.1);
}

/* BOTÃO SALVAR (VERDE BRASIL) */
.woocommerce-Button.button {
    background-color: var(--be-green) !important;
    color: white !important;
    border: none !important;
    padding: 16px 32px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    float: right;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 156, 59, 0.3);
    transition: transform 0.2s;
}

.woocommerce-Button.button:hover {
    background-color: #008532 !important;
    transform: translateY(-2px);
}

/* === 6. BLOCO DE LOGIN SOCIAL (NEXTEND) === */
.be-social-login-wrapper {
    margin-bottom: 16px;
    padding: 14px 16px;
    background: #e5edff;
    border-radius: 8px;
}

.be-social-login-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--be-text);
}

.be-social-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 20px 0;
}

.be-social-divider span {
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.be-social-divider em {
    font-style: normal;
    font-size: 11px;
    color: var(--be-gray);
}

/* === 7. MOBILE === */
@media (max-width: 900px) {
    .woocommerce-account .woocommerce {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "nav"
            "content";
        row-gap: 20px;
        margin-top: 70px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100% !important;
    }

    .woocommerce-MyAccount-navigation ul {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 10px !important;
    }

    .woocommerce-MyAccount-navigation ul li {
        min-width: 120px;
        flex: 0 0 auto;
    }

    .woocommerce-MyAccount-navigation ul li a {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        font-size: 12px;
        padding: 10px;
    }

    .woocommerce-MyAccount-navigation ul li a::before {
        margin-right: 0;
        margin-bottom: 5px;
    }

    .woocommerce-MyAccount-content {
        padding: 25px;
    }

    .be-header-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .be-brand-area {
        width: 100%;
        justify-content: center;
    }

    .woocommerce-Button.button {
        width: 100% !important;
        margin-top: 10px;
    }

    .be-back-link {
        top: 20px;
        left: 20px;
    }
}



/* === Overrides V6.0 – Inputs mais modernos e botão azul institucional === */

/* Campos de formulário "gordinhos", estilo app moderno */
.woocommerce-Input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #fafafa;
    color: #333;
    font-size: 15px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.woocommerce-Input:focus {
    border-color: var(--be-blue);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 71, 151, 0.15);
}

/* Botão principal (Salvar) em azul institucional */
.woocommerce-Button.button {
    background-color: var(--be-blue) !important;
    color: #fff !important;
    border: none !important;
    padding: 0 32px !important;
    height: 50px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    float: right;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 71, 151, 0.3);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    margin-top: 10px;
}

.woocommerce-Button.button:hover {
    background-color: #003366 !important;
    box-shadow: 0 6px 20px rgba(0, 71, 151, 0.35);
    transform: translateY(-2px);
}

/* ===== Ajustes das ações de pedidos ===== */
.woocommerce-account .woocommerce-orders-table__cell-order-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    border: none !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

/* Botão Pagar (Verde) */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.pay {
    background-color: #059669;
    color: white !important;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.pay:hover {
    background-color: #047857;
}

/* Botão Visualizar (Azul Claro) */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view {
    background-color: #e5f0ff;
    color: #004797 !important;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view:hover {
    background-color: #d3e6ff;
    color: #00316b !important;
}

/* Botão Cancelar (Vermelho Claro) */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.cancel {
    background-color: #fee2e2;
    color: #b91c1c !important;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.cancel:hover {
    background-color: #fecaca;
    color: #991b1b !important;
}

/* Mobile adaptation for action buttons */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-orders-table__cell-order-actions {
        align-items: stretch;
    }
    .woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
        width: 100%;
    }
}

/* ===== Ajustes responsivos adicionais ===== */
@media (max-width: 900px) {
    .woocommerce-account .woocommerce {
        display: block !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100% !important;
        margin-bottom: 20px;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        min-height: unset;
    }
}