/* Yuca Voyage — reception-screen mode (index.html?kiosk). Everything is scoped to html.kiosk. */

/* Scale the whole rem-based layout with the screen: 1920 px wide ≈ 23 px root, readable from the sofa. */
html.kiosk { font-size: clamp(16px, 1.2vw, 40px); scrollbar-width: none; }
html.kiosk::-webkit-scrollbar { display: none; }
html.kiosk, html.kiosk * { cursor: none !important; }
html.kiosk body { padding-bottom: 0 !important; user-select: none; }

/* Tiny fixed-px labels become legible at TV distance */
html.kiosk .text-\[9px\] { font-size: 0.6rem; }
html.kiosk .text-\[10px\] { font-size: 0.68rem; }
html.kiosk .text-\[11px\] { font-size: 0.72rem; }
html.kiosk .text-xs { font-size: 0.85rem; line-height: 1.3rem; }
html.kiosk .text-sm { font-size: 1rem; line-height: 1.55rem; }
html.kiosk .text-base { font-size: 1.12rem; }
html.kiosk main p { line-height: 1.6; }

/* Interactive-only UI: forms, buttons, menus, floating actions, cursor */
html.kiosk .skip-link,
html.kiosk #cursor,
html.kiosk #nav ul,
html.kiosk #nav a[href="#booking"],
html.kiosk #menu-btn,
html.kiosk #mobile-menu,
html.kiosk #mobile-bar,
html.kiosk #wa-fab,
html.kiosk #svc-preview,
html.kiosk #modal,
html.kiosk #quiz-overlay,
html.kiosk #quiz,
html.kiosk main form,
html.kiosk main button,
html.kiosk [data-i18n="tours.drag"],
html.kiosk .faq-icon { display: none !important; }

/* The language pill stays as a read-only indicator */
html.kiosk #nav [role="group"] { pointer-events: none; transform: scale(1.15); transform-origin: center; }

/* Horizontal carousels are driven by kiosk.js; snapping would fight the glide */
html.kiosk .drag-track { scroll-snap-type: none !important; scroll-behavior: auto !important; }

/* FAQ answers are shown open */
html.kiosk details.faq > summary { pointer-events: none; list-style: none; }

/* Sections that lost their form become a single centred column */
html.kiosk #flights > .relative.grid { grid-template-columns: minmax(0, 1fr) !important; }

/* Booking: the form is replaced by a large contact card (built by kiosk.js) */
#kiosk-contact { border-radius: 32px; padding: 2.4rem; background: rgb(14 23 38 / .72); color: #fbf8f3; backdrop-filter: blur(12px); border: 1px solid rgb(212 176 122 / .35); }
#kiosk-contact h3 { font: 500 2.4rem/1.1 "Cormorant Garamond", Tajawal, serif; color: #e6cfa0; margin-bottom: 1.6rem; }
#kiosk-contact .row { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1rem 0; border-top: 1px solid rgb(251 248 243 / .14); font-size: 1.35rem; font-weight: 600; }
#kiosk-contact .row span:first-child { color: rgb(251 248 243 / .65); font-weight: 500; font-size: 1.05rem; }

/* ---------- kiosk overlays ---------- */
#kiosk-veil {
  position: fixed; inset: 0; z-index: 110; pointer-events: none;
  display: grid; place-items: center;
  background: #0e1726; opacity: 0; transition: opacity .7s ease;
}
#kiosk-veil.on { opacity: 1; }
#kiosk-veil img { width: 6rem; height: 6rem; border-radius: 9999px; background: #fff; padding: .8rem; }
#kiosk-veil p { margin-top: 1.2rem; font: 600 2.4rem/1 "Cormorant Garamond", Tajawal, serif; letter-spacing: .3em; color: #e6cfa0; text-align: center; }

#kiosk-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: .9rem 2.4rem;
  background: rgb(14 23 38 / .92); color: #fbf8f3;
  backdrop-filter: blur(10px);
  border-top: 1px solid rgb(212 176 122 / .35);
  font: 600 1.05rem/1.2 Manrope, Tajawal, sans-serif;
}
#kiosk-bar .k-brand { display: flex; align-items: center; gap: .8rem; letter-spacing: .25em; font-family: "Cormorant Garamond", serif; font-size: 1.35rem; color: #e6cfa0; }
#kiosk-bar .k-brand img { width: 2.2rem; height: 2.2rem; border-radius: 9999px; background: #fff; padding: .25rem; }
#kiosk-bar .k-contact { display: flex; gap: 2rem; align-items: center; }
#kiosk-bar .k-contact b { color: #d4b07a; font-weight: 700; margin-inline-end: .4rem; }
#kiosk-bar .k-langs { display: flex; gap: .4rem; align-items: center; }
#kiosk-bar .k-lang { position: relative; overflow: hidden; min-width: 3.2rem; padding: .35rem .7rem; border-radius: 9999px; text-align: center; font-size: .85rem; letter-spacing: .1em; background: rgb(255 255 255 / .08); color: rgb(251 248 243 / .6); }
#kiosk-bar .k-lang.on { color: #0e1726; background: #e6cfa0; }
#kiosk-bar .k-lang .k-fill { position: absolute; inset: auto 0 0 0; height: 3px; background: #0e1726; transform-origin: left; transform: scaleX(0); }
#kiosk-bar .k-clock { font-variant-numeric: tabular-nums; color: rgb(251 248 243 / .75); min-width: 4.5rem; text-align: end; }
html.kiosk footer { padding-bottom: 5rem; }

/* ---------- China spotlight slide ---------- */
#kiosk-spot { position: fixed; inset: 0; z-index: 65; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s .8s; background: #0e1726; color: #fbf8f3; overflow: hidden; }
#kiosk-spot.on { opacity: 1; visibility: visible; transition: opacity .8s ease; }
#kiosk-spot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#kiosk-spot .k-spot-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(14 23 38 / .55) 0%, rgb(14 23 38 / .82) 55%, rgb(14 23 38 / .95) 100%); }
#kiosk-spot .k-spot-body { position: relative; height: 100%; max-width: 80rem; margin: 0 auto; padding: 4.5rem 2.5rem 6.5rem; display: flex; flex-direction: column; justify-content: center; }
#kiosk-spot .k-eyebrow { font-size: .9rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #e6cfa0; }
html[dir="rtl"] #kiosk-spot .k-eyebrow { letter-spacing: 0; font-size: 1.1rem; }
#kiosk-spot h2 { margin-top: 1rem; max-width: 52rem; font: 500 4rem/1.05 "Cormorant Garamond", Tajawal, serif; }
html[dir="rtl"] #kiosk-spot h2 { font-family: Tajawal, sans-serif; font-weight: 800; font-size: 3.4rem; line-height: 1.25; }
#kiosk-spot .k-spot-cards { margin-top: 2.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
#kiosk-spot .k-spot-card { display: grid; grid-template-columns: 11rem 1fr; gap: 1.4rem; padding: 1.2rem; border-radius: 28px; background: rgb(251 248 243 / .08); border: 1px solid rgb(212 176 122 / .3); backdrop-filter: blur(10px); }
#kiosk-spot .k-spot-card img { width: 100%; height: 100%; min-height: 12rem; object-fit: cover; border-radius: 20px; }
#kiosk-spot .k-spot-card h3 { font: 600 2rem/1.1 "Cormorant Garamond", Tajawal, serif; color: #e6cfa0; }
html[dir="rtl"] #kiosk-spot .k-spot-card h3 { font-family: Tajawal, sans-serif; font-weight: 800; font-size: 1.7rem; }
#kiosk-spot .k-tag { margin-top: .3rem; font-size: .95rem; color: rgb(251 248 243 / .7); }
#kiosk-spot ul { margin-top: .9rem; display: grid; gap: .45rem; font-size: 1.05rem; }
#kiosk-spot li { display: flex; gap: .6rem; }
#kiosk-spot li::before { content: ""; flex: none; width: .4rem; height: .4rem; margin-top: .6rem; border-radius: 9999px; background: #d4b07a; }
#kiosk-spot .k-spot-foot { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; font-size: 1.2rem; font-weight: 700; }
#kiosk-spot .k-spot-foot span:first-child { padding: .5rem 1.2rem; border-radius: 9999px; background: #e6cfa0; color: #0e1726; }