/* Longevity Resort — condominium explorer. Light, calm, brand fonts (Marcellus / Barlow), gold as a fill only.
   No motion on the page: state changes are instant; only the 3D ring turns, and only when the visitor turns it. */
:root {
  /* the website's palette (longevitysamui.com globals.css, Máté 2026-10-11: "green like the website, not cream") */
  --ink: #E4D9C3;          /* text: website --cream */
  --muted: rgba(228,217,195,.66);   /* labels (~5:1 on the panel) */
  --gold: #C9A96E;         /* fills, chips, selection */
  --gold-bright: #E8C98A;
  --gold-soft: rgba(201,169,110,.16);
  --forest: #060E08;       /* website --bg: the darkest, text on gold */
  --paper: #0D1C10;        /* panel: website --bg-2 */
  --card: #12251A;         /* raised surfaces */
  --img: #E9E2D3;          /* behind the light floor-plan renders */
  --line: rgba(201,169,110,.20);
  /* status colours: the CRM masterplan component (Máté's choice A, 2026-10-10) */
  --avail: #2FA968;
  --res: #E0A63A;
  --sold: #D8483B;
  --panel-w: 440px;
  --r: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink);
  font: 400 15px/1.45 "Barlow", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, .serif { font-family: "Marcellus", Georgia, serif; font-weight: 400; letter-spacing: .01em; }

.app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

/* ---------------------------------------------------------------- left panel */
.panel { width: var(--panel-w); flex: none; display: flex; flex-direction: column; background: var(--paper);
  border-right: 1px solid var(--line); position: relative; z-index: 3; }
.panel.closed { margin-left: calc(-1 * var(--panel-w)); }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 22px 28px 16px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; color: var(--ink); }
.brand img { width: 40px; height: 37px; }
.brand b { font: 400 17px/1.1 "Marcellus", serif; display: block; letter-spacing: .04em; }
.brand small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.icon-btn { width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--line); background: var(--card);
  display: grid; place-items: center; position: relative; }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn.on { background: var(--gold); border-color: var(--gold); color: var(--forest); }
.icon-btn .count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--gold); color: var(--forest); font-size: 11px; display: grid; place-items: center; padding: 0 4px; }

.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 28px 16px; }
.filters label { position: relative; display: block; }
.filters select { width: 100%; appearance: none; border: 1px solid var(--line); background: var(--card); border-radius: 8px;
  padding: 11px 32px 11px 14px; font-size: 14px; }
.filters label::after { content: ""; position: absolute; right: 14px; top: 50%; margin-top: -3px; border: 5px solid transparent;
  border-top-color: var(--ink); pointer-events: none; }
.filters select.set { border-color: var(--gold); background: var(--gold-soft); }
.result-line { padding: 0 28px 10px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; }
.result-line button { border: 0; background: none; color: var(--ink); text-decoration: underline; padding: 0; font-size: 13px; }

.list { overflow-y: auto; padding: 4px 28px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; flex: 1; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; cursor: pointer; position: relative; text-align: left; }
.card:hover, .card.hl { border-color: var(--gold); }
.card .img { aspect-ratio: 1 / .9; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: var(--img); }
.card .img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.card .fav { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: rgba(6,14,8,.72); display: grid; place-items: center; }
.card .fav svg { width: 16px; height: 16px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 8px; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 4px; background: var(--gold); color: var(--forest); white-space: nowrap; }
.chip.ghost { background: var(--gold-soft); }
.chip.avail { background: rgba(47,169,104,.18); color: #6FD39C; }
.chip.res { background: rgba(224,166,58,.18); color: #F0C26E; }
.chip.sold { background: rgba(216,72,59,.20); color: #F08479; }
.facts { display: flex; gap: 14px; font-size: 13px; color: var(--muted); }
.facts b { color: var(--ink); font-weight: 500; }
.empty { grid-column: 1 / -1; color: var(--muted); padding: 30px 0; text-align: center; }

.thumb-loc { margin: 4px 28px 16px; border-radius: var(--r); overflow: hidden; position: relative; background: var(--card); aspect-ratio: 16/10; }
.thumb-loc canvas, .thumb-loc svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- stage */
.stage { flex: 1; position: relative; overflow: hidden; background: var(--forest); user-select: none; -webkit-user-select: none; }
.detail { user-select: text; -webkit-user-select: text; }
.view { position: absolute; inset: 0; display: none; }
.view.on { display: block; }
#v3d > canvas, #v3d > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#v3d { cursor: grab; touch-action: none; }
#v3d.drag { cursor: grabbing; }
.u-poly { fill: transparent; stroke: transparent; stroke-width: 3; vector-effect: non-scaling-stroke; cursor: pointer; }
.u-poly.match { fill: rgba(201,169,110,.22); stroke: rgba(201,169,110,.9); stroke-width: 1.5; }
.u-poly.hot { fill: rgba(201,169,110,.45); stroke: #fff4dc; stroke-width: 2; }
.u-poly.sold.hot { fill: rgba(216,72,59,.45); }
.u-poly.res.hot { fill: rgba(224,166,58,.5); }

.switch { position: absolute; top: 24px; right: 24px; display: flex; background: rgba(13,28,16,.92); border-radius: 10px;
  padding: 4px; border: 1px solid var(--line); z-index: 4; }
.switch button { border: 0; background: none; padding: 9px 16px; border-radius: 7px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.switch button svg { width: 18px; height: 18px; }
.switch button.on { background: var(--gold); color: var(--forest); }

.arrows { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 4;
  background: rgba(13,28,16,.9); padding: 8px; border-radius: 12px; border: 1px solid var(--line); }
.arrows button { width: 46px; height: 42px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; }
.arrows svg { width: 20px; height: 20px; }
.hint { position: absolute; left: 24px; bottom: 30px; z-index: 4; font-size: 13px; color: var(--ink);
  background: rgba(13,28,16,.9); border: 1px solid var(--line); padding: 7px 12px; border-radius: 8px; }
.toggle-panel { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 5; width: 26px; height: 52px;
  border: 1px solid var(--line); border-left: 0; background: var(--paper); border-radius: 0 9px 9px 0; display: grid; place-items: center; }
.toggle-panel svg { width: 14px; height: 14px; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; z-index: 2; }

/* hover card on the 3D view */
.pop { position: absolute; z-index: 6; width: 236px; background: var(--card); border-radius: 12px; padding: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.55); border: 1px solid var(--line); display: none; }
.pop.on { display: block; }
.pop .img { aspect-ratio: 1.2; display: grid; place-items: center; background: var(--img); border-radius: 7px; overflow: hidden; }
.pop .img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pop .go { width: 100%; margin-top: 10px; border: 0; border-radius: 8px; padding: 10px; background: var(--gold); color: var(--forest); font-weight: 600; }
.pop .go[disabled] { background: rgba(228,217,195,.10); color: var(--muted); cursor: default; }

/* ---------------------------------------------------------------- floors view */
#vfloor { background: var(--paper); }
#vfloor .plan { position: absolute; inset: 90px 120px 70px 60px; }
#vfloor .plan img, #vfloor .plan svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.f-poly { fill: rgba(201,169,110,0); stroke: rgba(22,36,27,0); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; }
.f-poly.match { fill: rgba(201,169,110,.10); stroke: rgba(201,169,110,.8); }
.f-poly.hot { fill: rgba(201,169,110,.32); stroke: var(--gold); }
.f-label { pointer-events: none; }
.f-label rect { fill: rgba(13,28,16,.92); stroke: rgba(201,169,110,.35); }
.f-label rect { stroke-width: 3; }
.f-label text { font: 500 40px "Barlow", sans-serif; fill: var(--ink); }
.f-label text.t { font: 400 52px "Marcellus", serif; }
.floor-pick { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; z-index: 4; }
.floor-pick button { width: 52px; height: 46px; border: 0; background: none; font: 400 17px "Marcellus", serif; }
.floor-pick button.on { background: var(--gold); color: var(--forest); }
.floor-pick small { display: block; text-align: center; font-size: 10px; letter-spacing: .14em; color: var(--muted); padding: 8px 0 4px; }
.compass { position: absolute; left: 34px; top: 30px; width: 64px; height: 64px; }
.floor-title { position: absolute; left: 112px; top: 36px; }
.floor-title h2 { margin: 0; font-size: 26px; }
.floor-title p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- 2D grid */
#v2d { background: var(--paper); padding: 110px 60px 60px; overflow: auto; }
.legend { display: flex; gap: 20px; justify-content: center; margin-bottom: 30px; font-size: 14px; }
.legend i { display: inline-block; width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 7px; }
.grid2d { display: grid; grid-template-columns: 60px 1fr; gap: 10px 18px; max-width: 900px; margin: 0 auto; }
.grid2d .lvl { font: 400 20px "Marcellus", serif; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.grid2d .row { display: flex; gap: 10px; flex-wrap: wrap; }
.cell { min-width: 108px; border-radius: 8px; padding: 10px 12px; border: 0; text-align: left; color: #060E08; }
.cell b { display: block; font: 400 19px "Marcellus", serif; }
.cell span { font-size: 12px; opacity: .92; }
.cell.avail { background: var(--avail); } .cell.res { background: var(--res); } .cell.sold { background: var(--sold); }
.cell.dim { opacity: .28; }
.cell:hover { outline: 3px solid var(--gold); }

/* ---------------------------------------------------------------- apartment page */
.detail { position: absolute; inset: 0; z-index: 8; background: var(--paper); display: none; overflow: auto; }
.detail.on { display: block; }
.detail .bar { display: flex; align-items: center; gap: 12px; padding: 22px 30px; position: sticky; top: 0; background: var(--paper); z-index: 2; border-bottom: 1px solid var(--line); }
.detail .bar .back { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 8px 14px; display: flex; gap: 8px; align-items: center; }
.detail .bar .back svg { width: 16px; height: 16px; }
.detail .body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 40px; padding: 30px; max-width: 1400px; }
.detail .hero { background: var(--img); border-radius: 14px; display: grid; place-items: center; padding: 20px; min-height: 420px; }
.detail .hero img { max-width: 100%; max-height: 70vh; object-fit: contain; }
.detail h1 { font-size: 40px; margin: 0 0 6px; line-height: 1.1; }
.detail .sub { color: var(--muted); margin: 0 0 20px; }
.spec { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); margin: 18px 0; }
.spec div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec div:nth-child(odd) { padding-right: 16px; }
.spec small { display: block; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.spec b { font: 400 22px "Marcellus", serif; }
.price { font: 400 20px "Marcellus", serif; margin: 6px 0 18px; }
.btn { border: 0; border-radius: 9px; padding: 14px 18px; font-weight: 600; letter-spacing: .02em; }
.btn.primary { background: var(--gold); color: var(--forest); width: 100%; }
.btn.line { background: var(--card); border: 1px solid var(--line); }
.btn-row { display: flex; gap: 10px; margin-top: 10px; }
.btn-row .btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-row svg { width: 17px; height: 17px; }
.mini { margin-top: 26px; }
.mini h3 { font-size: 16px; margin: 0 0 10px; }
.mini.seaview img { width: 100%; display: block; border-radius: 10px; border: 1px solid var(--line); }
.mini.seaview p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.mini .wrap { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 10px; aspect-ratio: 3600 / 1556; }
.mini .wrap img, .mini .wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.form { display: none; margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.form.on { display: block; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; margin-bottom: 10px; background: var(--forest); }
.form textarea { min-height: 80px; resize: vertical; }
.form .consent { display: flex; gap: 10px; font-size: 13px; color: var(--muted); margin: 4px 0 14px; align-items: flex-start; }
.form .consent a { color: var(--ink); }
.form .note { font-size: 13px; color: var(--muted); margin-top: 10px; }
.form .hp { position: absolute; left: -9999px; }

.foot-note { position: absolute; right: 24px; bottom: 4px; z-index: 4; font-size: 11px; color: var(--muted);
  background: rgba(6,14,8,.75); padding: 3px 8px; border-radius: 6px; max-width: calc(100% - 48px); }
/* narrower stages: the hint would run into the arrows (Máté's screenshot 2026-10-09), lift it above them */
@media (max-width: 1250px) { .hint { bottom: 96px; } }

/* ---------------------------------------------------------------- phone */
@media (max-width: 900px) {
  .app { flex-direction: column-reverse; height: auto; min-height: 100dvh; overflow: visible; }
  .panel { width: 100%; border-right: 0; }
  .panel.closed { margin-left: 0; }
  .panel-head { padding: 16px 16px 10px; }
  .filters, .result-line { padding-left: 16px; padding-right: 16px; }
  .list { padding: 4px 16px 24px; overflow: visible; }
  .thumb-loc { margin: 4px 16px 12px; }
  .stage { height: 62vh; flex: none; position: sticky; top: 0; }
  .toggle-panel, .hint { display: none; }
  .foot-note { right: 8px; bottom: 66px; font-size: 10px; }
  .switch { top: 12px; right: 12px; left: 12px; justify-content: space-between; }
  .switch button { padding: 8px 10px; font-size: 13px; }
  .arrows { bottom: 14px; }
  #vfloor .plan { inset: 70px 70px 20px 12px; }
  .floor-pick { right: 10px; }
  .compass, .floor-title { display: none; }
  #v2d { padding: 70px 14px 30px; }
  .grid2d { grid-template-columns: 44px 1fr; }
  .cell { min-width: 84px; }
  .detail { position: fixed; }
  .detail .body { grid-template-columns: 1fr; padding: 16px; gap: 20px; }
  .detail .hero { min-height: 260px; }
  .detail h1 { font-size: 30px; }
  .detail .bar { padding: 14px 16px; }
  .pop { width: 210px; }
}

/* preview only: camera preset comparison */
.cam-switch { position: absolute; top: 24px; left: 24px; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 4px;
  background: rgba(13,28,16,.92); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.cam-switch span { padding: 0 8px; color: var(--muted); }
.cam-switch a { width: 34px; height: 32px; display: grid; place-items: center; border-radius: 7px; color: var(--ink); text-decoration: none; font-weight: 600; }
.cam-switch a.on { background: var(--gold); color: var(--forest); }
@media (max-width: 900px) { .cam-switch { top: 64px; left: 12px; } }

/* ---------------------------------------------------------------- lighter brand variants (Máté 2026-10-11: "too dark")
   preview: index.html?theme=a|b|c ; the chosen one becomes the default */
:root[data-theme="a"] { --paper: #17301F; --card: #1F3D2A; --line: rgba(201,169,110,.26); --muted: rgba(228,217,195,.74); }
:root[data-theme="a"] .stage { background: #17301F; }
:root[data-theme="b"] { --paper: #24463A; --card: #2D5444; --line: rgba(232,201,138,.30); --muted: rgba(240,232,214,.80); --ink: #F3EBDA; }
:root[data-theme="b"] .stage { background: #24463A; }
/* c: green frame, light content: panel and bars stay forest green, every card / popup / page body is warm ivory */
:root[data-theme="c"] { --paper: #1A3324; --card: #21402D; --line: rgba(201,169,110,.26); --muted: rgba(228,217,195,.74); }
:root[data-theme="c"] .card, :root[data-theme="c"] .pop { background: #F7F2E8; color: #001f16; border-color: rgba(0,31,22,.10); }
:root[data-theme="c"] .card .facts, :root[data-theme="c"] .pop .facts { color: #55645a; }
:root[data-theme="c"] .card .facts b, :root[data-theme="c"] .pop .facts b { color: #001f16; }
:root[data-theme="c"] .card .chip.ghost, :root[data-theme="c"] .pop .chip.ghost { background: rgba(0,31,22,.08); color: #001f16; }
:root[data-theme="c"] .card .img, :root[data-theme="c"] .pop .img { background: #EDE5D5; }
:root[data-theme="c"] .card:hover, :root[data-theme="c"] .card.hl { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
:root[data-theme="c"] .detail, :root[data-theme="c"] .detail .bar, :root[data-theme="c"] #v2d, :root[data-theme="c"] #vfloor { background: #F3EDE1; color: #001f16; }
:root[data-theme="c"] .detail .sub, :root[data-theme="c"] .detail .spec small, :root[data-theme="c"] .floor-title p, :root[data-theme="c"] .legend { color: #55645a; }
:root[data-theme="c"] .detail .bar, :root[data-theme="c"] .detail .spec, :root[data-theme="c"] .detail .spec div { border-color: rgba(0,31,22,.12); }
:root[data-theme="c"] .detail .bar .back, :root[data-theme="c"] .btn.line, :root[data-theme="c"] .grid2d .lvl, :root[data-theme="c"] .floor-pick { background: #fff; border-color: rgba(0,31,22,.14); color: #001f16; }
:root[data-theme="c"] .detail .chip.ghost { background: rgba(0,31,22,.08); color: #001f16; }
:root[data-theme="c"] .mini .wrap, :root[data-theme="c"] .form { background: #fff; border-color: rgba(0,31,22,.12); }
:root[data-theme="c"] .form input[type=text], :root[data-theme="c"] .form input[type=email], :root[data-theme="c"] .form input[type=tel], :root[data-theme="c"] .form textarea { background: #FBF8F2; border-color: rgba(0,31,22,.14); color: #001f16; }
:root[data-theme="c"] .mini.seaview p, :root[data-theme="c"] .form .consent, :root[data-theme="c"] .form .note { color: #55645a; }
:root[data-theme="c"] .floor-title h2, :root[data-theme="c"] .grid2d .lvl { color: #001f16; }
:root[data-theme="c"] .f-label rect { fill: rgba(255,255,255,.95); stroke: rgba(0,31,22,.2); }
:root[data-theme="c"] .f-label text { fill: #001f16; }
:root[data-theme="c"] .chip.avail { background: #DDF1E5; color: #1C7A49; }
:root[data-theme="c"] .chip.res { background: #F8EBCF; color: #8A5E12; }
:root[data-theme="c"] .chip.sold { background: #F6DCD8; color: #A3322A; }

/* c+ : the premium refinement of c (Máté 2026-10-11: "professional and premium") — hairline gold instead of grey
   borders, more air, small spaced capitals for labels, no heavy shadows, ivory never pure white */
:root[data-theme="c"] .card, :root[data-theme="c"] .pop { border: 1px solid rgba(201,169,110,.45); border-radius: 4px; padding: 12px; box-shadow: none; }
:root[data-theme="c"] .pop { box-shadow: 0 18px 50px rgba(0,0,0,.35); border-top: 2px solid var(--gold); }
:root[data-theme="c"] .card .img, :root[data-theme="c"] .pop .img { border-radius: 2px; }
:root[data-theme="c"] .list { gap: 16px; }
:root[data-theme="c"] .chip { border-radius: 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; }
:root[data-theme="c"] .card:hover, :root[data-theme="c"] .card.hl { box-shadow: 0 0 0 1px var(--gold); }
:root[data-theme="c"] .btn, :root[data-theme="c"] .pop .go { border-radius: 2px; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; font-weight: 500; }
:root[data-theme="c"] .btn.line { border: 1px solid rgba(0,31,22,.25); }
:root[data-theme="c"] .detail .bar { border-bottom: 1px solid rgba(201,169,110,.5); }
:root[data-theme="c"] .detail .hero { background: #EDE5D5; border-radius: 2px; }
:root[data-theme="c"] .detail h1 { font-size: 46px; letter-spacing: .01em; }
:root[data-theme="c"] .detail h1::after { content: ""; display: block; width: 56px; height: 1px; background: var(--gold); margin: 16px 0 4px; }
:root[data-theme="c"] .spec b { font-size: 24px; }
:root[data-theme="c"] .price { font-size: 22px; letter-spacing: .02em; }
:root[data-theme="c"] .filters select, :root[data-theme="c"] .icon-btn { border-radius: 2px; }
:root[data-theme="c"] .switch, :root[data-theme="c"] .arrows, :root[data-theme="c"] .hint { border-radius: 4px; border-color: rgba(201,169,110,.35); }
:root[data-theme="c"] .switch button, :root[data-theme="c"] .arrows button { border-radius: 2px; }
:root[data-theme="c"] .switch button { letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
:root[data-theme="c"] .result-line { letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
:root[data-theme="c"] .brand small { color: var(--gold); }
:root[data-theme="c"] .mini h3 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-family: "Barlow", sans-serif; font-weight: 500; color: #55645a; }

/* ---------------------------------------------------------------- intro film, eye button, outline toggle, tab bar */
.intro { position: fixed; inset: 0; z-index: 100; background: #050b07; display: grid; place-items: center; transition: opacity .45s ease; }
.intro[hidden] { display: none; }
.intro.out { opacity: 0; pointer-events: none; }
.intro video { width: 100%; height: 100%; object-fit: cover; }
.intro-skip { position: absolute; right: 24px; bottom: 24px; border: 1px solid rgba(201,169,110,.5); background: rgba(5,11,7,.5); color: #E4D9C3;
  padding: 9px 18px; border-radius: 4px; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
.card .eye { position: absolute; top: 50px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: rgba(6,14,8,.72); color: #E4D9C3; display: grid; place-items: center; }
.card .eye svg { width: 16px; height: 16px; }
.outline-toggle { position: absolute; right: 24px; bottom: 26px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--line); background: rgba(13,28,16,.9); }
.outline-toggle .knob { width: 38px; height: 22px; border-radius: 11px; background: rgba(228,217,195,.25); position: relative; }
.outline-toggle .knob::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.outline-toggle.on .knob { background: var(--gold); }
.outline-toggle.on .knob::after { left: 19px; }
.outline-toggle .sw { position: relative; width: 22px; height: 22px; }
.outline-toggle .sw i { position: absolute; width: 12px; height: 12px; }
.outline-toggle .sw .a { left: 0; top: 0; background: var(--avail); } .outline-toggle .sw .r { right: 0; bottom: 0; background: var(--res); }
.u-poly.all { fill: rgba(47,169,104,.30); stroke: rgba(255,255,255,.8); stroke-width: 1.2; }
.u-poly.all.res { fill: rgba(224,166,58,.38); } .u-poly.all.sold { fill: rgba(216,72,59,.38); }
.tabbar { display: none; }
@media (max-width: 1250px) { .outline-toggle { bottom: 96px; } }

/* ---------------------------------------------------------------- f: the FLAT.SHOW / AMANI look in Longevity colours
   (Máté 2026-10-11: "almost 1:1 like flatshow.property/AMANI; keep our functions where they are better")
   white panel and cards, hairline grey borders, 10 px radii, pale grey icon buttons, gold chips with white text,
   forest green for the active state, light glass controls on the 3D view, a bottom tab bar on phones */
:root[data-theme="f"] { --ink: #1B1613; --muted: #6E6A64; --paper: #FFFFFF; --card: #FFFFFF; --line: rgba(34,36,38,.15);
  --img: #FFFFFF; --forest: #001f16; color-scheme: light; }
:root[data-theme="f"] body { font-size: 14px; }
:root[data-theme="f"] .panel { border-right: 0; }
:root[data-theme="f"] .panel-head { padding: 28px 30px 16px; }
:root[data-theme="f"] .brand img { content: url(assets/logo-dark.svg); width: 50px; height: 46px; }
:root[data-theme="f"] .brand b { color: #001f16; }
:root[data-theme="f"] .brand small { color: #9c7d44; }
:root[data-theme="f"] .icon-btn { background: #F2F1EF; border: 0; border-radius: 10px; width: 42px; height: 42px; color: #1B1613; }
:root[data-theme="f"] .icon-btn.on { background: #001f16; color: #fff; }
:root[data-theme="f"] .icon-btn .count { background: var(--gold); color: #fff; }
:root[data-theme="f"] .filters { padding: 6px 30px 18px; }
:root[data-theme="f"] .filters select { background: #fff; border: 1px solid rgba(34,36,38,.15); border-radius: 4px; padding: 13px 32px 13px 18px; font-size: 13px; color: #1B1613; }
:root[data-theme="f"] .filters label::after { border-top-color: #1B1613; border-width: 4px; }
:root[data-theme="f"] .filters select.set { background: #F7F2E8; border-color: var(--gold); }
:root[data-theme="f"] .result-line { padding: 0 30px 12px; color: #6E6A64; }
:root[data-theme="f"] .result-line button { color: #001f16; }
:root[data-theme="f"] .thumb-loc { margin: 4px 30px 16px; background: #F2F1EF; }
:root[data-theme="f"] .list { padding: 4px 30px 30px; gap: 10px; }
:root[data-theme="f"] .card { background: #fff; border: 1px solid rgba(34,36,38,.15); border-radius: 10px; padding: 4px 4px 14px; }
:root[data-theme="f"] .card:hover, :root[data-theme="f"] .card.hl { border-color: #001f16; }
:root[data-theme="f"] .card .img { background: #fff; aspect-ratio: 1 / .78; border-radius: 8px; }
:root[data-theme="f"] .card .fav, :root[data-theme="f"] .card .eye { background: #C9C8C4; color: #fff; top: 14px; right: 10px; }
:root[data-theme="f"] .card .eye { top: 49px; }
:root[data-theme="f"] .card .fav svg { stroke: #fff; }
:root[data-theme="f"] .card .chips, :root[data-theme="f"] .card .facts { padding: 0 8px; }
:root[data-theme="f"] .chip, :root[data-theme="f"] .chip.ghost { background: var(--gold); color: #fff; border-radius: 2px; font-size: 12px; padding: 2px 6px; }
:root[data-theme="f"] .facts { color: #1B1613; font-size: 13px; }
:root[data-theme="f"] .facts b { font-weight: 400; }
:root[data-theme="f"] .chip.avail { background: #DDF1E5; color: #1C7A49; }
:root[data-theme="f"] .chip.res { background: #F8EBCF; color: #8A5E12; }
:root[data-theme="f"] .chip.sold { background: #F6DCD8; color: #A3322A; }
:root[data-theme="f"] .stage { background: #E9ECE4; }
:root[data-theme="f"] .toggle-panel { background: #fff; border: 0; border-radius: 0 10px 10px 0; color: #1B1613; }
:root[data-theme="f"] .switch { background: rgba(255,255,255,.82); border: 0; border-radius: 6px; padding: 6px; }
:root[data-theme="f"] .switch button { color: #1B1613; border-radius: 4px; padding: 10px 16px; font-size: 14px; }
:root[data-theme="f"] .switch button.on { background: #001f16; color: #fff; }
:root[data-theme="f"] .arrows { background: rgba(255,255,255,.55); border: 0; border-radius: 10px; padding: 10px 14px; }
:root[data-theme="f"] .arrows button { background: #F2F1EF; border: 0; border-radius: 6px; color: #1B1613; }
:root[data-theme="f"] .hint { background: rgba(255,255,255,.85); border: 0; border-radius: 6px; color: #1B1613; }
:root[data-theme="f"] .outline-toggle { background: rgba(255,255,255,.7); border: 0; border-radius: 6px; }
:root[data-theme="f"] .outline-toggle .knob { background: #C9C8C4; }
:root[data-theme="f"] .outline-toggle.on .knob { background: #001f16; }
:root[data-theme="f"] .foot-note { background: rgba(255,255,255,.8); color: #6E6A64; }
:root[data-theme="f"] .pop { background: #fff; border: 0; border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.22); }
:root[data-theme="f"] .pop .img { background: #fff; }
:root[data-theme="f"] .pop .go { background: #001f16; color: #fff; border-radius: 8px; font-weight: 500; }
:root[data-theme="f"] .u-poly.hot { fill: rgba(255,255,255,.35); stroke: #fff; }
:root[data-theme="f"] #v2d, :root[data-theme="f"] #vfloor { background: #fff; color: #1B1613; }
:root[data-theme="f"] .grid2d .lvl, :root[data-theme="f"] .floor-pick { background: #F2F1EF; border: 0; color: #1B1613; }
:root[data-theme="f"] .floor-pick button.on { background: #001f16; color: #fff; }
:root[data-theme="f"] .floor-title h2 { color: #1B1613; } :root[data-theme="f"] .floor-title p, :root[data-theme="f"] .legend { color: #6E6A64; }
:root[data-theme="f"] .f-label rect { fill: rgba(255,255,255,.95); stroke: rgba(34,36,38,.2); }
:root[data-theme="f"] .f-label text { fill: #1B1613; }
:root[data-theme="f"] .detail, :root[data-theme="f"] .detail .bar { background: #fff; color: #1B1613; }
:root[data-theme="f"] .detail .bar { border-bottom: 1px solid rgba(34,36,38,.12); }
:root[data-theme="f"] .detail .bar .back, :root[data-theme="f"] .btn.line { background: #F2F1EF; border: 0; color: #1B1613; border-radius: 8px; }
:root[data-theme="f"] .detail .hero { background: #fff; border: 1px solid rgba(34,36,38,.12); border-radius: 10px; }
:root[data-theme="f"] .detail .sub, :root[data-theme="f"] .spec small, :root[data-theme="f"] .mini.seaview p { color: #6E6A64; }
:root[data-theme="f"] .spec, :root[data-theme="f"] .spec div { border-color: rgba(34,36,38,.12); }
:root[data-theme="f"] .btn.primary { background: #001f16; color: #fff; border-radius: 8px; font-weight: 500; }
:root[data-theme="f"] .mini .wrap, :root[data-theme="f"] .form { background: #fff; border-color: rgba(34,36,38,.12); }
:root[data-theme="f"] .form input[type=text], :root[data-theme="f"] .form input[type=email], :root[data-theme="f"] .form input[type=tel], :root[data-theme="f"] .form textarea { background: #fff; border-color: rgba(34,36,38,.15); color: #1B1613; }
:root[data-theme="f"] .form .consent, :root[data-theme="f"] .form .note { color: #6E6A64; }
:root[data-theme="f"] .form .consent a { color: #001f16; }
@media (max-width: 900px) {
  :root[data-theme="f"] .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: #fff; border-top: 1px solid rgba(34,36,38,.1); padding-bottom: env(safe-area-inset-bottom); }
  :root[data-theme="f"] .tabbar button { border: 0; background: #fff; color: #1B1613; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 0 9px; font-size: 13px; }
  :root[data-theme="f"] .tabbar svg { width: 24px; height: 24px; }
  :root[data-theme="f"] .tabbar button.on { background: #001f16; color: #fff; }
  :root[data-theme="f"] .app { flex-direction: column; min-height: 100dvh; padding-bottom: 70px; }
  :root[data-theme="f"] .stage { height: calc(100dvh - 70px); position: relative; }
  :root[data-theme="f"] .switch { display: none; }
  :root[data-theme="f"] .panel { display: none; }
  :root[data-theme="f"] body[data-tab="filters"] .panel { display: flex; }
  :root[data-theme="f"] body[data-tab="filters"] .stage { display: none; }
  :root[data-theme="f"] .arrows { bottom: 18px; } :root[data-theme="f"] .outline-toggle { bottom: 18px; right: 12px; } :root[data-theme="f"] .foot-note { bottom: 82px; }
}

/* F refinement (2026-10-12): the apartment page a touch more premium, as in C+ */
:root[data-theme="f"] .detail .bar { border-bottom: 1px solid rgba(201,169,110,.55); }
:root[data-theme="f"] .detail h1 { font-size: 46px; color: #001f16; }
:root[data-theme="f"] .detail h1::after { content: ""; display: block; width: 56px; height: 1px; background: var(--gold); margin: 16px 0 4px; }
:root[data-theme="f"] .pop { border-top: 2px solid var(--gold); }

/* ---------------------------------------------------------------- villa explorer additions (site/) */
/* resort / group switch: same look as the view switch, on the left of the stage */
.groups { position: absolute; top: 24px; left: 24px; display: flex; background: rgba(13,28,16,.92); border-radius: 10px; padding: 4px; gap: 2px; z-index: 5; }
.groups button { border: 0; background: none; padding: 9px 14px; border-radius: 7px; font-size: 14px; white-space: nowrap; }
.groups button.on { background: var(--gold); color: var(--forest); }
:root[data-theme="f"] .groups { background: rgba(255,255,255,.94); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
:root[data-theme="f"] .groups button.on { background: #0D3B26; color: #fff; }
.u-poly.grp { fill: rgba(255,255,255,.10); stroke: rgba(255,255,255,.75); stroke-width: 1.2; }
.u-poly.condo { cursor: pointer; }
.u-poly.condo.hot { fill: rgba(201,169,110,.30); stroke: #fff4dc; stroke-width: 2; }
.u-poly.free.hot { fill: rgba(47,169,104,.42); }
.pop .condo-go { width: 100%; margin-top: 10px; border: 0; border-radius: 8px; padding: 10px; background: var(--gold); color: var(--forest); font-weight: 600; }
.grid2d .lvl { text-transform: none; }
@media (max-width: 900px) { .groups { top: 12px; left: 12px; right: 12px; overflow-x: auto; overflow-y: hidden; } .groups button { padding: 8px 11px; } }

/* 2026-10-13 (Máté: no white outlines): selection by fill only, like AMANI; rows and villas alike */
#v3d .u-poly, #v3d .u-poly.match, #v3d .u-poly.all, #v3d .u-poly.hot, #v3d .u-poly.grp { stroke: none !important; }
#v3d .u-poly { fill: transparent; }
#v3d .u-poly.match { fill: rgba(201,169,110,.28); }
#v3d .u-poly.hot { fill: rgba(201,169,110,.55); }
#v3d .u-poly.row.hot { fill: rgba(201,169,110,.42); }
#v3d .u-poly.condo.hot { fill: rgba(201,169,110,.42); }
#v3d .u-poly.all.avail { fill: rgba(47,169,104,.42); } #v3d .u-poly.all.res { fill: rgba(224,166,58,.5); } #v3d .u-poly.all.sold { fill: rgba(216,72,59,.5); }
#v3d .u-poly.all.hot { fill: rgba(201,169,110,.65); }
.card .facts span { white-space: nowrap; }
.pop .img { aspect-ratio: auto; }
@media (max-width: 900px) { .foot-note { bottom: 150px; } }

/* ---------------------------------------------------------------- 2026-10-15: outlines, tag and row names as at 3DEstate
   (Máté: the villa outline "olyan legyen, mint a 3D Estate-nek"; the hover card was in the way). A thin, crisp line in the
   status colour and a light fill on every villa; on the one under the pointer a stronger fill and a thicker line. No
   white lines (Máté 2026-10-13), so the 10-13 "stroke: none" rule is overridden with the status colour only. */
#v3d .u-poly.all { stroke-linejoin: round; }
#v3d .u-poly.all.free  { fill: rgba(47,169,104,.12) !important; stroke: rgba(47,169,104,.95) !important; stroke-width: 1.4px; }
#v3d .u-poly.all.res   { fill: rgba(224,166,58,.16) !important; stroke: rgba(224,166,58,.95) !important; stroke-width: 1.4px; }
#v3d .u-poly.all.sold  { fill: rgba(216,72,59,.16) !important; stroke: rgba(216,72,59,.95) !important; stroke-width: 1.4px; }
#v3d .u-poly.row.all   { fill: rgba(47,169,104,.05) !important; stroke-width: 1.8px; }
#v3d .u-poly.condo.all { fill: rgba(201,169,110,.08) !important; stroke: rgba(201,169,110,.95) !important; stroke-width: 1.8px; }
#v3d .u-poly.all.hot       { fill: rgba(47,169,104,.38) !important; stroke-width: 2.6px; }
#v3d .u-poly.all.res.hot   { fill: rgba(224,166,58,.42) !important; }
#v3d .u-poly.all.sold.hot  { fill: rgba(216,72,59,.40) !important; }
#v3d .u-poly.all.condo.hot { fill: rgba(201,169,110,.36) !important; }
#v3d .u-poly.all.row.hot   { fill: rgba(47,169,104,.22) !important; }

:root[data-theme="f"] .pop { width: auto; max-width: 260px; padding: 9px 12px; border: 0; border-top: 0; border-radius: 8px; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); display: none; font-size: 13px; line-height: 1.35; color: #1B1613; background: #fff; }
:root[data-theme="f"] .pop.on { display: flex; flex-direction: column; gap: 2px; }
.pop b { font-family: "Marcellus", serif; font-weight: 400; font-size: 15px; }
.pop span { color: #55524D; white-space: nowrap; }
.pop em { font-style: normal; font-size: 12px; color: #8A867F; margin-top: 2px; }
.pop .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; background: var(--free); }
.pop .dot.reserved { background: var(--res); } .pop .dot.sold { background: var(--sold); }

#rowTags { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.row-tag { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; display: flex; align-items: center; gap: 8px;
  border: 0; border-radius: 8px; background: #fff; color: #1B1613; padding: 7px 10px; font: 500 13px/1 "Barlow", sans-serif;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; white-space: nowrap; }
.row-tag b { font-weight: 600; }
.row-tag span { background: #F2F1EF; border-radius: 5px; padding: 3px 6px; font-size: 12px; }
#v3d.drag .row-tag { pointer-events: none; }

/* ---------------------------------------------------------------- 2026-10-16 (Máté): the resort bigger next to the list,
   3DEstate-like row lines, and the phone first (90% of visitors) */
:root { --panel-w: 380px; }
#v3d .u-poly.row.all { fill: rgba(47,169,104,.0) !important; stroke: #3DBE6E !important; stroke-width: 2.4px; }
#v3d .u-poly.row.all.hot { fill: rgba(61,190,110,.22) !important; stroke-width: 3px; }
@media (max-width: 900px) {
  .row-tag { padding: 5px 8px; font-size: 12px; gap: 6px; border-radius: 7px; }
  .row-tag span { padding: 2px 5px; font-size: 11px; }
  :root[data-theme="f"] .foot-note { font-size: 10px; padding: 2px 6px; left: 8px; right: auto; max-width: 70%; }
  :root[data-theme="f"] .arrows { padding: 6px 8px; }
  :root[data-theme="f"] .arrows button { width: 40px; height: 36px; }
  .groups button { font-size: 13px; }
}
@media (min-width: 901px) {
  :root[data-theme="f"] .list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 4px 20px 24px; }
  .filters { padding-left: 20px; padding-right: 20px; } .result-line { padding-left: 20px; padding-right: 20px; }
  .card .facts { flex-wrap: wrap; row-gap: 2px; font-size: 12px; }
}

/* 2026-10-16 (Máté): in the row view the villa outlines stronger and green, never yellow; only the outer line strong,
   the fill stays light */
#v3d .u-poly.all.free, #v3d .u-poly.all.avail { fill: rgba(61,190,110,.08) !important; stroke: #3DBE6E !important; stroke-width: 2.8px; }
#v3d .u-poly.all.hot { fill: rgba(61,190,110,.26) !important; stroke: #3DBE6E !important; stroke-width: 3.6px; }
#v3d .u-poly.condo.all { fill: rgba(61,190,110,.06) !important; stroke: #3DBE6E !important; stroke-width: 2.4px; }
#v3d .u-poly.condo.all.hot { fill: rgba(61,190,110,.24) !important; }

/* 2026-10-17: row labels on a pin (3DEstate-like): the label sits above the row, a thin white line down to a dot */
.row-pin { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.row-pin .row-tag { position: static; transform: none; pointer-events: auto; }
.row-pin i { display: block; width: 1.5px; background: rgba(255,255,255,.95); box-shadow: 0 0 2px rgba(0,0,0,.35); position: relative; }
.row-pin i::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px rgba(61,190,110,.9); }
#v3d.drag .row-pin .row-tag { pointer-events: none; }
.row-pin.info .row-tag { cursor: default; }

/* 2026-10-17 (Máté: "legyen olyan, mint a 3D Estate-nek"): a plain white pill with the name in regular weight, a thin white
   line and a small white dot, no count chip, no big soft shadow */
.row-pin .row-tag { background: #fff; color: #1B1613; border-radius: 999px; padding: 6px 13px; gap: 0;
  font: 400 13px/1.2 "Barlow", system-ui, sans-serif; letter-spacing: .01em; box-shadow: 0 1px 2px rgba(0,0,0,.28); }
.row-pin .row-tag:hover { background: #F4F3F0; }
.row-pin i { width: 1px; background: #fff; box-shadow: 0 0 1px rgba(0,0,0,.45); }
.row-pin i::after { width: 7px; height: 7px; margin-left: -3.5px; bottom: -3.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.28); }
@media (max-width: 900px) { .row-pin .row-tag { padding: 5px 11px; font-size: 12px; } }
.card.apt .facts span:last-child { color: var(--muted, #6E6A64); }

/* 2026-10-18 proposal (?tags=b): every villa outlined at resort level in its status colour, a bit thicker; smaller pin */
.tags-b #v3d .u-poly.all.free, .tags-b #v3d .u-poly.all.avail { fill: rgba(61,190,110,.14) !important; stroke: #45D47A !important; stroke-width: 2.4px; }
.tags-b #v3d .u-poly.all.res  { fill: rgba(240,180,40,.18) !important; stroke: #F5B82E !important; stroke-width: 2.4px; }
.tags-b #v3d .u-poly.all.sold { fill: rgba(225,60,50,.18) !important; stroke: #E5463A !important; stroke-width: 2.4px; }
.tags-b #v3d .u-poly.all.hot  { fill: rgba(61,190,110,.34) !important; stroke-width: 3.2px; }
.tags-b .row-pin .row-tag { font-size: 12px; padding: 5px 11px; }
/* 2026-10-18 (?tags=c|d): bold row name with a small chip inside the pill (count or villa range) */
.tags-chip .row-pin .row-tag { gap: 7px; padding: 4px 4px 4px 12px; }
.tags-chip .row-pin .row-tag b { font-weight: 600; }
.tags-chip .row-pin .row-tag span { background: #EFEEEB; color: #4A4540; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 500; }
@media (max-width: 900px) { .tags-chip .row-pin .row-tag { padding: 3px 3px 3px 10px; gap: 6px; } .tags-chip .row-pin .row-tag span { padding: 2px 7px; } }
/* 2026-10-18 (?tags=e): bold "Row"; --pinfont when ?font= tries another face */
.row-pin .row-tag { font-family: var(--pinfont, "Barlow"), system-ui, sans-serif; }
.row-pin .row-tag b { font-weight: 600; }
:root[style*="Raleway"] .row-pin .row-tag b { font-weight: 700; }
/* ?tags=h&font=poppins: as in the 3DEstate viewer ("Flat 1"): the word light, the name bold */
:root[style*="Poppins"] .row-pin .row-tag { font-weight: 400; }
:root[style*="Poppins"] .tags-h .row-pin .row-tag, :root.tags-h .row-pin .row-tag { font-weight: 300; }
:root[style*="Poppins"] .row-pin .row-tag b { font-weight: 600; }

/* Location view: the neighbourhood map fills the stage (2026-10-19) */
#vloc { padding: 0; background: #E7EEE4; }
#vloc iframe { width: 100%; height: 100%; border: 0; display: block; }
#vloc iframe[hidden] { display: none; }
.locsw { position: absolute; top: 24px; left: 24px; z-index: 3; display: flex; background: rgba(13,28,16,.92); border-radius: 10px; padding: 4px; }
.locsw button { border: 0; background: none; color: #fff; padding: 9px 16px; border-radius: 7px; font: inherit; font-size: 14px; cursor: pointer; }
.locsw button.on { background: var(--gold); color: var(--forest); }
@media (max-width: 900px) { .locsw { top: 12px; left: 12px; } .locsw button { padding: 8px 12px; font-size: 13px; } }
/* 2026-10-19: the hover tag in the pins' face (Poppins), not Marcellus: one type voice on the 3D view */
.pop, .pop b, .pop span, .pop em { font-family: var(--pinfont, "Poppins"), system-ui, sans-serif; }
.pop b { font-weight: 600; font-size: 14px; letter-spacing: 0; }
/* 2026-10-19: on a phone the two card columns were wider than the screen (a card did not shrink below its one-line
   facts), the page grew to 477 px and the phone zoomed out: cards may shrink, facts and chips wrap */
@media (max-width: 900px) {
  .list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .list > .card { min-width: 0; }
  .card .facts, .card .chips { flex-wrap: wrap; row-gap: 4px; }
  .card .facts span { white-space: nowrap; }
}
/* 2026-10-19 (Máté: "alig látom, hogy kijelölte a villát"): the shape under the pointer clearly filled, a bright, thick
   green line; the others stay as they are */
#v3d .u-poly.hot, #v3d .u-poly.all.hot, #v3d .u-poly.row.all.hot, #v3d .u-poly.condo.all.hot {
  fill: rgba(61,190,110,.5) !important; stroke: #34E07F !important; stroke-width: 4px !important; }
#v3d .u-poly.all.res.hot  { fill: rgba(240,180,40,.5) !important; stroke: #FFC93A !important; }
#v3d .u-poly.all.sold.hot { fill: rgba(225,60,50,.48) !important; stroke: #FF5A4E !important; }

/* ================= A concept (Máté 2026-10-19, preview site/proba/app-a/index.v1.html) ================= */
:root { --a-ink:#1B1613; --a-mute:#5E5953; --a-line:#E7E4DF; --a-green:#1F7A4D; --a-green-soft:#E6F3EC; --a-dark:#123B2A; }
.panel, .panel button, .panel select, #detail, #detail button, #detail input, #detail textarea { font-family: "Poppins", system-ui, sans-serif; }
/* pills instead of the four drop-downs */
.pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 28px 6px; }
.pill { border: 1px solid var(--a-line); border-radius: 999px; padding: 7px 14px; font-size: 13px; background: #fff; color: var(--a-ink); cursor: pointer; white-space: nowrap; }
.pill.on { background: var(--a-green-soft); border-color: var(--a-green); color: var(--a-green); font-weight: 500; }
.panel .filters { display: none !important; }
/* cards */
.list .card { border: 1px solid var(--a-line) !important; border-radius: 12px !important; overflow: hidden; padding: 0 !important; background: #fff !important; box-shadow: none !important; position: relative; }
.list .card .img { aspect-ratio: 16/10; background: #F7F6F4 !important; position: relative; overflow: hidden; border-radius: 0 !important; margin: 0 !important; }
.list .card .img img { position: absolute; left: 4%; top: 6%; width: 92%; height: 88%; object-fit: contain; }
.list .card .tx { padding: 10px 12px 12px; }
.list .card h4 { margin: 0; font: 600 15px/1.3 "Poppins", sans-serif; color: var(--a-ink); }
.list .card p { margin: 2px 0 8px; font-size: 13px; color: var(--a-mute); }
.list .card .ft { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.list .card .ft b { font-weight: 600; white-space: nowrap; }
.list .card.hl { border-color: var(--a-green) !important; box-shadow: 0 0 0 1px var(--a-green) !important; }
.list .card .fav { position: absolute; right: 8px; top: 8px; }
.list .card .eye, .list .card .chips, .list .card .facts { display: none !important; }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--a-mute); white-space: nowrap; }
.st .dot { width: 8px; height: 8px; border-radius: 50%; background: #2FA968; display: inline-block; }
.st .dot.reserved, .st .dot.res { background: #E0A63A; } .st .dot.sold { background: #D8483B; }
/* the villa page: over the whole app */
#detail.detail { position: fixed !important; inset: 0 !important; z-index: 60; background: #fff; overflow-y: auto; display: none; padding: 0 !important; }
#detail.detail.on { display: block; }
body.vpage .tabbar { display: none !important; }
#detail .vbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 40px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--a-line); }
#detail .back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: 500 14px "Poppins"; color: var(--a-ink); cursor: pointer; padding: 6px 0; }
#detail .back svg { width: 18px; height: 18px; }
#detail .vbrand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--a-ink); }
#detail .vbrand img { width: 32px; } #detail .vbrand b { font: 400 17px "Marcellus", serif; }
#detail .vacts { display: flex; gap: 8px; }
#detail .vbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--a-line); border-radius: 999px; background: #fff; padding: 8px 14px; font: 400 13.5px "Poppins"; color: var(--a-ink); cursor: pointer; text-decoration: none; }
#detail .vbtn svg { width: 15px; height: 15px; }
#detail .vhero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 36px; padding: 28px 40px 36px; max-width: 1500px; margin: 0 auto; }
#detail .vshot { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; background: #EEE; }
#detail .vshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
#detail .vlbl { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; border: 0; background: rgba(255,255,255,.96); border-radius: 999px; padding: 9px 15px; font: 500 13.5px "Poppins"; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
#detail .vlbl svg { width: 16px; height: 16px; }
#detail h1 { margin: 6px 0 2px; font: 600 40px/1.1 "Poppins", sans-serif; color: var(--a-ink); }
#detail .vsub { margin: 0; color: var(--a-mute); font-size: 15px; }
#detail .vspecs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; border-top: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line); padding: 16px 0; margin: 20px 0; }
#detail .vspecs div { font-size: 13px; color: var(--a-mute); } #detail .vspecs b { display: block; font-size: 22px; color: var(--a-ink); font-weight: 600; }
#detail .vprice { font-size: 28px; font-weight: 600; margin: 4px 0 18px; color: var(--a-ink); }
#detail .vcta { display: block; width: 100%; border: 0; border-radius: 12px; background: var(--a-dark); color: #fff; padding: 16px; font: 600 16px "Poppins"; cursor: pointer; text-align: center; }
#detail .vcta[disabled] { background: #C9C6C0; cursor: default; }
#detail .vcta2 { display: flex; gap: 10px; margin-top: 10px; } #detail .vcta2 .vbtn { flex: 1; justify-content: center; border-radius: 12px; padding: 12px; }
#detail .form { margin-top: 14px; }
#detail .vsec { padding: 34px 40px; border-top: 1px solid var(--a-line); max-width: 1500px; margin: 0 auto; }
#detail .vsec h2 { margin: 0 0 4px; font: 600 24px "Poppins"; color: var(--a-ink); } #detail .vsec > p { margin: 0 0 18px; color: var(--a-mute); }
#detail .vplan { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 36px; align-items: center; }
#detail .vpi { background: #F7F6F4; border-radius: 14px; padding: 26px; } #detail .vpi img { width: 100%; display: block; }
#detail .vrooms div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--a-line); font-size: 15px; } #detail .vrooms span { color: var(--a-mute); }
#detail .vtwo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#detail .vtile { position: relative; border: 0; padding: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16/8; cursor: pointer; background: #EEE; }
#detail .vtile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
#detail .vtile:hover img { transform: scale(1.02); }
#detail .vtile span { position: absolute; left: 16px; bottom: 16px; background: #fff; border-radius: 999px; padding: 8px 15px; font: 500 14px "Poppins"; color: var(--a-ink); }
#detail .vtile i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; font: 600 13px "Poppins"; font-style: normal; color: var(--a-ink); }
#detail .vsim { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
#detail .vsim .card { border: 1px solid var(--a-line); border-radius: 12px; overflow: hidden; background: #fff; padding: 0; text-align: left; cursor: pointer; }
#detail .vsim .img.shot { aspect-ratio: 4/3; } #detail .vsim .img.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
#detail .vsim .tx { padding: 10px 12px 12px; } #detail .vsim h4 { margin: 0; font: 600 15px "Poppins"; color: var(--a-ink); }
#detail .vsim p { margin: 2px 0 8px; font-size: 13px; color: var(--a-mute); } #detail .vsim .ft { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
#detail .vband { max-width: 1420px; margin: 0 auto 40px; border-radius: 16px; background: #F3F6F2; padding: 26px 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
#detail .vband b { display: block; font-size: 20px; color: var(--a-ink); } #detail .vband span { color: var(--a-mute); } #detail .vband .vcta { width: auto; padding: 14px 26px; }
#detail .vsticky { display: none; }
#panoOv { position: fixed; inset: 0; z-index: 80; background: #000; display: none; } #panoOv.on { display: block; }
#panoBox { position: absolute; inset: 0; } #panoOv .pclose { position: absolute; top: 16px; right: 16px; z-index: 2; border: 0; border-radius: 999px; padding: 10px 18px; background: #fff; font: 500 14px "Poppins"; cursor: pointer; }
@media (max-width: 900px) {
  .pills { padding: 6px 16px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  #detail .vbar { padding: 10px 14px; } #detail .vbrand { display: none; } #detail .back span { display: none; } #detail .back::after { content: "Resort"; }
  #detail .vhero { grid-template-columns: 1fr; padding: 0 0 18px; gap: 16px; }
  #detail .vshot { border-radius: 0; } #detail .vinfo { padding: 0 18px; }
  #detail h1 { font-size: 30px; } #detail .vspecs b { font-size: 18px; } #detail .vprice { font-size: 24px; }
  #detail .vsec { padding: 24px 18px; } #detail .vplan, #detail .vtwo { grid-template-columns: 1fr; gap: 14px; } #detail .vsim { grid-template-columns: 1fr 1fr; gap: 10px; }
  #detail .vband { display: none; }
  #detail .vsticky { display: flex; position: sticky; bottom: 0; z-index: 3; background: #fff; border-top: 1px solid var(--a-line); padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); gap: 12px; align-items: center; }
  #detail .vsticky small { display: block; font-size: 12px; color: var(--a-mute); } #detail .vsticky b { font-size: 16px; color: var(--a-ink); }
  #detail .vsticky .vcta { flex: 1; padding: 14px; }
}
/* fixes 2026-10-19: grid rows collapsed to 8 px on the computer (overflow-hidden cards had no min height); the status
   text wraps under the price on narrow cards; no gold rule under the villa name */
.list { grid-auto-rows: max-content !important; }
.list .card { min-height: min-content; height: auto !important; flex-shrink: 0; }
.list .card .ft { flex-wrap: wrap; row-gap: 2px; }
#detail h1::after, #detail h1::before { content: none !important; display: none !important; }
/* tall apartment plans (2026-10-20): never taller than the view */
#detail .vpi { display: grid; place-items: center; } #detail .vpi img { width: auto; max-width: 100%; max-height: 70vh; }
/* Island → Walking map fly-in (2026-10-20) */
.flyov { position: absolute; inset: 0; overflow: hidden; z-index: 4; background: #cfdcec; cursor: pointer; transition: opacity .5s ease; }
.flyov img { position: absolute; left: 0; top: 0; width: 2400px; height: 1600px; transform-origin: 0 0; will-change: transform; }
.flyov.out { opacity: 0; pointer-events: none; }
/* 2026-10-20: the list toggle clearly visible (dark green tab, white arrow) */
.toggle-panel, :root[data-theme="f"] .toggle-panel { background: #123B2A !important; color: #fff !important; width: 30px !important; height: 64px !important;
  border-radius: 0 12px 12px 0 !important; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.toggle-panel svg { width: 18px !important; height: 18px !important; stroke-width: 2.4; }
.toggle-panel:hover { background: #1F7A4D !important; }
/* 2026-10-20 (Máté, 3DEstate screenshot): each villa clearly coloured by status, a strong fill and a thick, bright line;
   green available, amber reserved, red sold; the row blocks on the resort view stay light so the picture shows */
#v3d .u-poly.all.free, #v3d .u-poly.all.avail { fill: rgba(46,184,99,.40) !important; stroke: #2EB863 !important; stroke-width: 3px !important; }
#v3d .u-poly.all.res  { fill: rgba(240,165,40,.45) !important; stroke: #F0A528 !important; stroke-width: 3px !important; }
#v3d .u-poly.all.sold { fill: rgba(222,60,52,.45) !important; stroke: #E5463A !important; stroke-width: 3px !important; }
#v3d .u-poly.all.hot  { fill: rgba(46,184,99,.62) !important; stroke: #7CF0A8 !important; stroke-width: 4px !important; }
#v3d .u-poly.all.res.hot { fill: rgba(240,165,40,.65) !important; stroke: #FFD27A !important; }
#v3d .u-poly.all.sold.hot { fill: rgba(222,60,52,.62) !important; stroke: #FF8A80 !important; }
#v3d .u-poly.row.all, #v3d .u-poly.condo.all { fill: rgba(46,184,99,.10) !important; stroke: #2EB863 !important; stroke-width: 3px !important; }
#v3d .u-poly.row.all.hot, #v3d .u-poly.condo.all.hot { fill: rgba(46,184,99,.42) !important; stroke: #7CF0A8 !important; stroke-width: 4px !important; }
/* 2026-10-20 (Máté: the dark green tab melts into the green picture): a large white tab with a dark arrow and a clear
   shadow, it stands out against grass, roofs and sky */
.toggle-panel, :root[data-theme="f"] .toggle-panel { background: #fff !important; color: #123B2A !important; width: 34px !important; height: 76px !important;
  border-radius: 0 14px 14px 0 !important; box-shadow: 0 3px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.08) !important; }
.toggle-panel svg { width: 22px !important; height: 22px !important; stroke-width: 2.8 !important; }
.toggle-panel:hover { background: #F2F1EE !important; }

/* the intro (2026-10-20): the CRM presentation's opening slide, no video */
.intro { background: #14332A !important; display: flex; align-items: center; justify-content: center; }
.intro[hidden] { display: none !important; }
.intro video { display: none; }
.intro-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 4vh, 44px); }
.intro-glow { position: absolute; top: 50%; left: 50%; width: min(820px, 120vw); height: min(820px, 120vw); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(241,199,126,.20), rgba(241,199,126,0) 62%); transform: translate(-50%,-56%); animation: introBreathe 6s ease-in-out infinite; }
.intro-mark { position: relative; width: min(420px, 64vw); height: auto; opacity: 0; clip-path: inset(100% 0 0 0); animation: introFill 1.5s cubic-bezier(.16,.84,.34,1) .25s forwards; }
.intro-line { width: 0; height: 3px; border-radius: 2px; background: #f1c77e; opacity: .85; animation: introDraw 1s cubic-bezier(.16,.84,.34,1) 1.15s forwards; }
.intro-cap { position: absolute; left: 0; right: 0; bottom: clamp(28px, 7vh, 64px); margin: 0; text-align: center; font: 400 clamp(13px, 1.4vw, 18px) "Poppins", system-ui, sans-serif;
  letter-spacing: .28em; text-transform: uppercase; color: #8FAE9E; opacity: 0; animation: introFade .8s ease 1.6s forwards; }
@keyframes introFill { 60% { opacity: 1 } to { clip-path: inset(0 0 0 0); opacity: 1 } }
@keyframes introDraw { to { width: min(280px, 44vw) } }
@keyframes introFade { to { opacity: 1 } }
@keyframes introBreathe { 0%,100% { opacity: .5; transform: translate(-50%,-56%) scale(1) } 50% { opacity: 1; transform: translate(-50%,-56%) scale(1.07) } }
@media (prefers-reduced-motion: reduce) { .intro-mark, .intro-line, .intro-cap { animation-duration: .01s !important; animation-delay: 0s !important; } .intro-glow { animation: none; } }

/* a phone on its side (Máté 2026-10-20: "fektetve szinte semmit nem látni"): the picture gets the whole screen, the tab
   bar becomes a thin rail on the left, the row bar, arrows and switches shrink to the corners; app.js land() tests the same */
@media (max-height: 500px) and (orientation: landscape) {
  :root[data-theme="f"] .app { flex-direction: row; height: 100dvh; min-height: 0; overflow: hidden;
    padding: 0 0 0 calc(64px + env(safe-area-inset-left)); }
  :root[data-theme="f"] .tabbar { display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; right: auto; z-index: 20;
    width: calc(64px + env(safe-area-inset-left)); padding: 0 0 0 env(safe-area-inset-left); background: #fff; border-right: 1px solid rgba(34,36,38,.1); border-top: 0; }
  :root[data-theme="f"] .tabbar button { flex: 1; border: 0; background: #fff; color: #1B1613; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; padding: 0; font-size: 10.5px; }
  :root[data-theme="f"] .tabbar svg { width: 20px; height: 20px; }
  :root[data-theme="f"] .tabbar button.on { background: #001f16; color: #fff; }
  :root[data-theme="f"] .stage { flex: 1; height: 100dvh; position: relative; display: block; }
  :root[data-theme="f"] .panel { display: none; width: 100%; height: 100dvh; overflow-y: auto; }
  :root[data-theme="f"] body[data-tab="filters"] .panel { display: flex; }
  :root[data-theme="f"] body[data-tab="filters"] .stage { display: none; }
  :root[data-theme="f"] .switch, .toggle-panel, .hint { display: none !important; }
  .groups { top: 8px; left: 8px; right: auto; max-width: calc(100% - 16px); overflow-x: auto; overflow-y: hidden; padding: 3px; }
  .groups button { padding: 6px 11px; font-size: 13px; }
  :root[data-theme="f"] .arrows { bottom: 8px; padding: 4px 6px; }
  :root[data-theme="f"] .arrows button { width: 38px; height: 32px; }
  :root[data-theme="f"] .outline-toggle { bottom: 8px; right: 8px; padding: 6px 8px; }
  :root[data-theme="f"] .foot-note { left: 8px; right: auto; bottom: 10px; font-size: 10px; padding: 2px 6px; max-width: 30%; }
  .locsw { top: 8px; left: 8px; } .locsw button { padding: 6px 12px; font-size: 13px; }
  #v2d { padding: 56px 14px 20px; }
  .row-tag { padding: 4px 8px; font-size: 12px; gap: 6px; border-radius: 7px; }
}

/* 2026-10-20: the meridian film again (5 s cut), full-bleed on its own near-black green */
.intro { background: #000 !important; }
.intro video { display: block !important; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }