@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;800&family=Raleway:wght@100;300;400;500;600;800&display=swap');
/*
primary - azul electrico: #2431D3
secondary - verde-lima: #D4DE35
third - nuevo naranja: #FE6205
gris topo : #3C3C3B
*/


/* TODO limpiar todo este archivo:
  - dejar solo los selectores y propiedades que customizan el catalogo 
  - todo lo que sea estilos generales y estructurales moverlos a index.scss o archivos que correspondan
  - actualizar luego en ym.dev-youmarket.css, ym.testyoumarket.css y ym.youmarket.css
  - avisar a julia para que utilice la nueva version como base para estilos de futuros catalogos
*/

:root {
    /* FONTS */
    --main-font: "Poppins", sans-serif;
    /* COLOR PALETTE - replace values with client's color palette */
    --color-primary: #2431D3; 
    --color-primary-lighten: #FF9900;
    --color-primary-darken: #303030;
    --color-primary-contrast-text: #FFFFFF;
    --color-secondary: #D4DE35; 
    --color-secondary-lighten: #ff990096;
    --color-secondary-contrast-text: #303030;
    --color-tertiary: #FE6205;
    --color-tertiary-lighten: #FF9900;
    --color-tertiary-darken: #303030; /* A11y ok with color-light */
    --color-tertiary-contrast-text: #FFFFFF;
    --color-complementary: #666;
    --color-complementary-darken: #303030; /* A11y ok with color-light */
    --color-complementary-contrast-text: #ffffff;
    --color-light: #FFFFFF;
    --color-dark: #060606;
    --color-neutral-1: #1A1A1A;
    --color-neutral-2: #989898;
    --color-neutral-3: #fafafa;
    --color-neutral-4: #E9E9E9;
    --color-neutral-5: #F4F5F5; 
    --color-neutral-1-translucid: rgba(60, 60, 59, 0.9);
    --color-neutral-5-translucid: rgba(244, 245, 245, 0.95);
    --gradient-primary: linear-gradient(#666666, #5e5e5e);
    /* BACKGROUNDS & TEXT COLOR - replace values with color variables */
    --default-text-color: var(--color-neutral-1);
    --featured-categories-bg: var(--color-light);
    --featured-category-text-color: var(--color-neutral-1); 
    --featured-products-bg: var(--color-primary);
    --featured-products-text-color: var(--color-primary-contrast-text);
    /* TOPBAR */
    --topbar-bg-color: var(--color-primary);
    --topbar-text-color: var(--color-primary-contrast-text); 
    /* NAVBAR */
    --navbar-bg-color:var(--color-tertiary);
    --navbar-text-color: var(--color-tertiary-contrast-text);
    /* BANNERS - replace values with color variables or images */
    --userinfo-banner-bg: var(--gradient-primary); 
    --mymovements-banner-bg: var(--gradient-primary); 
    --myproducts-banner-bg: var(--gradient-primary);  
    --myvouchers-banner-bg: var(--gradient-primary); 
    --cart-banner-bg: var(--gradient-primary);  
    --header-section-bg: var(--gradient-primary);
    /* FOOTER */
    --footer-bg-color: var(--color-neutral-5);
    --footer-text-color: var(--color-neutral-1);
    --footer-text-hover-color: var(--color-primary);
    /* CHIPS */
	--color-chip-discount: #004853;
}

body {
    font-family: var(--main-font);
    color: var(--default-text-color);
}

/* TOPBAR */
.app-full-topbar {
    background-color: var(--topbar-bg-color);
    color: var(--topbar-text-color);
}

.profile-menu-header-container {
    background-color: var(--color-secondary);
    color: var(--color-secondary-contrast-text);
}

/* Custom catalog logo */
.catalog-logo {
    background-image: url(https://s3-us-west-2.amazonaws.com/ym2-static-repository-cl-prod/logo/75/catalog_logo.png);
}
/* NAVBAR */
.app-full-navbar {
    background: var(--navbar-bg-color);
    color: var(--navbar-text-color);
}

/* BANNERS */

.cart-banner {
    background: var(--cart-banner-bg);
}

.myproducts-banner {
    background: var(--myproducts-banner-bg);
}

.userinfo-banner {
    background: var(--userinfo-banner-bg);
}

.myvouchers-banner {
    background: var(--myvouchers-banner-bg);
}

.mymovements-banner {
    background: var(--mymovements-banner-bg);
}

.header-section {
    background: var(--header-section-bg);
}

/* BUTTONS */
/* WIP: button's styles and classes will be modified */
.common-button,
.btn-primary,
.item-action-button,
.item-action-button.MuiButtonBase-root,
.btn-new,
.btn-cards,
.bg-brand-1,
.bg-brand-2 {
    color:  var(--color-primary-contrast-text);
	background-color: var(--color-primary);
	font-size: 16px;
	max-height: 48px !important;
}
.common-button:hover,
.common-button:focus,
.common-button:active,
.common-button:active:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-cards:hover,
.btn-cards:focus,
.btn-cards:active,
.bg-brand-1:hover, 
.bg-brand-1:focus,
.bg-brand-1:active, 
.bg-brand-2:hover,
.bg-brand-2:focus,
.bg-brand-2:active {
    background-color: var(--color-primary-lighten);
    color: var(--color-primary-contrast-text);
}

/* buttons in featured products section */
.wrapper-featured-bg .item-action-button {
	background-color: var(--color-primary);
    color: var(--color-primary-contrast-text);
}
.wrapper-featured-bg .item-action-button:hover,
.item-action-button:focus {
    background-color: var(--color-primary-lighten) !important;
    color: var(--color-primary-primary-text) !important;
}

.wrapper-featured-bg .item-action-button:hover {
    background-color: var(--color-neutral-4);
}

/* FEATURED CATEGORIES */

.featured-category-title {
    color: var(--featured-category-text-color);
}

.featured-categories-container .featured-category-title:hover {
    color: var(--color-primary);
}

/* PRODUCTS */

.wrapper-featured-bg {
    background-color: var(--color-secondary);
    color: var(--secondary-contrast-text);
}

.wrapper-featured-bg .item-price {
    color: var(--color-dark);
}

/* Featured products slider dots */
.show-grid .slick-dots li {
    border: 1px solid var(--color-dark);
}

.show-grid .slick-dots li.slick-active button {
    background-color: var(--color-dark);
}

.MuiAvatar-root.item-icon-delivery {
    color: var(--color-primary-contrast-text);
    background-color: var(--color-primary);
}

.item-info {
    color: inherit;
}

.item-price {
    color: var(--color-dark);
}

/* PRODUCT DETAIL */
.item-detail-action .item-action-button.outlined {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
	font-size: 16px;
}

.item-discount div {
    border-color: var(--color-dark);
}

.item-discount div span {
    color: var(--color-dark);
}

/* CATEGORY RESULTS */

.subheader-feat-category .subheader-filtros button {
    border: 1px solid var(--color-primary);
    background-color: var(--color-light);
}

/* Material UI Overrides filter buttons */
.custom-MuiIconButton-root:hover {
    background-color: inherit;
    color: var(--color-primary);
}

.custom-ArrayForwardIcon {
    background-color: var(--color-neutral-1);
    color: var(--color-light)
}

.custom-ArrayForwardIcon:hover {
    background-color: var(--color-primary);
}

/* CONTACT US FAB */
#contact-us-fab {
    background-color: var(--color-primary-darken);
    color: var(--color-light);
}

/* FOOTER */
.footer-container {
    background-color: var(--footer-bg-color);
    color: var(--footer-text-color);
}

.footer-item:hover {
    color: var(--footer-text-hover-color);
}


/* AGREGADO  */

/* Agregado solo para colocarle linea y otro color al search-bar*/
.search-bar{border: 1px solid var(--color-neutral-2);
    color: var(--color-neutral-2);
}
/* Agregado en este caso hasta cargar la imagen por BO al catalogo de UAT*/
.topbar-logo{
	width: 155px;
	height: 70px;}
.home-banner {
    max-height: none;
}
/* Fin de este caso*/

/* Texto del boton iniciar sesion  */
.topbar-user-button.MuiButton-root {
	font-family: var(--main-font);
	letter-spacing: 0em;
}
.MuiFab-root {
	font-family: var(--main-font);
}
/* color de botones para elegir monto de la GC  */
.item-detail-virtualbutton button {
	background:  var(--color-secondary);
	color: var(--color-secondary-contrast-text);}
.item-detail-virtualbutton button:hover { 
	background: var(--color-primary-lighten);
}

/* Colores Loaders  */
#loader {
	background-color: var(--color-secondary);
}
#loader>div:first-child {
	border-top: 16px solid var(--color-dark);
}
#loaderMenu>div:first-child {
	border-top: 16px solid var(--color-dark);
}

/* Colores Base MuiBadge-badge  */
.cart-badge .MuiBadge-badge {
	background-color:  var(--color-secondary);
	color: var(--color-secondary-contrast-text);
}

.topbar-cart:focus, .topbar-cart:hover {
	-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
	filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
	color: inherit;}
.cart-badge:hover {color: inherit;
}
.contact-us-footer {
	background-color:  var(--color-secondary); 
	color: var(--color-secondary-contrast-text);
}

/* Colores Hover de Boton Canjear */
.item-action-button.MuiButtonBase-root:active, .item-action-button.MuiButtonBase-root:focus, .item-action-button.MuiButtonBase-root:hover, .item-action-button:active, .item-action-button:focus, .item-action-button:hover {
	background-color: var(--color-secondary-lighten);
    color: var(--color-secondary-contrast-text);
}

/* Para centrar el boton de Canjear */
.boxed-item .item-action{margin: auto;
}

/* color de botones por Default  */
.btn-default {
    color:  var(--color-secondary-contrast-text);
	background-color: var(--color-secondary);
	font-family: var(--main-font);
	text-transform: uppercase;
	height: 48px !important;
}
.btn-default:focus, .btn-default:hover{
	background-color: var(--color-secondary-lighten);
	color: var(--color-secondary-contrast-text);
}
.btn-scroll{
	color: var(--color-primary);
    background-color: var(--color-light);
	border: 1px solid var(--color-primary);
	font-weight: 500;
}
/* color de boton Confirmar Pedido Carrito */
#root .ym-button--success, .modal-dialog .ym-button--success {
    color:  var(--color-secondary-contrast-text);
	background-color: var(--color-secondary);
}
#root .ym-button--success:hover, .modal-dialog .ym-button--success:hover {
	background-color: var(--color-secondary-lighten);
    color: var(--color-primary-contrast-text);
}
@media (min-width: 769px) {
    .common-dialog-content {
        padding: 8px 24px 16px;
        margin-bottom: -12px;
    }
}
/* color de labels para formularios con texto muy pequeno */
label{
	color: var(--color-dark) !important;
}
/* color de labels para encabezados internos */
.header-productos label.control-label {
    color: var(--color-light) !important;
}
.header-movimientos label.control-label {
    color: var(--color-light) !important;
}


label.label-form-products {
    color: var(--color-light) !important;
}


.featured-categories-container .featured-category-icon-background{
	background-color: rgb(18 183 181 / 20%);
}
/* color de hover de las categorias de productos en el menu de categorias */
.subcategories-menu-list li .subcategories-item:hover {
    color: var(--color-tertiary);
}
/* color de hover de los items del FAB */
.MuiList-root.contact-us-list .contact-us-link:focus, .MuiList-root.contact-us-list .contact-us-link:hover
{
    color: var(--color-tertiary);
}
/* estilos para boton activar cuenta  */
.modal-footer .well button {
    height: 40px;
    margin-top: 0px !important;
}
.ymlite-modal-login-email {
    background-color: #ffffff!important;
}
.modal-content {
    background-color: #fff;
    border-radius: 16px;
}
.catalog-logo.ymlite-modal-title {
    max-width: 100px;
}
.modal-header h4 div.catalog-logo {
    max-width: 100px !important;
}
.modal-header {border-radius: 16px 16px 0px 0px;background-color: var(--color-primary)}
.modal-footer {border-radius: 0px 0px 16px 16px;}


button.btn.btn-sm.btn-link.btn-block {
    background-color: var(--color-primary-contrast-text);
    color: var(--color-secondary-darken);
    border: 1px solid var(--color-secondary);
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    margin-left: 5px;
}
button.btn.btn-sm.btn-link.btn-block:hover {
	background-color: var(--color-secondary);
    text-decoration: none;
}
#forgot-password-text {
    color: var(--default-text-color);
}
.catalog-logo.ymlite-modal-title {
    max-width: 100px;
}
.modal-header h4 div.catalog-logo {
    max-width: 100px !important;
}
/* ajusta la opacidad del boton cancelar en el agregado de una direccion, sino desaparece el boton */
.MuiButton-root:hover {
    background-color: rgba(0, 0, 0, 0.4);
}
.MuiInputLabel-animated {
    padding-left: 5px;
}

/* botones de Mis Datos */

.common-icon-button.outlined:focus, .common-icon-button.outlined:hover {
    background-color: var(--color-primary-lighten);
    color: var(--color-primary-contrast-text);
}
.common-dialog-actions .common-dialog-button {
	background-color: var(--color-primary);
    color: var(--color-primary-contrast-text);
}
.common-dialog-actions .common-dialog-button:hover {
    background-color: var(--color-primary-lighten);
    color: var(--color-primary-contrast-text);
}
.common-dialog-actions .common-dialog-button.cancel-button {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}
.common-dialog-actions .MuiButton-label {
    font-size: 16px;
}
.common-link:focus, .common-link:hover {
    color: var(--color-primary);
}
.common-button.outlined {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}
.carousel-indicators {
    display: none;
}