/* YE Instant Booking 2.0 — the booking popup on a property page.

   It wears the property page's own clothes: the site's taupe text (#948685)
   on white, its sage green (#6da08f) for buttons and accents, orpheuspro for
   headings over gill-sans-nova, uppercase letter-spaced buttons — and square
   corners throughout.

   Everything is scoped under #ye-ib so nothing here can reach the page, and
   the page's own form rules cannot reach in. The only rule outside it is the
   scroll lock on <body>, which has its own class name (ye-ib-lock). */

body.ye-ib-lock { overflow: hidden; }

#ye-ib[hidden] { display: none !important; }
#ye-ib {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 24px; background: rgba(60, 52, 51, .6);
  font-family: gill-sans-nova, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: #948685;
  text-align: left; -webkit-font-smoothing: antialiased;
}
#ye-ib *, #ye-ib *::before, #ye-ib *::after { box-sizing: border-box; border-radius: 0; }

#ye-ib .ye-ib__box {
  position: relative; display: grid; grid-template-columns: 340px minmax(0, 1fr);
  width: 100%; max-width: 940px; max-height: calc(100vh - 48px);
  background: #fff; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
}
#ye-ib .ye-ib__close {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; margin: 0; padding: 0;
  border: 0; background: #fff; color: #948685; font-size: 26px; line-height: 38px; text-align: center; cursor: pointer; box-shadow: none;
}
#ye-ib .ye-ib__close:hover { color: #6da08f; background: #fff; }

/* ---- the summary ---- */
#ye-ib .ye-ib__side { margin: 0; padding: 0 28px 28px; background: #f7f5f3; overflow-y: auto; }
#ye-ib .ye-ib__img { height: 160px; margin: 0 -28px 24px; background: #e7e2df center / cover no-repeat; }
#ye-ib .ye-ib__eyebrow { margin: 0 0 6px; padding: 0; font-size: 12px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #6da08f; }
#ye-ib .ye-ib__title { margin: 0 0 18px; padding: 0; font-family: orpheuspro, serif; font-size: 28px; line-height: 1.2; font-weight: 400; color: #948685; text-transform: none; letter-spacing: 0; }
#ye-ib .ye-ib__sum { margin: 0 0 14px; padding: 0; }
#ye-ib .ye-ib__sum div { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 0; border-bottom: 1px solid rgba(0, 0, 0, .1); font-size: 15px; }
#ye-ib .ye-ib__sum dt, #ye-ib .ye-ib__sum dd { margin: 0; padding: 0; font-weight: 400; color: #948685; }
#ye-ib .ye-ib__sum dd { text-align: right; }

#ye-ib .ye-ib__price { width: 100%; margin: 0 0 18px; border: 0; border-collapse: collapse; background: none; font-size: 15px; }
#ye-ib .ye-ib__price tr { background: none; border: 0; }
#ye-ib .ye-ib__price th, #ye-ib .ye-ib__price td { padding: 7px 0; border: 0; background: none; font-weight: 400; text-align: left; color: #948685; line-height: 1.4; }
#ye-ib .ye-ib__price td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#ye-ib .ye-ib__price .is-total th, #ye-ib .ye-ib__price .is-total td { padding-top: 13px; border-top: 1px solid rgba(0, 0, 0, .15); font-weight: 600; }
#ye-ib .ye-ib__price .is-due th, #ye-ib .ye-ib__price .is-due td { color: #6da08f; font-weight: 600; }
#ye-ib .ye-ib__price th small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; font-weight: 400; color: #b9afae; white-space: normal; }
#ye-ib .ye-ib__price tr[hidden], #ye-ib .ye-ib__note[hidden] { display: none !important; }
#ye-ib .ye-ib__note { margin: -6px 0 16px; padding: 0; font-size: 13.5px; line-height: 1.45; color: #948685; }
#ye-ib .ye-ib__hold { margin: 0; padding: 13px 15px; background: #fff; border-left: 3px solid #6da08f; font-size: 13.5px; line-height: 1.5; color: #948685; }

/* ---- the steps ---- */
#ye-ib .ye-ib__main { margin: 0; padding: 32px 36px 30px; background: #fff; overflow-y: auto; }
#ye-ib .ye-ib__h { margin: 0 44px 22px 0; padding: 0 0 14px; border-bottom: 1px solid rgba(0, 0, 0, .1); font-family: orpheuspro, serif; font-size: 26px; line-height: 1.2; font-weight: 400; color: #948685; text-transform: none; letter-spacing: 0; }
#ye-ib .ye-ib__wait { margin: 60px 0; padding: 0; text-align: center; font-size: 16px; color: #948685; }
#ye-ib .ye-ib__why { margin: 0 0 14px; padding: 0; font-size: 16px; line-height: 1.5; color: #948685; }

#ye-ib .ye-ib__main label { display: block; float: none; width: auto; margin: 0 0 16px; padding: 0; font-size: 12px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: #948685; line-height: 1.4; }
#ye-ib .ye-ib__main label em { font-style: normal; text-transform: none; letter-spacing: 0; color: #b9afae; }
#ye-ib .ye-ib__main input[type="text"], #ye-ib .ye-ib__main input[type="email"], #ye-ib .ye-ib__main input[type="tel"],
#ye-ib .ye-ib__main select, #ye-ib .ye-ib__main textarea {
  display: block; float: none; width: 100%; max-width: none; height: auto; min-height: 0; margin: 7px 0 0; padding: 13px 15px;
  border: 1px solid rgba(0, 0, 0, .15); background: #fff; box-shadow: none;
  font-family: gill-sans-nova, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.3; letter-spacing: 0; text-transform: none; text-align: left; color: #948685;
  -webkit-appearance: none; appearance: none;
}
#ye-ib .ye-ib__main select { padding-right: 36px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, #948685 50%), linear-gradient(135deg, #948685 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
#ye-ib .ye-ib__main textarea { resize: vertical; }
#ye-ib .ye-ib__main input::placeholder { color: #b9afae; opacity: 1; }
#ye-ib .ye-ib__main input[readonly] { cursor: pointer; }
#ye-ib .ye-ib__main input:disabled { background: #f7f5f3; color: #b9afae; cursor: not-allowed; }
#ye-ib .ye-ib__main input:focus, #ye-ib .ye-ib__main select:focus, #ye-ib .ye-ib__main textarea:focus { outline: none; border-color: #6da08f; }
#ye-ib .ye-ib__main .is-bad { border-color: #c0605f !important; }
#ye-ib .ye-ib__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
#ye-ib .ye-ib__row .is-single { display: none; }
#ye-ib .ye-ib__hint { min-height: 20px; margin: -4px 0 0; padding: 0; font-size: 14px; color: #948685; }
#ye-ib .ye-ib__hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; }

#ye-ib .ye-ib__msg { margin: 0 0 18px; padding: 13px 15px; background: #fbf1f0; border-left: 3px solid #c0605f; font-size: 15px; line-height: 1.45; color: #9c4a49; }
#ye-ib .ye-ib__msg[hidden], #ye-ib section[hidden], #ye-ib table[hidden] { display: none !important; }
#ye-ib .ye-ib__review { margin: 0 0 18px; padding: 16px 18px; border: 1px solid rgba(0, 0, 0, .12); background: #f7f5f3; font-size: 15.5px; line-height: 1.55; color: #948685; }
#ye-ib .ye-ib__review p { margin: 0 0 8px; padding: 0; } #ye-ib .ye-ib__review p:last-child { margin: 0; }
#ye-ib .ye-ib__main label.ye-ib__check { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; letter-spacing: 0; text-transform: none; line-height: 1.5; cursor: pointer; }
#ye-ib .ye-ib__check input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; padding: 0; accent-color: #6da08f; -webkit-appearance: auto; appearance: auto; }
#ye-ib .ye-ib__check a { color: #6da08f; text-decoration: underline; }

#ye-ib .ye-ib__actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 24px 0 0; }
#ye-ib .ye-ib__btn {
  width: auto; margin: 0; padding: 12px 30px; border: 1px solid #6da08f !important; background: #6da08f !important; color: #fff !important;
  font-family: gill-sans-nova, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.3; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; box-shadow: none; transition: background-color .15s, color .15s;
}
/* The page's own buttons turn white with taupe lettering on hover. */
#ye-ib .ye-ib__btn:hover:not(:disabled) { background: #fff !important; color: #948685 !important; }
#ye-ib .ye-ib__btn:disabled { opacity: .45; cursor: not-allowed; }
#ye-ib .ye-ib__btn--pay { flex: 1; }
#ye-ib .ye-ib__link { width: auto; margin: 0; padding: 0; border: 0 !important; background: none !important; color: #948685 !important; font-family: gill-sans-nova, sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: underline; cursor: pointer; box-shadow: none; }
/* The button that takes the booking is the page's own Book Now button, from
   the Enquire Now box: same green, same rounded ends, same white-on-hover.
   It is the one rounded thing in here, on purpose. */
#ye-ib .ye-ib__paybar { margin: 26px 0 0; text-align: center; }
#ye-ib .ye-ib__book {
  display: block; width: 100%; margin: 0 0 14px; padding: 9px 15px;
  border: 1px solid #6da08f !important; border-radius: 20px !important;
  background: none; background-color: #6da08f !important; color: #fff !important;
  font-family: gill-sans-nova, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; box-shadow: none; transition: background-color .15s, color .15s;
}
#ye-ib .ye-ib__book:hover:not(:disabled) { color: #948685 !important; background-color: #fff !important; }
#ye-ib .ye-ib__book:disabled { opacity: .55; cursor: default; }
#ye-ib .ye-ib__ph, #ye-ib .ye-ib__today { display: none; }

#ye-ib.is-loading .ye-ib__price { opacity: .45; }

/* ---- phones and narrow tablets ----
   A full-screen sheet, read top to bottom in the order somebody needs it:
   what they are booking and for when, what is due today, the form and the
   Book Now button — then the full price breakdown underneath for anybody who
   wants it. The summary panel is taken apart (display: contents) so its
   pieces can be placed either side of the form. */
@media (max-width: 820px) {
  #ye-ib { padding: 0; align-items: stretch; background: #fff; }
  #ye-ib .ye-ib__box { display: flex; flex-direction: column; width: 100%; max-width: none; height: 100%; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: none; }
  #ye-ib .ye-ib__close { position: fixed; top: 8px; right: 8px; width: 44px; height: 44px; line-height: 44px; font-size: 30px; background: transparent; }

  #ye-ib .ye-ib__side { display: contents; }
  #ye-ib .ye-ib__img { display: none; }
  #ye-ib .ye-ib__eyebrow { order: 1; margin: 0; padding: 20px 60px 4px 20px; background: #f7f5f3; font-size: 11px; }
  #ye-ib .ye-ib__title { order: 2; margin: 0; padding: 0 60px 14px 20px; background: #f7f5f3; font-size: 24px; }
  #ye-ib .ye-ib__sum { order: 3; margin: 0; padding: 0 20px; background: #f7f5f3; }
  #ye-ib .ye-ib__sum div { padding: 10px 0; font-size: 15px; border-bottom: 0; border-top: 1px solid rgba(0, 0, 0, .1); }
  #ye-ib .ye-ib__today { order: 4; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 12px 20px 14px; background: #f7f5f3; border-top: 1px solid rgba(0, 0, 0, .1); font-size: 15px; color: #6da08f; font-weight: 600; }
  #ye-ib .ye-ib__today[hidden] { display: none; }
  #ye-ib .ye-ib__today strong { font-size: 18px; white-space: nowrap; }

  #ye-ib .ye-ib__main { order: 5; flex: none; overflow: visible; padding: 24px 20px 8px; }
  #ye-ib .ye-ib__h { margin: 0 0 18px; padding-bottom: 12px; font-size: 22px; }
  #ye-ib .ye-ib__row { grid-template-columns: 1fr; gap: 0; }
  #ye-ib .ye-ib__main label { margin-bottom: 14px; }
  #ye-ib .ye-ib__main input[type="text"], #ye-ib .ye-ib__main input[type="email"], #ye-ib .ye-ib__main input[type="tel"], #ye-ib .ye-ib__main textarea { padding: 14px 14px; font-size: 16px; }
  #ye-ib .ye-ib__main label.ye-ib__check { font-size: 15px; }
  #ye-ib .ye-ib__check input { width: 22px; height: 22px; margin-top: 1px; }
  #ye-ib .ye-ib__paybar { margin: 22px 0 0; }
  #ye-ib .ye-ib__book { padding: 13px 15px; font-size: 16px; }
  #ye-ib .ye-ib__link { padding: 8px 0; font-size: 15px; }
  #ye-ib .ye-ib__actions { justify-content: center; }
  #ye-ib .ye-ib__wait { margin: 40px 0; }

  #ye-ib .ye-ib__ph { order: 6; display: block; margin: 18px 0 0; padding: 22px 20px 6px; border-top: 8px solid #f7f5f3; font-family: orpheuspro, serif; font-size: 22px; line-height: 1.2; color: #948685; }
  #ye-ib .ye-ib__ph[hidden] { display: none; }
  #ye-ib .ye-ib__price { order: 7; display: table; width: calc(100% - 40px); margin: 0 20px 14px; font-size: 15px; }
  #ye-ib .ye-ib__price[hidden] { display: none; }
  #ye-ib .ye-ib__price th, #ye-ib .ye-ib__price td { padding: 8px 0; }
  #ye-ib .ye-ib__note { order: 8; margin: 0 20px 14px; }
  #ye-ib .ye-ib__hold { order: 9; margin: 0 20px 28px; background: #f7f5f3; }
}