/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ===== Servifibal Sidebar Categories ===== */

.sf-product-cats-widget{
  border: 1px solid #e6e6e6;
  background: #fff;
}

.sf-cat-root{
  display: block;
}

/* ===== Item nivel 1 ===== */
.sf-cat-item{
  display: flex;
  align-items: center;
  gap: 12px; 
  border-bottom: 1px solid #efefef;
  padding: 18px 5px; /* más aire vertical */
  position: relative;
}

.sf-cat-item:last-child{
  border-bottom: 0;
}

/* ===== Icono categoría (45x45, transparente, borde azul) ===== */
.sf-cat-icon{
  width: 45px;
  height: 45px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid #2f6fad;
  flex: 0 0 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sf-cat-icon-img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* evita recortes */
  display: block;
  padding: 6px; /* aire interior */
}

.sf-cat-icon-fallback{
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: rgba(47,111,173,.15);
}

/* ===== Link categoría ===== */
.sf-cat-link{
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: #222;
  font-size: 13px;
  line-height: 1.3;
}

.sf-cat-link:hover{
  text-decoration: underline;
}

/* ===== Toggle desplegable (solo flecha azul) ===== */
.sf-cat-toggle{
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent !important;
  cursor: pointer;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sf-cat-toggle::before{
  content: none; /* sin círculo */
}

.sf-cat-toggle::after{
  content: "▾";
  font-size: 20px;
  line-height: 1;
  color: #2f6fad;
  display: block;
  transition: transform .2s ease;
}

/* Placeholder para categorías sin hijos */
.sf-cat-toggle--empty{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.sf-cat-toggle--empty::after{
  content: "";
}

/* ===== Subcategorías ===== */
.sf-subcats{
  display: none;
  width: 100%;
  padding: 10px 0 12px 0;
  border-top: 1px solid #efefef;
  margin-top: 10px;
}

.sf-cat-item.is-open{
  flex-wrap: wrap;
}

.sf-cat-item.is-open .sf-subcats{
  display: block;
}

/* Girar flecha al abrir */
.sf-cat-item.is-open > .sf-cat-toggle::after{
  transform: rotate(180deg);
}

/* ===== Links subcategoría ===== */
.sf-subcat-link{
  display: block;
  padding: 10px 12px 10px 69px; 
  /* 45 icon + gap + margen */
  text-decoration: none;
  color: #222;
  font-size: 13px;
}

.sf-subcat-link:hover{
  text-decoration: underline;
}
