/* Kahiki — Eventos Privados (Barcelona & Mataró)
   Loaded on top of the venue's own assets/css/style.css, which already defines the design
   tokens (--ink, --accent, --cream…) and every component we reuse as-is: .hero, .section,
   .slider, .faq, .fact-list, .reserva-step (form fields), .reserva-form__msg, .hp-field,
   .fab-stack, .lightbox, .site-header / .main-nav / .burger, .footer__*. This file only adds
   the handful of components specific to this page. */

/* Video slide inside the reused .slider gallery — plays muted+looped as soon as it scrolls into
   view (wired in eventos-privados.js), so it reads as real motion in the gallery instead of a
   static "photo" with a play button bolted on. The small button toggles sound. */
.slider__slide--video video{ width:100%; height:100%; object-fit:cover; }
.slider__slide--video__sound{
  position:absolute; bottom:10px; right:10px; z-index:3; width:34px; height:34px; border-radius:50%;
  background:rgba(9,6,3,.55); backdrop-filter:blur(2px); border:1px solid rgba(244,232,206,.3);
  color:var(--cream); display:flex; align-items:center; justify-content:center; font-size:.95rem; cursor:pointer;
}
.slider__slide--video__badge{
  position:absolute; top:10px; left:10px; z-index:3; background:rgba(9,6,3,.55); color:var(--cream);
  font-size:.65rem; letter-spacing:.05em; text-transform:uppercase; padding:.3rem .55rem; border-radius:100px;
  border:1px solid rgba(244,232,206,.25); pointer-events:none;
}

/* Photo/video count badge overlaid on the gallery section header */
.gallery-count{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.6rem; font-size:.78rem;
  color:var(--bamboo); background:rgba(202,161,92,.1); border:1px solid rgba(202,161,92,.3);
  padding:.35rem .8rem; border-radius:100px;
}

/* Quick-nav chip strip under the hero — jump straight to the section you care about */
.quicknav{
  display:flex; gap:.6rem; overflow-x:auto; padding:1.6rem 0 .2rem; margin:0; list-style:none;
  scrollbar-width:none; -ms-overflow-style:none;
}
.quicknav::-webkit-scrollbar{ display:none; }
.quicknav li{ flex:0 0 auto; }
.quicknav a{
  display:block; white-space:nowrap; font-size:.8rem; color:var(--cream-dim); text-decoration:none;
  background:rgba(244,232,206,.06); border:1px solid rgba(244,232,206,.16); border-radius:100px;
  padding:.55rem 1.1rem; transition:all 180ms ease;
}
.quicknav a:hover{ border-color:var(--accent); color:var(--cream); }

/* Trust badges — the direct-booking equivalent of Privateaser's "servicio gratuito / cero
   recargos / respuesta rápida" reassurance strip, now that there's no marketplace in between. */
.trust-strip{
  display:flex; flex-wrap:wrap; gap:.9rem 2rem; margin:2rem 0 0; padding:1.3rem 1.5rem;
  background:rgba(244,232,206,.04); border:1px dashed rgba(202,161,92,.3); border-radius:16px;
  justify-content:center;
}
.trust-strip li{ display:flex; align-items:center; gap:.55rem; font-size:.82rem; color:var(--cream-dim); }
.trust-strip li span{ font-size:1.15rem; line-height:1; }
.trust-strip li strong{ color:var(--cream); }

/* Quick-facts strip under the hero intro (aforo, privatización, presupuesto, horario) */
.stat-strip{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.6rem 0 0; padding:0; list-style:none; }
.stat-strip li{
  background:var(--ink-2); border:1px solid rgba(202,161,92,.25); border-radius:12px;
  padding:.7rem 1rem; font-size:.78rem; color:var(--cream-dim); min-width:120px;
}
.stat-strip li strong{ display:block; font-family:'Bungee'; font-size:1rem; color:var(--accent); margin-bottom:.15rem; }

/* Space option cards */
.spaces-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.4rem; margin-top:2.2rem; }
.space-card{
  background:var(--ink-2); border:1px solid rgba(202,161,92,.25); border-radius:var(--radius);
  padding:1.6rem; display:flex; flex-direction:column; gap:.7rem; transition:border-color 200ms ease, transform 200ms ease;
}
.space-card:hover{ border-color:rgba(202,161,92,.5); transform:translateY(-3px); }
.space-card:hover .space-card__img img{ transform:scale(1.08); }
.space-card--full{ border-color:rgba(143,206,62,.4); background:linear-gradient(160deg, var(--ink-2), var(--ink-3)); }
.space-card__img{
  position:relative; margin:-1.6rem -1.6rem 0; aspect-ratio:16/10; overflow:hidden;
  border-radius:var(--radius) var(--radius) 0 0;
}
/* Real HTML badge (language-specific text lives in the page, not in CSS content) */
.space-card__badge{
  position:absolute; top:.7rem; right:.7rem; z-index:1; background:var(--accent); color:#12210a;
  font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; padding:.3rem .6rem; border-radius:100px;
}
.space-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform 400ms ease; }
.space-card__img::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,6,3,0) 55%, var(--ink-2) 100%); }
.space-card__cap{ font-family:'Bungee'; font-size:1.5rem; color:var(--accent); line-height:1; }
.space-card__cap small{ display:block; font-family:'Jost'; font-size:.68rem; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--cream-dim); margin-top:.35rem; }
.space-card h3{ margin:0; font-size:1.15rem; color:var(--cream); font-family:'Bungee'; }
.space-card p{ font-size:.85rem; line-height:1.55; color:var(--cream-dim); margin:0; flex:1; }
.space-card__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none; }
.space-card__tags li{
  font-size:.68rem; padding:.3rem .6rem; border-radius:100px; background:rgba(244,232,206,.08);
  color:var(--cream-dim); border:1px solid rgba(244,232,206,.12);
}
.space-card .btn{ margin-top:.3rem; width:100%; justify-content:center; }

/* Generic chip lists (ambiente, actividades, equipamiento, perfecto-para) */
.chip-list{ display:flex; flex-wrap:wrap; gap:.55rem; margin:1.1rem 0 0; padding:0; list-style:none; }
.chip-list li{
  font-size:.8rem; padding:.5rem .95rem; border-radius:100px; background:var(--ink-2);
  border:1px solid rgba(202,161,92,.25); color:var(--cream-dim);
}
.chip-list--accent li{ color:var(--cream); }

.info-block{ margin-top:2.6rem; }
.info-block h3{ font-family:'Bungee'; font-size:1rem; color:var(--bamboo); margin:0 0 .3rem; }
.info-block__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2.2rem 2.6rem; margin-top:1.6rem; }

/* Select fields inside the reused .reserva-step form styling (which only defines input/textarea) */
.reserva-step select{
  background:var(--ink); border:1px solid rgba(244,232,206,.2); border-radius:8px; padding:.65rem .7rem;
  color:var(--cream); font-size:.92rem; font-family:inherit; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23cfc0a1' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat; background-position:right .8rem center;
}
.reserva-step select:focus{ outline:none; border-color:var(--accent); }
.reserva-step .reserva-row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
@media (max-width:560px){ .reserva-step .reserva-row{ grid-template-columns:1fr; } }

/* Reviews / social proof */
.rating-summary{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin:1.2rem 0 0; }
.rating-summary__score{ font-family:'Bungee'; font-size:2.2rem; color:var(--accent); line-height:1; }
.rating-summary__stars{ color:var(--accent); font-size:1.1rem; letter-spacing:.1em; }
.rating-summary__count{ font-size:.78rem; color:var(--cream-dim); }
.reviews-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.4rem; margin-top:2.2rem; }
.review-card{
  background:var(--ink-2); border:1px solid rgba(202,161,92,.25); border-radius:var(--radius);
  padding:1.5rem; display:flex; flex-direction:column; gap:.7rem;
}
.review-card__stars{ color:var(--accent); font-size:.85rem; letter-spacing:.08em; }
.review-card p{ font-size:.87rem; line-height:1.6; color:var(--cream); margin:0; flex:1; }
.review-card__meta{ font-size:.74rem; color:var(--cream-dim); display:flex; justify-content:space-between; gap:.6rem; border-top:1px dashed rgba(244,232,206,.14); padding-top:.7rem; }
.review-card__meta strong{ color:var(--bamboo); }

/* Menu teaser ribbon — reassures that pricing is the same normal menu, nothing marked up for events */
.menu-teaser{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:2.4rem; padding:1.2rem 1.5rem; background:var(--ink-2); border:1px solid rgba(202,161,92,.25);
  border-radius:16px;
}
.menu-teaser p{ margin:0; font-size:.85rem; color:var(--cream-dim); }
.menu-teaser strong{ color:var(--cream); }

/* Sticky mobile CTA bar — appears once the hero has scrolled past, hidden again near the form */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:150; display:none;
  padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background:rgba(18,13,9,.92); backdrop-filter:blur(6px); border-top:1px solid rgba(202,161,92,.25);
  transform:translateY(100%); transition:transform 260ms ease;
}
.sticky-cta.is-visible{ transform:translateY(0); }
.sticky-cta .btn{ width:100%; justify-content:center; }
@media (max-width:760px){ .sticky-cta{ display:block; } }

.eventos-form-card{
  background:var(--ink-2); border:1px solid rgba(202,161,92,.3); border-radius:24px;
  padding:2.2rem clamp(1.4rem,4vw,2.6rem); max-width:640px; margin:2.4rem auto 0;
  box-shadow:var(--shadow);
}
.eventos-form-card .reserva-step{ display:block; }
.eventos-form-card .reserva-step[hidden]{ display:none; }

/* Reused-but-overridden: on this page the "success" panel sits inline, not in a modal */
.reserva-step--success .reserva-success-check{ margin-top:.4rem; }

/* Lightbox video (the shared .lightbox/.lightbox__close/.is-open shell is defined in style.css
   for the image case; this just mirrors its sizing for the <video> we add on this page) */
.lightbox video{ max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6); }

/* Party-size stepper label wrapper, so it sits like the other form fields */
.reserva-step .party-field{ display:flex; flex-direction:column; gap:.35rem; font-size:.78rem; color:var(--cream-dim); margin-bottom:.9rem; }
.reserva-step .party-field .reserva-stepper{ margin-bottom:0; }

/* --- Full-brief event request form (2026-09) ---
   Long single-scroll questionnaire (not a multi-step wizard) — every numbered section is always
   visible, sitting inside the one .reserva-step the card already shows unconditionally. Each
   section reuses the site's radio/checkbox inputs but hides the native control and renders a
   pill-shaped label instead — the input stays in the DOM (real, focusable, keyboard-operable),
   only its box is visually hidden, so this never depends on JS for basic accessibility. */
.ep-form .eventos-form-card{ max-width:720px; }
.ep-section{ margin:0 0 1.9rem; padding-bottom:1.9rem; border-bottom:1px solid rgba(244,232,206,.08); }
.ep-section:last-of-type{ border-bottom:none; padding-bottom:0; margin-bottom:0; }
.ep-section__q{
  display:flex; align-items:baseline; gap:.6rem; margin:0 0 .9rem; color:var(--cream);
  font-size:.92rem; font-weight:700; line-height:1.4;
}
.ep-section__num{
  flex:0 0 auto; font-family:'Bungee'; font-size:.78rem; color:var(--ink);
  background:var(--accent); width:1.6rem; height:1.6rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.ep-section__hint{ margin:-.5rem 0 .9rem; font-size:.78rem; color:var(--cream-dim); }

.ep-choices{ display:flex; flex-wrap:wrap; gap:.55rem; }
.ep-choice{ position:relative; display:block; }
.ep-choice input{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;
}
.ep-choice span{
  display:block; padding:.6rem 1.1rem; border-radius:100px; border:1px solid rgba(244,232,206,.22);
  background:rgba(244,232,206,.04); color:var(--cream-dim); font-size:.82rem; line-height:1.3;
  transition:all 160ms ease; cursor:pointer;
}
.ep-choice input:checked + span{
  border-color:var(--accent); background:rgba(143,206,62,.15); color:var(--cream);
}
.ep-choice input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.ep-choice input:disabled + span{ opacity:.4; cursor:not-allowed; }

/* Checkbox variant reuses everything above but with a square-ish radius, so the two input types
   read as visually distinct at a glance without a separate component. */
.ep-choice--checkbox span{ border-radius:10px; }

.ep-other{ margin-top:.7rem; max-width:320px; }
.ep-other input, .ep-other textarea{
  width:100%; background:rgba(244,232,206,.05); border:1px solid rgba(244,232,206,.2);
  border-radius:10px; padding:.6rem .8rem; color:var(--cream); font-size:.85rem; font-family:inherit;
}
.ep-other input:focus, .ep-other textarea:focus{ outline:none; border-color:var(--accent); }
.ep-other[hidden]{ display:none; }

/* Conditional reveal (e.g. "¿catering? Sí" → food-type checkboxes) */
.ep-conditional{
  margin-top:1rem; padding:.2rem 0 0 1rem; border-left:2px solid rgba(202,161,92,.35);
}
.ep-conditional[hidden]{ display:none; }

.ep-flex-check{ display:flex; align-items:center; gap:.55rem; margin-top:.8rem; }
.ep-flex-check input{ width:17px; height:17px; accent-color:var(--accent); cursor:pointer; margin:0; }
.ep-flex-check label{ margin:0; font-size:.8rem; color:var(--cream-dim); cursor:pointer; }

.ep-time-row{ display:flex; gap:.9rem; flex-wrap:wrap; }
.ep-time-row > label{ flex:1 1 140px; }

/* Drinks-package dropdown (2026-09) — a real <select>, not another row of pills, precisely so it
   reads as a different kind of control: this is the one place in the form where you're choosing
   a priced product, not just answering a question, and the accent-glow border makes that visually
   obvious at a glance rather than blending into the six other pill groups on this same page. */
.ep-pack-label{ margin-bottom:0 !important; }
/* Scoped as `.reserva-step select.ep-pack-select` (class+type+class = 0,2,1) rather than just
   `.ep-pack-select` (0,1,0) — the pre-existing generic `.reserva-step select` rule above is
   class+type (0,1,1), which otherwise beats a single-class selector regardless of source order
   and silently wins the border/background, exactly the bug hit when this was first written. */
.reserva-step select.ep-pack-select{
  background:var(--ink); border:1.5px solid var(--accent); border-radius:8px;
  padding:.65rem 2.2rem .65rem .7rem; color:var(--cream); font-size:.92rem; font-family:inherit;
  width:100%; box-shadow:0 0 0 3px rgba(143,206,62,.12);
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238fce3e' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center; background-size:14px;
}
.reserva-step select.ep-pack-select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(143,206,62,.22); }

@media (max-width:480px){
  .ep-choice span{ padding:.55rem .9rem; font-size:.8rem; }
}