/*
 * pages.css — the Home page and the designed pages (Holiday Types, Multi Centre,
 * Concierge, The Society, Quick Quote): the components they share.
 *
 * Breakpoints are the old builder's: tablet extra up to 1366px, tablet up to 1024px,
 * mobile up to 767px. Boxed content is 1140px wide, 1024px on tablets and 767px on
 * phones (--page-boxed), unless a section sets its own width.
 */

.designed-page{--page-boxed:1140px}
/* Every top-level section is positioned, as the old containers all were. Besides stacking,
   this decides how the browser groups the page into compositing layers over the moving
   hero, which shows in the antialiasing of edges near it. */
.designed-page > *{position:relative}
@media (max-width:1024px){.designed-page{--page-boxed:1024px}}
@media (max-width:767px){.designed-page{--page-boxed:767px}}

body.has-grey-background{background-color:var(--color-grey-background)}

/* Background images of the sections further down a page wait until the section comes
   within 200px of the viewport (pages.js), from the fourth section, or the third on
   screens up to 1024px tall and the second up to 640px, as the old pages did. */
.designed-page > :nth-child(n+4):not(.is-near-view),
.designed-page > :nth-child(n+4):not(.is-near-view) *{background-image:none!important}
@media screen and (max-height:1024px){
  .designed-page > :nth-child(n+3):not(.is-near-view),
  .designed-page > :nth-child(n+3):not(.is-near-view) *{background-image:none!important}
}
@media screen and (max-height:640px){
  .designed-page > :nth-child(n+2):not(.is-near-view),
  .designed-page > :nth-child(n+2):not(.is-near-view) *{background-image:none!important}
}

/* ---------- Text ---------- */

.page-text{font-family:var(--font-brand);font-weight:400;color:var(--color-text)}
/* Links in running text are underlined, as the old pages' content wrapper did. */
.page-text a{text-decoration:underline}
/* "Flush" text cancels the bottom margin of its last paragraph (the old widgets carried a
   -15px bottom margin), so whatever follows sits a gap below the last line. */
.page-text--flush::after{content:"";display:block;margin-top:-15px}

/* The small rounded label above a heading. */
.pill-label{
  align-self:flex-start;margin:0;padding:0 20px;border-radius:100px;
  background-color:var(--color-heading-background);
  font-family:var(--font-brand);font-size:16px;font-weight:600;line-height:45px;
  letter-spacing:1.8px;text-transform:uppercase;color:var(--color-primary);
}
@media (max-width:767px){.pill-label{font-size:12px;line-height:36px}}

/* ---------- Buttons ---------- */

.page-button{
  display:inline-block;padding:10px 40px;border-radius:var(--button-radius);
  background-color:var(--color-primary);color:#fff;fill:#fff;
  font-family:var(--font-brand);font-size:15px;font-weight:500;line-height:1;
  text-align:center;text-decoration:none;
}
.page-button:visited{color:#fff}
/* A button that keeps focus after a click turns near-black until hovered. */
.page-button:focus{background-color:var(--color-primary-dark);color:#fff}
.page-button:hover,.page-button:focus-visible{color:#fff;box-shadow:0 8px 24px -6px rgba(27,138,207,.55)}
.page-button:focus-visible{outline:2px solid var(--color-button-dark);outline-offset:3px}
.page-button:active{box-shadow:0 2px 8px -3px rgba(27,138,207,.5);transition-duration:.08s}
@media (prefers-reduced-motion:reduce){
  .page-button{transition:background-color .12s linear,color .12s linear,box-shadow .12s linear}
}

/* The phone number with its handset icon. */
.phone-link{display:flex;align-items:center;text-decoration:none}
.phone-link__icon{display:flex;position:relative}
.phone-link__icon svg{width:14px;height:14px;margin:0 3.5px 0 0;fill:var(--color-primary);transition:fill .3s}
.phone-link__text{
  align-self:center;padding-inline-start:5px;
  font-family:var(--font-brand);font-size:16px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--color-primary);transition:color .3s;
}

/* ---------- Hero with a scrolling background ---------- */

.page-hero{position:relative;min-height:462px}
@media (max-width:767px){.page-hero{min-height:216px}}

/* ---------- Introduction card overlapping the hero ---------- */

.page-intro{position:relative;margin-top:-100px;padding:0 60px}
.page-intro__card{
  max-width:1600px;margin:0 auto;background-color:#fff;
  border-bottom:3px solid var(--color-primary);box-shadow:0 16px 24px -13px rgba(0,0,0,.18);
}
.page-intro__inner{
  display:flex;align-items:center;gap:20px;
  max-width:min(100%,var(--page-boxed));margin:0 auto;padding:60px 0;
}
.page-intro__heading{display:flex;flex-direction:column;gap:20px;width:100%;min-width:0}
.page-intro__eyebrow{
  margin:0;font-family:var(--font-brand);font-size:14px;font-weight:600;line-height:1;
  letter-spacing:6.8px;text-transform:uppercase;color:var(--color-primary);text-align:left;
}
.page-intro__title{
  margin:0;font-family:var(--font-brand);font-size:40px;font-weight:600;line-height:1;
  letter-spacing:6.8px;text-transform:uppercase;color:var(--color-primary-dark);text-align:left;
}
.page-intro__text{width:100%;min-width:0}
@media (min-width:768px) and (max-width:1366px){
  .page-intro:not(.page-intro--home) .page-intro__card{padding:0 20px}
  .page-intro:not(.page-intro--home) .page-intro__title{font-size:30px}
}
@media (max-width:767px){
  .page-intro{margin-top:-50px;padding:10px}
  .page-intro .page-intro__card{padding:0 30px}
  .page-intro__inner{flex-wrap:wrap;padding:30px 0}
  .page-intro .page-intro__title{font-size:28px}
}

/* ---------- Image and text panels ---------- */

.feature-panel{margin:100px 0}
.feature-panel__inner{display:flex;max-width:min(100%,var(--page-boxed));margin:0 auto}
.feature-panel--image-right .feature-panel__inner{flex-direction:row-reverse}
.feature-panel__image{
  position:relative;width:40%;min-width:0;min-height:70px;padding:10px;
  background-image:var(--panel-image);background-size:cover;
  background-position:var(--panel-position,center center);
}
.feature-panel__body{
  display:flex;flex-direction:column;justify-content:center;gap:20px;
  width:60%;min-width:0;min-height:550px;padding:50px;background-color:#fff;
}
.feature-panel--grey .feature-panel__body{background-color:var(--color-grey-background)}
.feature-panel__logo{display:flex;gap:20px}
.feature-panel__logo-image{text-align:center}
.feature-panel__logo-image img{display:inline-block;vertical-align:middle;width:186px}
.feature-panel__title{
  margin:0;font-family:var(--font-brand);font-size:32px;font-weight:600;line-height:40px;
  text-transform:none;color:var(--color-primary-dark);text-align:left;
}
.feature-panel--wide .feature-panel__inner{max-width:min(100%,1200px)}
@media (max-width:1366px){
  .feature-panel{padding:20px}
}
@media (max-width:767px){
  .feature-panel{margin:25px 0;padding:0 10px}
  .feature-panel__inner,.feature-panel--image-right .feature-panel__inner{flex-direction:row;flex-wrap:wrap}
  .feature-panel--wide .feature-panel__inner{max-width:min(100%,var(--page-boxed))}
  .feature-panel__image{width:100%;min-height:240px;background-position:var(--panel-position-mobile,var(--panel-position,center center))}
  .feature-panel__body{width:100%;padding:30px}
  .feature-panel__title{font-size:25px}
}

/* ---------- Destination columns ---------- */

.destinations__inner{display:flex;gap:20px;margin:0 auto}
.destinations__column{display:flex;flex-direction:column;width:100%;min-width:0}
.destinations__image{text-align:center}
.destinations__image img{display:inline-block;vertical-align:middle;border-bottom:3px solid var(--color-primary)}
.destinations__body{display:flex;flex-direction:column;gap:20px;padding-top:30px}
.destinations__title{
  margin:0;font-family:var(--font-brand);font-size:20px;font-weight:600;line-height:1;
  letter-spacing:3.9px;text-transform:uppercase;color:var(--color-primary-dark);text-align:left;
}
.destinations__title a{color:inherit}
.destinations__title a:hover,.destinations__title a:focus{color:var(--color-primary)}
.destination-menu{display:flex;flex-direction:column}
.destination-menu__list,.destination-menu__list li{display:block;margin:0;padding:0;list-style:none;line-height:normal}
.destination-menu__list a{
  display:flex;align-items:center;padding:5px 0;line-height:20px;width:fit-content;
  font-family:var(--font-brand);font-weight:400;color:var(--color-primary-dark);
}
.destination-menu__list a:hover,.destination-menu__list a:focus{color:var(--color-primary)}
.destination-menu__list .current-menu-item > a{color:var(--color-blue-on-dark)}
@media (max-width:767px){
  .destinations__inner{flex-wrap:wrap}
  .destinations .destinations__title{font-size:20px;line-height:1.4em}
}

/* ---------- "Why choose us" tiles ---------- */

.why-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(1,1fr);gap:20px;width:100%}
.why-grid__tile{display:flex;min-width:0;flex-direction:column;padding:15px;background-color:var(--color-primary-dark)}
.why-grid__frame{display:flex;min-width:0;flex-direction:column;gap:20px;padding:30px 15px;border:3px solid var(--color-primary)}
.why-grid__icon{text-align:center}
.why-grid__icon-box{display:inline-block;font-size:35px;line-height:1;color:#fff;fill:#fff}
.why-grid__icon-box svg{display:block;position:relative;width:1em;height:35px}
.why-grid__title{
  margin:0;font-family:var(--font-brand);font-size:19px;font-weight:600;line-height:1;
  letter-spacing:3.9px;text-transform:uppercase;color:#fff;text-align:center;
}
.why-grid__text{text-align:center;color:#fff}
@media (max-width:1366px){.why-grid__title{font-size:15px}}
@media (max-width:767px){
  .why-grid{grid-template-columns:repeat(1,1fr);gap:15px}
  .why-grid__title{font-size:20px;line-height:1.4em}
}

/* ---------- Section headings ---------- */

.section-title{
  margin:0;font-family:var(--font-brand);font-size:32px;font-weight:600;line-height:40px;
  text-transform:none;color:var(--color-primary-dark);
}
.section-title--h3{font-size:28px}
@media (max-width:767px){
  .section-title{font-size:25px}
  .section-title--h3{font-size:20px}
}

/* ---------- Text sections (The Society) ---------- */

.text-section__inner{
  display:flex;flex-direction:column;justify-content:center;gap:20px;
  max-width:min(100%,1200px);margin:0 auto;
}
.text-section--story{margin:100px 0 50px}
.text-section--directors{margin:100px 0 30px}
.text-section--directors .pill-label{align-self:center}
.text-section--directors .section-title,
.text-section--directors .page-text{text-align:center}
@media (max-width:1366px){.text-section--story{padding:0 20px}}
@media (max-width:767px){
  .text-section--story,.text-section--directors{margin:25px 0;padding:0 10px}
  .text-section__inner{max-width:min(100%,var(--page-boxed))}
  .text-section--directors .text-section__inner{align-items:flex-start}
  .text-section--directors .pill-label{align-self:flex-start}
  .text-section--directors .page-text{text-align:left}
}

/* ---------- "Why choose us" block (The Society) ---------- */

.why-us--society{display:flex;flex-direction:column;justify-content:center;margin:50px 0 100px;padding:0 10px}
.why-us--society .why-us__box{width:100%;background-color:#fff}
.why-us--society .why-us__inner{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;
  max-width:min(100%,1200px);margin:0 auto;
}
@media (max-width:767px){
  .why-us--society{margin:0;padding:0}
  .why-us--society .why-us__box{padding:0 10px}
  .why-us--society .why-us__inner{max-width:min(100%,var(--page-boxed));padding:10px 0}
}

/* One panel on The Society never had the tablet padding the others have. */
@media (min-width:768px) and (max-width:1366px){
  .feature-panel--tablet-unpadded{padding:0}
}

/* ---------- Directors (The Society) ---------- */

.directors{margin:0 0 100px}
.directors__inner{display:flex;flex-direction:row-reverse;gap:0 30px;max-width:min(100%,1200px);margin:0 auto}
.director{
  display:flex;flex-direction:column;justify-content:center;gap:20px;
  width:100%;min-width:0;padding:50px;background-color:var(--color-grey-background);
}
.director__heading{display:flex;flex-direction:column}
.director__name{margin:0;font-family:var(--font-brand);font-size:24px;font-weight:600;line-height:40px;color:var(--color-primary-dark)}
.director__role{margin:0;font-family:var(--font-brand);font-size:16px;font-weight:600;line-height:40px;color:var(--color-primary)}
.director__button{position:relative;z-index:1}
@media (max-width:1366px){.directors{padding:20px}}
@media (max-width:767px){
  .directors{margin:25px 0;padding:0 10px}
  .directors__inner{flex-direction:row;flex-wrap:wrap;gap:30px 0;max-width:min(100%,var(--page-boxed))}
  .director{padding:30px}
}

/* ---------- Article beside a contact card (Multi Centre) ---------- */

.split-section{margin:50px 0}
.split-section__inner{display:flex;gap:50px;max-width:min(100%,1200px);margin:0 auto}
.split-section__main{display:flex;flex-direction:column;justify-content:center;gap:20px;width:63%;min-width:0}
.contact-card{
  display:flex;flex-direction:column;justify-content:center;
  width:37%;min-width:0;min-height:550px;padding:40px 20px;background-color:var(--color-grey-background);
}
.contact-card__intro{display:flex;flex-direction:column;gap:20px;padding:0 20px 10px}
.contact-card__eyebrow{
  margin:0;font-family:var(--font-brand);font-size:14px;font-weight:600;line-height:1;
  letter-spacing:6.8px;text-transform:uppercase;color:var(--color-primary);
}
.contact-card__title{margin:0;font-family:var(--font-brand);font-size:28px;font-weight:600;line-height:40px;color:var(--color-primary-dark)}
/* The whole row is one link; like the old page's content links it is underlined, which
   carries through to its text. */
a.contact-option{
  display:flex;justify-content:center;padding:15px 20px;border-radius:10px;text-decoration:underline;
  transition:background .3s,border .3s,box-shadow .3s,transform .4s;
}
.contact-option:hover{background-color:#1B8ACF1C}
.contact-option__icon{display:flex;flex-direction:column;justify-content:center;width:26%;min-width:0}
.contact-option__icon-wrap{text-align:left}
.contact-option__icon-box{display:inline-block;font-size:55px;line-height:1;color:var(--color-button-dark);fill:var(--color-button-dark);transition:all .3s}
.contact-option__icon-box svg{display:block;position:relative;width:auto;height:55px}
.contact-option__body{display:flex;flex-direction:column;justify-content:center;gap:12px 0;width:74%;min-width:0}
.contact-option__title{margin:0;font-family:var(--font-brand);font-size:18px;font-weight:600;line-height:1;color:var(--color-primary-dark);text-align:left}
.contact-option__text{text-align:left}
@media (min-width:768px) and (max-width:1366px){.contact-card{width:44%}}
@media (max-width:1366px){.split-section{padding:20px}}
@media (max-width:767px){
  .split-section{margin:25px 0;padding:0 10px}
  .split-section__inner{flex-wrap:wrap;gap:25px 0;max-width:min(100%,var(--page-boxed))}
  .split-section__main,.contact-card{width:100%}
  .split-section .section-title--h3{line-height:30px}
  .contact-card__title{font-size:20px;line-height:26px}
  .contact-option{flex-wrap:wrap}
  .contact-option:not(:last-child){margin-bottom:10px}
  .contact-option__icon,.contact-option__body{width:100%}
  .contact-option__icon-wrap{margin-bottom:10px}
}

/* ---------- Destination columns (Multi Centre) ---------- */

.destinations--multi-centre{padding:70px 0;background-color:var(--color-grey-background);border-bottom:3px solid var(--color-primary)}
.destinations--multi-centre .destinations__inner{max-width:min(100%,1430px)}
@media (max-width:767px){
  .destinations--multi-centre{padding:20px 10px}
  .destinations--multi-centre .destinations__inner{max-width:min(100%,var(--page-boxed))}
}

/* ---------- Quick Quote (redesigned 12 October 2026, page-quick-quote.php) ----------
   The form is a white card in three numbered steps on the soft grey page. Beside it on
   desktop, held in view while the form is filled in: the hotel the visitor came from, or
   the page photo, and the dark contact card. On tablets and phones it is one column: the
   hotel as a compact row, the form, then the contact card. Gravity Forms' own styles and
   the old ones in forms.css are mostly !important or id-based, hence the !important here. */

.quote-page{padding:48px 24px 112px;background-color:var(--color-grey-background)}
.quote-page__inner{
  display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"form aside";
  column-gap:56px;align-items:start;max-width:1200px;margin:0 auto;
}
.quote-page__aside{grid-area:aside;position:sticky;top:32px;display:flex;flex-direction:column;gap:24px}

/* The hotel the quote is for. */
.quote-hotel{display:flex;flex-direction:column;overflow:hidden;border-radius:15px;background:#fff;box-shadow:0 1px 2px rgba(22,40,60,.05),0 12px 32px -14px rgba(22,40,60,.18)}
.quote-hotel__image img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.quote-hotel__body{display:flex;flex-direction:column;gap:6px;padding:22px 26px 26px;font-family:var(--font-brand)}
.quote-hotel__eyebrow{font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--color-primary)}
.quote-hotel__name{font-size:20px;font-weight:600;line-height:1.3;color:var(--color-primary-dark)}
.quote-hotel__place{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--color-text)}
.quote-hotel__place svg{flex:none;width:13px;height:13px;fill:var(--color-primary)}
.quote-hotel__price{margin-top:12px;font-size:14px;color:var(--color-text)}
.quote-hotel__price strong{font-size:18px;font-weight:600;color:var(--color-primary-dark)}
.quote-hotel__basis{display:block;font-size:13px}
.quote-hotel__visited{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:14px;padding:5px 12px;
  border-radius:999px;background:rgba(27,138,207,.09);font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--color-button-dark);
}
.quote-hotel__visited svg{flex:none;width:13px;height:13px;fill:currentColor}

/* The page photo, when no hotel is named. */
.quote-page__image img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:15px}

/* Contact card. */
.quote-contact{display:flex;flex-direction:column;gap:20px;padding:32px;border-radius:15px;background-color:var(--color-primary-dark);font-family:var(--font-brand)}
.quote-contact__title{margin:0;font-size:15px;font-weight:600;line-height:1.4;letter-spacing:2px;text-transform:uppercase;color:#fff;text-align:left}
.quote-contact__text{font-size:15px;line-height:1.55;color:var(--color-para-on-dark)}
.quote-contact__text p{margin:0}
.quote-contact__list{display:flex;flex-direction:column;gap:18px;margin:0}
.quote-contact__item{display:flex;flex-direction:column;gap:4px}
.quote-contact__label{margin:0;font-size:12px;font-weight:600;line-height:1.5;letter-spacing:1.6px;text-transform:uppercase;color:var(--color-blue-on-dark)}
.quote-contact__detail{margin:0;font-size:15px;font-weight:400;line-height:1.5;color:var(--color-para-on-dark);text-align:left}
.quote-contact__detail a{color:#fff;text-decoration:none}
.quote-contact__detail a:hover,.quote-contact__detail a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.quote-contact__detail .quote-contact__phone{font-size:20px;font-weight:600;letter-spacing:.5px}
.quote-contact__rating{display:flex;flex-direction:column;gap:8px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.quote-contact__rating .quote-contact__detail{font-size:13px}
.star-rating{display:flex;justify-content:flex-start}
.star-rating__stars{display:flex;flex-wrap:wrap;width:fit-content}
.star-rating__star{position:relative}
.star-rating__icon--marked{position:absolute;top:0;left:0;z-index:1;width:var(--star-fill,100%);height:100%;overflow:hidden}
.star-rating__icon svg{display:flex;flex-shrink:0;width:auto;height:17px}

/* ----- The form ----- */
.quote-form{grid-area:form;padding:48px 56px 56px;border:1px solid #E3E8EC;border-radius:15px;background:#fff;box-shadow:0 1px 2px rgba(22,40,60,.04),0 16px 40px -20px rgba(22,40,60,.16)}
.page-quick-quote #gform_wrapper_1.gform-theme{
  --gf-color-primary:#1B8ACF!important;--gf-color-primary-rgb:27,138,207!important;
  --gf-color-in-ctrl-primary:#1B8ACF!important;--gf-color-in-ctrl-primary-rgb:27,138,207!important;
  --gf-ctrl-border-color:#C9D3DA!important;--gf-radius:10px!important;
  margin:0;
}
.page-quick-quote #gform_fields_1{counter-reset:quote-step;row-gap:28px!important;column-gap:24px!important}

/* Steps: Your Details, Your Holiday, Your Travel, Final Details (field 34, a divider until
   12 October 2026). The other old dividers are replaced by a rule above each later step.
   Field 36 only holds the date picker's script. */
.page-quick-quote :is(#field_1_14,#field_1_37,#field_1_33,#field_1_36){display:none!important}
.page-quick-quote :is(#field_1_11,#field_1_32,#field_1_29,#field_1_34){display:flex;align-items:center;gap:14px;padding-top:0!important;counter-increment:quote-step}
.page-quick-quote :is(#field_1_32,#field_1_29,#field_1_34){margin-top:20px;padding-top:40px!important;border-top:1px solid #E3E8EC}
.page-quick-quote :is(#field_1_11,#field_1_32,#field_1_29,#field_1_34)::before{
  content:counter(quote-step);display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--color-primary);font-family:var(--font-brand);font-size:14px;font-weight:600;color:#fff;
}
.page-quick-quote .gform-body :is(#field_1_11,#field_1_32,#field_1_29,#field_1_34) b{
  font-family:var(--font-brand);font-size:14px!important;font-weight:600;letter-spacing:2px;color:var(--color-primary-dark)!important;
}
/* "What's important for you?" (46) as the site's pill label, and the questions it introduces
   hanging off a pale blue line from it, so they read as one group under the toggle. */
.page-quick-quote #field_1_46{padding-top:4px!important}
.page-quick-quote .gform-body #field_1_46 b{
  display:inline-block;padding:0 18px;border-radius:999px;background:var(--color-heading-background);
  font-family:var(--font-brand);font-size:12px!important;font-weight:600;line-height:34px;letter-spacing:1.8px;color:var(--color-primary)!important;
}
.page-quick-quote :is(#field_1_41,#field_1_43,#field_1_44,#field_1_48){position:relative;padding-left:22px!important}
.page-quick-quote :is(#field_1_41,#field_1_43,#field_1_44,#field_1_48)::before,
.page-quick-quote :is(#field_1_41,#field_1_43,#field_1_44,#field_1_48) > legend::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:rgba(27,138,207,.25);
}
/* Each question is a fieldset, whose box starts below its label, so the label carries the
   part of the line from the gap above down to the choices. */
.page-quick-quote :is(#field_1_41,#field_1_43,#field_1_44,#field_1_48) > legend{position:relative}
.page-quick-quote :is(#field_1_41,#field_1_43,#field_1_44,#field_1_48) > legend::before{top:-28px;bottom:-10px;left:-22px}

/* Labels as typed, not in capitals. */
.page-quick-quote .gform-body .gfield .gform-field-label:not(.gform-field-label--type-inline){
  margin-bottom:10px!important;font-family:var(--font-brand);font-size:14px!important;font-weight:600!important;
  line-height:1.4!important;letter-spacing:0;text-transform:none!important;color:var(--color-primary-dark)!important;
}
.page-quick-quote .gform-body .gform-field-label .gfield_required_asterisk{font-size:14px;color:var(--color-primary)}

/* Boxes. */
.page-quick-quote .gform-body .gfield :is(input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea){
  min-height:54px!important;padding:14px 18px!important;border:1px solid #C9D3DA!important;border-radius:10px!important;
  background-color:#fff;box-shadow:none!important;font-family:var(--font-brand);font-size:16px!important;line-height:1.4!important;color:#112337;
  transition:border-color .2s,box-shadow .2s;
}
.page-quick-quote .gform-body .gfield select{padding-right:44px!important;background-position:right 16px center!important}
.page-quick-quote .gform-body .gfield textarea{min-height:132px!important;height:132px}
.page-quick-quote .gform-body .gfield :is(input,select,textarea):hover{border-color:#9FB0BC!important}
.page-quick-quote .gform-body .gfield :is(input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea):focus{
  outline:none!important;border-color:var(--color-primary)!important;box-shadow:0 0 0 4px rgba(27,138,207,.16)!important;
}
/* The 1 to 10 hints under the adult and child counts show only when the answer is out of range. */
.page-quick-quote :is(#field_1_18,#field_1_19):not(.gfield_error) .gfield_description.instruction{display:none}

/* Yes/No questions (Flights Required, House Reef) as a two-part switch, and "open to other
   hotels" as an on/off toggle. Each real input stays, invisible, over its label, so a tap
   anywhere on the choice sets it and the keyboard works as before. */
.page-quick-quote .gform-body :is(.gfield_radio,.gfield_checkbox){padding-top:0!important}
.page-quick-quote .gform-body .gfield .gchoice{position:relative;display:flex!important;width:100%;margin:0!important}
.page-quick-quote .gform-body .gfield .gchoice input{
  position:absolute!important;inset:0;z-index:1;width:100%!important;height:100%!important;margin:0!important;opacity:0!important;cursor:pointer;
}
.page-quick-quote .gform-body .gfield .gchoice .gform-field-label--type-inline{
  display:flex!important;flex:1;align-items:center;margin:0!important;font-family:var(--font-brand);font-size:15px!important;font-weight:500!important;
}

.page-quick-quote .gform-body .gfield_radio{
  display:grid!important;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px!important;padding:4px!important;
  border:1px solid #C9D3DA;border-radius:12px;background:var(--color-grey-background);
}
.page-quick-quote .gform-body .gfield_radio .gform-field-label--type-inline{
  justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:9px;color:var(--color-text)!important;
  transition:background-color .2s,color .2s,box-shadow .2s;
}
.page-quick-quote .gform-body .gfield_radio .gchoice:hover .gform-field-label--type-inline{color:var(--color-primary-dark)!important}
.page-quick-quote .gform-body .gfield_radio input:checked + .gform-field-label--type-inline{
  background:#fff;color:var(--color-primary-dark)!important;font-weight:600!important;
  box-shadow:0 1px 2px rgba(22,40,60,.08),0 4px 12px -4px rgba(22,40,60,.2);
}
.page-quick-quote .gform-body .gfield_radio input:checked + .gform-field-label--type-inline::before{
  content:"";flex:none;width:14px;height:14px;background:var(--color-primary);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-quick-quote .gform-body .gfield_radio input:focus-visible + .gform-field-label--type-inline{outline:2px solid var(--color-primary);outline-offset:2px}

.page-quick-quote .gform-body #field_1_39 .gfield_checkbox{display:block!important}
.page-quick-quote .gform-body #field_1_39 .gform-field-label--type-inline{
  justify-content:space-between;gap:16px;min-height:54px;padding:0 14px 0 18px;border:1px solid #C9D3DA;border-radius:12px;
  background:#fff;color:var(--color-primary-dark)!important;transition:border-color .2s,background-color .2s,box-shadow .2s;
}
.page-quick-quote .gform-body #field_1_39 .gform-field-label--type-inline::after{
  content:"";flex:none;width:44px;height:26px;border-radius:999px;
  background:#C9D3DA radial-gradient(circle,#fff 0 10px,transparent 10.5px) no-repeat 0 50% / 26px 26px;
  transition:background-color .2s,background-position .2s;
}
.page-quick-quote .gform-body #field_1_39 .gchoice:hover .gform-field-label--type-inline{border-color:#9FB0BC}
.page-quick-quote .gform-body #field_1_39 input:checked + .gform-field-label--type-inline{border-color:var(--color-primary);background:rgba(27,138,207,.05)}
.page-quick-quote .gform-body #field_1_39 input:checked + .gform-field-label--type-inline::after{background-color:var(--color-primary);background-position:100% 50%}
.page-quick-quote .gform-body #field_1_39 input:focus-visible + .gform-field-label--type-inline{box-shadow:0 0 0 4px rgba(27,138,207,.16)}
/* On a full-width row, a Yes/No switch and the toggle keep to one column's width; choices
   with three or more options (villa 41, transfers 43, board basis 44, house reef 48) use the full row, and
   on phones they stack, one option per line. By field, not :has(), which some browsers
   ignored here. */
@media (min-width:768px){
  .page-quick-quote .gform-body .gfield--width-full :is(.gfield_radio,.gfield_checkbox){max-width:calc(50% - 12px)}
  .page-quick-quote .gform-body :is(#field_1_41,#field_1_43,#field_1_44,#field_1_48) .gfield_radio{max-width:none}
}
@media (max-width:767px){
  .page-quick-quote .gform-body :is(#field_1_41,#field_1_43,#field_1_44,#field_1_48) .gfield_radio{grid-auto-flow:row}
}

/* Dropdowns (quote-form.js). The real select stays in the form for Gravity Forms, hidden. */
.page-quick-quote .gform-body .gfield select.quote-select__native{
  position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;
  opacity:0;pointer-events:none;clip-path:inset(50%);
}
.quote-select{position:relative}
.quote-select__button{
  display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:0 16px 0 18px;
  border:1px solid #C9D3DA;border-radius:10px;background:#fff;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  font-family:var(--font-brand);font-size:16px;line-height:1.4;color:#112337;text-align:left;
  transition:border-color .2s,box-shadow .2s;
}
.quote-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quote-select__button.is-placeholder .quote-select__value{color:rgba(17,35,55,.45)}
.quote-select__button::after{
  content:"";flex:none;width:18px;height:18px;background:#5B6B78;transition:transform .2s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.quote-select.is-open .quote-select__button::after{transform:rotate(180deg)}
.quote-select__button:hover{border-color:#9FB0BC}
.quote-select__button:focus,.quote-select.is-open .quote-select__button{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(27,138,207,.16)}
.page-quick-quote .gfield_error .quote-select__button{border-color:#C02B0A}
.quote-select__list{
  position:absolute;top:calc(100% + 8px);right:0;left:0;z-index:40;max-height:300px;margin:0;padding:6px;overflow-y:auto;overscroll-behavior:contain;
  list-style:none;border:1px solid #E3E8EC;border-radius:12px;background:#fff;
  box-shadow:0 2px 6px rgba(22,40,60,.06),0 20px 44px -12px rgba(22,40,60,.28);
  animation:quote-select-in .16s cubic-bezier(.2,.7,.3,1);
}
.quote-select__list[hidden]{display:none}
.quote-select--up .quote-select__list{top:auto;bottom:calc(100% + 8px);animation-name:quote-select-up}
@keyframes quote-select-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes quote-select-up{from{opacity:0;transform:translateY(4px)}}
.quote-select__option{
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 12px;border-radius:8px;
  font-family:var(--font-brand);font-size:15px;color:var(--color-primary-dark);cursor:pointer;
}
.quote-select__option.is-active{background:var(--color-grey-background)}
.quote-select__option[aria-selected="true"]{font-weight:600;color:var(--color-button-dark)}
.quote-select__option[aria-selected="true"]::after{
  content:"";flex:none;width:14px;height:14px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Searchable boxes (quote-form.js): Departure Airport, and Hotel and Destination when the
   visitor did not come from a hotel page. The list is the dropdowns' list, with the typed
   text in bold and a hotel's destination in grey; a tick replaces the arrow once the box
   holds an entry from the list. */
.quote-combo{position:relative}
.quote-combo::after{
  content:"";position:absolute;top:50%;right:16px;width:18px;height:18px;margin-top:-9px;background:#5B6B78;pointer-events:none;transition:transform .2s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.quote-combo.is-open::after{transform:rotate(180deg)}
.quote-combo.is-match:not(.is-open)::after{
  background:var(--color-primary);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12.4l2.7 2.6L16 9.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12.4l2.7 2.6L16 9.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-quick-quote .gform-body :is(#input_1_8,#input_1_31,#input_1_23){padding-right:46px!important}
.quote-select__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quote-select__group{padding:8px 12px 6px;font-family:var(--font-brand);font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--color-text);list-style:none}
.quote-select__note{flex:none;font-size:13px;font-weight:400;color:var(--color-text)}
/* "About This Visitor" is a heading for the enquiry email only (hidden fields under it). */
.page-quick-quote .tlts-visit-section{display:none!important}
/* From a hotel page the hotel and destination are already known (the card shows the hotel),
   so their filled-in fields are hidden. */
.page-quick-quote--hotel :is(#field_1_8,#field_1_31){display:none!important}
.quote-select__option mark{background:none;color:inherit;font-weight:700}
.quote-select__empty{padding:12px;font-family:var(--font-brand);font-size:14px;line-height:1.45;color:var(--color-text);list-style:none}
@media (max-width:767px){.quote-combo .quote-select__list{max-height:240px}}
@media (prefers-reduced-motion:reduce){.quote-combo::after{transition:none}}

/* Departure Date: a calendar icon in the box, and the calendar itself (jQuery UI, added to
   the end of the page). Gravity Forms styles the calendar through its --gf-ctrl-date-picker-*
   settings; the base reset's striped table rows are cleared. The month and year show as a
   title between two arrows (quote-form.js turns their selects off). */
.page-quick-quote .gform-body #input_1_16{padding-right:48px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px 18px;cursor:pointer}
body.page-id-18030 #ui-datepicker-div.gform-theme-datepicker{
  --gf-ctrl-date-picker-width:calc(100vw - 70px);--gf-ctrl-date-picker-width-viewport-sm:336px;
  --gf-ctrl-date-picker-padding-x:14px;--gf-ctrl-date-picker-padding-y:14px 10px;
  --gf-ctrl-date-picker-padding-x-viewport-sm:18px;--gf-ctrl-date-picker-padding-y-viewport-sm:18px 14px;
  --gf-ctrl-date-picker-margin-y-start:8px;--gf-ctrl-date-picker-radius:14px;
  --gf-ctrl-date-picker-shadow:0 2px 6px rgba(22,40,60,.06),0 24px 48px -16px rgba(22,40,60,.3);
  --gf-ctrl-date-picker-title-color:#161615;--gf-ctrl-date-picker-title-font-size:16px;--gf-ctrl-date-picker-title-font-size-viewport-sm:16px;
  --gf-ctrl-date-picker-title-font-weight:600;--gf-ctrl-date-picker-title-gap:6px;--gf-ctrl-date-picker-title-gap-viewport-sm:6px;
  --gf-ctrl-date-picker-header-icons-color:#161615;--gf-ctrl-date-picker-header-icons-color-hover:#161615;--gf-ctrl-date-picker-header-icons-font-size:16px;
  --gf-ctrl-date-picker-table-margin-y-start:10px;
  --gf-ctrl-date-picker-cell-height:44px;--gf-ctrl-date-picker-cell-height-viewport-sm:44px;
  --gf-ctrl-date-picker-cell-content-width:min(40px,100%);--gf-ctrl-date-picker-cell-content-width-viewport-sm:40px;--gf-ctrl-date-picker-cell-content-radius:50%;
  --gf-ctrl-date-picker-cell-font-size:15px;--gf-ctrl-date-picker-cell-content-color:#161615;
  --gf-ctrl-date-picker-cell-content-color-disabled:#C3CCD3;--gf-ctrl-date-picker-cell-content-bg-color-hover:#EEF5FB;
  --gf-ctrl-date-picker-cell-content-bg-color-selected:#1B8ACF;--gf-ctrl-date-picker-cell-content-color-selected:#fff;
  --gf-ctrl-date-picker-cell-content-border:1px solid #1B8ACF;
  border:1px solid #E3E8EC;font-family:var(--font-brand);
}
body.page-id-18030 #ui-datepicker-div .ui-datepicker-header{align-items:center}
body.page-id-18030 #ui-datepicker-div .ui-datepicker-title{justify-content:center}
body.page-id-18030 #ui-datepicker-div :is(.ui-datepicker-prev,.ui-datepicker-next){
  width:36px;height:36px;border:1px solid #E3E8EC;border-radius:50%;justify-content:center;transition:background-color .2s,border-color .2s;
}
body.page-id-18030 #ui-datepicker-div :is(.ui-datepicker-prev,.ui-datepicker-next):not(.ui-state-disabled):hover{border-color:#C9D3DA;background:var(--color-grey-background)}
body.page-id-18030 #ui-datepicker-div :is(.ui-datepicker-prev,.ui-datepicker-next).ui-state-disabled{opacity:.35;cursor:default}
body.page-id-18030 #ui-datepicker-div table :is(th,td){border:0;background-color:transparent!important}
body.page-id-18030 #ui-datepicker-div table th{height:32px;padding-block:0;font-weight:600;letter-spacing:.4px;color:var(--color-text)}
body.page-id-18030 #ui-datepicker-div table td :is(a,span){margin:auto;transition:background-color .15s,color .15s}
body.page-id-18030 #ui-datepicker-div table .ui-datepicker-current-day a{font-weight:600}
@media (prefers-reduced-motion:reduce){
  body.page-id-18030 #ui-datepicker-div :is(.ui-datepicker-prev,.ui-datepicker-next),body.page-id-18030 #ui-datepicker-div table td :is(a,span){transition:none}
}

/* Errors. */
.page-quick-quote .gform_validation_errors{margin-bottom:32px!important;border-radius:10px!important}
.page-quick-quote .gform-body .gfield.gfield_error :is(input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea){border-color:#C02B0A!important}
.page-quick-quote .gform-body .gfield_validation_message{margin-top:8px!important;padding:0!important;border:0!important;background:none!important;font-size:13px!important}

/* The button. */
.page-quick-quote .gform_footer{flex-direction:column;align-items:stretch;margin-top:40px!important;padding:0!important}
.page-quick-quote #gform_submit_button_1{
  width:100%;min-height:58px;padding:0 32px!important;border:0!important;border-radius:var(--button-radius)!important;
  background-color:var(--color-primary)!important;font-family:var(--font-brand)!important;font-size:17px!important;font-weight:600!important;
  letter-spacing:.3px;color:#fff!important;
}

/* The submit button's hover follows the site's buttons (hover fill: base.css, section 7). */
.quote-form .gform_button:hover,.quote-form .gform_button:focus-visible,
.quote-form input[type="submit"]:hover,.quote-form input[type="submit"]:focus-visible{
  color:#fff!important;box-shadow:0 8px 24px -6px rgba(27,138,207,.55)!important;
}
.quote-form .gform_button:active,.quote-form input[type="submit"]:active{
  box-shadow:0 2px 8px -3px rgba(27,138,207,.5)!important;transition-duration:.08s!important;
}
.quote-form .gform_button:focus-visible,.quote-form input[type="submit"]:focus-visible{outline:2px solid var(--color-button-dark)!important;outline-offset:3px!important}
@media (prefers-reduced-motion:reduce){
  .quote-form .gform_button,.quote-form input[type="submit"]{transition:background-color .12s linear,color .12s linear,box-shadow .12s linear!important}
  .page-quick-quote .gform-body .gfield :is(input,select,textarea),.page-quick-quote .gform-body .gform-field-label--type-inline,.page-quick-quote .gform-body .gform-field-label--type-inline::after,
  .quote-select__button,.quote-select__button::after{transition:none}
  .quote-select__list{animation:none}
}

/* Tablets and phones: one column, the hotel above the form and the contact card below. */
@media (max-width:1024px){
  .quote-page{padding:40px 24px 80px}
  .quote-page__inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"hotel" "form" "contact";max-width:760px}
  .quote-page__aside{display:contents}
  .quote-hotel{grid-area:hotel;flex-direction:row;align-items:center;gap:16px;margin-bottom:24px;padding:12px;border-radius:13px}
  .quote-hotel__image{flex:none;width:96px}
  .quote-hotel__image img{aspect-ratio:1;border-radius:9px}
  .quote-hotel__body{padding:0;gap:3px}
  .quote-hotel__name{font-size:17px}
  .quote-hotel__price{margin-top:4px}
  .quote-hotel__price strong{font-size:16px}
  .quote-hotel__basis{display:none}
  .quote-hotel__visited{margin-top:8px;padding:3px 10px;font-size:11px}
  .quote-page__image{display:none}
  .quote-contact{grid-area:contact;margin-top:24px}
}
@media (max-width:767px){
  .quote-page{padding:20px 14px 64px}
  .quote-form{padding:28px 20px 32px;border-radius:13px}
  .page-quick-quote #gform_fields_1{row-gap:24px!important;column-gap:14px!important}
  .page-quick-quote :is(#field_1_41,#field_1_43,#field_1_44,#field_1_48){padding-left:16px!important}
  .page-quick-quote :is(#field_1_41,#field_1_43,#field_1_44,#field_1_48) > legend::before{top:-24px;left:-16px}
  .page-quick-quote :is(#field_1_32,#field_1_29,#field_1_34){margin-top:12px;padding-top:32px!important}
  .page-quick-quote .gform_footer{margin-top:32px!important}
  /* Adults and children stay side by side: two short numbers. */
  .page-quick-quote :is(#field_1_18,#field_1_19){grid-column:span 6!important}
  .quote-hotel__place{display:none}
  .quote-contact{padding:28px 24px;border-radius:13px}
}