/* The floating chat control and the welcome popup.
   Direction comes from logical properties, so right-to-left needs no second sheet.
   Layers: chat 70 (under the menu sheet 80 and the cart drawer 96), popup 92. */

/* ---------- chat ---------- */
.vo-chat{ position:fixed; inset-inline-end:max(18px, env(safe-area-inset-right)); bottom:max(18px, env(safe-area-inset-bottom)); z-index:70;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px; font-family:'Archivo',system-ui,sans-serif; }
html[dir=rtl] .vo-chat{ font-family:'IBM Plex Sans Arabic','Archivo',system-ui,sans-serif; align-items:flex-start; }
.vo-chat-toggle{ display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:0 18px; border:0; border-radius:999px; cursor:pointer;
  background:#29251F; color:#F4F0E7; font:inherit; font-size:13px; letter-spacing:.06em; box-shadow:0 8px 24px rgba(41,37,31,.28); }
.vo-chat-toggle:hover{ background:#4A3325; }
.vo-chat-toggle:focus-visible, .vo-chat-link:focus-visible, .vo-pop a:focus-visible, .vo-pop button:focus-visible{ outline:2px solid #9A835A; outline-offset:3px; }
.vo-chat-panel{ background:#F4F0E7; color:#29251F; border:1px solid rgba(41,37,31,.16); border-radius:6px; padding:14px 16px 10px; min-width:200px;
  box-shadow:0 14px 34px rgba(41,37,31,.22); }
.vo-chat-panel[hidden]{ display:none; }
.vo-chat-title{ margin:0 0 6px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.62; }
html[dir=rtl] .vo-chat-title{ letter-spacing:0; text-transform:none; font-size:13px; }
.vo-chat-panel ul{ list-style:none; margin:0; padding:0; }
.vo-chat-link{ display:block; padding:12px 2px; min-height:44px; box-sizing:border-box; font-size:15px; color:inherit; text-decoration:none; border-top:1px solid rgba(41,37,31,.12); }
.vo-chat-panel li:first-child .vo-chat-link{ border-top:0; }
.vo-chat-link:hover{ text-decoration:underline; text-underline-offset:4px; }
/* behind a modal surface: the cart drawer and the menu sheet cover it, and so does the popup's own backdrop */
body.vo-pop-open .vo-chat{ visibility:hidden; }

/* ---------- popup ---------- */
.vo-pop{ position:fixed; inset:0; z-index:92; display:flex; align-items:center; justify-content:center; padding:20px;
  font-family:'Archivo',system-ui,sans-serif; }
html[dir=rtl] .vo-pop{ font-family:'IBM Plex Sans Arabic','Archivo',system-ui,sans-serif; }
.vo-pop[hidden]{ display:none; }
.vo-pop-scrim{ position:absolute; inset:0; background:rgba(20,17,13,.55); }
.vo-pop-box{ box-sizing:border-box; position:relative; width:min(440px,100%); max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow:auto; background:#F4F0E7; color:#29251F;
  border-radius:6px; padding:34px 30px 22px; box-shadow:0 24px 60px rgba(20,17,13,.4); outline:none;
  animation:vo-pop-in .35s cubic-bezier(.16,.84,.44,1); }
.vo-pop-x{ position:absolute; top:6px; inset-inline-end:6px; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; color:inherit; cursor:pointer; }
.vo-pop h2{ margin:0 0 10px; padding-inline-end:30px; font-family:'Fraunces',serif; font-weight:400; font-size:26px; line-height:1.2; }
html[dir=rtl] .vo-pop h2{ font-family:'Amiri',serif; font-size:31px; line-height:1.4; }
.vo-pop p{ margin:0 0 20px; font-size:15px; line-height:1.7; opacity:.86; }
.vo-pop-acts{ display:flex; flex-direction:column; gap:10px; }
.vo-pop-btn{ display:flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; box-sizing:border-box; border:1px solid #29251F;
  color:#29251F; text-decoration:none; font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
html[dir=rtl] .vo-pop-btn{ letter-spacing:0; text-transform:none; font-size:15px; }
.vo-pop-btn:hover{ background:rgba(41,37,31,.07); }
.vo-pop-btn.is-primary{ background:#29251F; color:#F4F0E7; }
.vo-pop-btn.is-primary:hover{ background:#4A3325; }
.vo-pop-later{ display:block; margin:12px auto 0; min-height:44px; padding:0 14px; background:none; border:0; color:inherit; font:inherit; font-size:13px; opacity:.68; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.vo-pop-later:hover{ opacity:1; }
@keyframes vo-pop-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

@media (max-width:600px){
  .vo-pop{ align-items:flex-end; padding:0; }
  .vo-pop-box{ width:100%; border-radius:14px 14px 0 0; padding:30px 22px max(20px, env(safe-area-inset-bottom)); max-height:85vh; max-height:85dvh; }
  .vo-chat-label{ display:none; }          /* the bubble alone on a phone; its accessible name stays */
  .vo-chat-toggle{ width:52px; height:52px; padding:0; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .vo-pop-box{ animation:none; }
  .vo-chat-toggle{ transition:none; }
}

/* printed after the page wrapper, so the wrapper's own helper does not reach it */
.vo-chat .vh, .vo-pop .vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* a band whose picture was left out sits on the plain dark surface its text was designed for */
.vo .room-plain{ background:#29251F; color:#F4F0E7; }

/* the Contact page's opening line */
.vo .entry .vo-lead{ font-family:'Fraunces',serif; font-weight:300; font-size:clamp(21px,2.6vw,28px); line-height:1.5; margin:0 0 1em; }
html[dir=rtl] .vo .entry .vo-lead{ font-family:'Amiri',serif; font-size:clamp(23px,2.8vw,31px); line-height:1.7; }