/*
Theme Name: DirCCMF Theme
Theme URI: http://local.directorio.ccmf.com.co/
Author: William Rodriguez
Author URI: http://local.directorio.ccmf.com.co/
Author Email: wrodriguez@onixdigital.co
Description: A custom WordPress for the DirCCMF project.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom, responsive, ACF Pro
*/

@import url("./base/index.css");
@import url("./componentes/loading.css");
@import url("./componentes/comercios/single-comercio.css");
@import url("./componentes/comercios/single.css");
@import url("./componentes/footer/footer.css");
@import url("./componentes/header/header.css");
@import url("./componentes/home/home.css");
@import url("./componentes/comercios/categorias/single_categoria.css");
@import url("./componentes/comercios/productos/single-productos.css");
@import url("./componentes/comercios/comercios.css");
@import url("./componentes/comercios/home.css");
@import url("./componentes/404.css");
@import url("./componentes/cookies.css");

.container {
  margin: auto;
  overflow: hidden;
}

.header {
  background: #333;
  color: #fff;
  padding: 10px 0;
}

.sidebar {
  background: #f4f4f4;
  padding: 15px;
}

.main-content {
  padding: 15px;
}

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background-color: #fff;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover,
.button:hover {
  background-color: #f9f9f9 !important;
  color: #d32f2f !important;
  border-color: #bbb !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

button svg,
.button svg {
  width: 25px;
  margin-left: 8px;
  fill: #c00 !important;
  transition: fill 0.3s ease !important;
}

button:hover svg,
.button:hover svg {
  fill: #900 !important;
  transform: scale(1.1);
  transition: fill 0.3s ease !important;
  transition: transform 0.3s ease !important;
}

/* ==============================
   Slider de categorías favoritas
   ============================== */

/* Contenedor general de Swiper */
.categories-favorites-swiper {
  max-width: var(--width-limit);
  margin: 3rem auto;
  overflow: visible;          /* Permite zoom sin recortes */
  -ms-overflow-style: none;   /* Oculta scroll en IE/Edge */
  scrollbar-width: none;      /* Oculta scroll en Firefox */
}
.categories-favorites-swiper::-webkit-scrollbar {
  display: none;              /* Oculta scroll en WebKit */
}

/* Wrapper de Swiper (slides) */
.categories-favorites-swiper .swiper-wrapper {
  overflow: visible;          /* Garantiza overflow visible */
}

/* Cada slide */
.categories-favorites-swiper .swiper-slide {
  text-align: center;
  flex-shrink: 0;
  width: calc((100% - (4 * 16px)) / 5); /* 5 items con 16px de espacio */
  overflow: visible;          /* Permite mostrar la ampliación */
  position: relative;         /* Necesario para z-index */
  padding: 1em 0;
}

/* Imagen redonda dentro del slide */
.categories-slider__img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-origin: center bottom;  /* Ancla el zoom al borde inferior */
}

/* Nombre de la categoría debajo de la imagen */
.categories-slider__name {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: #333;
}

/* Efecto hover: zoom y sombra */
.categories-favorites-swiper .swiper-slide:hover .categories-slider__img {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 10;                /* Eleva la imagen por encima */
}

/* Opcional: ajustes responsivos (menos slides en móvil) */
@media (max-width: 1200px) {
  .categories-favorites-swiper .swiper-slide {
    width: calc((100% - (2 * 16px)) / 3); /* 3 items con 16px de espacio */
  }
}
@media (max-width: 600px) {
  .categories-favorites-swiper .swiper-slide {
    width: calc(100% - 16px);             /* 1 item con margen */
  }
}