/* Container for the dropdown list */
   .ui-autocomplete {
      background: #ffffff !important;
      border: 1px solid #e0e0e0 !important;
      /* 0 top radius makes it attach seamlessly to the search bar */
      border-radius: 0 0 20px 20px !important; 
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
      
      /* Scroller settings */
      max-height: 300px !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      
      /* Layout logic */
      padding: 10px 0 0 0 !important;
      z-index: 9999 !important;
      font-family: inherit;
      
      /* Forced coordinates as per your requirement */
      /* top: 100.315px !important; */
      /* left: 320.417px !important; */
      /* width: 940px !important; */
      transform: translateX(0%) !important;
   }

   /* Individual list items */
    .ui-menu-item-wrapper {
      padding: 12px 25px !important;
      font-size: 16px !important;
      color: #333 !important;
      border: none !important;
   }

   /* Hover/Active state */
   .ui-menu-item-wrapper.ui-state-active {
      background-color: #f8f9fa !important;
      color: #cd3a6a !important;
      margin: 0 !important;
   }

   /* Custom Scroller to match your image */
   .ui-autocomplete::-webkit-scrollbar {
      width: 8px;
   }
   .ui-autocomplete::-webkit-scrollbar-track {
      background: #f1f1f1;
   }
   .ui-autocomplete::-webkit-scrollbar-thumb {
      background: #888; /* Grey scroller like in your image */
      border-radius: 10px;
   }

   /* Footer logic */
   .ui-autocomplete-footer {
      padding: 15px 25px;
      border-top: 1px solid #eee;
      background: #fff;
      position: sticky;
      bottom: 0;
      font-size: 16px;
   }
    
    #locateUsOnMap {
        height: 450px; /* Or 100% if the parent has a height */
        width: 100%;
    }
   /* 1. Header and Title alignment */
   #ui-datepicker-div .ui-datepicker-header {
      background: transparent !important;
      border: none !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 10px 15px !important;
   }

   #ui-datepicker-div .ui-datepicker-title {
      margin: 0 !important;
      font-weight: 700 !important;
      font-size: 16px !important;
      color: #333 !important;
   }

   /* 2. Style Prev and Next as Pink Buttons */
   #ui-datepicker-div .ui-datepicker-prev, 
   #ui-datepicker-div .ui-datepicker-next {
      position: static !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      background-color: #cd3a6a !important; /* Brand Pink Background */
      border-radius: 6px !important; /* Button rounding */
      padding: 4px 10px !important;
      transition: background 0.3s ease !important;
      border: none !important;
      width: auto !important;
      height: auto !important;
   }

   /* Hover effect for buttons */
   #ui-datepicker-div .ui-datepicker-prev:hover, 
   #ui-datepicker-div .ui-datepicker-next:hover {
      background-color: #a82e56 !important; /* Darker pink on hover */
   }

   /* 3. Button Text Formatting */
   #ui-datepicker-div .ui-datepicker-prev span, 
   #ui-datepicker-div .ui-datepicker-next span {
      display: inline-block !important;
      text-indent: 0 !important; /* Show text */
      background: none !important; /* No default icons */
      font-size: 12px !important;
      font-weight: 600 !important;
      color: #ffffff !important; /* White Text */
      width: auto !important;
      height: auto !important;
   }

   /* 4. Positioning buttons in one line on the right */
   #ui-datepicker-div .ui-datepicker-prev {
      margin-right: 8px !important;
   }

   /* 5. Clean up table headers and cells */
   #ui-datepicker-div .ui-datepicker-calendar thead th {
      padding: 8px 0 !important;
      color: #888 !important;
      font-weight: 600 !important;
   }

   /* Selected Day Circle (as seen in image_c4eb05.png) */
   #ui-datepicker-div .ui-state-default {
      border: none !important;
      /* background: transparent !important; */
      text-align: center !important;
      border-radius: 50% !important;
      width: 32px !important;
      height: 32px !important;
      line-height: 32px !important;
   }

   #ui-datepicker-div .ui-state-active {
      background: #cd3a6a !important; /* Pink highlight */
      color: #fff !important;
   }

   /* Removes the background/border highlight from the current day */
   .ui-datepicker-today .ui-state-highlight {
      background: none !important;
      border: 1px solid transparent !important;
      color: inherit !important;
   }
   .ui-datepicker {
      position: absolute !important;
      z-index: 9999 !important; /* Higher than the Bootstrap modal */
      display: none;
      background: #fff;
      box-shadow: 0 8px 30px rgba(0,0,0,0.2);
      border: 1px solid #ddd;
      border-radius: 8px;
   }

   /* 1. Container styling - Ensuring icons and text stay in line */
   .amenities-list {
      display: flex !important;
      gap: 15px !important; /* Space between different amenity items */
      flex-wrap: wrap !important;
      align-items: center !important;
   }

   /* 2. Individual Amenity Item Wrap */
   .amenities-list .d-flex.align-items-center {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important; /* Space between icon and its text */
      white-space: nowrap; /* Prevents text from breaking into two lines */
   }

   /* 3. Icon Styling - Crucial for the look in image_c50491.png */
   .amenities-list .serviceIcon {
      display: flex !important;
      align-items: center;
      justify-content: center;
      width: 18px !important; /* Small icon size like the image */
      height: 18px !important;
   }

   .amenities-list .serviceIcon img {
      width: 100% !important;
      height: auto !important;
      object-fit: contain;
      /* Optional: If your icons are too dark, you can use a filter to match the brand color */
      /* filter: sepia(100%) saturate(300%) hue-rotate(300deg); */
   }

   /* 4. Text Styling */
   .amenities-list .font-16px {
      font-size: 14px !important; /* Slightly smaller font looks cleaner for amenities */
      color: #44566c !important; /* Soft grey-blue color seen in image_c50491.png */
      font-weight: 400 !important;
   }

   /* 5. SVG Icon support (if you use SVGs instead of IMGs) */
   .amenities-list .serviceIcon svg {
      width: 16px !important;
      height: 16px !important;
      fill: #44566c; /* Match text color */
   }

    /* DatePicker Css*/
   /* 1. Main Container - Clean & Shadowed */
   #ui-datepicker-div.ui-datepicker {
      background: #ffffff !important;
      border: 1px solid #e0e0e0 !important;
      border-radius: 12px !important;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
      padding: 15px !important;
      width: 300px !important; /* Fixed width for consistency */
      font-family: inherit;
   }

   /* 2. Header - Month and Year */
   .ui-datepicker-header {
      background: transparent !important;
      border: none !important;
      border-bottom: 1px solid #f1f1f1 !important;
      padding-bottom: 10px !important;
      margin-bottom: 10px !important;
   }

   .ui-datepicker-title {
      color: #333 !important;
      font-weight: 600 !important;
      font-size: 16px !important;
   }

   /* 3. Navigation Arrows (Prev/Next) */
   .ui-datepicker-prev, .ui-datepicker-next {
      cursor: pointer !important;
      top: 12px !important;
   }

   .ui-datepicker-prev:hover, .ui-datepicker-next:hover {
      background: #f8f9fa !important;
      border-radius: 50% !important;
      border: none !important;
   }

   /* 4. The Calendar Table */
   .ui-datepicker-calendar {
      width: 100% !important;
      border-collapse: collapse !important;
   }

   /* Days of the week headers (Su, Mo, etc) */
   .ui-datepicker-calendar th {
      color: #999 !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      padding: 8px 0 !important;
   }

   /* Individual Date Cells */
   .ui-datepicker-calendar td {
      padding: 2px !important;
      text-align: center !important;
   }

   .ui-datepicker-calendar .ui-state-default {
      border: none !important;
      background: transparent !important;
      text-align: center !important;
      color: #444 !important;
      width: 35px !important;
      height: 35px !important;
      line-height: 35px !important;
      display: inline-block !important;
      border-radius: 50% !important;
      transition: all 0.2s ease !important;
   }

   /* 5. HOVER & SELECTED STATE - Brand Pink */
   /* Hover State */
   .ui-datepicker-calendar .ui-state-hover {
      background: #fdf2f5 !important; /* Very light pink */
      color: #cd3a6a !important;
   }

   /* Selected Date & Today */
   .ui-datepicker-calendar .ui-state-active{
      background: #cd3a6a !important; /* Your Brand Pink */
      color: #ffffff !important;
      font-weight: bold !important;
   }

   /* Disabled Dates (Past dates) */
   .ui-state-disabled span {
      color: #ccc !important;
      background: transparent !important;
   }

  /*Timepicker css*/
  /* 1. Main Container - Ensuring it floats over the modal */
.timepicker {
    position: absolute !important;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    width: 260px;
    padding: 15px;
}

/* 2. The Clock Face - The circular base */
.timepicker .clock {
    position: relative;
    width: 230px;
    height: 230px;
    margin: 0 auto;
}

.timepicker .face {
    width: 200px;
    height: 200px;
    background: #fdfdfd;
    border: 1px solid #ebebeb;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 3. The Bubbles (Numbers) - Positioned by your JS math */
.timepicker .bubble {
    position: absolute;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    font-size: 13px;
    color: #444;
    transition: all 0.2s ease;
    user-select: none;
}

.timepicker .bubble.selected {
    background-color: #325288; /* Your primary theme color */
    color: #ffffff !important;
    font-weight: bold;
}

.timepicker .bubble:hover:not(.selected) {
    background-color: #e9ecef;
}

/* 4. The Clock Hands - Rotating from center */
.timepicker .hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom center;
    background-color: #325288;
    z-index: 5;
    pointer-events: none; /* Allows clicking bubbles through the hand */
}

.timepicker .hand.hour {
    width: 4px;
    height: 60px;
    border-radius: 4px;
}

.timepicker .hand.minute {
    width: 2px;
    height: 85px;
    background-color: #888;
}

/* 5. Units (Hr/Min) and Meridiem (AM/PM) */
.timepicker .unit, .timepicker .meridiem {
    position: absolute;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: #999;
}

.timepicker .unit.hour { top: 0; left: 0; }
.timepicker .unit.minute { top: 0; right: 0; }
.timepicker .meridiem.am { bottom: 0; left: 0; }
.timepicker .meridiem.pm { bottom: 0; right: 0; }

.timepicker .unit.selected, .timepicker .meridiem.selected {
    color: #325288;
    border-bottom: 2px solid #325288;
}

/* 6. Done Button */
.timepicker .done {
    margin-top: 15px;
    padding: 10px;
    text-align: center;
    background: #325288;
    color: white;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: opacity 0.2s;
}

.timepicker .done:hover {
    opacity: 0.9;
}

/********************* Wishlist *******************/
/* Base Circle Design */
.wishlist-highlight {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Adjust width/height to ensure the word fits in a circle */
    width: 55px;  
    height: 55px;
    border-radius: 50%;
    
    /* Background and Border */
    background-color: #ffffff;    /* White Interior */
    border: 3px solid #d63384;     /* Thick Pink Border */
    
    /* Text Removal of default <a> styling */
    text-decoration: none !important;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

/* Text Style inside the Circle */
.wishlist-highlight span {
    font-size: 11px;
    font-weight: 700;
    color: #d63384;              /* Pink Text */
    text-transform: uppercase;    /* Keeps UI clean and professional */
    letter-spacing: 0.5px;
}

/* ACTIVE State: When the item is Saved */
.wishlist-highlight.active {
    background-color: #d63384;    /* Background turns Pink */
    border-color: #d63384;
}

.wishlist-highlight.active span {
    color: #ffffff;              /* Text turns White */
}

/* GUEST / DISABLED State: Grey Look */
.wishlist-highlight .guest-text {
    color: #adb5bd;
}
.wishlist-highlight:has(.guest-text) {
    border-color: #adb5bd;
}

/* Hover & Click Animations */
.wishlist-highlight:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(214, 51, 132, 0.25);
}

.wishlist-highlight:active {
    transform: scale(0.92);
}