/* Kitchen Designer Professional (pro.php) — additions on top of designer.css */

.pro-note { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--glow); background: rgba(240, 164, 58, .12); font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.pro-note b { color: var(--ink); }
.pro-note a { color: #7a4507; font-weight: 600; white-space: nowrap; }
.dz-pro .dz-kicker::after { content: "PRO"; margin-left: 8px; padding: 1px 6px; border-radius: 3px; background: var(--glow); color: #1b1408; font-size: 10px; letter-spacing: .06em; }

/* toolbar extras: three menus (Check / Fitter / Show client) */
.tb-sep { width: 1px; align-self: stretch; background: var(--night-line); margin: 4px 2px; }
.tb-menu { position: relative; flex: none; }
.tb-menu [data-menu-btn] span { font-size: 10px; margin-left: 2px; opacity: .7; }
.tb-pop { position: fixed; z-index: 60; min-width: 260px; max-width: calc(100vw - 16px); padding: 6px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 14px 40px rgba(0, 0, 0, .28); display: grid; gap: 2px; }
.tb-pop[hidden] { display: none; }
.tb-pop button { display: grid; gap: 1px; text-align: left; padding: 9px 12px; border: 0; background: none; border-radius: 4px; font: inherit; color: inherit; cursor: pointer; }
.tb-pop button b { font-size: 14px; font-weight: 600; }
.tb-pop button small { font-size: 12px; color: var(--steel); }
.tb-pop button:hover, .tb-pop button:focus-visible { background: rgba(240, 164, 58, .16); outline: none; }
.tb-pop [aria-checked="true"] b::after { content: " — on"; color: #8a4e08; }
.pro-touch .tb-pop button { padding: 14px 16px; }
.tb-btn.tb-glow { background: var(--glow); border-color: var(--glow); color: #1b1408; font-weight: 600; }
.tb-btn.tb-glow:hover { filter: brightness(1.06); }

/* staff / client bar under the toolbar */
.pro-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 8px 14px; background: var(--night-2); color: #fff; border-bottom: 1px solid var(--night-line); font-size: 13.5px; }
.pro-bar .pb-client { display: flex; flex-direction: column; min-width: 0; }
.pro-bar .pb-client .mono { font-size: 11px; color: rgba(255, 255, 255, .6); }
.pro-bar .pb-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pro-bar .pb-hint { color: rgba(255, 255, 255, .75); }
.pro-bar .pb-hint a, .pro-bar .pb-staff { color: var(--glow); }
.pro-bar .pb-staff { font-family: var(--mono); font-size: 12px; text-decoration: none; border: 1px solid rgba(240, 164, 58, .5); padding: 4px 10px; border-radius: 99px; }
.pb-btn { padding: 6px 12px; font-size: 13px; min-height: 0; }
.pro-bar .btn-line { color: #fff; border-color: var(--night-line); }

/* range cards with photos, two-tone, services */
.cards-range .card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; margin-bottom: 8px; background: var(--paper-2, #e9e6df); }
.chip-btn { border: 1px solid var(--line); background: var(--card); padding: 6px 10px; border-radius: 99px; font-size: 12.5px; cursor: pointer; }
.chip-btn:hover { border-color: var(--ink); }
.svc-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.svc-list { display: grid; gap: 8px; }
.svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; align-items: end; padding: 8px; border: 1px solid var(--line); background: var(--card); border-radius: 4px; }
.svc-row select, .svc-row input { width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 3px; font: inherit; font-size: 13px; background: #fff; }
.svc-row label span { display: block; font-size: 10px; color: var(--steel); text-transform: uppercase; }
.svc-row .linkbtn { grid-column: 1 / -1; justify-self: end; font-size: 12.5px; }
.tone select { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 3px; font: inherit; background: #fff; }

/* dialogs */
dialog.pro-dlg.wide { width: min(1180px, calc(100% - 24px)); }
.pro-dlg .dlg-acts { display: flex; gap: 8px; align-items: center; }
.pro-dlg .dlg-btn { padding: 7px 14px; font-size: 13.5px; }
.pro-dlg .dlg-x { width: 38px; height: 38px; flex: none; border: 1px solid var(--line); background: var(--card); font-size: 22px; line-height: 1; cursor: pointer; border-radius: var(--radius); }
.el-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 22px 0; }
.el-tabs button { border: 1px solid var(--line); background: var(--card); padding: 6px 14px; border-radius: 99px; cursor: pointer; font-size: 13.5px; }
.el-tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.el-fig { padding: 10px 22px; }
.el-fig svg { width: 100%; height: auto; max-height: 64vh; }
.pl-wrap { padding: 0 22px 22px; overflow-x: auto; }
.pro-checks { margin: 16px 22px; padding: 12px 16px; background: #fff6e7; border-left: 3px solid var(--glow); font-size: 14px; }
.pro-checks.ok { background: #eef5ec; border-color: #6a9a5f; }
.pro-checks ul { margin: 6px 0 0 18px; }
.pro-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pro-form .full { grid-column: 1 / -1; }
.pro-dlg .field input, .pro-dlg .field select, .pro-dlg .field textarea, .pj-q { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 3px; font: inherit; background: #fff; }

/* projects */
.pj-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; padding: 0 22px 22px; }
.pj { display: flex; flex-direction: column; gap: 3px; text-align: left; border: 1px solid var(--line); background: var(--card); padding: 8px; border-radius: 4px; cursor: pointer; font: inherit; color: inherit; }
.pj:hover { border-color: var(--ink); }
.pj img, .pj-noimg { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; background: #e6e2da; display: block; margin-bottom: 6px; }
.pj small { font-size: 12px; color: var(--steel); }
.pj-vers { display: grid; gap: 10px; padding: 0 22px 22px; }
.pv { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; border: 1px solid var(--line); background: var(--card); padding: 8px; border-radius: 4px; }
.pv img, .pv .pj-noimg { width: 150px; aspect-ratio: 16 / 10; object-fit: cover; margin: 0; }
.pv small { display: block; color: var(--steel); font-size: 12px; }
@media (max-width: 640px) { .pv { grid-template-columns: 96px minmax(0, 1fr); } .pv img, .pv .pj-noimg { width: 96px; } }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px 22px 22px; }
.cmp img { width: 100%; border-radius: 4px; border: 1px solid var(--line); }
.cmp figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; align-items: flex-start; }
.cmp figcaption span { font-size: 13px; color: var(--steel); }
@media (max-width: 760px) { .cmp { grid-template-columns: 1fr; } .pro-form .form-grid { grid-template-columns: 1fr; } }

/* toast */
.pro-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 200; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 99px; font-size: 14px; transition: .25s; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.pro-toast.on { opacity: 1; transform: translate(-50%, 0); }
.pro-toast.err { background: #8a2a1c; }

/* presentation: full-screen 3D, panels hidden, a floating control bar */
.pro-presenting .site-header, .pro-presenting .offer-bar, .pro-presenting .site-footer, .pro-presenting .dz-panel, .pro-presenting .dz-toolbar, .pro-presenting .pro-bar,
.pro-presenting .dz-summary, .pro-presenting .dz-hint, .pro-presenting .bb-fab, .pro-presenting .dz-warn, .pro-presenting .fp-pane, .pro-presenting .fp-coach, .pro-presenting .fp-warns, .pro-presenting .fp-insp, .pro-presenting .fp-split, .pro-presenting .fpi, .pro-presenting [class*="fp-split"] { display: none !important; }
.pro-presenting .dz { display: block; height: 100vh; }
.pro-presenting .dz-stage { position: fixed; inset: 0; z-index: 100; height: 100vh; }
.pro-presenting .dz-canvas { position: absolute; inset: 0; height: 100% !important; display: block !important; }
.pres-bar { display: none; }
.pro-presenting .pres-bar { display: flex; flex-direction: column; gap: 8px; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; width: min(1100px, calc(100% - 24px));
  background: rgba(18, 19, 21, .82); backdrop-filter: blur(10px); color: #fff; border: 1px solid var(--night-line); border-radius: 10px; padding: 10px 12px; }
.pb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pb-row .mono { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .55); margin: 0 4px 0 8px; }
.pb-row > button { border: 1px solid var(--night-line); background: transparent; color: #fff; padding: 6px 11px; border-radius: 99px; cursor: pointer; font-size: 13px; }
.pb-row > button:hover { border-color: var(--glow); }
.pb-row .pb-x { margin-left: auto; border-color: rgba(240, 164, 58, .6); color: var(--glow); }
.pb-sw { display: flex; flex-wrap: wrap; gap: 5px; }
.pb-sw button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); cursor: pointer; padding: 0; }
.pb-sw button[aria-pressed="true"] { border-color: var(--glow); box-shadow: 0 0 0 2px rgba(240, 164, 58, .4); }

/* tighter toolbar so the pro buttons fit on one line on a laptop */
.dz-pro .dz-toolbar { gap: 6px; }
.dz-pro .dz-toolbar .seg button, .dz-pro .dz-toolbar .tb-btn { padding-left: 10px; padding-right: 10px; font-size: 13px; }
@media (max-width: 1500px) { .dz-pro [data-cams] button[data-cam="side"], .dz-pro [data-snap] { display: none; } }
.pro-dlg .dlg-h .dlg-btn { width: auto; height: auto; font-size: 13.5px; line-height: 1.2; padding: 8px 14px; border-radius: 99px; }
.pro-dlg .dlg-h .btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
/* ready-made kitchens */
.kits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kit { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid var(--line); background: var(--card); padding: 6px 6px 9px; border-radius: 4px; cursor: pointer; font: inherit; color: inherit; }
.kit:hover, .kit.on { border-color: var(--ink); }
.kit.on { box-shadow: inset 0 0 0 1px var(--ink); }
.kit img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; background: #e6e2da; margin-bottom: 5px; }
.kit b { font-size: 13.5px; line-height: 1.25; }
.kit small { font-size: 11.5px; color: var(--steel); }
.fp-empty-b { display: flex; flex-direction: column; gap: 8px; }
.tools { padding: 8px 22px 20px; display: grid; gap: 4px; }
.tools section { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tools h3 { width: 100%; font-size: 15px; margin: 0; }
.tools .hintp { width: 100%; margin: 0; }
.tools .btn { padding: 8px 14px; font-size: 13.5px; }
.tools .danger { color: #8a2a1c; border-color: rgba(138, 42, 28, .4); }
.tool-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tool-row select { padding: 7px; border: 1px solid var(--line); border-radius: 3px; margin-left: 6px; }
.pb-opts { display: flex; gap: 6px; align-items: center; }
.pb-opt { position: relative; width: 62px; height: 39px; padding: 0; border: 2px solid rgba(255,255,255,.25); border-radius: 5px; overflow: hidden; cursor: pointer; background: #2a2c30; }
.pb-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-opt b { position: absolute; left: 3px; top: 2px; font-size: 11px; color: #fff; background: rgba(0,0,0,.55); padding: 0 4px; border-radius: 3px; }
.pb-opt[aria-pressed="true"] { border-color: var(--glow); }
.pb-none { font-size: 12px; color: rgba(255,255,255,.5); }
.pb-row > button[aria-pressed="true"] { border-color: var(--glow); color: var(--glow); }
.pb-row > button:disabled { opacity: .7; cursor: progress; }
.pro-presenting .pro-toast { bottom: auto; top: 22px; }
.fpi-wide { grid-column: 1 / -1; } .fpi-wide input { width: 100%; }
.share-b { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; padding: 20px 22px; align-items: start; }
.share-b svg { width: 220px; height: 220px; border: 1px solid var(--line); border-radius: 6px; }
@media (max-width: 640px) { .share-b { grid-template-columns: 1fr; } }
.pv-c { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 4px; }
.pv-c p { margin: 0; padding: 7px 10px; border-radius: 6px; font-size: 13.5px; background: var(--paper); }
.pv-c p.cl { background: #fff6e7; }
.pv-c .mono { display: block; font-size: 10.5px; color: var(--steel); }
.pv-ok { background: #e3efe0 !important; color: #2f5a27; font-weight: 600; }
.pv-r { display: flex; gap: 6px; }
.pv-r input { flex: 1; padding: 7px 10px; border: 1px solid var(--line); border-radius: 3px; font: inherit; }
/* touch-screen showroom mode */
.pro-touch .dz-toolbar .seg button, .pro-touch .dz-toolbar .tb-btn { min-height: 48px; padding-left: 14px; padding-right: 14px; font-size: 15px; }
.pro-touch .dz-step-h { min-height: 64px; font-size: 17px; }
.pro-touch .dz-panel :is(.chipr span, .chip-btn, .btn) { min-height: 46px; font-size: 15px; display: inline-flex; align-items: center; }
.pro-touch .sw .dot { width: 48px; height: 48px; }
.pro-touch .fpi :is(select, input, button), .pro-touch .fp-tools button { min-height: 46px; font-size: 15px; }
.pro-touch .fp-tools button { min-width: 48px; }
.pro-touch .kit b { font-size: 15px; }
.pro-touch .pres-bar .pb-row > button { min-height: 46px; padding: 8px 16px; font-size: 15px; }
.pro-touch .pb-sw button { width: 40px; height: 40px; }
.pro-touch .pb-opt { width: 84px; height: 52px; }
.pro-touch .dz-pro [data-cams] button[data-cam="side"] { display: none; }
.tb-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* multi-select panel */
.fpi-n { place-items: center; font-size: 20px; font-weight: 600; background: rgba(240, 164, 58, .18); border-radius: 4px; color: var(--ink); }
.fpi-note { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--steel); }

/* site survey */
.sv { padding: 6px 22px 22px; display: grid; gap: 18px; }
.sv h3 { font-size: 16px; margin: 10px 0 6px; }
.sv-f select, .sv-f textarea { width: 100%; }
.sv-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.sv-add .field { display: grid; gap: 4px; font-size: 13px; }
.sv-add select, .sv-add input[type=text] { padding: 8px; border: 1px solid var(--line); border-radius: 3px; font: inherit; background: #fff; min-width: 140px; }
.sv-pick { cursor: pointer; }
.sv-ph { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.sv-ph figure { margin: 0; display: grid; gap: 4px; }
.sv-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; display: block; background: var(--paper-2); }
.sv-ph figcaption { font-size: 12px; color: var(--ink-2); }
.sv-ph .linkbtn { justify-self: start; font-size: 12px; }
.svc-dot:hover circle { stroke: var(--glow); }

/* Pro starts from ready-made kitchens, not the quick-design layout */
.dz-pro [data-fpa="from-quick"] { display: none; }