/* Sanbis custom styles — moved out of chalet/style.css so theme/plugin updates can't wipe them. Enqueued by mu-plugins/sanbis-custom-css.php */

/* CUSTOM STYLING */

/* Make "Guests" label and number inline */
.hsbw-field-content {
  display: flex;
  align-items: center;
  gap: 20px; /* adjust spacing if needed */
}

.hsbw-field-content .hsbw-label,
.hsbw-field-content .hsbw-value {
  display: inline-block;
  margin: 0;
}

.broken_link {
	text-decoration: none !important;
}

.hsbw-location-search {
    background-color: #feefe4;
}

.qodef-custom-styles {
    vertical-align: -0.25em !important;
}

.daRPHL {
	background-color: #ffffff !important;
}


.qodef-header-navigation ul li.qodef-menu-item--wide .qodef-drop-down-second-inner>ul>li ul li>a {
    font-family: 'Poppins', sans-serif;
}

.qodef-header-navigation ul li.qodef-menu-item--wide .qodef-drop-down-second-inner>ul>li ul li>a:hover {
    color: #FEC89A !important;
}

.qodef-header-navigation ul li.qodef-menu-item--wide .qodef-drop-down-second-inner>ul>li ul li.current-menu-item>a {
    color: #FFB5A7 !important;
	font-style:italic;
}


.qodef-header-navigation ul li.qodef-menu-item--wide .qodef-drop-down-second-inner>ul>li>a {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
}

.qodef-header-navigation>ul>li>a {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;
}

.qodef-header-navigation>ul>li.qodef-menu-item--narrow ul li>a:hover {
    color: #FEC89A !important;
}

.qodef-header-navigation>ul>li.qodef-menu-item--narrow ul li.current-menu-item>a {
    color: #FFB5A7 !important;
	font-style:italic;
}

.qodef-room-reservation-filter .qodef-m-field input, .qodef-room-reservation-filter .qodef-m-field select {
    font-family: 'Poppins', sans-serif;
	font-weight: 300;
}

.qodef-room-reservation-filter .qodef-m-field.qodef--room-amount .qodef-e-input, .qodef-room-reservation-filter .qodef-m-field.qodef--room-type .qodef-e-input {
    padding-left: 53px;
}

.qodef-button.qodef-html--link {
    font-family: 'Poppins', sans-serif !important;
	padding: 22px 98px 20px 98px;
}

.qodef-section-title .qodef-custom-styles {
	font-style: normal;
    font-family: 'milkshake-script';
	text-transform: capitalize;
}

.qodef-blog .qodef-blog-item .qodef-e-media .qodef-image-date a {
    margin-bottom: -4px;
}

.qodef-weather-widget .qodef-e-main-temperature .qodef-m-temperature {
    font-family: "Mansory", sans-serif;
}

.qodef-weather-widget.qodef-layout--compact .qodef-m-other-days .qodef-m-temperature {
    font-family: "Mansory", sans-serif;
}

.qodef-weather-widget.qodef-layout--compact .qodef-m-other-days .qodef-m-day {
    font-family: 'Poppins', sans-serif;
}

.qodef-room .qodef-e-amenity-items .qodef-e-amenity-item {
    line-height: 1.75em;
}

#qodef-room-reservation-form .qodef-m-field.qodef--price .qodef-m-price {
    font-family: 'Poppins', sans-serif;
}

.qodef-e-seasonal-item-price {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.qodef-button.qodef-layout--textual {
    color: #010101;
}

.qodef-button.qodef-layout--textual:hover {
    color: #010101;
}

h3.qodef-e-text {
    font-family: 'Poppins', sans-serif;
	text-transform: none;
	font-size: 22px;
	color: #FFFAF3;
	line-height: 1.5em;
}

.qodef-testimonials-list .qodef-e-author {
    font-family: 'milkshake-script';
	font-weight: 200;
    font-size: 40px;
	color: #FFFAF3;
    text-transform: capitalize;
}

.qodef-testimonials-list .qodef-e-author-job {
    color: #FFFAF3;
    font-family: 'Poppins', sans-serif;
	font-weight: 300;
}

.qodef-testimonials-list .qodef-e-inner {
    margin: 0 auto 48px 25%;
    max-width: 1040px;
}

.swiper-button-next.swiper-button-outside, .swiper-button-prev.swiper-button-outside {
    color: #FFFAF3;
}

.qodef-header-sticky .qodef-header-sticky-inner {
    border-bottom-color: #FFE7D7 !important;
}

/* Header backgrounds → #fffaf4. Sticky header on every page + the header on inner pages;
   the homepage header stays transparent (over the hero). */
.qodef-header-sticky {
    background-color: #fffaf4 !important;
}
body:not(.home) #qodef-page-header {
    background-color: #fffaf6 !important;
}
/* Header dropdowns + mega (wide) menu backgrounds */
#qodef-page-header .qodef-drop-down-second,
#qodef-page-header ul.sub-menu {
    background-color: #fffaf6 !important;
}
/* Menu: force active / current-page links to Poppins */
#qodef-page-header .menu-item.current-menu-item > a,
#qodef-page-header .menu-item.current-menu-item > a .qodef-menu-item-text,
#qodef-page-header .menu-item.current_page_item > a,
#qodef-page-header .menu-item.current_page_item > a .qodef-menu-item-text,
#qodef-page-header .menu-item.current-menu-ancestor > a,
#qodef-page-header .menu-item.current-menu-ancestor > a .qodef-menu-item-text,
#qodef-page-header .menu-item.current-menu-parent > a,
#qodef-page-header .menu-item.current-menu-parent > a .qodef-menu-item-text {
    font-family: "Poppins", sans-serif !important;
}

/* ============================================================
   PROPERTY CARDS (all-properties grid, related, carousels)
   ============================================================ */

/* Square edges + 1px peach border */
.hostaway-property-card {
    border-radius: 0 !important;
    border: 1px solid #fec89a !important;
}
.hostaway-property-card .property-card-image,
.hostaway-property-card .property-carousel {
    border-radius: 0 !important;
}

/* No shadow on hover */
.hostaway-property-card:hover {
    box-shadow: none !important;
}

/* Meta + location icons → peach (star rating stays gold) */
.property-card-meta .meta-icon,
.property-location svg {
    color: #fec89a !important;
}
.property-card-meta {
    row-gap: 4px;
}
/* Location: match the guests/bedrooms text colour and icon size */
.property-location {
    color: #222 !important;
}
.property-location svg {
    width: 18px !important;
    height: 18px !important;
}
/* Pets / pool icons to the right of the location, with hover tooltips */
.property-location .card-amenities {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}
.property-location .card-amenity {
    position: relative;
    display: inline-flex;
    line-height: 0;
}
.property-location .card-amenity svg {
    width: 20px !important;
    height: 20px !important;
    color: #fec89a !important;
}
/* Right-anchored so the tooltip stays inside the card (which is overflow:hidden) */
.property-location .card-amenity[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #4a4038;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    /* explicit line-height so the dark background isn't hugging the text */
    line-height: 1.5;
    white-space: nowrap;
    padding: 7px 11px;
    z-index: 30;
    pointer-events: none;
}

/* Badges (Sleeps X + rating): uppercase, 400, centered, square, shorter */
.property-badges li {
    border-radius: 0 !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 3px 11px !important;
}
/* Rating star: bigger + a touch deeper gold */
.property-badges li svg,
.property-badges li .rating-star {
    color: #F5B301 !important;
    width: 15px !important;
    height: 15px !important;
}

/* Carousel arrows: the plugin's border chevron (::before) sits off-centre, so
   use swiffy's own masked chevron (::after) darkened + centred instead. */
.hostaway-property-card .property-carousel .slider-nav.hostaway-slider-nav::before {
    display: none !important;
}
.hostaway-property-card .property-carousel .slider-nav.hostaway-slider-nav::after {
    display: block !important;
    background: #333 !important;
    width: 14px !important;
    height: 14px !important;
}
/* Arrows appear only on hover of the card (also overrides the mobile always-on) */
.property-carousel .slider-nav {
    opacity: 0 !important;
}
.hostaway-property-card:hover .property-carousel .slider-nav {
    opacity: 1 !important;
}

/* Homepage "Explore Our Stays" carousel of cards:
   1) the scroll container's overflow:hidden was shaving the leftmost card's 1px
      border on navigation — expand the clip area (padding) without shifting the
      cards (matching negative margin) and inset the snap start (scroll-padding).
   2) carousel nav arrows → peach chevron, no drop-shadow. */
.hostaway-properties-carousel .slider-container {
    padding: 4px !important;
    margin: -4px !important;
    scroll-padding: 4px !important;
}
.hostaway-properties-carousel > .slider-nav {
    filter: none !important;
}
.hostaway-properties-carousel > .slider-nav::after {
    background: #fec89a !important;
}

/* Homepage "Explore Our Stays" carousel: show 3 (desktop) → 2 (tablet) → 1 (mobile).
   The plugin's `flex: 0 0 auto` on .carousel-item defeats swiffy-slider's own responsive
   sizing (which was collapsing straight to 1), so set the item width directly per breakpoint. */
.hostaway-properties-carousel .carousel-item {
    flex: 0 0 calc((100% - 48px) / 3) !important;
    width: calc((100% - 48px) / 3) !important;
    max-width: calc((100% - 48px) / 3) !important;
}
@media (max-width: 1024px) {
    .hostaway-properties-carousel .carousel-item {
        flex-basis: calc((100% - 24px) / 2) !important;
        width: calc((100% - 24px) / 2) !important;
        max-width: calc((100% - 24px) / 2) !important;
    }
}
@media (max-width: 768px) {
    .hostaway-properties-carousel .carousel-item {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Property card title: peach (not pink) on hover */
.hostaway-property-card .property-card-title a:hover {
    color: #fec89a !important;
}

/* Pagination: square, 400, uppercase, peach selected */
.hostaway-pagination a,
.hostaway-pagination span {
    border-radius: 0 !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    border-color: #fec89a !important;
}
.hostaway-pagination a:hover {
    background: #fffaf6 !important;
    border-color: #f6a765 !important;
}
.hostaway-pagination .current,
.hostaway-pagination li.active span,
.hostaway-pagination li.active a {
    background: #fec89a !important;
    border-color: #fec89a !important;
    color: #fff !important;
}

/* Hide the "XX properties found" bar */
.map-results-count {
    display: none !important;
}

.qodef-room-list.qodef--has-appear.qodef--appeared .qodef-m-title .qodef-custom-styles {
    font-family: milkshake-script;
    text-transform: capitalize;
}

.qodef-room-list .qodef-e-capacity svg {
    color: #FFB5A7;
}

.svg-white svg path{
    fill: #ffffff !important;
}

.hsbw-field-icon {
    -webkit-box-align: center;
    align-items: center;
    border-radius: 0;
    border-style: solid;
    border-width: 0.0625rem;
    display: flex;
    font-size: 2.5rem;
    height: 1em;
    -webkit-box-pack: center;
    justify-content: center;
    margin-right: 0.75rem;
    width: 1em;
    background-color: #ffefe5 !important;
    border-color: #fec89a !important;
}

.hsbw-label {
	margin-bottom: 0em !important;
    font-weight: 400 !important;
	letter-spacing: .1em;
    font-size: 12px !important;
	text-transform: uppercase;
    line-height: 1rem;
    color: #010101 !important;
}

.hsbw-main-button {
	font-family: 'Poppins', sans-serif !important;
	font-size: 14px !important;
    font-weight: 400 !important;
	letter-spacing: .15em;
	text-transform: uppercase;
	line-height: 1em !important;
}
.hsbw-main-button:hover {
    color;
}

.hsbw-calendar-container {
    display: flex;
    text-transform: uppercase;
    font-size: 12px;
}

.hsbw-calendar-clear {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #010101 !important;
    background-color: #ffffff !important;
    font-weight: 600 !important;
    border-width: 1px !important;
    margin-right: 40px !important;
    margin-bottom: 10px !important;
    padding: 6px 10px !important;
}

.hsbw-calendar-clear:hover {
    background-color: #ffefe5 !important;
}

.hsbw-value {
    color: #b7967a !important;
    font-size: 14px !important;
}

.hsbw-location-search {
    font-family: 'Poppins', sans-serif;
    color: #b7967a !important;
	font-size: 14px !important;
}

.hsbw-popup_inner {
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 13px !important;
}

.hsbw-popup {
    cursor: pointer;
}

.hsbw {
    margin: auto !important;
}

.hsbw-value {
    margin-bottom: -2px !important;
}

qodef-content-full-width.widget widget_block widget_text.p {
	margin: 0 !important;
}

.hashbar-announcement-content p
 {
    font-family: 'Poppins' !important;
    letter-spacing: 0;
	font-style: italic;
	color: #dd9960;
}

/* Single property footer — force full width.
   The Hostaway plugin's single-property.php leaves Chalet's #qodef-page-inner
   (1400px content grid) open around the footer, so #colophon inherits that width.
   Break it out to the full viewport. Scoped to property pages only. */
.single-property #colophon {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Property pages: remove the 20px gap below the footer.
   #qodef-page-inner (content grid) has padding-bottom:20px; because the plugin
   template leaves the footer nested inside it, that padding shows under the footer. */
.single-property #qodef-page-inner {
    padding-top: 0;
    padding-bottom: 0;
}

/* Property pages: hide Chalet's duplicate title bar (it shows the title ABOVE the
   gallery and adds a large gap). The plugin's own H1 sits below the gallery, above
   Overview — so removing this leaves the heading in the right place and pulls the
   gallery up to just beneath the site header. */
.single-property .qodef-page-title {
    display: none;
}
.single-property .property-gallery {
    margin-top: 0;
}

/* Property card meta — icon + number (icons replace the Guests/Bedrooms/Baths words) */
.property-card-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.property-card-meta .meta-icon {
    flex: none;
    opacity: .85;
}

/* Property pages: white page background */
body.single-property,
body.single-property #qodef-page-outer,
body.single-property #qodef-page-inner {
    background-color: #ffffff;
}

/* Property gallery: full-bleed to the screen width, square corners, and keep the
   image collage inside its box so the main image can't overflow onto the title. */
.single-property .property-gallery {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.single-property .headline-image-grid {
    overflow: hidden;
}
.single-property .headline-image-grid .grid-item {
    border-radius: 0;
}
@media (min-width: 769px) {
    .single-property .headline-image-grid {
        height: 500px;
        grid-template-rows: 1fr 1fr;
    }
}

/* Property facts strip (Guests / Bedrooms / Bathrooms / Location / Pets) in the amenities section */
.property-facts {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 18px 0 22px;
}
.property-facts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}
.property-facts .fact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #222;
}
.property-facts .fact svg {
    flex: none;
    color: #ffc899;
}
/* Star rating fact: gold star */
.property-facts .fact svg.fact-star {
    fill: #F5B301 !important;
    color: #F5B301;
}
/* Pet-friendly / pool icons (icon-only + tooltip) to the right of the location */
.property-facts .fact-amenities {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.property-facts .fact-amenity {
    position: relative;
    display: inline-flex;
    line-height: 0;
    color: #ffc899;
}
.property-facts .fact-amenity svg {
    width: 22px;
    height: 22px;
}
.property-facts .fact-amenity[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #4a4038;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    padding: 6px 10px;
    z-index: 30;
    pointer-events: none;
}

/* Amenity list icons */
.single-property .amenity-icon i,
.single-property .amenity-icon svg {
    color: #ffc899;
}

/* Property title size + align its top with the booking widget on the right */
.single-property .property-title {
    font-size: 40px;
    margin-top: 0 !important;
}

/* Inline guest counter (no dropdown): "Guests" label + [-] count [+] */
body.single-property .guestHolder--inline {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border: none;
    border-radius: 0;
}
body.single-property .guestHolder--inline .guestHolder__inlineLabel {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #010101;
}
body.single-property .guestHolder--inline .guestHolder__inlineControls {
    display: flex;
    align-items: center;
    gap: 12px;
}
body.single-property .guestHolder--inline .guestHolder__inlineCount {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    min-width: 58px;
    text-align: center;
    color: #010101;
}
body.single-property .guestHolder--inline .changeValBtnsingle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #FEC89A;
    border-radius: 50%;
    background: #ffffff;
    color: #010101;
    cursor: pointer;
}
body.single-property .guestHolder--inline .changeValBtnsingle:hover:not(:disabled) {
    background: #FFEFE5;
}
body.single-property .guestHolder--inline .changeValBtnsingle:disabled {
    opacity: .4;
    cursor: not-allowed;
}
body.single-property .guestHolder--inline .changeValBtnsingle svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}
body.single-property .guestHolder--inline #guestinput {
    display: none !important;
}

/* Booking widget card: peach border, no shadow, square corners */
body.single-property .booking-widget-sticky .booking-widget {
    border: 1px solid #FEC89A;
    border-radius: 0;
    box-shadow: none;
}

/* Booking notifications (e.g. "Minimum stay is X nights") → bottom-right instead of top-right */
body.single-property .notification {
    top: auto !important;
    bottom: 20px !important;
}

/* Remove the "Check Availability" button — pricing auto-calculates when dates/guests change */
body.single-property .booking-widget-sticky .btn-book-now:not(.bookbtn) {
    display: none !important;
}

/* Reserve button: square edges, peach, Poppins uppercase 400 */
body.single-property .booking-widget-sticky .btn-book-now.bookbtn {
    background: #FEC89A !important;
    color: #010101 !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: .12em;
}
body.single-property .booking-widget-sticky .btn-book-now.bookbtn:hover {
    background: #fbb87f !important;
    box-shadow: none !important;
    transform: none !important;
}

/* "View all photos" gallery button: match the other buttons (peach, square, Poppins uppercase 400) */
body.single-property .headline-image-grid .grid-item .overlay {
    background: #FEC89A !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em;
    gap: 0 !important;
}
body.single-property .headline-image-grid .grid-item .overlay:hover {
    background: #fbb87f !important;
}

/* Hide the Sleeping Arrangements section (room types from API pull in "Common Area" — hidden pending fix) */
body.single-property #rooms {
    display: none !important;
}

/* Hide the standalone Availability Calendar section further down the page */
body.single-property #availability-calendar {
    display: none !important;
}

/* Read more links: Poppins, peach */
body.single-property .read-more-btn {
    font-family: 'Poppins', sans-serif !important;
    color: #ffc899 !important;
}

/* "Show all amenities" button: Sanbis button styling (peach, square, Poppins uppercase 400, no icon) */
body.single-property .show-all-amenities-btn {
    background: #FEC89A !important;
    color: #010101 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em;
    gap: 0 !important;
}
body.single-property .show-all-amenities-btn:hover {
    background: #fbb87f !important;
}
body.single-property .show-all-amenities-btn i {
    display: none !important;
}

/* Price loader dots → peach */
body.single-property .price-breakdown .loader span {
    background: #ffc899 !important;
}

/* Remove the "Overview" heading (keep the description) */
body.single-property #overview > h2 {
    display: none !important;
}

/* Amenity pills: cream background, peach border (same on hover) */
body.single-property .amentiesList__item,
body.single-property .amentiesList__item:hover {
    background: #fffaf4 !important;
    border: 1px solid #ffc7a0 !important;
}

/* Related Properties card: white background, peach border */
body.single-property .related-properties .hostaway-property-card {
    background: #ffffff !important;
    border: 1px solid #ffc7a0 !important;
}

/* Card badges (bedroom # + rating): centered, square, uppercase, weight 400 */
body.single-property .property-badges li {
    justify-content: center !important;
    text-align: center !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
}

/* Related card: remove the hover lift (was clipping the card) and hover shadow */
body.single-property .related-properties .hostaway-property-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Remove the inner card-image carousel arrows on hover (keep only the main carousel arrows) */
body.single-property .related-properties .property-carousel .slider-nav {
    display: none !important;
}

/* Fix the single card being 10px wider than its container (the multi-item 24px gap threw off
   the width), which clipped it on the right. Collapse the gap and fit the item exactly. */
body.single-property .related-properties .slider-container {
    gap: 0 !important;
    /* Give the card's 1px border room so the container's overflow:hidden doesn't shave the
       right edge. Padding insets the content; scroll-padding keeps snap aligned. */
    padding: 1px 2px !important;
    scroll-padding-left: 2px !important;
    scroll-padding-right: 2px !important;
}
body.single-property .related-properties .carousel-item {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}
body.single-property .related-properties .hostaway-property-card {
    width: 100% !important;
}

/* Related Properties carousel: square edges (not rounded) */
body.single-property .related-properties .hostaway-property-card,
body.single-property .related-properties .property-card-image,
body.single-property .related-properties .property-carousel,
body.single-property .related-properties .property-card-image img,
body.single-property .related-properties .property-carousel img {
    border-radius: 0 !important;
}

/* Total row text in Poppins, weight 400 */
body.single-property .price-total,
body.single-property .price-total * {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
}

/* Reduce the spacing between the Total and the Reserve button */
body.single-property .booking-widget-sticky #price-breakdown {
    padding-bottom: 0 !important;
    margin-bottom: -6px !important;
}

/* ==========================================================================
   Sanbis inline booking calendar (desktop sidebar widget).
   JS (single-property.php) moves #calendarPopup into the widget, tags it
   .sanbis-inline-calendar and forces a single month. These rules strip the
   popup chrome and re-skin the calendar in Sanbis colours.
   ========================================================================== */

/* Day-state colours — apply to desktop inline calendar AND the mobile popup */
body.single-property .calendar-nav button {
    border-color: #FEC89A !important;
    color: #0e150e !important;
    border-radius: 0 !important;
}
body.single-property .calendar-nav button:hover:not(:disabled) {
    background: #FFEFE5 !important;
    border-color: #FEC89A !important;
}
body.single-property .dayBox {
    border-radius: 0 !important;
}
body.single-property .day.selected .dayBox {
    background: #FEC89A !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}
body.single-property .day.in-range {
    background: #FFEFE5 !important;
}
body.single-property .day:not(.disabled):not(.selected):not(.in-range):hover .dayBox {
    background: #FFEFE5 !important;
}
/* ------------------------------------------------------------------
   Day-state colour system
   Peach used to mean BOTH "brand accent" and "unavailable", which is why the calendar was hard
   to read. One meaning per colour now:
     black  #0E150E  - available, selectable
     grey   #767676  - unavailable, or not valid for the choice being made
     peach  #FEC89A  - the guest's own selection
   Grey on white also clears WCAG AA, which peach never did.
   ------------------------------------------------------------------ */
body.single-property .day .dayBox {
    color: #0E150E;
}

/* Selectable dates carry extra weight. Applied only where it belongs rather than set globally
   and undone — the greyed-out dates keep their lighter weight, so colour AND weight both
   separate the two states. */
body.single-property .day:not(.disabled):not(.sanbis-unselectable):not(.checkin-unavailable) .dayBox {
    font-weight: 500;
}
/* Mid-selection an arrival day becomes a valid check-out, so it earns the weight too. */
body.single-property.sanbis-picking-checkout .day.checkin-unavailable:not(.disabled):not(.sanbis-unselectable) .dayBox {
    font-weight: 500;
}

/* Anything the guest can't pick — already booked, in the past, or invalid for the choice being
   made — is LIGHT grey with no strikethrough. The big value gap against near-black is what makes
   the available dates read instantly; mid grey plus a strikethrough was busier AND closer in
   weight, so the two states blurred together. */
body.single-property .day.disabled {
    color: #bfbfbf !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}
body.single-property .day.disabled .dayBox {
    color: #bfbfbf !important;
    text-decoration: none !important;
}

/* Not valid for THIS choice — before the chosen check-in, past a maximum stay, or beyond the
   next booking. */
body.single-property .day.sanbis-unselectable {
    cursor: not-allowed !important;
}
body.single-property .day.sanbis-unselectable .dayBox {
    color: #bfbfbf !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* Blocked only by the minimum stay. Stays black: the date is genuinely available, it's the
   length of the stay that's short, and greying it reads as "unavailable" when the guest only
   needs one more night. Still unclickable — clicking falls through to the plugin, which says
   how many nights are required. */
body.single-property .day.sanbis-below-min .dayBox {
    color: #0E150E !important;
    font-weight: 500 !important;
}

/* The chosen check-in keeps black text on its peach highlight. It matches `date <= checkIn` in
   applyConstraints() and so picks up the blocked class, which would otherwise grey out the very
   date the guest just chose. */
body.single-property .day.selected .dayBox {
    color: #0E150E !important;
    font-weight: 500 !important;
}
body.single-property .day.sanbis-unselectable:hover .dayBox {
    background: transparent !important;
}
body.single-property .day.disabled::after {
    display: none !important;
}

/* "From $X per night" — the From sits small and quiet next to the figure. Cards only; the
   property page dropped this header on 2026-08-18 (see templates/parts/property-calendar.php). */
.property-card-price .price-from {
    font-size: 12px;
    font-weight: 400;
    color: #717171;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Turnover days are HALF available, so they must not read as blocked.
   .checkin-unavailable - someone else ARRIVES this day: valid CHECK-OUT only.
   .checkout-turnover   - someone else DEPARTS this day: valid check-in AND check-out.
   Both stay clickable, in normal ink, with a pointer cursor. Only the first gets a marker —
   see the notes on each rule below. */
body.single-property .day.checkout-turnover:not(.disabled) {
    color: #0E150E !important;
    opacity: 1 !important;
    cursor: pointer !important;
}
body.single-property .day.checkout-turnover:not(.disabled) .dayBox {
    text-decoration: none !important;
}
body.single-property .day.checkin-unavailable:not(.disabled) {
    opacity: 1 !important;
}
/* Arrival day - someone else checks in, so this day can only ever END a stay.
   Its appearance is CONTEXTUAL, matching how the big booking sites behave:

   1. Choosing a check-in (default) - it reads as unavailable, because starting a stay here is
      genuinely impossible. No half-states to decode.
   2. Choosing a check-out (body.sanbis-picking-checkout, set by sanbis-booking-ux.js) - it turns
      selectable, because ending a stay here IS allowed. Greying it out permanently would block a
      real booking: 15th -> 17th is two free nights (15th, 16th) and must stay bookable. */
body.single-property .day.checkin-unavailable:not(.disabled) {
    color: #bfbfbf !important;
    cursor: not-allowed !important;
}
body.single-property .day.checkin-unavailable:not(.disabled) .dayBox {
    color: #bfbfbf !important;
    text-decoration: none !important;
}

/* Mid-selection: this is now a valid check-out, so present it as an ordinary available date —
   plain black, no marker. The guest is choosing a check-out; that another guest arrives that day
   is our scheduling detail, not something they need to decode. */
body.single-property.sanbis-picking-checkout .day.checkin-unavailable:not(.disabled):not(.sanbis-unselectable) {
    color: #0E150E !important;
    cursor: pointer !important;
}
body.single-property.sanbis-picking-checkout .day.checkin-unavailable:not(.disabled):not(.sanbis-unselectable) .dayBox {
    color: #0E150E !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* Departure day - someone else checks out, so the night is genuinely free. No special styling:
   a guest can check in AND check out on this day, exactly like any other available date, so
   marking it only added a state to decode for no gain. */
/* Selection and range styling must always win over the turnover wash. */
body.single-property .day.selected .dayBox,
body.single-property .day.in-range .dayBox {
    background: #FEC89A !important;
}
body.single-property .day.in-range .dayBox {
    background: #FFEFE5 !important;
}
body.single-property .day.checkin-unavailable::after,
body.single-property .day.checkout-turnover::after {
    display: none !important;
}

@media only screen and (min-width: 1025px) {
    /* The Check-in / Check-out fields are back — they are what opens the calendar and what
       tells the guest which end of the stay they are choosing. */
    body.single-property .booking-widget-sticky #main-fields { display: flex !important; }

    /* Inline the calendar popup: static, always visible, full widget width */
    body.single-property .sanbis-inline-calendar,
    body.single-property .sanbis-inline-calendar.hidden {
        position: static !important; inset: auto !important; transform: none !important;
        display: block !important; visibility: visible !important; opacity: 1 !important;
        width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important;
        margin: 0 0 4px !important; padding: 0 !important; background: transparent !important;
        box-shadow: none !important; border-radius: 0 !important; z-index: auto !important; overflow: visible !important;
    }
    body.single-property .sanbis-inline-calendar .calendarWrapper,
    body.single-property .sanbis-inline-calendar .calendarWrapper__body,
    body.single-property .sanbis-inline-calendar .calendarWrapper__bodyContainer {
        width: 100% !important; max-width: 100% !important; height: auto !important;
        padding: 0 !important; margin: 0 !important; box-shadow: none !important;
        border-radius: 0 !important; overflow: visible !important;
    }
    /* Hide the popup footer (Close/Clear popup) + dimming overlay + the popup close X;
       keep the header (check-in/check-out + selected dates), the month nav and the grid. */
    /* NOTE: .calendar__shadow (the dimming overlay) is deliberately NOT hidden any more — the
       calendar is a popup again on desktop and needs its backdrop. */
    body.single-property .sanbis-inline-calendar .calendar-footer { display: none !important; }
    body.single-property .sanbis-inline-calendar .popupHeader__close { display: none !important; }

    /* Remove the calendar's popup-header entirely — the "Select dates" title, the
       "Add your travel dates" caption and the Check-in / Check-out fields — since the
       visitor picks the dates directly on the calendar. */
    body.single-property .sanbis-inline-calendar .popup-header { display: none !important; }
    /* Remove the "Add dates for prices" caption above the calendar. */
    body.single-property .booking-widget-sticky .booking-widget__title { display: none !important; }

    /* Single, centred month */
    body.single-property .sanbis-inline-calendar .calendar-body {
        width: 100% !important; grid-template-columns: max-content !important;
        gap: 0 !important; justify-content: center !important;
    }
    body.single-property .sanbis-inline-calendar .days-grid,
    body.single-property .sanbis-inline-calendar .weekday-header {
        grid-template-columns: repeat(7, 40px) !important; width: max-content !important;
        margin-left: auto !important; margin-right: auto !important;
    }
    body.single-property .sanbis-inline-calendar .day,
    body.single-property .sanbis-inline-calendar .dayBox {
        width: 40px !important; height: 40px !important;
    }
    body.single-property .sanbis-inline-calendar .calendar-nav {
        display: flex !important; align-items: center !important; justify-content: space-between !important;
        margin-bottom: 6px !important; padding: 0 10px !important;
    }
    /* Even the spacing between the date fields, guest counter and calendar */
    body.single-property .booking-widget-sticky .bookingWidget__box { gap: 16px !important; }
}

/* ===== Mobile booking bar + popup calendar — Sanbis styling =====
   The desktop widget/calendar is hidden on mobile (plugin hides .property-sidebar).
   Bottom bar: "Select dates for pricing" + a SELECT DATES button; after dates are picked the
   label is replaced by the price breakdown and a RESERVE button appears beside SELECT DATES. */
@media only screen and (max-width: 1024px) {
    /* Bar is a column: content on top, the button row underneath */
    body.single-property .mobileReserve {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px;
        padding: 12px 16px;
    }
    body.single-property .mobileReserve__left { flex: none !important; }
    body.single-property .mobileReserve__priceLabel {
        font-family: 'Poppins', sans-serif !important;
        font-size: 13px;
        color: #8a8072;
    }

    /* Button row: SELECT DATES (+ RESERVE once dates picked) side by side, equal width */
    body.single-property .mobileReserve__right {
        display: flex !important;
        gap: 10px;
        order: 2;
    }
    body.single-property .mobileReserve__button {
        flex: 1 1 0 !important;
        text-align: center;
        white-space: nowrap;
        background: #FEC89A !important;
        color: #010101 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        font-family: 'Poppins', sans-serif !important;
        font-weight: 400 !important;
        text-transform: uppercase !important;
        letter-spacing: .08em !important;
        padding: 13px 8px !important;
        font-size: 14px !important;
    }

    /* Price breakdown relocated into the bar (above the buttons); hide the plugin's total-only widget */
    body.single-property .mobileReserve .mob_price_widget { display: none !important; }
    body.single-property .mobileReserve #price-breakdown {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        order: 1;
    }
    body.single-property .mobileReserve #price-breakdown .price-item,
    body.single-property .mobileReserve #price-breakdown .price-total {
        display: flex !important;
        justify-content: space-between !important;
        font-family: 'Poppins', sans-serif !important;
        font-size: 14px !important;
        margin: 0 0 4px !important;
    }
    body.single-property .mobileReserve #price-breakdown .price-total {
        border-top: 1px solid #eee !important;
        padding-top: 6px !important;
        margin-top: 2px !important;
        font-weight: 600 !important;
    }
    /* Once a price is loaded, the breakdown replaces the "Select dates for pricing" label */
    body.single-property .mobileReserve.sanbis-has-price .mobileReserve__priceLabel {
        display: none !important;
    }

    /* Calendar popup (mobile modal): Sanbis-style the footer buttons + clear links */
    body.single-property #calendarPopup .primaryButton,
    body.single-property #calendarPopup .primaryButton.filled {
        background: #FEC89A !important;
        color: #010101 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        font-family: 'Poppins', sans-serif !important;
        font-weight: 400 !important;
        text-transform: uppercase !important;
        letter-spacing: .08em !important;
    }
    body.single-property #calendarPopup .buttonText,
    body.single-property #calendarPopup .popupHeader__clear,
    body.single-property #calendarPopup #clear-dates,
    body.single-property #calendarPopup .popupHeader__left h2,
    body.single-property #calendarPopup .popupHeader__left p {
        font-family: 'Poppins', sans-serif !important;
    }
    body.single-property #calendarPopup .popupHeader__clear,
    body.single-property #calendarPopup #clear-dates {
        color: #b7967a !important;
    }
}

/* ── PhotoSwipe gallery: never distort a photo ──────────────────────────────
   The "View all photos" lightbox sizes each slide from the width/height handed to
   PhotoSwipe; before an image is measured those default to 3:2, so the <img> was
   stretched to fill (e.g. Cedar By The Sea images 8 / 10 / 11). Forcing
   object-fit:contain keeps every image at its NATIVE ratio, fitting within the slide
   box (max dimensions, never fixed), so it can't stretch. Lives here in the mu-plugin
   because the plugin's single-property.css isn't enqueued on the property page. */
.pswp img.pswp__img {
    object-fit: contain !important;
}
/* ==================================================================
   Property calendar — two-field popup (2026-08-17)
   The always-visible inline calendar is retired; the plugin's native popup is used at both
   breakpoints. Desktop shows two months side by side, mobile one with prev/next.
   ================================================================== */

/* The Check-in / Check-out fields in the widget. */
body.single-property #main-fields {
    display: flex;
    gap: 0;
    border: 1px solid #FEC89A;
    margin-bottom: 16px;
}
body.single-property #main-fields .date-box {
    flex: 1 1 50%;
    padding: 10px 12px;
    cursor: pointer;
    min-width: 0;
}
body.single-property #main-fields .date-box + .date-box {
    border-left: 1px solid #FEC89A;
}
body.single-property #main-fields .datebox__label {
    font-family: Poppins, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #767676;
}
body.single-property #main-fields .datebox__content {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    color: #0E150E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Which field the guest is filling in right now. */
body.single-property #main-fields .date-box.sanbis-active {
    background: #FFEFE5;
}

@media only screen and (min-width: 1025px) {
    /* Two months side by side. The sidebar is under 400px, so the popup has to break out of it. */
    body.single-property .calendar-popup:not(.hidden) {
        width: auto !important;
        max-width: 92vw !important;
    }
    body.single-property .calendar-popup .calendar-body {
        display: flex !important;
        gap: 32px !important;
        align-items: flex-start !important;
    }
    body.single-property .calendar-popup .month {
        flex: 0 0 auto !important;
        min-width: 260px !important;
    }
    /* The popup repeats the check-in/check-out inputs in its header — redundant now that the
       widget carries them. Mobile keeps the header, where it is the only such indicator. */
    body.single-property .calendar-popup .popup-header { display: none !important; }
}

@media only screen and (max-width: 1024px) {
    /* One month, navigated with the existing prev/next arrows. */
    body.single-property .calendar-popup .calendar-body {
        display: block !important;
    }
    body.single-property .calendar-popup .month {
        width: 100% !important;
    }
}

/* Calendar popup footer — "Clear dates" and "Close" inherited the theme's serif. */
body.single-property .calendar-footer #clear-dates,
body.single-property .calendar-footer #close-popup,
body.single-property .calendar-footer .buttonText,
body.single-property .calendar-footer .primaryButton {
    font-family: "Poppins", sans-serif !important;
}