/* ============================================================
   REALLIO — Sprievodca výberom (wizard.js)
   ============================================================ */
#wzRoot { position: fixed; inset: 0; z-index: 900; background: #FAF8F5; color: #1A1A1A;
  font-family: var(--font-body, Inter, -apple-system, "Segoe UI", sans-serif);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body.wz-open { overflow: hidden; }
.wz { height: 100%; display: flex; flex-direction: column;
  background: radial-gradient(120% 60% at 50% 100%, #FEE9DA 0%, rgba(254,233,218,0) 60%), #FAF8F5; }

.wz-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; }
.wz-back, .wz-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #ECEAE4; background: #fff;
  font-size: 22px; line-height: 1; display: grid; place-items: center; color: #1A1A1A; cursor: pointer; flex: none; }
.wz-steps { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6B6B6B; }
.wz-bar { flex: 1; height: 6px; border-radius: 6px; background: #ECEAE4; overflow: hidden; }
.wz-bar i { display: block; height: 100%; background: #F87829; border-radius: 6px; transition: width .35s ease; }

.wz-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 16px 16px; }
.wz-footer { padding: 10px 16px 14px; background: linear-gradient(to top, #FAF8F5 70%, rgba(250,248,245,0)); }

/* robot + bublina */
.wz-hero { display: flex; align-items: flex-end; gap: 10px; margin: 2px 0 14px; }
.wz-mascot { width: 92px; height: 92px; object-fit: contain; flex: none; filter: drop-shadow(0 8px 14px rgba(26,26,26,.12)); }
.wz-bubble { position: relative; flex: 1; background: #fff; border-radius: 16px; padding: 12px 14px; font-size: 15px; line-height: 1.35;
  box-shadow: 0 6px 20px rgba(26,26,26,.07); margin-bottom: 18px; }
.wz-bubble::before { content: ""; position: absolute; left: -8px; bottom: 16px; width: 16px; height: 16px; background: #fff;
  transform: rotate(45deg); border-radius: 3px; }
.wz-bubble strong { font-family: var(--font-display, Fraunces, Georgia, serif); font-weight: 600; font-size: 17px; display: block; }
.wz-bubble small { display: block; color: #6B6B6B; font-size: 13px; margin-top: 3px; }

/* riadky (účel, rozpočet) */
.wz-list { display: flex; flex-direction: column; gap: 10px; }
.wz-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px; border: 1.5px solid #ECEAE4;
  border-radius: 16px; background: #fff; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.wz-row.on { border-color: #F87829; box-shadow: 0 0 0 3px #FEE9DA; }
.wz-row-sm { padding: 12px 14px; }
.wz-row-pic { width: 84px; height: 64px; border-radius: 12px; display: grid; place-items: center; font-size: 30px; flex: none; }
.wz-pic-living { background: linear-gradient(135deg, #FFD9B8, #F8A66C); }
.wz-pic-investing { background: linear-gradient(135deg, #D8EBD9, #8EC3A0); }
.wz-pic-both { background: linear-gradient(135deg, #FDE6C8, #E9CBA8); }
.wz-row-ico { width: 40px; height: 40px; border-radius: 50%; background: #FEE9DA; display: grid; place-items: center; font-size: 18px; flex: none; }
.wz-row-text { flex: 1; } .wz-row-text b { display: block; font-size: 16px; } .wz-row-text small { color: #6B6B6B; font-size: 13px; }
.wz-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #E3DFD8; flex: none; position: relative; }
.on > .wz-check { border-color: #F87829; background: #F87829; }
.on > .wz-check::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* krajiny */
.wz-tabs { display: flex; gap: 6px; background: #F1EEE8; padding: 4px; border-radius: 12px; margin-bottom: 12px; }
.wz-tabs button { flex: 1; padding: 9px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: #6B6B6B; }
.wz-tabs button.on { background: #F87829; color: #fff; box-shadow: 0 2px 8px rgba(248,120,41,.3); }
.wz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wz-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wz-tile { position: relative; padding: 0; border: 2px solid transparent; border-radius: 14px; background: #fff; overflow: hidden; text-align: left; font: inherit; color: inherit; cursor: pointer;
  box-shadow: 0 2px 10px rgba(26,26,26,.05); }
.wz-tile.on { border-color: #F87829; box-shadow: 0 0 0 3px #FEE9DA; }
.wz-tile.soon { opacity: .55; }
.wz-tile-pic { display: block; height: 86px; background: linear-gradient(135deg, #F8A66C, #F87829 60%, #D85C0C); background-size: cover; background-position: center; position: relative; }
.wz-tile-pic.has-photo { background-image: none; }
.wz-tile-flag { position: absolute; left: 8px; bottom: 8px; font-size: 20px; line-height: 1; background: rgba(255,255,255,.9); border-radius: 8px; padding: 3px 5px; }
.wz-tile-name { display: block; padding: 8px 10px; font-size: 14px; font-weight: 600; }
.wz-tile-name small { display: block; font-weight: 400; color: #A8A8A3; font-size: 11px; }
.wz-tile .wz-check { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.9); }
.wz-tile.on .wz-check { background: #F87829; }
.wz-ghost { display: block; width: 100%; margin-top: 14px; padding: 13px; border: 1.5px dashed #F87829; border-radius: 14px; background: #fff; color: #E0621A; font: inherit; font-weight: 600; font-size: 14.5px; }

/* lokality */
.wz-group { background: #fff; border: 1px solid #ECEAE4; border-radius: 16px; padding: 12px; margin-bottom: 12px; }
.wz-group h3 { margin: 0 0 8px; font-size: 15px; }
.wz-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #A8A8A3; margin: 10px 0 6px; }
.wz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-chip { padding: 8px 12px; border: 1.5px solid #ECEAE4; border-radius: 100px; background: #fff; font: inherit; font-size: 13.5px; color: inherit; }
.wz-chip span { color: #A8A8A3; margin-left: 5px; font-size: 12px; }
.wz-chip.on { background: #1A1A1A; border-color: #1A1A1A; color: #fff; } .wz-chip.on span { color: rgba(255,255,255,.65); }
.wz-chip-all { border-style: dashed; } .wz-chip-all.on { background: #F87829; border-color: #F87829; }

/* priority */
.wz-prio { aspect-ratio: 1 / .95; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px 6px;
  border: 1.5px solid #ECEAE4; border-radius: 16px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center; color: inherit; }
.wz-prio span { font-size: 26px; }
.wz-prio.on { border-color: #F87829; box-shadow: 0 0 0 3px #FEE9DA; background: #FFF6EF; }
.wz-prio:disabled { opacity: .45; }

/* zhrnutie */
.wz-sum { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 6px 20px rgba(26,26,26,.06); }
.wz-sum-count { font-size: 17px; margin-bottom: 10px; } .wz-sum-count b { font-family: var(--font-display, Fraunces, Georgia, serif); font-size: 30px; color: #F87829; }
.wz-sum-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wz-sum-flags span { background: #FEE9DA; color: #E0621A; border-radius: 100px; padding: 5px 10px; font-size: 13px; font-weight: 600; }
.wz-sum-list { list-style: none; margin: 0; padding: 0; } .wz-sum-list li { padding: 7px 0; border-top: 1px solid #F1EEE8; font-size: 14px; }

/* pätka */
.wz-cta { display: block; width: 100%; padding: 16px; border: 0; border-radius: 14px; background: #F87829; color: #fff; font: inherit; font-size: 16px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(248,120,41,.3); cursor: pointer; }
.wz-cta:disabled { background: #F3C9AE; box-shadow: none; }
.wz-link { display: block; width: 100%; margin-top: 8px; padding: 8px; border: 0; background: transparent; color: #6B6B6B; font: inherit; font-size: 14px; }
.wz-note { font-family: var(--font-display, Fraunces, Georgia, serif); font-style: italic; color: #E0621A; text-align: center; margin-top: 18px; font-size: 15px; }
.wz-note-c { text-align: center; color: #A8A8A3; font-size: 12.5px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .wz-bar i { transition: none; } }

/* ---------- výber jazyka (i18n.js) ---------- */
#langRoot.lang-first { position: fixed; inset: 0; z-index: 950; background: radial-gradient(120% 60% at 50% 100%, #FEE9DA 0%, rgba(254,233,218,0) 60%), #FAF8F5;
  display: flex; align-items: center; justify-content: center; padding: 24px 20px; padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
#langRoot.lang-modal { position: fixed; inset: 0; z-index: 950; background: rgba(26,22,20,.45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.lang-box { width: 100%; max-width: 360px; text-align: center; position: relative; }
.lang-modal .lang-box { background: #FAF8F5; border-radius: 22px; padding: 22px 18px 18px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.lang-logo { font-family: var(--font-display, Fraunces, Georgia, serif); font-size: 28px; font-weight: 700; color: #1A1A1A; margin-bottom: 6px; }
.lang-logo img { height: 34px; }
.lang-mascot { width: 150px; height: 150px; object-fit: contain; margin: 4px auto 6px; display: block; filter: drop-shadow(0 10px 18px rgba(26,26,26,.12)); }
.lang-modal .lang-mascot { width: 96px; height: 96px; }
.lang-box h2 { font-family: var(--font-display, Fraunces, Georgia, serif); font-size: 28px; margin: 0 0 4px; }
.lang-box p { color: #6B6B6B; margin: 0 0 18px; font-size: 14.5px; }
.lang-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.lang-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1.5px solid #ECEAE4; border-radius: 14px; background: #fff; font: inherit; font-size: 16px; font-weight: 500; color: #1A1A1A; text-align: left; }
.lang-item .wz-check { margin-left: auto; }
.lang-item.on { border-color: #F87829; box-shadow: 0 0 0 3px #FEE9DA; }
.lang-flag { font-size: 22px; line-height: 1; }
.lang-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #F1EEE8; font-size: 20px; line-height: 1; }

/* ---------- úvod: Ako to funguje — komponent .rl-onboarding ----------
   Všetky pravidlá sú uzavreté pod .rl-onboarding (žiadne globálne body/button/footer). */
.rl-onboarding { --accent: #fa702b; --wash: #fff0e4; --x: 72px; --y: 0px; --rot: 15deg; color: #242d2b; display: flex; flex-direction: column; isolation: isolate; padding-top: 6px; }
.rl-onboarding[data-step="1"] { --accent: #e37a51; --wash: #ffe8dc; --x: -72px; --rot: -15deg; }
.rl-onboarding[data-step="2"] { --accent: #328997; --wash: #def2ee; --x: 0px; --y: -52px; --rot: 0deg; }
.rl-onboarding[data-step="3"] { --accent: #a68238; --wash: #f4ecd4; --x: 0px; --y: 52px; --rot: 0deg; }
.rl-onboarding button { font: inherit; cursor: pointer; }
.rl-onboarding button:focus-visible, .rl-onboarding [tabindex]:focus-visible { outline: 3px solid #267b89; outline-offset: 5px; }
.rl-head { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.rl-brand img { height: 26px; display: block; }
.rl-brand { font-size: 22px; letter-spacing: -1px; font-weight: 800; }
.rl-skip, .rl-back, .rl-replay { border: 0; background: none; color: #777870; font-size: 12px; padding: 8px; }
.rl-back:disabled { opacity: .45; cursor: default; }
.rl-progress { display: flex; gap: 5px; margin: 18px 0 18px; }
.rl-progress button { height: 4px; padding: 0; flex: 1; border: 0; border-radius: 8px; background: #e9e6df; min-height: 0; }
.rl-progress button.active { background: var(--accent); }
.rl-eyebrow { font-size: 10px; letter-spacing: 2px; font-weight: 700; color: #85877e; text-transform: uppercase; }
.rl-intro { text-align: center; }
.rl-intro h1 { font: normal 37px/1.1 var(--font-display, Fraunces, Georgia, serif); letter-spacing: -1.5px; margin: 12px 0; color: #242d2b; }
.rl-intro h1 em { color: var(--accent); font-style: italic; }
.rl-intro p { font-size: 13px; line-height: 1.65; color: #767970; max-width: 300px; margin: 0 auto; min-height: 44px; }
.rl-stage { height: 348px; position: relative; display: grid; place-items: center; margin: 8px -16px 0; touch-action: pan-y; }
.rl-halo { position: absolute; width: 320px; height: 280px; border-radius: 50%; background: radial-gradient(ellipse, var(--wash), transparent 70%); }
.rl-orbit { position: absolute; width: 310px; height: 230px; border: 1px dashed #e4d8c9; border-radius: 50%; transform: rotate(-24deg); }
.rl-ghost { position: absolute; width: 220px; height: 273px; border-radius: 18px; background: #f3e9dc; border: 1px solid #e8ddcc; transform: rotate(-9deg) translate(-9px, 5px); }
.rl-card { width: 232px; border-radius: 17px; background: #fff; box-shadow: 0 18px 40px #57371520, 0 2px 4px #5737150a; position: relative; transform: rotate(5deg); user-select: none; -webkit-user-select: none; touch-action: none; cursor: grab; z-index: 2; will-change: transform; }
.rl-art { height: 160px; position: relative; overflow: hidden; border-radius: 17px 17px 0 0; background: #add7db; }
.rl-art svg { width: 100%; height: 100%; display: block; }
.rl-pill { position: absolute; left: 12px; top: 12px; background: #fffdf4e8; border-radius: 20px; padding: 6px 9px; font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.rl-cardbody { padding: 14px 15px; }
.rl-place { font-size: 8px; letter-spacing: 1.6px; color: #8e9387; text-transform: uppercase; }
.rl-card h2 { font: 18px/1.2 var(--font-display, Fraunces, Georgia, serif); margin: 6px 0 10px; letter-spacing: -.5px; color: #242d2b; }
.rl-metrics { display: flex; justify-content: space-between; font-size: 10px; color: #777e75; }
.rl-price { font-size: 14px; font-weight: 700; color: #2b3930; }
.rl-divider { height: 1px; background: #eeeae2; margin: 11px 0; }
.rl-mini { display: flex; justify-content: center; gap: 17px; }
.rl-mini span { width: 27px; height: 27px; border: 1px solid #eee9e1; border-radius: 50%; display: grid; place-items: center; color: #fa702b; font-size: 13px; }
.rl-mini span:nth-child(2) { background: #fa702b; color: #fff; border-color: #fa702b; }
.rl-badge { position: absolute; right: 39px; top: 35px; z-index: 4; width: 64px; height: 64px; background: #fff; border-radius: 50%; box-shadow: 0 8px 22px #50371912; display: grid; place-items: center; color: var(--accent); font-size: 32px; transform: rotate(10deg); }
.rl-trail { position: absolute; z-index: 3; left: 50%; top: 45%; font-size: 57px; font-weight: 400; color: var(--accent); pointer-events: none; }
.rl-hand { position: absolute; left: 56%; top: 57%; width: 62px; height: 74px; z-index: 5; filter: drop-shadow(0 5px 6px #5a301219); pointer-events: none; color: var(--accent); }
.rl-hand svg { width: 100%; height: 100%; }
.rl-result { position: absolute; bottom: 12px; background: #fff; border: 1px solid #ece5db; border-radius: 30px; padding: 9px 16px; color: var(--accent); font-size: 11px; z-index: 6; box-shadow: 0 4px 12px #51341208; max-width: 92%; text-align: center; }
.rl-controls { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin: 3px 0 15px; }
.rl-try { font-size: 10px; color: #919187; }
.rl-replay { font-size: 10px; }
.rl-tip { display: flex; gap: 11px; border: 1px solid #eee5d7; background: #f9f4e9; padding: 13px 14px; border-radius: 14px; font-size: 11px; line-height: 1.6; color: #797b6f; }
.rl-spark { font-size: 22px; color: #ad955f; line-height: 1; }
.rl-tip strong { color: #535d50; font-weight: 500; }
.rl-onboarding[data-step="1"] .rl-badge { right: auto; left: 27px; }
.rl-onboarding[data-step="2"] .rl-trail { left: 76%; top: 27%; }
.rl-onboarding[data-step="3"] .rl-trail { left: 76%; top: 40%; }
/* pätička (vykresľuje sa vo wz-footer, tiež pod .rl-onboarding) */
.rl-foot { padding-top: 4px; }
.rl-next { width: 100%; border: 0; border-radius: 14px; background: #fa702b; color: #fff; box-shadow: 0 7px 17px #fa702b27; font-size: 14px; font-weight: 700; padding: 17px; display: flex; justify-content: center; gap: 24px; }
.rl-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 10px; color: #999c91; }
.rl-keys { font-size: 9px; }
/* animácie ukážky */
.rl-card.demo { animation: rlSwipe 3.8s cubic-bezier(.45,0,.2,1) infinite; }
.rl-hand.demo { animation: rlHand 3.8s cubic-bezier(.45,0,.2,1) infinite; }
.rl-badge.demo { animation: rlPop 3.8s ease infinite; }
.rl-onboarding.paused .demo { animation-play-state: paused; }
.rl-onboarding.dragging .rl-card { animation: none; transition: none; cursor: grabbing; }
.rl-onboarding.dragging .rl-hand { opacity: 0; animation: none; }
.rl-onboarding.success .rl-card { animation: none; transform: translate(var(--x), var(--y)) rotate(var(--rot)); transition: transform .35s; }
.rl-onboarding.success .rl-hand { opacity: 0; }
.rl-onboarding.success .rl-badge { animation: none; transform: scale(1.13); }
@keyframes rlSwipe { 0%, 20%, 88%, 100% { transform: translate(0, 0) rotate(4deg); } 45%, 65% { transform: translate(var(--x), var(--y)) rotate(var(--rot)); } }
@keyframes rlHand { 0%, 14%, 90%, 100% { opacity: 0; transform: translate(-8px, 10px); } 25% { opacity: 1; transform: translate(0, 0); } 45%, 65% { opacity: 1; transform: translate(var(--x), var(--y)); } 78% { opacity: 0; transform: translate(var(--x), var(--y)); } }
@keyframes rlPop { 0%, 25%, 85%, 100% { transform: scale(.92) rotate(8deg); } 45%, 65% { transform: scale(1.13) rotate(-8deg); } }
@media (max-width: 360px) { .rl-stage { height: 325px; } .rl-intro h1 { font-size: 33px; } .rl-badge { right: 20px; } }
@media (max-height: 700px) { .rl-stage { height: 300px; } .rl-progress { margin: 12px 0 12px; } .rl-intro p { min-height: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rl-onboarding .demo { animation: none !important; }
  .rl-card { transform: rotate(4deg); }
  .rl-hand { display: none; }
  .rl-onboarding.success .rl-card { transition: none; }
}