/**
 * Estilos personalizados para la página de mi cuenta
 * Aplica los colores personalizados definidos en admin/customize-store.php
 */

/* Menú lateral activo y elementos destacados */
.dashboard-menu .nav-link.active,
.dashboard-menu .nav-link:hover,
.nav-link[data-itemid],
.review-customer,
.btn-small.d-block.view-detail {
    background-color: var(--button-background, #3BB77E) !important;
    color: var(--button-text-color, #FFFFFF) !important;
    border-color: var(--button-background, #3BB77E) !important;
}

/* Botones de acción principales */
.btn-fill-out,
.btn-small,
button[type="submit"],
input[type="submit"],
.btn-submit,
#btn-submit-review,
.btn-shop-now,
.btn-checkout,
.btn-cart-custom {
    background-color: var(--button-background, #3BB77E) !important;
    color: var(--button-text-color, #FFFFFF) !important;
    border-color: var(--button-background, #3BB77E) !important;
}

/* Hover de botones */
.btn-fill-out:hover,
.btn-small:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.btn-submit:hover,
#btn-submit-review:hover,
.btn-shop-now:hover,
.btn-checkout:hover,
.btn-cart-custom:hover,
.dashboard-menu .nav-link:hover,
.nav-link[data-itemid]:hover,
.review-customer:hover,
.btn-small.d-block.view-detail:hover {
    background-color: var(--hover-color, #30A56E) !important;
    color: var(--button-text-color, #FFFFFF) !important;
    border-color: var(--hover-color, #30A56E) !important;
}

/* Elementos de texto con color destacado */
.text-brand,
.required.text-brand,
.font-lg.fw-500.text-brand,
.font-lg.fw-700.text-brand,
.font-xl.fw-700.text-brand,
.font-xl.text-brand.fw-900,
.empty-price-total {
    color: var(--theme-color, #3BB77E) !important;
}

/* Elementos de menú lateral */
.dashboard-menu ul li a {
    color: var(--text-color, #253D4E);
}

/* Elemento activo del menú lateral */
.dashboard-menu ul li a.active {
    background-color: var(--button-background, #3BB77E);
    color: var(--button-text-color, #FFFFFF);
}

/* Fondo de elementos destacados en el menú lateral */
li a[href="#pedidos"].active,
li a[href="#account-detail"].active,
li a[href="#orders"].active,
li a[href="#coupons"].active,
li a[href="#change-password"].active {
    background-color: var(--button-background, #3BB77E) !important;
    color: var(--button-text-color, #FFFFFF) !important;
}

/* Elementos destacados en naranja en la página de mi cuenta */
.dashboard-menu ul li:nth-child(1) a.active,
.dashboard-menu ul li:nth-child(2) a.active,
.dashboard-menu ul li:nth-child(3) a.active,
.dashboard-menu ul li:nth-child(4) a.active {
    background-color: var(--button-background, #3BB77E) !important;
    color: var(--button-text-color, #FFFFFF) !important;
}

/* Específicamente para el botón naranja de pedidos */
.dashboard-menu ul li a[href="#pedidos"],
.dashboard-menu ul li a[href="#orders"] {
    color: var(--text-color, #253D4E);
}

/* Específicamente para el botón naranja de pedidos cuando está activo */
.dashboard-menu ul li a[href="#pedidos"].active,
.dashboard-menu ul li a[href="#orders"].active {
    background-color: var(--button-background, #3BB77E) !important;
    color: var(--button-text-color, #FFFFFF) !important;
}

/* Botón de valoración */
.review-customer,
.btn-small.d-block.view-detail {
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--button-background, #3BB77E) !important;
    color: var(--button-text-color, #FFFFFF) !important;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
    text-decoration: none;
}

/* Botón de valoración al pasar el ratón */
.review-customer:hover,
.btn-small.d-block.view-detail:hover {
    background-color: var(--hover-color, #30A56E) !important;
}

/* Botón de guardar en formularios */
button[type="submit"],
input[type="submit"],
.btn-fill-out.submit {
    background-color: var(--button-background, #3BB77E) !important;
    color: var(--button-text-color, #FFFFFF) !important;
    border-color: var(--button-background, #3BB77E) !important;
}

/* Botón de guardar en formularios al pasar el ratón */
button[type="submit"]:hover,
input[type="submit"]:hover,
.btn-fill-out.submit:hover {
    background-color: var(--hover-color, #30A56E) !important;
    color: var(--button-text-color, #FFFFFF) !important;
    border-color: var(--hover-color, #30A56E) !important;
}