/* 
   Premium Redesign for RoomCloud Booking Engine 
   Client: Piedra Paloma
   Design: High-End Minimalist with Glassmorphism
-------------------------------------------------------------------------------------------------*/

/* 1. IMPORT DM SANS FROM GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
    /* BRAND COLORS - Refined HSL for layering */

    --aptos-dark-green: #557E63;
    --aptos-light-green: #7CAC40;
    --aptos-lighter-green: #a2ccb0;

    /* CORE PALETTE */
    --dark-blu-color: var(--aptos-dark-green);
    --blu-color: var(--aptos-light-green);
    --light-blu-color: var(--aptos-lighter-green);

    --red-color: #9e1900;
    --black-color: #0f172a;
    --white-color: #ffffff;
    --grey-color: #f8fafc;
    --light-grey-color: #f1f5f9;
    --dark-grey-color: #94a3b8;

    --green-color: #10b981;
    /* Emerald for conversion */
    --rc-color: #005596;

    /* DEPTH & SURFACE */
    --background-color: #fdfdfd;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.4);

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-color: none;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
}

/* 2. GENERAL RESET & BASE */
body {
    color: var(--black-color);
    background-color: white !important;
    font-family: 'Archivo', Arial, Helvetica, sans-serif !important;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

span {
    font-family: 'Archivo', Arial, Helvetica, sans-serif !important;
}

/* Typography Overhaul */
h1,
h2,
h3,
h4,
h5,
.room-title,
.property-title {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    background-color: var(--aptos-dark-green);
    color: white !important;
    margin-bottom: 0.5em;
}

div.property-title {
    border: none !important;
    background-color: var(--aptos-dark-green);
    border-radius: var(--radius-lg) !important
}

span.property-title {
    color: white !important;
}

p {
    margin-bottom: 1.25rem;
    color: #475569;
}

/* 3. BUTTONS (Refined Gradients & Glow) */
.be-btn {
    text-transform: none !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--radius-sm) !important;
    padding: 10px 20px !important;
    box-shadow: none !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.be-btn:hover {
    box-shadow: var(--shadow-lg) !important;
}

.btn-one {
    background: linear-gradient(135deg, var(--aptos-light-green) 0%, var(--aptos-light-green) 100%) !important;
    color: white !important;
}

.btn-one:hover {
    background: linear-gradient(135deg, var(--aptos-lighter-green) 0%, var(--aptos-lighter-green) 100%) !important;
    color: white !important;
}

.btn-two {
    background: linear-gradient(135deg, var(--aptos-dark-green) 0%, var(--aptos-dark-green) 100%) !important;
    color: white !important;
    font-weight: 700;
}

.btn-two:hover {
    background: linear-gradient(135deg, var(--aptos-light-green) 0%, var(--aptos-light-green) 100%) !important;
    color: white !important;
}

.room_header_span_add {
    text-transform: capitalize !important;
}

.btn-plus,
.btn-less {
    border-color: var(--aptos-light-green) !important;
    border-radius: var(--radius-sm) !important;
}

/* CAMBIAR TEXTO A BOTÓN DE MÁS INFORMACIÓN */
.more-btn {
    font-size: 0 !important;
    gap: 10px !important;
    display: flex !important;
    width: fit-content !important;
}

.more-btn::before {
    content: "VER PRECIOS";
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: white !important;
}

.more-btn .fa {
    font-size: 12px !important;
    margin-left: 0 !important;
}


/* 4. CARDS & SECTIONS (Glassmorphism) */

#hotel_logo_div {
    margin: 30px 0px !important;
}

.room-row,
#summary-col,
#msg-tab,
#res-tab,
#instruction-tab,
#guest-tab,
#amount-tab {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
    padding: 24px !important;
    transition: transform 0.3s ease;
}

.room-info {
    background-color: transparent !important;
}

.room-info span {
    color: var(--aptos-dark-green) !important;
}

.room-number {
    color: var(--aptos-light-green) !important;
    font-family: 'Archivo', Arial, Helvetica, sans-serif !important;
}

.room-row:hover {
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

.room-title.readMoreSpan {
    background-color: transparent !important;
    color: var(--aptos-dark-green) !important;
}

.rate-col-desc {
    background: transparent !important;
    border-top: none !important;
    margin: -24px 0;
    padding: 20px 24px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.search-result-item {
    border-radius: var(--radius-lg) !important;
    margin: 0px 0px 20px 0px !important;
}

.search-result-gallery {
    border-radius: var(--radius-lg) !important;
}

table.property-address td {
    font-size: 14px !important;
    font-family: 'Archivo', Arial, Helvetica, sans-serif !important;
    vertical-align: top !important;
}

.map-open:hover {
    color: var(--aptos-light-green) !important;
    text-decoration: none !important;
    font-weight: normal !important;
    cursor: pointer;
}

#top_bar {
    border-radius: var(--radius-lg) !important;
}

#top_bar div {
    background-color: transparent !important;
}

.label-offer {
    background-color: white !important;
    color: var(--red-color) !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--red-color) !important;
}

.label_perc_discount {
    background-color: var(--red-color) !important;
    color: white !important;
    border-radius: var(--radius-sm) !important;
}

.label-room-quantity {
    color: var(--red-color) !important;
}

.label-room-quantity-desc {
    font-family: 'Archivo', Arial, Helvetica, sans-serif !important;
    color: var(--aptos-dark-green) !important;
    vertical-align: bottom !important;
    text-transform: capitalize !important;
    font-weight: normal !important;
}

.treatment-icon,
.treatment-icon::before,
.treatment-icon::after {
    color: var(--aptos-light-green) !important;
}

#rc_powered_inner {
    display: none !important;
}

.modal-title {
    color: var(--aptos-dark-green) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: bold !important;
}

#alert-div i::before {
    color: white !important;
}

.smaller {
    margin-right: 5px !important;
}

.room-hr {
    display: none !important;
}

/* 5. FORM INPUTS (Minimalist & Clean) */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    border-radius: var(--radius-sm) !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 14px !important;
    background: #ffffff !important;
    font-family: 'Archivo', Arial, Helvetica, sans-serif !important;
    font-size: 14px;
    transition: all 0.2s ease;
    width: 100%;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--aptos-light-green) !important;
    box-shadow: 0 0 0 4px hsla(208, 62%, 69%, 0.15) !important;
    outline: none !important;
}


/* 6. ROOMCLOUD INTERFACE TWEAKS */
.price-font,
.basket_total_span,
.span_total_prepaid {
    font-family: 'Archivo', Arial, Helvetica, sans-serif !important;
    color: var(--aptos-dark-green) !important;
    font-weight: bold !important;
    font-size: 2rem !important;
    letter-spacing: -0.02em;
}

.room-row .dx-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    /* Price at top, button at bottom */
    text-align: right !important;
    padding-right: 25px !important;
    min-height: 120px;
    /* Ensure there is space to separate them */
}

.room-row .best-price-div {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin-bottom: 0 !important;
    /* Removed margin as justify-content handles it */
}

.room-row .best-price-span {
    text-align: right !important;
    margin: 0 !important;
    width: 100% !important;
    white-space: nowrap !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: baseline !important;
    gap: 5px !important;
}

.room-row .room-available {
    /* Removed display: block !important to allow backend logic */
    text-align: right !important;
    margin: 8px 0 0 0 !important;
    width: 100% !important;
    font-weight: normal !important;
}

.room-available{
    background-color: transparent !important;
}

.room-row .more-btn-div {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.currency-font {
    font-size: 0.9rem;
    font-weight: 500;
    margin-left: 4px;
}

.changeCurrency:hover {
    color: var(--aptos-dark-green) !important;
    background-color: transparent !important;
}

.active_lang,
.active_curr {
    background-color: var(--aptos-dark-green) !important;
    color: white !important;
}

.lang_flag {
    border-radius: 3px;
    height: 15px;
    margin: 0px !important;
}

.lang_flag:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

.treatment_desc {
    color: var(--aptos-light-green) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
}

/* Navigation Steps */
.step-item {
    font-weight: 500;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.step-item.active {
    color: var(--aptos-dark-green) !important;
    font-weight: 700 !important;
    opacity: 1;
}

/* 7. IMAGES & VISUALS */
.product-first-img {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 !important;
    border: none !important;
}

.product-first-img:hover {
    transform: scale(1.03);
    box-shadow: none !important;
}

.product-col {
    padding-bottom: 14px;
    margin-top: 10px !important;
}

.product-col:hover {
    border-left: 2px solid var(--aptos-dark-green) !important;
}

.fa {
    color: var(--aptos-dark-green) !important;
}

.fa-bed {
    color: white !important;
}

.search-titles {
    color: var(--aptos-dark-green) !important;
}

.resume-dates-titles {
    color: var(--aptos-dark-green) !important;
}

.rate-title {
    color: var(--aptos-dark-green) !important;
}

.best-price-span {
    font-family: 'Archivo', Arial, Helvetica, sans-serif !important;
    color: var(--aptos-dark-green) !important;
}

.is-today {
    border: 1px solid var(--aptos-dark-green) !important;
}

.is-start-date,
.is-end-date {
    background-color: var(--aptos-light-green) !important;
    color: white !important;
    font-weight: 700 !important;
}

.is-in-range {
    background-color: var(--aptos-light-green) !important;
}

.input-group-addon {
    background-color: var(--aptos-light-green) !important;
}

.white-transparent {
    background-color: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: none !important;
}

.white-transparent.address-tab {
    border: none !important;
}

.fa-shopping-cart {
    color: white !important;
}

.fa-cart-plus::before {
    color: white !important;
}

.fa-sign-in,
.fa-sign-in::before,
.fa-sign-out,
.fa-sign-out::before {
    color: white !important;
}

/* 8. CALENDAR (Modernized) */
.daterangepicker {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-xl) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--aptos-dark-green) !important;
    border-radius: 8px !important;
}

.calendar-not-available {
    border-radius: 4px;
    opacity: 0.4;
    filter: grayscale(1);
}

.blu-icon {
    color: var(--aptos-dark-green) !important;
}

.fa-chevron-down,
.fa-chevron-up {
    color: white !important;
}

.property_calendar{
    display: none !important;
}

/* 9. FOOTER & EXTRAS */
#footer {
    padding: 60px 0;
    border-top: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 14px;
    text-align: center;
}

#floating_basket_footer_content {
    background: var(--aptos-light-green) !important;
    color: var(--aptos-dark-green) !important;
}

#floating_basket_footer_icon_div {
    background: var(--aptos-light-green) !important;
}


/* 10. CUSTOM HOME BUTTON */
/* Transforms the home link container into a premium clickable button */
.row.white-transparent.right-box {
    background-color: var(--grey-color) !important;
    border-radius: var(--radius-md) !important;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 12px !important;
    margin-bottom: 20px !important;
    display: block !important;
    overflow: hidden;
    cursor: pointer;
}

.row.white-transparent.right-box:hover {
    background-color: var(--light-grey-color) !important;
    box-shadow: none !important;
}

.row.white-transparent.right-box:active {
    transform: translateY(0);
}

#home_page {
    display: flex;
    justify-content: center;
    align-items: center;
}

#home_page span {
    display: flex;
    align-items: center;
    gap: 10px;
}

#home_page span::after {
    content: "Volver a www.croma-hotels.com";
    color: var(--aptos-light-green);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: normal !important;
}

#home_page a {
    color: white !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0 !important;
    /* Hides original text "Inicio" */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.02em;
}

.occupancy-center {
    color: var(--aptos-dark-green) !important;
    margin: 0px 0px 0px 24px !important;
}

.resume_span_container {
    color: var(--aptos-dark-green) !important;
}

/* Back Arrow Icon */
#home_page a::before {
    content: "";
    position: relative;
    z-index: 11;
    width: 18px;
    height: 18px;
    background-color: var(--aptos-light-green);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Expansion of the click area to cover the entire parent div */
#home_page a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

/* =====================================================================
   RESPONSIVE – Pantallas pequeñas (≤ 768 px)
   No se toca ningún valor del diseño de escritorio.
   ===================================================================== */
@media (max-width: 768px) {

    /* --- Tipografía base -------------------------------------------- */
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    h3 {
        font-size: 1.1rem !important;
    }

    /* --- Cards / secciones principales -------------------------------- */
    .room-row,
    #summary-col,
    #msg-tab,
    #res-tab,
    #instruction-tab,
    #guest-tab,
    #amount-tab {
        padding: 14px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: var(--radius-md) !important;
    }

    /* --- Columna de precio / botón dentro de la room-row -------------- */
    .room-row .dx-col {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
        padding-right: 0 !important;
        min-height: unset !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    .room-row .best-price-div {
        align-items: flex-start !important;
        flex: 1 1 auto;
    }

    .room-row .best-price-span {
        justify-content: flex-start !important;
        font-size: 1.4rem !important;
        flex-wrap: wrap;
    }

    .room-row .room-available {
        text-align: left !important;
        margin: 4px 0 0 0 !important;
        background-color: transparent !important;
    }

    .room-row .more-btn-div {
        justify-content: flex-start !important;
        width: auto !important;
        flex: 0 0 auto;
    }

    /* --- Precio grande ------------------------------------------------ */
    .price-font,
    .basket_total_span,
    .span_total_prepaid {
        font-size: 1.5rem !important;
    }

    /* --- Botones ------------------------------------------------------ */
    .be-btn {
        padding: 9px 14px !important;
        font-size: 13px;
        width: 100%;
        justify-content: center !important;
    }

    /* El botón "VER PRECIOS" no ocupa todo el ancho */
    .more-btn {
        width: auto !important;
    }

    /* --- Inputs y formularios ----------------------------------------- */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        padding: 11px !important;
        font-size: 14px;
    }

    /* --- Imagen de habitación ----------------------------------------- */
    .product-col {
        margin-top: 0 !important;
        padding-bottom: 10px;
    }

    .product-first-img {
        border-radius: var(--radius-md) !important;
        width: 100%;
        height: auto;
    }

    /* --- Galería de resultados ---------------------------------------- */
    .search-result-item {
        margin: 4px 0 12px 0 !important;
    }

    .search-result-gallery {
        border-radius: var(--radius-md) !important;
    }

    /* --- rate-col-desc ------------------------------------------------ */
    .rate-col-desc {
        margin: -14px 0 !important;
        padding: 14px !important;
    }

    /* --- Barra de inicio (home button) -------------------------------- */
    .row.white-transparent.right-box {
        padding: 10px !important;
        margin-bottom: 14px !important;
    }

    #home_page span::after {
        font-size: 13px !important;
    }

    /* --- Ocupación (adultos) ------------------------------------------ */
    .occupancy-center {
        margin: 0 0 0 10px !important;
    }

    /* --- Tabs de navegación de pasos ---------------------------------- */
    .step-item {
        font-size: 12px;
    }

    /* --- Dirección / tabla de contacto -------------------------------- */
    table.property-address td {
        font-size: 12px !important;
    }

    /* --- Calendario ---------------------------------------------------- */
    .daterangepicker {
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* --- Summary col en móvil (sidebar que baja al fondo) ------------- */
    #summary-col {
        margin-top: 16px !important;
    }

    /* --- Modal --------------------------------------------------------- */
    .modal-dialog {
        margin: 8px !important;
        width: auto !important;
    }

    /* --- Flag / idioma ------------------------------------------------- */
    .lang_flag {
        height: 13px;
    }
}

/* =====================================================================
   RESPONSIVE – Pantallas muy pequeñas (≤ 480 px)
   ===================================================================== */
@media (max-width: 480px) {

    body {
        font-size: 13px;
    }

    h1 {
        font-size: 1.3rem !important;
    }

    /* Precio aún más compacto */
    .price-font,
    .basket_total_span,
    .span_total_prepaid {
        font-size: 1.3rem !important;
    }

    /* Cards con menos padding */
    .room-row,
    #summary-col,
    #msg-tab,
    #res-tab,
    #instruction-tab,
    #guest-tab,
    #amount-tab {
        padding: 12px !important;
    }

    /* Botón "VER PRECIOS" */
    .more-btn::before {
        font-size: 12px !important;
    }

    /* Inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        padding: 10px !important;
        font-size: 13px;
    }

    /* Home button: texto más corto */
    #home_page span::after {
        content: "Volver a croma-hotels.com" !important;
        font-size: 12px !important;
    }

    /* Ocupación */
    .occupancy-center {
        margin: 0 0 0 6px !important;
    }

    /* Dirección */
    table.property-address td {
        font-size: 11px !important;
    }

    /* rate-col-desc */
    .rate-col-desc {
        padding: 12px !important;
    }
}