/* Botón Cerrar del modal (botón superior derecho) */
.close:hover {
    color: white !important;
    text-decoration: none;
    opacity: .50 !important;
}

.btn {
    padding: 5px;
    width: calc(50% - 10px);
}

.has-feedback .smk-error-msg {
    position: inherit;
}

.scrollspy-locales {
    position: relative;
    height: 580px;
    margin-top: .5rem;
    overflow: auto;
}

.btn-location, btn-contact {
    white-space: inherit;
}

h2 {
    letter-spacing: 0px;
}

/* Carrusel - mayor visibilidad */
#formModal #carouselLocales {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 15px !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    min-height: 200px !important;
}

#formModal #carouselLocales .carousel-item > img,
#formModal #carouselLocales .carousel-item > video {
    max-height: 280px !important;
    width: 100% !important;
    margin: auto !important;
    object-fit: contain !important;
}

#formModal #carouselLocales .carousel-control-prev,
#formModal #carouselLocales .carousel-control-next {
    width: 40px !important;
    height: 40px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
}

#formModal #carouselLocales .carousel-control-prev:hover,
#formModal #carouselLocales .carousel-control-next:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

#formModal #carouselLocales .carousel-indicators {
    margin-bottom: 5px !important;
}

#formModal #carouselLocales .carousel-indicators li {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 5px !important;
    border: none !important;
}

#formModal #carouselLocales .carousel-indicators li.active {
    background-color: #fff !important;
}

/* ===== Fancybox Gallery - Estilos profesionales ===== */

/* Fondo más oscuro con blur */
.fancybox-is-open .fancybox-bg {
    opacity: 0.95 !important;
    background: #0a0a0a !important;
}

/* Barra de progreso más visible */
.fancybox-progress {
    background: #4d97fe !important;
    height: 3px !important;
}

/* Contador de slides */
.fancybox-infobar {
    font-size: 14px !important;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 0 0 8px 0 !important;
    padding: 0 14px !important;
    mix-blend-mode: normal !important;
}

/* Botones del toolbar */
.fancybox-toolbar .fancybox-button {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    margin: 4px 2px !important;
    color: #fff !important;
    transition: background 0.2s ease !important;
}

.fancybox-toolbar .fancybox-button:hover {
    background: rgba(77, 151, 254, 0.5) !important;
}

/* Flechas de navegación */
.fancybox-navigation .fancybox-button {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    top: calc(50% - 25px) !important;
    opacity: 1 !important;
    transition: background 0.2s ease !important;
}

.fancybox-navigation .fancybox-button:hover {
    background: rgba(77, 151, 254, 0.6) !important;
}

.fancybox-navigation .fancybox-button--arrow_left {
    left: 15px !important;
    padding: 10px !important;
}

.fancybox-navigation .fancybox-button--arrow_right {
    right: 15px !important;
    padding: 10px !important;
}

.fancybox-navigation .fancybox-button div {
    padding: 0 !important;
}

/* Thumbnails */
.fancybox-thumbs {
    background: rgba(0, 0, 0, 0.8) !important;
}

.fancybox-thumbs__list a:before {
    border-color: #4d97fe !important;
}

/* Video dentro de Fancybox */
.fancybox-video {
    border-radius: 4px !important;
}

/* Caption */
.fancybox-caption {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ===== Fin Fancybox Gallery ===== */

/* Start loading card*/
.bg-skeleton {
    border-radius: 5px;
    background: rgba(130, 130, 130, 0.2);
    background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.3)), color-stop(33%, rgba(130, 130, 130, 0.2)));
    background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
    background-size: auto;
    background-size: 800px 100px;
    animation: wave-squares 2s infinite ease-out;
}

@keyframes wave-lines {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}

@keyframes wave-squares {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}
/* End loading card*/