:root {
    --white: #fff;
    --black: #000;
    --gray: #6c757d;
    --dark: #343a40;
    --darkest: #1e2225;
    --lightest: #f8f9fa;
    --primary: #F45F31;
    --border-gray: 1px solid #dee2e6;
    --header-height: 56px;
    --menu-height: 48px;
    --download-app-height: 45px;
}

/* Bootstrap 4 utility classes */
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }

.align-items-center { align-items: center !important; }

.flex-grow-1 { flex-grow: 1 !important; }

.m-0 { margin: 0 !important; }
.ml-2 { margin-left: 16px !important; }
.mr-n1 { margin-right: -8px !important; }
.mr-n05 { margin-right: -4px !important; }

.px-0{ padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 8px !important; padding-right: 8px !important; }

/* Responsive utilities - Mobile first approach */
/* Por defecto en móvil, los d-md-* y d-lg-* están ocultos */
.d-md-flex,
.d-md-block,
.d-lg-flex { display: none !important; }

.position-relative{
    position: relative !important;
}

.font-size-20 {
    font-size: 20px !important;
}
.font-size-24 {
    font-size: 24px !important;
}

.gap-1 {
    gap: 8px !important;
}

/* En tablet (md) se muestran los d-md-* */
@media (min-width: 768px) {
    .d-md-flex { display: flex !important; }
    .d-md-block { display: block !important; }
    .px-md-2 { padding-left: 16px !important; padding-right: 16px !important; }
    /* Los d-lg-* siguen ocultos en tablet */
    .d-lg-flex { display: none !important; }
}

/* En desktop (lg) se muestran los d-lg-* */
@media (min-width: 992px) {
    .d-lg-flex { display: flex !important; }
}

/* d-block d-md-none: visible en móvil, oculto desde md */
@media (min-width: 768px) {
    .d-md-none { display: none !important; }
}

#header-wrapper .container-xl {
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1140px !important;
    width: auto !important;
}
#header-spacer{
    height: calc(var(--header-height) + var(--menu-height));
}
@media(max-width: 767px) {
    #header-spacer{
        height: var(--header-height);
    }
}
#header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    font-size: 14px;
    background: var(--white);
    border-bottom: var(--border-gray);
}
.header-component .header-height {
    height: var(--header-height);
    display: flex;
    align-items: center;
}
.header-component h1 {
    margin: 0;
    flex-shrink: 0;
    width: auto;
}
.header-component .col-xs-12 {
    margin-left: 10px;
}
.header-component h1.col-xs-12 {
    margin-left: 0;
}

/* Bootstrap 3 responsive utilities for hiding elements */
@media (max-width: 767px) {
    .header-component .hidden-xs {
        display: none !important;
    }
    .header-component .visible-xs {
        display: block !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .header-component .hidden-sm {
        display: none !important;
    }
    .header-component .visible-sm {
        display: block !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .header-component .hidden-md {
        display: none !important;
    }
}
@media (min-width: 1200px) {
    .header-component .hidden-lg {
        display: none !important;
    }
}
@media (min-width: 768px) {
    .header-component .visible-xs,
    .header-component .visible-sm {
        display: none !important;
    }
}

/* Mobile menu specific */
body.mobile-menu-open {
    overflow: hidden;
}
body.mobile-menu-open .hide-on-mobile-menu{
    display: none !important;
}

#header-wrapper .btn{
    padding: 0px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-gap: 4px;
    gap: 4px;
    min-height: 36px;
    height: auto;
    line-height: 13px;
}
#header-wrapper .text-gray:hover,
#header-wrapper .text-gray:focus{
    text-decoration: none;
    color: #757575;
}
#header-wrapper a,
#header-wrapper button {
    outline: none;
}
#header-wrapper .flag{
    width: 22px;
    height: 17px;
    background: none;
}

.desktop-menu-component > ul.list-unstyled {
    margin: 0;
    font-weight: 600;
    color: var(--gray);
    display: flex;
    margin-left: -24px;
    margin-right: -24px;
}
.desktop-menu-component li {
    display: block;
}
.desktop-menu-component li.active {
    color: var(--black);
}
.desktop-menu-component a {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 12px 24px;
    color: inherit;
    font-weight: inherit;
}
.desktop-menu-component a:focus {
    text-decoration: none;
}
.desktop-menu-component a:hover,
.desktop-menu-component a.active{
    color: var(--black);
    text-decoration: none;
}
.desktop-menu-component {
    box-shadow: 0 1600px 0 1540px rgba(0, 0, 0, 0);
    transition: box-shadow 0.3s linear;
    line-height: 24px;
}
.desktop-menu-component.shadowed {
    box-shadow: 0 1600px 0 1540px rgba(0, 0, 0, 0.50);
}

 .mobile-menu-component button {
     padding: 0 5px;
     font-size: 24px;
 }

.mobile-menu-component .menu {
    position: fixed;
    top: 97px;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 1004;
    transition: left 0.2s, height 0.2s;
    display: flex;
    flex-wrap: nowrap;
}

.mobile-menu-component .menu > * {
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--white);
}

.mobile-menu-component .menu.right {
    left: -100%;
}

.mobile-menu-component .option {
    border-bottom: var(--border-gray);
}

.mobile-menu-component .option > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    color: var(--gray);
    font-weight: 600;
}

.mobile-menu-component .option > a.active {
    color: var(--black);
}

.mobile-menu-component .option > a:hover {
    text-decoration: none;
}

.mobile-menu-component .flag {
    margin: -2px 6px 0 1px;
}

.mobile-menu-component .options > * {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: var(--border-gray);
}

.mobile-menu-component .options > *:last-child {
    border-bottom: none;
}

.mobile-menu-component .languages > * > i {
    margin-right: 8px;
    opacity: 0;
}

.mobile-menu-component .languages > *.current > i {
    opacity: 1;
}

.mobile-menu-component b,
.mobile-menu-component .current {
    font-weight: 600;
}

.mobile-menu-component .search-container {
    padding: 12px 15px;
    border-bottom: var(--border-gray);
}

.mobile-menu-component .option-selector {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: var(--border-gray);
    cursor: pointer;
}

.mobile-menu-component ul {
    margin-bottom: 15px;
}

.mobile-submenu-component .sticky {
    position: sticky;
    top: 0;
    background: var(--white);
}

.mobile-submenu-component li,
.mobile-submenu-component .option {
    border-bottom: var(--border-gray);
}

.mobile-submenu-component li > a,
.mobile-submenu-component .option > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    color: var(--gray);
    font-weight: 600;
}

.mobile-submenu-component li > a:hover,
.mobile-submenu-component .option > a:hover {
    text-decoration: none;
}

.mobile-submenu-component li > a {
    padding-left: 30px;
}

.mobile-submenu-component ul {
    margin: 0;
}

.main-search-component {
    position: relative;
    height: 36px;
    width: 100%;
}
.main-search-component .search-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    border-radius: 18px;
    border: 1px solid var(--lightest);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.main-search-component .input-wrapper {
    display: flex;
    align-items: center;
    justify-content: stretch;
    padding-left: 0px;
    padding-right: 0px;
    height: 34px;
    background-color: #EEEEEE;
}
.main-search-component input {
    padding: 0;
    border: none;
    background: transparent;
    outline: none;
    margin-left: -2px;
    flex-grow: 1;
}
.main-search-component input::placeholder {
    color: var(--gray);
}
.main-search-component .clear-icon {
    opacity: 0;
}
.main-search-component .search-wrapper.filled .input-wrapper {
    border-radius: 18px 18px 0 0;
}
.main-search-component .search-wrapper.filled {
    border-color: var(--primary);
    box-shadow: 0 8px 16px 0 rgba(30, 34, 37, 0.10);
}
.main-search-component .search-icon,
.main-search-component .clear-icon {
    font-size: 20px;
}
.main-search-component .search-wrapper.filled .search-icon {
    color: var(--primary);
}
.main-search-component .search-wrapper.filled .clear-icon {
    opacity: 1;
}
.main-search-component .results-wrapper {
    background-color: var(--white);
}
.main-search-component .results > * {
    padding: 6px 10px;
    display: flex;
    align-items: center;
    line-height: 14px;
}
.main-search-component .results img {
    width: 36px;
    height: 36px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.14);
    border-radius: 4px;
}
.main-search-component .results > *:hover,
.main-search-component .results > *.hover {
    background-color: var(--lightest);
    text-decoration: none;
}
.main-search-component .results > * > *:nth-child(2) {
    flex-grow: 1;
    padding: 0px 10px;
    color: var(--gray);
    max-height: 28px;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.main-search-component .results > *:hover > *:nth-child(2),
.main-search-component .results > *.hover > *:nth-child(2) {
    text-decoration: underline;
}
.main-search-component .results > * > *:last-child {
    font-size: 12px;
    font-weight: 100;
    color: var(--gray);
}
.main-search-component .results > *:hover > *:last-child,
.main-search-component .results > *.hover > *:last-child {
    color: var(--gray);
}
.main-search-component .show-all {
    display: flex;
    padding: 16px 24px;
    gap: 4px;
}
.main-search-component .show-all:hover {
    text-decoration: none;
}
.main-search-component .show-all.hover > span:first-child,
.main-search-component .show-all:hover > span:first-child {
    text-decoration: underline;
}
.main-search-component .results{
    max-height: calc(100vh - 220px);
    overflow: auto;
}


.desktop-submenu-wrapper {
    height: 0;
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: -100vw;
    right: -100vw;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    transition: height 0.25s linear;
    z-index: 1;
    border-top: var(--border-gray);
}
.desktop-submenu-wrapper.opened {
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    z-index: 2;
}
.desktop-submenu-wrapper2 {
    width: 1140px;
    margin: 0 -15px;
}
@media (max-width: 1158px) {
    .desktop-submenu-wrapper2 {
        width: calc(100vw - 12px);
        margin: 0 auto;
    }
}
.desktop-submenu-ul {
    max-height: 400px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0;
}
.desktop-submenu-ul li {
    flex: 0 0 auto;
    width: 25%;
}
@media (max-width: 1059px) {
    .desktop-submenu-ul li {
        width: 33.333%;
    }
}
@media (max-width: 767px) {
    .desktop-submenu-ul li {
        width: 50%;
    }
}
.desktop-submenu-ul li > a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: inherit;
    font-weight: inherit;
}
.desktop-submenu-ul li > a.active,
.desktop-submenu-ul li > a:hover {
    color: var(--black);
    text-decoration: none;
}
.desktop-submenu-wrapper a.more {
    display: inline-block;
    padding: 16px 15px 24px;
    margin-left: 16px;
    font-size: 16px;
    font-weight: 400;
    color: var(--primary);
}
.desktop-submenu-wrapper a.more:hover{
    text-decoration: underline;
    color: var(--primary);
}