{"id":6758,"date":"2026-03-25T08:18:09","date_gmt":"2026-03-25T05:18:09","guid":{"rendered":"https:\/\/www.obadifferentbyluxury.ro\/?page_id=6758"},"modified":"2026-03-28T15:25:35","modified_gmt":"2026-03-28T12:25:35","slug":"selectie-finisaje-o-b-a-different-by-luxury","status":"publish","type":"page","link":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/selectie-finisaje-o-b-a-different-by-luxury\/","title":{"rendered":"SELEC\u021aIE FINISAJE – O.B.A DIFFERENT BY LUXURY"},"content":{"rendered":"\n\n\n\n\n\nSelec\u021bie finisaje \u2013 O.B.A. Different by Luxury<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n*,\n*::before,\n*::after{\n box-sizing:border-box;\n margin:0;\n padding:0;\n}\n\n:root{\n --oba-black:#181818;\n --oba-gold:#967a42;\n --oba-gold-light:#d1aa56;\n --oba-cream:#f0efec;\n --oba-brown:#6d624c;\n --oba-muted:#84817c;\n --white:#ffffff;\n --danger:#b43e34;\n --success:#2d7d56;\n --line:rgba(24,24,24,.07);\n --line-strong:rgba(24,24,24,.14);\n --glass:rgba(255,255,255,.76);\n --glass-strong:rgba(255,255,255,.88);\n --shadow-xl:0 30px 80px rgba(0,0,0,.08);\n --shadow-lg:0 18px 40px rgba(0,0,0,.06);\n --shadow-md:0 10px 26px rgba(0,0,0,.045);\n --radius-xl:16px;\n --radius-lg:14px;\n --radius-md:12px;\n --radius-sm:10px;\n --ff:'Inter', Arial, sans-serif;\n}\n\nhtml{ scroll-behavior:smooth; }\n\nbody{\n font-family:var(--ff);\n min-height:100vh;\n color:var(--oba-black);\n background:\n radial-gradient(circle at top left, rgba(209,170,86,.05), transparent 24%),\n radial-gradient(circle at top right, rgba(150,122,66,.04), transparent 18%),\n linear-gradient(180deg, #f7f6f3 0%, #efeae2 100%);\n -webkit-font-smoothing:antialiased;\n}\n\nbody::before{\n content:\"\";\n position:fixed;\n inset:0;\n pointer-events:none;\n background:\n linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,0)),\n repeating-linear-gradient(\n 90deg,\n transparent 0,\n transparent calc(25% - 1px),\n rgba(24,24,24,.012) calc(25% - 1px),\n rgba(24,24,24,.012) 25%\n );\n opacity:.22;\n}\n\n\/* Drawer open \u2014 lock scroll *\/\nbody.drawer-open{ overflow:hidden; }\n\n.app{\n position:relative;\n z-index:1;\n width:100%;\n max-width:100%;\n padding:20px;\n}\n\n.shell{\n width:100%;\n max-width:100%;\n margin:0 auto;\n}\n\n.layout{\n display:grid;\n grid-template-columns:minmax(0,1fr) 430px;\n gap:22px;\n align-items:start;\n width:100%;\n}\n\n\/* \u2500\u2500 STAGES \u2500\u2500 *\/\n.stage{ display:none; }\n.stage.active{\n display:block;\n animation:stageIn .42s cubic-bezier(.22,.8,.22,1);\n}\n\n@keyframes stageIn{\n from{ opacity:0; transform:translateY(14px) scale(.992); filter:blur(4px); }\n to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }\n}\n\n\/* \u2500\u2500 CARD \u2500\u2500 *\/\n.card{\n width:100%;\n background:var(--glass);\n border:1px solid var(--glass-strong);\n border-radius:var(--radius-xl);\n box-shadow:var(--shadow-xl);\n overflow:hidden;\n backdrop-filter:blur(20px);\n}\n\n.card-head{\n display:flex;\n align-items:flex-start;\n gap:14px;\n padding:24px 24px 20px;\n border-bottom:1px solid var(--line);\n background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.48));\n position:relative; \/* for the drawer trigger button *\/\n}\n\n.card-icon{\n width:48px; height:48px; flex:0 0 48px;\n border-radius:14px;\n background:linear-gradient(135deg, #1b1b1b 0%, #2c2823 100%);\n box-shadow:0 10px 26px rgba(24,24,24,.12);\n display:flex; align-items:center; justify-content:center;\n}\n.card-icon svg{ width:21px; height:21px; stroke:var(--oba-gold-light); stroke-width:1.9; fill:none; }\n\n.card-copy{ flex:1; min-width:0; }\n.card-step{ color:var(--oba-gold); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px; }\n.card-title{ color:var(--oba-black); font-size:clamp(22px,2.15vw,30px); line-height:1.04; font-weight:900; letter-spacing:-.03em; }\n.card-subtitle{ margin-top:9px; color:var(--oba-muted); font-size:14px; line-height:1.7; max-width:860px; }\n\n.card-body{ padding:24px; }\n\n\/* \u2500\u2500 MOBILE DRAWER TRIGGER (only visible on mobile) \u2500\u2500 *\/\n.drawer-trigger{\n display:none; \/* shown in @media *\/\n position:absolute;\n top:50%;\n right:20px;\n transform:translateY(-50%);\n width:42px; height:42px;\n border:none;\n border-radius:12px;\n background:linear-gradient(135deg, #1b1b1b 0%, #2c2823 100%);\n box-shadow:0 8px 18px rgba(24,24,24,.18);\n cursor:pointer;\n align-items:center;\n justify-content:center;\n flex-direction:column;\n gap:3px;\n padding:0;\n transition:transform .18s ease, box-shadow .18s ease;\n z-index:10;\n}\n.drawer-trigger:hover{ transform:translateY(-50%) scale(1.06); box-shadow:0 12px 24px rgba(24,24,24,.22); }\n.drawer-trigger svg{ width:17px; height:17px; stroke:var(--oba-gold-light); stroke-width:2.1; fill:none; }\n\n\/* progress pill inside card-head on mobile *\/\n.mobile-progress-pill{\n display:none;\n}\n\n\/* \u2500\u2500 FIELDS \u2500\u2500 *\/\n.fields-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }\n.fields-grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }\n.field{ display:flex; flex-direction:column; gap:8px; }\n.field.full{ grid-column:1 \/ -1; }\n\n.label{ color:var(--oba-muted); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }\n.label .req{ color:var(--oba-gold); }\n\n.input{\n width:100%; height:58px;\n border-radius:14px;\n border:1px solid rgba(24,24,24,.08);\n background:rgba(255,255,255,.95);\n color:var(--oba-black);\n padding:0 16px;\n outline:none;\n font-family:var(--ff);\n font-size:16px; font-weight:600;\n transition:.2s ease;\n box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 0 rgba(255,255,255,.4);\n}\n.input:focus{\n border-color:rgba(150,122,66,.68);\n box-shadow: 0 0 0 4px rgba(150,122,66,.08), inset 0 1px 0 rgba(255,255,255,.85);\n}\n.input.error{ border-color:var(--danger); box-shadow:none; }\n\n.error{\n display:block; min-height:18px;\n color:var(--danger); font-size:12px; font-weight:700; line-height:1.5;\n visibility:hidden; opacity:0; transition:opacity .18s ease;\n}\n.error.show{ visibility:visible; opacity:1; }\n.choice-error{ margin-top:14px; min-height:18px; }\n\n\/* \u2500\u2500 PROJECT CARDS \u2500\u2500 *\/\n.project-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }\n\n.project-option{ position:relative; display:block; cursor:pointer; }\n.project-option input{ position:absolute; opacity:0; pointer-events:none; }\n\n.project-card{\n position:relative; min-height:355px;\n border-radius:16px; overflow:hidden;\n background:#fff;\n border:1px solid rgba(24,24,24,.08);\n box-shadow:var(--shadow-md);\n transition:.28s cubic-bezier(.22,.8,.22,1);\n}\n.project-card:hover{ transform:translateY(-4px); border-color:rgba(150,122,66,.30); box-shadow:0 20px 36px rgba(0,0,0,.07); }\n.project-option input:checked + .project-card{\n transform:translateY(-3px);\n border-color:rgba(150,122,66,.98);\n box-shadow: 0 0 0 1px rgba(150,122,66,.14), 0 22px 38px rgba(150,122,66,.14);\n}\n\n.project-media{\n position:relative; height:210px;\n background:#ddd center\/cover no-repeat;\n}\n.project-media.placeholder{\n background:linear-gradient(135deg, rgba(24,24,24,.94), rgba(109,98,76,.82));\n display:flex; align-items:center; justify-content:center;\n}\n.project-media.placeholder span{ color:rgba(255,255,255,.80); font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }\n.project-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,24,24,.06) 0%, rgba(24,24,24,.18) 54%, rgba(24,24,24,.58) 100%); }\n\n.project-check{\n position:absolute; top:12px; right:12px;\n width:34px; height:34px; border-radius:999px;\n background:rgba(255,255,255,.92); color:var(--oba-gold);\n display:flex; align-items:center; justify-content:center;\n opacity:0; transform:scale(.82);\n transition:.22s cubic-bezier(.22,.8,.22,1);\n box-shadow:0 10px 20px rgba(0,0,0,.12);\n}\n.project-option input:checked + .project-card .project-check{ opacity:1; transform:scale(1); }\n.project-check svg{ width:16px; height:16px; stroke:var(--oba-gold); stroke-width:2.4; fill:none; }\n\n.project-copy{ padding:18px 16px 20px; display:flex; flex-direction:column; gap:8px; }\n.project-title{ color:var(--oba-black); font-size:16px; line-height:1.18; font-weight:800; letter-spacing:-.02em; }\n.project-location{ color:var(--oba-gold); font-size:12px; line-height:1.55; font-weight:700; }\n.project-sub{ color:var(--oba-muted); font-size:13px; line-height:1.62; }\n.apartment-box{ margin-top:18px; padding-top:18px; border-top:1px solid rgba(24,24,24,.07); }\n\n\/* \u2500\u2500 OPTION CARDS \u2500\u2500 *\/\n.options-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 340px)); justify-content:center; gap:18px; }\n\n.option{ position:relative; display:block; cursor:pointer; }\n.option input{ position:absolute; opacity:0; pointer-events:none; }\n\n.option-card{\n min-height:440px; display:flex; flex-direction:column;\n background:rgba(255,255,255,.98);\n border:1px solid rgba(24,24,24,.075);\n border-radius:16px; overflow:hidden;\n transition:.24s cubic-bezier(.22,.8,.22,1);\n box-shadow:var(--shadow-md);\n}\n.option:hover .option-card{ transform:translateY(-3px); border-color:rgba(150,122,66,.28); box-shadow:0 18px 30px rgba(0,0,0,.06); }\n.option input:checked + .option-card{\n border-color:rgba(150,122,66,.95);\n box-shadow: 0 0 0 1px rgba(150,122,66,.13), 0 20px 34px rgba(150,122,66,.10);\n transform:translateY(-2px);\n background:linear-gradient(180deg, #fffdf9 0%, #ffffff 100%);\n}\n\n.option-media{\n position:relative; height:280px;\n border-bottom:1px solid var(--line);\n display:flex; align-items:center; justify-content:center;\n background:linear-gradient(135deg, rgba(150,122,66,.10), rgba(240,239,236,.97));\n background-position:center; background-size:cover; background-repeat:no-repeat;\n}\n.option-media::before{\n content:\"SPA\u021aIU FOTO\";\n width:108px; height:76px;\n display:flex; align-items:center; justify-content:center;\n border-radius:12px; border:1px dashed rgba(24,24,24,.16);\n background:rgba(255,255,255,.46);\n color:rgba(24,24,24,.34); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; text-align:center; padding:8px;\n}\n.option-media.has-image::before{ display:none; }\n.option-media.has-image::after{ content:\"\"; position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,24,24,.02) 0%, rgba(24,24,24,.16) 100%); }\n\n.option-badge{\n position:absolute; top:12px; left:12px;\n height:28px; padding:0 11px;\n display:inline-flex; align-items:center; justify-content:center;\n border-radius:999px; background:rgba(24,24,24,.84);\n color:#fff; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; z-index:2;\n}\n.option-check{\n position:absolute; top:12px; right:12px;\n width:34px; height:34px; border-radius:999px;\n background:rgba(255,255,255,.94); box-shadow:0 10px 22px rgba(0,0,0,.12);\n display:flex; align-items:center; justify-content:center;\n opacity:0; transform:scale(.8);\n transition:.22s cubic-bezier(.22,.8,.22,1); z-index:2;\n}\n.option input:checked + .option-card .option-check{ opacity:1; transform:scale(1); }\n.option-check svg{ width:15px; height:15px; stroke:var(--oba-gold); stroke-width:2.5; fill:none; }\n\n.option-copy{ padding:18px 16px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }\n.option-title{ color:var(--oba-black); font-size:19px; line-height:1.08; font-weight:800; letter-spacing:-.02em; }\n.option-text{ color:var(--oba-muted); font-size:14px; line-height:1.68; }\n\n\/* \u2500\u2500 CONSENT \u2500\u2500 *\/\n.consent-wrap{\n border:1px solid rgba(150,122,66,.14);\n background:linear-gradient(135deg, rgba(209,170,86,.055), rgba(255,255,255,.96));\n border-radius:16px; padding:18px;\n}\n.consent{ display:flex; align-items:flex-start; gap:14px; cursor:pointer; }\n.consent input{ width:21px; height:21px; flex:0 0 21px; margin-top:2px; accent-color:var(--oba-gold); }\n.consent-title{ color:var(--oba-black); font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; }\n.consent-text{ color:var(--oba-muted); font-size:15px; line-height:1.68; }\n\n\/* \u2500\u2500 DESKTOP SUMMARY \u2500\u2500 *\/\n.summary{\n position:sticky; top:18px;\n width:100%; max-width:100%;\n background:rgba(255,255,255,.80);\n border:1px solid rgba(255,255,255,.88);\n border-radius:16px; overflow:hidden;\n box-shadow:var(--shadow-xl);\n backdrop-filter:blur(22px);\n}\n.summary-head{\n padding:18px; border-bottom:1px solid rgba(24,24,24,.07);\n background:linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.50));\n}\n.summary-stepbox{\n background:linear-gradient(135deg, rgba(24,24,24,.99) 0%, rgba(43,38,32,.98) 100%);\n border-radius:16px; padding:18px 18px 16px;\n box-shadow:0 18px 30px rgba(24,24,24,.15);\n position:relative; overflow:hidden;\n}\n.summary-stepbox::after{\n content:\"\"; position:absolute; left:0; bottom:0; width:100%; height:4px;\n background:linear-gradient(90deg, var(--oba-gold) 0%, var(--oba-gold-light) 100%);\n}\n.summary-step-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }\n.summary-step-left{ min-width:0; }\n.summary-step-kicker{ color:rgba(255,255,255,.54); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px; }\n.summary-step-title{ color:#fff; font-size:23px; line-height:1.05; font-weight:900; letter-spacing:-.03em; }\n.summary-step-chip{\n min-width:98px; height:34px; padding:0 12px;\n border-radius:999px;\n display:inline-flex; align-items:center; justify-content:center;\n border:1px solid rgba(209,170,86,.25); background:rgba(209,170,86,.12);\n color:var(--oba-gold-light); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;\n}\n.summary-progress{ width:100%; height:7px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; margin-top:16px; }\n.summary-progress-bar{ width:16.66%; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--oba-gold) 0%, var(--oba-gold-light) 100%); transition:width .24s ease; }\n\n.summary-body{ padding:6px 18px 18px; display:flex; flex-direction:column; gap:0; }\n.summary-row{\n display:flex; align-items:flex-start; justify-content:space-between; gap:14px;\n padding:16px 0; border-bottom:1px solid rgba(24,24,24,.07);\n}\n.summary-row:last-child{ border-bottom:none; }\n.summary-key{ color:rgba(24,24,24,.42); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; flex-shrink:0; }\n.summary-val{ text-align:right; color:var(--oba-black); font-size:14px; line-height:1.58; font-weight:700; transition:.16s ease; max-width:72%; }\n.summary-val.pending{ color:rgba(24,24,24,.34); font-weight:400; font-style:italic; }\n\n.summary-foot{ padding:0 18px 18px; }\n.summary-status{\n min-height:52px; border-radius:14px;\n border:1px solid rgba(24,24,24,.07); background:rgba(24,24,24,.025);\n display:flex; align-items:center; justify-content:center; text-align:center; padding:12px 14px;\n color:rgba(24,24,24,.58); font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;\n}\n.summary-status.ok{ color:var(--oba-gold); border-color:rgba(209,170,86,.17); background:rgba(209,170,86,.075); }\n\n\/* \u2500\u2500 NAV + BUTTONS \u2500\u2500 *\/\n.nav{\n display:flex; align-items:center; justify-content:space-between; gap:16px;\n flex-wrap:wrap; margin-top:22px;\n}\n.nav-left, .nav-right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }\n\n.btn{\n min-width:164px; height:54px; padding:0 20px;\n border:none; border-radius:14px;\n display:inline-flex; align-items:center; justify-content:center; gap:10px;\n font-family:var(--ff); font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;\n cursor:pointer;\n transition: transform .22s cubic-bezier(.22,.8,.22,1), box-shadow .22s cubic-bezier(.22,.8,.22,1), border-color .22s ease, background .22s ease;\n position:relative; overflow:hidden;\n}\n.btn::before{\n content:\"\"; position:absolute; inset:0;\n background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);\n transform:translateX(-120%); transition:transform .55s ease;\n}\n.btn:hover::before{ transform:translateX(120%); }\n.btn svg{ width:16px; height:16px; stroke-width:2.3; fill:none; transition:transform .22s ease; }\n\n.btn-primary{\n color:#fff;\n background:linear-gradient(135deg, var(--oba-gold) 0%, var(--oba-gold-light) 100%);\n box-shadow:0 14px 28px rgba(150,122,66,.14);\n}\n.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 34px rgba(150,122,66,.18); }\n.btn-primary:hover svg{ transform:translateX(3px); }\n\n.btn-secondary{\n color:var(--oba-black); background:rgba(255,255,255,.95);\n border:1px solid rgba(24,24,24,.08); box-shadow:0 8px 18px rgba(0,0,0,.03);\n}\n.btn-secondary:hover{ transform:translateY(-2px); border-color:rgba(24,24,24,.16); }\n.btn-secondary:hover svg{ transform:translateX(-3px); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SIDE DRAWER (mobile only \u2014 hidden on desktop)\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.drawer-backdrop{\n display:none;\n position:fixed; inset:0; z-index:200;\n background:rgba(10,10,10,.42);\n backdrop-filter:blur(6px);\n -webkit-backdrop-filter:blur(6px);\n opacity:0; visibility:hidden;\n transition:opacity .28s ease, visibility .28s ease;\n}\n.drawer-backdrop.open{ opacity:1; visibility:visible; }\n\n.drawer{\n display:none;\n position:fixed; top:0; right:0; bottom:0;\n z-index:201;\n width:min(88vw, 340px);\n background:rgba(255,255,255,.97);\n box-shadow:-20px 0 60px rgba(0,0,0,.14);\n transform:translateX(100%);\n transition:transform .3s cubic-bezier(.22,.8,.22,1);\n overflow:hidden;\n flex-direction:column;\n border-left:1px solid rgba(255,255,255,.9);\n}\n.drawer.open{ transform:translateX(0); }\n\n\/* Drawer inner \u2014 scrollable *\/\n.drawer-inner{\n display:flex; flex-direction:column;\n height:100%; overflow-y:auto;\n overscroll-behavior:contain;\n}\n\n\/* Drawer handle strip at top *\/\n.drawer-header{\n display:flex; align-items:center; justify-content:space-between;\n padding:16px 18px 14px;\n border-bottom:1px solid rgba(24,24,24,.07);\n background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.80));\n flex-shrink:0;\n position:sticky; top:0; z-index:2;\n}\n.drawer-header-left{ display:flex; flex-direction:column; gap:2px; }\n.drawer-header-kicker{ color:rgba(24,24,24,.40); font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }\n.drawer-header-title{ color:var(--oba-black); font-size:18px; font-weight:900; letter-spacing:-.025em; line-height:1.1; }\n\n.drawer-close{\n width:36px; height:36px;\n border:none; border-radius:999px;\n background:rgba(24,24,24,.06);\n display:flex; align-items:center; justify-content:center;\n cursor:pointer; flex:0 0 36px;\n transition:background .18s ease, transform .18s ease;\n}\n.drawer-close:hover{ background:rgba(24,24,24,.12); transform:rotate(90deg); }\n.drawer-close svg{ width:15px; height:15px; stroke:var(--oba-black); stroke-width:2.4; fill:none; }\n\n\/* Drawer summary content *\/\n.drawer .summary{\n position:static; border:none; box-shadow:none;\n background:transparent; backdrop-filter:none;\n border-radius:0; flex:1;\n}\n.drawer .summary-head{\n padding:14px 18px; border-bottom:none;\n background:transparent;\n}\n.drawer .summary-stepbox{ border-radius:14px; padding:14px 16px; }\n.drawer .summary-body{ padding:0 18px 14px; }\n.drawer .summary-foot{ padding:0 18px 20px; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media (max-width:1280px){\n .project-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }\n}\n\n@media (max-width:1180px){\n .layout{ grid-template-columns:1fr; }\n .summary.desktop-summary{ display:none; }\n .fields-grid-3{ grid-template-columns:1fr; }\n}\n\n\/* \u2500\u2500 MOBILE \u2500\u2500 *\/\n@media (max-width:760px){\n .app{ padding:14px; } \/* no extra bottom padding \u2014 no fixed bar *\/\n\n .fields-grid,\n .project-grid{ grid-template-columns:1fr; }\n\n .options-grid{ grid-template-columns:1fr; justify-content:stretch; }\n\n .nav{ flex-direction:column; align-items:stretch; }\n .nav-left, .nav-right{ width:100%; }\n .nav-left .btn, .nav-right .btn{ width:100%; }\n\n .card-head,\n .card-body{ padding-left:16px; padding-right:16px; }\n\n \/* make room for the drawer trigger *\/\n .card-head{ padding-right:72px; }\n\n .project-card{ min-height:auto; }\n .project-media{ height:200px; }\n\n .option-card{ min-height:auto; }\n .option-media{ height:230px; }\n\n .card{ border-radius:18px; }\n\n \/* show drawer trigger *\/\n .drawer-trigger{\n display:flex;\n right:14px;\n }\n\n \/* show drawer + backdrop *\/\n .drawer-backdrop{ display:block; }\n .drawer{ display:flex; }\n\n \/* compact summary-step-chip on mobile *\/\n .drawer .summary-step-chip{ min-width:84px; font-size:10px; padding:0 10px; }\n\n \/* No bottom bar, no mobile sheet *\/\n .mobile-bottom-bar,\n .mobile-sheet-backdrop,\n .mobile-sheet{ display:none !important; }\n}\n\/* \u2500\u2500 PREVIEW STEP 7 \u2500\u2500 *\/\n.preview-box{\n border-radius:18px;\n overflow:hidden;\n background:#111;\n position:relative;\n margin-bottom:20px;\n box-shadow:0 20px 50px rgba(0,0,0,.12);\n aspect-ratio:16\/9;\n min-height:220px;\n}\n.preview-img-wrap{\n width:100%; height:100%;\n position:relative;\n}\n.preview-img{\n width:100%; height:100%;\n object-fit:cover;\n display:block;\n opacity:0;\n transition:opacity .45s cubic-bezier(.22,.8,.22,1);\n}\n.preview-img.loaded{ opacity:1; }\n\n.preview-no-sel{\n position:absolute; inset:0;\n display:flex; flex-direction:column;\n align-items:center; justify-content:center; gap:14px;\n color:rgba(150,122,66,.7);\n font-size:13px; font-weight:700; letter-spacing:.04em;\n text-align:center; padding:24px;\n background:linear-gradient(135deg, rgba(24,24,24,.96), rgba(43,38,32,.95));\n transition:opacity .3s ease;\n}\n.preview-no-sel.hidden{ opacity:0; pointer-events:none; }\n\n.preview-caption{\n padding:14px 18px 0;\n color:var(--oba-muted);\n font-size:13px; font-weight:700; letter-spacing:.06em;\n text-align:center; text-transform:uppercase;\n min-height:24px;\n transition:opacity .3s ease;\n background:transparent;\n}\n\n.preview-chips{\n display:flex; flex-wrap:wrap; gap:10px;\n justify-content:center;\n margin-bottom:24px;\n}\n.preview-chip{\n display:inline-flex; align-items:center; gap:8px;\n height:36px; padding:0 14px;\n border-radius:999px;\n background:rgba(255,255,255,.95);\n border:1px solid rgba(24,24,24,.08);\n box-shadow:0 4px 12px rgba(0,0,0,.04);\n font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;\n color:var(--oba-black);\n}\n.preview-chip-dot{\n width:10px; height:10px; border-radius:999px; flex:0 0 10px;\n}\n.preview-chip.gold .preview-chip-dot{ background:var(--oba-gold); }\n.preview-chip.dark .preview-chip-dot{ background:#2a2a2a; }\n.preview-chip.grey .preview-chip-dot{ background:#9a9a9a; }\n.preview-chip.brown .preview-chip-dot{ background:#8B6347; }\n<\/style>\n<\/head>\n<body>\n<div class=\"app\">\n <main class=\"shell\">\n <div class=\"layout\">\n\n <div class=\"stage-shell\">\n\n <!-- STEP 1 -->\n <section class=\"stage active\" data-step=\"1\">\n <div class=\"card\">\n <div class=\"card-head\">\n <div class=\"card-icon\">\n <svg viewBox=\"0 0 24 24\"><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M2.5 20a6.5 6.5 0 0 1 13 0\"\/><path d=\"M17 8h5\"\/><path d=\"M17 12h5\"\/><\/svg>\n <\/div>\n <div class=\"card-copy\">\n <div class=\"card-step\">Etapa 1 \/ 6<\/div>\n <h2 class=\"card-title\">Date de contact<\/h2>\n <p class=\"card-subtitle\">Introduce\u021bi numele complet, adresa de email \u0219i num\u0103rul de telefon asociate acestei \u00eenregistr\u0103ri.<\/p>\n <\/div>\n <button class=\"drawer-trigger\" id=\"drawerTrigger\" type=\"button\" aria-label=\"Deschide sumarul\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M5 7h14\"\/><path d=\"M5 12h14\"\/><path d=\"M5 17h10\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"card-body\">\n <div class=\"fields-grid-3\">\n <div class=\"field\">\n <label class=\"label\" for=\"fullName\">Nume complet <span class=\"req\">*<\/span><\/label>\n <input class=\"input\" type=\"text\" id=\"fullName\" placeholder=\"Ex: Bogdan Popescu\">\n <div class=\"error\" id=\"err_fullName\">Completa\u021bi numele complet.<\/div>\n <\/div>\n <div class=\"field\">\n <label class=\"label\" for=\"email\">Email <span class=\"req\">*<\/span><\/label>\n <input class=\"input\" type=\"email\" id=\"email\" placeholder=\"Ex: client@email.com\">\n <div class=\"error\" id=\"err_email\">Introduce\u021bi o adres\u0103 de email valid\u0103.<\/div>\n <\/div>\n <div class=\"field\">\n <label class=\"label\" for=\"phone\">Telefon <span class=\"req\">*<\/span><\/label>\n <input class=\"input\" type=\"tel\" id=\"phone\" placeholder=\"Ex: 07xx xxx xxx\">\n <div class=\"error\" id=\"err_phone\">Introduce\u021bi un num\u0103r de telefon valid.<\/div>\n <\/div>\n <\/div>\n <div class=\"nav\">\n <div class=\"nav-left\"><\/div>\n <div class=\"nav-right\">\n <button class=\"btn btn-primary next-btn\" data-next=\"2\">\n Continu\u0103\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- STEP 2 -->\n <section class=\"stage\" data-step=\"2\">\n <div class=\"card\">\n <div class=\"card-head\">\n <div class=\"card-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M3 10.5 12 3l9 7.5\"\/><path d=\"M5 9.5V21h14V9.5\"\/><path d=\"M9 21v-6h6v6\"\/><\/svg>\n <\/div>\n <div class=\"card-copy\">\n <div class=\"card-step\">Etapa 2 \/ 6<\/div>\n <h2 class=\"card-title\">Proiect \/ apartament<\/h2>\n <p class=\"card-subtitle\">Alege\u021bi proiectul din cardurile vizuale \u0219i completa\u021bi separat num\u0103rul apartamentului.<\/p>\n <\/div>\n <button class=\"drawer-trigger\" type=\"button\" aria-label=\"Deschide sumarul\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M5 7h14\"\/><path d=\"M5 12h14\"\/><path d=\"M5 17h10\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"card-body\">\n <div class=\"project-grid\">\n <label class=\"project-option\">\n <input type=\"radio\" name=\"projectSelect\" value=\"O.B.A. LUXURY PLUS\">\n <div class=\"project-card\">\n <div class=\"project-media\" style=\"background-image:url('https:\/\/i0.wp.com\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Apartamente-Mamaia-Nord-Proiect-OBA-Luxury-Plus.jpg?ssl=1');\"><div class=\"project-overlay\"><\/div><div class=\"project-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div><\/div>\n <div class=\"project-copy\">\n <div class=\"project-title\">O.B.A. Luxury Plus<\/div>\n <div class=\"project-location\">Strada Liviu Rebreanu 40, 900001 Constan\u021ba<\/div>\n <div class=\"project-sub\">Ansamblu premium amplasat \u00een Constan\u021ba, potrivit pentru un stil de locuire elegant, bine conectat urban \u0219i atent construit p\u00e2n\u0103 la detalii.<\/div>\n <\/div>\n <\/div>\n <\/label>\n <label class=\"project-option\">\n <input type=\"radio\" name=\"projectSelect\" value=\"O.B.A. TOWER\">\n <div class=\"project-card\">\n <div class=\"project-media\" style=\"background-image:url('https:\/\/i0.wp.com\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/OBA-Tower-apartamente-Mamaia-Nord.webp?ssl=1');\"><div class=\"project-overlay\"><\/div><div class=\"project-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div><\/div>\n <div class=\"project-copy\">\n <div class=\"project-title\">O.B.A. Tower<\/div>\n <div class=\"project-location\">Bulevardul Mamaia Nord 30, 900001 Mamaia-Sat<\/div>\n <div class=\"project-sub\">Proiect cu imagine contemporan\u0103, pozi\u021bionat aproape de mare, ideal pentru cei care caut\u0103 un apartament premium \u00eentr-o zon\u0103 cu poten\u021bial constant.<\/div>\n <\/div>\n <\/div>\n <\/label>\n <label class=\"project-option\">\n <input type=\"radio\" name=\"projectSelect\" value=\"O.B.A. RESIDENCE\">\n <div class=\"project-card\">\n <div class=\"project-media\" style=\"background-image:url('https:\/\/i0.wp.com\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Apartament-Mamaia-Nord-OBA-Urban-Residence.jpg?ssl=1');\"><div class=\"project-overlay\"><\/div><div class=\"project-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div><\/div>\n <div class=\"project-copy\">\n <div class=\"project-title\">O.B.A. Residence<\/div>\n <div class=\"project-location\">Strada C2 40, 905700 Mamaia-Sat<\/div>\n <div class=\"project-sub\">Ansamblu reziden\u021bial din Mamaia-Sat, cu pozi\u021bionare practic\u0103, compartiment\u0103ri bine g\u00e2ndite \u0219i orientare clar\u0103 spre confortul de zi cu zi.<\/div>\n <\/div>\n <\/div>\n <\/label>\n <label class=\"project-option\">\n <input type=\"radio\" name=\"projectSelect\" value=\"O.B.A. LAKE\">\n <div class=\"project-card\">\n <div class=\"project-media\" style=\"background-image:url('https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/O.B.A.-Lake-Apartamente-Mamaia-Nord.jpeg');\"><div class=\"project-overlay\"><\/div><div class=\"project-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div><\/div>\n <div class=\"project-copy\">\n <div class=\"project-title\">O.B.A. Lake<\/div>\n <div class=\"project-location\">Strada M17, 905701 Mamaia-Sat<\/div>\n <div class=\"project-sub\">Proiect finalizat, bine integrat \u00een zona Mamaia-Sat, apreciat pentru imaginea sa premium \u0219i pentru atmosfera reziden\u021bial\u0103 aerisit\u0103.<\/div>\n <\/div>\n <\/div>\n <\/label>\n <label class=\"project-option\">\n <input type=\"radio\" name=\"projectSelect\" value=\"O.B.A. URBAN RESIDENCE\">\n <div class=\"project-card\">\n <div class=\"project-media\" style=\"background-image:url('https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/OBA-RESIDENCE-Apartamente-Mamaia-Nord-.jpg.webp');\"><div class=\"project-overlay\"><\/div><div class=\"project-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div><\/div>\n <div class=\"project-copy\">\n <div class=\"project-title\">O.B.A. Urban Residence<\/div>\n <div class=\"project-location\">Strada T2 1A, 905701 Mamaia-Sat<\/div>\n <div class=\"project-sub\">Solu\u021bie reziden\u021bial\u0103 urban\u0103, cu acces bun, pozi\u021bionare eficient\u0103 \u0219i o structur\u0103 potrivit\u0103 pentru locuire modern\u0103 sau investi\u021bie.<\/div>\n <\/div>\n <\/div>\n <\/label>\n <label class=\"project-option\">\n <input type=\"radio\" name=\"projectSelect\" value=\"O.B.A. M14\">\n <div class=\"project-card\">\n <div class=\"project-media\" style=\"background-image:url('https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/OAI_7170.jpg');\"><div class=\"project-overlay\"><\/div><div class=\"project-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div><\/div>\n <div class=\"project-copy\">\n <div class=\"project-title\">O.B.A. M14<\/div>\n <div class=\"project-location\">Strada M14 29, 905701 Mamaia-Sat<\/div>\n <div class=\"project-sub\">Proiect finalizat din Mamaia-Sat, cu localizare clar\u0103 \u0219i imagine actualizat\u0103, integrat firesc \u00een portofoliul premium O.B.A.<\/div>\n <\/div>\n <\/div>\n <\/label>\n <\/div>\n <div class=\"error choice-error\" id=\"err_projectSelect\">Selecta\u021bi proiectul.<\/div>\n <div class=\"apartment-box\">\n <div class=\"field\">\n <label class=\"label\" for=\"apartmentNumber\">Nr. apartament <span class=\"req\">*<\/span><\/label>\n <input class=\"input\" type=\"text\" id=\"apartmentNumber\" placeholder=\"Ex: 15\">\n <div class=\"error\" id=\"err_apartmentNumber\">Completa\u021bi num\u0103rul apartamentului.<\/div>\n <\/div>\n <\/div>\n <div class=\"nav\">\n <div class=\"nav-left\">\n <button class=\"btn btn-secondary prev-btn\" data-prev=\"1\">\n <svg viewBox=\"0 0 24 24\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 5 5 12 12 19\"\/><\/svg>\n \u00cenapoi\n <\/button>\n <\/div>\n <div class=\"nav-right\">\n <button class=\"btn btn-primary next-btn\" data-next=\"3\">\n Continu\u0103\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- STEP 3 -->\n <section class=\"stage\" data-step=\"3\">\n <div class=\"card\">\n <div class=\"card-head\">\n <div class=\"card-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 8c0-2.2 1.8-4 4-4h8c2.2 0 4 1.8 4 4\"\/><path d=\"M4 16c0 2.2 1.8 4 4 4h8c2.2 0 4-1.8 4-4\"\/><path d=\"M12 4v16\"\/><\/svg>\n <\/div>\n <div class=\"card-copy\">\n <div class=\"card-step\">Etapa 3 \/ 7<\/div>\n <h2 class=\"card-title\">Tavan Barrisol<\/h2>\n <p class=\"card-subtitle\">Selecta\u021bi varianta dorit\u0103 pentru tavanul Barrisol.<\/p>\n <\/div>\n <button class=\"drawer-trigger\" type=\"button\" aria-label=\"Deschide sumarul\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M5 7h14\"\/><path d=\"M5 12h14\"\/><path d=\"M5 17h10\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"card-body\">\n <div class=\"options-grid\">\n <label class=\"option\">\n <input type=\"radio\" name=\"barrisol\" value=\"Alb lucios\">\n <div class=\"option-card\">\n <div class=\"option-media has-image\" style=\"background-image:url('https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Tavan-alb-lucios-parchet-GRI.jpg');\"><div class=\"option-badge\">Barrisol<\/div><div class=\"option-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div><\/div>\n <div class=\"option-copy\"><div class=\"option-title\">Alb lucios<\/div><div class=\"option-text\">Finisaj luminos \u0219i elegant, cu reflexie discret\u0103, ideal pentru spa\u021bii care trebuie s\u0103 par\u0103 mai deschise, mai curate \u0219i mai rafinate vizual.<\/div><\/div>\n <\/div>\n <\/label>\n <label class=\"option\">\n <input type=\"radio\" name=\"barrisol\" value=\"Negru lucios\">\n <div class=\"option-card\">\n <div class=\"option-media has-image\" style=\"background-image:url('https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Tavan-NEGRU-lucios-parchet-GRI.jpg');\"><div class=\"option-badge\">Barrisol<\/div><div class=\"option-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div><\/div>\n <div class=\"option-copy\"><div class=\"option-title\">Negru lucios<\/div><div class=\"option-text\">Variant\u0103 sofisticat\u0103, cu prezen\u021b\u0103 puternic\u0103 \u0219i expresie contemporan\u0103, potrivit\u0103 pentru interioare cu accent premium \u0219i personalitate clar\u0103.<\/div><\/div>\n <\/div>\n <\/label>\n <label class=\"option\">\n <input type=\"radio\" name=\"barrisol\" value=\"Alb mat\">\n <div class=\"option-card\">\n <div class=\"option-media has-image\" style=\"background-image:url('https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Tavan-alb-lucios-parchet-GRI.jpg');\"><div class=\"option-badge\">Barrisol<\/div><div class=\"option-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div><\/div>\n <div class=\"option-copy\"><div class=\"option-title\">Alb mat<\/div><div class=\"option-text\">Finisaj discret, calm \u0219i echilibrat, recomandat pentru un ambient aerisit, cu lumin\u0103 bine distribuit\u0103 \u0219i o estetic\u0103 elegant\u0103 f\u0103r\u0103 exces.<\/div><\/div>\n <\/div>\n <\/label>\n <label class=\"option\">\n <input type=\"radio\" name=\"barrisol\" value=\"Negru mat\">\n <div class=\"option-card\">\n <div class=\"option-media has-image\" style=\"background-image:url('https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Tavan-NEGRU-MAT-parchet-GRI.jpg');\"><div class=\"option-badge\">Barrisol<\/div><div class=\"option-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div><\/div>\n <div class=\"option-copy\"><div class=\"option-title\">Negru mat<\/div><div class=\"option-text\">Solu\u021bie sobr\u0103 \u0219i elegant\u0103, cu impact arhitectural clar, potrivit\u0103 pentru interioare moderne \u00een care finisajele trebuie s\u0103 transmit\u0103 for\u021b\u0103 \u0219i rafinament.<\/div><\/div>\n <\/div>\n <\/label>\n <\/div>\n <div class=\"error choice-error\" id=\"err_barrisol\">Selecta\u021bi o variant\u0103 pentru tavanul Barrisol.<\/div>\n <div class=\"nav\">\n <div class=\"nav-left\">\n <button class=\"btn btn-secondary prev-btn\" data-prev=\"2\"><svg viewBox=\"0 0 24 24\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 5 5 12 12 19\"\/><\/svg>\u00cenapoi<\/button>\n <\/div>\n <div class=\"nav-right\">\n <button class=\"btn btn-primary next-btn\" data-next=\"4\">Continu\u0103<svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- STEP 4 -->\n <section class=\"stage\" data-step=\"4\">\n <div class=\"card\">\n <div class=\"card-head\">\n <div class=\"card-icon\">\n <svg viewBox=\"0 0 24 24\"><rect x=\"4\" y=\"4\" width=\"7\" height=\"7\"\/><rect x=\"13\" y=\"4\" width=\"7\" height=\"7\"\/><rect x=\"4\" y=\"13\" width=\"7\" height=\"7\"\/><rect x=\"13\" y=\"13\" width=\"7\" height=\"7\"\/><\/svg>\n <\/div>\n <div class=\"card-copy\">\n <div class=\"card-step\">Etapa 4 \/ 7<\/div>\n <h2 class=\"card-title\">Parchet<\/h2>\n <p class=\"card-subtitle\">Alege\u021bi varianta de parchet.<\/p>\n <\/div>\n <button class=\"drawer-trigger\" type=\"button\" aria-label=\"Deschide sumarul\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M5 7h14\"\/><path d=\"M5 12h14\"\/><path d=\"M5 17h10\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"card-body\">\n <div class=\"options-grid\">\n <label class=\"option\">\n <input type=\"radio\" name=\"parquet\" value=\"P5006 - Gri Deschis\">\n <div class=\"option-card\">\n <div class=\"option-media has-image\" style=\"background-image:url('https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Parchet-Gri.jpg');\"><div class=\"option-badge\">Parchet<\/div><div class=\"option-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div><\/div>\n <div class=\"option-copy\"><div class=\"option-title\">P5006 – Gri Deschis<\/div><div class=\"option-text\">Ton neutru \u0219i actual, foarte potrivit pentru interioare luminoase, finisaje moderne \u0219i o compozi\u021bie vizual\u0103 echilibrat\u0103, curat\u0103 \u0219i versatil\u0103.<\/div><\/div>\n <\/div>\n <\/label>\n <label class=\"option\">\n <input type=\"radio\" name=\"parquet\" value=\"P5007 - Maro Cald\">\n <div class=\"option-card\">\n <div class=\"option-media has-image\" style=\"background-image:url('https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Parchet-Maro.jpg');\"><div class=\"option-badge\">Parchet<\/div><div class=\"option-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div><\/div>\n <div class=\"option-copy\"><div class=\"option-title\">P5007 – Maro Cald<\/div><div class=\"option-text\">Variant\u0103 cald\u0103 \u0219i primitoare, ideal\u0103 pentru un ambient confortabil, elegant \u0219i mai apropiat de zona clasic-premium, f\u0103r\u0103 s\u0103 piard\u0103 aspectul actual.<\/div><\/div>\n <\/div>\n <\/label>\n <\/div>\n <div class=\"error choice-error\" id=\"err_parquet\">Selecta\u021bi o variant\u0103 de parchet.<\/div>\n <div class=\"nav\">\n <div class=\"nav-left\">\n <button class=\"btn btn-secondary prev-btn\" data-prev=\"3\"><svg viewBox=\"0 0 24 24\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 5 5 12 12 19\"\/><\/svg>\u00cenapoi<\/button>\n <\/div>\n <div class=\"nav-right\">\n <button class=\"btn btn-primary next-btn\" data-next=\"5\">Continu\u0103<svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- STEP 5 -->\n <section class=\"stage\" data-step=\"5\">\n <div class=\"card\">\n <div class=\"card-head\">\n <div class=\"card-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 5h16v14H4z\"\/><path d=\"M4 12h16\"\/><path d=\"M12 5v14\"\/><\/svg>\n <\/div>\n <div class=\"card-copy\">\n <div class=\"card-step\">Etapa 5 \/ 7<\/div>\n <h2 class=\"card-title\">Gresie<\/h2>\n <p class=\"card-subtitle\">Alege\u021bi modelul de gresie dorit.<\/p>\n <\/div>\n <button class=\"drawer-trigger\" type=\"button\" aria-label=\"Deschide sumarul\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M5 7h14\"\/><path d=\"M5 12h14\"\/><path d=\"M5 17h10\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"card-body\">\n <div class=\"options-grid\">\n <label class=\"option\">\n <input type=\"radio\" name=\"tile\" value=\"Carno Grey\">\n <div class=\"option-card\">\n <div class=\"option-media has-image\" style=\"background-image:url('https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/gresie-Carno-Grey.png');\"><div class=\"option-badge\">Gresie<\/div><div class=\"option-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div><\/div>\n <div class=\"option-copy\"><div class=\"option-title\">Carno Grey<\/div><div class=\"option-text\">Model cu expresie contemporan\u0103 \u0219i controlat\u0103, foarte potrivit pentru b\u0103i sau zone de zi cu aer modern, sobru \u0219i bine definit vizual.<\/div><\/div>\n <\/div>\n <\/label>\n <label class=\"option\">\n <input type=\"radio\" name=\"tile\" value=\"Stratuario Eva\">\n <div class=\"option-card\">\n <div class=\"option-media has-image\" style=\"background-image:url('https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Stratuario-Eva.jpg');\"><div class=\"option-badge\">Gresie<\/div><div class=\"option-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div><\/div>\n <div class=\"option-copy\"><div class=\"option-title\">Stratuario Eva<\/div><div class=\"option-text\">Alegere luminoas\u0103 \u0219i premium, cu influen\u021b\u0103 elegant\u0103 de marmur\u0103, potrivit\u0103 pentru spa\u021bii care trebuie s\u0103 transmit\u0103 rafinament \u0219i senza\u021bie de amplitudine.<\/div><\/div>\n <\/div>\n <\/label>\n <\/div>\n <div class=\"error choice-error\" id=\"err_tile\">Selecta\u021bi o variant\u0103 de gresie.<\/div>\n <div class=\"nav\">\n <div class=\"nav-left\">\n <button class=\"btn btn-secondary prev-btn\" data-prev=\"4\"><svg viewBox=\"0 0 24 24\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 5 5 12 12 19\"\/><\/svg>\u00cenapoi<\/button>\n <\/div>\n <div class=\"nav-right\">\n <button class=\"btn btn-primary next-btn\" data-next=\"6\">Continu\u0103<svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- STEP 6 -->\n <section class=\"stage\" data-step=\"6\">\n <div class=\"card\">\n <div class=\"card-head\">\n <div class=\"card-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\n <\/div>\n <div class=\"card-copy\">\n <div class=\"card-step\">Etapa 6 \/ 7<\/div>\n <h2 class=\"card-title\">Confirmare selec\u021bie<\/h2>\n <p class=\"card-subtitle\">Verifica\u021bi op\u021biunile introduse \u0219i confirma\u021bi c\u0103 selec\u021bia apar\u021bine locuin\u021bei dvs.<\/p>\n <\/div>\n <button class=\"drawer-trigger\" type=\"button\" aria-label=\"Deschide sumarul\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M5 7h14\"\/><path d=\"M5 12h14\"\/><path d=\"M5 17h10\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"card-body\">\n <div class=\"consent-wrap\">\n <label class=\"consent\">\n <input type=\"checkbox\" id=\"consent\">\n <div>\n <div class=\"consent-title\">Consim\u021b\u0103m\u00e2nt<\/div>\n <div class=\"consent-text\">Confirm c\u0103 op\u021biunile selectate reprezint\u0103 alegerea finisajelor pentru locuin\u021ba mea.<\/div>\n <\/div>\n <\/label>\n <\/div>\n <div class=\"error choice-error\" id=\"err_consent\">Este necesar\u0103 confirmarea selec\u021biei.<\/div>\n <div class=\"nav\">\n <div class=\"nav-left\">\n <button class=\"btn btn-secondary prev-btn\" data-prev=\"5\"><svg viewBox=\"0 0 24 24\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 5 5 12 12 19\"\/><\/svg>\u00cenapoi<\/button>\n <\/div>\n <div class=\"nav-right\">\n <button class=\"btn btn-primary next-btn\" data-next=\"7\">\n Previzualizeaz\u0103\n <svg viewBox=\"0 0 24 24\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- STEP 7 \u2014 PREVIZUALIZARE -->\n <section class=\"stage\" data-step=\"7\">\n <div class=\"card\">\n <div class=\"card-head\">\n <div class=\"card-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><\/svg>\n <\/div>\n <div class=\"card-copy\">\n <div class=\"card-step\">Etapa 7 \/ 7<\/div>\n <h2 class=\"card-title\">Previzualizare<\/h2>\n <p class=\"card-subtitle\">Combina\u021bia finisajelor alese de dvs., randat\u0103 \u00een apartament. Verifica\u021bi \u0219i finaliza\u021bi.<\/p>\n <\/div>\n <button class=\"drawer-trigger\" type=\"button\" aria-label=\"Deschide sumarul\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M5 7h14\"\/><path d=\"M5 12h14\"\/><path d=\"M5 17h10\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"card-body\">\n\n <!-- Preview image box -->\n <div class=\"preview-box\">\n <div class=\"preview-img-wrap\">\n <img decoding=\"async\" id=\"previewImg\" src=\"\" alt=\"Previzualizare combina\u021bie finisaje\" class=\"preview-img\">\n <div class=\"preview-no-sel\" id=\"previewNoSel\">\n <svg viewBox=\"0 0 24 24\" width=\"32\" height=\"32\" stroke=\"rgba(150,122,66,.5)\" stroke-width=\"1.5\" fill=\"none\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><\/svg>\n <span>Selecta\u021bi tavanul \u0219i parchetul pentru a vedea previzualizarea.<\/span>\n <\/div>\n <\/div>\n <div class=\"preview-caption\" id=\"previewCaption\"><\/div>\n <\/div>\n\n <!-- Summary chips -->\n <div class=\"preview-chips\" id=\"previewChips\"><\/div>\n\n <div class=\"nav\">\n <div class=\"nav-left\">\n <button class=\"btn btn-secondary prev-btn\" data-prev=\"6\"><svg viewBox=\"0 0 24 24\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 5 5 12 12 19\"\/><\/svg>\u00cenapoi<\/button>\n <\/div>\n <div class=\"nav-right\">\n <button class=\"btn btn-primary\" id=\"readyBtn\" type=\"button\">\n Finalizeaz\u0103\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/div><!-- \/stage-shell -->\n\n <!-- DESKTOP SUMMARY -->\n <aside class=\"summary desktop-summary\">\n <div class=\"summary-head\">\n <div class=\"summary-stepbox\">\n <div class=\"summary-step-top\">\n <div class=\"summary-step-left\">\n <div class=\"summary-step-kicker\">Status selec\u021bie<\/div>\n <div class=\"summary-step-title\" id=\"step_title\">Date de contact<\/div>\n <\/div>\n <div class=\"summary-step-chip\" id=\"step_chip\">Pas 1 \/ 7<\/div>\n <\/div>\n <div class=\"summary-progress\">\n <div class=\"summary-progress-bar\" id=\"sum_progress\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"summary-body\">\n <div class=\"summary-row\"><span class=\"summary-key\">Nume<\/span><span class=\"summary-val pending\" id=\"sum_name\">Necompletat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Email<\/span><span class=\"summary-val pending\" id=\"sum_email\">Necompletat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Telefon<\/span><span class=\"summary-val pending\" id=\"sum_phone\">Necompletat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Proiect<\/span><span class=\"summary-val pending\" id=\"sum_project\">Necompletat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Apartament<\/span><span class=\"summary-val pending\" id=\"sum_apartment\">Necompletat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Barrisol<\/span><span class=\"summary-val pending\" id=\"sum_barrisol\">Neselectat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Parchet<\/span><span class=\"summary-val pending\" id=\"sum_parquet\">Neselectat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Gresie<\/span><span class=\"summary-val pending\" id=\"sum_tile\">Neselectat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Confirmare<\/span><span class=\"summary-val pending\" id=\"sum_consent\">Nepreluat\u0103<\/span><\/div>\n <\/div>\n <div class=\"summary-foot\">\n <div class=\"summary-status\" id=\"summary_status\">Selec\u021bie incomplet\u0103<\/div>\n <\/div>\n <\/aside>\n\n <\/div>\n <\/main>\n<\/div>\n\n<!-- \u2550\u2550 SIDE DRAWER (mobile) \u2550\u2550 -->\n<div class=\"drawer-backdrop\" id=\"drawerBackdrop\"><\/div>\n\n<div class=\"drawer\" id=\"sideDrawer\" aria-hidden=\"true\" role=\"dialog\" aria-label=\"Sumar selec\u021bie\">\n <div class=\"drawer-inner\">\n <div class=\"drawer-header\">\n <div class=\"drawer-header-left\">\n <div class=\"drawer-header-kicker\">Panou selec\u021bie<\/div>\n <div class=\"drawer-header-title\">Sumar<\/div>\n <\/div>\n <button class=\"drawer-close\" id=\"drawerClose\" type=\"button\" aria-label=\"\u00cenchide sumarul\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M6 6l12 12\"\/><path d=\"M18 6 6 18\"\/><\/svg>\n <\/button>\n <\/div>\n\n <!-- Reuse same summary markup, different IDs prefixed d_ -->\n <aside class=\"summary\" style=\"display:block;\">\n <div class=\"summary-head\">\n <div class=\"summary-stepbox\">\n <div class=\"summary-step-top\">\n <div class=\"summary-step-left\">\n <div class=\"summary-step-kicker\">Status selec\u021bie<\/div>\n <div class=\"summary-step-title\" id=\"d_step_title\">Date de contact<\/div>\n <\/div>\n <div class=\"summary-step-chip\" id=\"d_step_chip\">Pas 1 \/ 7<\/div>\n <\/div>\n <div class=\"summary-progress\">\n <div class=\"summary-progress-bar\" id=\"d_sum_progress\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"summary-body\">\n <div class=\"summary-row\"><span class=\"summary-key\">Nume<\/span><span class=\"summary-val pending\" id=\"d_sum_name\">Necompletat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Email<\/span><span class=\"summary-val pending\" id=\"d_sum_email\">Necompletat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Telefon<\/span><span class=\"summary-val pending\" id=\"d_sum_phone\">Necompletat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Proiect<\/span><span class=\"summary-val pending\" id=\"d_sum_project\">Necompletat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Apartament<\/span><span class=\"summary-val pending\" id=\"d_sum_apartment\">Necompletat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Barrisol<\/span><span class=\"summary-val pending\" id=\"d_sum_barrisol\">Neselectat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Parchet<\/span><span class=\"summary-val pending\" id=\"d_sum_parquet\">Neselectat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Gresie<\/span><span class=\"summary-val pending\" id=\"d_sum_tile\">Neselectat<\/span><\/div>\n <div class=\"summary-row\"><span class=\"summary-key\">Confirmare<\/span><span class=\"summary-val pending\" id=\"d_sum_consent\">Nepreluat\u0103<\/span><\/div>\n <\/div>\n <div class=\"summary-foot\">\n <div class=\"summary-status\" id=\"d_summary_status\">Selec\u021bie incomplet\u0103<\/div>\n <\/div>\n <\/aside>\n <\/div>\n<\/div>\n\n<script>\nconst stages = [...document.querySelectorAll('.stage')];\nconst totalSteps = 7;\nlet currentStep = 1;\n\nconst stepTitles = {\n 1:'Date de contact',\n 2:'Proiect \/ apartament',\n 3:'Tavan Barrisol',\n 4:'Parchet',\n 5:'Gresie',\n 6:'Confirmare selec\u021bie',\n 7:'Previzualizare'\n};\n\n\/\/ \u2500\u2500 Preview image map: barrisol key \u2192 { gri, maro }\n\/\/ \"Alb mat\" uses same images as \"Alb lucios\" until dedicated photos are uploaded\nconst PREVIEW_IMGS = {\n 'Alb lucios': {\n 'P5006 - Gri Deschis': 'https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Tavan-alb-lucios-parchet-GRI.jpg',\n 'P5007 - Maro Cald': 'https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Tavan-alb-lucios-parchet-MARO.jpg'\n },\n 'Alb mat': {\n 'P5006 - Gri Deschis': 'https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Tavan-alb-lucios-parchet-GRI.jpg',\n 'P5007 - Maro Cald': 'https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Tavan-alb-lucios-parchet-MARO.jpg'\n },\n 'Negru lucios': {\n 'P5006 - Gri Deschis': 'https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Tavan-NEGRU-lucios-parchet-GRI.jpg',\n 'P5007 - Maro Cald': 'https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Tavan-NEGRU-lucios-parchet-MARO.jpg'\n },\n 'Negru mat': {\n 'P5006 - Gri Deschis': 'https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Tavan-NEGRU-MAT-parchet-GRI.jpg',\n 'P5007 - Maro Cald': 'https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Tavan-NEGRU-MAT-parchet-MARO.jpg'\n }\n};\n\nconst state = {\n fullName:'', email:'', phone:'',\n projectSelect:'', apartmentNumber:'',\n barrisol:'', parquet:'', tile:'',\n consent:false\n};\n\n\/* \u2500\u2500 Drawer \u2500\u2500 *\/\nconst drawerBackdrop = document.getElementById('drawerBackdrop');\nconst sideDrawer = document.getElementById('sideDrawer');\n\nfunction openDrawer(){\n updateSummary();\n drawerBackdrop.classList.add('open');\n sideDrawer.classList.add('open');\n sideDrawer.setAttribute('aria-hidden','false');\n document.body.classList.add('drawer-open');\n}\nfunction closeDrawer(){\n drawerBackdrop.classList.remove('open');\n sideDrawer.classList.remove('open');\n sideDrawer.setAttribute('aria-hidden','true');\n document.body.classList.remove('drawer-open');\n}\n\ndocument.querySelectorAll('.drawer-trigger').forEach(btn => btn.addEventListener('click', openDrawer));\ndocument.getElementById('drawerClose').addEventListener('click', closeDrawer);\ndrawerBackdrop.addEventListener('click', closeDrawer);\ndocument.addEventListener('keydown', e => { if(e.key === 'Escape') closeDrawer(); });\n\n\/* \u2500\u2500 Helpers \u2500\u2500 *\/\nfunction validEmail(v){ return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(v.trim()); }\nfunction validPhone(v){ return v.replace(\/\\s+\/g,'').replace(\/[^\\d+]\/g,'').length >= 7; }\n\n\/* \u2500\u2500 Preview updater \u2500\u2500 *\/\nfunction updatePreview(){\n const img = document.getElementById('previewImg');\n const noSel = document.getElementById('previewNoSel');\n const caption = document.getElementById('previewCaption');\n const chipsWrap = document.getElementById('previewChips');\n if(!img) return;\n\n const bar = state.barrisol;\n const par = state.parquet;\n\n const url = (bar && par && PREVIEW_IMGS[bar]) ? PREVIEW_IMGS[bar][par] : null;\n\n if(url){\n noSel.classList.add('hidden');\n img.classList.remove('loaded');\n img.onload = () => img.classList.add('loaded');\n img.onerror = () => { img.classList.remove('loaded'); noSel.classList.remove('hidden'); };\n img.src = url;\n\n const parLabel = par === 'P5006 - Gri Deschis' ? 'Gri Deschis' : 'Maro Cald';\n caption.textContent = `Tavan ${bar} \u00b7 Parchet ${parLabel}`;\n\n \/\/ chips\n const barColor = bar.includes('Negru') ? 'dark' : 'gold';\n const parColor = par.includes('Gri') ? 'grey' : 'brown';\n chipsWrap.innerHTML = `\n <div class=\"preview-chip ${barColor}\"><span class=\"preview-chip-dot\"><\/span>Tavan: ${bar}<\/div>\n <div class=\"preview-chip ${parColor}\"><span class=\"preview-chip-dot\"><\/span>Parchet: ${parLabel}<\/div>\n `;\n } else {\n noSel.classList.remove('hidden');\n img.classList.remove('loaded');\n img.src = '';\n caption.textContent = '';\n chipsWrap.innerHTML = '';\n }\n}\n\nfunction showStage(step){\n currentStep = step;\n stages.forEach(s => s.classList.toggle('active', Number(s.dataset.step) === step));\n updateSummary();\n if(step === 7) updatePreview();\n window.scrollTo({top:0, behavior:'smooth'});\n}\n\n\/* setSummaryPair *\/\nfunction setSP(ids, value, fallback){\n ids.forEach(id => {\n const el = document.getElementById(id);\n if(!el) return;\n const pending = !value;\n el.textContent = pending ? fallback : value;\n el.classList.toggle('pending', pending);\n });\n}\n\nfunction updateState(){\n state.fullName = document.getElementById('fullName').value.trim();\n state.email = document.getElementById('email').value.trim();\n state.phone = document.getElementById('phone').value.trim();\n state.apartmentNumber = document.getElementById('apartmentNumber').value.trim();\n\n const proj = document.querySelector('input[name=\"projectSelect\"]:checked');\n const bar = document.querySelector('input[name=\"barrisol\"]:checked');\n const par = document.querySelector('input[name=\"parquet\"]:checked');\n const til = document.querySelector('input[name=\"tile\"]:checked');\n\n state.projectSelect = proj ? proj.value : '';\n state.barrisol = bar ? bar.value : '';\n state.parquet = par ? par.value : '';\n state.tile = til ? til.value : '';\n state.consent = document.getElementById('consent').checked;\n}\n\nfunction updateProgress(step){\n const pct = (step \/ totalSteps) * 100;\n const title = stepTitles[step];\n const chip = `Pas ${step} \/ ${totalSteps}`;\n\n ['step_title','d_step_title'].forEach(id => { const el=document.getElementById(id); if(el) el.textContent=title; });\n ['step_chip','d_step_chip'].forEach(id => { const el=document.getElementById(id); if(el) el.textContent=chip; });\n ['sum_progress','d_sum_progress'].forEach(id => { const el=document.getElementById(id); if(el) el.style.width=`${pct}%`; });\n}\n\nfunction updateSummary(){\n updateState();\n setSP(['sum_name','d_sum_name'], state.fullName, 'Necompletat');\n setSP(['sum_email','d_sum_email'], state.email, 'Necompletat');\n setSP(['sum_phone','d_sum_phone'], state.phone, 'Necompletat');\n setSP(['sum_project','d_sum_project'], state.projectSelect, 'Necompletat');\n setSP(['sum_apartment','d_sum_apartment'], state.apartmentNumber,'Necompletat');\n setSP(['sum_barrisol','d_sum_barrisol'], state.barrisol, 'Neselectat');\n setSP(['sum_parquet','d_sum_parquet'], state.parquet, 'Neselectat');\n setSP(['sum_tile','d_sum_tile'], state.tile, 'Neselectat');\n setSP(['sum_consent','d_sum_consent'], state.consent ? 'Confirmat\u0103' : '', 'Nepreluat\u0103');\n\n updateProgress(currentStep);\n\n const isComplete =\n state.fullName.length >= 2 &&\n validEmail(state.email) &&\n validPhone(state.phone) &&\n !!state.projectSelect &&\n state.apartmentNumber.length >= 1 &&\n !!state.barrisol &&\n !!state.parquet &&\n !!state.tile &&\n state.consent;\n\n ['summary_status','d_summary_status'].forEach(id => {\n const el = document.getElementById(id);\n if(!el) return;\n el.textContent = isComplete ? 'Selec\u021bie complet\u0103' : 'Selec\u021bie incomplet\u0103';\n el.classList.toggle('ok', isComplete);\n });\n}\n\n\/* \u2500\u2500 Validation \u2500\u2500 *\/\nfunction setError(inputId, errorId){\n const i=document.getElementById(inputId); const e=document.getElementById(errorId);\n if(i) i.classList.add('error'); if(e) e.classList.add('show');\n}\nfunction clearError(inputId, errorId){\n const i=document.getElementById(inputId); const e=document.getElementById(errorId);\n if(i) i.classList.remove('error'); if(e) e.classList.remove('show');\n}\n\nfunction validateStep(step){\n let ok = true;\n if(step === 1){\n if(state.fullName.length < 2){ setError('fullName','err_fullName'); ok=false; } else clearError('fullName','err_fullName');\n if(!validEmail(state.email)) { setError('email','err_email'); ok=false; } else clearError('email','err_email');\n if(!validPhone(state.phone)) { setError('phone','err_phone'); ok=false; } else clearError('phone','err_phone');\n }\n if(step === 2){\n const p = document.querySelector('input[name=\"projectSelect\"]:checked');\n document.getElementById('err_projectSelect').classList.toggle('show', !p);\n if(!p) ok=false;\n if(state.apartmentNumber.length < 1){ setError('apartmentNumber','err_apartmentNumber'); ok=false; } else clearError('apartmentNumber','err_apartmentNumber');\n }\n if(step === 3){ const c=document.querySelector('input[name=\"barrisol\"]:checked'); document.getElementById('err_barrisol').classList.toggle('show',!c); if(!c) ok=false; }\n if(step === 4){ const c=document.querySelector('input[name=\"parquet\"]:checked'); document.getElementById('err_parquet').classList.toggle('show',!c); if(!c) ok=false; }\n if(step === 5){ const c=document.querySelector('input[name=\"tile\"]:checked'); document.getElementById('err_tile').classList.toggle('show',!c); if(!c) ok=false; }\n if(step === 6){ const c=document.getElementById('consent').checked; document.getElementById('err_consent').classList.toggle('show',!c); if(!c) ok=false; }\n return ok;\n}\n\n\/* \u2500\u2500 Navigation \u2500\u2500 *\/\ndocument.querySelectorAll('.next-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n updateState();\n if(!validateStep(currentStep)) return;\n showStage(Number(btn.dataset.next));\n });\n});\ndocument.querySelectorAll('.prev-btn').forEach(btn => {\n btn.addEventListener('click', () => showStage(Number(btn.dataset.prev)));\n});\n\ndocument.querySelectorAll('input').forEach(inp => {\n inp.addEventListener('input', updateSummary);\n inp.addEventListener('change', updateSummary);\n});\n\n\/* \u2500\u2500 Submit real \u2500\u2500 *\/\ndocument.getElementById('readyBtn').addEventListener('click', () => {\n updateState();\n\n \/\/ Build a hidden form and submit to your endpoint\n \/\/ TODO: \u00eenlocuie\u0219te action URL cu endpoint-ul t\u0103u real (CF7, WPForms, etc.)\n const ACTION_URL = 'https:\/\/www.obadifferentbyluxury.ro\/wp-json\/contact-form-7\/v1\/contact-forms\/YOUR_FORM_ID\/feedback';\n\n const form = document.createElement('form');\n form.method = 'POST';\n form.action = ACTION_URL;\n form.style.display = 'none';\n\n const fields = {\n 'your-name': state.fullName,\n 'your-email': state.email,\n 'your-phone': state.phone,\n 'your-project': state.projectSelect,\n 'your-apartment': state.apartmentNumber,\n 'your-barrisol': state.barrisol,\n 'your-parquet': state.parquet,\n 'your-tile': state.tile\n };\n\n Object.entries(fields).forEach(([name, value]) => {\n const inp = document.createElement('input');\n inp.type = 'hidden';\n inp.name = name;\n inp.value = value;\n form.appendChild(inp);\n });\n\n document.body.appendChild(form);\n form.submit();\n});\n\nupdateSummary();\nshowStage(1);\n<\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Selec\u021bie finisaje \u2013 O.B.A. Different by Luxury Etapa 1 \/ 6 Date de contact Introduce\u021bi numele complet, adresa de email \u0219i num\u0103rul de telefon asociate acestei \u00eenregistr\u0103ri. Nume complet * Completa\u021bi numele complet. Email * Introduce\u021bi o adres\u0103 de email valid\u0103. Telefon * Introduce\u021bi un num\u0103r de telefon valid. Continu\u0103 Etapa 2 \/ 6 Proiect…<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6758","page","type-page","status-publish","hentry","description-off"],"_links":{"self":[{"href":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/wp-json\/wp\/v2\/pages\/6758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/wp-json\/wp\/v2\/comments?post=6758"}],"version-history":[{"count":11,"href":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/wp-json\/wp\/v2\/pages\/6758\/revisions"}],"predecessor-version":[{"id":6852,"href":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/wp-json\/wp\/v2\/pages\/6758\/revisions\/6852"}],"wp:attachment":[{"href":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/wp-json\/wp\/v2\/media?parent=6758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}