.flatpickr-calendar.noCalendar.hasTime .flatpickr-time,.numInputWrapper{height:auto}.flatpickr-calendar{background:#fff;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,.08)}.flatpickr-wrapper,.numInputWrapper input,.numInputWrapper span{display:inline-block}.flatpickr-calendar.inline,.flatpickr-calendar.open{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:.3s cubic-bezier(.23,1,.32,1) fpFadeInDown;animation:.3s cubic-bezier(.23,1,.32,1) fpFadeInDown}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none!important;box-shadow:none!important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasTime .dayContainer,.flatpickr-calendar .hasWeeks .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar:after,.flatpickr-calendar:before{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-months .flatpickr-next-month i,.flatpickr-months .flatpickr-prev-month i,.flatpickr-wrapper,.numInputWrapper{position:relative}.flatpickr-months .flatpickr-month,.flatpickr-months .flatpickr-next-month,.flatpickr-months .flatpickr-prev-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;height:34px;color:rgba(0,0,0,.9);fill:rgba(0,0,0,0.9)}.flatpickr-calendar.arrowRight:after,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.rightMost:before{left:auto;right:22px}.flatpickr-calendar.arrowCenter:after,.flatpickr-calendar.arrowCenter:before{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:after,.flatpickr-calendar.arrowTop:before{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:after,.flatpickr-calendar.arrowBottom:before{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active,.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month input.cur-year:focus,.flatpickr-days:focus{outline:0}.flatpickr-months,.flatpickr-weekdays{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.flatpickr-months{display:flex}.flatpickr-months .flatpickr-month{background:0 0;line-height:1;text-align:center;position:relative;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-next-month,.flatpickr-months .flatpickr-prev-month{user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;padding:10px;z-index:3}.flatpickr-months .flatpickr-next-month.flatpickr-disabled,.flatpickr-months .flatpickr-prev-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-next-month.flatpickr-prev-month,.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month{left:0}.flatpickr-months .flatpickr-next-month.flatpickr-next-month,.flatpickr-months .flatpickr-prev-month.flatpickr-next-month{right:0}.flatpickr-months .flatpickr-next-month:hover,.flatpickr-months .flatpickr-prev-month:hover{color:#959ea9}.flatpickr-months .flatpickr-next-month:hover svg,.flatpickr-months .flatpickr-prev-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-next-month svg,.flatpickr-months .flatpickr-prev-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-next-month svg path,.flatpickr-months .flatpickr-prev-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-inner-spin-button,.numInputWrapper input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,.1)}.numInputWrapper span:active{background:rgba(0,0,0,.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.flatpickr-current-month .flatpickr-monthDropdown-months:hover,.flatpickr-current-month span.cur-month:hover,.numInputWrapper:hover{background:rgba(0,0,0,.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0;line-height:1;height:34px;display:flex;justify-content:center;align-items:center;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month .flatpickr-monthDropdown-months,.flatpickr-current-month input.cur-year{color:inherit;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;padding:0 0 0 .5ch;vertical-align:initial;background:0 0}.flatpickr-current-month .numInputWrapper{width:6ch;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,.9)}.flatpickr-current-month input.cur-year{-webkit-box-sizing:border-box;box-sizing:border-box;cursor:text;margin:0;display:inline-block;border:0;border-radius:0;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,.5);background:0 0;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;border:none;border-radius:0;box-sizing:border-box;cursor:pointer;margin:-1px 0 0;outline:0;position:relative;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:0;padding:0}.flatpickr-weekdays{background:0 0;text-align:center;overflow:hidden;width:100%;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:0 0;color:rgba(0,0,0,.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer+.dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:0 0;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day.nextMonthDay:focus,.flatpickr-day.nextMonthDay:hover,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.today.inRange,.flatpickr-day:focus,.flatpickr-day:hover{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:focus,.flatpickr-day.today:hover{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.endRange,.flatpickr-day.endRange.inRange,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.endRange:focus,.flatpickr-day.endRange:hover,.flatpickr-day.selected,.flatpickr-day.selected.inRange,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.selected:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.startRange.inRange,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.startRange:focus,.flatpickr-day.startRange:hover{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.endRange.startRange,.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.endRange.endRange,.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.endRange.startRange.endRange,.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.nextMonthDay,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.prevMonthDay{color:rgba(57,57,57,.3);background:0 0;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,.3);background:0 0;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:0 0;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:700}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-am-pm,.flatpickr-time .flatpickr-time-separator{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:700;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time .flatpickr-am-pm:focus,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time input:hover{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.hostaway-listings {
display: grid;
gap: 30px;
margin: 40px 0;
grid-template-columns: 1fr; } @media (min-width: 768px) {
.hostaway-listings {
grid-template-columns: repeat(2, 1fr);
}
} @media (min-width: 1024px) {
.hostaway-listings {
grid-template-columns: repeat(3, 1fr);
}
}
.hostaway-listing-card.modern-card {
background: #fff;
border-radius: 24px;
padding: 16px;
box-shadow: 0 6px 16px rgba(0,0,0,0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #f0f0f0;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.hostaway-listing-card.modern-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.1);
} .hostaway-listing-card.modern-card .listing-image {
border-radius: 16px;
overflow: hidden;
margin-bottom: 16px;
aspect-ratio: 4/3;
background: #eee;
position: relative;
width: 100%;
}
.hostaway-listing-card.modern-card .listing-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
}
.hostaway-listing-card.modern-card:hover .listing-image img {
transform: scale(1.05);
} .hostaway-listing-card.modern-card .listing-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
gap: 12px;
}
.hostaway-listing-card.modern-card .listing-title {
font-size: 20px;
font-weight: 700;
margin: 0;
line-height: 1.3;
color: #1a1a1a;
flex: 1;
}
.hostaway-listing-card.modern-card .listing-title a {
text-decoration: none;
color: inherit;
box-shadow: none;
}
.hostaway-listing-card.modern-card .listing-price-pill {
background: #f3f4f6;
padding: 6px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 15px;
white-space: nowrap;
color: #1a1a1a;
display: flex;
align-items: center;
gap: 3px;
}
.hostaway-listing-card.modern-card .price-period {
font-size: 13px;
font-weight: 400;
color: #666;
} .hostaway-listing-card.modern-card .listing-rating {
font-size: 13px;
color: #666;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
}
.hostaway-listing-card.modern-card .listing-rating .stars {
color: #ffd700; letter-spacing: 1px;
font-size: 14px;
} .hostaway-listing-card.modern-card .listing-excerpt {
font-size: 14px;
line-height: 1.6;
color: #717171;
margin-bottom: 16px;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
height: 66px; } .hostaway-listing-card.modern-card .listing-location {
font-size: 13px;
color: #888;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
}
.hostaway-listing-card.modern-card .listing-location i {
color: #aaa;
} .hostaway-listing-card.modern-card .listing-amenities-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.hostaway-listing-card.modern-card .amenity-tag {
background: #fff;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
color: #484848;
border: 1px solid #e0e0e0;
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.hostaway-listing-card.modern-card .amenity-tag i {
color: #717171;
font-size: 11px;
} .hostaway-listing-card.modern-card .listing-reserve-btn {
display: block;
background: #000;
color: #fff !important;
text-align: center;
padding: 14px;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: opacity 0.2s;
margin-top: auto;
font-size: 15px;
}
.hostaway-listing-card.modern-card .listing-reserve-btn:hover {
opacity: 0.85;
background: #111;
}
.hostaway-no-results {
text-align: center;
padding: 80px 20px;
color: var(--hostaway-text-light);
font-size: 18px;
background: var(--hostaway-secondary);
border-radius: var(--hostaway-radius);
}
.w-100{
width: 100%!important;
} .hostaway-search-form {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
padding: 40px;
border-radius: var(--hostaway-radius);
box-shadow: var(--hostaway-shadow);
margin: 40px 0;
border: 1px solid var(--hostaway-border);
}
.search-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
align-items: end;
}
.search-field label {
display: block;
margin-bottom: 10px;
font-weight: 600;
font-size: 14px;
color: var(--hostaway-text);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.search-field input,
.search-field select {
width: 100%;
padding: 14px 18px;
border: 2px solid var(--hostaway-border);
border-radius: 8px;
font-size: 15px;
transition: all 0.3s ease;
background: #fff;
}
.search-field input:focus,
.search-field select:focus {
outline: none;
border-color: var(--hostaway-primary);
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
transform: translateY(-2px);
}
.search-submit .button {
width: 100%;
padding: 15px 24px;
font-size: 16px;
font-weight: 700;
border-radius: 8px;
} .hostaway-booking-form-wrapper {
background: #fff;
padding: 0;
border-radius: var(--hostaway-radius);
box-shadow: none;
max-width: 100%;
margin: 0;
}
.hostaway-booking-form .booking-field {
margin-bottom: 24px;
}
.hostaway-booking-form label {
display: block;
margin-bottom: 10px;
font-weight: 600;
font-size: 14px;
color: var(--hostaway-text);
}
.hostaway-booking-form input,
.hostaway-booking-form select,
.hostaway-booking-form textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--hostaway-border);
border-radius: 8px;
font-size: 15px;
font-family: inherit;
transition: all 0.3s ease;
}
.hostaway-booking-form input:focus,
.hostaway-booking-form select:focus,
.hostaway-booking-form textarea:focus {
outline: none;
border-color: var(--hostaway-primary);
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}
.booking-price-summary {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
padding: 24px;
border-radius: 10px;
margin: 24px 0;
border: 2px solid var(--hostaway-border);
}
.booking-price-summary h4 {
margin: 0 0 20px 0;
font-size: 18px;
font-weight: 700;
color: var(--hostaway-text);
}
.price-row {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
font-size: 15px;
color: var(--hostaway-text);
}
.price-row.total {
border-top: 2px solid var(--hostaway-border);
padding-top: 16px;
margin-top: 16px;
font-weight: 700;
font-size: 20px;
color: var(--hostaway-primary);
}
.booking-actions {
display: flex;
gap: 12px;
margin-top: 24px;
}
.booking-actions .button {
flex: 1;
padding: 14px 24px;
font-size: 16px;
font-weight: 600;
text-align: center;
border-radius: 8px;
}
.booking-message {
margin-top: 24px;
}
.booking-message.notice {
padding: 16px 20px;
border-left: 4px solid;
border-radius: 8px;
font-weight: 500;
}
.booking-message.notice-success {
background: #d4edda;
border-color: var(--hostaway-success);
color: #155724;
}
.booking-message.notice-error {
background: #f8d7da;
border-color: var(--hostaway-danger);
color: #721c24;
}
.booking-message.notice-info {
background: #d1ecf1;
border-color: #17a2b8;
color: #0c5460;
} .hostaway-availability-calendar {
background: #fff;
padding: 0;
border-radius: 0;
box-shadow: none;
margin: 0;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.calendar-header h3 {
margin: 0;
font-size: 22px;
font-weight: 700;
color: var(--hostaway-text);
}
.calendar-prev,
.calendar-next {
background: var(--hostaway-primary);
color: #fff;
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
transition: all 0.3s ease;
}
.calendar-prev:hover,
.calendar-next:hover {
background: var(--hostaway-primary-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 115, 170, 0.3);
}
.calendar-body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.calendar-month {
border: 2px solid var(--hostaway-border);
border-radius: 10px;
overflow: hidden;
box-shadow: var(--hostaway-shadow);
}
.calendar-month h4 {
margin: 0;
padding: 18px;
background: linear-gradient(135deg, var(--hostaway-primary) 0%, var(--hostaway-primary-hover) 100%);
text-align: center;
font-size: 17px;
font-weight: 700;
color: #fff;
letter-spacing: 0.5px;
}
.calendar-grid {
width: 100%;
border-collapse: collapse;
}
.calendar-grid th {
padding: 12px 8px;
background: #f8f9fa;
border-bottom: 2px solid var(--hostaway-border);
font-size: 13px;
font-weight: 700;
text-align: center;
color: var(--hostaway-text);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.calendar-grid td {
padding: 10px;
text-align: center;
border: 1px solid #f0f0f0;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.calendar-grid td.empty {
background: #fafafa;
cursor: default;
}
.calendar-day {
position: relative;
border-radius: 6px;
} .calendar-day.available:hover {
background: #c3e6cb;
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}
.calendar-day.booked {
background: #f8d7da;
color: #721c24;
cursor: not-allowed;
}
.calendar-day.unavailable {
background: #e2e3e5;
color: #6c757d;
cursor: not-allowed;
}
.day-number {
display: block;
padding: 8px;
font-weight: 600;
}
.calendar-legend {
display: flex;
gap: 24px;
justify-content: center;
margin-top: 24px;
padding: 20px;
background: var(--hostaway-secondary);
border-radius: 8px;
}
.legend-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 500;
color: var(--hostaway-text);
}
.legend-color {
width: 24px;
height: 24px;
border-radius: 6px;
border: 2px solid var(--hostaway-border);
}
.legend-color.available {
background: #d4edda;
}
.legend-color.booked {
background: #f8d7da;
}
.legend-color.unavailable {
background: #e2e3e5;
}
.calendar-loading {
text-align: center;
padding: 60px;
color: var(--hostaway-text-light);
font-size: 16px;
} @media (max-width: 992px) {
.hostaway-layout-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}
@media (max-width: 768px) {
.hostaway-layout-list .hostaway-listing-card {
grid-template-columns: 1fr;
}
.hostaway-layout-list .listing-image img {
height: 250px;
min-height: auto;
}
.search-fields {
grid-template-columns: 1fr;
}
.booking-actions {
flex-direction: column;
}
.calendar-header {
flex-direction: column;
gap: 15px;
}
.calendar-body {
grid-template-columns: 1fr;
}
.hostaway-search-form {
padding: 30px 20px;
}
.listing-title {
font-size: 20px;
}
.price-amount {
font-size: 24px;
}
}
@media (max-width: 480px) {
.listing-content {
padding: 20px;
}
.listing-amenities {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.listing-amenities .amenity {
width: 100%;
}
.price-amount {
font-size: 22px;
}
.hostaway-booking-form-wrapper {
padding: 0;
}
.calendar-grid th,
.calendar-grid td {
padding: 6px 3px;
font-size: 12px;
}
.day-number {
padding: 6px;
}
} .button-primary {
background: linear-gradient(135deg, var(--hostaway-primary) 0%, var(--hostaway-primary-hover) 100%);
border: none;
color: #fff;
box-shadow: 0 4px 12px rgba(0, 115, 170, 0.3);
}
.button-primary:hover,
.button-primary:focus {
background: linear-gradient(135deg, var(--hostaway-primary-hover) 0%, #003d5c 100%);
box-shadow: 0 6px 20px rgba(0, 115, 170, 0.4);
transform: translateY(-2px);
}
.button-secondary {
background-color: #fff;
border: 2px solid var(--hostaway-border);
color: var(--hostaway-text);
}
.button-secondary:hover,
.button-secondary:focus {
background-color: var(--hostaway-secondary);
border-color: var(--hostaway-text);
transform: translateY(-2px);
}
.button {
display: inline-block;
padding: 12px 24px;
border: 2px solid;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-weight: 600;
letter-spacing: 0.3px;
}
.button:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
} .hostaway-loading {
position: relative;
pointer-events: none;
opacity: 0.6;
}
.hostaway-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin: -12px 0 0 -12px;
border: 3px solid var(--hostaway-border);
border-top-color: var(--hostaway-primary);
border-radius: 50%;
animation: hostaway-spin 0.8s linear infinite;
}
@keyframes hostaway-spin {
to { transform: rotate(360deg); }
} .button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--hostaway-primary);
outline-offset: 2px;
}
.calendar-day:focus-visible {
outline: 2px solid var(--hostaway-primary);
outline-offset: 2px;
} .hostaway-search-form {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 30px 0;
}
.search-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
align-items: end;
}
.search-field label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
.search-field input,
.search-field select {
width: 100%;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.search-field input:focus,
.search-field select:focus {
outline: none;
border-color: #0073aa;
box-shadow: 0 0 0 1px #0073aa;
}
.search-submit .button {
width: 100%;
padding: 12px 20px;
font-size: 15px;
} .hostaway-booking-form-wrapper {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: 30px auto;
}
.hostaway-booking-form .booking-field {
margin-bottom: 20px;
}
.hostaway-booking-form label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
.hostaway-booking-form input,
.hostaway-booking-form select,
.hostaway-booking-form textarea {
width: 100%;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
}
.hostaway-booking-form input:focus,
.hostaway-booking-form select:focus,
.hostaway-booking-form textarea:focus {
outline: none;
border-color: #0073aa;
box-shadow: 0 0 0 1px #0073aa;
}
.booking-price-summary {
background: #f9f9f9;
padding: 20px;
border-radius: 5px;
margin: 20px 0;
}
.booking-price-summary h4 {
margin: 0 0 15px 0;
font-size: 16px;
color: #333;
}
.price-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 14px;
}
.price-row.total {
border-top: 2px solid #ddd;
padding-top: 10px;
margin-top: 10px;
font-weight: 700;
font-size: 16px;
color: #0073aa;
}
.booking-actions {
display: flex;
gap: 10px;
margin-top: 20px;
}
.booking-actions .button {
flex: 1;
padding: 12px 20px;
font-size: 15px;
text-align: center;
}
.booking-message {
margin-top: 20px;
}
.booking-message.notice {
padding: 15px;
border-left: 4px solid;
border-radius: 4px;
}
.booking-message.notice-success {
background: #d4edda;
border-color: #28a745;
color: #155724;
}
.booking-message.notice-error {
background: #f8d7da;
border-color: #dc3545;
color: #721c24;
}
.booking-message.notice-info {
background: #d1ecf1;
border-color: #17a2b8;
color: #0c5460;
} .hostaway-availability-calendar {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 30px 0;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.calendar-header h3 {
margin: 0;
font-size: 20px;
color: #333;
}
.calendar-prev,
.calendar-next {
background: #0073aa;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background 0.2s ease;
}
.calendar-prev:hover,
.calendar-next:hover {
background: #005177;
}
.calendar-body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.calendar-month {
border: 1px solid #e0e0e0;
border-radius: 5px;
overflow: hidden;
}
.calendar-month h4 {
margin: 0;
padding: 15px;
background: #f5f5f5;
text-align: center;
font-size: 16px;
color: #333;
}
.calendar-grid {
width: 100%;
border-collapse: collapse;
}
.calendar-grid th {
padding: 10px 5px;
background: #fafafa;
border-bottom: 1px solid #e0e0e0;
font-size: 12px;
font-weight: 600;
text-align: center;
color: #666;
}
.calendar-grid td {
padding: 8px;
text-align: center;
border: 1px solid #f0f0f0;
font-size: 14px;
cursor: pointer;
transition: background 0.2s ease;
}
.calendar-grid td.empty {
background: #fafafa;
cursor: default;
}
.calendar-day {
position: relative;
} .calendar-day.available:hover {
background: #cbd2cd;
}
.calendar-day.booked {
background: #f8d7da;
cursor: not-allowed;
}
.calendar-day.unavailable {
background: #e2e3e5;
cursor: not-allowed;
}
.day-number {
display: block;
padding: 5px;
}
.calendar-legend {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #666;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 3px;
border: 1px solid #ddd;
}
.legend-color.available {
background: #d4edda;
}
.legend-color.booked {
background: #f8d7da;
}
.legend-color.unavailable {
background: #e2e3e5;
}
.calendar-loading {
text-align: center;
padding: 40px;
color: #666;
} @media (max-width: 768px) {
.hostaway-layout-list .hostaway-listing-card {
grid-template-columns: 1fr;
}
.hostaway-layout-list .listing-image img {
height: 250px;
min-height: auto;
}
.search-fields {
grid-template-columns: 1fr;
}
.booking-actions {
flex-direction: column;
}
.calendar-header {
flex-direction: column;
gap: 15px;
}
.calendar-body {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.listing-amenities {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.price-amount {
font-size: 20px;
}
.hostaway-booking-form-wrapper {
padding: 20px;
}
.calendar-grid th,
.calendar-grid td {
padding: 5px 2px;
font-size: 12px;
}
} .button-primary {
background-color: #0073aa;
border-color: #0073aa;
color: #fff;
}
.button-primary:hover,
.button-primary:focus {
background-color: #005177;
border-color: #005177;
}
.button-secondary {
background-color: #fff;
border-color: #ddd;
color: #333;
}
.button-secondary:hover,
.button-secondary:focus {
background-color: #f5f5f5;
border-color: #ccc;
}
.button {
display: inline-block;
padding: 10px 20px;
border: 1px solid;
border-radius: 4px;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
}
.button:disabled {
opacity: 0.6;
cursor: not-allowed;
} .hostaway-global-search-wrapper {
width: 100%;
}
.hostaway-global-search-container {
background: #e6e7e9;
border: 1px solid #DDDDDD;
border-radius: 50px;
padding: 8px;
display: flex;
align-items: stretch;
gap: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.2s ease;
max-width: 100%;
margin: 0 auto;
}
.hostaway-global-search-container:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.hostaway-search-field {
flex: 1;
padding: 10px 30px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
min-width: 0;
}
.hostaway-search-field label {
font-size: 13px;
font-weight: 700;
color: #222;
margin-bottom: 2px;
display: block;
text-transform: uppercase;
letter-spacing: 0.04em;
flex: 1,
}
.hostaway-search-input {
height: auto!important;
border: none!important;
outline: none!important;
background: transparent!important;
font-size: 14px!important;
color: #717171!important;
padding: 0!important;
width: 100%!important;
font-weight: 400!important;
box-shadow: none!important;
}
.hostaway-search-input:focus {
color: #222!important;
}
.hostaway-search-input::placeholder {
color: #717171!important;
}
.hostaway-search-input option {
color: #222!important;
}
.hostaway-search-divider {
border-left: 1px solid #DDDDDD!important;
}
.hostaway-search-button-wrapper {
padding: 0 8px;
display: flex;
align-items: center;
}
.hostaway-search-button {
border: none;
border-radius: 50%!important;
width: 75px;
height: 75px;
position: relative;
left: 9px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.1s;
color: white;
flex-shrink: 0;
}
.hostaway-search-button:hover {
transform: scale(1.04);
}
.hostaway-search-button:active {
transform: scale(0.96);
}
.hostaway-search-button svg {
fill: white;
stroke: white;
} .hostaway-guests-selector {
position: relative;
width: 100%;
height: 50%;
}
.hostaway-guests-display {
cursor: pointer;
display: flex;
align-items: center;
font-size: 14px;
color: #717171;
}
.hostaway-guests-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 10px);
right: 0;
background: white;
border: 1px solid #DDDDDD;
border-radius: 16px;
padding: 20px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
z-index: 1000;
min-width: 280px;
}
.hostaway-guests-dropdown-menu.show {
display: block;
}
.guests-counter-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.guests-label {
font-size: 16px;
font-weight: 400;
color: #222;
}
.guests-controls {
display: flex;
align-items: center;
gap: 16px;
}
.guests-btn {
width: 32px;
height: 32px;
border: 1px solid #B0B0B0;
border-radius: 50%;
background: white;
color: #717171!important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
padding: 0;
}
.guests-btn:hover:not(:disabled) {
border-color: #222;
color: #222!important;
background: white;
}
.guests-btn:disabled {
border-color: #EBEBEB;
color: #EBEBEB;
cursor: not-allowed;
}
.guests-btn svg {
display: block;
}
.guests-value {
font-size: 16px;
font-weight: 400;
color: #222;
min-width: 30px;
text-align: center;
} .hostaway-location-selector {
position: relative;
width: 100%;
height: 50%;
}
.hostaway-location-display {
cursor: pointer;
display: flex;
align-items: center;
font-size: 14px;
color: #717171;
}
.hostaway-location-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 10px);
left: 0;
background: white;
border: 1px solid #DDDDDD;
border-radius: 16px;
padding: 0;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
z-index: 1000;
min-width: 300px;
max-width: 400px;
}
.hostaway-location-dropdown-menu.show {
display: block;
}
.location-search-box {
padding: 16px;
border-bottom: 1px solid #EBEBEB;
}
.location-search-input {
width: 100%;
padding: 10px 12px;
border: 1px solid #DDDDDD;
border-radius: 8px;
font-size: 14px;
color: #222;
outline: none;
transition: border-color 0.2s;
}
.location-search-input:focus {
border-color: #222;
}
.location-options-list {
max-height: 300px;
overflow-y: auto;
padding: 8px 0;
}
.location-option {
padding: 12px 20px;
cursor: pointer;
font-size: 14px;
color: #222;
transition: background-color 0.2s;
}
.location-option:hover {
background-color: #F7F7F7;
}
.location-option:first-child {
font-weight: 600;
} .location-options-list::-webkit-scrollbar {
width: 6px;
}
.location-options-list::-webkit-scrollbar-track {
background: #F7F7F7;
border-radius: 3px;
}
.location-options-list::-webkit-scrollbar-thumb {
background: #DDDDDD;
border-radius: 3px;
}
.location-options-list::-webkit-scrollbar-thumb:hover {
background: #B0B0B0;
} @media (max-width: 880px) {
.hostaway-global-search-container {
flex-wrap: wrap;
border-radius: 32px;
padding: 8px;
}
.hostaway-search-field {
flex: 1 1 45%;
min-width: 45%;
}
.hostaway-search-field:first-child,
.hostaway-search-field:nth-child(2) {
border-bottom: 1px solid #DDDDDD;
}
.hostaway-search-divider {
border-left: none;
}
.hostaway-search-field:nth-child(odd) {
border-right: 1px solid #DDDDDD;
}
.hostaway-search-button-wrapper {
flex: 1 1 100%;
width: 100%;
padding: 8px;
}
.hostaway-search-button {
width: 100%;
border-radius: 32px!important;
height: 48px;
}
}
@media (max-width: 640px) {
.hostaway-global-search-container {
flex-direction: column;
border-radius: 16px;
padding: 4px;
gap: 4px;
}
.hostaway-search-field {
width: 100%;
flex: 1 1 auto;
border-radius: 12px;
border: none !important;
}
.hostaway-search-divider {
border-left: none;
border-top: none;
}
.hostaway-search-button-wrapper {
width: 100%;
padding: 8px;
}
.hostaway-search-button {
width: 100%;
border-radius: 12px;
height: 48px;
}
.hostaway-guests-dropdown-menu {
right: auto;
left: 0;
}
.hostaway-location-dropdown-menu {
left: 0;
right: auto;
min-width: calc(100vw - 32px);
max-width: calc(100vw - 32px);
}
}  .hostaway-search-wrapper-modern {
animation: fadeInUp 0.4s ease-in;
}
.hostaway-search-summary {
margin-bottom: 40px;
padding-bottom: 24px;
border-bottom: 1px solid #EBEBEB;
}
.search-summary-header {
display: flex;
flex-direction: column;
gap: 12px;
}
.search-results-title {
font-size: 32px;
font-weight: 600;
color: #222;
margin: 0;
letter-spacing: -0.02em;
line-height: 1.2;
}
.search-results-meta {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.search-results-subtitle {
font-size: 16px;
color: #717171;
display: flex;
align-items: center;
gap: 8px;
}
.search-results-subtitle::before {
content: "📅";
font-size: 18px;
}
.search-results-count {
font-size: 14px;
color: #222;
font-weight: 500;
padding: 6px 16px;
background: #F7F7F7;
border-radius: 20px;
} .hostaway-loader-modern {
text-align: center;
padding: 120px 20px;
animation: fadeInUp 0.3s ease-in;
}
.loader-animation {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto 32px;
}
.loader-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.loader-circle {
fill: none;
stroke: #9BD58E;
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 283;
stroke-dashoffset: 283;
animation: loadingCircle 2s ease-in-out infinite;
}
.loader-dots {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
gap: 8px;
z-index: 1;
}
.loader-dots .dot {
width: 12px;
height: 12px;
background: #9BD58E;
border-radius: 50%;
animation: dotPulse 1.4s ease-in-out infinite;
}
.loader-dots .dot:nth-child(2) {
animation-delay: 0.2s;
}
.loader-dots .dot:nth-child(3) {
animation-delay: 0.4s;
}
.loader-title {
font-size: 24px;
font-weight: 600;
color: #222;
margin: 0 0 8px;
}
.loader-subtitle {
font-size: 16px;
color: #717171;
margin: 0;
}
@keyframes loadingCircle {
0% {
stroke-dashoffset: 283;
}
50% {
stroke-dashoffset: 70;
}
100% {
stroke-dashoffset: 283;
}
}
@keyframes dotPulse {
0%, 80%, 100% {
transform: scale(0.8);
opacity: 0.5;
}
40% {
transform: scale(1.2);
opacity: 1;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .hostaway-no-results-modern {
text-align: center;
padding: 100px 20px;
animation: fadeInUp 0.4s ease-in;
}
.no-results-icon {
width: 80px;
height: 80px;
margin: 0 auto 24px;
padding: 20px;
background: #F7F7F7;
border-radius: 50%;
color: #717171;
}
.no-results-icon svg {
width: 100%;
height: 100%;
}
.hostaway-no-results-modern h3 {
font-size: 28px;
font-weight: 600;
margin: 0 0 12px;
color: #222;
}
.hostaway-no-results-modern p {
font-size: 16px;
color: #717171;
margin: 0 0 32px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
.btn-back-to-search {
display: inline-block;
background: #9BD58E;
color: #222;
padding: 14px 28px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.btn-back-to-search:hover {
background: #7AB86D;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(155, 213, 142, 0.3);
} .btn-secondary.sm,
.btn-primary.sm {
padding: 8px 16px!important;
font-size: 14px!important;
border-radius: 4px!important;
width: auto!important;
} .btn-primary,
.btn-secondary {
display: inline-block;
padding: 12px 20px 12px 20px;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
text-decoration: none;
line-height: 1.5;
white-space: nowrap;
}
.btn-primary:disabled,
.btn-secondary:disabled {
opacity: 0.5;
cursor: not-allowed;
} .booking-card .btn-primary,
.booking-card .btn-secondary,
.inquiry-form-section .btn-primary,
.checkout-form-card .btn-primary,
#inquiry-submit-btn,
#finalize-booking-btn {
width: 100%;
margin-bottom: 6px;
}
.checkout-form-card .btn-primary {
margin-bottom: 16px;
}  .flex {
display: flex;
}
.flex-align-center {
align-items: center;
}
.flex-justify-between {
justify-content: space-between;
}
.flex-gap-8 {
display: flex;
gap: 8px;
}
.flex-baseline {
align-items: baseline;
}
.flex-1 {
flex: 1;
} .grid-cols-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.grid-cols-2-gap25 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
} .mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.pt-16 { padding-top: 16px; }
.pt-20 { padding-top: 20px; } .border-top {
border-top: 1px solid #ddd;
}
.border-top-ebebeb {
border-top: 1px solid #ebebeb;
}
.border-bottom {
border-bottom: 1px solid #eee;
}
.hr-divider {
border: none;
border-top: 1px solid #ebebeb;
margin: 20px 0;
}
.border-radius-8 {
border-radius: 8px;
}
.border-radius-12 {
border-radius: 12px;
} .hidden {
display: none;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
} .text-center {
text-align: center;
}
.text-14 {
font-size: 14px;
}
.text-16 {
font-size: 16px;
}
.font-600 {
font-weight: 600;
}
.text-color-secondary {
color: #717171;
}
.text-color-primary {
color: #222;
}
.text-color-discount {
color: #008009;
}
.text-underline {
text-decoration: underline;
}
.whitespace-nowrap {
white-space: nowrap;
}
.line-height-26 {
line-height: 26px;
} .width-100 {
width: 100%;
} .bg-f7f7f7 {
background: #f7f7f7;
}
.bg-f7-padding {
padding: 20px;
background: #f7f7f7;
border-radius: 12px;
}
.bg-black {
background: #000;
} .booking-input,
.input-default {
border: 1px solid #b0b0b0;
padding: 12px;
width: 100%;
border-radius: 8px;
margin-bottom: 8px;
}
.input-default:focus,
.booking-input:focus {
outline: none;
border-color: #222;
}
.input-flex-1 {
flex: 1;
border: 1px solid #b0b0b0;
padding: 10px;
border-radius: 8px;
font-size: 14px;
}
.textarea-default {
border: 1px solid #b0b0b0;
padding: 12px;
width: 100%;
border-radius: 8px;
height: 80px;
margin-bottom: 12px;
}
.coupon-label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
}
.coupon-message {
margin-top: 8px;
padding: 8px;
border-radius: 4px;
font-size: 13px;
display: none;
}
.coupon-input-wrapper {
display: flex;
gap: 8px;
} .summary-row {
display: flex;
justify-content: space-between;
}
.summary-label {
font-size: 16px;
}
.summary-value {
font-size: 16px;
}
.summary-total .summary-row .summary-label {
font-weight: 700;
font-size: 20px;
}
.summary-total .summary-row .summary-value {
font-weight: 700;
font-size: 20px;
} .other-fee-row {
border-top: 1px dashed #ddd;
padding-top: 10px;
margin-top: 10px;
color: #666;
} .section-title,
.hostaway-title,
.section-heading {
font-size: 16px;
font-weight: 600;
margin: 0 0 12px 0;
}
.section-heading-h2 {
margin-bottom: 24px;
} .contact-fields-section {
display: none;
margin-top: 16px;
border-top: 1px solid #ddd;
padding-top: 16px;
} .map-container {
height: 250px;
background: #eee;
border-radius: 12px;
margin-top: 24px;
position: relative;
}
.map-iframe {
border: 0;
border-radius: 12px;
} .description-content {
font-size: 16px;
line-height: 26px;
}
.description-color {
font-size: 14px;
color: #484848;
} .amenity-item-padding {
padding: 16px 0;
border-bottom: 1px solid #eee;
}
.amenity-item-mb {
margin-bottom: 8px;
} .rating-display {
margin-top: 8px;
font-weight: 600;
display: flex;
align-items: center;
} .relative {
position: relative;
}
.ml-4 {
margin-left: 4px;
}
.ml-12 {
margin-left: 12px;
} .contact-fields-section {
display: none;
margin-top: 16px;
border-top: 1px solid #ddd;
padding-top: 16px;
}
.section-title {
margin: 0 0 12px 0;
font-size: 16px;
}
.section-heading-h2 {
margin-bottom: 24px;
} .description-truncated {
margin-top: 16px;
}
.description-content {
font-size: 16px;
line-height: 26px;
}
.description-color {
font-size: 14px;
color: #484848;
} .gallery-grid-relative {
position: relative;
}
.gallery-item-video-bg {
background: #000;
}
.gallery-item-placeholder {
background: #f7f7f7;
}
.video-full-size {
width: 100%;
height: 100%;
object-fit: cover;
} .rating-section {
margin-top: 8px;
font-weight: 600;
display: flex;
align-items: center;
}
.review-link-underline {
text-decoration: underline;
margin-left: 4px;
} .amenity-item-spacing {
margin-bottom: 8px;
}
.amenity-item-border {
padding: 16px 0;
border-bottom: 1px solid #eee;
} .loading-placeholder {
padding: 20px;
background: #f7f7f7;
width: 100%;
text-align: center;
border-radius: 12px;
}
.date-instruction {
margin-top: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.date-instruction-text {
font-size: 14px;
color: #717171;
} .grid-cols-2-gap24 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
} .map-container-large {
height: 250px;
background: #eee;
border-radius: 12px;
margin-top: 24px;
position: relative;
}
.map-iframe-rounded {
border: 0;
border-radius: 12px;
} .calendar-wrapper-visible {
display: block;
overflow-x: visible;
} .map-placeholder {
height: 400px;
background: #f0f0f0;
border-radius: 8px;
}
.map-placeholder-text {
text-align: center;
padding-top: 180px;
color: #666;
} @media (max-width: 768px) {
.search-results-title {
font-size: 24px;
}
.search-results-meta {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.loader-animation {
width: 100px;
height: 100px;
}
.loader-title {
font-size: 20px;
}
.hostaway-no-results-modern {
padding: 60px 20px;
}
.hostaway-no-results-modern h3 {
font-size: 22px;
}
} .hostaway-toast-container {
position: fixed;
z-index: 999999;
display: flex;
flex-direction: column;
gap: 12px;
pointer-events: none;
width: 400px;
max-width: calc(100vw - 48px);
} .hostaway-toast-container.htc-top-right    { top: 24px;    right: 24px; }
.hostaway-toast-container.htc-top-left     { top: 24px;    left: 24px; }
.hostaway-toast-container.htc-top-center   { top: 24px;    left: 50%; transform: translateX(-50%); }
.hostaway-toast-container.htc-bottom-right { bottom: 24px; right: 24px; flex-direction: column-reverse; }
.hostaway-toast-container.htc-bottom-left  { bottom: 24px; left: 24px;  flex-direction: column-reverse; }
.hostaway-toast-container.htc-bottom-center{ bottom: 24px; left: 50%; transform: translateX(-50%); flex-direction: column-reverse; } .hostaway-toast-container:not([class*="htc-"]) { top: 24px; right: 24px; }
.hostaway-toast {
display: flex;
align-items: center;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
overflow: hidden;
pointer-events: all;
opacity: 0;
transition: transform 0.35s cubic-bezier(0.21, 1.02, 0.73, 1), opacity 0.35s ease;
min-height: 76px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
} .hostaway-toast-container.htc-top-right    .hostaway-toast,
.hostaway-toast-container.htc-bottom-right .hostaway-toast,
.hostaway-toast-container:not([class*="htc-"]) .hostaway-toast {
transform: translateX(120%);
}
.hostaway-toast-container.htc-top-left    .hostaway-toast,
.hostaway-toast-container.htc-bottom-left .hostaway-toast {
transform: translateX(-120%);
}
.hostaway-toast-container.htc-top-center    .hostaway-toast {
transform: translateY(-24px);
}
.hostaway-toast-container.htc-bottom-center .hostaway-toast {
transform: translateY(24px);
}
.hostaway-toast.is-visible {
transform: translate(0, 0) !important;
opacity: 1;
}
.hostaway-toast.is-hiding {
opacity: 0;
transition: transform 0.35s ease, opacity 0.35s ease;
} .hostaway-toast-container.htc-top-right    .hostaway-toast.is-hiding,
.hostaway-toast-container.htc-bottom-right .hostaway-toast.is-hiding,
.hostaway-toast-container:not([class*="htc-"]) .hostaway-toast.is-hiding {
transform: translateX(120%);
}
.hostaway-toast-container.htc-top-left    .hostaway-toast.is-hiding,
.hostaway-toast-container.htc-bottom-left .hostaway-toast.is-hiding {
transform: translateX(-120%);
}
.hostaway-toast-container.htc-top-center    .hostaway-toast.is-hiding {
transform: translateY(-24px);
}
.hostaway-toast-container.htc-bottom-center .hostaway-toast.is-hiding {
transform: translateY(24px);
} .hostaway-toast__border {
width: 5px;
align-self: stretch;
flex-shrink: 0;
border-radius: 0;
}
.hostaway-toast--success .hostaway-toast__border { background: #2ecc71; }
.hostaway-toast--error   .hostaway-toast__border { background: #f05252; }
.hostaway-toast--warning .hostaway-toast__border { background: #f59e0b; }
.hostaway-toast--info    .hostaway-toast__border { background: #3b82f6; } .hostaway-toast__icon {
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin: 0 14px;
border: 2px solid;
}
.hostaway-toast--success .hostaway-toast__icon { color: #2ecc71; border-color: #2ecc71; }
.hostaway-toast--error   .hostaway-toast__icon { color: #f05252; border-color: #f05252; }
.hostaway-toast--warning .hostaway-toast__icon { color: #f59e0b; border-color: #f59e0b; }
.hostaway-toast--info    .hostaway-toast__icon { color: #3b82f6; border-color: #3b82f6; }
.hostaway-toast__icon svg {
width: 20px;
height: 20px;
display: block;
} .hostaway-toast__content {
flex: 1;
padding: 16px 8px 16px 0;
min-width: 0;
}
.hostaway-toast__title {
font-size: 15px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 4px 0;
line-height: 1.3;
}
.hostaway-toast__message {
font-size: 13px;
color: #6b7280;
margin: 0;
line-height: 1.45;
word-break: break-word;
} .hostaway-toast__close {
background: none !important;
border: none !important;
border-left: 1px solid #f3f4f6 !important;
color: #9ca3af !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.6px !important;
cursor: pointer !important;
padding: 0 18px !important;
align-self: stretch !important;
display: flex !important;
align-items: center !important;
transition: color 0.2s !important;
flex-shrink: 0 !important;
text-transform: uppercase !important;
font-family: inherit !important;
line-height: 1 !important;
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 !important;
}
.hostaway-toast__close:hover {
color: #374151 !important;
background: none !important;
}
@media (max-width: 480px) {
.hostaway-toast-container {
top: 16px !important;
bottom: auto !important;
right: 16px !important;
left: 16px !important;
width: auto !important;
max-width: none !important;
transform: none !important;
flex-direction: column !important;
}
.hostaway-toast-container.htc-bottom-right,
.hostaway-toast-container.htc-bottom-left,
.hostaway-toast-container.htc-bottom-center {
top: 16px !important;
bottom: auto !important;
}
} .hostaway-payment-alert {
position: fixed;
bottom: 24px;
right: 24px;
background: linear-gradient(135deg, #f3f3f3 0%, #ffffff 100%);
border-radius: 16px;
box-shadow: 0 12px 32px rgba(102, 126, 234, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 999999;
max-width: 420px;
min-width: 420px;
transform: translateY(calc(100% + 24px));
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
opacity: 0;
overflow: hidden;
padding: 10px 10px;
} .hostaway-payment-alert[style*="display: none"],
.hostaway-payment-alert[style*="display:none"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
} .payment-modal .hostaway-payment-alert,
.payment-modal-content .hostaway-payment-alert,
iframe .hostaway-payment-alert {
display: none !important;
visibility: hidden !important;
}
.hostaway-payment-alert::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
pointer-events: none;
}
.hostaway-payment-alert.is-visible {
transform: translateY(0);
opacity: 1;
}
.hostaway-payment-alert__close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border-radius: 50%!important;
border: none;
background: transparent!important;
color: #222222!important;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
padding: 0!important;
z-index: 10;
}
.hostaway-payment-alert__close svg {
width: 18px;
height: 18px;
}
.hostaway-payment-alert__close:hover {
color: #fff;
transform: scale(1.1);
}
.hostaway-payment-alert__close:active {
transform: scale(0.9);
}
.hostaway-payment-alert__content {
display: flex;
align-items: center;
gap: 16px;
position: relative;
margin-bottom: 16px;
}
.hostaway-payment-alert__icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: #E31A34!important;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hostaway-payment-alert__icon svg {
width: 26px;
height: 26px;
color: #fff;
}
.hostaway-payment-alert__text {
flex: 1;
min-width: 0;
padding-right: 30px;
}
.hostaway-payment-alert__title {
font-size: 16px;
font-weight: 700;
color: #222222;
margin-bottom: 4px;
line-height: 1.3;
letter-spacing: -0.01em;
}
.hostaway-payment-alert__subtitle {
font-size: 13px;
color: #222222;
line-height: 1.4;
}
.hostaway-payment-alert__actions {
display: flex;
justify-content: flex-end;
}
.hostaway-payment-alert__btn {
font-size: 14px!important;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border: none;
display: flex;
align-items: center;
gap: 8px;
}
.hostaway-payment-alert__btn svg {
width: 18px;
height: 18px;
}
.hostaway-payment-alert__btn--primary {
background: #fff;
color: #667eea;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.hostaway-payment-alert__btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.hostaway-payment-alert__btn--primary:active {
transform: translateY(0);
} .hostaway-payment-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999999;
display: flex;
align-items: center;
justify-content: center;
}
.hostaway-payment-modal__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.65);
}
.hostaway-payment-modal__content {
position: relative;
background: #fff;
border-radius: 12px;
width: 90%;
max-width: 800px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.hostaway-payment-modal__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid #ebebeb;
}
.hostaway-payment-modal__header h2 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: #222;
}
.hostaway-payment-modal__close {
background: none;
border: none;
font-size: 32px;
line-height: 1;
color: #717171;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
}
.hostaway-payment-modal__close:hover {
color: #222;
}
.hostaway-payment-modal__body {
flex: 1;
overflow: hidden;
position: relative;
}
#hostaway-payment-iframe-container {
width: 100%;
height: 100%;
min-height: 500px;
}
#hostaway-payment-iframe-container iframe {
width: 100%;
height: 600px;
border: none;
}
.hostaway-payment-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
}
.hostaway-payment-spinner {
width: 48px;
height: 48px;
border: 4px solid #f0f0f0;
border-top-color: #E61E4D;
border-radius: 50%;
animation: hostaway-payment-spin 1s linear infinite;
}
@keyframes hostaway-payment-spin {
to { transform: rotate(360deg); }
}
.hostaway-payment-loading p {
margin-top: 20px;
font-size: 16px;
color: #717171;
} @media (max-width: 768px) {
.hostaway-payment-alert {
bottom: 16px;
right: 16px;
left: 16px;
max-width: none;
border-radius: 14px;
padding: 18px 20px;
}
.hostaway-payment-alert__close {
top: 10px;
right: 10px;
width: 28px;
height: 28px;
}
.hostaway-payment-alert__close svg {
width: 16px;
height: 16px;
}
.hostaway-payment-alert__content {
gap: 14px;
margin-bottom: 14px;
}
.hostaway-payment-alert__icon {
width: 44px;
height: 44px;
}
.hostaway-payment-alert__icon svg {
width: 24px;
height: 24px;
}
.hostaway-payment-alert__title {
font-size: 15px;
}
.hostaway-payment-alert__subtitle {
font-size: 12px;
}
.hostaway-payment-alert__actions {
justify-content: stretch;
}
.hostaway-payment-alert__btn {
padding: 11px 20px;
font-size: 13px;
flex: 1;
justify-content: center;
}
.hostaway-payment-alert__btn svg {
width: 16px;
height: 16px;
}
.hostaway-payment-modal__content {
width: 95%;
max-height: 95vh;
}
#hostaway-payment-iframe-container iframe {
height: 500px;
}
}