/*
Theme Name: Stayviation 2026
Theme URI: http://www.squarerchilli.co.uk
Author: squarechilli
Author URI: http://www.squarerchilli.co.uk
Description: Stayviation is developed and maintained by squarechilli
Version: 1
*/



/*Global*/
:root {
  --main-font: 'DM Sans';
  --title-font: 'Space Grotesk';
  --color-main: oklab(1 0 0 / 0.7);
  --color-mint: oklch(73.9% .092 191.8);
  --color-mintdark: oklch(0.588 0.09 215.1);
  --color-blue: oklch(0.255 0.062 255.5);
	--color-orange: oklch(0.685 0.206 32.5);
  --color-black: oklch(0 0 0);
  --color-white: oklch(1 0 0);
  --color-trans5: oklab(1 0 0 / 0.05);
	--color-trans15: oklab(1 0 0 / 0.15);
	--color-trans35: oklab(1 0 0 / 0.35);
	--standardradius: 26px;
	--standardpadding: 26px;
  
}

/*essentials*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html {scroll-behavior: smooth; scroll-padding-top: 80px;}
body {position: relative; font: 18px var(--main-font), Arial, sans-serif; font-weight: 400; color: var(--color-main); background-color: oklch(25.5% .062 255.5);
    background-image: radial-gradient(1200px 600px at 80% -10%, oklch(73.9% .092 191.8 / .35), transparent 60%), radial-gradient(900px 500px at 10% 110%, oklch(58.8% .09 215.1 / .45), transparent 55%), linear-gradient(135deg, oklch(25.5% .062 255.5) 0%, oklch(32% .07 250) 45%, oklch(25.5% .062 255.5) 100%);;
    font-family: var(--main-font);
    background-attachment: fixed;  -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; margin:0px; padding: 0 }
a {color: var(--color-main); text-decoration: underline; outline: none;-webkit-transition: background-color 0.25s; -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s;  transition: background-color 0.25s;}
a:hover {text-decoration: underline;}
h1 {font-size: 80px; margin: 10px 0px; color: var(--color-white); font-family: var(--title-font), 'Helvetica Neue'; font-weight: 700}
h2 {position: relative;font-size: 40px;color: var(--color-white);font-family: var(--title-font), 'Helvetica Neue';padding-bottom: 7px;margin: 70px auto 15px 0;}
h3 {margin: 10px 0;  color: var(--color-white); font-family: var(--title-font), 'Helvetica Neue'; margin: 70px auto 15px 0;}
.header-mini {font-size: 18px;letter-spacing: 2.4px}
.wp-block-group > div h2 {margin-top: 0 !important;}
p {}
button:focus,input:focus,select:focus,textarea:focus {outline: none;}
img {max-width: 100%;border: 0px;height: auto;width: auto\9; /* ie8 */}
.alignleft {float: left; margin-right: 15px}
.alignright {float: right; margin-left: 15px}
.aligncenter {text-align: center;}
.text-right {text-align: right !important}
.center {margin: 0 auto; text-align: center}
.noborder {border: 0px}
.nomargin {margin: 0 !important}
.nopadding {padding: 0 !important; overflow: hidden}
.nopadding h2, .nopadding p {margin: 26px !important}
.nopadding img {display: block}
.nopadding .wp-block-columns, .nopadding figure {margin: 0 !important}
.marginremove {position: relative; top: 60px} /*used with a pre header if the header has a 70px top margin. This retains the margin but puts it closer to the header*/
.clear {clear: both}
.clear:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
section {position: relative; clear: both}
.wrapper {position: relative;max-width: 1800px;margin: 0px auto;padding: 0;}
.wrapper:not(.is-flex):after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.narrow, .is-style-narrow {max-width: 90%}
.narrower, .is-style-narrower {max-width: 80%;}
.narrowest, .is-style-narrowest {max-width: 70%;}
.fullwidth {position: relative; width:auto;overflow:hidden; margin: 30px 0}
strong {}
input {font-family: var(--main-font); color: var(--color-green); }

.large {font-size: 1.2em}
.larger {font-size: 1.6em}
.largest {font-size: 2em}




/*header*/
header {margin-bottom: 50px}
header .wrapper {display: flex;align-items: center;justify-content: space-between;}
.logo {position: relative;margin-top: 3px;background: url('images/stayviation-logo-wt.png') no-repeat;width: 272px;height: 77px;background-size: 100% 100%;text-indent: 100%;white-space: nowrap;overflow: hidden;z-infdex: 9999; margin: 10px 0}
.logo a {position: absolute; top: 0; left: 0; right: 0; bottom: 0}
.main-menu {font-family: var(--title-font);}
.main-menu ul {display: flex;margin: 0;padding: 0;list-style-type: none;align-items: center;justify-content: center;gap: 32px;}
.main-menu ul li {position: relative}
.main-menu a {text-decoration: none}
.main-menu a:hover {color: var(--color-white)}
.main-menu ul ul {display:none;position:absolute;top: 23px;left: 0px;padding: 6px !important;min-width: 270px;padding: 0;z-index: 2;background-color: var(--color-mint);border-radius: 0 12px 12px 12px}
.main-menu ul ul li {float:none;width:100%;border: 0;position: relative;display: block; min-height: 30px; margin: 0; text-align: left}
.main-menu ul ul a {display: block; color: var(--color-white); text-decoration: none; padding: 5px 10px}
.main-menu ul ul a:hover {text-decoration: underline;}
.main-menu ul ul ul {top:0; left:100%}
.main-menu ul li:hover > ul {display:block}

.sub-menu {animation: rotateMenu 400ms ease-in-out forwards; transform-origin: top center}
@-moz-keyframes rotateMenu {
  0% {transform: rotateX(-90deg);}
  70% {transform: rotateX(20deg);}
  100% {transform: rotateX(0deg);}
}
@-webkit-keyframes rotateMenu {
  0% {transform: rotateX(-90deg);}
  70% {transform: rotateX(20deg);}
  100% {transform: rotateX(0deg);}
}
@-o-keyframes rotateMenu {
  0% {transform: rotateX(-90deg);}
  70% {transform: rotateX(20deg);}
  100% {transform: rotateX(0deg);}
}
@keyframes rotateMenu {
  0% {transform: rotateX(-90deg);}
  70% {transform: rotateX(20deg);}
  100% {transform: rotateX(0deg);}
}
.right-menu ul {display: flex;margin: 0;padding: 0;list-style-type: none;align-items: center;justify-content: center;gap: 12px;}
.right-menu a {text-decoration: none}
.right-menu ul li:last-of-type a {background-color: var(--color-white); border-radius: 100px; padding: 8px 20px; color: var(--color-blue); font-weight: 600}
.right-menu ul li:last-of-type a:hover {opacity: 0.9}

.trustpilot {position: absolute; font-size: 18px; text-wrap:nowrap; right: 20px}
.trustpilot img {position: relative; vertical-align: bottom; max-width: 180px; top: 6px}
.trustpilot a {color: var(--color-white); text-decoration: none}
.sticky_header .trustpilot {opacity: 0}


.tooltip {
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: var(--color-white);
  color: black !important;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  font-size: 14px;
  font-weight:bold;
  position: absolute;
  z-index: 1;
	text-wrap:auto
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  width: 300px;
  top: 110%;
  left: 50%;
  margin-left: -150px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
}


/*Homepage*/
form#search-filter-form-3508 ul li.sf-field-post_date {width: 48% !important; float:left}
form#search-filter-form-3508 ul li:nth-of-type(2) {margin-right: 4% !important}


/*Rooms*/



/*General*/
.has-colour-main-background-color {background-color: var(--color-main)}
.has-colour-black-background-color {background-color: var(--color-black)}
.has-colour-white-background-color {background-color: var(--color-white)}

.has-colour-main-color {color: var(--color-main)}
.has-colour-black-color {color: var(--color-black)}
.has-colour-white-color {color: var(--color-white)}

::-webkit-input-placeholder {color: var(--color-white);}
::-moz-placeholder {color: var(--color-white);}
:-ms-input-placeholder {color: var(--color-white);}
:-moz-placeholder {color: var(--color-white);}

.is-style-pre-header {text-transform: uppercase; color: var(--color-mint); background-color: var(--color-trans5); display: inline-block; font-weight: 600; padding: 4px 12px; border: 1px solid var(--color-trans15); border-radius: 100px; letter-spacing: 2.4px; font-size: 16px}
.is-style-pre-header + h2 {margin-top: 0}
.is-style-pre-header a {color: var(--color-mint); text-decoration: none}.is-style-pre-header a:hover {text-decoration: underline}
.is-style-roundedcorners {border-radius: var(--standardradius)}
.is-style-bullets-orange li::marker {color: var(--color-orange);}
.is-style-glass h2, .is-style-glass h3 {margin: 10px 0}
.is-style-border {border: 1px solid var(--color-trans15);}

mark {background-clip: text; -webkit-background-clip: text; background-image: linear-gradient(to right, var(--color-mint) 0%, var(--color-mintdark) 100%); color: transparent;}
mark.has-inline-color {font-size: 40px; font-weight: 800} /*larger effect if has inline color, used in areas like the about page key numbers*/
/*glass effect*/.wp-block-group, .is-style-glass, blockquote {backdrop-filterblur(24px); background-color: var(--color-trans5); border-radius: var(--standardradius); border: 1px solid var(--color-trans15); padding: var(--standardpadding)}
form ul {padding: 0}
form li {margin: 5px 0 !important}
label {display: block; width: 100%}
label.sf-label-checkbox {display: inline}
select {color: var(--color-white); background-color: var(--color-trans5); width: 100%; font-weight: 600; padding: 12px 16px; border: 1px solid var(--color-trans15); border-radius: var(--standardradius); font-size: 16px}
select:focus {outline: none; background-color: rgba(255, 255, 255, 0.1); /* slight highlight*/}
select option {background-color: var(--color-blue);color: var(--color-white);}
input, textarea {color: var(--color-white); background-color: var(--color-trans5);width: 100%; font-weight: 600; padding: 12px 16px; border: 1px solid var(--color-trans15); border-radius: var(--standardradius); font-size: 16px}
input[type=checkbox] {width: 16px; display: inline}
input[type=submit] {background-color: var(--color-orange);}
ul.bullets-inline {display: flex; margin: 0; padding: 0 0 0 16px}
ul.bullets-inline li:not(:first-of-type) {margin-left: 35px}

.wide-spacing {letter-spacing: 2.4px}
blockquote {margin: 0}
blockquote:before {font-family: "Font Awesome 7 Free"; content: "\f10e"; font-weight: 900;}
cite {font-size: 14px; font-style: normal;}
cite:first-line {font-weight: 600; color: var(--color-white); font-size: 16px}
.promo {background-image: linear-gradient(to right bottom, oklch(0.395 0.08 244.7) 0%, oklch(0.255 0.062 255.5) 100%)}
.promo .wp-block-columns {margin: 0;}
.promo h2 {margin-top: 0}
.promo .marginremove {margin-bottom: 15px; top: 0}



.headertext {display: flex;align-items: center;justify-content: space-between;margin: 70px 0 15px 0}
.headertext span {font-family: var(--title-font); }
.headertext h2 {margin: 0}
.headertext a {text-decoration: none; color: var(--color-mint)}
.headertext a:after {display: inline-block; content: '→'; width: 15px; height: 15px; margin-left: 10px; transition: all 200ms;
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: 15px; }
.headertext a:hover:after {margin-left: 20px}

.full-width-buttons {display: flex; flex-wrap: nowrap; gap: 12px; width: 100%;}
.full-width-buttons .wp-block-button {flex: 1 1 0; margin: 0;}
.full-width-buttons .wp-block-button__link {width: 100%;text-align: center; box-sizing: border-box;}

.circled-icon {display: inline-block; border-radius: 100px; background-color: var(--color-trans5); padding: 15px}

.wp-block-pb-accordion-item {border-bottom: 1px solid var(--color-trans35)}
.wp-block-pb-accordion-item h2 {font-size: 20px}

.numbering {display: flex;font-size: 30px;width: 60px;height: 60px;background-color: var(--color-trans5);border-radius: 100px;justify-content: center;align-items: center; margin-left: 0 !important}

#theme-toggle {position: fixed; bottom: 20px; right: 20px; z-index: 9999; background: #333; color: #fff; border: none; border-radius: 50%; width: 48px; height: 48px; font-size: 1.4rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: background .2s;}
#theme-toggle:hover {background: #555;}
body.light-mode #theme-toggle {background: #eee; color: #333;}


/*Gutenberg and S&F fixes*/
.alignwide {margin-left  : -80px;margin-right : -80px;}
.alignfull {margin-left  : calc( -100vw / 2 + 100% / 2 ) !important;margin-right : calc( -100vw / 2 + 100% / 2 ) !important;max-width    : 100vw !important;display: block}
:root :where(.wp-element-button, .wp-block-button__link) {backdrop-filterblur(24px); background-color: var(--color-trans5); border-radius: var(--standardradius); border: 1px solid var(--color-trans15); padding: 20px auto}
:root :where(.wp-element-button, .wp-block-button__link):hover {text-decoration: none; background-color: var(--color-orange);}
.searchandfilter ul li.sf-field-submit {padding-bottom: 0}
:where(.wp-block-columns.is-layout-flex) {gap: 24px}

/*Jobs*/
.room-grid ul {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px}
.room-grid ul li {border: 1px solid var(--color-trans15); border-radius: var(--standardradius);backdrop-filterblur(24px); background-color: var(--color-trans5);}
.room-grid ul li:hover {translate: 0px -4px; transition-duration:0.15s} 
.room-grid img {width: 100%; border-top-left-radius: var(--standardradius); border-top-right-radius: var(--standardradius); }
.room-grid .wp-block-columns {margin: 24px}
.room-grid .taxonomy-airport a {backdrop-filterblur(24px); background-color: var(--color-trans5); border-radius: var(--standardradius); padding: 4px 12px; text-decoration: none; color: var(--color-mint); font-size: 14px; font-weight: 600}
.room-grid .wp-block-mfb-meta-field-block {text-align: right}
.room-grid .wp-block-mfb-meta-field-block div {display: inline; font-size: 14px; font-weight: 600}
.room-grid .wp-block-mfb-meta-field-block div.prefix, .room-grid .wp-block-mfb-meta-field-block div.value  {color: var(--color-white); font-size: 16px;}
.room-grid h2 {margin: 0 24px; font-size: 20px}
.room-grid .wp-block-post-excerpt {margin: 0 24px 24px}

/*Cloud backgrounds, minimised*/
.sv-clouds{position:absolute;inset:0;overflow:clip;pointer-events:none;z-index:0}.sv-cloud{position:absolute;border-radius:50%;opacity:.9;filter:blur(6px);animation:18s ease-in-out infinite sv-drift;will-change:transform}.sv-cloud--1{top:-40px;right:-40px;width:600px;height:260px;--sv-tilt:2deg;animation-duration:20s;background:radial-gradient(ellipse 30% 75% at 18% 65%,rgba(255,255,255,.16) 0,rgba(255,255,255,.1) 45%,transparent 75%),radial-gradient(ellipse 34% 95% at 38% 42%,rgba(255,255,255,.2) 0,rgba(255,255,255,.12) 42%,transparent 75%),radial-gradient(ellipse 32% 80% at 60% 55%,rgba(255,255,255,.17) 0,rgba(255,255,255,.09) 45%,transparent 75%),radial-gradient(ellipse 27% 70% at 78% 68%,rgba(255,255,255,.13) 0,transparent 72%)}.sv-cloud--2{top:34%;left:-100px;width:540px;height:230px;--sv-tilt:-2deg;animation-duration:25s;background:radial-gradient(ellipse 30% 70% at 18% 65%,rgba(220,250,255,.15) 0,rgba(210,245,255,.08) 45%,transparent 75%),radial-gradient(ellipse 34% 100% at 38% 42%,rgba(235,250,255,.18) 0,rgba(220,248,255,.1) 45%,transparent 76%),radial-gradient(ellipse 30% 80% at 60% 54%,rgba(220,248,255,.14) 0,rgba(210,245,255,.07) 45%,transparent 76%),radial-gradient(ellipse 25% 65% at 82% 68%,rgba(220,248,255,.11) 0,transparent 75%)}.sv-cloud--3{bottom:-45px;right:24%;width:440px;height:190px;--sv-tilt:2deg;animation-duration:22s;background:radial-gradient(ellipse 30% 72% at 18% 65%,rgba(255,245,235,.1) 0,rgba(255,235,220,.06) 45%,transparent 75%),radial-gradient(ellipse 35% 100% at 40% 40%,rgba(255,250,245,.14) 0,rgba(255,240,230,.07) 45%,transparent 76%),radial-gradient(ellipse 30% 80% at 63% 54%,rgba(255,245,235,.11) 0,rgba(255,235,220,.05) 45%,transparent 76%),radial-gradient(ellipse 25% 65% at 82% 68%,rgba(255,240,225,.08) 0,transparent 75%)}@keyframes sv-drift{0%,100%{transform:translate3d(0,0,0) rotate(var(--sv-tilt,0deg))}50%{transform:translate3d(180px,-8px,0) rotate(var(--sv-tilt,0deg))}}@media (prefers-reduced-motion:reduce){.sv-cloud{animation:none}}

/*Search page*/
.search-top {display: inline-block; margin-bottom: 48px}
.search-top ul {display: flex;justify-content: space-between; gap: 48px}
.search-top .sf-field-post-meta-price_per_night, .search-top .sf-field-taxonomy-room_type, .search-top .sf-field-post-meta-room_features {display: none}
.search-top h4 {text-transform: uppercase}
.search-top ul li ul li {margin: 0 !important; padding: 0}
.search-top input[type=submit] {width: 300px;margin-top: 36px;}
.search-top .sf-field-post_date ul li {position: relative}
.search-top .sf-field-post_date ul li:last-of-type:before {content: 'Check out'; position: absolute; top: -30px; text-transform: uppercase; font-family: var(--main-font); font-weight: 700; font-size: 16px}

.search-left h4 {text-transform: uppercase}
.search-left label {padding-left: 0 !important}
.search-left .sf-meta-range-slider label {width: auto}
.search-left .sf-meta-range-slider label:last-of-type {float: right; text-align: right}
.search-left .sf-meta-range-slider label:last-of-type input {text-align: right}
.search-left .sf-meta-range-slider {display: grid;  grid-template-columns: 1fr auto 1fr;  grid-template-rows: auto auto;  width: 100%;  gap: 0.75rem 0.5rem; align-items: center;}
.search-left .sf-meta-range-slider > label:first-of-type {  grid-column: 1;  grid-row: 1;}
.search-left .sf-meta-range-slider > .sf-range-values-seperator {  grid-column: 2;  grid-row: 1;  text-align: center;  white-space: nowrap;  padding: 0 0.25rem;}
.search-left .sf-meta-range-slider > label:last-of-type {  grid-column: 3;  grid-row: 1;}
.search-left .sf-meta-range-slider > .meta-slider {grid-column: 1 / -1;grid-row: 2;width: 100%;max-width: calc(100% - 15px);}
.search-left .sf-meta-range-slider .sf-input-range-number {  width: 100%; max-width: 100%;  box-sizing: border-box;  display: block;}

.search-left [data-sf-field-input-type="checkbox"] input {display: none}
.search-left [data-sf-field-input-type="checkbox"] input[type=checkbox]:checked + label:after {font-family: 'Font Awesome 7 Free'; color: var(--color-mint); content: '\f058'; font-weight: 900; float: right; position: relative; top: 4px}
.search-left .sf-field-taxonomy-room_type ul li label.sf-label-checkbox:before {font-family: 'Font Awesome 7 Free'; color: var(--color-mint); margin-right: 10px}
.search-left .sf-field-taxonomy-room_type ul li:first-of-type label.sf-label-checkbox:before {content:'\f1ad'; margin-left: 2px; margin-right: 13px }
.search-left .sf-field-taxonomy-room_type ul li:nth-of-type(2) label.sf-label-checkbox:before {content:'\f015'; }
.search-left .sf-field-taxonomy-room_type ul li:last-of-type label.sf-label-checkbox:before {content:'\e1b0'; font-weight: 900; }
.searchandfilter .noUi-connect {background-color: var(--color-mint)}
.noUi-target {border: 0}

/*.search-left .sf-field-post-meta-room_features ul li label.sf-label-checkbox:before {font-family: 'Font Awesome 7 Free'; color: var(--color-mint); margin-right: 10px}
.search-left .sf-field-post-meta-room_features ul li:first-of-type label.sf-label-checkbox:before {content:'\f6c0'; }
.search-left .sf-field-post-meta-room_features ul li:nth-of-type(2) label.sf-label-checkbox:before {content:'\f015'; }
.search-left .sf-field-post-meta-room_features ul li:last-of-type label.sf-label-checkbox:before {content:'\e1b0'; }*/

.room-search-info {font-family: var(--title-font); margin-bottom: 24px}
.room-search-info strong {color: var(--color-white);}
.room-grid > div > a {display: grid; grid-template-columns: 500px 1fr; padding: 0; margin-bottom: 24px; text-decoration: none}
.room-grid > div > a:hover {translate: 0px -4px; transition-duration:0.15s} 
.search-filter-results .room-grid > div > a img {border-radius: var(--standardradius) 0 0 var(--standardradius); position:relative; display: block}
.room-grid > div > a > div:last-of-type {padding: 24px; border-left: 1px solid var(--color-trans15);}
.search-filter-results .room-grid h2 {margin: 8px 0 0 0; font-size: 24px; padding: 0}
.room-grid > div > a > div:last-of-type > div {display: grid; grid-template-columns: 1fr 1fr}
.room-grid > div > a > div:last-of-type > div p:last-of-type {text-align: right;}
.room-grid > div > a > div:last-of-type > div p:last-of-type button {background-color: var(--color-orange); border: 0; color: var(--color-white); font-weight: 600; padding: 12px 40px;  border-radius: var(--standardradius);font-size: 16px; cursor: pointer}


/*Single Rooms*/
ul.rooms-keyfeatures {display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 30px; list-style: none; padding: 0;  margin: 20px 0;}
ul.rooms-keyfeatures li {display: relative; margin-bottom: 10px; font-size: 14px;}
ul.rooms-keyfeatures i {width: 26px;height: 26px; margin-right: 5px}
ul.rooms-keyfeatures i:before {font-size: 20px; color: var(--color-mint); vertical-align: middle;}
ul.rooms-keyfeatures li a {position: relative;display: inline-block;text-decoration: none;}
ul.rooms-keyfeatures li a:hover {text-decoration: underline}
.is-selected {border-color: oklch(0.685 0.206 32.5)}
.room-images {display: grid; grid-template-columns: 2fr 1fr; gap:24px; align-items: start; max-width: 100%;}
.main-image {max-height: 893px; overflow: hidden;}
.main-image img {width: 100%; height: auto; max-height: 893px; object-fit: cover; display: block; border-radius:var(--standardradius);}
.thumbs-wrapper {display: flex; flex-direction: column; max-height: 893px;}
.thumbs {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: start; overflow-y: auto; flex: 1;}
.thumbs img {width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 6px; cursor: pointer; transition: opacity 0.2s ease;}
.thumbs img:hover {opacity: 0.85;}
.thumbs-hint {margin: 24px 0 0; text-align: center; font-size: 18px; color: var(--color-white); font-family: var(--title-font); line-height: 1.4;}

ul.room-features {margin: 0; padding: 0; list-style-type: none; column-count: 2;  column-gap: 24px;}
ul.room-features li {margin-bottom: 15px; break-inside: avoid;}
ul.room-features li span {display: inline-block; background-color: var(--color-trans15); color: var(--color-mint); border-radius: var(--standardradius); padding: 4px; width: 32px; height: 32px; vertical-align: middle; margin-right: 10px}
ul.room-features li span svg {}
ul.room-features li div {display: inline-block;  color: var(--color-mint);width: 32px; height: 32px; vertical-align: middle; margin-right: 10px}

.room-info {margin: 48px 0; display: grid; grid-template-columns: 1fr 430px; grid-gap:24px}
.room-info > div:first-of-type > div:nth-of-type(2) {margin: 48px 0}
.room-info .wp-block-table td,.wp-block-table th {border: 0;}
.room-info h3 {margin: 20px 0}

.room-price {font-family: var(--title-font);}
.room-price span {font-size: 34px; font-weight: 700; color: var(--color-white)}

.additional-info {margin: 48px 0}

.your-host {margin-top: 48px}
.your-host > div {display: grid; grid-template-columns: 300px 1fr; grid-column-gap: 24px}
.your-host img {border-radius: var(--standardradius);}

.wpbs-container .wpbs-calendars .wpbs-calendar {background-color: transparent; border-color: transparent}
.wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header {background-color: transparent;}
.wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-select-container select {background-color: transparent; border-color: var(--color-trans15)}
.wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-calendar-header-navigation .wpbs-next, .wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-calendar-header-navigation .wpbs-prev {background-color: transparent; }
.wpbs-container .wpbs-calendars .wpbs-calendar table tr td .wpbs-date.wpbs-gap {background-color: transparent;}
.room-info .wpbs-is-bookable div:first-of-type div:first-of-type {background-color: var(--color-trans15) !important; border: 1px solid var(--color-trans35) !important; border-radius: var(--standardradius)}
.room-info .wpbs-main-wrapper:not(.wpbs-main-wrapper-form-0) .wpbs-enable-hover .wpbs-is-bookable:hover:not(.wpbs-selected-first):not(.wpbs-selected-last) .wpbs-legend-item-icon div:first-of-type, .wpbs-main-wrapper:not(.wpbs-main-wrapper-form-0) .wpbs-date-hover:not(.wpbs-selected-first):not(.wpbs-selected-last) .wpbs-legend-item-icon div:first-of-type, .wpbs-main-wrapper:not(.wpbs-main-wrapper-form-0) .wpbs-date-hover.wpbs-selected-first.wpbs-selected-last .wpbs-legend-item-icon div:first-of-type {background-color: var(--color-trans15) !important}
.room-info td div.wpbs-date div.wpbs-legend-item-icon div:first-of-type {background-color: var(--color-trans5) !important; border-radius: var(--standardradius)}
.wpbs-date-number {font-weight: 600 !important}
.wpbs-legend-icon-select svg {border-radius: 24px !important; overflow: hidden; !important}
.wpbs-legend-item-icon-color svg {border-radius: 24px !important; overflow: hidden; !important}
.wpbs-legend {background: transparent; border: 0}
.wpbs-legend .wpbs-legend-item:first-of-type div .wpbs-legend-item-icon-color:first-of-type {background-color: var(--color-trans15) !important; border-radius: var(--standardradius); border: 1px solid var(--color-trans35)} /*available*/
.wpbs-legend .wpbs-legend-item:last-of-type div .wpbs-legend-item-icon-color:first-of-type {background-color: var(--color-trans15) !important; border-radius: var(--standardradius); border: 1px solid transparent} /*booked*/
.wpbs-container .wpbs-calendars .wpbs-calendar table tr td div:not(.wpbs-is-bookable) .wpbs-date-inner .wpbs-date-number {text-decoration: line-through; color: var(--color-trans35)}
.room-info .wpbs-is-bookable div.wpbs-legend-item-icon[data-type="split"] div.wpbs-legend-item-icon-color:first-of-type {border: 1px solid #ad413f !important; border-radius: 24px; background-color: #914B4A !important; border-style: inset !important;}
.room-info .wpbs-is-bookable div[data-type="split"] div:first-of-type svg {fill: #3D536C !important} /*split*/
.room-info .wpbs-is-bookable div[data-type="split"] div:last-of-type svg {fill: #3D536C !important}

.wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type=text], .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type=email], .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field select, .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field textarea {background-color: var(--color-trans5) !important;  padding: 12px 16px; border: 0 !important; border-radius: var(--standardradius) !important;}
.wpbs-main-wrapper .wpbs-form-container .wpbs-form-field label {text-transform: uppercase}
.wpbs-main-wrapper .wpbs-form-container .wpbs-field-required-asterisk {color: var(--color-main) !important; margin-left: 2px}
.wpbs-main-wrapper .wpbs-form-container .wpbs-form-field button[type=submit] {background-color: var(--color-orange) !important; border-radius: var(--standardradius) !important}

/*Blog*/
.blog-list {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 26px}
.blog-list > div {position: relative; padding-bottom: 50px}
.blog-list > div.sticky {grid-column: 1 / -1;}
.blog-list h2 {font-size: 26px}
.blog-list h2 a {text-decoration: none; color: var(--color-white)}
.blog-list h2 a:hover {text-decoration: underline}
.blog-list > div.sticky h2:before {content: '\2606  FEATURED'; display: inline-block; background-color: var(--color-orange);  margin-right: calc(100% - 140px); margin-bottom: 20px; font-size: 16px; padding: 5px 20px; border-radius: 26px; FONT-WEIGHT: 500}
.reading-time {position: absolute; bottom: 5px; font-size: 80%}
.reading-time i:last-of-type {margin-left: 20px}


.whitebackground {color: black; background-color: oklch(98.5% .006 236);
    background-image: radial-gradient(900px 520px at 88% -8%, oklch(91% .037 211 / .7), transparent 62%), radial-gradient(800px 500px at 5% 90%, oklch(96% .035 84 / .48), transparent 58%), linear-gradient(145deg, oklch(99% .004 235) 0%, oklch(97.5% .012 230) 52%, oklch(99% .008 88) 100%);
  }


/*404*/
body.error404 {min-height: 100vh;}
body.error404 header, body.error404 footer {display: none !important}
.error-404-content {display: flex;overflow: hidden;justify-content: center;align-items: center;min-height: 100vh;flex-direction: column; max-width: 620px; margin: auto; text-align: center; }
.error-404-content > p:first-of-type {color: var(--color-mint)}
.plane svg {color: oklch(68.5% .206 32.5);}
.trail {display: inline-block; background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, oklch(1 0 0 / 0.15) 50%, oklab(0.685 0.173739 0.110684 / 0.5) 100%); height: 1px; width: 240px}
.strap {color: var(--color-white); font-size: 26px; font-family: var(--title-font); font-weight: 800; margin-bottom: 10px}
.info {width: 100%; margin-top: 20px; margin-bottom: 40px}
.info-header {color: var(--color-mint); text-transform: uppercase; margin-bottom: 20px; font-weight: 700}
.info-header span {vertical-align:top; letter-spacing: 2.4px; margin-left: 10px}
.info-cols {display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: left; }
.info-cols div p {margin: 0}
.info-cols div > p:first-of-type {font-size: 14px}
.info-cols div > p:last-of-type {color: var(--color-white);}
.buttons404 p a:first-of-type {background-color: var(--color-orange); padding: 20px; border-radius: 26px; font-weight: 800; color: var(--color-white); text-decoration: none; margin-right: 20px}
.buttons404 p a:first-of-type:hover {background-color: #E8563E;}
.buttons404 p a:last-of-type {background-color: oklch(0.255 0.062 255.5); padding: 20px; border-radius: 26px; font-weight: 800; color: var(--color-white); text-decoration: none; border: 1px solid var(--color-trans35)}
.buttons404 p a:last-of-type:hover {background-color: var(--color-mint)}


/*footer*/
footer {position: relative; margin: 80px 0 0 0;}
footer .wrapper {border-top: 1px solid var(--color-main); padding: 30px 0}
footer h2 {margin: 0}
footer h3 {margin: 20px 0 5px}

.footer-links {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-column-gap: 20px; padding-right: 0px; margin: 40px 0}
footer ul {margin: 0; padding: 0; list-style-type: none;}
footer ul li {margin-bottom: 5px}
footer ul a {text-decoration: none}

#mc_embed_signup input {margin-bottom: 20px}
.footer-links h2 {margin-bottom: 20px !important}

.footer-logo {margin: 0 auto 40px auto; text-align: center; font-size: 44px}
.footer-logo a {color: var(--color-main); text-decoration: none}
.footer-logo {position: relative; margin-top: 3px;background: url('images/stayviation-logo-wt.png') no-repeat;width: 272px;height: 77px;background-size: 100% 100%;text-indent: 100%;white-space: nowrap;overflow: hidden;z-infdex: 9999; margin: 10px 0}
.footer-logo a {position: absolute; top: 0; left: 0; right: 0; bottom: 0}
.footer-signoff {display: grid; grid-template-columns: 1fr 1fr; }
.footer-signoff a {color: var(--color-main); text-decoration: none}

.footer-signoff p:last-child {text-align: right}

.footer-signoff p {position: relative; display: inline-block; margin: 20px 0}
.footer-signoff p:last-of-type {float: right}
.footer-signoff p:last-of-type img {vertical-align: middle; margin-left: 10px}


/*Responsive Menu*/
.hamb {display: none;}
#side-menu {display: none;}
.submenu-toggle {display:none}


/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (min-width: 1100px) {
		 	.wrapper {width: 100%;padding: 0 1%;}
		footer .wrapper {padding: 30px 1%;}
		.hideondesktop {display: none}
		}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 813px) and (max-width: 1099px) {
			.wrapper {width: 100%;padding: 0 1%;}
		footer .wrapper {padding: 30px 1%;}
		.hideondesktop {display: none}
			

		}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (min-width: 481px) and (max-width: 812px)  {
       .wrapper {width: 100%;padding: 0 1%;}
		footer .wrapper {padding: 30px 1%;}
			
			
			
		}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 480px) {
            .wrapper {padding: 0 4%}
			header .wrapper {display: block}
			.logo {width: 180px; height: 51px}
		.right-menu {display: none}
		.is-style-pre-header {font-size: 12px}
		h1 {font-size: 34px}
		h2 {font-size: 24px}

		.headertext .no-right-mobile {display: none}
		.full-width-buttons.wp-block-buttons-is-layout-flex {flex-wrap: wrap; gap:10px;}
		.full-width-buttons .wp-block-button {flex: 1 1 calc(33% - 0.5rem);  max-width: calc(33% - 0.5rem);}

		.room-grid ul {grid-template-columns: 1fr}
		
		.room-images {grid-template-columns: 1fr;} .main-image, .main-image img {max-height: none;} .thumbs-wrapper {max-height: none; margin-top: 12px;}
		
		.search-top {display: block}
		.search-top ul {display: block}
		.search-top ul li ul li:last-of-type {margin: 50px 0 0 0 !important}
		.search-top input[type=submit] {margin-top: 0; width: 100%}

		.room-grid > div > a {display: block; }
		.search-filter-results .room-grid > div > a img {border-radius: var(--standardradius) var(--standardradius) 0 0 }
		
		.room-info {display: block;}
ul.rooms-keyfeatures {flex-wrap: wrap;gap: 0px;}
ul.rooms-keyfeatures li {flex: 0 0 calc(50%);}
		ul.room-features {column-count: 1;}
		.room-calendar {margin-top: 48px}
		.your-host > div {display: grid; grid-template-columns: 1fr; grid-column-gap: 0px}
		
		.search-left h4 {margin-top: 0}
		.search-left h4.wp-block-heading {cursor: pointer;display: flex; align-items: center; justify-content: space-between; user-select: none; margin-bottom: 0;  }
.search-left h4.wp-block-heading::after {content: "▼"; font-size: 0.7em; transition: transform 0.3s ease; margin-left: 12px;  }
.search-left.is-open h4.wp-block-heading::after {transform: rotate(180deg);}
.search-left form {overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;margin-top: 0;}
.search-left.is-open form {max-height: 1200px; opacity: 1;margin-top: 16px;}
		
		.buttons404 p a {display: block; margin: 0 0 20px 0 !important}

		footer .wrapper {padding: 50px 4%}
		.footer-links {grid-template-columns: 1fr; row-gap: 30px}
		.footer-signoff {grid-template-columns: 1fr}
		.footer-signoff p:last-of-type {float: none;}
		.footer-signoff p:last-child {text-align: left}
            

			/* Nav menu on mobile */
            .main-menu{z-index:99; width: 100%; height: 100%; position: fixed; left: 0;right: 0; background-color: black; overflow: hidden; top: 75px /*set to height of header*/}
		.main-menu ul {display: block; margin-top: 24px}
            .main-menu ul li {display: block;text-align: left;}
		.main-menu ul li a {padding: 0 20px}
            .menu a{display: block;}
            .menu a:hover{background-color: var(--color-main);}
            .main-menu{max-height: 0;transition: max-height .5s ease-out;}
			.main-menu ul li a {color:  var(--color-white);}

            /* Menu Icon */
            .hamb{display: block;position: fixed;right: 20px;top: 13px;border-radius: 5px;cursor: pointer;float: right;padding: 20px 20px;background-color: var(--color-lighterblue);z-index: 999;width: 24px;height: 24px;}
            .hamb-line {background: var(--color-main); display: block; height: 2px; position: relative; width: 24px;}
            .hamb-line::before,
            .hamb-line::after{background: var(--color-main); content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%;}
            .hamb-line::before{top: 5px;}
            .hamb-line::after{top: -5px;}

            .side-menu {display: none;}

            /* Toggle menu icon */
            .side-menu:checked ~ nav{max-height: 100%;}
            .side-menu:checked ~ .hamb .hamb-line {background: transparent;}
            .side-menu:checked ~ .hamb .hamb-line::before {transform: rotate(-45deg); top:0;}
            .side-menu:checked ~ .hamb .hamb-line::after { transform: rotate(45deg); top:0;}

		/* Parent menu layout */
.main-menu li.menu-item-has-children{
    position:relative;
}

.main-menu li.menu-item-has-children > a{
    display:block;
    padding-right:55px; /* room for button */
}

/* Toggle button */
.submenu-toggle{
    position:absolute;
    top:0;
    right:0;
    width:50px;
    height:100%;
    border:0;
    background:none;
    color:#fff;
    cursor:pointer;
    font-size:20px;
	display:block;
}

/* Plus icon */
.submenu-toggle::before{
    content:"+";
    display:block;
    transition:.2s;
	position: absolute; top: 10px
}

/* Change to minus when open */
.submenu-toggle.open::before{
    content:"−";
}

/* Hide submenus initially */
.main-menu .sub-menu{
    display:none;
    position:static;
    width:100%;
    background:rgba(255,255,255,.08);
    padding-left:20px;
}
            
        }