html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Floating button styles */
.floating-booking-btn {
  position: fixed;
  right: 18px;                /* distance from right edge */
  top: 50%;                   /* vertical center */
  transform: translateY(-50%);
  z-index: 1055;              /* above most elements but below modal backdrop (modal uses 1050) */
  height: 64px;               /* medium height — adjust as needed */
  min-width: 160px;           /* rectangular width */
  padding-left: 18px;
  padding-right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  border-radius: 0 !important; /* remove Bootstrap rounding */
  white-space: nowrap;
  
}

/* Optional: slightly larger text */
.floating-booking-btn { font-weight: 600; font-size: 1rem; }

/* Responsiveness: on very small screens put it bottom-right instead */
@media (max-width: 576px) {
  .floating-booking-btn {
    top: auto;
    bottom: 18px;
    transform: none;
    right: 18px;
    min-width: 140px;
    height: 56px;
  }
}

/* Color utility classes used for the modal button*/
.white-background {background-color:#ffffff;}
.black {color:#000000;}
.black-background {background-color:#000000;}
.white {color:#ffffff;}

/* Modal customizations */
.modal-dialog {
    position: fixed;
    right: 0px;
}

/* background color of top navbar*/ 
.navbar-light {
    background-color: rgb(250, 252, 252) !important;
    border: none !important;
    border-width:0!important;
}


/* This is the CSS to make the scrollspy menu column stretch to the height of the content column */

/* 1. Ensure the ROW uses flex to match column heights */
.photos-content-row {
    display: flex; 
    align-items: flex-start;
}

/* 2. Define the exact fixed behavior for the thinner menu container */
.menu-fixed-sidebar {
    position: fixed !important; 
    top: 80px;                 
    /* NEW: Adjusted width for col-lg-2 (16.66% of container) */
    width: 16.666667%; 
    height: calc(100vh - 80px);
    overflow-y: auto;          
    /* NEW: Remove default border radius */
    border-radius: 0 !important;
}

/* ------------------------------------------------ */
/* Scrollspy Menu Active State Override             */
/* ------------------------------------------------ */
/* Default State: Black Text */
.menu-fixed-sidebar .nav-pills .nav-link {
    color: #212529 !important; /* Bootstrap's 'dark' black for text */
    /* Ensure no default background */
    background-color: transparent !important; 
    /* Ensure links have square corners */
    border-radius: 0 !important;
    border: 1px solid transparent; /* Critical: Adds a transparent border to align elements */
}

.menu-fixed-sidebar .nav-pills .nav-link.active, 
.menu-fixed-sidebar .nav-pills .show > .nav-link {
    /* Background and Text Color */
    color: Black !important;           /* Black text */
    background-color: White !important; /* White background */
    
       border-radius: 0 !important; 
    border: 1px solid #212529 !important; /* Ensure the active state also has the black border */
}

/* Optional: Improve Hover State for consistency */
.menu-fixed-sidebar .nav-pills .nav-link:hover {
    background-color: #dee2e6 !important; /* Light gray hover background (Bootstrap default hover) */
    color: #212529 !important;           /* Dark text on hover */  
    border: 1px solid #212529 !important; /* Critical: Solid black 1px border for the frame */
    border-radius: 0 !important;  
}

/* Helps format Pictures on the index page */
/* Custom Class for shorter image containers */
.gallery-image-wrapper {
    /* Define the max height for the picture blocks (adjust as needed) */
    max-height: 350px; 
    overflow: hidden; 
    position: relative; /* CRITICAL: Enables absolute positioning of the button inside */
}

/* Ensure images fill the defined max-height */
.gallery-image-wrapper img {
    height: 100% !important; 
    width: 100%;
    object-fit: cover;
}

/* Style for the overlaid button */
.view-all-btn {
    position: absolute; /* Place the button relative to the parent wrapper */
    left: 50%;          /* Center horizontally */
    transform: translate(-50%, 0); /* Adjust to truly center horizontally */
    
    /* Position at 30% from the bottom */
    bottom: 30%; 
    
    /* Small, rounded button style */
    padding: 0.25rem 0.5rem; /* Make it smaller */
    font-size: 0.875rem;     /* Small font size */
    border-radius: 0.5rem !important; /* Rounded corners */
}

/* css to get same height for pictures in photos page */
/* Custom class to force all columns in a row to have the same height */
/* Added specificity: target the div container in the row */
.equal-height-row {
    display: flex !important;
    flex-wrap: wrap; 
    align-items: stretch; /* Stretches all columns to the height of the tallest */
}

/* Ensure the wrapper inside the column is also 100% height and set the container for overflow */
.equal-height-row > [class*="col-"] > div { /* Target the div inside the column */
    height: 100%;
    overflow: hidden; /* Prevent content from breaking the height */
}

/* Ensure the image fills the entire height and width of its wrapper */
.equal-height-row img {
    height: 100% !important; /* CRITICAL: Force 100% height */
    width: 100% !important;  /* CRITICAL: Force 100% width */
    object-fit: cover;       /* Ensures image fills the space without distortion */
}

/* Custom CSS for zoom effect on photos page */
/* Styling for the image container */
.gallery-item-wrapper {
    overflow: hidden;         /* Hides the zoomed edge of the image */
    cursor: pointer;          /* Indicates the image is clickable */
}

/* Styling for the image itself */
.gallery-item-wrapper img {
    transition: transform 0.3s ease-in-out; /* Smooth transition for zoom */
}

/* Zoom effect on hover */
.gallery-item-wrapper:hover img {
    transform: scale(1.05); /* Zoom in by 5% */
}

/* CSS for the modal image gallery */
/* 1. Style the Modal Content (The Area around the picture) */
.gallery-modal-content {
    background-color: #343a40 !important; /* Dark Grey Background */
    border: none;
    border-radius: 0; /* Optional: ensures square corners for the modal box */
}

/* 2. Style the Modal Body to give space for the arrows */
.gallery-modal-body {
    padding: 2rem !important; /* Add padding around the image */
    display: flex;             /* Use flex to align image and arrows */
    align-items: center;       /* Vertically center the image and arrows */
    justify-content: center;   /* Horizontally center the image and arrows */
    position: relative;        /* Required for arrow positioning */
}

/* 3. Style the Navigation Arrows (making them bigger and darker) */
.gallery-arrow-btn {
    position: absolute;       /* Positions the arrows relative to the modal-body */
    top: 50%;                 /* Center vertically */
    transform: translateY(-50%);
    width: 50px;              /* Make the button area visible */
    height: 50px;
    opacity: 1 !important;    /* Keep arrows visible */
    background: transparent;
    border: none;
    z-index: 1050;            /* Ensure arrows are clickable over the backdrop */
}

.gallery-arrow-btn-prev {
    left: 10px; /* Position arrow on the far left */
}

.gallery-arrow-btn-next {
    right: 10px; /* Position arrow on the far right */
}

/* More Modal style to ensure it is centered */
/* ------------------------------------------------ */
/* FIX: Gallery Modal Centering (Highest Priority)  */
/* ------------------------------------------------ */

/* Target the photo gallery modal dialog by its specific ID */
#imageGalleryModal .modal-dialog {
    /* Critical: Override any conflicting position: fixed or right: 0 */
    position: relative !important;
    right: auto !important;
    
    /* Ensure it fills the screen width for proper centering */
    max-width: 100% !important; 
    width: 100% !important;
    
    /* Use Flexbox to guarantee centering */
    display: flex !important;
    align-items: center !important;   /* Vertical centering */
    justify-content: center !important; /* Horizontal centering */
    
    /* Ensure height accounts for the whole viewport */
    min-height: 100vh !important;
    margin: 0 !important; /* Remove any residual margins */
}

/* Ensure the modal content itself is constrained and centered */
#imageGalleryModal .gallery-modal-content {
    max-width: 90%; 
    margin: auto; 
}

/* Optional: Ensure the *other* fixed modal is not inheriting these styles 
   (assuming its ID is #bookingOffcanvas or similar) 
   If the other modal is causing issues, you might need to ensure its fixed styles are also specific:
   #bookingOffcanvas .modal-dialog {
       position: fixed !important;
       right: 0px !important;
       ...
   }
*/

/* Ensure the close button is visible (if not already) */
#imageGalleryModal .btn-close-white {
    filter: invert(100%); /* Makes it white against the dark background */
}