/*
 * Detalle hotel premium — móvil (estándar + Brisa / Arena / Selva / Atardecer)
 */

@media (max-width: 767.98px) {
    body.page-detalle-premium {
        padding-top: 0 !important;
    }

    body.page-detalle-premium > main.dh-premium-main {
        padding-top: 4.25rem !important;
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    body.page-detalle-premium .dh-detail-hero {
        margin-bottom: 1.25rem;
        gap: 1rem;
    }

    body.page-detalle-premium.page-detalle_hotel .dh-detail-hero {
        padding: 1rem;
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(226, 232, 240, 0.9);
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
    }

    body.body-brisa-marina.page-detalle-premium .dh-detail-hero {
        background: rgba(240, 253, 250, 0.96);
        border-color: rgba(153, 246, 228, 0.7);
    }

    body.body-arena-luz.page-detalle-premium .dh-detail-hero {
        background: rgba(255, 252, 248, 0.96);
        border-color: #e8dfd4;
    }

    body.body-selva-esmeralda.page-detalle-premium .dh-detail-hero {
        background: rgba(248, 252, 250, 0.96);
        border-color: rgba(126, 162, 140, 0.45);
    }

    body.body-atardecer-caribe.page-detalle-premium .dh-detail-hero {
        background: rgba(255, 252, 245, 0.96);
        border-color: rgba(237, 229, 206, 0.9);
    }

    body.page-detalle-premium .dh-detail-hero nav {
        font-size: 0.625rem;
        margin-bottom: 0.5rem;
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    body.page-detalle-premium .dh-detail-hero h1 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em;
    }

    body.page-detalle-premium .dh-detail-hero .aloj-brisa-type-badge,
    body.page-detalle-premium .dh-detail-hero .aloj-arena-type-badge,
    body.page-detalle-premium .dh-detail-hero .aloj-selva-type-badge,
    body.page-detalle-premium .dh-detail-hero .aloj-atardecer-type-badge {
        margin-top: 0 !important;
        font-size: 0.5625rem;
    }

    /* Rating rows — wrap limpio */
    body.page-detalle-premium .aloj-brisa-rating-row,
    body.page-detalle-premium .aloj-arena-rating-row,
    body.page-detalle-premium .aloj-selva-rating-row,
    body.page-detalle-premium .aloj-atardecer-rating-row {
        flex-wrap: wrap;
        gap: 0.375rem 0.5rem;
        margin-bottom: 0.25rem;
    }

    body.page-detalle-premium .aloj-brisa-location,
    body.page-detalle-premium .aloj-arena-location-inline,
    body.page-detalle-premium .aloj-selva-location-inline,
    body.page-detalle-premium .aloj-atardecer-location-inline {
        flex: 1 1 100%;
        font-size: 0.8125rem !important;
        line-height: 1.35;
    }

    /* Acciones: social ancho completo + compartir/guardar en fila */
    body.page-detalle-premium .dh-detail-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        width: 100%;
    }

    body.page-detalle-premium .dh-detail-actions > * {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        width: 100%;
        min-height: 2.5rem;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8125rem !important;
        border-radius: 0.625rem !important;
        white-space: nowrap;
    }

    body.page-detalle-premium .dh-detail-actions > * .material-symbols-outlined {
        font-size: 1.125rem !important;
    }

    body.page-detalle-premium .dh-detail-actions > :nth-child(1):nth-last-child(3) {
        grid-column: 1 / -1;
    }

    /* Video */
    body.page-detalle-premium .dh-detail-video-wrap {
        border-radius: 0.75rem;
        overflow: hidden;
    }

    body.page-detalle-premium .dh-detail-video-wrap .aspect-video {
        border-radius: 0.75rem;
    }

    body.page-detalle-premium .dh-detail-video-wrap h3 {
        font-size: 1rem !important;
    }

    body.page-detalle-premium .dh-detail-video-wrap .pointer-events-none > div:last-child span {
        font-size: 0.5625rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    body.page-detalle-premium .aloj-brisa-pet-badge,
    body.page-detalle-premium .aloj-arena-premium-badge,
    body.page-detalle-premium .aloj-selva-premium-badge,
    body.page-detalle-premium .aloj-atardecer-premium-badge {
        top: 0.5rem !important;
        right: 0.5rem !important;
        max-width: calc(100% - 1rem);
        font-size: 0.5625rem !important;
    }

    /* Secciones */
    body.page-detalle-premium .dh-detail-section-title {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.25;
    }

    body.page-detalle-premium .dh-page-layout > .dh-detail-main {
        gap: 2rem;
    }

    body.page-detalle-premium .dh-page-layout > .dh-detail-main > section {
        margin: 0;
    }

    body.page-detalle-premium .dh-page-layout > .dh-detail-main.space-y-10 > * + * {
        margin-top: 2rem;
    }

    /* Galería 2 columnas en móvil */
    body.page-detalle-premium .dh-detail-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    body.page-detalle-premium .dh-detail-gallery > button.col-span-2 {
        height: 11rem;
        min-height: 11rem;
    }

    body.page-detalle-premium .dh-detail-gallery > button:not(.col-span-2) {
        height: 5.5rem;
        min-height: 5.5rem;
    }

    body.page-detalle-premium .dh-detail-gallery > button {
        border-radius: 0.625rem;
    }

    body.page-detalle-premium .dh-detail-gallery > button img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Amenities */
    body.page-detalle-premium .dh-detail-amenities {
        gap: 0.625rem;
    }

    body.page-detalle-premium .dh-detail-amenities > div {
        padding: 0.75rem 0.5rem !important;
    }

    body.page-detalle-premium .dh-detail-amenities .material-symbols-outlined {
        font-size: 1.75rem !important;
    }

    /* Ofertas */
    body.page-detalle-premium .dh-detail-oferta {
        flex-direction: column;
        gap: 0.75rem;
    }

    body.page-detalle-premium .dh-detail-oferta > div:first-child {
        width: 100%;
        height: 9rem;
    }

    /* Habitaciones */
    body.page-detalle-premium .room-card {
        flex-direction: column !important;
        gap: 0.875rem !important;
        padding: 0.875rem !important;
        border-radius: 0.875rem;
        overflow: hidden;
    }

    body.page-detalle-premium .room-card__media.room-carousel-wrap {
        width: 100%;
        height: 10.5rem;
        border-radius: 0.625rem;
        overflow: hidden;
        flex-shrink: 0;
    }

    body.page-detalle-premium .room-card__media.room-carousel-wrap .room-carousel {
        min-height: 100%;
        height: 100%;
        border-radius: inherit;
    }

    body.page-detalle-premium .room-card__content {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        min-width: 0;
        width: 100%;
    }

    body.page-detalle-premium .room-card__info {
        min-width: 0;
    }

    body.page-detalle-premium .room-card__info h4 {
        font-size: 1.0625rem !important;
        margin-bottom: 0.375rem !important;
        line-height: 1.25;
    }

    body.page-detalle-premium .room-card__meta {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    body.page-detalle-premium .room-card__desc {
        margin-top: 0.5rem;
        font-size: 0.75rem;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.page-detalle-premium .room-card__coins {
        margin-top: 0.5rem;
        font-size: 0.6875rem;
    }

    body.page-detalle-premium .room-card__pricing {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid #e8edf5;
        width: 100%;
    }

    body.page-detalle-premium .room-card__price-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
        min-width: 0;
    }

    body.page-detalle-premium .room-card__price-block .text-2xl {
        font-size: 1.375rem !important;
        line-height: 1.2;
        word-break: break-word;
    }

    body.page-detalle-premium .room-card .room-select-btn {
        width: 100%;
        margin-top: 0 !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        border-radius: 0.625rem !important;
    }

    /* Reseñas */
    body.page-detalle-premium .dh-detail-reviews-head {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }

    body.page-detalle-premium .dh-detail-reviews-head a {
        width: 100%;
        text-align: center;
        padding: 0.625rem 1rem !important;
    }

    body.page-detalle-premium .dh-detail-reviews-head .text-4xl {
        font-size: 2rem !important;
    }

    /* Sidebar reserva — sin sticky en móvil */
    body.page-detalle-premium .dh-detail-sidebar {
        position: static !important;
        top: auto !important;
    }

    body.page-detalle-premium .dh-detail-sidebar > div:first-child {
        padding: 1rem !important;
        border-radius: 1rem;
    }

    body.page-detalle-premium .dh-detail-sidebar .text-3xl {
        font-size: 1.75rem !important;
    }

    body.page-detalle-premium .dh-pay-split {
        height: 2.25rem;
    }

    body.page-detalle-premium .dh-pay-split__cash,
    body.page-detalle-premium .dh-pay-split__coins {
        font-size: 0.5625rem !important;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    body.page-detalle-premium .dh-detail-sidebar .p-4.rounded-xl.bg-primary-container {
        padding: 0.875rem !important;
        gap: 0.75rem;
    }

    body.page-detalle-premium .dh-detail-sidebar .h-56 {
        height: 12rem;
    }

    /* Footer móvil */
    body.page-detalle-premium footer.block.md\:hidden {
        padding: 2rem 1rem;
    }

    body.page-detalle-premium footer.block.md\:hidden .max-w-7xl {
        padding-left: 0;
        padding-right: 0;
        gap: 1.25rem;
    }

    body.page-detalle-premium footer.block.md\:hidden .max-w-7xl > div:last-child {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
    }

    /* Grid principal */
    body.page-detalle-premium .dh-page-layout.grid.grid-cols-12 {
        gap: 1.5rem;
    }

    /* Rating estándar (sin tema premium) */
    body.page-detalle-premium .dh-detail-hero .flex.flex-wrap.items-center.gap-3 {
        gap: 0.375rem 0.5rem;
    }

    body.page-detalle-premium .dh-detail-hero .flex.flex-wrap.items-center.gap-3 > span:last-child {
        flex: 1 1 100%;
        font-size: 0.8125rem;
    }
}

/* Escritorio: tarjetas habitación en fila con precio a la derecha */
@media (min-width: 768px) {
    body.page-detalle-premium .room-card__content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    body.page-detalle-premium .room-card__pricing {
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        border-top: none;
        padding-top: 0;
        flex-shrink: 0;
        min-width: 9rem;
    }

    body.page-detalle-premium .room-card__price-block {
        align-items: flex-end;
        text-align: right;
    }

    body.page-detalle-premium .room-card .room-select-btn {
        width: auto;
        min-width: 7rem;
    }
}