/* Categories block */
#categories_block_left {
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
}

#categories_block_left li {
    padding: 0;
    position: relative;
}

#categories_block_left li a {
    z-index: 102;
}

.language-selector ul li,
.language-selector ul li a,
.currency-selector ul li, 
.currency-selector ul li a {
    color: #000;
}

.tptn-vertical-mega-menu .menu {
    position: relative;
    /* Required */
    float: none;
}

.tptn-vertical-mega-menu .menu>li {
    border-bottom: 1px solid #e5e5e5;
}

.tptn-vertical-mega-menu>ul>li>ul {
    visibility: hidden;
    height: 0;
}

/* Hide menu while loading */
.tptn-vertical-mega-menu .menu li a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    text-transform: uppercase;
}

.tptn-vertical-mega-menu .menu li a:hover,
/*.tptn-vertical-mega-menu .menu > li.mega-hover > a {background:#f9f9f9;}*/
.tptn-vertical-mega-menu .menu li a.tptn-mega {
    position: relative;
    margin-right: -1px
}

.tptn-vertical-mega-menu .menu li a .tptn-mega-icon {
    color: #999;
    font-size: 16px;
    float: right;
    display: block;
}

.tptn-vertical-mega-menu .menu li .sub-container {
    background: #fff;
    box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.2);
    margin-top: 0 !important;
    position: absolute;
    top: 0;
    overflow: hidden;
    z-index: 101;
}

.tptn-vertical-mega-menu .menu li .sub-container .sub {
    padding: 20px 0 0 20px;
}

.tptn-vertical-mega-menu .menu li .sub .tptnrow {
    width: 100%;
    overflow: hidden;
}

.tptn-vertical-mega-menu .menu li .sub ul ul {
    display: none;
}

/* 4th level */
.tptn-vertical-mega-menu .menu li .sub li {
    width: 190px;
}

.tptn-vertical-mega-menu .menu li .sub li.mega-hdr {
    float: left;
    margin: 0 20px 30px 0;
}

.tptn-vertical-mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a {
    background: none;
    font-size: 16px;
    padding: 0 0 0 5px;
    margin-bottom: 10px;
}

.tptn-vertical-mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a:hover {
    color: #888;
}

.tptn-vertical-mega-menu .menu .sub li a {
    padding: 2px 5px;
    text-transform: none;
}

.tptn-vertical-mega-menu .menu .sub li a:hover {
    background: #f5f5f5;
}

.tptn-vertical-mega-menu .menu li .sub-container.non-mega .sub {
    padding: 15px;
}

/*
   -----------------------------------------------------------------------------------
   RED THEME

   Nuevo estilo para la tienda XtreenShop haciendo override del CSS principal del tema

   (c) juancarloscruz.es (2018)
   -----------------------------------------------------------------------------------
*/

/*
.tptn-vertical-mega-menu .menu li a:hover,
.tptn-vertical-mega-menu .menu > li.mega-hover > a { background: rgba(0, 0, 0, 0.65); }
.tptn-vertical-mega-menu .menu li a.tptn-mega {position: relative; margin-right: -1px}
.tptn-vertical-mega-menu .menu li a .tptn-mega-icon{
  color: #999;
  font-size: 16px;
  font-weight: 300;
  float:right;
  display: block;
}

#categories_block_left{
  border-left: 1px solid #050505;
  border-right: 1px solid #050505;
  background-color: rgba(86, 0, 0, 0.3);
}
.tptn-vertical-mega-menu .menu > li {border-bottom: 1px solid #050505;}
.tptn-vertical-mega-menu .menu li .sub-container {
  background: rgba(86, 0, 0, 0.97);
  margin-top: 0 !important;
  position: absolute;
  top:0;
  overflow: hidden;
  z-index:101;
  box-shadow: 0 5px 10px 3px rgba(0, 0, 0, 0.8);
}
.tptn-vertical-mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a:hover{color: #BCBCBC;}
.tptn-vertical-mega-menu .menu .sub li a:hover { background: rgba(0, 0, 0, 0.65); }
.sub li a {
  font-size:12px;
  line-height:24px;
  text-transform: uppercase !important;
}

.tptn-vertical-mega-menu .menu li .sub li {display:block; width:auto;}
.tptn-vertical-mega-menu .menu li .sub-container.non-mega .sub {padding: 0px;}
.sub-container.non-mega { width: auto !important; min-width: 250px; height: auto; }
.tptn-vertical-mega-menu .menu .sub li a {
  padding: 10px 20px;
  text-transform: none;
  border-bottom: 1px solid #000000;
}
*/

/*
   -----------------------------------------------------------------------------------
   SELFMADEGOD THEME

   Nuevo estilo para la tienda XtreenShop haciendo override del CSS principal del tema

   (c) juancarloscruz.es (2018)
   -----------------------------------------------------------------------------------
*/

.tptn-vertical-mega-menu {
    font-size: 13px;
    font-weight: 600;
}

.tptn-vertical-mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a:hover {
    color: #BCBCBC;
}

.tptn-vertical-mega-menu .menu .sub li a:hover {
    background-color: #f9f9f9;
}

.sub li a {
    font-size: 12px;
    line-height: 24px;
    text-transform: uppercase !important;
}

.tptn-vertical-mega-menu .menu li .sub li {
    display: block;
    width: auto;
}

.tptn-vertical-mega-menu .menu li .sub-container.non-mega .sub {
    padding: 0px;
}

.sub-container.non-mega {
    width: auto !important;
    min-width: 250px;
    height: auto;
}

.tptn-vertical-mega-menu .menu .sub li a {
    padding: 8px 20px;
    text-transform: none;
    border-bottom: 1px solid #eee;
}

/*
   -----------------------------------------------------------------------------------
   DROPDOWN MENU FUNCTIONALITY

   Estilos para la funcionalidad de menús desplegables con JavaScript vanilla
   Compatible con blockcategories.js
   -----------------------------------------------------------------------------------
*/

/* Ocultar submenús por defecto - Sobrescribir regla existente línea 26-29 */
.tptn-vertical-mega-menu > ul > li > ul {
    visibility: hidden;
    height: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 250px;
    background: #fff;
    box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Mostrar submenús cuando el item está abierto */
.tptn-vertical-mega-menu > ul > li.open > ul {
    visibility: visible;
    height: auto;
    opacity: 1;
    overflow: visible;
}

/* Indicador visual para items con submenú */
.tptn-vertical-mega-menu .menu > li.has-submenu > a::after {
    content: "\f105";
    font-family: "FontAwesome";
    font-size: 12px;
    color: #999;
    float: right;
    margin-left: 10px;
    transition: transform 0.2s ease;
}

/* Rotar indicador cuando el menú está abierto */
.tptn-vertical-mega-menu .menu > li.has-submenu.open > a::after {
    transform: rotate(90deg);
}

/* Asegurar que los submenús se posicionen correctamente */
.tptn-vertical-mega-menu .menu > li {
    position: relative;
}

/* Estilo hover mejorado para items con submenú */
.tptn-vertical-mega-menu .menu > li.has-submenu > a:hover {
    background-color: rgba(255,0,0,0.3) !important;
    cursor: pointer;
}

#header .dtmenu-title, #header .mobile-menu-title, #search_filters_wrapper .block-title, .crsl-title h2:before, .crsl-title h4:before {
    background-color: transparent!important;
}

/* Color blanco en hover para enlaces del menú principal */
.tptn-vertical-mega-menu .menu li a:hover {
    color: #fff;
}

/* Prevenir problemas de z-index */
.tptn-vertical-mega-menu .menu > li.open {
    z-index: 1000;
}

.tptn-vertical-mega-menu > ul > li > ul {
    box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.2);
    background-color: rgba(40, 0, 0, 1) !important;
}

.tptn-vertical-mega-menu > ul > li > ul > li {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    background-color: #250104;
    border-bottom: solid 1px #000;
}

.tptn-vertical-mega-menu > ul > li > ul > li:hover {
    background-color: #69020b;
}

/* Sidebar links (FORMATO block) - Aplicar mismos estilos de dropdown */
.sidebar-links > li {
    position: relative;
}

.sidebar-links > li > ul {
    visibility: hidden;
    height: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 250px;
    background-color: rgba(40, 0, 0, 1) !important;
    box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.sidebar-links > li.open > ul {
    visibility: visible;
    height: auto;
    opacity: 1;
    overflow: visible;
}

.sidebar-links > li > ul > li {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    background-color: #250104;
    border-bottom: solid 1px #000;
}

.sidebar-links > li > ul > li:hover {
    background-color: #69020b;
}

/* Estilos para los enlaces dentro de los submenús del sidebar */
.sidebar-links > li > ul > li > a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
}

.sidebar-links > li > ul > li > a:hover {
    color: #fff;
}

/* Color blanco en hover para enlaces del sidebar principal */
.sidebar-links > li > a:hover {
    color: #fff;
}

/* Indicador visual para sidebar items con submenú */
.sidebar-links > li.has-submenu > a::after {
    content: "\f105";
    font-family: "FontAwesome";
    font-size: 12px;
    color: #999;
    float: right;
    margin-left: 10px;
    transition: transform 0.2s ease;
}

.sidebar-links > li.has-submenu.open > a::after {
    transform: rotate(90deg);
}

/* Responsive: Mobile y Tablet */
@media (max-width: 991px) {
    /* En móvil, los submenús se despliegan verticalmente */
    .tptn-vertical-mega-menu .menu > li > ul {
        position: static;
        width: 100%;
        box-shadow: none;
        background-color: #f5f5f5;
    }

    .tptn-vertical-mega-menu .menu > li.open > ul {
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
    }

    /* Indentar submenús en móvil */
    .tptn-vertical-mega-menu .menu .sub li a {
        padding-left: 30px;
        background-color: #f5f5f5;
    }

    .tptn-vertical-mega-menu .menu .sub li a:hover {
        background-color: #ebebeb;
    }
}