/* pi-design.css: Paradise Isles desktop parity layer (Stage 4). Replaces the content build's pi-base.css. Loads after the ported live CSS
   (pi-bundle.css, pi-live.css) and before pi-mobile.css (the designed bands below 1250px).
   Every rule here either undoes something Divi adds that live (Bootstrap 3 + iLaunch general.css) never had, or puts back a live rule that the
   CSS port scoped under #page-container although its element lives outside it (the booking calendar and the photo pop-up are appended to <body>).
   Measured against live with build/stage4/design_pairs_pi.js + design_diff.py at 1440. $B = body.pi-site, $P = body.pi-site #page-container.
   Bootstrap 3 sizes everything border-box, like Divi, so (unlike the V2 sites) no content-box restore is needed. */

/* ---------- 1. Divi neutralisers (were pi-base.css) ---------- */
/* Divi caps .container at 1080px / 80%; live's bootstrap container is 1170px (the width comes from the ported bootstrap rules at 768, 992, 1200) */
body.pi-site #page-container .container { max-width: none; }
/* below 768 bootstrap leaves .container at auto width; Divi's 80% made every phone column 78px narrower than live */
@media (max-width: 767px) {
  body.pi-site #page-container .container { width: auto; }
}
/* Divi's text rhythm: p padding, ul/ol padding and 26px line height, heading padding, greyscale smoothing; live uses the browser defaults + bootstrap */
body.pi-site { font-weight: 400; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
body.pi-site :where(.et-l, #main-content) p { padding-bottom: 0; }
body.pi-site :where(.et-l, #main-content) ul, body.pi-site :where(.et-l, #main-content) ol { padding: 0 0 0 40px; line-height: inherit; }
body.pi-site :where(.et-l, #main-content) :is(h1, h2, h3, h4, h5, h6) { padding-bottom: 0; }
/* Divi's content-table look is not on live */
body.pi-site :where(.et-l, #main-content) table:not(.variations) { border: 0; margin: 0; width: auto; text-align: start; }
body.pi-site :where(.et-l, #main-content) table[width="100%"]:not(.variations) { width: 100%; }
body.pi-site :where(.et-l, #main-content) :is(td, th) { padding: 1px; border: 0; text-align: start; }
/* Divi pads "#main-content .container" at the top and draws a rule on sidebar views */
html body.pi-site #main-content .container { padding-top: 0; }
body.pi-site #main-content .container::before { display: none; }
/* Divi gives every image max-width:100%; live's images (the 2000px room slides, banners) render at their own width, bootstrap's .img-responsive opts in where wanted */
body.pi-site img { max-width: none; }
/* live's body{overflow-x:hidden} stops sideways scrolling (the bootstrap .row's -15px margin sticks out of the narrow icon banner). With Divi's wrappers that
   clip no longer reaches the viewport; overflow-x on html/body would break fancybox (it saves and restores the page scroll when it opens), so the page
   wrapper clips instead (clip creates no scroll container, so position: fixed and sticky children are unaffected). */
body.pi-site #page-container { overflow-x: clip; }
/* the blog views (category, month) load Divi's own nav stylesheet, whose `.nav li { line-height: 1em }` shrank the menu items' line boxes */
body.pi-site #page-container #navbar .nav li { line-height: inherit; }

/* ---------- 2. Search form: live's keyword field is an unstyled input (the browser's 2px inset border); Divi restyles bare inputs ---------- */
/* (revert, not the computed 2px inset values: an author-set border makes Chrome drop the native field look that live shows) */
body.pi-site #page-container .page-content table input[type="text"] { -webkit-appearance: revert; appearance: revert; padding: revert; border: revert; border-radius: revert; background: revert; color: #333333; }

/* ---------- 3. Booking calendar (#datepicker_div, appended to <body>): the port scoped the calendar's table class (.datepicker) and live's generic td,
   a and select rules under #page-container, so on dev the calendar opened 125px wide with Arial 14px days (live: 185px, Cabin 20px cells, 16px links).
   Live's rules, put back on the calendar itself. ---------- */
/* (element-level rules wrapped in :where(#datepicker_div) so the calendar's own class rules, e.g. the grey unselectable days, still win as on live) */
body.pi-site :where(#datepicker_div) table { border-collapse: collapse; border-spacing: 0; background-color: transparent; }
body.pi-site :where(#datepicker_div) :is(td, th) { padding: 0; font-family: 'Cabin', Arial, Helvetica, sans-serif; font-size: 20px; line-height: 24px; color: #333333; }
body.pi-site :where(#datepicker_div) label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; }
body.pi-site :where(#datepicker_div) select { font-family: inherit; font-size: inherit; line-height: inherit; text-transform: none; margin: 0; }
body.pi-site #datepicker_div .datepicker { clear: both; float: left; width: 100%; color: #ffffff; background: #cccccc; text-align: center; font-size: 100%; }
body.pi-site #datepicker_div .datepicker a { display: block; width: 100%; font-size: 16px; }

/* ---------- 4. Photo pop-up (fancybox 1.3.4, appended to <body>): its frame and shadow pieces carry the class .fancy-bg, which the port scoped under
   #page-container, so they lost their 20px size and absolute position (grey bands instead of the soft frame). Live's rule, unscoped. ---------- */
body.pi-site .fancy-bg { position: absolute; padding: 0; margin: 0; border: 0; width: 20px; height: 20px; z-index: 1001; }

/* ---------- 5. Contact, review and unsubscribe forms: Divi contact-form modules dressed as live's Bootstrap 3 forms (measured at 1440):
   label 20px bold above a 34px field (6px 12px padding, 14px Cabin, 1px #ccc border, faint inset shadow), 15px between groups, a 74px message box,
   the Verification row (label, the code, a 223 x 30 plain field, then a line of space where live explains its picture code), and a #2d2f32 SUBMIT
   (16px bold, 50px tall, 54px side padding). Divi's maths question stands in for live's iLaunch picture code, which cannot be ported. ---------- */
body.pi-site #page-container .pi-contact-form { margin: 0; padding: 0; background: none; }
body.pi-site #page-container .pi-contact-form .et_pb_contact { padding: 0; margin: 0; }
body.pi-site #page-container .pi-contact-form form.et_pb_contact_form { display: block; margin: 0; padding: 0; }
body.pi-site #page-container .pi-contact-form p.et_pb_contact_field { float: none; clear: both; width: auto; margin: 0 0 15px; padding: 0; }
body.pi-site #page-container .pi-contact-form .et_pb_contact_form_label { display: inline-block; margin: 0 0 5px; padding: 0; font: 700 20px/24px 'Cabin', Arial, Helvetica, sans-serif; color: #333333; text-transform: none; }
body.pi-site #page-container .pi-contact-form .et_pb_contact p input.input,
body.pi-site #page-container .pi-contact-form .et_pb_contact p textarea.input {
  display: block; width: 100%; height: 34px; margin: 0; padding: 6px 12px; border: 1px solid #cccccc; border-radius: 0; background-color: #ffffff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); font: 400 14px/20px 'Cabin', Arial, Helvetica, sans-serif; color: #333333; }
body.pi-site #page-container .pi-contact-form .et_pb_contact p input.input[data-field_type="email"],
body.pi-site #page-container .pi-contact-form .et_pb_contact p textarea.input { color: #555555; }
body.pi-site #page-container .pi-contact-form .et_pb_contact p textarea.input { height: 74px; min-height: 0; resize: vertical; }
body.pi-site #page-container .pi-contact-form .et_pb_contact .input::placeholder { color: #999999; opacity: 1; }
body.pi-site #page-container .pi-contact-form .et_pb_contact .input:focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
/* Verification row: one line (label, code, field) then a 24px line, 15px below; the field is a plain browser input as on live */
body.pi-site #page-container .pi-contact-form .et_contact_bottom_container { display: block; float: none; clear: both; margin: 0; padding: 0; text-align: left; }
body.pi-site #page-container .pi-contact-form .et_pb_contact_right { display: block; float: none; margin: 0 0 15px; padding: 0; text-align: left; }
body.pi-site #page-container .pi-contact-form .et_pb_contact_right p.clearfix { display: block; float: none; margin: 0; padding: 0 0 26px; font: 400 20px/24px 'Cabin', Arial, Helvetica, sans-serif; color: #333333; text-align: left; }
body.pi-site #page-container .pi-contact-form .et_pb_contact_right p.clearfix::before { content: "Verification"; display: inline; visibility: visible; font-weight: 700; margin-right: 4px; }
body.pi-site #page-container .pi-contact-form .et_pb_contact_right p.clearfix::after { display: none; }
body.pi-site #page-container .pi-contact-form .et_pb_contact_captcha_question { font: 400 20px/24px 'Cabin', Arial, Helvetica, sans-serif; color: #333333; }
body.pi-site #page-container .pi-contact-form .et_pb_contact p input.input.et_pb_contact_captcha {
  display: inline-block; width: 223px; max-width: none; height: 30px; margin: 0 0 0 4px; padding: revert; border: revert; border-radius: revert; box-shadow: none; -webkit-appearance: revert; appearance: revert;
  background: revert; font: 400 20px/24px 'Cabin', Arial, Helvetica, sans-serif; color: #333333; vertical-align: baseline; }
/* SUBMIT: live's .btn.btn-primary */
body #page-container .et_pb_section .pi-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit {
  display: inline-block; float: none; height: 50px; margin: 0 !important; padding: 0 54px !important; border: 0 !important; border-radius: 0 !important;
  background: #2d2f32 !important; color: #ffffff !important; font: 700 16px/50px 'Cabin', Arial, Helvetica, sans-serif !important; letter-spacing: 1px !important;
  text-transform: uppercase; cursor: pointer; transition: none; }
body #page-container .et_pb_section .pi-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:hover,
body #page-container .et_pb_section .pi-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:active { background: #2da4db !important; padding: 0 54px !important; }
body #page-container .et_pb_section .pi-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit::after { display: none !important; }
/* the success line (Divi replaces the form with it) and the error list keep live's body text */
body.pi-site #page-container .pi-contact-form .et-pb-contact-message { font: 400 20px/24px 'Cabin', Arial, Helvetica, sans-serif; color: #333333; margin: 0; }
body.pi-site #page-container .pi-contact-form .et-pb-contact-message > * { margin: 0 0 15px; }
/* Reviews: live's form is the boxed .form-standard (1px #eee border, 15px padding, 25px margin; 200px side margins from 1200px) */
/* (the margin sits on the module so it collapses with the intro paragraph's 20px, as live's form margin does) */
body.pi-site.page-id-1137 #page-container .pi-contact-form { margin: 25px 0; }
body.pi-site.page-id-1137 #page-container .pi-contact-form form.et_pb_contact_form { border: 1px solid #eeeeee; padding: 15px; }
@media (min-width: 1200px) {
  body.pi-site.page-id-1137 #page-container .pi-contact-form { margin: 25px 200px; }
  /* live's spam note wraps onto two lines in the 708px box */
  body.pi-site.page-id-1137 #page-container .pi-contact-form .et_pb_contact_right p.clearfix { padding-bottom: 50px; }
}
/* Unsubscribe: live's .form-horizontal (label in a 25% column, field in a 58.33% column, code and button under the field) from 768px */
@media (min-width: 768px) {
  /* bootstrap columns of the 30px-wider row: field at 25% of (form + 30px), 58.33% of (form + 30px) - 30px wide */
  body.pi-site.page-id-1145 #page-container .pi-contact-form form.et_pb_contact_form { display: grid; grid-template-columns: calc(25% + 7.5px) calc(58.3333% - 12.5px) 1fr; margin: 0; }
  body.pi-site.page-id-1145 #page-container .pi-contact-form p.et_pb_contact_field { display: contents; }
  body.pi-site.page-id-1145 #page-container .pi-contact-form p.et_pb_contact_field > .et_pb_contact_form_label { grid-column: 1; grid-row: 1; align-self: start; margin: 0 0 15px; }
  body.pi-site.page-id-1145 #page-container .pi-contact-form .et_pb_contact p.et_pb_contact_field > input.input { grid-column: 2; grid-row: 1; margin: 0 0 15px; }
  body.pi-site.page-id-1145 #page-container .pi-contact-form .et_contact_bottom_container { grid-column: 2 / 4; grid-row: 2; }
  body.pi-site.page-id-1145 #page-container .pi-contact-form .et_pb_contact_right p.clearfix::before { content: none; }
  body.pi-site.page-id-1145 #page-container .pi-contact-form .et_pb_contact_right p.clearfix { padding-bottom: 24px; }
  /* live's button sits in its own .form-group (15px margin below) */
  body.pi-site.page-id-1145 #page-container .pi-contact-form .et_contact_bottom_container { padding-bottom: 15px; }
}

/* ---------- 6. Keyboard focus: Divi's reset removes every outline (`:focus { outline: 0 }`), live shows the browser's ring (and Bootstrap's ring on
   links and buttons). Low specificity so live's own outline rules still decide where they exist. ---------- */
body.pi-site :focus-visible { outline: revert; }
/* controls whose own CSS removes the ring on live too (slider arrows, the phone menu button, the maths-question field): a ring only while
   focused from the keyboard, so nothing changes for a mouse or a finger */
body.pi-site #page-container #feature .sp-arrow:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 2px; box-shadow: 0 0 0 4px #1a7098 !important; }
body.pi-site #page-container .navbar-toggle:focus-visible { outline: 2px solid #1a7098 !important; outline-offset: 2px; }
body.pi-site #page-container .list.rooms :is(.slick-list, .slick-prev, .slick-next):focus-visible { outline: 3px solid #ffffff !important; outline-offset: -5px; box-shadow: inset 0 0 0 5px #1a7098 !important; }
body.pi-site #page-container .pi-contact-form .et_pb_contact p input.input.et_pb_contact_captcha:focus-visible { outline: revert; }

/* ---------- 6b. Google Translate button: Google's own `.goog-te-gadget-simple a { color: #000 }` wins over live's bare `a { color: #333 }` on live, but loses
   to the port's scoped `body.pi-site #page-container a` here (lighter label). Google's colour, put back. ---------- */
body.pi-site #page-container #translate-widget .goog-te-gadget-simple a { color: #000000; }

/* ---------- 7. Phone numbers: explicit tel: links that keep the surrounding text's colour and look in every state (live shows plain text there) ---------- */
body.pi-site #page-container a.tel-link, body.pi-site #page-container a.tel-link:link, body.pi-site #page-container a.tel-link:visited,
body.pi-site #page-container a.tel-link:hover, body.pi-site #page-container a.tel-link:active, body.pi-site #page-container a.tel-link:focus,
body.pi-site a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit; }