/* Full-screen takeover: suppress the Hello Biz parent header/footer chrome
   so the Mario experience fills the viewport with no stray theme bars. */
body.home .wp-site-blocks > header,
body.home .wp-site-blocks > footer,
body.home header.wp-block-template-part,
body.home footer.wp-block-template-part,
body.home .site-header,
body.home .site-footer { display: none !important; }
body.home { margin: 0 !important; padding: 0 !important; }
#ihs-app { position: relative; }

/* Landing cover — click anywhere to enter (also unlocks audio). Dark-luxury look
   matching the gold coin: near-black bg with a warm radial glow behind the coin. */
.ihs-cover {
  position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 5vh, 48px);
  border: 0; margin: 0; padding: 24px; cursor: pointer; box-sizing: border-box;
  background: radial-gradient(circle at 50% 42%, #3a2a05 0%, #1a1305 34%, #0a0700 72%, #000 100%);
  -webkit-appearance: none; appearance: none; text-align: center; white-space: normal;
  animation: ihs-cover-in 500ms ease-out both;
}
@keyframes ihs-cover-in { from { opacity: 0; } to { opacity: 1; } }
/* soft golden halo pulsing behind the coin */
.ihs-cover-glow {
  position: absolute; top: 42%; left: 50%; width: min(120vw, 900px); height: min(120vw, 900px);
  transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,196,60,0.28) 0%, rgba(255,170,20,0.10) 40%, transparent 68%);
  animation: ihs-cover-glow 3.6s ease-in-out infinite;
}
@keyframes ihs-cover-glow { 0%,100% { opacity: .7; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); } }
.ihs-cover-logo {
  position: relative; width: clamp(220px, 62vw, 460px); height: auto; image-rendering: auto;
  filter: drop-shadow(0 0 40px rgba(255,180,30,0.55));
  animation: ihs-cover-float 4.5s ease-in-out infinite;
}
@keyframes ihs-cover-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.ihs-cover-cta {
  position: relative; display: block; max-width: min(90vw, 640px); white-space: normal;
  font-family: var(--font-head); font-size: clamp(12px, 3.4vw, 20px); line-height: 1.6;
  text-align: center; color: #ffdf7a; text-shadow: 0 2px 0 #7a4a00, 0 0 18px rgba(255,190,40,0.6);
  animation: ihs-cover-pulse 1.8s ease-in-out infinite;
}
@keyframes ihs-cover-pulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
/* dismiss: fade + slight zoom out, then JS removes it */
.ihs-cover.ihs-cover-out { animation: ihs-cover-out 600ms ease-in forwards; pointer-events: none; }
@keyframes ihs-cover-out { from { opacity: 1; } to { opacity: 0; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .ihs-cover, .ihs-cover-glow, .ihs-cover-logo, .ihs-cover-cta { animation: none; }
}

/* One-world-at-a-time viewport: the container is a fixed 100dvh window with a
   single shared biome backdrop behind the worlds. Only the active world is shown
   and it scrolls internally (over the backdrop, which never scrolls). */
#ihs-worlds { position: relative; overflow: hidden; height: 100dvh; }
/* Hide scrollbars everywhere — the active world scrolls internally but we never
   want a visible scrollbar (it breaks the full-screen game look). */
html, body, #ihs-worlds, .ihs-world { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar,
#ihs-worlds::-webkit-scrollbar, .ihs-world::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Scroll-scrub transition: past-edge scrolling sets --ihs-progress (0→1) on
   #ihs-app; the active world slides out in lockstep (pipe slides in — see
   transition.css). Reversible until commit at 1.0. */
.ihs-world.ihs-scrubbing { will-change: transform; z-index: 4; visibility: visible; }
.ihs-world.ihs-scrubbing > * { visibility: visible; }
#ihs-worlds[data-scrub="fwd"] .ihs-world.ihs-scrubbing { transform: translateX(calc(var(--ihs-progress, 0) * -110%)); }
#ihs-worlds[data-scrub="back"] .ihs-world.ihs-scrubbing { transform: translateX(calc(var(--ihs-progress, 0) * 110%)); }
/* native form controls paint in the top layer and don't follow translateX —
   hide them while scrubbing so they don't flash in place */
.ihs-world.ihs-scrubbing input,
.ihs-world.ihs-scrubbing textarea,
.ihs-world.ihs-scrubbing select,
.ihs-world.ihs-scrubbing button,
.ihs-world.ihs-scrubbing .ihs-btn,
.ihs-world.ihs-scrubbing .ihs-apt-plan { visibility: hidden !important; }
/* During a committed transition (couple run → pipe → blackout → reveal) hide ALL
   form controls in every world — native inputs otherwise punch through the black
   loading screen (the "type your name" field flashing during blackout). */
#ihs-app.ihs-transitioning .ihs-world input,
#ihs-app.ihs-transitioning .ihs-world textarea,
#ihs-app.ihs-transitioning .ihs-world select,
#ihs-app.ihs-transitioning .ihs-world button,
#ihs-app.ihs-transitioning .ihs-world .ihs-btn,
#ihs-app.ihs-transitioning .ihs-world .ihs-apt-plan { visibility: hidden !important; }
/* Paint order (all share #ihs-worlds' stacking context):
   backdrop sky/decor/ground z:0-1  <  world content z:3.
   Decor is z:1 so it sits above the sky texture but below world content. */
#ihs-backdrop { position: absolute; inset: 0; pointer-events: none; }
/* "Disabled level" look — grey the scenery of a locked (not-yet-available) world,
   and the transition when heading into one. Purely visual; layout untouched. */
#ihs-backdrop.ihs-locked-view, #ihs-transition.ihs-locked-view {
  filter: grayscale(1) brightness(0.82) contrast(0.95);
}
#ihs-backdrop .biome-sky, #ihs-backdrop .biome-ground, #ihs-backdrop .biome-decor { position: absolute; }
.ihs-world {
  position: absolute; inset: 0; z-index: 3; height: 100dvh; overflow-y: auto; overflow-x: hidden;
  padding: var(--space-world);
  /* extra bottom room so content clears the ground scenery band + the bottom hint */
  padding-bottom: calc(var(--ihs-ground-h) + var(--space-world) + 40px);
  display: flex; flex-direction: column; gap: 22px;
  image-rendering: pixelated;
  visibility: hidden;    /* only the active world is shown */
}
.ihs-world[data-active] { visibility: visible; }
.ihs-world[data-active] > * { visibility: visible; }

/* Blinking "scroll further" hint — a retro row of semi-transparent yellow pixel
   down-chevrons, sitting LOW on the ground band (in front of the footer scenery),
   stretched 3× wide. Fixed + pointer-events:none; toggled by JS (the [hidden]
   attribute removes it during transitions). The three arrows light in sequence. */
.ihs-scroll-hint {
  position: fixed; left: 50%; bottom: 16px;
  transform: translateX(-50%);
  z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.ihs-scroll-hint[hidden] { display: none; }
.ihs-scroll-hint-arrow {
  font-size: 24px; line-height: 0.6; font-weight: 900;
  transform: scaleX(12);                            /* very wide chevrons */
  color: #ffd21e;                                   /* Mario coin yellow */
  text-shadow: 0 0 1px #ffd21e, 0 2px 0 rgba(120,70,0,0.55);   /* bolder + pixel drop shadow */
  opacity: 0.25;
  animation: ihs-hint-chase 1.2s steps(1, end) infinite;
}
.ihs-scroll-hint-arrow:nth-child(1) { animation-delay: 0s; }
.ihs-scroll-hint-arrow:nth-child(2) { animation-delay: 0.2s; }
.ihs-scroll-hint-arrow:nth-child(3) { animation-delay: 0.4s; }
/* each arrow flares to full then fades back to the semi-transparent base */
@keyframes ihs-hint-chase { 0%, 60%, 100% { opacity: 0.25; } 20% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ihs-scroll-hint-arrow { animation: none !important; opacity: 0.7; }
}

/* Side-scroll content slide (continuous-level feel). Forward slides out LEFT,
   backward slides out RIGHT; the destination content FADES in for a smooth landing. */
@keyframes ihs-content-out-left  { from { transform: translateX(0); }    to { transform: translateX(-110%); } }
@keyframes ihs-content-out-right { from { transform: translateX(0); }    to { transform: translateX(110%); } }
@keyframes ihs-content-fade-in {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ihs-world.ihs-slide-out-left {
  visibility: visible; z-index: 4;
  animation: ihs-content-out-left 1.05s cubic-bezier(0.33,0,0.2,1) forwards;
}
.ihs-world.ihs-slide-out-right {
  visibility: visible; z-index: 4;
  animation: ihs-content-out-right 1.05s cubic-bezier(0.33,0,0.2,1) forwards;
}
.ihs-world.ihs-slide-out-left > *, .ihs-world.ihs-slide-out-right > * { visibility: visible; }
.ihs-world.ihs-fade-in {
  animation: ihs-content-fade-in 1.25s cubic-bezier(0.22,1,0.36,1) forwards;
}
/* held fully hidden behind the black screen until the reveal fade starts.
   visibility:hidden (not just opacity) reliably hides form controls too, so the
   search input never flashes through the black. */
.ihs-world.ihs-hidden-behind-black,
#ihs-backdrop.ihs-hidden-behind-black { opacity: 0 !important; visibility: hidden !important; }
.ihs-world.ihs-hidden-behind-black > * { visibility: hidden !important; }
/* backdrop fades in from black alongside the content */
#ihs-backdrop.ihs-fade-in { animation: ihs-content-fade-in 1.1s ease-out forwards; }
/* During a transition, native form controls (search inputs, buttons,
   button-links) render in the browser's top layer: they punch through the
   fading-out black on reveal, and they don't follow the panel's translateX on
   slideout (so they'd flash in place while the panel slides away). .ihs-revealing
   holds them at visibility:hidden (opacity doesn't reliably hide native controls)
   for the duration of the slide/reveal; removing it pops them back cleanly. */
.ihs-world.ihs-revealing input,
.ihs-world.ihs-revealing textarea,
.ihs-world.ihs-revealing select,
.ihs-world.ihs-revealing button,
.ihs-world.ihs-revealing .ihs-btn,
.ihs-world.ihs-revealing .ihs-apt-plan { visibility: hidden !important; }
/* content sits above the backdrop; worlds are transparent */
.ihs-world > * { position: relative; z-index: 1; }

/* ---- Shared biome scenery (applied to #ihs-backdrop and the transition overlay) ---- */
/* Consistent ground height + tile size across ALL worlds so the pipe (anchored
   to the ground height in the transition) always lands correctly. */
:root { --ihs-ground-h: 72px; --ihs-tile: 24px; }

/* OVERWORLD: blue sky with scattered clouds; ground = a grass band with bushes
   on top, and a shorter brick wall strip BELOW the grass (no bricks behind bushes). */
.biome-overworld { background: var(--ihs-sky); }
.biome-overworld .biome-sky {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* seamless cloud pattern tiled across the WHOLE blue sky */
  background-image: url('../img/tiles/cloud-pattern.png');
  background-repeat: space;
  background-size: 460px 340px;
  opacity: .9;
}
.biome-overworld .biome-ground {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--ihs-ground-h); z-index: 1;
  /* bushes sit on the grass line (grass band is the top part, bricks the bottom 32px) */
  background-image: url('../img/tiles/bush.png');
  background-repeat: repeat-x;
  background-size: 96px 40px;
  background-position: left bottom 24px;   /* bushes rest just above the brick band */
}
/* grass band: from the top of the ground strip down to the brick line (bottom 32px) */
.biome-overworld .biome-ground::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 32px; z-index: -1;
  background-image: url('../img/tiles/grass.png'); background-repeat: repeat; background-size: var(--ihs-tile) var(--ihs-tile);
}
/* brick wall band: only the bottom 32px (no bricks behind the bushes) */
.biome-overworld .biome-ground::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32px; z-index: -1;
  background-image: url('../img/tiles/brick.png'); background-repeat: repeat; background-size: var(--ihs-tile) var(--ihs-tile);
}

/* CASTLE: grey stone-block walls + stone floor, with wall torches + a candelabra */
.biome-castle { background: #4a4a5a; color: #fff; }
.biome-castle .biome-sky {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('../img/tiles/stone.png'); background-repeat: repeat; background-size: var(--ihs-tile) var(--ihs-tile); opacity: .35;
}
/* torches on the walls, a bride+groom portrait between them, and candelabras.
   On the full-opacity .biome-decor layer so flames/frame stay bright. */
.biome-castle .biome-decor {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    url('../img/tiles/torch.png'), url('../img/tiles/torch.png'),
    url('../img/tiles/portrait.png'),
    url('../img/tiles/candles.png'), url('../img/tiles/candles.png');
  background-repeat: no-repeat;
  background-size:
    48px 84px, 48px 84px,
    120px 140px,
    68px 106px, 68px 106px;
  background-position:
    7% 66%, 93% 66%,           /* torches left/right */
    50% 62%,                    /* portrait centered between the torches */
    28% 80%, 74% 80%;           /* candelabras raised higher (was 90%) */
  filter: drop-shadow(0 0 14px rgba(255,170,40,.5));
}
.biome-castle .biome-ground {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--ihs-ground-h); z-index: 1;
  background-image: url('../img/tiles/stone.png'); background-repeat: repeat; background-size: var(--ihs-tile) var(--ihs-tile);
}

/* UNDERGROUND: dark with teal blocks + teal floor, with spooky ghosts + bats */
.biome-underground { background: linear-gradient(#101028 0 60%, #3a1f4a 60% 100%); color: #fff; }
.biome-underground .biome-sky {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('../img/tiles/under_block.png'); background-repeat: repeat; background-size: var(--ihs-tile) var(--ihs-tile); opacity: .18;
}
/* spooky ghosts + bats on the full-opacity .biome-decor layer */
.biome-underground .biome-decor {
  /* stay above the ground band so ghosts/bats never sit on the floor */
  position: absolute; left: 0; right: 0; top: 0; bottom: var(--ihs-ground-h); z-index: 2; pointer-events: none;
  background-image: url('../img/tiles/spooky-pattern.png');
  background-repeat: space;
  background-size: 520px 420px;
  opacity: .9;
}
/* overworld/other biomes: no decor layer imagery */
.biome-overworld .biome-decor { display: none; }
.biome-underground .biome-ground {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--ihs-ground-h); z-index: 1;
  background-image: url('../img/tiles/under_block.png'); background-repeat: repeat; background-size: var(--ihs-tile) var(--ihs-tile);
}

/* Worlds are transparent — the shared #ihs-backdrop provides all biome scenery.
   (Text stays dark inside the white content panels regardless of biome.) */

.ihs-title { font-family: var(--font-head); font-size: var(--text-hero); color: #fff;
  text-shadow: 3px 3px 0 var(--ihs-red), 5px 5px 0 var(--ihs-ink); text-align: center; }
.ihs-lang { display: flex; gap: 8px; justify-content: center; }
.ihs-lang button { font-family: var(--font-head); font-size: 12px; padding: 8px 12px;
  border: 3px solid var(--ihs-ink); background: #fff; box-shadow: 3px 3px 0 var(--ihs-ink); cursor: pointer; }
.ihs-lang button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ihs-ink); }
.ihs-lang button[aria-pressed="true"] { background: var(--ihs-coin); }
/* Mute lives in the HUD (left), sharing the row with the logo-coin (right) so
   they sit on the same line. Solid Mario "?"-block chip so 🔊/🔇 stays legible. */
.ihs-mute {
  flex: none; z-index: 6;
  width: 44px; height: 44px; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer;
  background: #fff; border: 3px solid var(--ihs-ink); border-radius: 8px;
  box-shadow: 3px 3px 0 var(--ihs-ink);
}
.ihs-mute:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ihs-ink); }

/* Level-select nav: each world is a Mario signpost "plate" — bordered, shadowed,
   with a hover lift — instead of plain left-aligned text. */
.ihs-map { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ihs-node {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ihs-ink);
  font-family: var(--font-body); font-weight: 700; font-size: 20px;
  width: min(320px, 82%); box-sizing: border-box;
  padding: 10px 16px;
  background: rgba(255,255,255,0.96); border: 3px solid var(--ihs-ink); border-radius: 10px;
  box-shadow: 4px 4px 0 var(--ihs-ink);
  transition: transform 120ms var(--ease-out-expo, ease-out), box-shadow 120ms ease-out;
}
.ihs-node .ihs-node-icon { font-size: 22px; line-height: 1; flex: none; }
.ihs-node:hover, .ihs-node:focus-visible {
  transform: translate(-1px, -2px); box-shadow: 5px 6px 0 var(--ihs-ink); outline: none;
}
.ihs-node:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ihs-ink); }
.ihs-node[data-state="locked"] { filter: grayscale(1); opacity: .7; pointer-events: none; }
.ihs-node[data-state="locked"] .ihs-node-icon::after { content: " 🔒"; }
/* Compact menu on the day worlds: a wrapping horizontal row of smaller nodes,
   sitting under the HUD (World 0 keeps the big hero menu). */
.ihs-map--compact { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 8px; }
.ihs-map--compact .ihs-node { width: 150px; justify-content: flex-start; font-size: 14px; padding: 8px 12px; gap: 8px; box-shadow: 3px 3px 0 var(--ihs-ink); }
.ihs-map--compact .ihs-node .ihs-node-icon { font-size: 16px; }
/* Active world's node looks pushed down ("mintha be lenne nyomva"): inset shadow
   + offset + gold tint instead of the raised plate. Hover override so the lift
   effect doesn't fight the pressed look. */
.ihs-node[data-current] { background: var(--ihs-coin); transform: translate(3px, 3px);
  box-shadow: inset 3px 3px 0 rgba(0,0,0,.28); }
.ihs-node[data-current]:hover, .ihs-node[data-current]:focus-visible {
  transform: translate(3px, 3px); box-shadow: inset 3px 3px 0 rgba(0,0,0,.28); }
.ihs-world[data-locked="true"] .ihs-world-body { display: none; }
/* Day worlds wrap their panels in .ihs-world-body — give it the same column gap
   as the info world so panel spacing is consistent across all worlds. */
.ihs-world-body { display: flex; flex-direction: column; gap: 22px; }
.ihs-world[data-locked="true"] .ihs-locked-notice { display: block; }
/* Centered "unlocks later" message — fixed to the viewport centre so the compact
   menu stays at the top while the notice sits in the middle. */
.ihs-locked-notice { display: none; position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%); z-index: 5; max-width: 84vw;
  font-family: var(--font-head); font-size: 12px; line-height: 1.6;
  color: var(--ihs-coin); text-align: center; margin: 0;
  background: rgba(0,0,0,0.45); padding: 16px 20px; border-radius: 10px; }
.ihs-map-img, .ihs-qr { max-width: 100%; height: auto; border: 3px solid var(--ihs-ink); }
/* Info panel lines with a Mario-style icon before the date / location */
.ihs-info-line { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; }
/* Each info line is a stacked block: a bold label, then the value on its own line
   in the crisp red pixel font (like the breakfast day header). */
.ihs-info-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ihs-info-label { font-family: var(--font-body); font-weight: 700; color: var(--ihs-ink); line-height: 1.3; }
.ihs-info-value { font-family: var(--font-head); font-size: 12px; line-height: 1.5;
  color: var(--ihs-red); letter-spacing: 0.5px; }
.ihs-info-icon { font-size: 22px; line-height: 1; flex: none; image-rendering: pixelated; margin-top: 2px; }
.ihs-info-link { text-decoration: underline; text-underline-offset: 3px; }
.ihs-info-link:hover, .ihs-info-link:focus { color: var(--ihs-ink); }
/* Flight search buttons: one per airport, departing Budapest 14–17 Aug */
.ihs-flights { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.ihs-flight { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; text-align: left; }
.ihs-flight .ihs-info-icon { font-size: 18px; }
/* Getting-there: two options — public transport (airport radios → one Maps
   button) and by car (Waze from current location to the venue). */
.ihs-transport { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
.ihs-transit { border: 3px solid var(--ihs-ink); border-radius: 8px; padding: 12px; margin: 0; }
.ihs-transit legend { font-weight: 700; padding: 0 6px; }
.ihs-transit-hint { margin: 4px 0 10px; }
.ihs-radio { display: flex; align-items: center; gap: 8px; margin: 6px 0; cursor: pointer; font-weight: 600; }
.ihs-radio input { width: 18px; height: 18px; accent-color: var(--ihs-red); cursor: pointer; }
.ihs-transit .ihs-btn { display: block; width: 100%; margin-top: 10px; text-decoration: none; box-sizing: border-box; text-align: center; }
.ihs-bycar .ihs-btn { display: block; width: 100%; text-decoration: none; box-sizing: border-box; text-align: center; }
/* Breakfast order — two day forms (Aug 15 / 16), checkboxes + special/name inputs */
.ihs-bf-sink { display: none; }
.ihs-bfo-form { display: flex; flex-direction: column; gap: 8px; border: 3px solid var(--ihs-ink);
  border-radius: 8px; padding: 12px; margin: 12px 0 0; }
/* Personal data (check-in) form — stacked required text/date/email fields */
.ihs-pd-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ihs-pd-input { font-family: var(--font-body); font-size: var(--text-base); padding: 10px 12px;
  border: 3px solid var(--ihs-ink); border-radius: 8px; box-sizing: border-box; width: 100%; background: #fff; }
/* iOS Safari renders input[type=date] with native chrome that ignores width and
   overflows the box. Reset appearance + pin height so it matches the text inputs. */
.ihs-pd-input[type="date"] {
  -webkit-appearance: none; appearance: none;
  min-height: 46px; height: 46px; line-height: 1.2;
  max-width: 100%; text-align: left;
}
/* Left-align the native date value/placeholder (iOS centers it by default) */
.ihs-pd-input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.ihs-pd-input[type="date"]::-webkit-datetime-edit { padding: 0; }
.ihs-pd-label { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--ihs-ink); }
/* Generic field label (stacked: label text above the input), used across all forms
   so every input reads like the Születési dátum field. */
.ihs-field-label { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--ihs-ink); }
.ihs-pd-form .ihs-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; }
.ihs-pd-done { font-weight: 700; color: #1b7a1b; margin: 6px 0 0; }
.ihs-pd-unavailable { font-weight: 700; color: var(--ihs-red); margin: 6px 0 0; }
.ihs-bfo-day { font-family: var(--font-head); font-size: 12px; color: var(--ihs-red); margin: 0 0 4px; }
.ihs-check { display: flex; align-items: center; gap: 8px; margin: 2px 0; cursor: pointer; font-weight: 600; }
.ihs-check input { width: 18px; height: 18px; accent-color: var(--ihs-red); cursor: pointer; flex: none; }
.ihs-bfo-input { font-family: var(--font-body); font-size: var(--text-base); padding: 8px 10px;
  border: 2px solid var(--ihs-ink); border-radius: 6px; box-sizing: border-box; width: 100%; }
.ihs-bfo-form .ihs-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; margin-top: 4px; }
.ihs-bfo-done { font-weight: 700; color: #1b7a1b; margin: 6px 0 0; }
.ihs-bfo-unavailable { font-weight: 700; color: var(--ihs-red); margin: 6px 0 0; }
/* Wedding dinner menu — courses + two photo options (Menu A / Menu B) */
.ihs-menu-course { margin: 4px 0 14px; }
.ihs-menu-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 12px; color: var(--ihs-red); margin: 0 0 6px; }
.ihs-menu-icon { font-size: 18px; line-height: 1; flex: none; }
.ihs-menu-item { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; }
.ihs-dnr-form { display: flex; flex-direction: column; gap: 10px; }
.ihs-menu-option {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 3px solid var(--ihs-ink); border-radius: 8px; padding: 8px; background: #fff;
  box-shadow: 3px 3px 0 var(--ihs-ink);
}
.ihs-menu-option:has(input:checked) { background: var(--ihs-coin); }
.ihs-menu-option input { width: 20px; height: 20px; accent-color: var(--ihs-red); cursor: pointer; flex: none; }
.ihs-menu-photo { width: 84px; height: 84px; object-fit: cover; flex: none;
  border: 2px solid var(--ihs-ink); border-radius: 6px; image-rendering: auto; }
.ihs-menu-option-text { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-body); font-size: 14px; line-height: 1.4; }
.ihs-menu-option-text strong { font-family: var(--font-head); font-size: 11px; color: var(--ihs-ink); }
.ihs-dnr-input { font-family: var(--font-body); font-size: var(--text-base); padding: 8px 10px;
  border: 2px solid var(--ihs-ink); border-radius: 6px; box-sizing: border-box; width: 100%; }
.ihs-dnr-form .ihs-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; }
.ihs-dnr-done { font-weight: 700; color: #1b7a1b; margin: 6px 0 0; }
/* Pizza Party — multi-select checkboxes, each with a small ingredient line */
.ihs-pza-form { display: flex; flex-direction: column; gap: 10px; }
.ihs-pza-check { align-items: flex-start; }
.ihs-pza-check input { margin-top: 3px; }
.ihs-pza-option { display: flex; flex-direction: column; gap: 2px; }
.ihs-pza-option strong { font-family: var(--font-head); font-size: 11px; color: var(--ihs-ink); }
.ihs-pza-ingredients { font-family: var(--font-body); font-weight: 400; font-size: 13px;
  line-height: 1.35; color: color-mix(in srgb, var(--ihs-ink) 65%, transparent); }
.ihs-pza-form .ihs-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; margin-top: 4px; }
.ihs-pza-done { font-weight: 700; color: #1b7a1b; margin: 6px 0 0; }
.ihs-pza-unavailable { font-weight: 700; color: var(--ihs-red); margin: 6px 0 0; }
/* "change my answer" link inside the submitted-confirmation banners */
.ihs-change-link { color: var(--ihs-red); font-weight: 700; text-decoration: underline; cursor: pointer; }
.ihs-dnr-unavailable { font-weight: 700; color: var(--ihs-red); margin: 6px 0 0; }
.ihs-menu-note { font-family: var(--font-body); font-size: 13px; color: #666; font-style: italic; margin: 10px 0 0; }
.ihs-contact a { color: var(--ihs-red); font-weight: 700; }

/* FAQ / GYIK — retro accordion. Click the question (summary) to drop the answer.
   Each row is a Mario-plate: bordered, shadowed; the icon adds a playful touch. */
.ihs-faq {
  border: 3px solid var(--ihs-ink); border-radius: 8px; background: #fff;
  box-shadow: 3px 3px 0 var(--ihs-ink); margin: 10px 0; overflow: hidden;
}
.ihs-faq-q {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 12px 14px; font-family: var(--font-body); font-weight: 700; font-size: 17px;
  color: var(--ihs-ink); background: rgba(255,255,255,0.96);
}
.ihs-faq-q::-webkit-details-marker { display: none; }
/* pixel-style chevron that flips when open */
.ihs-faq-q::after { content: "▸"; margin-left: auto; font-family: var(--font-head);
  font-size: 12px; color: var(--ihs-red); transition: transform 120ms ease-out; }
.ihs-faq[open] > .ihs-faq-q { background: var(--ihs-coin); }
.ihs-faq[open] > .ihs-faq-q::after { transform: rotate(90deg); }
.ihs-faq-q:hover { background: #fff6cf; }
.ihs-faq-icon { font-size: 20px; line-height: 1; flex: none; }
.ihs-faq-qtext { flex: 1; }
.ihs-faq-a {
  padding: 12px 14px; border-top: 2px solid var(--ihs-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; color: #222;
}
.ihs-faq-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ihs-faq-link {
  font-family: var(--font-body); font-weight: 700; text-decoration: none; font-size: 14px;
  padding: 7px 11px; border: 2px solid var(--ihs-ink); border-radius: 6px;
  background: var(--ihs-coin); color: var(--ihs-ink); box-shadow: 2px 2px 0 var(--ihs-ink);
}
.ihs-faq-link:active { transform: translate(2px, 2px); box-shadow: none; }
/* "Show more / less" toggle to keep the FAQ panel compact (first 7 shown). */
.ihs-faq-toggle, button.ihs-faq-toggle { display: block; width: 100%; box-sizing: border-box; text-align: center; margin-top: 12px; }
/* FAQ search box + empty state */
.ihs-faq-search { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 12px;
  font-family: var(--font-body); font-size: var(--text-base); padding: 10px 12px;
  border: 3px solid var(--ihs-ink); border-radius: 8px; background: #fff; }
.ihs-faq-none { font-family: var(--font-body); font-weight: 700; color: #555; padding: 8px 2px; margin: 0; }

/* Apartment result card (photo + info + official-page link) */
.ihs-apt-card {
  border: 3px solid var(--ihs-ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--ihs-ink);
  overflow: hidden; background: #fff; color: #222; margin-top: 10px; font-family: var(--font-body);
}
.ihs-apt-img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: cover;
  border-bottom: 3px solid var(--ihs-ink); image-rendering: auto; }
.ihs-apt-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ihs-apt-name { font-family: var(--font-head); font-size: 14px; color: var(--ihs-red); }
.ihs-apt-meta { font-weight: 600; font-size: 14px; color: #555; }
.ihs-apt-desc { margin: 0; font-size: var(--text-base); line-height: 1.5; }
.ihs-apt-mates { font-weight: 700; }
.ihs-apt-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.ihs-apt-link { text-decoration: none; }
.ihs-apt-plan { font-family: var(--font-head); font-size: 10px; color: var(--ihs-ink);
  border: 2px solid var(--ihs-ink); background: var(--ihs-coin); padding: 8px 10px; text-decoration: none;
  box-shadow: 2px 2px 0 var(--ihs-ink); }