/* [VD-32] Faházépítő – „A kertjében” nézet (assets/vd-garden-photo.js) */

/* nézetváltó: bal felül, a nézet-pirulák stílusában */
.vdk-switch{
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: flex; gap: 4px; padding: 4px;
  background: rgba(255,255,255,0.9); border-radius: 999px;
  box-shadow: 0 2px 10px rgba(42,38,32,0.18);
}
.vdk-switch-btn{
  border: 0; background: transparent; cursor: pointer;
  height: 30px; padding: 0 14px; border-radius: 999px;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
  color: var(--vd-text, var(--ink));
}
.vdk-switch-btn:hover{ background: var(--paper-deep); }
.vdk-switch-btn.is-active{ background: var(--vd-accent, var(--cedar)); color: #F3EFE4; }
.vdk-switch-btn:focus-visible{ outline: 2px solid var(--vd-accent, var(--cedar)); outline-offset: 2px; }

/* kertes módban a 3D-s vezérlők és a VD vászna rejtve */
#vd-canvas.vdk-on > canvas{ visibility: hidden; }
#vd-canvas.vdk-on .vd-view-buttons,
#vd-canvas.vdk-on .vd-viewer-controls{ display: none !important; }
#vd-canvas.vdk-on{ cursor: default; }

.vdk-layer{
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column;
  background: #1d2a20;
}
.vdk-layer[hidden], .vdk-stage[hidden]{ display: none; }
.vdk-layer.is-drop{ outline: 3px dashed var(--vd-accent, var(--cedar)); outline-offset: -6px; }
.vdk-area{ position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vdk-stage{ position: relative; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
.vdk-stage .vdk-photo{ position: absolute; inset: 0; display: block; pointer-events: none; object-fit: fill; }
.vdk-stage .vdk-gl{ position: absolute; inset: 0; display: block; cursor: grab; }
.vdk-stage.is-dragging .vdk-gl{ cursor: grabbing; }
.vdk-stage:focus-visible{ box-shadow: 0 0 0 2px var(--vd-accent, var(--cedar)) inset; }
.vdk-stage .vdk-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; background: #000; }
.vdk-stage .vdk-video[hidden]{ display: none; }
.vdk-shoot{
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3;
  width: 64px; height: 64px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 4px solid rgba(255,255,255,0.95); background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.vdk-shoot span{ width: 48px; height: 48px; border-radius: 50%; background: #fff; }
.vdk-shoot:active span{ transform: scale(0.92); }
.vdk-shoot[hidden], .vdk-live-cancel[hidden]{ display: none; }
.vdk-live-cancel{
  position: absolute; right: 10px; top: 10px; z-index: 3; height: 32px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 0; background: rgba(23,48,31,0.85); color: #F5EFE3; font: 600 13px/1 var(--font-body);
}
/* élő kameraképnél a mentés és a másik fotó gomb nem kell */
.vdk-layer.is-live .vdk-tb[data-act="save"], .vdk-layer.is-live label.vdk-tb{ display: none; }
.vdk-badge{
  position: absolute; right: 10px; top: 10px; pointer-events: none;
  padding: 4px 8px; border-radius: 6px; background: rgba(245,239,227,0.9); color: #2B2A22;
  font: 600 10px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
}
.vdk-status{
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); pointer-events: none;
  padding: 6px 12px; border-radius: 999px; background: rgba(23,48,31,0.85); color: #F5EFE3;
  font: 500 12px/1.3 var(--font-body); white-space: nowrap;
}
.vdk-status[hidden]{ display: none; }

/* látóhatár (a finomhangolásban bekapcsolva) */
.vdk-horizon{ position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed #7FD3FF; pointer-events: none; }
.vdk-horizon[hidden]{ display: none; }
.vdk-horizon-grip{
  position: absolute; left: 10px; top: -14px; height: 26px; padding: 0 10px; border-radius: 13px;
  display: flex; align-items: center; background: #7FD3FF; color: #0b2533;
  font: 600 11px/1 var(--font-body); pointer-events: auto; cursor: ns-resize; touch-action: none;
}

/* feltöltő kártya */
.vdk-empty{
  position: absolute; inset: 0; overflow: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 10px;
  padding: 56px 20px 20px; text-align: center; color: #F5EFE3;
  background: radial-gradient(ellipse at 50% 30%, #3c5a3f 0%, #1d2a20 75%);
}
.vdk-empty[hidden]{ display: none; }
.vdk-empty-title{ margin: 0; font: 600 18px/1.25 var(--font-body); }
.vdk-empty-text{ margin: 0; max-width: 46ch; font: 400 14px/1.45 var(--font-body); color: #DCE3D3; }
.vdk-empty-msg{ margin: 0; max-width: 46ch; padding: 8px 12px; border-radius: 10px; background: rgba(245,239,227,0.14); font: 500 13px/1.4 var(--font-body); color: #F5EFE3; }
.vdk-empty-msg[hidden]{ display: none; }
.vdk-empty-note{ margin: 0; font: 400 12px/1.4 var(--font-body); color: #B8C2AE; }
.vdk-empty-row{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.vdk-btn{
  height: 40px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(245,239,227,0.5); background: transparent; color: #F5EFE3;
  font: 600 14px/1 var(--font-body);
}
label.vdk-btn{ display: inline-flex; align-items: center; justify-content: center; }
label.vdk-tb{ box-sizing: border-box; }
/* a fájlválasztók láthatatlanok, de nem display:none (a <label for> így minden telefonon működik) */
.vdk-file-input{ position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); pointer-events: none; }
.vdk-btn-main{ background: var(--vd-accent, var(--cedar)); border-color: var(--vd-accent, var(--cedar)); }
.vdk-btn:hover{ filter: brightness(1.08); }
.vdk-btn:focus-visible{ outline: 2px solid #F5EFE3; outline-offset: 2px; }

/* gombsor a fotó alatt */
.vdk-bar{
  flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; align-items: flex-end;
  padding: 6px 10px 8px;
  background: var(--vd-surface, #EFE9DA); border-top: 1px solid var(--vd-line, rgba(43,42,34,0.12));
}
.vdk-bar[hidden]{ display: none; }
.vdk-grp{ display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto; }
.vdk-grp-label{ font: 600 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--vd-muted, #6A6553); text-align: center; }
.vdk-grp-btns{ display: flex; gap: 4px; }
.vdk-tb{
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--vd-line, rgba(43,42,34,0.12)); background: #fff; color: var(--vd-text, #2B2A22);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.vdk-tb svg{ width: 18px; height: 18px; }
.vdk-tb:hover{ border-color: var(--vd-accent, var(--cedar)); color: var(--vd-accent, var(--cedar)); }
.vdk-tb.is-pressed{ background: var(--vd-accent, var(--cedar)); border-color: var(--vd-accent, var(--cedar)); color: #fff; }
.vdk-tb:focus-visible{ outline: 2px solid var(--vd-accent, var(--cedar)); outline-offset: 2px; }

/* finomhangolás */
.vdk-more{
  position: absolute; right: 10px; bottom: 64px; z-index: 6; width: min(280px, calc(100% - 20px));
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: var(--vd-surface, #EFE9DA); border: 1px solid var(--vd-line, rgba(43,42,34,0.12)); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25); font-family: var(--font-body); color: var(--vd-text, #2B2A22);
}
.vdk-more[hidden]{ display: none; }
.vdk-field{ display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 600; }
.vdk-field input{ width: 100%; accent-color: var(--vd-accent, var(--cedar)); }
.vdk-check{ display: flex; align-items: center; gap: 8px; font-size: 13px; }
.vdk-check input{ accent-color: var(--vd-accent, var(--cedar)); width: 16px; height: 16px; }
.vdk-forget{ align-self: flex-start; margin-top: 2px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 12px/1.3 var(--font-body); color: var(--vd-accent, var(--cedar)); text-decoration: underline; }
.vdk-more-note{ margin: 0; font-size: 11.5px; color: var(--vd-muted, #6A6553); line-height: 1.4; }

/* teljes képernyőn a doboz négyzetes (vd-image-zoom.js) – a fotó benne középre igazodik */
.vd-canvas-zoomed .vdk-switch{ top: 20px; left: 20px; }

/* [VD-35] élő kamera fekvő telefonon: teljes képernyő, semmi nem takarja */
html.vdk-cam-full, html.vdk-cam-full body{ overflow: hidden !important; }
html.vdk-cam-full .vdk-chain{ position: static !important; transform: none !important; filter: none !important; z-index: auto !important; contain: none !important; will-change: auto !important; }
html.vdk-cam-full .vdk-layer{ position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; z-index: 2147483000 !important; background: #000; }
html.vdk-cam-full .vdk-bar, html.vdk-cam-full .vdk-switch, html.vdk-cam-full .vdk-more, html.vdk-cam-full .vdk-badge{ display: none !important; }
html.vdk-cam-full .vd-price-card, html.vdk-cam-full header.site{ visibility: hidden !important; }
html.vdk-cam-full .vdk-shoot{ left: auto; right: calc(16px + env(safe-area-inset-right)); top: 50%; bottom: auto; transform: translateY(-50%); }
html.vdk-cam-full .vdk-live-cancel{ right: auto; left: calc(12px + env(safe-area-inset-left)); top: calc(10px + env(safe-area-inset-top)); }

/* [VD-34] csatolás az ajánlatkéréshez (az #ajanlat űrlapon, a szabályzat-elfogadás fölött) */
.vdk-consent[hidden], .vdk-consent [hidden]{ display: none !important; }
.vdk-consent{ display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--paper-deep, rgba(43,42,34,0.05)); }
.vdk-consent-row{ display: flex; gap: 12px; align-items: flex-start; padding-left: 28px; }
.vdk-consent-thumb{ flex: 0 0 auto; width: 96px; height: auto; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.vdk-consent-note{ flex: 1 1 0; min-width: 0; }
.vdk-consent-note, .vdk-consent-open{ margin: 0; font-size: 12px; line-height: 1.45; color: var(--vd-muted, #6A6553); }
.vdk-consent-open{ font-size: 13px; color: var(--vd-text, #2B2A22); }
.vdk-consent-btn{ padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--vd-accent, var(--cedar)); text-decoration: underline; }

@media (max-width: 767px){
  .vdk-switch{ top: 8px; left: 8px; padding: 3px; }
  .vdk-switch-btn{ height: 28px; padding: 0 10px; font-size: 0.72rem; }
  .vdk-bar{ gap: 4px 8px; padding: 5px 6px 6px; }
  .vdk-grp-label{ font-size: 9px; }
  .vdk-tb{ width: 36px; height: 36px; }
  .vdk-empty{ padding-top: 50px; }
  .vdk-empty-title{ font-size: 16px; }
  .vdk-empty-text{ font-size: 13px; }
}
@media (prefers-reduced-motion: reduce){ .vdk-btn:hover{ filter: none; } }