/*
 * Ajustes propios del sitio de Motel IGM sobre la plantilla Hoteler.
 * No editar los CSS de la plantilla (style.css, etc.): los cambios van aquí.
 */

/* Logo de IGM (wordmark transparente, más alto que el de la plantilla).
   Se limita el alto para que encaje en el header, el sticky, el menú móvil y el footer. */
.main-header .logo img,
.main-header .nav-logo img {
    width: auto;
    height: 58px;
}
.sticky-header .logo img {
    width: auto;
    height: 44px;
}
.main-footer .footer-widget .logo img {
    width: auto;
    height: 72px;
}

/* Preloader: usar la imagen de carga de Motel Chocolate en vez del favicon de la
   plantilla, y ocultar el texto "Loading" (la imagen ya trae el logo). */
.preloader:after {
    width: 240px;
    margin-left: -120px;
    margin-top: -52px;
    height: 105px;
    background-image: url(../images/loading.webp);
    background-size: contain;
}
.preloader:before {
    content: "";
}

/* Anclas del menú: compensar el alto del header sticky al saltar a una sección */
section[id] {
    scroll-margin-top: 90px;
}

/* Tarifas: la plantilla espera miniaturas de 80x80; recortar cualquier foto a ese tamaño */
.pricing-block-two .inner-box .thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

/* Precio "Consultar" en tarjetas de habitación y tarifas */
.room-service-block-one .price.consultar,
.pricing-block-two .title span.consultar {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Formulario de disponibilidad: usamos <select> nativos, pero la plantilla los ocultaba
   como una flechita (contenedor de 35px y select de 30px). Les damos ancho real para que
   se vea el valor elegido y no quede recortado. */
.checkout-form-section-two .checkout-form .checkout-field.select-field .chk-field {
    width: auto;
}
.checkout-form-section-two .checkout-form .checkout-field.select-field .chk-field select {
    width: auto;
    min-width: 72px;    /* que "HH:MM" se vea completo */
    max-width: 230px;
    padding-right: 24px; /* hueco para la flecha */
    background: transparent;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis;
}
/* Campo de fecha (no es select): ancho real para que quepa dd/mm/aaaa + la flecha */
.checkout-form-section-two .checkout-form .checkout-field:not(.select-field) .chk-field {
    width: auto;
    min-width: 108px;
}
.checkout-form-section-two .checkout-form .checkout-field:not(.select-field) .chk-field input {
    width: 100%;
    padding-right: 24px;
}
/* La flecha vuelve a la derecha del campo (el contenedor ya no mide 35px) */
.checkout-form-section-two .checkout-form .checkout-field .chk-field i {
    right: 4px;
}

/* Enlace discreto de acceso al panel en el footer */
.main-footer .acceso-personal {
    opacity: 0.6;
    font-size: 13px;
}
.main-footer .acceso-personal:hover {
    opacity: 1;
}

/* Botón flotante de WhatsApp */
.whatsapp-flotante {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 30px;
    line-height: 56px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}
.whatsapp-flotante:hover {
    color: #fff;
    transform: scale(1.08);
}

/* ===== Reserva en línea (plans/reservas_habitaciones.md, Fase 3) ===== */

/* Tarjetas de sucursal en la portada */
.room-service-block-one .motel-img-sucursal {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.room-service-block-one .price small {
    font-size: 0.6em;
}
.motel-sucursal-texto {
    margin: 10px 0 0;
}
.motel-sucursal-datos {
    margin: 12px 0 0;
}
.motel-sucursal-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}
.motel-como-llegar {
    font-weight: 500;
}

/* Contenedor blanco de formularios y datos */
.motel-panel {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.motel-etiqueta {
    display: block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.motel-reservar .form-control,
.motel-reservar .form-select {
    height: auto;
    min-height: 46px;
}
.motel-horario-texto {
    font-size: 15px;
}
.motel-nota {
    font-size: 13px;
    opacity: 0.8;
    margin: 12px 0;
}

/* Etiqueta de estado: verde disponible, rojo ocupada, gris mantenimiento, ámbar pendiente */
.motel-estado {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: #6c757d;
}
.motel-estado--disponible { background: #198754; }
.motel-estado--ocupada { background: #dc3545; }
.motel-estado--pendiente { background: #e0a800; }

/* Tarjeta de habitación en la grilla */
.motel-tarjeta {
    display: block;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.motel-tarjeta:hover {
    color: inherit;
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}
.motel-tarjeta__imagen {
    position: relative;
}
.motel-tarjeta__imagen img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #f1f1f1;
}
.motel-tarjeta__imagen .motel-estado {
    position: absolute;
    top: 12px;
    left: 12px;
}
.motel-habitacion[data-estado="ocupada"] .motel-tarjeta__imagen img,
.motel-habitacion[data-estado="mantenimiento"] .motel-tarjeta__imagen img {
    filter: grayscale(70%);
}
.motel-tarjeta__cuerpo {
    padding: 14px 16px 16px;
}
.motel-tarjeta__nombre {
    margin: 0 0 6px;
}
.motel-tarjeta__datos {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    opacity: 0.8;
}
.motel-tarjeta__precio {
    margin-top: 8px;
    font-weight: 700;
    color: var(--theme-color1, #c9a05b);
}
.motel-tarjeta__precio small {
    font-weight: 400;
    font-size: 0.75em;
}

/* Detalle: carrusel y características */
.motel-carrusel__imagen {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 8px;
    background: #f1f1f1;
}
.motel-caracteristicas {
    list-style: none;
    padding: 0;
    margin: 0;
}
.motel-caracteristicas li {
    padding: 4px 0;
}
.motel-caracteristicas li > i:first-child {
    width: 22px;
    opacity: 0.7;
}

/* Adicionales con botones − / + */
.motel-adicionales {
    list-style: none;
    padding: 0;
    margin: 0;
}
.motel-adicionales li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.motel-adicionales__nombre small {
    display: block;
    opacity: 0.7;
}
.motel-cantidad {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.motel-cantidad button {
    width: 34px;
    height: 34px;
    border: 0;
    background: #f5f5f5;
    font-size: 18px;
    line-height: 1;
}
.motel-cantidad input {
    width: 44px;
    height: 34px;
    border: 0;
    text-align: center;
    -moz-appearance: textfield;
}
.motel-cantidad input::-webkit-outer-spin-button,
.motel-cantidad input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Resumen de importes */
.motel-resumen {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.motel-resumen > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}
.motel-resumen__total {
    margin-top: 6px;
    padding-top: 8px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 20px;
    font-weight: 700;
}
.motel-reservar button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Comprobante */
.motel-comprobante {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px 16px;
    margin: 0;
}
.motel-comprobante dt {
    font-weight: 600;
}
.motel-comprobante dd {
    margin: 0;
}
.motel-btn-whatsapp {
    background-color: #25d366;
}

/* Campo trampa anti-bots: fuera de la vista pero no display:none (algunos bots lo detectan) */
.motel-trampa {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}