/*

TemplateMo 559 Zay Shop

https://templatemo.com/tm-559-zay-shop

---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */

/* Typography */
body, ul, li, p, a, label, input, div {
  font-family: 'Roboto', sans-serif;
  font-size: 18px !important;
  font-weight: 300 !important;
}
.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 3.1vw; /* El tamaño de la fuente será el 5% del ancho de la ventana */
  font-weight: 600 !important;
}
.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 300;
}
.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
}

.p-10{
  padding: 15px 10px 8px 10px;
}

/* General */
.logo { font-weight: 500 !important;}
.logo img{
  max-width: 240px;
}

.text-warning {  color: #ede861 !important;}
.text-muted { color: #EEEEEE !important;}
.text-success { color: #232645 !important;}
.text-light { color: white !important;}
.bg-dark { background-color: #232645 !important;}
.bg-light { background-color: #EFEFEF !important;}
.bg-pink { background-color: #FFC29A !important;}
.bg-black { background-color: #1d242d !important;}
.bg-success { background-color: #59ab6e !important;}

.btn-pink {
  background-color: #FFC29A !important;
  border-color: #FFC29A !important;
}
.btn-whatsapp {
  background-color: #59ab6e !important;
  border-color: #59ab6e !important;
  color: white;
  margin-top: 5px;
}
.btn-success-line {
  background-color: white !important;
  border-color: #232645 !important;
}
.bb-line{
  border-bottom: solid;
  border-width: 1px;
  border-color: lightgray;
}

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}


/* Nav */

.nav-background{
  background: #232645; 
  z-index:1000; position: 
  fixed; 
  width: 100%;
}
#templatemo_nav_top { min-height: 40px;}
#templatemo_nav_top * { font-size: .9em !important;}
#templatemo_main_nav a { color: white; }
#templatemo_main_nav a:hover { color: #ECBA1D;}
#templatemo_main_nav a:hover i { color: #ECBA1D;}
#templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}

.btn-final{
  border: solid; 
  border-width: 1px; 
  border-color: white; 
  border-radius: 10px;
}

.btn-final:hover{
  background-color: #00021D;
  border-color: #00021D;
}

/* Hero Carousel */
#template-mo-zay-hero-carousel { background: #efefef !important;}
/* Accordion */
.templatemo-accordion a { color: #000;}
.templatemo-accordion a:hover { color: #333d4a;}
/* Shop */
.shop-top-menu li{
  color: black;
  padding: 7px 15px;
  cursor: pointer;
}
.shop-top-menu li:hover { 
  background-color: #232645 !important;
  color: white;
}
.shop-top-menu .active { 
  background-color: #3D4276 !important;
  color: white;
}
.shop-top-menu li:last-child {
  border-bottom: none;
}

/* Product */
.product-wap { max-width: 250px}
.product-wap .product-color-dot.color-dot-red { background:#f71515;}
.product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
.product-wap .product-color-dot.color-dot-black { background:#000000;}
.product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
.product-wap .product-color-dot.color-dot-green { background:#0bff7e;}
.card.product-wap .card .product-overlay {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap img { 
  object-fit: cover;
}
.card.product-wap a { color: #000;}
#carousel-related-product .slick-slide:focus { outline: none !important;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #232645;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #232645 !important;
  font-size: 2.8em !important;
}
/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}
/* Services */
.services-icon-wap {transition: .3s;}
.services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
.services-icon-wap:hover {background: #69bb7e;}
/* Contact map */
.leaflet-control a, .leaflet-control { font-size: 10px !important;}
.form-control { border: 1px solid #e8e8e8;}
/* Footer */
#tempaltemo_footer a { color: #dcdde1;}
#tempaltemo_footer a:hover { color: #ECBA1D;}
#tempaltemo_footer ul.footer-link-list li { padding-top: 12px;}
#tempaltemo_footer ul.footer-icons li {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
#tempaltemo_footer ul.footer-icons li i{
  color: white;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
}
#tempaltemo_footer .border-light { border-color: #2d343f !important;}
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
.product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
  font-size: 12px !important;
}
.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { font-size: 1em !important;}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 550px;}
  #template-mo-zay-hero-carousel .carousel-item {min-height: 30rem !important;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}

label {
  display: flex;
  padding: 5px 0;
  font-size: 20px;
  cursor: pointer;
}

input[type="radio"] {
  opacity: 0;
}

.p-val {
  display: -webkit-box;        /* Habilita la propiedad line-clamp */
  -webkit-box-orient: vertical; /* Configura la dirección del texto */
  -webkit-line-clamp: 2;       /* Número máximo de líneas antes del corte */
  overflow: hidden;            /* Oculta el texto que no cabe */
  text-overflow: ellipsis;     /* Agrega puntos suspensivos (...) */
  max-width: 100%;             /* Evita que el contenedor se expanda */
}

.value {
  position: relative;
  display: flex;
  align-items: center;
  padding: 5px 20px 5px 40px;
  border-radius: 20px;
}

.value:hover {
  background: #E9EAF3;
}

.value::before {
  content: "";
  position: absolute;
  left: 15px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dadada;
  outline: 0px solid #232645;
  transition: 0.4s;
}

input[type="radio"]:checked~.value {
  color: #232645;
  border-width: 5px;
  background: #E9EAF3;
  transition: 0.4s;
}

input[type="radio"]:checked~.value::before {
  outline-width: 5px;
  background: #fff;
}

input[type="checkbox"] {
  /* ...existing styles */
  display: grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
}

input[type="checkbox"]::before {
  /* ...existing styles */

  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.main-header-item {
  position: relative;
}

.main-header-item img{
  width: 100%; 
  height: auto; 
  min-height: 200px;
  object-fit: cover;
}

.main-header-caption {
  position: absolute;
  top: 50%; /* Centra verticalmente */
  left: 20px; /* Alinea a la izquierda */
  transform: translateY(-50%); /* Ajusta el centro vertical */
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* Sombra para mejorar la legibilidad */
}

.main-header-caption h1 {
  font-size: 4rem;
  font-weight: bold;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7);
}

.main-header-caption p {
  font-size: 1.25rem;
  font-style: bold;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.login-form{
  background-color: #F5F5F5;
  padding: 60px 0px;
}

.simple-form{
  background-color: #F5F5F5;
  padding: 60px 0px;
}

#menuflotante {
    position: fixed;
    z-index: 9000;
    width: 240px;
    display: none;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    padding: 20px;
    right: 95px;
    top: 70px;
}

#menuflotante a {
    color: #000;
    text-decoration: none;
}

#menuflotante a:hover {
    color: #C79C11;
    cursor: pointer;
}

#btnsesion {
    position: relative;
}

#btnsesion img {
    cursor: pointer;
}

#btnsesion:hover + #menuflotante {
    display: block;
}

.login-form .form-shadow{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#listacategorias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.categoria-main{
  width: 50%; 
  max-width: 250px; 
  margin-bottom: 15px;
}

.categoria-main a {
  color: black;
  text-decoration: none;
  display: inline-block;
}

.categoria-main a:hover .back-categoria-main {
  transform: scale(1.1); /* Escala el contenedor ligeramente */
}

.categoria-main .back-categoria-main {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid;
  border-color: gray;
  border-width: 1px;
  width: 170px;
  height: 150px;
  margin-top: 30px;
  padding: 0px 10px 10px 10px;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
  background: linear-gradient(to bottom, whitesmoke, lightgray);
  transition: transform 0.2s ease-in-out;
}

.cart-item {
  width: 100%;
  padding: 10px;
}

.cart-item img {
    width: 100%;
    min-width: 100px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.cart-item .btn-light-rounded{
  text-decoration: none;
  color: black;
  background-color: whitesmoke;
  padding: 3px 10px 5px 10px;
  border-radius: 15px;
}

.cart-item .ml{
  margin-left: 15px;
}

.responsive-button{
  display: none;
  position: fixed; 
  bottom: 78px; 
  height: 140px;
  width: 100%; 
  z-index: 999; 
  padding: 10px; 
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
}

.responsive-button-2{
  display: none;
  position: fixed; 
  bottom: 78px; 
  height: 110px;
  width: 100%; 
  z-index: 999; 
  padding: 10px; 
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
}

.responsive-button-min{
  display: none;
  position: fixed; 
  bottom: 78px; 
  height: 70px;
  width: 100%; 
  z-index: 999; 
  padding: 15px 10px; 
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
}

.title {
    text-decoration: none;
    color: #333;
}

.title:hover {
    text-decoration: underline;
}

.text-end {
    text-align: right;
}

.btn-eliminar {
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

.select-container {
    position: relative;
}

.select-container select {
    width: 60px;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
}

.li-split{
  display: block;
  cursor: none;
}

.advertising{
  display: block;
  padding-left: 100px;
}

.search-bar{
  width: 100%;
  padding: 15px;
  padding-right: 75px;
  margin-top: 15px;
  position: fixed;
  background-color: white;
  border-bottom: solid;
  border-width: 1px;
  border-color: lightgray;
  z-index: 999;
}

.mt-store{
  margin-top: 130px;
}

.item-card{
  min-width: 210px;
}

.price-text{
  margin: 10px 0px;
  padding: 10px;
  border-top: solid;
  border-width: 1px;
  border-color: lightgray;
}

.iva-text{
  font-weight: bolder;
  color: red;
}

.item-category{
  display: block;
  max-width: 250px;
}

.item-category-resp{
  display: none;
  padding-top: 15px;
}

.finalprice{
  font-weight: bold;
  color: #DD3333;
}

.article p{
  font-size: 10px;
}

.no-data-message {
    text-align: center;
    font-size: 18px;
    color: #777;
    padding: 20px;
    font-weight: bold;
}

#carritocompra{display: block}
#carritocompra2{display: none}

.responsive-item{
  display: none;
}

.non-responsive-item{
  display: block;
}

#collapsibleDiv {
  overflow: hidden;
  transition: height 0.4s ease;
}

.toggleButtonDelivery{
  padding: 5px;
}

.toggleButtonDelivery a{
  width: 100%;
}

.colUbicacion{
  padding: 5px;
}

.colUbicacion a{
  width: 100%;
}

/* Contenedor de los botones */
.menu-container {
  padding: 0;
  margin: 0;
  background-color: #f1f1f1;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: none;
}

.menu-container .menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  justify-content: space-around;
  align-items: center;
  background-color: #f1f1f1;
  width: 100%;
  height: 77px;
  display: flex;
  flex-direction: row; /* Mantener los botones en fila */
}

.menu-container .menu li {
  padding: 10px;
  margin: 0;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.menu-container .menu li i {
  font-size: 20px;
}

.menu-container .menu li span {
  font-size: 16px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  text-align: left;
  background-color: #f9f9f9;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.table thead {
  background-color: #6c757d; /* Gris oscuro */
  color: #ffffff;
}

.table th, .table td {
  padding: 12px 15px;
  border: 1px solid #ddd;
}

.table tbody tr {
  transition: background-color 0.2s ease-in-out;
}

.table tbody tr:nth-child(odd) {
  background-color: #f3f3f3;
}

.table tbody tr:hover {
  background-color: #e9ecef;
}

.table img {
  border-radius: 5px;
  display: block;
  margin: auto;
  width: 50px;
  height: auto;
}

.table-cart {
  width: 100%;
  text-align: left;
  background-color: #f9f9f9;
}

.table-cart thead {
  background-color: #6c757d; /* Gris oscuro */
  color: #ffffff;
}

.table-cart th, .table-cart td {
  padding: 12px 15px;
  border: 1px solid #ddd;
}

.table-resp {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}

.table-resp p{
  font-size: 17px;
  font-weight: bold;
}

.table-resp h2{
  font-size: 35px;
  font-weight: bold;
}

.table-resp th, .table-resp td {
  padding: 12px 10px 0px 15px;
}

.table-resp tbody tr {
  transition: background-color 0.2s ease-in-out;
}

.text-end {
  text-align: right;
}

#ListaCompra {
  overflow-x: auto; /* Habilita el desplazamiento horizontal */
  -webkit-overflow-scrolling: touch; /* Mejora el desplazamiento en dispositivos táctiles */
  max-width: 100%; /* Asegura que no se desborde el contenedor */
  padding-bottom: 10px; /* Espacio inferior para que no se corte el scroll */
}

/* Opcional: para dar formato a la tabla si se carga dentro de #ListaCompra */
#ListaCompra table {
  width: 100%;
  min-width: 800px; /* Asegura que la tabla tenga un mínimo de ancho */
}

@media (max-width: 768px) {

  .h1 {
    font-size: 30px !important;
  }

  #ListaCompraFinal {
    overflow-x: auto; /* Habilita el desplazamiento horizontal */
    -webkit-overflow-scrolling: touch; /* Mejora el desplazamiento en dispositivos táctiles */
    max-width: 100%; /* Asegura que no se desborde el contenedor */
    padding-bottom: 10px; /* Espacio inferior para que no se corte el scroll */
  }

  #desglose{
    display: none;
  }

  #sizediv{
    height: 77px;
  }

  #tempaltemo_footer{
    display: none;
  }

  .menu-container {
    display: block;
  }
  .menu-container .menu li {
    padding: 12px;
  }

  .toggleButtonDelivery{
    width: 33%;
  }

  .colUbicacion{
    width: 50%;
  }

  .first-div-inv{
    margin-bottom: 20px;
  }

  #menuflotante {
    right: 30px;
    top: 300px;
  }

  .responsive-item{
    display: block
  }

  .non-responsive-item{
    display: none;
  }

  .login-form{
    background-color: white;
  }

  .login-form .form-shadow{
    box-shadow: none;
  }

  .simple-form{
    background-color: white;
    padding: 20px 0px;
  }

  .logo img{
    max-width: 240px;
  }
  
  .cart-item img {
    width: 100%;
    margin: 0 auto;
  }

  .responsive-button{
    display: block;
  }
  .responsive-button-2{
    display: block;
  }
  .responsive-button-min{
    display: block;
  }

  #btnpago{
    display: none;
  }

  @keyframes slide-up {
    0% {
        bottom: -150px; /* Fuera de la vista */
        opacity: 0;
    }
    100% {
        bottom: 0px; /* Posición final */
        opacity: 1;
    }
  }

  .categoria-main .back-categoria-main {
    width: 100%;
    width: calc(50vw - 28px);
    margin-top: 10px;
  }

  .li-split {
    display: none;
  }

  .advertising{
    display: none;
  }

  .search-bar{
    padding-right: 15px;
  }

  .item-category{
    display: none;
  }

  .item-category-resp{
    display: block;
  }

  .mt-store{
    margin-top: 150px;
  }

  .item-card{
    min-width: 100px;
    width: 50%;
  }

  #carritocompra{display: none}
  #carritocompra2{display: block}

  .width-20{
    width: 34%;
  }
  .width-60{
    width: 66%;
  }
}