/* J'Adore's booking control (js/booking.js). A paper ticket on the dark page: the stub
   holds the three choices, the panel under it is the programme you choose from.
   It carries its own colours so no page can leave it bare. */
.jbook{min-height:150px}
.jb{--jink:#0A0A0A;--jpaper:#EBE7DF;--jhot:#C21C22;--jrule:rgba(10,10,10,.22);--je:cubic-bezier(.16,1,.3,1);
  position:relative;font-family:Montserrat,system-ui,sans-serif;color:var(--jink);text-transform:none;letter-spacing:normal;
  text-align:left;line-height:1.3;-webkit-font-smoothing:antialiased}
.jb *{box-sizing:border-box}
.jb button{font:inherit;color:inherit;background:none;border:0;border-radius:0;margin:0;padding:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.jb button:focus-visible,.jb a:focus-visible{outline:2px solid var(--jhot);outline-offset:2px}
.jb-k{display:block;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--jhot)}

/* ---- the stub ----
   The middle cell prints the night's name ("House of Desire", "Havana Nights"), so it
   gets the most room. The last line of a cell stops short of the arrow in its corner:
   a name too long for the cell takes a second line, it never runs under the arrow. And
   a cell fills from the top, so the three labels stay level when one cell is taller. */
.jb-stub{display:grid;grid-template-columns:1fr 1.6fr 1fr;background:var(--jpaper)}
.jb-cell{display:flex;flex-direction:column;justify-content:flex-start;text-align:left;padding:14px 12px 13px 14px!important;min-height:86px;position:relative;transition:background .25s var(--je)}
.jb-cell + .jb-cell{border-left:1px solid var(--jrule)!important}
.jb-cell b{display:block;font-size:22px;font-weight:900;line-height:1.1;margin-top:5px;letter-spacing:-.01em;white-space:nowrap}
.jb-cell small{display:block;font-size:12px;font-weight:600;line-height:1.25;margin-top:2px;padding-right:10px}
.jb-cell::after{content:"";position:absolute;right:11px;bottom:17px;width:6px;height:6px;border-right:2px solid var(--jink);
  border-bottom:2px solid var(--jink);transform:rotate(45deg);opacity:.55;transition:transform .25s var(--je)}
.jb-cell:hover{background:#e0dbd0}
.jb-cell.on{background:#fff}
.jb-cell.on::after{transform:rotate(-135deg) translate(-2px,-2px);border-color:var(--jhot);opacity:1}

/* ---- the programme ---- */
.jb-panel{background:var(--jpaper);border-top:2px dashed rgba(10,10,10,.34);padding:16px 14px 16px;position:relative}
.jb-panel::before,.jb-panel::after{content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--jink)}
.jb-panel::before{left:-9px}.jb-panel::after{right:-9px}
.jb-h{font-family:"Great Vibes",cursive;font-size:34px;line-height:1;margin:0 0 12px}

.jb-count{display:grid;grid-template-columns:60px 1fr 60px;align-items:center;border:2px solid var(--jink);height:60px}
.jb-count button{height:100%;font-size:28px!important;font-weight:500;line-height:1}
.jb-count button:first-child{border-right:2px solid var(--jink)!important}
.jb-count button:last-child{background:var(--jink)!important;color:var(--jpaper)!important}
.jb-count button:disabled{opacity:.3;cursor:default}
.jb-count b{text-align:center;font-size:21px;font-weight:900}
.jb-big{margin:12px 0 0;font-size:14px;font-weight:600}
.jb-big a,.jb-note a{color:inherit;text-decoration:none;border-bottom:1px solid var(--jhot);white-space:nowrap}
.jb-done{display:block;margin:14px 0 0 auto!important;font-size:12px!important;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:2px solid var(--jhot)!important;padding:4px 0!important}

.jb-reel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(74px,1fr);gap:6px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.jb-reel::-webkit-scrollbar{display:none}
.jb-day{border:1px solid rgba(10,10,10,.32)!important;padding:9px 4px 8px!important;text-align:center;scroll-snap-align:start;min-height:96px;
  display:flex;flex-direction:column;align-items:center;transition:background .2s var(--je),color .2s var(--je)}
.jb-day .jb-k{color:inherit;opacity:.75}
.jb-day b{font-size:24px;font-weight:900;line-height:1.1;margin-top:2px}
.jb-day em{font-style:normal;font-size:10.5px;font-weight:700;line-height:1.2;margin-top:5px}
.jb-day.show,.jb-d.show{box-shadow:inset 0 -4px 0 var(--jhot)}
.jb-day:hover,.jb-d:hover{background:#fff}
.jb-day.sel,.jb-d.sel{background:var(--jink)!important;color:var(--jpaper)!important;border-color:var(--jink)!important}
.jb-day:disabled,.jb-d:disabled{opacity:.3;cursor:default;background:none!important}
.jb-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.jb-key{margin:0;font-size:12px;font-weight:600}
.jb-key i{display:inline-block;width:16px;height:4px;background:var(--jhot);vertical-align:middle;margin-right:7px}
.jb-more{font-size:13px!important;font-weight:800;border-bottom:2px solid var(--jhot)!important;padding:2px 0!important;white-space:nowrap}

.jb-mh{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--jink);padding-bottom:8px;margin-bottom:8px}
.jb-mh b{font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.jb-mh button{width:40px;height:36px;font-size:26px!important;line-height:1;color:var(--jhot)!important}
.jb-mh button:disabled{opacity:.25;cursor:default}
.jb-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.jb-w{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:4px 0;opacity:.7}
.jb-d{height:40px;font-size:15px!important;font-weight:700;text-align:center;border:1px solid transparent!important}

.jb-gk{margin:14px 0 8px}
.jb-h + .jb-gk{margin-top:0}
.jb-times{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.jb-times button{border:1px solid rgba(10,10,10,.32)!important;height:46px;font-size:15px!important;font-weight:700;text-align:center;
  transition:background .2s var(--je)}
.jb-times button:hover{background:#fff}
.jb-times button.sel{background:var(--jhot)!important;border-color:var(--jhot)!important;color:#fff!important}

.jb-go{display:block;width:100%;background:var(--jhot)!important;color:#fff!important;border:2px solid var(--jhot)!important;
  font-size:14px!important;font-weight:800!important;letter-spacing:.12em;text-transform:uppercase;padding:19px 22px!important;
  margin-top:10px!important;transition:background .3s var(--je)}
.jb-go:hover{background:#a3171c!important;border-color:#a3171c!important}
.jb-note{margin:10px 0 0;font-size:13px;font-weight:500;line-height:1.5;color:rgba(235,231,223,.78);text-align:center}
.jb-note a{color:#fff}

/* ---- the whole ticket at once (data-quick, and the top of a prepaid night) ----
   One piece of paper: what is being booked across the top, the tear line, then the three
   nights, the guests and the times, and the button printed on the ticket itself. */
.jb--q{background:var(--jpaper);padding:0 0 14px}
.jb-qtop{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:13px 16px 11px;
  border-bottom:2px dashed rgba(10,10,10,.34);position:relative}
.jb-qtop::before,.jb-qtop::after{content:"";position:absolute;bottom:-9px;width:16px;height:16px;border-radius:50%;background:var(--jnotch,var(--jink))}
.jb-qtop::before{left:-8px}.jb-qtop::after{right:-8px}
.jb-qtop b{display:block;font-size:20px;font-weight:900;line-height:1.1;letter-spacing:-.01em;margin-top:3px}
.jb-qtop > span{font-size:12.5px;font-weight:700;line-height:1.3;text-align:right;white-space:nowrap}
.jb-q{padding:13px 16px 0}
.jb-ql{margin:0 0 7px}
.jb-qd{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.jb-qn{border:1.5px solid rgba(10,10,10,.34)!important;padding:8px 2px 7px!important;text-align:center;min-height:68px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background .2s var(--je),color .2s var(--je)}
.jb-qn .jb-k{color:inherit;opacity:.75;font-size:10px}
.jb-qn b{font-size:23px;font-weight:900;line-height:1.05;margin-top:1px}
.jb-qn em{font-style:normal;font-size:10px;font-weight:700;line-height:1.2;margin-top:2px;white-space:nowrap}
.jb-qn:hover{background:#fff}
.jb-qn.sel{background:var(--jink)!important;color:var(--jpaper)!important;border-color:var(--jink)!important;box-shadow:inset 0 -4px 0 var(--jhot)}
.jb-qo.on{background:#fff}
.jb-q2{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;margin-top:12px}
.jb-qc{grid-template-columns:38px 1fr 38px;height:48px}
.jb-qc button{font-size:24px!important}
.jb-qc b{font-size:19px}
.jb-qa{display:flex!important;justify-content:space-between;align-items:baseline;gap:8px}
.jb-qm{font-size:10.5px!important;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--jink)!important;
  border-bottom:2px solid var(--jhot)!important;padding:0 0 1px!important;white-space:nowrap}
.jb-qt{gap:5px}
.jb-qt button{height:48px;font-size:14.5px!important;font-weight:800}
.jb-qt button.sel{background:var(--jink)!important;border-color:var(--jink)!important;color:var(--jpaper)!important}
.jb--q .jb-big{padding:0 16px}
.jb--q .jb-panel{margin-top:12px;border-bottom:2px dashed rgba(10,10,10,.34)}
.jb--q .jb-panel::before,.jb--q .jb-panel::after{background:var(--jnotch,var(--jink))}
.jb--q .jb-go{width:auto;display:block;margin:12px 16px 0!important;width:calc(100% - 32px);padding:15px 12px!important;font-size:15px!important}
.jb--q .jb-go small{display:block;margin-top:3px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:none;opacity:.94}
.jb--q .jb-qtop + .jb-go{margin-top:16px!important;padding:19px 12px!important}
.jb--q .jb-note{color:var(--jink);font-weight:600;font-size:12.5px;padding:0 12px}
.jb--q .jb-note a{color:var(--jink)}
/* a priced night: what the price buys, the guests, the whole bill (data-price) */
.jb-bill{padding:12px 16px 0}
.jb-inc{list-style:none;margin:0 0 12px;padding:0}
.jb-inc li{position:relative;padding:7px 0 7px 24px;font-size:15px;font-weight:600;line-height:1.35;border-bottom:1px solid rgba(10,10,10,.14)}
.jb-inc li:last-child{border-bottom:0}
.jb-inc li::before{content:"";position:absolute;left:3px;top:13px;width:10px;height:10px;background:var(--jhot);transform:rotate(45deg)}
.jb-brow{display:grid;grid-template-columns:auto 150px;justify-content:space-between;align-items:center;gap:12px}
.jb-brow .jb-ql{margin:0}
.jb-sums{margin-top:10px}
.jb-sum{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;font-weight:600;padding:3px 0}
.jb-sum b{font-weight:700;white-space:nowrap}
.jb-sum.jb-tot{font-size:18px;font-weight:900;border-top:2px solid var(--jink);margin-top:6px;padding-top:8px}
.jb-sum.jb-tot b{font-weight:900}
.jb--q .jb-bill + .jb-go{margin-top:14px!important}

/* ---- one row on a wide screen: the stub, then the button; the programme drops from it ---- */
@media(min-width:901px){
  .jb--bar{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px}
  .jb--bar .jb-stub{grid-column:1;grid-row:1}
  .jb--bar .jb-go{grid-column:2;grid-row:1;width:auto;margin-top:0!important;padding:0 44px!important;white-space:nowrap}
  .jb--bar .jb-note{grid-column:1/3;text-align:left}
  .jb--bar .jb-cell{padding:16px 18px 15px 20px!important}
  .jb--bar .jb-cell b{font-size:24px}
  .jb--bar .jb-panel{position:absolute;left:0;top:86px;width:min(100%,560px);z-index:70;box-shadow:0 30px 80px rgba(0,0,0,.6);padding:20px}
  .jb--bar.jb--up .jb-panel{top:auto;bottom:calc(100% - 0px);border-top:0;border-bottom:2px dashed rgba(10,10,10,.34)}
  .jb--bar.jb--up .jb-panel::before,.jb--bar.jb--up .jb-panel::after{top:auto;bottom:-10px}
  .jb--bar .jb-reel{grid-auto-columns:1fr;overflow:visible}
}
@media(prefers-reduced-motion:reduce){.jb *{transition:none!important}}