/* Kahiki — Configurador de presupuesto para eventos privados (2026-09). Mataró only, for now:
   this file is self-contained and additive — it reuses the shared eventos-privados.css/.js
   primitives already loaded on this page (`.ep-section`, `.ep-section__num`, `.ep-choices`,
   `.ep-choice`, `.ep-choice--checkbox`, `.eventos-form-card`, `.space-card`/`.spaces-grid`)
   rather than duplicating them, and never touches that shared file — Barcelona's own eventos-
   privados page (still the 11-phase request wizard) is completely unaffected by anything here.
   Only genuinely new pieces get new classes: the 2-column calculator layout, the live budget
   box, and a couple of grid/stacked variants for the pricing options. */

/* The two room photos used to be their own decorative cards above the calculator; folded into
   section 2's own option cards instead (small thumbnail right on the "Sala de eventos"/"Terraza"
   choice itself) — less scroll before reaching the actual tool, and the photo now sits exactly
   where it's relevant instead of duplicated separately. See `.calc-card--space` below. */

/* Wider card than the default `.eventos-form-card` (640px, sized for the old single-column
   contact wizard) — this one holds a 2-column grid (fields + sticky budget box) and needs the
   room. `!important` only because `.eventos-form-card`'s own max-width has no lower-specificity
   hook to override cleanly from a sibling stylesheet without it. */
.event-calc-card{ max-width:1040px !important; }
/* Tighter card padding on phone — the default (2.2rem, sized for the old short contact form)
   eats real estate on a small screen across a card this much taller. */
@media (max-width:640px){ .event-calc-card{ padding:1.4rem 1.1rem !important; } }

.calc-grid{ display:grid; grid-template-columns:1fr 340px; gap:2.4rem; align-items:start; }
@media (max-width:860px){ .calc-grid{ grid-template-columns:1fr; gap:2rem; } }

.calc-fields .ep-section:last-child{ border-bottom:none; padding-bottom:0; margin-bottom:0; }

/* Small inline qualifier next to a section heading, e.g. "Pack de bebidas (por persona)" —
   distinct from `.ep-section__hint`, which is its own paragraph below the heading. */
.ep-section__hint-inline{ font-weight:400; font-size:.72rem; color:var(--cream-dim); text-transform:none; letter-spacing:0; }

/* Personas <select> — same visual language as the site's one other native select
   (`.ep-pack-select` in eventos-privados.css) but self-contained rather than reused, since that
   rule is scoped to `.reserva-step select.ep-pack-select` on purpose (beats an older generic
   `.reserva-step select` rule) and this page has no `.reserva-step` wrapper at all. */
.calc-select{
  background:var(--ink); border:1.5px solid var(--accent); border-radius:8px;
  padding:.65rem 2.2rem .65rem .9rem; color:var(--cream); font-size:1rem; font-family:inherit;
  font-weight:600; width:auto; min-width:7rem; box-shadow:0 0 0 3px var(--accent-glow);
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ef8b3d' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:14px;
}
.calc-select:focus{ outline:none; border-color:var(--accent); }

/* --- Option "casillas" (2026-09, redone to match the reference mockup literally): a bordered
   box per option with its OWN visible radio-dot/checkbox indicator, rather than reusing the
   shared `.ep-choice` pill (hidden native input, border-only checked state). Reuses the exact
   same accessible mechanic as `.ep-choice` — a real input, absolutely positioned over the whole
   box, opacity 0 — just with a purpose-built visual on top instead of a pill background. Every
   option here is genuinely new markup (`.calc-card`), not a `.ep-choice` variant, since the
   shared component has no indicator dot at all to build on. */
.calc-card{ position:relative; display:block; height:100%; }
.calc-card input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.calc-card__inner{
  height:100%; display:flex; align-items:flex-start; gap:.7rem;
  border:1.5px solid rgba(244,232,206,.2); border-radius:14px; padding:.9rem 1.1rem;
  transition:all 160ms ease;
}
/* Uses the venue's own --accent-glow (already defined per-venue in each style.css, at a
   slightly higher opacity than this used to hardcode) rather than a fixed rgba — this file is
   now shared by both Mataró (orange) and Barcelona (lime green) eventos-privados pages, and a
   hardcoded color here would look wrong on whichever venue didn't originally build it. */
.calc-card input:checked + .calc-card__inner{ border-color:var(--accent); background:var(--accent-glow); }
.calc-card input:focus-visible + .calc-card__inner{ outline:2px solid var(--accent); outline-offset:2px; }
.calc-card__radio, .calc-card__check{
  flex:0 0 auto; width:20px; height:20px; margin-top:.1rem; position:relative;
  border:2px solid rgba(244,232,206,.4);
}
.calc-card__radio{ border-radius:50%; }
.calc-card__check{ border-radius:6px; }
.calc-card input:checked + .calc-card__inner .calc-card__radio,
.calc-card input:checked + .calc-card__inner .calc-card__check{ border-color:var(--accent); }
.calc-card input:checked + .calc-card__inner .calc-card__radio::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent);
}
.calc-card input:checked + .calc-card__inner .calc-card__check{ background:var(--accent); }
.calc-card input:checked + .calc-card__inner .calc-card__check::after{
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#241004; font-size:12px; font-weight:700; line-height:1;
}
/* `min-width:0` overrides the flex default of `auto`, which otherwise refuses to shrink a flex
   item below its content's natural width — without it, a card narrow enough (e.g. 3-up on the
   `.calc-space-grid` at a mid desktop width) pushes this text past the card's own border instead
   of wrapping to a second line. */
.calc-card__body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.calc-card__body strong{ font-family:'Bungee'; font-size:.92rem; color:var(--cream); line-height:1.3; }
.calc-card input:checked + .calc-card__inner .calc-card__body strong{ color:var(--accent); }
.calc-card__body small{ font-size:.75rem; color:var(--cream-dim); line-height:1.35; }

/* Tipo de espacio: 2 cards side by side. */
/* auto-fit rather than a fixed column count: Mataró now has 3 space options (Sala interior/
   privada/Terraza), Barcelona still has 2 (Planta baja/superior) — this one shared rule adapts
   to either without needing a per-venue override. */
/* 220px, not 150px: these cards also carry a 52px thumbnail + radio dot the plain choice-grid
   cards don't, so they need more room per column before wrapping to fewer columns — at 150px
   the text was overflowing past the card border on a 3-up desktop row (Mataró's 3 spaces). */
.calc-space-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.65rem; }
@media (max-width:480px){ .calc-space-grid{ grid-template-columns:1fr; } }

/* Small room-photo thumbnail sitting inside the "Sala de eventos"/"Terraza" option itself. */
.calc-card--space .calc-card__inner{ align-items:center; }
.calc-card__thumb{
  width:52px; height:52px; border-radius:10px; object-fit:cover; flex:0 0 auto;
}

/* Bebidas/Catering: each option carries a price + a one-line description, in an even grid. */
.calc-choice-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.65rem; }

/* The "no outside food/drink" rule sits as its OWN box inside the catering grid (matching the
   mockup) instead of a footnote below it — same `.calc-card__inner` shell, no input/indicator. */
.calc-card--note .calc-card__inner{ align-items:center; border-style:dashed; }
.calc-card--note .calc-card__icon{ font-size:1.3rem; line-height:1; flex:0 0 auto; }
.calc-card--note .calc-card__body small{ color:var(--cream-dim); }

/* Extras: icon centered above label/price, still the same bordered-box + checkbox-indicator
   language as the radio cards above, just arranged vertically. */
.calc-extras-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.65rem; }
.calc-extras-grid .calc-card__inner{ flex-direction:column; align-items:center; text-align:center; gap:.4rem; }
.calc-extras-grid .calc-card__check{ position:absolute; top:.6rem; right:.6rem; margin-top:0; }
.calc-extras-grid .calc-card__icon{ font-size:1.6rem; line-height:1; }
.calc-extras-grid .calc-card__inner{ position:relative; padding-top:1.3rem; }

.calc-note{
  margin:.9rem 0 0; font-size:.8rem; color:var(--cream-dim); display:flex; align-items:center; gap:.4rem;
}

/* Small icon sitting to the left of the "Nº de personas" select, matching the mockup's people
   icon next to that one field — every other section already carries its own icon (bebidas 🍹,
   catering 🍴 etc. read fine as plain headings, so only this first field needed one). */
.calc-personas-row{ display:flex; align-items:center; gap:.7rem; }
.calc-personas-row__icon{ font-size:1.3rem; line-height:1; }

/* --- Budget box: the one genuinely new component here. Uses Mataró's own accent (warm orange,
   matching `.btn--solid`'s bg/text pairing) rather than the lime green in the reference mockup —
   this page already has a brand color, no reason to import a different one just because the
   example happened to use it. Sticky on wide screens so the running total stays visible while
   picking options; static (just flows after the extras section) below the 860px breakpoint,
   where sticky would fight the viewport for space instead of helping. --- */
.calc-budget{
  background:var(--accent); color:#241004; border-radius:18px; padding:1.6rem 1.5rem;
  box-shadow:0 20px 50px var(--accent-glow);
}
@media (min-width:861px){ .calc-budget{ position:sticky; top:calc(84px + 1rem); } }
.calc-budget h3{ margin:0 0 1rem; font-family:'Bungee'; font-size:1.05rem; }
.calc-budget__lines{ margin:0; display:flex; flex-direction:column; gap:.55rem; }
.calc-budget__line{ display:flex; justify-content:space-between; gap:.8rem; margin:0; font-size:.88rem; }
.calc-budget__line dt{ font-weight:500; }
.calc-budget__line dt small{ display:block; font-weight:400; opacity:.75; font-size:.74rem; }
.calc-budget__line dd{ margin:0; font-weight:700; white-space:nowrap; }
.calc-budget__extras{ display:flex; flex-direction:column; gap:.55rem; margin-top:.55rem; }
.calc-budget__extras .calc-budget__line{ font-size:.85rem; }
.calc-budget__consult{ margin:.7rem 0 0; font-size:.74rem; line-height:1.4; opacity:.85; }
.calc-budget__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:.8rem;
  margin-top:1.1rem; padding-top:1.1rem; border-top:1.5px solid rgba(36,16,4,.25);
  font-family:'Bungee'; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em;
}
.calc-budget__total small{ text-transform:none; font-family:'Jost'; font-weight:400; letter-spacing:0; opacity:.8; }
.calc-budget__total strong{ font-family:'Bungee'; font-size:1.5rem; letter-spacing:0; }
.calc-budget__cta{
  width:100%; justify-content:center; margin-top:1.2rem; background:var(--ink); color:var(--cream);
  display:flex; align-items:center; gap:.55rem; flex-direction:column; line-height:1.3;
}
.calc-budget__cta:hover{ background:var(--ink-2); transform:translateY(-2px); }
.calc-budget__cta small{ font-weight:400; font-size:.7rem; opacity:.75; text-transform:none; letter-spacing:normal; }

.calc-alt-note{
  margin:1.6rem auto 0; max-width:1040px; text-align:center; font-size:.82rem; color:var(--cream-dim);
  scroll-margin-top:84px;
}
.calc-alt-note a{ color:var(--accent); }

/* --- Amenities strip (from the reference mockup's icon row: "Hasta 200 personas", "Barra
   propia", etc.) — placed inside this same section rather than rewriting the page's own hero,
   since the hero's H1/copy already carries real SEO weight nobody asked to change; this strip is
   pure added information, so it belongs right where that information is actually used (before
   picking options), not stapled onto an unrelated hero. --- */
.calc-amenities{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1.2rem; margin:0 0 2.4rem; text-align:center;
}
.calc-amenities__item{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.calc-amenities__icon{ font-size:1.7rem; line-height:1; }
.calc-amenities__item span{
  font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--cream-dim);
  line-height:1.3;
}
/* On phone, six stacked icon+label columns take a lot of height for what is background info, not
   a decision the visitor needs to make — collapsed into one compact wrapping row of small inline
   chips instead, a fraction of the vertical space. */
@media (max-width:760px){
  .calc-amenities{
    display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-bottom:1.6rem;
  }
  .calc-amenities__item{
    flex-direction:row; gap:.35rem; background:rgba(244,232,206,.06); border-radius:100px;
    padding:.4rem .8rem;
  }
  .calc-amenities__icon{ font-size:.95rem; }
  .calc-amenities__item span{ font-size:.66rem; }
}

/* --- Closing contact band (from the mockup's "¿Tienes alguna duda?" strip) — a light, cream-
   toned band deliberately breaking from the page's dark theme, exactly as in the reference,
   to read as a distinct closing "still unsure? talk to us" moment rather than another dark
   section blending into the ones above it. --- */
.calc-contact-band{
  background:var(--cream); color:var(--ink); border-radius:20px; margin:2.4rem auto 0; max-width:1040px;
  padding:1.6rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.calc-contact-band__left{ display:flex; align-items:center; gap:1rem; }
.calc-contact-band__icon{ font-size:1.8rem; line-height:1; flex:0 0 auto; }
.calc-contact-band__left h3{ margin:0 0 .2rem; font-family:'Bungee'; font-size:1rem; color:var(--ink); }
.calc-contact-band__left p{ margin:0; font-size:.85rem; color:#5a4a3a; }
.calc-contact-band__left a{ color:var(--accent); font-weight:600; }
.calc-contact-band__tagline{
  font-family:'Permanent Marker'; font-size:1.1rem; line-height:1.3; color:var(--accent); text-align:right;
  white-space:nowrap;
}
@media (max-width:640px){
  .calc-contact-band{ flex-direction:column; text-align:center; padding:1.6rem 1.4rem; }
  .calc-contact-band__left{ flex-direction:column; text-align:center; }
  .calc-contact-band__tagline{ text-align:center; white-space:normal; }
}

/* --- Mobile sticky bar: the running total + WhatsApp CTA stay one thumb-reach away while
   picking options, instead of only existing at the very bottom of a 5-section form — the single
   biggest usability gap on a phone, where "scroll all the way down to see your price" is a real
   cost. Desktop already has the sticky `.calc-budget` box doing this job via CSS position:sticky
   in its own 2-column layout, so this only ever needs to exist ≤860px (same breakpoint the 2-col
   grid itself collapses at). JS toggles `.is-visible`; hidden by default so a JS failure/block
   just means the always-present real budget box at the bottom still works, nothing is stuck
   covering content. */
.calc-sticky-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:150;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  align-items:center; justify-content:space-between; gap:1rem;
  background:rgba(22,13,8,.96); backdrop-filter:blur(8px);
  border-top:1px solid rgba(244,232,206,.15); box-shadow:0 -10px 30px rgba(0,0,0,.35);
  transform:translateY(100%); transition:transform 260ms ease;
}
@media (max-width:860px){ .calc-sticky-bar{ display:flex; } }
.calc-sticky-bar.is-visible{ transform:translateY(0); }
.calc-sticky-bar__total{ display:flex; flex-direction:column; line-height:1.15; }
.calc-sticky-bar__total span{ font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--cream-dim); }
.calc-sticky-bar__total strong{ font-family:'Bungee'; font-size:1.2rem; color:var(--accent); }
.calc-sticky-bar__cta{
  display:flex; align-items:center; gap:.5rem; background:var(--accent); color:#241004;
  padding:.75rem 1.2rem; border-radius:100px; font-weight:600; font-size:.82rem; text-decoration:none;
  white-space:nowrap; flex:0 0 auto;
}

/* --- Under the minimum group size (2026-09): below 20 guests, privatizing a space doesn't make
   sense — shown instead of the rest of the calculator (steps 2-5 + the budget box), pointing to
   the venue's normal table-booking flow instead. Guarded in JS on #calcUnderMin existing at all,
   so this is a genuine no-op on any page that doesn't define it (e.g. Barcelona's calculator,
   whose own personas dropdown never goes below 20 to begin with). */
.calc-under-min{ padding:1.5rem 0; text-align:center; }
.calc-under-min p{ margin:0 0 1.1rem; font-size:.9rem; color:var(--cream-dim); line-height:1.5; }

/* The homepage bubble lands here (…/#solicitud, see the tail of evento-calculadora.js). Its own
   scroll-margin keeps the calculator clear of the fixed header regardless of what the page-level
   scroll-padding happens to be. */
.event-calc-card{ scroll-margin-top:84px; }