/* ================= */
/*      GENERAL      */
/* ================= */

/* [STICKY FOOTER SETUP] */
html, body {
    height: 100%;
}

/* [BODY] */
body {
    font-family: 'Raleway', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;   
    transition: opacity 0.4s ease-in-out;
    
    /* Flexbox for sticky footer */
    display: flex;
    flex-direction: column;

    /* Hide body by default to prevent FOUC */
    opacity: 0; 
}

/* Reveal body once all content is loaded */
body.loaded {
    opacity: 1;
}

/* [MAIN CONTENT] */
main {
    flex: 1; /* Expands to fill available space, pushing footer down */
}

/* [FOOTER] */
footer {
    margin-top: auto; /* Ensures footer stays at bottom */
} 


/* [NAVBAR] */
/* .navbar-logo {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url('../images/logos/bocayna_black.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
} */


/* [MODALS] */
.modal-dialog {
    max-width: unset;
}

.modal-body {
    padding: 0;
}

.modal-content {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-footer {
    border-top: none;
    justify-content: center;
}



/* =============== */
/*   PAGE - HOME   */
/* =============== */

/* [BODY HOME] */
/* --- Theme Variables --- */
body.page-home {
    --btn-cta-bg: #bfa78b;
    --btn-cta-bg-hover: #a8916e;
    --highlight-bg: #fff5ec;
    --highlight-title-color: #3a3835;
    --intro-title-color: #6c757d; /* Standard Bootstrap muted color */
}


/* [HERO] */
.page-home__hero {
    width: 100%;
    height: 400px;
    position: relative;
}

/* [HERO IMAGE] */
.page-home__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* [CHOOSE ROOM BUTTON] */
.page-home__choose-room-button {
    background-color: var(--btn-cta-bg);
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    padding: 1rem 2rem;
    display: inline-block;
    transition: background 0.3s;
    border: none;
    border-radius: 0;
}

.page-home__choose-room-button:hover {
    background-color: var(--btn-cta-bg-hover);
}

/* [INTRO] */
.page-home__intro {
    padding: 5rem 0 3rem;
    background-color: white;
}

.page-home__intro-title {
    font-weight: 300;
    font-size: 2.2rem;
    color: var(--intro-title-color);
    
}

/* [HIGHLIGHTS] */
.page-home__highlights {
    background-color: var(--highlight-bg);
    padding: 3rem;
}

.page-home__highlights-title {
    font-weight: 700;
    color: var(--highlight-title-color);
    line-height: 1.3;
}



/* ROOMS PAGE ========================================================================================================*/

/* [BODY ROOMS] */
/* Prevents content from "wiggling" when a modal opens/closes by ensuring the scrollbar space is always reserved. */
body.page-rooms {
    /* Modern solution that reserves space for the scrollbar gutter, preventing layout shifts without forcing a visible scrollbar. */
    scrollbar-gutter: stable;
    /* Theme variables for components shared across modals */
    --table-header-bg: #2c2c2c;
    --table-header-text: #f1f1f1;
    --table-border-color: rgba(255, 255, 255, 0.1);
    --table-row-stripe-bg: rgba(255, 255, 255, 0.03);
    --table-total-row-border-color: rgba(255, 255, 255, 0.2);
    --table-total-row-text: #f8f9fa;
}

/* --- Font Overrides for Specific Sections --- */
/* Sets the font to Arial for the main interactive components, overriding the site's default 'Raleway' font. */
.page-rooms .map-wrapper,
.page-rooms .modal,
.page-rooms .card_room_preview,
.page-rooms .page-rooms__tooltip-box {
    font-family: Arial, sans-serif;
}

/* Overrides Bootstrap's JS behavior of hiding the scrollbar and adding padding, which causes a layout shift. This lets `scrollbar-gutter` handle it. The `!important` is needed to defeat Bootstrap's inline styles and rules. */
body.modal-open {
    overflow: visible !important;
    padding-right: 0 !important;
}


/* [PAGE TITLE] */
.page-rooms__page-title {
font-weight: bold;
}


/* [CALENDAR BAR] */
.page-rooms__calendar-top-bar {
    background-color: #212529;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    width: 100%;
    z-index: 10;

    flex-wrap: wrap; /* Allow wrapping */
    align-items: center;
    justify-content: flex-start;


}

.page-rooms__calendar-top-bar input[type="date"] {
    width: auto;
    min-width: 140px;
}

.page-rooms__calendar-top-bar .date-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0; /* Prevent the group from shrinking */
    white-space: nowrap; /* Keep label and input together */
}

.page-rooms__calendar-top-bar .date-group span {
    font-weight: 500;
    margin-right: 0; /* Override the default margin */
}

.page-rooms__calendar-top-bar span {
    font-weight: 500;
    margin-right: 0.3rem;
}

/* [FULLSCREEN TOGGLE BUTTON] */
#fullscreenToggle {
    margin-left: auto;
    font-size: 0.8rem;
}

/* [CONTAINER MAP + OVERLAY] */
.page-rooms__map-container {
    max-width: 2560px; /*max Ultrawide monitors */ 
    max-height: 1440px;    
    margin: 0 auto;
    position: relative;
    width: 100%;
}

/* [MAIN IMAGE] */
.page-rooms__map-image {
    width: 100%;
    display: block;
    height: auto;
}

/* [BACK BUTTON] */
#page-rooms__btn-back {
    
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.3); /* ✅ Faint white border */
}


/* [SVG MAP OVERLAY] */
.page-rooms__svg-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.page-rooms__svg-area {
    fill: transparent;
    stroke: none;
    transition: fill 0.2s ease;
    cursor: pointer;
}

.page-rooms__svg-area:hover {
    fill: rgba(148, 127, 106, 0.5);
}


/* [PRICE BOXES] */
.page-rooms__price-box-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.page-rooms__price-box-overlay .page-rooms__price-box-label {
    pointer-events: auto;
}

.page-rooms__price-box-label {   
    position: absolute;
    background-color: white;
    padding: 0.4em 0.8em;
    font-weight: bold;
    font-size: clamp(0.6rem, 1vw, 0.9rem);
    color: #000;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    white-space: nowrap;

    /* tranform adjustments (right, top) */
    transform: translate(-15%, -100%);
    /* transform: translate(0%, -100%); (stacked)*/

}


/* [SPINNER] */
.page-rooms__spinner-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
}


/* [TOOLTIP AREA] */
.page-rooms__tooltip-box {    
    position: absolute;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 0.4em 0.6em;
    font-size: 0.8rem;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 999;
    transition: opacity 0.1s ease;
}


/* ==================================================
   [CARD ROOM PREVIEW] (Dynamically generated)
   ================================================== */

/* --- Card: Theme Variables & Base Layout --- */
.card_room_preview {
    --card-bg: white;
    --card-text-color: #333;
    --card-text-secondary-color: #444;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    --card-border-radius: 6px;
    --card-image-overlay-bg: rgba(0, 0, 0, 0.75);
    --card-access-btn-bg: #a29282;
    --card-access-btn-bg-hover: #8e7e6f;
    --card-access-btn-text: white;

    position: absolute;
    background-color: var(--card-bg);
    color: var(--card-text-color);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    font-size: 0.85rem;
    z-index: 1000;
    pointer-events: auto;
    transition: opacity 0.2s ease;
    
    /* width: 250px; */
    max-width: 250px;
    /* transform: scale(calc(0.5 + 0.5vw)); */
    /* transform: scale(1.0); */
    transform-origin: top left;
    width: 100%; 
    white-space: normal;
}

@media (max-width: 1200px) {
    .card_room_preview {
        transform: scale(0.9);
    }
}

@media (max-width: 992px) {
    .card_room_preview {
        transform: scale(0.7);
    }
}

@media (max-width: 768px) {
    .card_room_preview {
        transform: scale(0.5);
    }
}

@media (max-width: 480px) {
    .card_room_preview {
        transform: scale(0.3);
    }
}

/* --- Card: Image & Overlay --- */
.card-room-preview__image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Aggressive resets to prevent external styles from breaking the layout of this dynamic element. */
    border-radius: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.card-room-preview__image {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    /* More aggressive resets */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

.card-room-preview__price-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: var(--card-image-overlay-bg);
    color: var(--card-access-btn-text);
    font-size: 14px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
}

/* --- Card: Content Area --- */
.card-room-preview__content-wrapper {
    padding: 0.5rem;
}

.card-room-preview__title {
    margin-top: 10px;
    margin-bottom: 8px;
}

.card-room-preview__line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.card-room-preview__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    font-size: 1rem;
    /* Affects icon fonts like Bootstrap Icons */
}

.card-room-preview__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-room-preview__description {
    margin-top: 0.5rem;
    background-color: #f2f2f2;
    padding: 4px 8px; /* spacing inside */
    border-radius: 6px; /* rounded corners */
    display: inline-flex; /* key to shrink-wrap */
}

.card-room-preview__description small {
    color: var(--card-text-secondary-color);
}

/* --- Card: Action Button --- */
.card-room-preview__access-wrapper {
    /* This wrapper ensures the button can be full-width without internal padding affecting it. */
    margin: 0;
    padding: 0;
}

.card-room-preview__access-btn {
    background-color: var(--card-access-btn-bg);
    color: var(--card-access-btn-text);
    font-size: 0.85rem;
    height: 40px;
    border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
    border: none;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Increase specificity to override Bootstrap's default .btn styles without using !important. */
.card_room_preview .card-room-preview__access-btn:hover,
.card_room_preview .card-room-preview__access-btn:active,
.card_room_preview .card-room-preview__access-btn:focus,
.card_room_preview .card-room-preview__access-btn:focus-visible {
    background-color: var(--card-access-btn-bg-hover);
    color: var(--card-access-btn-text);
    box-shadow: none;
    outline: none;
}



/* ==================================================
   START [MODAL ROOM DETAILS]
   ================================================== */

/* [MODAL ROOM DETAILS DIALOG] */
.modal-room-details {
    max-width: 672px;
}

/* [MODAL ROOM DETAILS CONTENT] */
.modal-room-details-content {
    width: 100%;
    background: #1e1f20;
    border-radius: 6px;
    overflow: hidden;
    border: none;
    margin: 0 auto;
    position: relative;
}

/* [MODAL ROOM DETAILS CLOSE BUTTON] */
.modal-room-details__close-icon {
    
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 50%;
    
    
    /* button size */
    width: 24px;
    height: 24px;
    font-size: 1.2rem;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    padding: 0;
    border: none;
    top: 12px;
    right: 12px;
    z-index: 10;
}


/* [CAROUSEL] */

/* --- Theme Variables --- */
#modalRoomDetails {
  --carousel-arrow-bg: rgba(0, 0, 0, 0.8);
  --carousel-tab-bg: #1f1f1f;
  --carousel-tab-bg-hover: #59544f; /* Lighter shade for more noticeable feedback, matches close icon */
  --carousel-tab-bg-active: #48443f;
  --carousel-tab-border-color: rgba(255, 255, 255, 0.3);
  --carousel-tab-text-color: #fff;
  --btn-custom-bg: #48443f;
  --btn-custom-bg-hover: #59544f; /* Lighter shade for more noticeable feedback */
}



/* --- Container & Core Resets --- */
#modalRoomDetails .carousel-container {
    
    position: relative;  
    border: none;
    overflow: hidden;
    padding: 0;

    /* SIZING AND RESPONSIVENESS ISSUES */
    max-width: 672px; 
    width:100%;  /* keeps the carousel responsive */
    aspect-ratio: 672 / 378; /* this enforces height automatically (HD 16:9, 1920x1080, 1080p) but happens after intial render. fixes sizing but not a placeholder when no image has loaded*/


    background-color: black; /* this provides black background while image loads */

    /* CAROUSEL DROP ISSUE WHILE NO IMAGE LOADED */  
    height: min(56.25vw, 378px); /* 56.25vw = 16:9 ratio, capped at 378px */

    /* height: min(56.25vw, 378px) gives immediate, explicit height
    No calculation needed - browser knows the height instantly
    56.25vw=16:9 ratio (since 9/16=0.5625=56.25%)
    378px cap ensures it doesn't exceed your intended maximum
    min() chooses the smaller value, keeping it responsive */
}

/* --- Carousel Structure & Behavior --- */
#modalRoomDetails #customCarousel,
#modalRoomDetails #customCarousel .carousel-inner {
  height: 100%;
  width: 100%;
  background-color: transparent;
}

#modalRoomDetails #customCarousel .carousel-item {
  height: 100%;
  width: 100%; 
  transition: none; /* Disable Bootstrap's default sliding transition for an instant switch */
}

#modalRoomDetails #customCarousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures image fills the container without distortion */
  object-position: center; /* Centers the image when cropping/scaling */
  display: block;
}

/* --- Controls: Arrows --- */
#modalRoomDetails #customCarousel .carousel-control-prev,
#modalRoomDetails #customCarousel .carousel-control-next {
  width: 32px;
  height: 32px;
  background-color: var(--carousel-arrow-bg);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  z-index: 10;
}

#modalRoomDetails #customCarousel .carousel-control-prev { left: clamp(18px, 2.5%, 24px); }
#modalRoomDetails #customCarousel .carousel-control-next { right: clamp(18px, 2.5%, 24px); }

#modalRoomDetails #customCarousel .carousel-control-prev-icon,
#modalRoomDetails #customCarousel .carousel-control-next-icon {
  width: clamp(10px, 3%, 18px);
  height: clamp(10px, 3%, 18px);
}

/* --- UI: Tab Buttons --- */
/* Custom buttons to switch between 'Views' and 'Images' slides. */
#modalRoomDetails .carousel-tab-buttons {
  position: absolute;
  bottom: 12px;
  left: 48px;
  z-index: 10;
  display: flex;
  border: 1px solid var(--carousel-tab-border-color);
  border-radius: 4px;
  overflow: hidden; /* To clip the inner button borders */
}

#modalRoomDetails .carousel-tab {
  background-color: var(--carousel-tab-bg);
  color: var(--carousel-tab-text-color);
  border: none;
  border-right: 1px solid var(--carousel-tab-border-color);
  padding: 6px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#modalRoomDetails .carousel-tab:last-child {
  border-right: none;
}

#modalRoomDetails .carousel-tab.active {
  background-color: var(--carousel-tab-bg-active);
}

#modalRoomDetails .carousel-tab:not(.active):hover,
#modalRoomDetails .carousel-tab:focus-visible {
  background-color: var(--carousel-tab-bg-hover);
  outline: none;
}


/* [SUMMARY HEADER] */
.modal-room-details__price-label,
.modal-room-details__price-unit {
    font-size: 0.75rem;
}

/* [DATE ROW] */
.modal-room-details__date-row {
    font-size: 0.5rem;
}
   
/* [ROOM NUMBER PILL] */
.modal-room-details__room-number-pill {
    color: white;
    /* The !important is necessary to override Bootstrap's `.bg-secondary` utility class. */
    background-color: #48443f !important;
    font-size: 0.75rem;
}

/* [ROOM DESCRIPTION] */
.modal-room-details__room-description {
    font-size: 0.75rem;
    max-width: 600px;
}

/* [FAVORITES SECTION TITLE] */
.modal-room-details__favorites-section-title {
    font-size: 1rem;
}

/* [FAVORITES SECTION SUBTITLE] */
.modal-room-details__favorites-section-subtitle {
    font-size: 0.75rem;
}

/* [FAVORITE BOX] */
.modal-room-details__favorite-box {
    color: white;
    background-color: #48443f;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    white-space: normal;
    word-break: break-word;
    /* Correct calculation for 4 items per row with a `gap-2` (0.5rem) parent */
    width: calc(25% - 0.375rem);
    box-sizing: border-box;
    text-align: left;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 4rem;
}


/* [FEATURES SECTION TITLE] */
.modal-room-details__features-section-title {
    font-size: 1rem;
}

/* [FEATURES ITEM DESCRIPTION] */
.modal-room-details__feature-item-description {
    font-size: 0.75rem;
    height: 2.6rem;
}

/* [PRICE BREAKDOWN TABLE] */
.modal-room-details__price-breakdown-table {
    width: 100%;
    font-size: 0.75rem;
    color: white;
    background-color: transparent;
    border-collapse: collapse;
}

.modal-room-details__price-breakdown-table thead th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.5rem;
    border-bottom: 1px solid var(--table-border-color);
}

.modal-room-details__price-breakdown-table tbody td {
    padding: 0.5rem;
    vertical-align: middle;
    background-color: transparent;
    border-top: 1px solid var(--table-border-color);
    border-bottom: none;
    color: white;
}

.modal-room-details__price-breakdown-table tbody tr:nth-child(even) td {
    background-color: var(--table-row-stripe-bg);
}

.modal-room-details__price-breakdown-table tbody tr:last-child {
    border-top: 2px solid var(--table-total-row-border-color);
}

.modal-room-details__price-breakdown-table tbody tr:last-child td {
    font-weight: bold;
    background-color: transparent;
    color: var(--table-total-row-text);
}


/* [REQUEST BUTTON] */
/* Styles for the "Request This Room" button inside the modal. */
/* Scoping to the modal ID ensures these styles override Bootstrap defaults. */
#modalRoomDetails .btn.modal-room-details__request-btn {
    background-color: var(--btn-custom-bg);
    border: 1px solid white;
    font-size: 0.85rem;
    color: white;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#modalRoomDetails .btn.modal-room-details__request-btn:hover,
#modalRoomDetails .btn.modal-room-details__request-btn:focus {
    background-color: var(--btn-custom-bg-hover);
    color: white; /* Ensure text color remains white on hover/focus */
    border-color: white; /* Ensure border color remains white on hover/focus */
    box-shadow: none;
    outline: none;
}

/* ==================================================
   END [MODAL ROOM DETAILS]
   ================================================== */


/* ==================================================
   [CUSTOM MODALS - REQUEST FORM & SUCCESS MESSAGE]
   ================================================== */

/* --- Shared Dark Modal Style --- */
/* Applied to the top-level modal div to style its contents consistently. */
.modal-custom-dark .modal-content {
    background-color: #1f1f1f;
    color: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border: 2px solid white;
    box-sizing: border-box;
}

/* --- Dialog Sizing & Positioning --- */
.modal-custom-dark .modal-dialog {
    max-width: 600px;
    margin: 2rem auto;
}

/* --- Close Button --- */
.modal-custom-dark .btn-close {
    margin-top: 0.5rem;
    margin-right: 0.5rem;
}

/* --- Submit Button Spacing --- */
.modal-custom-dark button[type="submit"] {
    margin-bottom: 1rem;
}


/* ==================================================
   [INSTRUCTIONS SECTION]
   ================================================== */