/* Hostalia test site: layout fixes on top of the concept pages */
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (max-width:700px){html{scroll-padding-top:80px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.page{overflow-x:clip}
.page > header,.page > div > header{position:sticky;top:0;z-index:30;background:#FFFFFF}
#book input[type=date],#book select{min-width:0;max-width:100%}
@media (max-width:700px){
form#book{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
form#book label{min-width:0}
}
/* Book button: gentle pulse, out of step with the chat button */
header .hx-btn{position:relative}
header .hx-btn::after{content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;animation:hxpb 2.4s ease-out 1.2s infinite}
header .hx-btn:hover::after{animation:none}
@keyframes hxpb{0%{box-shadow:0 0 0 0 rgba(229,24,55,.5)}70%{box-shadow:0 0 0 12px rgba(229,24,55,0)}100%{box-shadow:0 0 0 0 rgba(229,24,55,0)}}
@media (prefers-reduced-motion:reduce){header .hx-btn::after{animation:none}}
/* header always on one line; when it does not fit, the menu button takes over */
.page header nav,.page header > div > div{flex-shrink:0}
html.hx-compact .page header nav,html.hx-compact .page header [role="group"]{display:none !important}
html.hx-compact .page header .hx-burger{display:flex !important}
/* Hostaway calendar widget inside the rates box: keep it within the box at every width */
#hostaway-calendar-widget{margin-top:28px !important}
#hostaway-calendar-widget > div,#hostaway-calendar-widget > div > div{display:block !important;max-width:none !important;width:100% !important}
#hostaway-calendar-widget > div > div > div:first-child{display:block !important;width:auto !important;margin:0 !important;padding:0 !important}
#hostaway-calendar-widget [class*="styled__Prev"],#hostaway-calendar-widget [class*="styled__Next"]{margin:0 !important;top:-4px !important;z-index:1}
#hostaway-calendar-widget [class*="styled__Prev"]{left:0 !important}
#hostaway-calendar-widget [class*="styled__Next"]{right:0 !important}
#hostaway-calendar-widget [class*="styled__Prev"] button,#hostaway-calendar-widget [class*="styled__Next"] button{border-width:1px !important}
#hostaway-calendar-widget [class*="styled__Calendars"]{display:block !important}
#hostaway-calendar-widget [class*="styled__Calendars"] > div{display:block !important;width:100% !important}
#hostaway-calendar-widget [class*="styled__Title"]{font-weight:500 !important;font-size:17px !important;margin-bottom:12px}
#hostaway-calendar-widget [class*="styled__Grid"]{grid-template-columns:repeat(7,minmax(0,1fr)) !important}
#hostaway-calendar-widget [class*="styled__Weekday"]{font-weight:500 !important;font-size:12px !important;color:#6A6A6A}
#hostaway-calendar-widget [class*="styled__Bottom"]{margin-left:0 !important;padding:12px 0 !important;text-align:center;font-size:14px;color:#4A4A4A}
#hostaway-calendar-widget [class*="styled__ButtonContainer"]{gap:8px}
#hostaway-calendar-widget [class*="styled__ButtonContainer"] button{flex:1 1 0 !important;min-width:0 !important;margin:0 !important;height:52px !important;border-width:1px !important;border-radius:2px !important;font-family:Michroma,sans-serif !important;font-size:10px !important;font-weight:400 !important;letter-spacing:.12em !important;text-transform:uppercase !important;white-space:nowrap}
#hostaway-calendar-widget [class*="styled__ButtonContainer"] button *{font-family:inherit !important}
/* map in "Where you are" */
.hx-map{position:relative;z-index:0;isolation:isolate;overflow:hidden}
.hx-map.hx-map-on .hx-map-fb{display:none}
.hx-map .leaflet-tile-pane{filter:grayscale(1) contrast(.92) brightness(1.05)}
.hx-map .leaflet-container,.hx-map.leaflet-container{background:#EDEBE6;font-family:Inter,sans-serif}
.hx-map .leaflet-control-zoom{border:1px solid #CFCCC6 !important;border-radius:2px !important;box-shadow:none !important}
.hx-map .leaflet-control-zoom a{color:#111111 !important;border-radius:0 !important}
.hx-map .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.85) !important}
.hx-map .leaflet-control-attribution a{color:#4A4A4A !important}
.hx-pin{background:none;border:0}
.hx-pin svg{display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
/* ---------- buttons used by the search results, the quote and the date form ---------- */
.hx-b{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-family:Michroma,sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:14px 18px;border-radius:2px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.hx-b.red{background:#E51837;color:#FFFFFF !important}
.hx-b.line{background:#FFFFFF;color:#111111 !important;border-color:#111111}
.hx-k{font-family:Michroma,sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6A6A6A}
/* ---------- search results under the home search bar ---------- */
.hx-res{max-width:1104px;margin:44px auto 0;font-family:Inter,-apple-system,Arial,sans-serif;color:#111111}
.hx-res[hidden]{display:none}
@media (max-width:1180px){.hx-res{margin-left:24px;margin-right:24px}}
@media (max-width:700px){.hx-res{margin:32px 16px 0}}
.hx-res-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid #111111}
.hx-res-sum{margin-top:6px;font-size:18px}
.hx-res-wait,.hx-res-note,.hx-res-pay{margin:18px 0 0;font-size:15px;color:#4A4A4A}
.hx-res-pay{font-size:13px;color:#6A6A6A}
.hx-r{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:28px;align-items:center;padding:22px 0;border-bottom:1px solid #E7E5E1}
.hx-r-img{display:block;overflow:hidden}
.hx-r-img img{width:180px;height:124px;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .3s}
.hx-r h3{margin:0;font-weight:500;font-size:21px;line-height:1.25}
.hx-r h3 a{color:#111111}
.hx-r-meta{margin:6px 0 0;font-size:14px;color:#6A6A6A}
.hx-r-status{margin:10px 0 0;font-size:14px;color:#6A6A6A}
.hx-r-status.ok{color:#111111;font-weight:500}
.hx-r-status.ok::before{content:"";display:inline-block;width:8px;height:8px;border-radius:4px;background:#2F8F5B;margin-right:8px;vertical-align:1px}
.hx-r.is-off .hx-r-img img{filter:grayscale(1);opacity:.55}
.hx-r-side{text-align:right}
.hx-r-price,.hx-q-price{font-family:'Inter Tight',Inter,sans-serif;font-weight:300;font-size:32px;line-height:1.05;letter-spacing:-.01em}
.hx-r-pn{margin-top:4px;font-size:13px;line-height:1.45;color:#6A6A6A}
.hx-r-btns{margin-top:14px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:760px){
.hx-r{grid-template-columns:104px minmax(0,1fr);gap:14px 16px;align-items:start}
.hx-r-img img{width:104px;height:78px}
.hx-r h3{font-size:18px}
.hx-r-side{grid-column:1/-1;text-align:left}
.hx-r-btns{justify-content:flex-start}
.hx-r-btns .hx-b{flex:1 1 0}
}
/* ---------- quote in the rates box and the date form used when the calendar does not load ---------- */
.hx-quote{margin-top:24px;padding:20px;background:#F6F5F2}
.hx-q-sum{margin-top:6px;font-size:15px;line-height:1.45}
.hx-q-price{margin-top:14px}
.hx-q-msg{margin:12px 0 0;font-size:14px;color:#4A4A4A}
.hx-q-book{margin-top:14px;width:100%;padding:18px}
.hx-q-pay{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:#6A6A6A}
.hx-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.hx-mini label{display:block;border:1px solid #CFCCC6;padding:10px 12px;min-width:0;transition:border-color .2s}
.hx-mini label span{display:block;font-family:Michroma,sans-serif;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#6A6A6A}
.hx-mini input,.hx-mini select{display:block;width:100%;margin-top:4px;border:0;padding:0;font:16px Inter,sans-serif;color:#111111;background:transparent;min-width:0}
.hx-mini label:nth-child(3),.hx-mini button{grid-column:1/-1}
.hx-mini button{padding:18px}
aside#rates.hx-rates-in{margin-top:40px}
/* ---------- languages not ready yet ---------- */
[aria-disabled="true"]{opacity:.45;pointer-events:auto !important;cursor:default;position:relative}
/* ---------- rollover on everything that can be clicked ---------- */
@media (hover:hover) and (pointer:fine){
.page a:not(.hx-btn):not(.hx-b):not(.hx-card):not(.hx-r-img):not([aria-label^="Hostalia"]):not([aria-disabled]):hover{color:#E51837 !important}
.page a[style*="border-bottom"]:hover,.page a.hx-line:hover,.page a.hx-more:hover{border-bottom-color:#E51837 !important}
.page a[aria-label^="Hostalia"]{transition:opacity .2s}
.page a[aria-label^="Hostalia"]:hover{opacity:.72}
.hx-b.red:hover{background:#B5102A}
.hx-b.line:hover{background:#111111 !important;color:#FFFFFF !important}
.hx-r:hover .hx-r-img img{transform:scale(1.04)}
.hx-r.is-off:hover .hx-r-img img{opacity:.75}
[aria-disabled="true"]:hover{opacity:.7}
[aria-disabled="true"]:hover::after{content:attr(data-soon);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#111111;color:#FFFFFF;font:12px/1 Inter,sans-serif;letter-spacing:0;text-transform:none;padding:7px 9px;border-radius:2px;z-index:5}
.page button[aria-pressed="false"]:hover{border-color:#111111 !important;background:#F6F5F2 !important}
.page button[aria-pressed="true"]:hover{background:#2B2B2B !important}
.page button[style*="background: #FFFFFF"][style*="border: 1px solid #111111"]:hover{background:#111111 !important;color:#FFFFFF !important}
.page select:hover,.page input[type=date]:hover{color:#E51837}
.page select[style*="border: 1px solid"]:hover{border-color:#111111 !important;color:#111111}
#book label{transition:background-color .2s}
#book label:hover{background:#F6F5F2}
#book button[type=submit]{transition:background-color .2s}
#book button[type=submit]:hover{background:#B5102A !important}
.hx-mini label:hover{border-color:#111111}
img.hx-ph{transition:filter .3s}
img.hx-ph:hover{filter:brightness(.88)}
button[aria-label^="Pause"]:hover,button[aria-label^="Metti in pausa"]:hover{background:rgba(17,17,17,.6) !important}
.hx-burger{transition:opacity .2s}.hx-burger:hover{opacity:.6}
.hx-x{transition:color .2s}.hx-x:hover{color:#E51837 !important}
.hx-menu a.hx-mi:hover{color:#E51837 !important}
.hx-menu .hx-ml a:not([aria-disabled]):hover{color:#E51837 !important}
.hx-in button{transition:background-color .2s}.hx-in button:hover{background:#B5102A}
.hx-act:hover{background:#B5102A !important}
.page footer a.hx-wa:hover{color:#E51837 !important}
#hostaway-calendar-widget [class*="styled__ButtonContainer"] button:first-child:hover{border-color:#111111 !important;background:#F6F5F2 !important}
#hostaway-calendar-widget [class*="styled__ButtonContainer"] button:last-child:not(:disabled):hover{background:#B5102A !important;border-color:#B5102A !important}
#hostaway-calendar-widget [class*="styled__Prev"] button:hover,#hostaway-calendar-widget [class*="styled__Next"] button:hover{border-color:#111111 !important}
#hostaway-calendar-widget .CalendarDay:hover{border-color:#111111 !important}
.hx-map .leaflet-control-zoom a:hover{background:#F6F5F2 !important;color:#E51837 !important}
}
@media (hover:hover) and (pointer:fine){
.hx-lbn{transition:background-color .2s,border-color .2s}
.hx-lbn:hover{background:rgba(255,255,255,.18) !important;border-color:#FFFFFF !important}
.hx-galg button:hover img{transform:scale(1.04)}
.hx-galg button:hover{outline:2px solid #111111;outline-offset:-2px}
.hx-lb .hx-x:hover,.hx-gal .hx-x:hover{color:#E51837 !important}
.hx-cbtn{transition:background-color .2s}
.hx-chat .hx-chip{transition:border-color .2s,background-color .2s}
.hx-chat .hx-chip:hover{background:#F6F5F2}
.hx-m a:hover{color:#E51837;border-bottom-color:#E51837}
#book select:hover,#book input[type=date]:hover{color:#111111}
}
@media (hover:hover) and (pointer:fine){.hx-chip-link{transition:border-color .2s,background-color .2s}.hx-chip-link:hover{border-color:#111111 !important;background:#F6F5F2}}
.hx-ask{display:inline-block;margin-top:12px;font-size:14px;color:#111111;border-bottom:1px solid #111111;padding-bottom:1px}
.hx-quote .hx-ask{display:block;width:max-content;max-width:100%;margin:14px auto 0}
@media (hover:hover) and (pointer:fine){.hx-ask:hover{color:#E51837 !important;border-bottom-color:#E51837}}
