/**
 * Estilos para área de conta do usuário (My Account)
 * Design personalizado para o tema Ella
 */

/* Container principal */
.ella-account-sidebar {
    background: transparent;
    padding: 0;
    margin-bottom: 2rem;
}

/* Ocultar sidebar em dispositivos móveis */
@media (max-width: 991.98px) {
    .ella-account-sidebar {
        display: none !important;
    }
    
    /* Remover paddings e margens laterais em mobile */
    .container-fluid.py-5 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .container-fluid.py-5 .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }
    
    .container-fluid.py-5 .container .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Ajustar conteúdo principal para ocupar toda a largura em mobile */
    .ella-account-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Garantir que a coluna principal ocupe toda a largura */
    .col-lg-9.col-md-8.col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Ajustar padding interno do conteúdo em mobile */
    .ella-account-main {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Seção de boas-vindas */
.ella-account-welcome {
    text-align: left;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #FDB813;
}

.ella-account-avatar {
    margin-bottom: 1rem;
}

.ella-account-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #FDB813;
    box-shadow: 0 4px 12px rgba(253, 184, 19, 0.3);
}

.ella-account-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #022A60, #3660CB);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #fff;
    font-size: 2rem;
    box-shadow: 0 4px 12px rgba(2, 42, 96, 0.3);
}

.ella-account-welcome-title {
    color: #022A60;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.ella-account-welcome-subtitle {
    color: #6B6969;
    font-size: 0.95rem;
    margin: 0 0 1.5rem 0;
}

/* Botão Editar Conta na sidebar - removido conforme design */
.ella-edit-account-btn {
    display: none;
}

/* Navegação da conta */
.ella-account-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ella-account-nav-item {
    margin-bottom: 0.5rem;
}

.ella-account-nav-link {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    color: #6B6969;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
}

.ella-account-nav-link:hover {
    background-color: #f8f9fa;
    color: #022A60;
    text-decoration: none;
    transform: translateX(4px);
}

.ella-account-nav-link.active {
    background-color: #f8f9fa;
    color: #022A60;
}

.ella-account-nav-link.active:hover {
    transform: translateX(4px);
    color: #022A60;
}

.ella-account-nav-link.ella-account-nav-logout {
    color: #dc3545;
    border-top: 2px solid #FDB813;
    margin-top: 1rem;
    padding-top: 1.5rem;
}

.ella-account-nav-link.ella-account-nav-logout:hover {
    background-color: #f8d7da;
    color: #721c24;
}

/* Conteúdo principal */
.ella-account-content {
    background: transparent;
    padding: 0;
    min-height: 500px;
}

.ella-account-header {
    margin-bottom: 2rem;
    padding-bottom: 0;
    border-bottom: none;
}

.ella-account-title {
    color: #022A60;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.ella-account-title i {
    color: #FDB813;
    font-size: 1.2rem;
}

.ella-account-description {
    color: #6B6969;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Estilos para elementos do WooCommerce */
.woocommerce-MyAccount-content {
    padding: 0;
}

.woocommerce-MyAccount-content h2 {
    color: #022A60;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #FDB813;
}

.woocommerce-MyAccount-content h3 {
    color: #022A60;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Tabelas de pedidos */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.woocommerce-orders-table th {
    background: linear-gradient(135deg, #022A60, #3660CB);
    color: #fff;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.woocommerce-orders-table td {
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
    color: #6B6969;
}

.woocommerce-orders-table tr:hover {
    background-color: #f8f9fa;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
    color: #022A60;
    font-weight: 600;
    text-decoration: none;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover {
    color: #3660CB;
    text-decoration: underline;
}

/* Status dos pedidos */
.woocommerce-orders-table__cell-order-status .woocommerce-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.woocommerce-orders-table__cell-order-status .woocommerce-badge--completed {
    background-color: #d4edda;
    color: #155724;
}

.woocommerce-orders-table__cell-order-status .woocommerce-badge--processing {
    background-color: #d1ecf1;
    color: #0c5460;
}

.woocommerce-orders-table__cell-order-status .woocommerce-badge--pending {
    background-color: #fff3cd;
    color: #856404;
}

.woocommerce-orders-table__cell-order-status .woocommerce-badge--cancelled {
    background-color: #f8d7da;
    color: #721c24;
}

/* Botões de ação */
.woocommerce-orders-table__cell-order-actions .woocommerce-button {
    background: linear-gradient(135deg, #FDB813, #ffd666);
    color: #022A60;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.woocommerce-orders-table__cell-order-actions .woocommerce-button:hover {
    background: linear-gradient(135deg, #022A60, #3660CB);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(2, 42, 96, 0.3);
}

/* Formulários */
.woocommerce-form {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.woocommerce-form .form-row {
    margin-bottom: 1.5rem;
}

.woocommerce-form label {
    color: #022A60;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.woocommerce-form input[type="text"],
.woocommerce-form input[type="email"],
.woocommerce-form input[type="password"],
.woocommerce-form input[type="tel"],
.woocommerce-form select,
.woocommerce-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #fff;
}

.woocommerce-form input[type="text"]:focus,
.woocommerce-form input[type="email"]:focus,
.woocommerce-form input[type="password"]:focus,
.woocommerce-form input[type="tel"]:focus,
.woocommerce-form select:focus,
.woocommerce-form textarea:focus {
    border-color: #FDB813;
    outline: none;
    box-shadow: 0 0 0 3px rgba(253, 184, 19, 0.1);
}

.woocommerce-form .button {
    background: linear-gradient(135deg, #022A60, #3660CB);
    color: #fff;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 1rem;
}

.woocommerce-form .button:hover {
    background: linear-gradient(135deg, #FDB813, #ffd666);
    color: #022A60;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(253, 184, 19, 0.3);
}

/* Mensagens */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid;
}

.woocommerce-message {
    background-color: #d4edda;
    color: #155724;
    border-left-color: #28a745;
}

.woocommerce-error {
    background-color: #f8d7da;
    color: #721c24;
    border-left-color: #dc3545;
}

.woocommerce-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-left-color: #17a2b8;
}

/* Endereços */
.woocommerce-Address {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.woocommerce-Address h3 {
    color: #022A60;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.woocommerce-Address address {
    color: #6B6969;
    line-height: 1.6;
    font-style: normal;
}

/* Estilos para mensagens de sucesso/erro personalizadas */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.woocommerce-message {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
    border-left: 4px solid #28a745;
}

.woocommerce-error {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.woocommerce-info {
    background: linear-gradient(135deg, #d1ecf1, #bee5eb);
    color: #0c5460;
    border-left: 4px solid #17a2b8;
}

/* Estilos para botões personalizados */
.woocommerce-button,
.woocommerce-Button,
.button {
    background: linear-gradient(135deg, #022A60, #3660CB) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    display: inline-block !important;
}

/* Excluir botões Ella dos estilos genéricos */
.button.btn-ella-primary,
.button.btn-ella-secondary,
.btn.btn-ella-primary,
.btn.btn-ella-secondary,
.woocommerce-button.btn-ella-primary,
.woocommerce-button.btn-ella-secondary,
.woocommerce-Button.btn-ella-primary,
.woocommerce-Button.btn-ella-secondary {
    background: none !important;
    background-image: linear-gradient(-45deg, #022A60 50%, #FDB813 50%) !important;
    background-size: 250% 100% !important;
    background-position: left top !important;
    border: 1px solid #FDB813 !important;
    color: #022A60 !important;
    border-radius: 1.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    transform: none !important;
    box-shadow: none !important;
}

.button.btn-ella-secondary,
.btn.btn-ella-secondary,
.woocommerce-button.btn-ella-secondary,
.woocommerce-Button.btn-ella-secondary {
    background-image: linear-gradient(-45deg, #FDB813 50%, #022A60 50%) !important;
    border-color: #022A60 !important;
    color: #FDB813 !important;
}

.woocommerce-button:hover,
.woocommerce-Button:hover,
.button:hover {
    background: linear-gradient(135deg, #FDB813, #ffd666) !important;
    color: #022A60 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(253, 184, 19, 0.3) !important;
    text-decoration: none !important;
}

/* Hover específico para botões Ella */
.button.btn-ella-primary:hover,
.button.btn-ella-secondary:hover,
.btn.btn-ella-primary:hover,
.btn.btn-ella-secondary:hover,
.woocommerce-button.btn-ella-primary:hover,
.woocommerce-button.btn-ella-secondary:hover,
.woocommerce-Button.btn-ella-primary:hover,
.woocommerce-Button.btn-ella-secondary:hover {
    background: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.button.btn-ella-primary:hover,
.btn.btn-ella-primary:hover,
.woocommerce-button.btn-ella-primary:hover,
.woocommerce-Button.btn-ella-primary:hover {
    background-image: linear-gradient(-45deg, #022A60 50%, #FDB813 50%) !important;
    background-position: right bottom !important;
    border-color: #022A60 !important;
    color: #FDB813 !important;
}

.button.btn-ella-secondary:hover,
.btn.btn-ella-secondary:hover,
.woocommerce-button.btn-ella-secondary:hover,
.woocommerce-Button.btn-ella-secondary:hover {
    background-image: linear-gradient(-45deg, #FDB813 50%, #022A60 50%) !important;
    background-position: right bottom !important;
    border-color: #FDB813 !important;
    color: #022A60 !important;
}

/* Estilos para botões secundários */
.woocommerce-button--alt,
.button--alt {
    background: linear-gradient(135deg, #6c757d, #495057) !important;
    color: #fff !important;
}

.woocommerce-button--alt:hover,
.button--alt:hover {
    background: linear-gradient(135deg, #FDB813, #ffd666) !important;
    color: #022A60 !important;
}

/* Estilos para links de ação */
.woocommerce-MyAccount-downloads .woocommerce-Button,
.woocommerce-MyAccount-orders .woocommerce-Button {
    background: linear-gradient(135deg, #FDB813, #ffd666) !important;
    color: #022A60 !important;
}

.woocommerce-MyAccount-downloads .woocommerce-Button:hover,
.woocommerce-MyAccount-orders .woocommerce-Button:hover {
    background: linear-gradient(135deg, #022A60, #3660CB) !important;
    color: #fff !important;
}

/* Estilos para formulários de endereço */
.woocommerce-Address {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border: 1px solid #e9ecef;
}

.woocommerce-Address h3 {
    color: #022A60;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #FDB813;
}

.woocommerce-Address address {
    color: #6B6969;
    line-height: 1.6;
    font-style: normal;
    margin-bottom: 1rem;
}

.woocommerce-Address .edit {
    background: linear-gradient(135deg, #022A60, #3660CB) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 0.9rem !important;
}

.woocommerce-Address .edit:hover {
    background: linear-gradient(135deg, #FDB813, #ffd666) !important;
    color: #022A60 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(253, 184, 19, 0.3) !important;
    text-decoration: none !important;
}

/* Estilos para seção de downloads */
.woocommerce-MyAccount-downloads {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #e9ecef;
}

.woocommerce-MyAccount-downloads h2 {
    color: #022A60;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #FDB813;
}

.woocommerce-MyAccount-downloads .woocommerce-Message {
    background: #f8f9fa;
    color: #6B6969;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    margin-bottom: 1rem;
}

/* Responsividade */
@media (max-width: 768px) {
    .ella-account-sidebar {
        margin-bottom: 1rem;
        padding: 1.5rem;
    }
    
    .ella-account-content {
        padding: 1.5rem;
    }
    
    .ella-account-title {
        font-size: 1.5rem;
    }
    
    .woocommerce-orders-table {
        font-size: 0.85rem;
    }
    
    .woocommerce-orders-table th,
    .woocommerce-orders-table td {
        padding: 0.75rem 0.5rem;
    }
    
    .woocommerce-orders-table__cell-order-actions {
        text-align: center;
    }
    
    .woocommerce-Address {
        padding: 1rem;
    }
    
    .woocommerce-MyAccount-downloads {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .ella-account-nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    .woocommerce-orders-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .woocommerce-form {
        padding: 1rem;
    }
    
    .woocommerce-button,
    .woocommerce-Button,
    .button {
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
    }
}