/* Webora concept websites: shared parts (concept bar, package switch, booking, reveals).
   Each brand brings its own style.css on top of this. */
[hidden] { display: none !important; }
html[data-tier="basic"] [data-tier="premium"],
html[data-tier="basic"] [data-tier="vip"],
html[data-tier="premium"] [data-tier="vip"] { display: none !important; }
/* things only Basic shows (e.g. a plain one-page footer) */
html:not([data-tier="basic"]) [data-tier="basic-only"] { display: none !important; }

body { padding-top: 64px; }
.cbar {
  position: fixed; z-index: 9999; inset: 0 0 auto; height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 18px;
  background: #0b1328; color: #eef2ff; font: 500 13px/1.3 Inter, system-ui, sans-serif; border-bottom: 1px solid #2f5bf0;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.7);
}
.cbar { direction: ltr; } /* stays English when a VIP concept switches to Arabic */
.cbar * { box-sizing: border-box; }
.cbar__tag { flex: none; padding: 6px 10px; border-radius: 99px; background: #ffcf3f; color: #1b1300; font: 800 11px/1 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.cbar__text { flex: 1 1 auto; min-width: 0; margin: 0; }
.cbar__text b { display: block; font-weight: 700; }
.cbar__text span { color: #a9b6d8; font-size: 12px; }
.cbar__tiers { flex: none; display: flex; padding: 4px; border-radius: 99px; background: #18233f; }
.cbar__tiers button { border: 0; padding: 9px 16px; border-radius: 99px; background: transparent; color: #c9d3ee; font: 700 13px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background-color .25s, color .25s; }
.cbar__tiers button[aria-selected="true"] { background: #2f5bf0; color: #fff; }
.cbar__what { flex: 0 1 300px; margin: 0; font-size: 12px; color: #a9b6d8; }
.cbar__what b { color: #fff; display: block; font-size: 13px; }
.cbar__back { flex: none; color: #8fb0ff; font-weight: 700; text-decoration: none; }
html.is-embedded .cbar__what, html.is-embedded .cbar__back, html.is-embedded .cbar__tiers { display: none; }
@media (max-width: 1000px) { .cbar__what, .cbar__back { display: none; } }
@media (max-width: 640px) {
  body { padding-top: 96px; }
  .cbar { height: 96px; flex-wrap: wrap; align-content: center; gap: 8px 10px; padding: 8px 12px; }
  .cbar__text { flex: 1 1 60%; } .cbar__text span { display: none; }
  .cbar__tiers { flex: 1 1 100%; justify-content: center; }
  .cbar__tiers button { flex: 1; padding: 8px 6px; }
}

/* a quick flash when the package changes, so the change is noticed */
html.tier-flash main { animation: tierFlash .6s ease; }
@keyframes tierFlash { from { opacity: .35; transform: translateY(10px); } }

/* reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { opacity: 1; transform: none; }
html[data-tier="basic"] [data-reveal] { opacity: 1; transform: none; transition: none; } /* Basic: no scroll animations */

/* VIP booking widget (brands restyle colours with --bk-*) */
[data-booking] { display: grid; gap: 18px; padding: 26px; border-radius: 18px; background: var(--bk-bg, #fff); color: var(--bk-ink, #111); border: 1px solid var(--bk-line, rgba(0,0,0,.1)); }
.bk__row { display: grid; gap: 10px; }
.bk__label { font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.bk__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bk__chips button { padding: 10px 14px; border-radius: 99px; border: 1px solid var(--bk-line, rgba(0,0,0,.15)); background: transparent; color: inherit; font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background-color .2s, color .2s; }
.bk__chips button.on { background: var(--bk-accent, #111); color: var(--bk-on-accent, #fff); border-color: transparent; }
.bk__chips button:disabled { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.bk__go { justify-self: start; padding: 14px 22px; border: 0; border-radius: 99px; background: var(--bk-accent, #111); color: var(--bk-on-accent, #fff); font: 700 14px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.bk__go:disabled { opacity: .45; cursor: not-allowed; }
.bk__done { margin: 0; font-weight: 600; color: var(--bk-accent, #111); }
.form-note { margin-top: 12px; font-size: 14px; opacity: .85; }

/* ---------- VIP extras (added by concept.js, only shown in VIP) ---------- */
.vip-curtain, .vip-progress, .vip-chat, .vip-cursor { display: none; }
html[data-tier="vip"] .vip-progress { display: block; position: fixed; z-index: 9998; top: 64px; left: 0; right: 0; height: 3px; background: var(--vip-accent, #ffcf3f); transform-origin: 0 50%; transform: scaleX(0); }
html[data-tier="vip"] .vip-curtain.go { display: grid; position: fixed; z-index: 10000; inset: 0; place-items: center; background: var(--vip-curtain, #0b0b0b); color: var(--vip-curtain-ink, #fff); animation: curtain 1.7s cubic-bezier(.7,0,.2,1) forwards; pointer-events: none; }
.vip-curtain span { font: 400 clamp(2.4rem, 7vw, 6rem)/1 Georgia, serif; letter-spacing: .02em; animation: curtainText 1.7s ease forwards; }
@keyframes curtain { 0%, 55% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); } }
@keyframes curtainText { 0% { opacity: 0; transform: translateY(20px); } 25%, 50% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translateY(-20px); } }
html[data-tier="vip"] .vip-chat { display: grid; justify-items: end; gap: 12px; position: fixed; z-index: 9990; right: 20px; bottom: 20px; font: 500 14px/1.4 Inter, system-ui, sans-serif; }
.vip-chat__btn { width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--vip-accent, #ffcf3f); font-size: 24px; cursor: pointer; box-shadow: 0 14px 30px -10px rgba(0,0,0,.5); animation: chatPulse 2.4s ease-in-out infinite; }
@keyframes chatPulse { 50% { transform: scale(1.08); } }
.vip-chat__panel { width: min(320px, calc(100vw - 40px)); padding: 16px; border-radius: 18px; background: #fff; color: #111; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); display: grid; gap: 10px; }
.vip-chat__head { display: grid; gap: 2px; margin: 0; padding-bottom: 10px; border-bottom: 1px solid #eee; } .vip-chat__head span { font-size: 12px; color: #2a9d55; }
.vip-chat__msg { margin: 0; padding: 10px 12px; border-radius: 12px; background: #f1f1f1; justify-self: start; }
.vip-chat__quick { display: flex; flex-wrap: wrap; gap: 6px; }
.vip-chat__quick button { padding: 8px 12px; border-radius: 99px; border: 1px solid #ddd; background: #fff; cursor: pointer; font: 600 12px/1 Inter, system-ui, sans-serif; }
.vip-chat__note { margin: 0; font-size: 11px; color: #888; }
html[data-tier="vip"] .vip-cursor { display: block; position: fixed; z-index: 10001; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--vip-accent, #ffcf3f); mix-blend-mode: difference; pointer-events: none; transition: width .25s, height .25s, left .25s, top .25s; }
html[data-tier="vip"] .vip-cursor.is-link { width: 44px; height: 44px; left: -22px; top: -22px; }
html.is-embedded .vip-chat, html.is-embedded .vip-cursor { display: none !important; }
@media (max-width: 640px) { html[data-tier="vip"] .vip-progress { top: 96px; } }
@media (prefers-reduced-motion: reduce) { .vip-curtain { display: none !important; } .vip-chat__btn { animation: none; } }

/* a small "package" label next to things that only appear in a higher package */
.pk-badge { display: inline-block; padding: 4px 8px; border-radius: 99px; background: #ffcf3f; color: #1b1300; font: 800 10px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }