/**
* NOTICE OF LICENSE
*
* This source file is subject to the Open Software License version 3.0
* that is bundled with this package in the file LICENSE.md
* It is also available through the world-wide-web at this URL:
* https://opensource.org/license/osl-3-0-php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to support@qloapps.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade this module to a newer
* versions in the future. If you wish to customize this module for your needs
* please refer to https://store.webkul.com/customisation-guidelines for more information.
*
* @author Webkul IN
* @copyright Since 2010 Webkul
* @license https://opensource.org/license/osl-3-0-php Open Software License version 3.0
*/

.header-rmsearch-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.header-rmsearch-hide-xs {
  background-image: url("../img/black-opacity-5.png");
}

.header-rmsearch-show-xs {
  background-color: var(--on-primary);
  top: 0;
}

.header-rmsearch-wrapper {
  display: table;
  height: 100%;
  width: 100%;
}

.header-rmsearch-primary {
  display: table-cell;
  vertical-align: middle;
}

.header-rmsearch-inner-wrapper {
  margin-top: 30px;
  margin-bottom: 15px;
}

#make_booking_btn {
  background-color: var(--primary-base);
  width: 155px;
  height: 50px;
  color: var(--on-primary);
}

#make_booking_btn_div {
  margin-top: 20px;
  text-align: center;
}

@media (max-width: 767px) {
  /* Fancybox Overrides */
  .fancybox-wrap {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  .fancybox-skin {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .fancybox-inner {
    overflow: visible !important;
    width: 100% !important;
  }
  .fancybox-overlay {
    background: rgba(0, 0, 0, 0.4) !important;
  }
  .fancybox-close {
    display: none !important;
  }

  /* Layout Resets */
  .header-rmsearch-primary .container {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    min-height: 100vh; /* Full viewport height */
    pointer-events: auto; /* Allow clicks to be captured for close event */
  }
  .header-rmsearch-primary {
    display: block;
    width: 100%;
  }

  /* The Card Style */
  .header-rmsearch-inner-wrapper {
    width: 288px !important;
    max-width: 288px !important;
    background: var(--on-primary);
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    margin: auto;
    pointer-events: auto; /* Re-enable clicks on card */
  }

  /* Reset form-group in search wrapper for mobile */
  #search_form_fields_wrapper .form-group {
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  /* Grid Reset */
  .header-rmsearch-wrapper #search_hotel_block_form .grid {
    grid-template-columns: 1fr;
    column-gap: 0px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 16px 16px 16px;
  }

  /* Header/Title */
  .search_rooms_header {
    display: block !important;
    margin-top: 0;
    padding: 0;
    text-align: left;
    color: #333;
    margin-bottom: 15px;
    border-bottom: 1px solid #d5d5d5;
  }
  .search_rooms_header p {
    margin: 0;
    padding: 16px 16px 0px 16px;
    font-size: 23px;
    font-weight: 600;
  }
  .search_rooms_header hr {
    display: block !important;
    border: 0 !important;
    border-top: 1px solid var(--on-primary) !important; /* Subtle gray divider */
    width: auto !important; /* Allow it to stretch */
    margin: 0 0 15px 0;
    float: none !important;
  }

  /* Inputs */
  #search_hotel_block_form .header-rmsearch-input {
    border: 1px solid #d1d5db !important;
    border-radius: 10px;
    height: 44px;
    min-height: 44px;
    margin-bottom: 12px;
    box-shadow: none;
    padding-left: 40px;
    padding-right: 36px;
    color: #374151;
    width: 100%;
  }
  #search_hotel_block_form .header-rmsearch-input::placeholder {
    color: #9ca3af;
    opacity: 1;
  }

  /* Input Icons */
  #search_hotel_block_form .input-location {
    background-image:
      url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-7.163 8-12a8 8 0 10-16 0c0 4.837 8 12 8 12z' stroke='%239CA3AF' stroke-width='2'/%3E%3Ccircle cx='12' cy='10' r='3' stroke='%239CA3AF' stroke-width='2'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 15l4 4 4-4M8 9l4-4 4 4' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position:
      12px center,
      right 12px center !important;
    background-size:
      16px 16px,
      16px 16px !important;
    background-color: var(--on-primary) !important;
    display: flex;
    align-items: center;
  }
  #search_hotel_block_form .input-date {
    background-image:
      url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' stroke='%239CA3AF' stroke-width='2'/%3E%3Cpath d='M3 9h18' stroke='%239CA3AF' stroke-width='2'/%3E%3Cpath d='M7 3v4M17 3v4' stroke='%239CA3AF' stroke-width='2'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 15l4 4 4-4M8 9l4-4 4 4' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position:
      12px center,
      right 12px center !important;
    background-size:
      16px 16px,
      16px 16px !important;
    background-color: var(--on-primary) !important;
    display: flex;
    align-items: center;
  }
  #search_hotel_block_form #guest_occupancy {
    background-image:
      url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 21C20 16.5817 16.4183 13 12 13C7.58172 13 4 16.5817 4 21' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='7' r='4' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 15l4 4 4-4M8 9l4-4 4 4' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position:
      12px center,
      right 12px center !important;
    background-size:
      16px 16px,
      16px 16px !important;
    background-color: var(--on-primary) !important;
    text-align: left;
    display: flex;
    align-items: center;
  }

  /* Buttons */
  #search_hotel_block_form #search_room_submit {
    background-color: var(--primary-base);
    border-radius: 10px;
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
    width: 100%;
    color: var(--on-primary);
    border: none;
    text-transform: capitalize;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #make_booking_btn {
    width: 100%;
    background-color: var(--primary-base) !important;
    border-radius: 10px;
    height: 45px;
    margin-top: 10px;
  }

  /* Occupancy Dropdown (Mobile Sheet) */
  .header-rmsearch-wrapper .dropdown {
    position: relative; /* Ensure parent is relative for absolute positioning */
  }
  .header-rmsearch-wrapper #search_occupancy_wrapper {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    z-index: 9999999 !important;
    width: 100% !important;
    max-height: 50vh;

    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    background: var(--on-primary);
  }
  #occupancy_inner_wrapper {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    position: relative;
    width: 100%;
  }
  #occupancy_inner_wrapper::-webkit-scrollbar {
    width: 6px;
    background: transparent;
  }
  #occupancy_inner_wrapper::-webkit-scrollbar-track {
    background: transparent;
  }
  #occupancy_inner_wrapper::-webkit-scrollbar-thumb {
    background-color: #bfbfbf;
    border-radius: 4px;
    border: 1px solid transparent;
    background-clip: content-box;
  }
  #occupancy_inner_wrapper .occupancy_info_block {
    width: 100%;
  }
  #occupancy_inner_wrapper .occupancy_info_block .row {
    width: 90%;
    margin: 0 auto;
  }
}

/* .fancybox-inner #search_hotel_block_form {
  grid-template-columns: 1fr;
} */