/* ==========================================================
   HOTEL DETAIL SEARCH FIX
   File: templates/default/css/hotel-detail-search-fix.css
   Scope: only hotel detail page search form
   Target page example:
   /ro/hoteluri-pensiuni/motel-vraja-viilor
   ========================================================== */

#page #content.hotel-detail-modern-page{
    background:#f7f8fb !important;
}

/* Container position */
#page #content.hotel-detail-modern-page #search-page{
    position:relative !important;
    z-index:60 !important;
    margin-top:-48px !important;
    margin-bottom:14px !important;
    background:transparent !important;
}

#page #content.hotel-detail-modern-page #search-page > .container{
    width:100% !important;
    max-width:1180px !important;
    padding-left:15px !important;
    padding-right:15px !important;
}

/* Search card */
#page #content.hotel-detail-modern-page #search-page .booking-search{
    display:block !important;
    width:100% !important;
    background:#fff !important;
    border:1px solid rgba(23,55,99,.08) !important;
    border-radius:16px !important;
    box-shadow:0 18px 44px rgba(23,55,99,.14) !important;
    padding:22px 26px !important;
    overflow:visible !important;
}

/* 
   Important:
   Hotel detail search has 5 visible blocks:
   1 destination
   2 date range, internally containing check-in + check-out
   3 adults
   4 children
   5 button
   We use FLEX, not GRID, because Bootstrap/PMS markup varies by hotel page.
*/
#page #content.hotel-detail-modern-page #search-page .booking-search > .row:first-child{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:0 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}

#page #content.hotel-detail-modern-page #search-page .booking-search > .row:first-child:before,
#page #content.hotel-detail-modern-page #search-page .booking-search > .row:first-child:after{
    display:none !important;
    content:none !important;
}

/* Reset every Bootstrap column */
#page #content.hotel-detail-modern-page #search-page .booking-search > .row:first-child > div{
    float:none !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    height:56px !important;
    margin:0 !important;
    padding:0 18px !important;
    display:flex !important;
    align-items:center !important;
    border-right:1px solid rgba(23,55,99,.11) !important;
    overflow:visible !important;
}

/* Destination */
#page #content.hotel-detail-modern-page #search-page .booking-search > .row:first-child > div:nth-child(1){
    flex:1.35 1 0 !important;
    order:1 !important;
    padding-left:0 !important;
}

/* Dates block */
#page #content.hotel-detail-modern-page #search-page .booking-search > .row:first-child > div:nth-child(2){
    flex:1.75 1 0 !important;
    order:2 !important;
}

/* Adults */
#page #content.hotel-detail-modern-page #search-page .booking-search > .row:first-child > div:nth-child(3){
    flex:.75 1 0 !important;
    order:3 !important;
}

/* Children */
#page #content.hotel-detail-modern-page #search-page .booking-search > .row:first-child > div:nth-child(4){
    flex:.75 1 0 !important;
    order:4 !important;
}

/* Button */
#page #content.hotel-detail-modern-page #search-page .booking-search > .row:first-child > div:nth-child(5){
    flex:0 0 92px !important;
    order:5 !important;
    padding-right:0 !important;
    border-right:0 !important;
    justify-content:flex-end !important;
}

/* Form resets */
#page #content.hotel-detail-modern-page #search-page .booking-search .form-group,
#page #content.hotel-detail-modern-page #search-page .booking-search .input-wrapper,
#page #content.hotel-detail-modern-page #search-page .booking-search .datepicker-wrapper,
#page #content.hotel-detail-modern-page #search-page .booking-search .input-group{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

#page #content.hotel-detail-modern-page #search-page .booking-search .input-wrapper{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
}


@media (max-width: 991px){
	.page-header h1, .page-header p.h1 {
		font-size: 15px;
	}
	
	
	#page #content.hotel-detail-modern-page #search-page > .container, #page #content.hotel-detail-html-page #search-page > .container {
	  
		margin-top: 25px;
	}
	#page #content.hotel-detail-modern-page #search-page .booking-search .datepicker-wrapper{
		display:flex
	}
	
}
@media (min-width: 992px){
	#page #content.hotel-detail-modern-page #search-page .booking-search .datepicker-wrapper{
		display:grid !important;
		grid-template-columns:18px minmax(92px,1fr) 18px minmax(92px,1fr) !important;
		align-items:center !important;
		gap:12px !important;
	}
}
#page #content.hotel-detail-modern-page #search-page .booking-search .input-group{
    display:flex !important;
    align-items:center !important;
}

/* Icons */
#page #content.hotel-detail-modern-page #search-page .booking-search .input-wrapper > i,
#page #content.hotel-detail-modern-page #search-page .booking-search .datepicker-wrapper > i,
#page #content.hotel-detail-modern-page #search-page .booking-search .input-group-addon i{
    flex:0 0 18px !important;
    width:18px !important;
    color:#173763 !important;
    opacity:.62 !important;
    font-size:16px !important;
    text-align:center !important;
}

/* Labels */
#page #content.hotel-detail-modern-page #search-page .booking-search .input-group-addon{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    width:auto !important;
    border:0 !important;
    background:transparent !important;
    color:#173763 !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
    padding:0 8px 0 0 !important;
    white-space:nowrap !important;
}

/* Native inputs/selects */
#page #content.hotel-detail-modern-page #search-page .booking-search .form-control,
#page #content.hotel-detail-modern-page #search-page .booking-search select.form-control,
#page #content.hotel-detail-modern-page #search-page .booking-search .selectpicker{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:38px !important;
    min-height:38px !important;
    margin:0 !important;
    padding:0 22px 0 0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#526179 !important;
    font-size:14px !important;
    line-height:38px !important;
    text-align:left !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    appearance:auto !important;
    -webkit-appearance:menulist !important;
    -moz-appearance:menulist !important;
}

/* Hide duplicated bootstrap-select UI only here, keep the real select active */
#page #content.hotel-detail-modern-page #search-page .booking-search select.selectpicker + .bootstrap-select,
#page #content.hotel-detail-modern-page #search-page .booking-search .bootstrap-select{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

/* Date inputs */
#page #content.hotel-detail-modern-page #search-page .booking-search .from-date,
#page #content.hotel-detail-modern-page #search-page .booking-search .to-date{
    width:100% !important;
    min-width:0 !important;
}

#page #content.hotel-detail-modern-page #search-page .booking-search .from-date input,
#page #content.hotel-detail-modern-page #search-page .booking-search .to-date input{
    width:100% !important;
    text-align:left !important;
}

/* Button */
#page #content.hotel-detail-modern-page #search-page .booking-search button.btn-primary{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:78px !important;
    min-width:78px !important;
    max-width:78px !important;
    height:52px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:8px !important;
    background:#173763 !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    letter-spacing:.04em !important;
    box-shadow:none !important;
}

/* No budget/class sliders on hotel detail */
#page #content.hotel-detail-modern-page #search-page .booking-search .row.mb5.mt10{
    display:none !important;
}

/* Debug: add hotel-search-debug class on body if needed */
body.hotel-search-debug #page #content.hotel-detail-modern-page #search-page .booking-search{
    outline:3px solid red !important;
}
body.hotel-search-debug #page #content.hotel-detail-modern-page #search-page .booking-search > .row:first-child > div{
    outline:1px dashed blue !important;
}

/* Responsive */
@media(max-width:991px){
    #page #content.hotel-detail-modern-page #search-page{
        margin-top:-42px !important;
    }

    #page #content.hotel-detail-modern-page #search-page .booking-search{
        padding:18px !important;
    }

    #page #content.hotel-detail-modern-page #search-page .booking-search > .row:first-child{
        display:block !important;
    }

    #page #content.hotel-detail-modern-page #search-page .booking-search > .row:first-child > div{
        display:block !important;
        width:100% !important;
        height:auto !important;
        padding:12px 0 !important;
        border-right:0 !important;
        border-bottom:1px solid rgba(23,55,99,.10) !important;
    }

    #page #content.hotel-detail-modern-page #search-page .booking-search > .row:first-child > div:last-child{
        border-bottom:0 !important;
    }

    #page #content.hotel-detail-modern-page #search-page .booking-search button.btn-primary{
        width:100% !important;
        max-width:none !important;
    }
}



/* PATCH 37 - hotel date spacing */
#page #content.hotel-detail-modern-page .datepicker-wrapper .from-date{
    padding-left:30px !important;
}
#page #content.hotel-detail-modern-page .datepicker-wrapper .to-date{
    padding-left:22px !important;
}
#page #content.hotel-detail-modern-page .datepicker-wrapper > .fa-calendar{
    margin-right:10px !important;
}
#page #content.hotel-detail-modern-page .datepicker-wrapper > .fa-long-arrow-alt-right{
    margin:0 14px !important;
}



/* PATCH 48 - align hotel detail search bar width */
#page #content.hotel-detail-modern-page #search-page > .container,
#page #content.hotel-detail-html-page #search-page > .container{
    max-width:1120px!important;
    width:100%!important;
    padding-left:24px!important;
    padding-right:24px!important;
}

@media(max-width:767px){
    #page #content.hotel-detail-modern-page #search-page > .container,
    #page #content.hotel-detail-html-page #search-page > .container{
        padding-left:15px!important;
        padding-right:15px!important;
    }
}