/* Widget WPBakery: Slider de Habitaciones */

.portblue-rooms-slider {
    position: relative;
}

/*
 * La librería (Owl Carousel 2, "us-owl") y su comportamiento en modo
 * centrado (clase "center_item", incluido el pequeño ajuste de posición
 * antes de que Owl termine de inicializar) ya vienen del propio tema
 * Impreza — aquí solo se estiliza el contenido de cada tarjeta.
 */
.portblue-rooms-slider__carousel .owl-stage-outer {
    overflow: visible;
}

.portblue-rooms-slider__card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    background-color: var(--color-content-bg, #fff);
    color: var(--color-content-text, inherit);
    transform: scale(.92);
    opacity: .55;
    transition: transform .4s ease, opacity .4s ease;
}

/* El elemento activo (centrado) se ve completo y a tamaño normal; los de
   los lados quedan más pequeños y atenuados, reforzando el efecto de
   "solo se ve la mitad" que ya aporta el stagePadding de Owl. */
.owl-item.center .portblue-rooms-slider__card {
    transform: scale(1);
    opacity: 1;
}

.portblue-rooms-slider__image {
    position: relative;
    flex: 0 0 auto;
    height: 280px;
    overflow: hidden;
    background-color: var(--color-content-bg-alt, #eee);
}

/*
 * Mini carousel de medios (vídeo + galería) dentro de la tarjeta. El PHP
 * solo añade "owl-carousel" cuando hay más de una diapositiva (ver
 * portblue-rooms-slider.php); con una sola, este mismo bloque se
 * comporta como un contenedor normal sin nada que inicializar en JS.
 */
.portblue-rooms-slider__media,
.portblue-rooms-slider__media-item {
    height: 100%;
}

/*
 * Cuando hay más de una diapositiva, Owl envuelve cada
 * ".portblue-rooms-slider__media-item" en ".owl-stage-outer > .owl-stage
 * > .owl-item" — ninguno de esos envoltorios hereda altura por defecto,
 * así que sin esto la imagen/vídeo no llegaría a llenar los 280px (u
 * otra altura configurada) del recuadro.
 */
.portblue-rooms-slider__media.owl-carousel,
.portblue-rooms-slider__media.owl-carousel .owl-stage-outer,
.portblue-rooms-slider__media.owl-carousel .owl-stage,
.portblue-rooms-slider__media.owl-carousel .owl-item {
    height: 100%;
}

.portblue-rooms-slider__media-item img,
.portblue-rooms-slider__media-item video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portblue-rooms-slider__video-embed {
    position: relative;
    width: 100%;
    height: 100%;
}

.portblue-rooms-slider__video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.portblue-rooms-slider__media.owl-carousel .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.portblue-rooms-slider__media.owl-carousel .owl-dot span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
}

.portblue-rooms-slider__media.owl-carousel .owl-dot.active span {
    background: #fff;
}

.portblue-rooms-slider__logo {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 2;
    max-width: 90px;
    opacity: .95;
}

.portblue-rooms-slider__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.portblue-rooms-slider__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 40px 40px;
}

.portblue-rooms-slider__title {
    margin: 0 0 8px;
    font-size: 26px;
    line-height: 1.3;
    color: var(--color-content-heading, inherit);
}

.portblue-rooms-slider__meta {
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--color-content-primary, inherit);
}

.portblue-rooms-slider__excerpt {
    margin: 0 0 20px;
    max-width: 46em;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-content-text, inherit);
    opacity: .85;
}

.portblue-rooms-slider__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/*
 * El aspecto base del botón (padding, radio, transición...) lo aporta la
 * clase "w-btn" del tema padre Impreza; aquí solo se fijan los colores
 * propios de cada variante, como aspecto por defecto de este widget
 * cuando el campo "Estilo del botón de..." se deja en "Por defecto del
 * tema" (sin él, el botón no lleva la clase "has_theme_style" y se aplican
 * estas reglas; con él, se excluyen con ":not()" para no competir con la
 * clase de estilo que aporta us_get_btn_class() — ver
 * portblue_render_rooms_slider_card() en portblue-rooms-slider.php).
 */
.portblue-rooms-slider__btn--booking:not(.has_theme_style) {
    background: var(--color-content-primary, #003DA7);
    color: #fff !important;
}

.portblue-rooms-slider__btn--detail:not(.has_theme_style) {
    background: transparent;
    border: 1px solid var(--color-content-border, rgba(0, 0, 0, .2));
    color: var(--color-content-text, inherit) !important;
}

.portblue-rooms-slider__btn--map:not(.has_theme_style) {
    background: var(--color-content-bg-alt, rgba(0, 0, 0, .06));
    color: var(--color-content-text, inherit) !important;
    border-radius: 9999px;
}

/*
 * Espaciado icono/etiqueta. El de reserva/detalle usan un único icono con
 * la clase "icon_atleft"/"icon_atright" del tema padre (que ya trae su
 * propio margen); el de mapa admite un icono a cada lado a la vez, así
 * que aquí se define el espaciado explícitamente con selectores de
 * hermano adyacente (solo se aplica si ese icono está presente).
 */
.portblue-rooms-slider__btn--map i + .w-btn-label {
    margin-left: 6px;
}

.portblue-rooms-slider__btn--map .w-btn-label + i {
    margin-left: 6px;
}

.portblue-rooms-slider__carousel .owl-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.portblue-rooms-slider__carousel .owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .2);
    transition: background .2s ease, transform .2s ease;
}

.portblue-rooms-slider__carousel .owl-dot.active span {
    background: var(--color-content-primary, #003DA7);
    transform: scale(1.2);
}

.portblue-rooms-slider__carousel .owl-nav .owl-prev,
.portblue-rooms-slider__carousel .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    font-size: 20px;
}

.portblue-rooms-slider__carousel .owl-nav .owl-prev {
    left: 12px;
}

.portblue-rooms-slider__carousel .owl-nav .owl-next {
    right: 12px;
}

@media (max-width: 767px) {
    .portblue-rooms-slider__content {
        padding: 24px 20px;
    }

    .portblue-rooms-slider__title {
        font-size: 20px;
    }
}