/* ===========================
   Viikinkikone 3D-laskuri – Täysi responsiivinen CSS
   Päiväys: 2026-01-22
   Tavoite:
   - Skaalautuu kaikkiin näyttökokoihin (320px → 4K)
   - Hyvä mobiilissa (table scroll, isot painikkeet)
   - Ei riko nykyisiä VK3D-luokkia/ID:itä
   =========================== */

/* ---------- Reset & perus ---------- */
:root{
  --bg1:#0d1c21;
  --bg2:#19322e;
  --card: rgba(20,22,32,0.98);
  --card2:#161c26;
  --muted:#9aa7c6;
  --text:#f4f4f4;
  --ink:#111;
  --accent:#ffe566;
  --accent2:#5fd7ff;
  --danger:#ff5a5a;
  --shadow: 0 6px 60px #0008, 0 1.5px 8px #2229;

  --radius-xl:22px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;

  --gap: clamp(12px, 2.0vw, 28px);

  --content-max: 1800px;   /* desktop leveys (wider for pro layout) */
  --content-pad: clamp(14px, 3.5vw, 36px);

  --line: 1px solid rgba(255, 229, 102, 0.25);
}

*{ box-sizing:border-box; }

/* Force strong contrast for VK3D area to ensure headings, labels and table headers are readable
   regardless of surrounding theme. Scoped to .vk3d-bg to avoid affecting the rest of the site. */
.vk3d-bg h1, .vk3d-bg h2, .vk3d-bg h3, .vk3d-bg label, .vk3d-bg .vk3d-radio-title, .vk3d-bg .filetable th {
  color: #ffffff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Extra enforcement for labels and table headers to ensure consistent contrast */
.vk3d-bg label, .vk3d-bg .vk3d-radio-title, .vk3d-bg .vk3d-basic-info, .vk3d-bg .filetable th { color: #ffffff !important; font-weight: 900 !important; opacity: 1 !important; }
.vk3d-bg .filetable th { background: rgba(0,0,0,0.18) !important; }
.vk3d-bg small, .vk3d-bg .vk3d-radio-hint, .vk3d-bg .vk3d-card-text { color: #f6f6f6 !important; opacity: 1 !important; }
.vk3d-bg #vk3d-slicer-panel label, .vk3d-bg #vk3d-slicer-panel .vk3d-radio-title { color: #ffffff !important; font-weight:700 !important; }

/* Additional contrast fixes for inline-styled muted text and misc UI elements */
.vk3d-bg .vk3d-basic-info, .vk3d-bg .vk3d-adhesion-info, .vk3d-bg .b-sub, .vk3d-bg .vk3d-tools-title,
.vk3d-bg .vk3d-mode-btn, .vk3d-bg .vk3d-mode-btn.active, .vk3d-bg .vk3d-popover, .vk3d-bg .vk3d-tip {
  color: #eaf6ff !important;
}
/* Make mode buttons clearly legible on dark backgrounds */
.vk3d-bg .vk3d-mode-btn{ background: rgba(255,255,255,0.03); color: #eaf6ff; border: 1px solid rgba(255,255,255,0.04); padding:6px 10px; border-radius:8px; }
.vk3d-bg .vk3d-mode-btn.active{ background: rgba(255,255,255,0.10); color: #ffffff; font-weight:800; }

/* Override common inline-muted colors inserted by JS so text is readable */
.vk3d-bg span[style*="#5c6675"], .vk3d-bg span[style*="#9aa7c6"], .vk3d-bg div[style*="color:#9aa7c6"]{
  color: #eaf6ff !important;
}

/* Ensure small helper text is still readable */
.vk3d-bg small, .vk3d-bg .vk3d-radio-hint, .vk3d-bg .vk3d-card-text { color: #f0f5fb !important; opacity: 1 !important; }

html, body{
  margin:0;
  padding:0;
  font-family:'Montserrat', Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(ellipse at top right, var(--bg1) 70%, var(--bg2) 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, canvas{ max-width:100%; height:auto; }

/* ---------- Layout container ---------- */
.container{
  width: min(var(--content-max), calc(100% - clamp(16px, 5vw, 56px)));
  margin: clamp(14px, 4vw, 40px) auto;
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: var(--content-pad);
  box-shadow: var(--shadow);
}

/* Fullscreen layout: make the calculator fill the viewport and scale with resolution */
body.vk3d-fullscreen{ height:100vh; overflow:hidden; }
body.vk3d-fullscreen .container{ width:100vw !important; height:100vh !important; max-width:none !important; margin:0 !important; border-radius:0 !important; padding: var(--content-pad) !important; display:flex; flex-direction:column; }
body.vk3d-fullscreen .vk3d-main-flex{ flex:1 1 auto; display:grid; grid-template-columns: minmax(420px, 520px) 1fr; gap: var(--gap); align-items:stretch; overflow:hidden; }
body.vk3d-fullscreen .vk3d-main-flex > *{ overflow:auto; }
body.vk3d-fullscreen .vk3d-canvasbox{ display:flex; align-items:stretch; justify-content:center; }
body.vk3d-fullscreen #preview{ height:100% !important; max-height:none !important; border-radius:8px !important; }
body.vk3d-fullscreen .vk3d-total-wrap{ position: relative; z-index: 3; }

/* Ensure mode buttons and preview tools are visible on fullscreen */
body.vk3d-fullscreen #vk3d-preview-tools{ right:18px; top:18px; }


/* ---------- Otsikot ---------- */
h1, .vk3d-title{
  color: var(--accent);
  margin: 0 0 12px 0;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2.2rem);
  letter-spacing: 0.5px;
  text-shadow: 0 2px 12px #0006;
}

/* ---------- Ohjekortti ---------- */
.vk3d-ohje-kortti{
  background: rgba(15,18,25,0.97);
  border: 2px solid var(--accent);
  border-radius: 16px;
  margin-bottom: clamp(14px, 2vw, 26px);
  padding: clamp(12px, 2.4vw, 18px) clamp(12px, 3vw, 24px);
  box-shadow: 0 2px 16px #2226;
  color: var(--accent);
}
.vk3d-ohje-otsikko{
  font-weight: 900;
  margin-bottom: 8px;
  font-size: 1.05em;
  letter-spacing: .05em;
}
.vk3d-ohje-ikoni{ font-size: 1.13em; margin-right: .35em; }

/* ---------- Pääalueen responsiivinen grid ---------- */
.vk3d-main-flex{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items:start;
}
@media (min-width: 980px){
  /* Two-column desktop layout: left = table + settings, right = preview + price */
  .vk3d-main-flex{
    grid-template-columns: minmax(480px, 640px) minmax(560px, 1fr);
  }
}

/* Typography tweaks */
.vk3d-title { font-weight:800; letter-spacing: -0.3px; }

/* Tooltip icon */
.vk3d-tip{ display:inline-block; width:18px; height:18px; line-height:18px; text-align:center; border-radius:50%; border:1px solid rgba(0,0,0,0.12); background:#fff; color:#14202b; font-weight:800; cursor:pointer; font-size:12px; box-shadow:0 2px 6px rgba(0,0,0,0.06); }
.vk3d-tip:hover, .vk3d-tip:focus{ transform:scale(1.06); box-shadow:0 6px 18px rgba(0,0,0,0.12); outline:none; }

/* Modal (pro modal) */
.vk3d-modal-backdrop{ position:fixed; inset:0; z-index:9998; background:rgba(1,8,14,0.55); display:flex; align-items:center; justify-content:center; }
.vk3d-modal{ background:#fff; color:#0e1720; border-radius:12px; padding:20px; max-width:720px; width:92%; box-shadow:0 10px 40px rgba(0,0,0,0.36); }
.vk3d-modal h2{ margin:0 0 8px 0; }
.vk3d-btn{ background:#eef3fb; border:1px solid rgba(0,0,0,0.06); padding:8px 12px; border-radius:8px; cursor:pointer; }
.vk3d-btn-primary{ background:#042a5b; color:#fff; border-color:transparent; }
.vk3d-fileside{ min-width: 0; }
.vk3d-canvasbox{
  min-width: 0;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* ---------- Canvas / 3D preview ---------- */
#preview{
  width: 100%;
  /* Suurempi 3D-näkymä — täyttää oikean sarakkeen tilan paremmin */
  height: clamp(320px, 78vh, 980px);
  max-width: 1600px;
  min-height: 260px;
  margin: 0 auto;
  display: block;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  /* Studio-taustagradienti: erottaa 3D-alueen selkeästi */
  background: radial-gradient(ellipse at 60% 30%, #1a2a3a 0%, #0d1c24 55%, #07131a 100%);
  box-shadow: 0 8px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Suuremmat näytöt: näkymä saa enemmän pystytilaa */
@media (min-width: 1400px) {
  #preview { height: clamp(520px, 82vh, 1100px); }
}
@media (min-width: 1800px) {
  #preview { height: clamp(640px, 84vh, 1280px); }
}

/* ---------- Yleiset form-kentät (jos käytössä) ---------- */
input, select, textarea, button{
  font-family: inherit;
}
input:focus, select:focus, textarea:focus, button:focus{
  outline: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible{
  outline: 3px solid rgba(95,215,255,0.45);
  outline-offset: 2px;
}

/* ---------- Tiedostotaulukon “kortti” + scroll mobiilissa ---------- */
.filetable{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card2);
  color:#fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 0.98em;
  margin-top: 12px;
}

/* table wrapper mobiili-scroll (ei vaadi HTML-muutosta) */
#filetable{
  width:100%;
}
@media (max-width: 820px){
  .filetable{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
  }
  .filetable thead, .filetable tbody, .filetable tr{
    width: max-content; /* antaa pöydän venyä */
  }
}

/* Taulukon solut */
.filetable th, .filetable td{
  padding: 9px 8px;
  border-bottom: 1.5px solid rgba(255,229,102,0.25);
  text-align:left;
  background: transparent;
  vertical-align: top;
}
.filetable th{
  background: var(--card2);
  color: var(--accent);
  font-weight: 800;
  font-size: 1.00em;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Rivit */
.filetable tr{ transition: background .2s, border-left .2s; }
.filetable tr.active, .filetable tr:hover{
  background: #1d2a35;
  border-left: 4px solid var(--accent);
}
.filetable tr.invalid{
  background: rgba(190,29,29,0.14);
}

/* Inputs taulukossa */
.filetable input,
.filetable select,
.filetable textarea{
  background:#232c39;
  color: var(--accent);
  border: 1.5px solid rgba(255,229,102,0.35);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.98em;
}
.filetable input[type="range"]{ accent-color: var(--accent); }
.filetable textarea{
  min-width: 120px;
  min-height: 44px;
  resize: vertical;
}

/* Prosenttimerkki */
.percent-cell{ white-space: nowrap; display:inline-flex; align-items:center; gap:4px; color: #ffffff; }
.percent-cell .percent-label{ margin-left: 2px; color: #ffffff; font-weight:700; background: rgba(0,0,0,0.16); padding: 2px 6px; border-radius:6px; }

/* Pienet napit */
.filetable .btn{
  background: var(--accent);
  color: #111;
  border: 0;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 1.08em;
  box-shadow: 0 1.5px 7px #2225;
  cursor:pointer;
  transition: background .16s, box-shadow .17s, transform .13s;
}
.filetable .btn:hover{
  background:#fffab6;
  box-shadow:0 4px 18px rgba(255,229,102,0.35);
  transform: scale(1.05);
}
.filetable .btn:disabled,
.filetable button:disabled{
  opacity:0.55;
  cursor:not-allowed;
  transform:none;
}

/* ---------- Yhteishinta (ystävällinen kortti) ---------- */
.totalprice{
  margin: 18px 0 8px 0;
  animation: fadeIn .7s;
}
@keyframes fadeIn{ from{opacity:0; transform: translateY(-8px);} to{opacity:1; transform:none;} }

.vk3d-total-wrap{
  margin: 14px 0 10px 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
}
.vk3d-total-label{
  font-weight: 900;
  font-size: 1.02em;
  color: #eaf6ff;
  margin-bottom: 6px;
}
.vk3d-total-value{
  font-weight: 1000;
  font-size: clamp(1.6em, 1.2em + 1.3vw, 2.1em);
  letter-spacing: .2px;
  color: #ffffff;
}
.vk3d-total-sub{
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
  font-size: .96em;
}

/* ---------- Breakdown / erittely ---------- */
.result{ color:#d7eeff; margin-bottom: 8px; }
#breakdown, #breakdown div, #breakdown span{ color:#fff !important; }

.b-card{
  background: var(--card2);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: 0 2px 14px #0007;
  margin-top: 10px;
}
.b-section-title{ color: var(--accent); font-weight: 900; margin-bottom: 8px; }
.b-table{ width:100%; border-collapse: separate; border-spacing:0 6px; }
.b-table td{ padding: 6px 6px; }
.b-table .b-name{ color:#d7eeff; font-weight: 700; }
.b-table .b-meta{ color:#9fc2ff; font-size: .95em; }
.b-right{ text-align:right; color:#fff; white-space: nowrap; }
.b-strong{ font-weight: 900; }
.b-green{ color:#00e05a; }
.b-total td{ border-top:2px solid rgba(255,229,102,0.35); padding-top: 10px; }
.b-sep td{ border-bottom:1px dashed rgba(255,229,102,0.25); height: 6px; }
.b-warn{ color: var(--danger); font-weight: 900; }
#breakdown .chip{
  display:inline-block;
  background: var(--accent);
  color:#222;
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 900;
  margin: 6px 0 2px;
  font-size: .97em;
}

/* Mobiilissa breakdown taulukko tiiviimmäksi */
@media (max-width: 520px){
  .b-table td{ padding: 6px 2px; }
  .b-right{ white-space: normal; }
}

/* ---------- Varoitukset ja ehdot ---------- */
.warning{
  margin-top: 12px;
  background: #be1d1d;
  color:#fff;
  font-weight: 800;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 1.5px 9px #2228;
  font-size: 1.02em;
}
.vk3d-alvnote{ font-size:.97em; margin-top: 18px; color: var(--accent); }

.terms-box{
  margin: 16px 0;
  font-size: 1em;
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.terms-box input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent);
}
.terms-box label, .terms-box a{ color: var(--accent); }
.terms-box a{ text-decoration: underline; }

/* ---------- Päätoimintonappi ---------- */
.btn[type="submit"], button.btn[type="submit"]{
  background: var(--accent);
  color: #121211;
  font-weight: 900;
  border-radius: 14px;
  font-size: 1.08em;
  padding: 14px 22px;
  margin-top: 16px;
  box-shadow: 0 2px 16px rgba(255,229,102,0.10), 0 1.5px 10px #2227;
  border: none;
  transition: background .16s, color .14s, box-shadow .19s, transform .15s;
  cursor: pointer;
  width: 100%;
  max-width: 520px;
}
.btn[type="submit"]:hover{
  background:#fffab6;
  color:#222;
  box-shadow:0 5px 22px rgba(255,229,102,0.26);
  transform: scale(1.02);
}
@media (min-width: 900px){
  .btn[type="submit"], button.btn[type="submit"]{
    width: auto;
  }
}

/* ---------- Ohje-painike (ei peitä) ---------- */
.vk3d-help-btn{
  position: fixed;
  top: clamp(92px, 8vh, 140px);
  right: 22px;
  background: var(--accent);
  color: #181818;
  border: none;
  border-radius: 999px;
  box-shadow: 0 2px 16px #1115;
  padding: 11px 20px 11px 16px;
  font-size: 1.05em;
  font-weight: 900;
  cursor: pointer;
  z-index: 1090;
  letter-spacing: .02em;
  transition: background .2s, color .2s, transform .17s;
}
.vk3d-help-btn:hover{ background:#fffcc6; color:#7a6500; transform: scale(1.05); }

/* Tablet & mobiili: alas vasemmalle */
@media (max-width: 900px){
  .vk3d-help-btn{
    top: auto;
    right: auto;
    left: max(12px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
    padding: 12px 16px;
    font-size: 1.02em;
  }
}

/* ---------- Ohje-modal ---------- */

/* -------------------- Accessibility & clarity fixes -------------------- */
/* Dropdown optionit varmasti näkyviksi */
.filetable select{
  color: #eef3f8 !important;
  background: rgba(255,255,255,0.04) !important;
}
.filetable select option{
  background: #0f1620 !important;
  color: #eef3f8 !important;
  opacity: 1 !important;
}
.filetable select option:disabled{
  color: rgba(238,243,248,0.65) !important;
}
.filetable select::-ms-expand{ display:none; }

/* Numerokentät selkeiksi */
.filetable input[type="number"]{
  min-width: 72px !important;
  width: 90px !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums;
}
#vk3d-slicer-panel input[type="number"]{
  min-width: 90px !important;
  width: 110px !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums;
}

/* Mode-based visibility */
body.vk-basic .vk3d-advanced,
body.vk-basic .vk3d-pro-only{
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  user-select: none !important;
}
body.vk-pro .vk3d-advanced,
body.vk-pro .vk3d-pro-only{
  display: block !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Dropzone (append-only drag & drop) */
#vk3d-dropzone{
  border: 2px dashed rgba(95,215,255,0.12);
  color: var(--accent2);
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 900;
  display: none; /* shown via JS on drag */
  text-align: center;
  background: linear-gradient(180deg, rgba(95,215,255,0.02), rgba(95,215,255,0.01));
  margin-top: 8px;
}
#vk3d-dropzone.show{ display:block; }
#vk3d-dropzone small{ color: var(--muted); font-weight:600; }

.vk3d-help-modal{
  position: fixed;
  inset: 0;
  background: rgba(18,20,28,0.88);
  z-index: 2100;
  display: none;
}
.vk3d-help-modal.active{ display:block; animation: vk3d-fadein .22s ease; }
@keyframes vk3d-fadein{ from{opacity:0;} to{opacity:1;} }

.vk3d-help-content{
  background: #20232d;
  color: var(--accent);
  width: min(520px, calc(100% - 24px));
  margin: clamp(14px, 6vh, 60px) auto;
  border-radius: 19px;
  box-shadow: 0 8px 54px #000a;
  padding: clamp(16px, 3vw, 28px) clamp(14px, 3vw, 32px);
  font-size: 1.05em;
  position: relative;
  max-height: 82vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.vk3d-help-content h2{
  margin: 0 0 10px 0;
  font-size: 1.28em;
  color: var(--accent);
  border-bottom: 1px solid rgba(255,229,102,0.2);
  padding-bottom: 10px;
}
.vk3d-help-content h3{
  font-size: 1.10em;
  font-weight: 900;
  color: #ffffff;
  margin: 18px 0 8px 0;
}
.vk3d-help-content ol,
.vk3d-help-content ul,
.vk3d-help-content li{ color: #fff7c0; }
.vk3d-help-content li{ margin-bottom: 8px; line-height: 1.5; }

.vk3d-help-close{
  position:absolute;
  right: 18px;
  top: 10px;
  font-size: 1.72em;
  color: var(--accent);
  cursor:pointer;
  font-weight: 900;
  z-index: 2;
}
.vk3d-help-close:hover{ color:#fffab6; }

/* Inline popover next to ? icon */
.vk3d-popover{ position: absolute; z-index: 9999; max-width: 300px; background: #1b2430; color: #fff7c0; padding: 8px 10px; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); font-size: 0.95rem; transform-origin: top left; animation: vk3d-pop .14s cubic-bezier(.2,.9,.3,1); }
.vk3d-popover .vk3d-pop-close{ position:absolute; right:6px; top:4px; border:0; background:transparent; color:#e8f3ff; font-weight:800; cursor:pointer; font-size:1rem }
@keyframes vk3d-pop{ from{ opacity:0; transform: scale(0.92) translateY(-6px); } to{ opacity:1; transform:none; } }
.vk3d-popover:after{ content:''; position:absolute; width:10px; height:10px; background: #1b2430; transform: rotate(45deg); left:12px; top:-5px; box-shadow: -2px -2px 6px rgba(0,0,0,0.15); }
.vk3d-popover.invert:after{ top:auto; bottom:-5px; transform: rotate(45deg); }


/* body flag while popup is open */
body.vk3d-help-open{ overflow: hidden; }

/* Scrollbar */
.vk3d-help-content::-webkit-scrollbar{ width: 10px; }
.vk3d-help-content::-webkit-scrollbar-track{ background:#1a1d26; border-radius:10px; }
.vk3d-help-content::-webkit-scrollbar-thumb{ background:#3a3f52; border-radius:10px; }
.vk3d-help-content{ scrollbar-color:#3a3f52 #1a1d26; scrollbar-width: thin; }

/* ---------- Toast ---------- */
.vk3d-toast{
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(16px);
  background: #121820;
  color: #e9f6ff;
  border: 1px solid #2b3544;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  box-shadow: 0 8px 30px #000a;
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
  z-index: 2200;
  max-width: min(560px, calc(100% - 24px));
  text-align:center;
}
.vk3d-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Slicer panel (jos JS luo sen) ---------- */
#vk3d-slicer-panel{
  border-radius: 16px;
}
#vk3d-slicer-panel select,
#vk3d-slicer-panel input,
/* Mode & beginner box styles */
.vk3d-mode-toggle{ display:flex; gap:8px; margin-bottom:10px; }
.vk3d-mode-btn{ padding:8px 10px; border-radius:10px; border:1px solid rgba(0,0,0,0.08); background:#fff; cursor:pointer; font-weight:700 }
.vk3d-mode-btn.active{ background:#062a56; color:#fff; border-color:rgba(6,42,86,0.6) }
.vk3d-basic-box{ display:block; padding:10px; border-radius:8px; background:linear-gradient(180deg,#fff,#f7fbff); border:1px solid rgba(6,42,86,0.06); margin-bottom:12px }
.vk3d-basic-info{ font-weight:700; margin-bottom:8px; color:#000000 }
.vk3d-radio-group{ margin-bottom:8px }
.vk3d-radio-title{ font-weight:800; margin-bottom:6px; display:block !important; }
.vk3d-basic-box .vk3d-radio-title{ display:block !important; color:#000000 !important; font-weight:1000 !important; font-size:1.02em !important; margin-bottom:8px !important; }
.vk3d-radio-row{ display:flex; gap:12px; flex-wrap:wrap }
/* Beginner card clarity: dark text on light bg, full opacity (ensure high contrast) */
.vk3d-basic-box .vk3d-radio-option{ display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:10px; border:1px solid rgba(6,42,86,0.08); background:#ffffff; color:#000000; opacity:1 }
.vk3d-basic-box .vk3d-radio-option *{ color: #000000 !important; opacity: 1 !important; }
.vk3d-basic-box .vk3d-radio-option input{ margin-right:6px }
.vk3d-basic-box .vk3d-radio-label{ font-weight:900; color:#000000 !important }
.vk3d-basic-box .vk3d-card-text{ margin-top:6px; font-size:0.95em; color:#000000 !important; font-weight:700; max-width:420px }
.vk3d-basic-box .vk3d-radio-hint{ font-size:0.86em; color:#000000 !important }

/* Extra enforce: ensure any heading/label inside beginner box is visible despite theme overrides */
.vk3d-basic-box .vk3d-radio-title, .vk3d-basic-box .vk3d-basic-info, .vk3d-basic-box h3, .vk3d-basic-box legend { color: #000000 !important; font-weight: 1000 !important; font-size: 1.02em !important; }

/* Force readable dark text in beginner cards (overrides high-specificity white rules in #vk3d-slicer-panel) */
.vk3d-bg #vk3d-slicer-panel .vk3d-basic-box,
.vk3d-bg #vk3d-slicer-panel .vk3d-basic-box label,
.vk3d-bg #vk3d-slicer-panel .vk3d-basic-box .vk3d-radio-title,
.vk3d-bg #vk3d-slicer-panel .vk3d-basic-box .vk3d-basic-info,
.vk3d-bg #vk3d-slicer-panel .vk3d-basic-box .vk3d-radio-label,
.vk3d-bg #vk3d-slicer-panel .vk3d-basic-box .vk3d-radio-hint,
.vk3d-bg #vk3d-slicer-panel .vk3d-basic-box .vk3d-card-text,
.vk3d-bg #vk3d-slicer-panel .vk3d-basic-box legend,
.vk3d-bg #vk3d-slicer-panel .vk3d-basic-box h3 {
  color: #0b0f14 !important;
  opacity: 1 !important;
}
/* Selected card highlight (kept simple: visual uplift, no animations) */
.vk3d-basic-box .vk3d-radio-option:has(input:checked){ background:linear-gradient(180deg,#e6f6ff,#f1fbff); border-color:#0a4b7a; box-shadow: 0 6px 20px rgba(10,75,122,0.08); transform: translateY(-2px); }
.vk3d-tip{ margin-left:8px; background:#e6f0ff; padding:2px 6px; border-radius:4px; cursor:help; font-weight:700 }
.vk3d-adhesion-info{ margin-top:6px; font-size:.95em; color:#4b5563 }
.vk3d-unsure-btn{ margin-top:8px; background:linear-gradient(180deg,#062a56,#0a3b7a); color:#fff; border-radius:10px; padding:8px 12px; font-weight:800 }

/* Preview tool overlay (small, unobtrusive) */
#preview-wrap{
  position:relative;
  overflow:hidden;
  pointer-events:auto;
  border-radius:24px;
  border:1px solid rgba(18,24,32,0.12);
  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,0.75), transparent 34%),
    linear-gradient(180deg, #f5f7f9 0%, #e9edf1 58%, #dde3e8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 14px 36px rgba(10,18,28,0.14);
}
#preview-wrap::before{
  content:'';
  position:absolute;
  left:12%;
  right:12%;
  bottom:8%;
  height:26%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(100,110,120,0.10), rgba(100,110,120,0.00) 70%);
  filter:blur(16px);
  pointer-events:none;
}
#preview-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.38), transparent 24%, transparent 78%, rgba(90,100,112,0.06));
  pointer-events:none;
}
#vk3d-preview-tools{
  position:absolute;
  right:16px;
  top:16px;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  z-index:1200;
  pointer-events:auto;
  align-items:center;
  max-width:min(92%, 780px);
}
#vk3d-preview-tools .vk3d-tools-title{
  font-weight:800;
  font-size:0.88rem;
  margin-right:4px;
  color:#314152;
  opacity:1;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.82);
  border:1px solid rgba(20,30,40,0.12);
  backdrop-filter:blur(6px);
}
.vk3d-pro-info{ background: rgba(255,255,255,0.04); color:#fff; padding:8px 10px; border-radius:8px; font-weight:700; }
#vk3d-preview-tools button{
  pointer-events:auto;
  background:rgba(255,255,255,0.78);
  color:#243342;
  border:1px solid rgba(20,30,40,0.12);
  padding:7px 10px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  transition: background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease, border-color .18s ease;
  backdrop-filter:blur(6px);
}
#vk3d-preview-tools button:hover{
  transform: translateY(-2px);
  background:rgba(255,255,255,0.94);
  border-color:rgba(20,30,40,0.18);
  box-shadow:0 8px 18px rgba(20,30,40,0.12);
}
#vk3d-preview-tools button.active{
  background:linear-gradient(180deg, #314152, #243342);
  color:#ffffff;
  transform: translateY(-1px);
  border-color:rgba(36,51,66,0.36);
  box-shadow:0 10px 22px rgba(20,30,40,0.18);
}
#preview{ pointer-events:auto; }

#vk3d-preview-hud{
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:1100;
  max-width:min(430px, calc(100% - 32px));
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,0.80);
  border:1px solid rgba(20,30,40,0.10);
  color:#22313f;
  backdrop-filter:blur(8px);
  box-shadow:0 10px 26px rgba(20,30,40,0.12);
}
#vk3d-preview-hud.is-empty{
  opacity:0.95;
}
.vk3d-bg #vk3d-preview-tools .vk3d-tools-title{
  color:#243342 !important;
}
.vk3d-bg #vk3d-preview-tools button{
  color:#243342 !important;
}
.vk3d-bg #vk3d-preview-tools button.active{
  color:#ffffff !important;
}
.vk3d-bg #vk3d-preview-hud .vk3d-preview-eyebrow{
  color:#4a6177 !important;
}
.vk3d-bg #vk3d-preview-hud .vk3d-preview-title{
  color:#182632 !important;
}
.vk3d-bg #vk3d-preview-hud .vk3d-preview-meta{
  color:#526271 !important;
}
.vk3d-bg #vk3d-preview-hud .vk3d-preview-chip{
  color:#243342 !important;
}
.vk3d-bg #vk3d-preview-hud .vk3d-preview-note{
  color:#6c7a87 !important;
}
.vk3d-preview-eyebrow{
  display:inline-block;
  margin-bottom:8px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(36,51,66,0.08);
  color:#4a6177;
  font-size:0.76rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.vk3d-preview-title{
  margin:0;
  color:#182632;
  font-size:1.06rem;
  font-weight:900;
  line-height:1.2;
}
.vk3d-preview-meta{
  margin-top:6px;
  color:#526271;
  font-size:0.94rem;
  line-height:1.45;
}
.vk3d-preview-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.vk3d-preview-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.56);
  border:1px solid rgba(20,30,40,0.08);
  color:#243342;
  font-size:0.85rem;
  font-weight:800;
}
.vk3d-preview-note{
  margin-top:10px;
  color:#6c7a87;
  font-size:0.82rem;
  line-height:1.4;
}
.vk-color-swatch{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.14);
}
@media (max-width: 720px){
  #vk3d-preview-tools{
    left:12px;
    right:12px;
    top:12px;
    justify-content:flex-start;
  }
  #vk3d-preview-hud{
    left:12px;
    right:12px;
    bottom:12px;
    max-width:none;
    padding:12px 13px;
  }
  .vk3d-preview-title{
    font-size:0.98rem;
  }
}

/* Modal/popup animations: subtle and performant */
.vk3d-modal-backdrop{ animation: vk3d-fadein .18s ease; }
.vk3d-modal{ animation: vk3d-pop .18s cubic-bezier(.2,.9,.3,1); }

/* Card hover/selection transitions */
.filetable tr{ transition: background .2s, border-left .2s, transform .12s ease; }
.filetable tr:hover{ transform: translateY(-2px); }
.vk3d-basic-box .vk3d-radio-option{ transition: transform .12s ease, box-shadow .16s ease, background .12s ease; }
.vk3d-basic-box .vk3d-radio-option:has(input:checked){ transform: translateY(-4px); box-shadow: 0 8px 24px rgba(10,75,122,0.08); }


/* Pro info box styling */
.vk3d-pro-box{ margin-bottom:10px; }
.vk3d-pro-box .vk3d-pro-info{
  background: #fff6e6;
  padding:12px;
  border-radius:8px;
  color:#1b1b1b;
  font-weight:800;
  border-left: 4px solid var(--accent);
  box-shadow: none;
  margin-bottom:6px;
}
.vk3d-pro-box label{ display:flex; gap:8px; align-items:center; margin-top:6px; color:#0b2b3a; font-weight:900; }

/* Pro feedback messages (plain text for pro users) */
.vk3d-pro-feedback{
  font-weight:800;
  color: var(--accent2);
  margin-top:6px;
  font-size:0.98em;
}



/* Make desktop wide two-column layout clearer */
@media (min-width: 1200px){
  .vk3d-main-flex{ grid-template-columns: 420px 1fr; }
  .container{ width: min(var(--content-max), calc(100% - clamp(40px, 8vw, 120px))); }
}
#vk3d-slicer-panel select,
#vk3d-slicer-panel input,
#vk3d-slicer-panel input[type="number"]{
  width: 100%;
  max-width: 220px;
  background: #ffffff; /* selkeä tausta */
  color: #000000;      /* musta teksti */
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  padding: 6px 8px;
}
#vk3d-slicer-panel select option{ background:#fff; color:#000; }
#vk3d-slicer-panel label small{ color:#4b5563; } /* make helper text readable */
@media (max-width: 720px){
  #vk3d-slicer-panel{
    padding: 12px !important;
  }
  #vk3d-slicer-panel select,
  #vk3d-slicer-panel input{
    max-width: 100%;
  }
}

/* ---------- Sales polish / conversion UI ---------- */
.vk3d-hero{
  margin: 18px 0 20px;
  padding: 18px 20px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(95,215,255,0.18), transparent 34%),
    linear-gradient(135deg, rgba(255,229,102,0.10), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 40px rgba(5,10,18,0.18);
}
.vk3d-kicker{
  display:inline-block;
  margin-bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,229,102,0.16);
  color: var(--accent);
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .84rem;
}
.vk3d-hero-title{
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(1.22rem, 1rem + 1vw, 1.8rem);
  line-height: 1.15;
}
.vk3d-hero-copy{
  margin: 0;
  max-width: 900px;
  color: #eef4ff;
  font-size: 1rem;
  line-height: 1.6;
}
.vk3d-hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.vk3d-hero-points span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,0.08);
  color:#f8fbff;
  font-weight:800;
  border:1px solid rgba(255,255,255,0.10);
}

.vk3d-upload-box,
.vk3d-sales-box,
.vk3d-contact-box{
  backdrop-filter: blur(8px);
}
.vk3d-upload-box{
  margin: 8px 0 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,229,102,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
}
.vk3d-upload-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:10px;
}
.vk3d-upload-title{
  color:#fff;
  font-weight:900;
  font-size:1.05rem;
}
.vk3d-upload-copy{
  margin-top:4px;
  color:#d8e7ff;
  line-height:1.5;
}
.vk3d-upload-meta{
  white-space:nowrap;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,229,102,0.14);
  color: var(--accent);
  font-weight:900;
  font-size:.88rem;
}

.vk3d-next-steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin: 16px 0 18px;
}
.vk3d-next-step{
  padding:14px 14px 12px;
  border-radius:14px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
}
.vk3d-next-step strong{
  display:block;
  margin-bottom:6px;
  color:#fff;
  font-size:1rem;
}
.vk3d-next-step span{
  color:#d6e4f7;
  line-height:1.45;
}

.vk3d-sales-box{
  box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}
.vk3d-sales-box .vk3d-presets{
  margin-top: 0;
}
.vk3d-sales-box .vk3d-presets label{
  min-height: 56px;
  border-width: 1px;
}

.vk3d-contact-box label,
.vk3d-contact-box strong,
.vk3d-contact-box .vk3d-contact-title{
  color:#0f1722 !important;
  text-shadow:none !important;
}
.vk3d-contact-box input,
.vk3d-contact-box textarea{
  width:100%;
  margin-top:6px;
  background:#fff;
  color:#111;
  border:1px solid rgba(8,18,28,0.16);
  border-radius:12px;
  padding:12px 14px;
  box-shadow: inset 0 1px 2px rgba(8,18,28,0.04);
}
.vk3d-contact-box textarea{
  min-height: 120px;
  resize: vertical;
}
.vk3d-contact-box input::placeholder,
.vk3d-contact-box textarea::placeholder{
  color:#6b7280;
}

.vk3d-cta-wrap{
  position: relative;
  overflow: hidden;
}
.vk3d-cta-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,229,102,0.08), rgba(95,215,255,0.10));
  pointer-events:none;
}
.vk3d-cta-wrap > *{
  position:relative;
  z-index:1;
}
.vk3d-cta-btn{
  min-height:56px;
  font-size:1.02rem;
  letter-spacing:.01em;
}

@media (max-width: 960px){
  .vk3d-next-steps{
    grid-template-columns: 1fr;
  }
  .vk3d-upload-head{
    flex-direction:column;
  }
  .vk3d-upload-meta{
    white-space:normal;
  }
}

/* ---------- Pienet parannukset pienille näytöille ---------- */
@media (max-width: 600px){
  .container{
    width: calc(100% - 12px);
    padding: 16px 12px;
    border-radius: 18px;
  }
  #preview{
    height: clamp(180px, 34vh, 300px);
    border-width: 2px;
    border-radius: 16px;
  }
  .vk3d-ohje-kortti{
    font-size: .98em;
    padding: 12px 12px;
  }
  .filetable th, .filetable td{
    padding: 8px 8px;
  }
  .filetable textarea{
    min-width: 160px;
  }
}

/* ---------- Suuret näytöt ---------- */
@media (min-width: 1600px){
  .container{ width: min(1500px, calc(100% - 80px)); }
  #preview{ height: clamp(520px, 52vh, 740px); }
}

/* ---------- Print (jos joskus tulostetaan) ---------- */
@media print{
  body{ background:#fff; color:#000; }
  .container{ box-shadow:none; background:#fff; }
  .vk3d-help-btn, .vk3d-toast{ display:none !important; }
}
/* ==========================
   VK3D PRO UI OVERRIDE
   Liitä CSS:n loppuun
   ========================== */

:root{
  --vk-bg: #0b1116;
  --vk-card: rgba(20,22,32,0.96);
  --vk-card2: #121a24;
  --vk-line: rgba(255,255,255,0.08);
  --vk-line2: rgba(255,229,102,0.22);

  --vk-text: #eef3f8;
  --vk-muted: rgba(238,243,248,0.70);

  --vk-accent: #ffe566;
  --vk-accent-soft: rgba(255,229,102,0.18);
  --vk-info: #69d2ff;
  --vk-danger: #ff5a5a;

  --vk-radius-xl: 22px;
  --vk-radius-lg: 18px;
  --vk-radius-md: 14px;

  --vk-shadow: 0 18px 60px rgba(0,0,0,0.55);
  --vk-shadow-soft: 0 10px 30px rgba(0,0,0,0.35);
}

/* Tausta hieman rauhallisemmaksi */
html, body{
  background: radial-gradient(1100px 700px at 85% -10%, rgba(105,210,255,0.10), transparent 55%),
              radial-gradient(900px 700px at 10% 15%, rgba(255,229,102,0.08), transparent 55%),
              radial-gradient(ellipse at top right, #0b1218 60%, #071015 100%) !important;
  color: var(--vk-text);
}

/* Pääkortti */
.container{
  background: linear-gradient(180deg, rgba(20,22,32,0.98), rgba(14,18,26,0.96)) !important;
  border: 1px solid var(--vk-line);
  box-shadow: var(--vk-shadow) !important;
}

/* Otsikko: selkeä, premium */
h1, .vk3d-title{
  letter-spacing: .2px !important;
  font-weight: 900 !important;
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 2.1rem) !important;
  margin-bottom: 10px !important;
}

/* Lomakkeen yläosan elementit siistiksi */
label b{
  color: var(--vk-text) !important;
  font-weight: 800;
}
small{
  color: var(--vk-muted) !important;
}

/* ---- Taulukko: luettavuus, spacing, “pro” ---- */
.filetable{
  border: 1px solid var(--vk-line) !important;
  border-radius: var(--vk-radius-lg) !important;
  background: linear-gradient(180deg, #0f1620, #0c121a) !important;
  box-shadow: var(--vk-shadow-soft);
  overflow: hidden;
}

.filetable th{
  background: rgba(255,255,255,0.02) !important;
  color: rgba(255,229,102,0.92) !important;
  font-weight: 900 !important;
  font-size: 0.95em !important;
  border-bottom: 1px solid var(--vk-line) !important;
  padding: 12px 12px !important;
}

.filetable td{
  padding: 12px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  font-size: 0.98em;
}

.filetable tr:hover{
  background: rgba(105,210,255,0.06) !important;
}

.filetable tr.active{
  background: rgba(255,229,102,0.07) !important;
  border-left: 4px solid var(--vk-accent) !important;
}

/* Inputs taulukossa: yhtenäinen “enterprise” look */
.filetable input,
.filetable select,
.filetable textarea{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--vk-text) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.filetable input:focus,
.filetable select:focus,
.filetable textarea:focus{
  border-color: rgba(105,210,255,0.55) !important;
  box-shadow: 0 0 0 4px rgba(105,210,255,0.14) !important;
}

.filetable textarea{
  min-height: 44px !important;
  resize: vertical;
}

/* Range-säädin selkeämmäksi */
.filetable input[type="range"]{
  accent-color: var(--vk-accent) !important;
  height: 22px;
}

/* Pienet toimintonapit: yhtenäiset, ei “lelumaiset” */
.filetable .btn{
  background: rgba(255,229,102,0.16) !important;
  color: var(--vk-text) !important;
  border: 1px solid rgba(255,229,102,0.35) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
}

.filetable .btn:hover{
  background: rgba(255,229,102,0.22) !important;
  border-color: rgba(255,229,102,0.55) !important;
  transform: translateY(-1px);
}

.filetable .btn:disabled{
  opacity: .55;
  transform: none;
}

/* ---- 3D canvas: kehys premium, vähemmän “keltainen reuna” ---- */
#preview{
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ---- Hintakortti: tee siitä “pääelementti” ---- */
.totalprice{
  margin-top: 18px !important;
  margin-bottom: 12px !important;
  color: var(--vk-text) !important;
  text-shadow: none !important;
}

/* Jos totalPrice on pelkkä div, muotoillaan sisältö hyvin */
#totalPrice{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--vk-radius-xl) !important;
  padding: 16px 16px !important;
  box-shadow: var(--vk-shadow-soft) !important;
}

/* Erottuva summa (jos siinä on span inline-styleillä, tämä vielä parantaa) */
#totalPrice span{
  color: #ffffff !important;
}

/* ALV-teksti ja toimitusmaininta siistiksi */
.vk3d-alvnote{
  color: var(--vk-muted) !important;
  margin-top: 14px !important;
}

/* ---- Pikavalinnat: tee niistä “chipit” ---- */
.vk3d-presets{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 10px 0;
  padding: 0;
}

.vk3d-presets label{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 10px 12px;
  color: var(--vk-text);
  font-weight: 800;
  cursor: pointer;
}

.vk3d-presets input[type="radio"]{
  accent-color: var(--vk-accent);
}

/* ---- Erittelykortti: selkeä, rauhallinen ---- */
.b-card{
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--vk-radius-xl) !important;
  background: linear-gradient(180deg, rgba(18,26,36,0.95), rgba(12,18,26,0.95)) !important;
  box-shadow: var(--vk-shadow-soft) !important;
}

.b-section-title{
  font-weight: 900 !important;
  letter-spacing: .2px;
}

.b-table .b-meta{
  color: rgba(238,243,248,0.72) !important;
}

.b-warn{
  color: var(--vk-accent) !important;
  font-weight: 900 !important;
}

/* ---- Support warning: vähemmän “punainen hälytys”, enemmän informatiivinen ---- */
.warning{
  background: rgba(255,229,102,0.14) !important;
  border: 1px solid rgba(255,229,102,0.35) !important;
  color: var(--vk-text) !important;
  border-radius: var(--vk-radius-lg) !important;
  box-shadow: var(--vk-shadow-soft) !important;
}

/* ---- CTA nappi: iso, premium, luottamusta herättävä ---- */
.btn[type="submit"], button.btn[type="submit"]{
  background: linear-gradient(180deg, #ffe566, #ffd84a) !important;
  color: #111 !important;
  border: 0 !important;
  border-radius: 16px !important;
  font-weight: 1000 !important;
  padding: 14px 22px !important;
  box-shadow: 0 12px 26px rgba(255,229,102,0.18) !important;
}

.btn[type="submit"]:hover, button.btn[type="submit"]:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

/* ---- Mobiili: taulukko scroll + sticky CTA/hinta ---- */
@media (max-width: 900px){
  .filetable{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .filetable th, .filetable td{
    white-space: nowrap;
  }

  /* “Hintakortti” hieman tiiviimmäksi */
  #totalPrice{
    padding: 14px 14px !important;
  }

  /* Submit täysleveäksi */
  .btn[type="submit"], button.btn[type="submit"]{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Sticky bottom bar – toimii jos haluat: lisää bodyyn class "vk3d-sticky" */
@media (max-width: 900px){
  body.vk3d-sticky #totalPrice{
    position: sticky;
    bottom: 10px;
    z-index: 50;
    backdrop-filter: blur(8px);
  }
}

/* ---- “Slicer”-paneeli (jos sinulla on se valkoisena laatikkona): tee siitä brändiin sopiva ---- */
#vk3d-slicer-panel, .vk3d-slicer-panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--vk-radius-xl) !important;
  box-shadow: var(--vk-shadow-soft) !important;
  color: var(--vk-text) !important;
}

#vk3d-slicer-panel h2, #vk3d-slicer-panel h3,
.vk3d-slicer-panel h2, .vk3d-slicer-panel h3{
  color: var(--vk-text) !important;
}

/* Ohje-nappi: “pro”, ei liian huomiota varastava */
.vk3d-help-btn{
  background: rgba(255,229,102,0.18) !important;
  border: 1px solid rgba(255,229,102,0.35) !important;
  color: var(--vk-text) !important;
  box-shadow: var(--vk-shadow-soft) !important;
}
.vk3d-help-btn:hover{
  background: rgba(255,229,102,0.25) !important;
}

/* Toast: hillitty */
.vk3d-toast{
  background: rgba(15,20,26,0.92) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 14px !important;
}
/* ==========================
   VK3D “HELPPO ASIAKAS” -tila
   - Piilottaa tekniset slicer-termit
   - Jättää vain helposti ymmärrettävät valinnat
   - Pro-tila mahdollista body.vk-pro
   ========================== */

/* Slicer-panelista “kortti” */
#vk3d-slicer-panel{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important;
}

/* Paneelin sisäinen layout: tasainen ja selkeä */
#vk3d-slicer-panel > div:first-child{
  font-size: 1.05em !important;
  font-weight: 1000 !important;
  letter-spacing: .2px !important;
}

/* Tee valitsimista isoja ja selkeitä */
#vk3d-slicer-panel select,
#vk3d-slicer-panel input[type="number"]{
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-weight: 900 !important;
}

/* Nappulat “isoiksi” ja luotettaviksi */
#vk3d-slicer-panel button{
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-weight: 1000 !important;
}

/* --------------------------
   HELPO näkymä (default)
   Piilotetaan monimutkaiset rivit erityisesti mobiilissa
   -------------------------- */

/* 1) Pienillä näytöillä piilota tekniset valinnat:
   - nozzle
   - top/bottom numerot
   - infill pattern
   - adhesion/brim
   - support %
   - aggressiveness
*/
@media (max-width: 900px){
  /* Piilotussääntö: käytetään tarkempia sääntöjä alempana - tyhjä sääntö poistettu */

  /* Nozzle */
  #vk3d-slicer-panel label:has(span):has(select#vk3d_nozzle){ display:none !important; }

  /* Top/Bottom (sisältää 2 number inputtia) */
  #vk3d-slicer-panel label:has(input#vk3d_top),
  #vk3d-slicer-panel label:has(input#vk3d_bottom){ display:none !important; }



  /* Adhesion + Brim */
  #vk3d-slicer-panel label:has(select#vk3d_adhesion),
  #vk3d-slicer-panel label:has(input#vk3d_brim){ display:none !important; }

  /* Infill pattern */
  #vk3d-slicer-panel label:has(select#vk3d_infill_pat){ display:none !important; }
}

/* 2) Tee jäljelle jäävistä kentistä “aloittelija-selitteiset”
   Tämä ei muuta tekstejä JS:ssä, mutta voi “pehmentää” ulkoasua.
*/
@media (max-width: 900px){
  /* Slicer-grid tiiviimmäksi */
  #vk3d-slicer-panel > div:nth-child(2){
    gap: 10px !important;
  }
  /* Tee kentistä täysleveitä */
  #vk3d-slicer-panel label{
    min-width: 100% !important;
  }
}

/* 3) Pro-tila: jos joskus haluat näyttää kaiken, lisää <body class="vk-pro"> */
body.vk-pro #vk3d-slicer-panel label{ display:flex !important; }
body.vk-pro #vk3d-slicer-panel label[style*="display:none"]{ display:flex !important; }

/* --------------------------
   EXTRA: tee “täyttö” ja “seinämä” taulukossa ymmärrettävämmäksi
   (visuaalisesti, ei terminologiaa)
   -------------------------- */
@media (max-width: 880px){
  /* Korosta tärkeimmät: materiaali, täyttö, seinämä, hinta */
  .filetable td:nth-child(5),
  .filetable td:nth-child(6),
  .filetable td:nth-child(7),
  .filetable td:nth-child(9){
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
  }
}

/* Taulukon hinta “luottamusta herättäväksi” */
#filetable td[id^="price-"]{
  font-weight: 1100 !important;
  color: #ffffff !important;
}

/* VK3D SaaS: editing indicator */
#vk3d-editing-indicator{
  display:none;
  margin:8px 0;
  padding:6px 10px;
  border-radius:8px;
  font-weight:700;
  font-size:.95em;
  background:#fff7df;
  color:#1b1b1b;
  border:1px solid rgba(0,0,0,0.06);
}
body.vk-editing #vk3d-editing-indicator{ display:inline-block !important; }
body.vk-editing .filetable{ opacity:0.98; }

/* ==========================
   Premium conversion sections
   ========================== */
.vk3d-flow{
  margin: 8px 0 14px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.12);
}

.vk3d-flow-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:#f3f7ff;
  font-size:0.95rem;
  margin-bottom:8px;
}

.vk3d-flow-progress{
  width:100%;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,0.12);
  overflow:hidden;
}

.vk3d-flow-fill{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, #ffe566, #69d2ff);
  transition: width .24s ease;
}

.vk3d-flow-steps{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.vk3d-step{
  padding:6px 10px;
  border-radius:999px;
  font-size:.86rem;
  font-weight:800;
  color:#d7e6f5;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
}

.vk3d-step.is-active{
  color:#10212d;
  background:#ffe566;
  border-color:#ffe566;
}

.vk3d-step.is-done{
  color:#0f2f41;
  background:#69d2ff;
  border-color:#69d2ff;
}

.vk3d-value-props{
  display:grid;
  grid-template-columns: repeat(2, minmax(220px,1fr));
  gap:10px;
  margin: 10px 0 10px 0;
}

.vk3d-value-card{
  border-radius:14px;
  padding:12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.vk3d-value-card--accent{
  background: linear-gradient(180deg, rgba(255,229,102,0.12), rgba(255,229,102,0.06));
  border-color: rgba(255,229,102,0.35);
}

.vk3d-value-title{
  font-weight:900;
  color:#ffffff;
  margin-bottom:6px;
}

.vk3d-value-card ul{
  margin:0;
  padding-left:18px;
  color:#eaf3ff;
  font-weight:700;
}

.vk3d-value-card li{
  margin-bottom:6px;
}

.vk3d-cta-wrap{
  margin-top: 6px;
}

.vk3d-cta-btn{
  width:100%;
  max-width:560px;
}

.vk3d-cta-note{
  margin-top:8px;
  color:#d7ebff;
  font-weight:800;
  font-size:.95rem;
}

.leadtime-note{
  margin: 10px 0;
  font-weight:800;
  color:#d9f0ff;
}

.vk3d-price-pulse{
  animation: vk3d-price-pulse .45s ease;
}

.vk3d-basic-extra-title{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:900;
  transition: opacity .14s ease;
}

.vk3d-basic-extra-title:hover{
  opacity:.82;
}

.vk3d-row-enter{
  animation: vk3d-row-enter .24s ease both;
}

@keyframes vk3d-row-enter{
  0%{ opacity:0; transform: translateY(4px); }
  100%{ opacity:1; transform:none; }
}

@keyframes vk3d-price-pulse{
  0%{ transform: scale(1); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
  50%{ transform: scale(1.02); box-shadow: 0 14px 34px rgba(255,229,102,.22); }
  100%{ transform: scale(1); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
}

@media (max-width: 880px){
  .vk3d-flow-head{ flex-direction:column; align-items:flex-start; }
  .vk3d-value-props{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  .vk3d-price-pulse,
  .vk3d-row-enter,
  .vk3d-modal,
  .vk3d-modal-backdrop,
  .vk3d-popover,
  .vk3d-total-wrap{
    animation: none !important;
    transition: none !important;
  }

  .vk3d-flow-fill{
    transition: none !important;
  }
}

/* ---------- Taulukon korttiasettelu mobiilissa ---------- */
/* Alle 640px: jokainen tiedostorivi muuttuu kortiksi (ei vaaka-scrollia) */
@media (max-width: 640px) {
  /* Piilotetaan thead ja muutetaan tbody-rivit korteiksi */
  #filetable thead { display: none !important; }

  #filetable,
  #filetable tbody { display: block; width: 100%; }

  #filetable tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    padding: 14px 12px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: var(--card2);
    border: 1px solid rgba(255,229,102,0.18);
    border-left: 4px solid rgba(255,229,102,0.4);
    white-space: normal;
    overflow: visible;
  }

  #filetable tbody tr.active,
  #filetable tbody tr:hover {
    border-left-color: var(--accent);
    transform: none; /* ei nosta kortteja pienessä näytössä */
  }

  /* Sarakeotsikat data-label-attribuutista */
  #filetable tbody td {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    border: none;
    font-size: 0.92em;
  }

  /* Tiedostonimi vie koko leveyden omalla rivillään */
  #filetable tbody td:first-child {
    grid-column: 1 / -1;
    font-weight: 900;
    font-size: 1em;
    color: var(--accent);
    word-break: break-all;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,229,102,0.14);
    margin-bottom: 4px;
  }

  /* Hinta vie koko leveyden */
  #filetable tbody td:nth-child(10) {
    grid-column: 1 / -1;
    font-weight: 900;
    font-size: 1.04em;
    color: #fff;
    border-top: 1px solid rgba(255,229,102,0.14);
    padding-top: 6px;
    margin-top: 2px;
  }

  /* Poista-painike vie koko leveyden */
  #filetable tbody td:last-child {
    grid-column: 1 / -1;
  }

  /* Inputit täyttävät korttisolun */
  #filetable input,
  #filetable select,
  #filetable textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #filetable input[type="number"] {
    width: 80px !important;
  }

  #filetable textarea {
    min-height: 36px;
  }
}

/* ---------- Taulukon yläpuolinen toolbar ---------- */
.vk3d-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,229,102,0.14);
  border-radius: 10px;
}

.vk3d-toolbar-label {
  font-weight: 900;
  font-size: .93em;
  color: var(--text);
  white-space: nowrap;
}

.vk3d-toolbar-sel {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: #1a2a38;
  color: #fff;
  font-size: .93em;
  cursor: pointer;
}

.vk3d-toolbar-btn {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255,229,102,0.12);
  color: var(--accent);
  border: 1px solid rgba(255,229,102,0.28);
  font-weight: 900;
  font-size: .93em;
  cursor: pointer;
  transition: background .14s;
}
.vk3d-toolbar-btn:hover { background: rgba(255,229,102,0.22); }

/* Kopioi-nappi taulukossa */
.vk3d-dup-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .95em;
  margin-right: 4px;
  transition: background .12s;
}
.vk3d-dup-btn:hover { background: rgba(255,229,102,0.14); color: var(--accent); }

/* ======================================================
   SPLIT LAYOUT + FLAT DESIGN  2026-05-16
   Kaksipalsta-layout, siisti visuaali, teema-yhteensopiva.
   EI käytetä 100vw/calc(50%-50vw) — ne rikkovat WP-teemat
   ja estävät position:sticky toiminnan.
   ====================================================== */

/* 1. Tausta täyttää koko .vk3d-bg:n alueen, ei muuta */
.vk3d-bg {
  background: #09101a !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* EI overflow:hidden — se rikkoo sticky-positioning lapsi-elementeissä */
}

/* 2. Container: läpinäkyvä, täyttää koko leveyden */
.vk3d-bg .container {
  width: 100% !important;
  max-width: 1840px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(14px, 2.5vw, 32px) clamp(16px, 3vw, 48px) clamp(28px, 3vw, 44px) !important;
}

/* 3. Yläpalkki */
.vk3d-topbar {
  margin-bottom: 12px;
}
.vk3d-topbar .vk3d-title {
  margin-bottom: 8px !important;
}
.vk3d-topbar .vk3d-flow {
  margin: 8px 0 0 0 !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

/* 4. Hero: tiivistetty */
.vk3d-hero {
  margin: 0 0 12px !important;
  padding: 14px 18px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

/* 5. Kaksipalstainen split-layout */
.vk3d-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

.vk3d-left,
.vk3d-right {
  min-width: 0;
}

@media (min-width: 860px) {
  .vk3d-split {
    grid-template-columns: minmax(300px, 420px) 1fr;
    gap: 24px;
  }
}
@media (min-width: 1100px) {
  .vk3d-split {
    grid-template-columns: minmax(360px, 460px) 1fr;
  }
}
@media (min-width: 1400px) {
  .vk3d-split {
    grid-template-columns: minmax(400px, 500px) 1fr;
  }
}

/* Sticky oikea sarake — toimii vain kun yksikään ancestor
   ei ole overflow:hidden. Varmista WP-teeman full-width template. */
@media (min-width: 860px) {
  .vk3d-right-inner {
    position: sticky;
    top: 16px;
  }
}

/* Mobiili: esikatselu näkyy ensin */
@media (max-width: 859px) {
  .vk3d-right { order: -1; }
}

/* 6. Canvas oikeassa sarakkeessa */
#preview-wrap {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: #0d1c24 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
#preview-wrap::before,
#preview-wrap::after {
  display: none !important;
}
#preview {
  width: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: block;
}

/* 7. Hintaosio oikeassa sarakkeessa */
.vk3d-right .totalprice { margin-top: 12px !important; }
.vk3d-right #totalPrice {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
}
.vk3d-right #breakdown { margin-top: 8px; }
.vk3d-right .vk3d-alvnote { margin-top: 10px !important; font-size: .93em; }

/* 8. Taulukko: tasainen */
.filetable {
  box-shadow: none !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
}
.filetable tr:hover { transform: none !important; }
.filetable th { background: rgba(255,255,255,0.04) !important; }

/* 9. Latauslaatikko: tasainen */
.vk3d-upload-box {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* 10. Pikavalinnat-osio (inline-tyylit poistettu PHP:stä) */
.vk3d-sales-box {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
}
.vk3d-presets-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
.vk3d-presets-title { font-weight: 900; font-size: 1em; color: #fff; }
.vk3d-presets-sub { color: rgba(238,243,248,0.72); font-size: .92em; margin-top: 2px; }
.vk3d-presets-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vk3d-badge-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .84em;
  background: rgba(255,255,255,0.09);
  color: #eef3f8;
  border: 1px solid rgba(255,255,255,0.14);
}
.vk3d-badge-pill--accent {
  background: rgba(255,229,102,0.16);
  color: var(--accent);
  border-color: rgba(255,229,102,0.28);
}

/* 11. Arvolupaukset */
.vk3d-value-props { margin: 12px 0 0 0 !important; }
.vk3d-value-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

/* 12. Erittelykortti */
.b-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

/* 13. Contact-box (inline-tyylit poistettu PHP:stä) */
.vk3d-contact-box {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(255,255,255,0.92);
  color: #111;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: none;
}
.vk3d-contact-title { font-weight: 900; font-size: 1.02em; margin-bottom: 6px; color: #111 !important; }
.vk3d-contact-sub { font-size: .93em; color: #4b5563; margin-bottom: 12px; }

/* 14. CTA + help + toast: ei turhia varjoja */
.btn[type="submit"], button.btn[type="submit"] { box-shadow: none !important; }
.vk3d-help-btn { box-shadow: none !important; }
.vk3d-toast { box-shadow: 0 4px 20px rgba(0,0,0,0.45) !important; }

/* 15. Toolbar */
.vk3d-table-toolbar {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
}

/* 16. Slicer-paneeli: brändiin sopiva tumma kortti */
#vk3d-slicer-panel,
.vk3d-slicer-panel {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--vk-text) !important;
}

/* ======================================================
   ULTRA-WIDE TUKI  ≥1800px / ≥2400px / ≥3000px
   Laajennetaan kontin maksimileveys, kasvatetaan vasen
   sarake ja annetaan canvakselle enemmän pystysuuntatilaa.
   ====================================================== */

/* 21:9 ja leveät 4K-monitorit (1800–2400 px) */
@media (min-width: 1800px) {
  .vk3d-bg .container {
    max-width: 2400px !important;
    padding-left:  clamp(40px, 3.5vw, 72px) !important;
    padding-right: clamp(40px, 3.5vw, 72px) !important;
  }
  .vk3d-split {
    grid-template-columns: minmax(480px, 580px) 1fr !important;
    gap: 32px !important;
  }
  /* Isompi fonttikoko isoille taulukon soluille */
  .filetable th,
  .filetable td { font-size: 1.01em; }
}

/* Erittäin leveät näytöt / dual-monitor (≥2400 px) */
@media (min-width: 2400px) {
  .vk3d-bg .container {
    max-width: 3000px !important;
    padding-left:  clamp(56px, 3vw, 96px) !important;
    padding-right: clamp(56px, 3vw, 96px) !important;
  }
  .vk3d-split {
    grid-template-columns: minmax(560px, 680px) 1fr !important;
    gap: 40px !important;
  }
}

/* 5K / 8K (≥3200 px) */
@media (min-width: 3200px) {
  .vk3d-bg .container {
    max-width: 3800px !important;
  }
  .vk3d-split {
    grid-template-columns: minmax(640px, 800px) 1fr !important;
    gap: 48px !important;
  }
  /* Skaalataan typografia */
  .vk3d-title { font-size: clamp(2rem, 1.4rem + 1vw, 3rem) !important; }
  .filetable th, .filetable td { font-size: 1.06em; }
  .b-card { padding: 18px !important; }
}

/* ======================================================
   MOBIILI STICKY-HINTAPALKKI
   Näkyy vain mobiilissa, kun käyttäjällä on validi malli
   (body.vk3d-has-models -luokka asetetaan JS:stä).
   ====================================================== */
.vk3d-mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1500;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 14px;
  background: linear-gradient(180deg, rgba(15,20,28,0.92), rgba(8,12,18,0.97));
  border-top: 1px solid rgba(255,229,102,0.28);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  animation: vk3d-mb-up .26s ease;
}
@keyframes vk3d-mb-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.vk3d-mobile-bar-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vk3d-mobile-bar-label {
  font-size: .78rem;
  font-weight: 800;
  color: rgba(238,243,248,0.72);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.vk3d-mobile-bar-value {
  font-size: 1.18rem;
  font-weight: 1000;
  color: #fff;
  line-height: 1.1;
}
.vk3d-mobile-bar-cta {
  flex-shrink: 0;
  background: linear-gradient(180deg, #ffe566, #ffd84a);
  color: #111;
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 1000;
  font-size: .98rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,229,102,0.25);
  transition: transform .12s ease, filter .12s ease;
}
.vk3d-mobile-bar-cta:hover,
.vk3d-mobile-bar-cta:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.vk3d-mobile-bar-cta:active {
  transform: translateY(0);
}

/* Näytä vain mobiilissa ja kun mallit ladattu */
@media (max-width: 859px) {
  body.vk3d-has-models .vk3d-mobile-bar {
    display: flex;
  }
  /* Lisää tilaa lomakkeen alle, jottei palkki peitä CTA-nappia */
  body.vk3d-has-models form#orderForm {
    padding-bottom: 84px;
  }
}

/* Piilota print-näkymässä */
@media print {
  .vk3d-mobile-bar { display: none !important; }
}

/* Banneri kun tarjous ladataan URLista */
.vk3d-prefill-banner {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,229,102,0.18), rgba(95,215,255,0.14));
  border: 1px solid rgba(255,229,102,0.40);
  color: #f6fbff;
  font-size: .96em;
  line-height: 1.5;
}
.vk3d-prefill-banner strong {
  display: block;
  margin-bottom: 4px;
  color: #ffe566;
  font-size: 1.02em;
}

/* "Tallenna ja jaa" -painike + modaali */
.vk3d-save-quote-btn {
  display: inline-block;
  margin-top: 10px;
  margin-left: 8px;
  padding: 12px 18px;
  background: rgba(255,255,255,0.08);
  color: #eef3f8;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background .14s ease, transform .12s ease;
}
.vk3d-save-quote-btn:hover {
  background: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}
.vk3d-save-quote-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.vk3d-quote-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(6,10,18,0.62);
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.vk3d-quote-modal.is-open {
  display: flex;
}
.vk3d-quote-modal-inner {
  background: #ffffff;
  color: #0f1722;
  max-width: 520px;
  width: 100%;
  border-radius: 16px;
  padding: 24px 22px 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  position: relative;
}
.vk3d-quote-modal-inner h3 {
  margin: 0 0 8px;
  color: #0f1722;
}
.vk3d-quote-modal-inner p {
  margin: 0 0 12px;
  color: #3a4756;
  line-height: 1.5;
}
.vk3d-quote-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: 0;
  font-size: 1.6em;
  font-weight: 900;
  color: #5a6677;
  cursor: pointer;
}
.vk3d-quote-url-row {
  display: flex;
  gap: 8px;
  margin: 12px 0 6px;
}
.vk3d-quote-url-row input {
  flex: 1 1 auto;
  padding: 10px 12px;
  font-size: 0.95em;
  border: 1px solid rgba(8,18,28,0.16);
  border-radius: 10px;
  background: #f6f8fb;
  color: #111;
}
.vk3d-quote-copy-btn {
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffe566, #ffd84a);
  color: #111;
  font-weight: 900;
  cursor: pointer;
}
.vk3d-quote-copy-btn.is-copied {
  background: linear-gradient(180deg, #8be08b, #62cc62);
}
.vk3d-quote-modal-hint {
  font-size: 0.86em;
  color: #6b7280 !important;
}

/* Hintayhteenvedon sähköpostikenttä */
.vk3d-quote-email-row {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vk3d-quote-email-row input[type="email"] {
  width: 100%;
  background: #fff;
  color: #111;
  border: 1px solid rgba(8,18,28,0.16);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: inset 0 1px 2px rgba(8,18,28,0.04);
}
.vk3d-quote-email-hint {
  color: #4b5563;
  font-size: .88em;
}

/* Honeypot-kenttä: piilotetaan käyttäjiltä mutta säilytetään botteja varten.
   Ei display:none jotta botit eivät tunnista sitä turvasäännöksi. */
.vk3d-hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ======================================================
   Korjauspaketti: toimivat riviasetukset + teollinen premium
   ====================================================== */
.vk3d-bg .vk3d-upload-box {
  border-color: rgba(255,229,102,0.22) !important;
  background:
    linear-gradient(180deg, rgba(255,229,102,0.075), rgba(255,255,255,0.035)),
    #0d1720 !important;
}

.vk3d-upload-title {
  color: #ffffff;
  letter-spacing: 0;
}

.vk3d-upload-meta {
  border: 1px solid rgba(255,229,102,0.30);
  background: rgba(255,229,102,0.10);
  color: #ffe566;
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 900;
}

.vk3d-main-row .vk3d-col-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.vk3d-toggle-btn,
.vk3d-rem-btn,
.vk3d-dup-btn {
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #eef3f8 !important;
  border-radius: 8px !important;
  padding: 6px 9px !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  cursor: pointer;
}

.vk3d-toggle-btn.is-active,
.vk3d-toggle-btn:hover,
.vk3d-rem-btn:hover,
.vk3d-dup-btn:hover {
  background: rgba(255,229,102,0.16) !important;
  color: #ffe566 !important;
  border-color: rgba(255,229,102,0.34) !important;
}

.vk3d-rem-btn:hover {
  background: rgba(255,90,90,0.14) !important;
  color: #ffb6b6 !important;
  border-color: rgba(255,90,90,0.36) !important;
}

#filetable tbody tr.vk3d-drawer-row,
.vk3d-drawer-row {
  display: none;
}

#filetable tbody tr.vk3d-drawer-row.is-open,
.vk3d-drawer-row.is-open {
  display: table-row;
}

.vk3d-drawer-cell {
  padding: 0 !important;
  border-bottom: 1px solid rgba(255,229,102,0.20) !important;
}

.vk3d-drawer-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
}

.vk3d-drawer-section {
  min-width: 0;
}

.vk3d-drawer-section--row,
.vk3d-drawer-section--full {
  grid-column: 1 / -1;
}

.vk3d-drawer-section--row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vk3d-drawer-sect-label,
.vk3d-drawer-flabel {
  color: rgba(238,243,248,0.76);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.vk3d-swatches,
.vk3d-chips,
.vk3d-rot-group {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.vk3d-color-dot {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.24);
  cursor: pointer;
}

.vk3d-color-dot.is-active {
  outline: 3px solid rgba(255,229,102,0.44);
  border-color: #ffe566;
}

.vk3d-mat-chip,
.vk3d-infill-chip,
.vk3d-wall-chip {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #eef3f8;
  border-radius: 8px;
  padding: 7px 10px;
  font-weight: 900;
  cursor: pointer;
}

.vk3d-mat-chip.is-active,
.vk3d-infill-chip.is-active,
.vk3d-wall-chip.is-active {
  background: rgba(255,229,102,0.17);
  border-color: rgba(255,229,102,0.38);
  color: #ffe566;
}

.vk3d-chip-sub,
.vk3d-chip-note,
.vk3d-swatch-cur,
.vk3d-dims-text {
  color: rgba(238,243,248,0.76);
  font-size: .84em;
  font-weight: 800;
}

.vk3d-drawer-input,
.vk3d-drawer-note {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(7,13,20,0.86) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
}

.vk3d-drawer-note {
  resize: vertical;
}

.vk3d-total-wrap {
  border-color: rgba(255,229,102,0.22) !important;
  background:
    linear-gradient(180deg, rgba(255,229,102,0.12), rgba(255,255,255,0.045)),
    #101923 !important;
}

.vk3d-mobile-bar {
  border-top-color: rgba(255,229,102,0.38) !important;
}

@media (max-width: 640px) {
  #filetable tbody tr.vk3d-drawer-row {
    display: none !important;
  }

  #filetable tbody tr.vk3d-drawer-row.is-open {
    display: block !important;
  }

  #filetable tbody tr.vk3d-drawer-row td {
    display: block;
  }

  .vk3d-drawer-inner,
  .vk3d-drawer-section--row {
    grid-template-columns: 1fr;
  }

  .vk3d-main-row .vk3d-col-actions {
    justify-content: stretch;
  }

  .vk3d-toggle-btn,
  .vk3d-rem-btn,
  .vk3d-dup-btn {
    flex: 1 1 auto;
  }
}

/* ======================================================
   Aiemmin inline-tyyleinä PHP:ssä — siirretty CSS:ään
   ====================================================== */
.vk3d-help-pro-note {
  color: #9aa7c6;
  font-size: .95em;
}
.vk3d-file-hint {
  color: #ffe566;
}
#vk3d-global-error {
  color: #ff5a5a;
  margin: 8px 0 0 0;
  font-weight: 700;
}
#vk3d-global-error.is-visible {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 90, 90, .10);
  border: 1px solid rgba(255, 90, 90, .30);
  color: #ffd4d4;
}
.vk3d-recommendation,
.vk3d-trust-list {
  margin-top: 12px;
}
.vk3d-recommendation {
  padding: 14px;
  border-radius: 12px;
  background: rgba(95,215,255,.08);
  border: 1px solid rgba(95,215,255,.18);
}
.vk3d-reco-eyebrow {
  color: var(--accent);
  font-weight: 900;
  text-transform: uppercase;
  font-size: .78rem;
}
.vk3d-reco-title {
  margin-top: 5px;
  color: #fff;
  font-weight: 900;
}
.vk3d-reco-copy {
  margin-top: 5px;
  color: rgba(238,246,255,.78);
  line-height: 1.45;
}
.vk3d-reco-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.vk3d-reco-chips span {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #eef6ff;
  font-weight: 800;
  font-size: .78rem;
}
.vk3d-trust-list {
  display: grid;
  gap: 8px;
}
.vk3d-trust-list div {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
}
.vk3d-trust-list strong,
.vk3d-trust-list span {
  display: block;
}
.vk3d-trust-list strong {
  color: #fff;
  font-weight: 900;
}
.vk3d-trust-list span {
  margin-top: 2px;
  color: rgba(238,246,255,.70);
  font-size: .86rem;
}
.vk3d-cta-btn {
  margin-top: 18px;
}
#uploadStatus {
  display: none;
  margin-top: 15px;
}
.vk3d-upload-status-msg {
  margin-bottom: 8px;
}
.vk3d-progress-track {
  width: 100%;
  background: #eee;
  height: 16px;
  border-radius: 6px;
  overflow: hidden;
}
.vk3d-progress-bar {
  height: 100%;
  width: 0;
  background: #2196f3;
  transition: width 0.3s ease;
}

/* ======================================================
   Desktop full-bleed dashboard
   Teemat rajaavat usein shortcode-sisallon kapeaan palstaan.
   Kaytetaan tassa full-bleed-overridea, koska laskurin kuuluu
   kayttaa tyopoydan leveys eika teeman artikkelipalstaa.
   Tyopoydalla laskuri murretaan ulos palstasta ja jaetaan kolmeen
   hyodynnettavaan alueeseen: asetukset, 3D, tilaus.
   ====================================================== */
@media (min-width: 1180px) {
  .vk3d-bg {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    min-height: calc(100vh - 64px) !important;
    background:
      linear-gradient(90deg, rgba(255,229,102,0.035), transparent 18%, transparent 82%, rgba(95,215,255,0.028)),
      #071018 !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  .vk3d-bg .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px clamp(18px, 2vw, 34px) 18px !important;
  }

  .vk3d-topbar {
    display: grid !important;
    grid-template-columns: minmax(220px, 360px) minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
    margin: 0 0 8px !important;
  }

  .vk3d-topbar .vk3d-title {
    font-size: clamp(1.05rem, .9rem + .45vw, 1.38rem) !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .vk3d-topbar .vk3d-flow {
    margin: 0 !important;
    padding: 8px 12px !important;
  }

  .vk3d-flow-head {
    margin-bottom: 4px !important;
  }

  .vk3d-flow-steps {
    gap: 6px !important;
  }

  .vk3d-step {
    padding: 4px 8px !important;
    font-size: .78rem !important;
  }

  .vk3d-hero {
    display: grid !important;
    grid-template-columns: minmax(330px, .85fr) 1.15fr !important;
    gap: 10px 18px !important;
    align-items: end !important;
    margin: 0 0 8px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
  }

  .vk3d-kicker {
    grid-column: 1 / -1 !important;
    font-size: .72rem !important;
    margin: 0 !important;
  }

  .vk3d-hero-title {
    font-size: clamp(1.05rem, .85rem + .75vw, 1.72rem) !important;
    line-height: 1.12 !important;
    margin: 0 !important;
  }

  .vk3d-hero-copy {
    font-size: .82rem !important;
    line-height: 1.38 !important;
    margin: 0 !important;
  }

  .vk3d-hero-points {
    grid-column: 1 / -1 !important;
    margin: 2px 0 0 !important;
    gap: 6px !important;
  }

  .vk3d-hero-points span {
    padding: 5px 9px !important;
    font-size: .76rem !important;
  }

  form#orderForm {
    display: grid !important;
    grid-template-columns:
      minmax(470px, 32vw)
      minmax(520px, 1fr)
      minmax(300px, 22vw) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
  }

  form#orderForm > .vk3d-split {
    display: contents !important;
  }

  .vk3d-left {
    grid-column: 1 !important;
    grid-row: 1 / 5 !important;
    max-height: calc(100vh - 220px) !important;
    overflow: auto !important;
    padding-right: 4px !important;
    scrollbar-width: thin;
  }

  .vk3d-right {
    grid-column: 2 !important;
    grid-row: 1 / 5 !important;
    min-width: 0 !important;
  }

  .vk3d-right-inner {
    position: sticky !important;
    top: 10px !important;
    max-height: calc(100vh - 100px) !important;
  }

  .vk3d-contact-box,
  .terms-box,
  .vk3d-cta-wrap,
  #uploadStatus {
    grid-column: 3 !important;
  }

  .vk3d-contact-box {
    grid-row: 1 !important;
  }

  .terms-box {
    grid-row: 2 !important;
  }

  .vk3d-cta-wrap {
    grid-row: 3 !important;
  }

  #uploadStatus {
    grid-row: 4 !important;
  }

  .vk3d-contact-box {
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(239,243,247,0.94)) !important;
  }

  .vk3d-contact-title {
    font-size: .96rem !important;
    margin-bottom: 4px !important;
  }

  .vk3d-contact-sub {
    font-size: .78rem !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
  }

  .vk3d-contact-box textarea {
    min-height: 82px !important;
  }

  .vk3d-quote-email-row {
    margin-top: 10px !important;
    gap: 4px !important;
  }

  .terms-box {
    margin: 10px 0 0 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.045) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
  }

  .vk3d-cta-wrap {
    margin-top: 10px !important;
    padding: 12px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,229,102,0.16) !important;
  }

  .btn[type="submit"],
  button.btn[type="submit"],
  .vk3d-save-quote-btn {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 8px !important;
    padding: 11px 14px !important;
    border-radius: 10px !important;
  }

  .vk3d-cta-note {
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }

  .vk3d-upload-box {
    margin-bottom: 8px !important;
  }

  .vk3d-upload-head {
    gap: 10px !important;
  }

  .vk3d-upload-title {
    font-size: .95rem !important;
  }

  .vk3d-upload-copy {
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }

  .vk3d-table-toolbar {
    margin-bottom: 6px !important;
    padding: 8px 10px !important;
  }

  .filetable th,
  .filetable td {
    padding: 7px 8px !important;
    font-size: .84rem !important;
  }

  .vk3d-drawer-inner {
    gap: 9px !important;
    padding: 10px !important;
  }

  #vk3d-slicer-panel {
    margin: 10px 0 0 !important;
    padding: 10px !important;
  }

  .vk3d-sales-box {
    margin-top: 10px !important;
    padding: 10px 12px !important;
  }

  .vk3d-value-props {
    display: none !important;
  }

  #preview-wrap {
    height: auto !important;
  }

  #preview {
    height: clamp(390px, calc(100vh - 290px), 680px) !important;
    min-height: 360px !important;
  }

  .vk3d-right .totalprice {
    margin-top: 8px !important;
  }

  .vk3d-total-wrap {
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  .vk3d-total-label,
  .vk3d-total-sub,
  .leadtime-note,
  .vk3d-alvnote {
    font-size: .78rem !important;
  }

  .vk3d-total-value {
    font-size: clamp(1.28rem, 1rem + .85vw, 1.8rem) !important;
  }

  #breakdown {
    max-height: 190px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .b-card {
    padding: 10px !important;
  }

  .vk3d-help-btn {
    top: 78px !important;
    right: 16px !important;
    padding: 8px 13px !important;
    font-size: .86rem !important;
  }
}

@media (min-width: 1600px) {
  form#orderForm {
    grid-template-columns:
      minmax(520px, 31vw)
      minmax(680px, 1fr)
      minmax(340px, 20vw) !important;
    gap: 18px !important;
  }

  #preview {
    height: clamp(460px, calc(100vh - 270px), 760px) !important;
  }
}

@media (min-width: 2200px) {
  form#orderForm {
    grid-template-columns:
      minmax(620px, 28vw)
      minmax(900px, 1fr)
      minmax(390px, 18vw) !important;
  }
}

@media (min-width: 1180px) and (max-height: 850px) {
  .vk3d-topbar {
    display: none !important;
  }

  .vk3d-hero {
    grid-template-columns: minmax(300px, .9fr) 1.1fr !important;
    padding: 8px 12px !important;
    margin-bottom: 6px !important;
  }

  .vk3d-kicker {
    display: none !important;
  }

  .vk3d-hero-title {
    font-size: clamp(1rem, .82rem + .55vw, 1.38rem) !important;
  }

  .vk3d-hero-copy {
    display: none !important;
  }

  .vk3d-hero-points {
    grid-column: auto !important;
    justify-content: flex-end !important;
    margin: 0 !important;
  }

  .vk3d-hero-points span {
    font-size: .7rem !important;
    padding: 4px 8px !important;
  }

  .vk3d-left {
    max-height: calc(100vh - 126px) !important;
  }

  .vk3d-right-inner {
    max-height: calc(100vh - 86px) !important;
  }

  #preview {
    height: clamp(360px, calc(100vh - 250px), 610px) !important;
  }

  #breakdown {
    max-height: 142px !important;
  }

  .vk3d-contact-box textarea {
    min-height: 62px !important;
  }

  .vk3d-quote-email-hint,
  .vk3d-contact-sub {
    display: none !important;
  }
}
.vk3d-upload-percent {
  font-size: 0.98em;
  margin-top: 5px;
}
/* Aktivoi dropzone-ulkoasu brändivärillä (yhtenäistää aiemman inline-tyylin kanssa) */
#vk3d-dropzone {
  border-color: rgba(255,229,102,0.28) !important;
  background: linear-gradient(180deg, rgba(255,229,102,0.04), rgba(255,229,102,0.01)) !important;
}

/* ======================================================
   VK3D Professional Workspace 2026-05
   Desktopilla laskuri toimii sovelluksena: asetukset, 3D ja
   tilaus ovat omissa hallituissa paneeleissaan. Ultraleveillä
   näytöillä sisältö ei veny loputtomiin.
   ====================================================== */
@media (min-width: 1180px) {
  .vk3d-bg {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    min-height: calc(100svh - 64px) !important;
    padding: 12px 0 18px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(78, 202, 255, .10), transparent 34%),
      linear-gradient(180deg, #071018 0%, #08131c 54%, #050b10 100%) !important;
    overflow-x: clip !important;
  }

  .vk3d-bg .container {
    width: min(calc(100vw - 36px), 1920px) !important;
    max-width: 1920px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .vk3d-topbar {
    display: grid !important;
    grid-template-columns: minmax(280px, 430px) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: center !important;
    margin: 0 0 10px !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 12px !important;
    background: rgba(12, 19, 28, .88) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
  }

  .vk3d-topbar .vk3d-title {
    margin: 0 !important;
    font-size: clamp(1.08rem, .98rem + .32vw, 1.38rem) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    letter-spacing: 0 !important;
  }

  .vk3d-topbar .vk3d-flow {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  .vk3d-flow-head {
    margin-bottom: 7px !important;
    gap: 12px !important;
  }

  .vk3d-flow-head strong,
  #vk3d-flow-status {
    font-size: .82rem !important;
  }

  .vk3d-flow-progress {
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.10) !important;
  }

  .vk3d-flow-steps {
    margin-top: 7px !important;
    gap: 7px !important;
  }

  .vk3d-step {
    padding: 5px 9px !important;
    border-radius: 999px !important;
    font-size: .74rem !important;
  }

  .vk3d-hero {
    display: grid !important;
    grid-template-columns: minmax(320px, .72fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px 18px !important;
    margin: 0 0 10px !important;
    padding: 11px 14px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: none !important;
  }

  .vk3d-kicker {
    grid-column: 1 !important;
    justify-self: start !important;
    margin: 0 !important;
    padding: 5px 9px !important;
    font-size: .68rem !important;
  }

  .vk3d-hero-title {
    grid-column: 1 !important;
    margin: 0 !important;
    font-size: clamp(1.02rem, .92rem + .38vw, 1.34rem) !important;
    line-height: 1.12 !important;
  }

  .vk3d-hero-copy {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    margin: 0 !important;
    max-width: 78ch !important;
    font-size: .82rem !important;
    line-height: 1.38 !important;
    color: rgba(238, 246, 255, .76) !important;
  }

  .vk3d-hero-points {
    display: none !important;
  }

  form#orderForm {
    display: grid !important;
    grid-template-columns: minmax(390px, 430px) minmax(540px, 1fr) minmax(320px, 370px) !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    min-height: calc(100svh - 174px) !important;
  }

  form#orderForm > .vk3d-split {
    display: contents !important;
  }

  .vk3d-left {
    grid-column: 1 !important;
    grid-row: 1 / 6 !important;
    max-height: calc(100svh - 176px) !important;
    overflow: auto !important;
    padding: 0 8px 0 0 !important;
    scrollbar-width: thin;
  }

  .vk3d-right {
    grid-column: 2 !important;
    grid-row: 1 / 6 !important;
    min-width: 0 !important;
  }

  .vk3d-right-inner {
    position: sticky !important;
    top: 12px !important;
    height: calc(100svh - 176px) !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #preview-wrap {
    flex: 1 1 auto !important;
    min-height: 460px !important;
    height: 100% !important;
    border-radius: 14px !important;
    border: 1px solid rgba(91, 227, 122, .12) !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(95,215,255,.08), transparent 34%),
      linear-gradient(180deg, #09222a 0%, #071b22 58%, #06141a 100%) !important;
    overflow: hidden !important;
  }

  #preview-wrap::before,
  #preview-wrap::after {
    display: none !important;
  }

  #preview {
    width: 100% !important;
    height: 100% !important;
    min-height: 460px !important;
    border-radius: 14px !important;
  }

  .vk3d-order-summary,
  .vk3d-contact-box,
  .terms-box,
  .vk3d-cta-wrap,
  #uploadStatus {
    grid-column: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .vk3d-order-summary {
    grid-row: 1 !important;
    padding: 13px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,229,102,.18) !important;
  }

  .vk3d-panel-title {
    margin-bottom: 8px !important;
    font-size: .82rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: rgba(255,229,102,.95) !important;
  }

  .vk3d-order-summary .totalprice,
  .vk3d-order-summary #totalPrice {
    margin: 0 !important;
  }

  .vk3d-total-wrap {
    padding: 10px 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .vk3d-total-label,
  .vk3d-total-sub,
  .leadtime-note,
  .vk3d-alvnote {
    font-size: .78rem !important;
  }

  .vk3d-total-value {
    font-size: clamp(1.55rem, 1.15rem + .9vw, 2.15rem) !important;
  }

  #breakdown {
    max-height: clamp(140px, 22svh, 250px) !important;
    overflow: auto !important;
    margin-top: 8px !important;
    scrollbar-width: thin;
  }

  .b-card {
    padding: 9px 10px !important;
    border-radius: 9px !important;
  }

  .vk3d-contact-box {
    grid-row: 2 !important;
    margin: 0 !important;
    padding: 13px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: #eef6ff !important;
  }

  .vk3d-contact-title {
    margin-bottom: 5px !important;
    color: #fff !important;
    font-size: .92rem !important;
  }

  .vk3d-contact-sub,
  .vk3d-quote-email-hint {
    color: rgba(238,246,255,.68) !important;
    font-size: .75rem !important;
    line-height: 1.35 !important;
  }

  .vk3d-contact-box label,
  .vk3d-contact-box strong {
    color: #eef6ff !important;
    font-size: .78rem !important;
  }

  .vk3d-contact-box input,
  .vk3d-contact-box textarea {
    background: rgba(5, 13, 19, .82) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 9px !important;
    padding: 9px 10px !important;
  }

  .vk3d-contact-box textarea {
    min-height: 78px !important;
    resize: vertical !important;
  }

  .terms-box {
    grid-row: 3 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
  }

  .vk3d-cta-wrap {
    grid-row: 4 !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,229,102,.20) !important;
  }

  .btn[type="submit"],
  button.btn[type="submit"],
  .vk3d-save-quote-btn {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 8px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-size: .92rem !important;
  }

  .vk3d-cta-note {
    font-size: .74rem !important;
    line-height: 1.35 !important;
    color: rgba(238,246,255,.66) !important;
  }

  #uploadStatus {
    grid-row: 5 !important;
    margin: 0 !important;
  }

  .vk3d-upload-box,
  .vk3d-file-picker-panel,
  .vk3d-table-toolbar,
  .vk3d-sales-box,
  #vk3d-slicer-panel {
    border-radius: 12px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: none !important;
  }

  .vk3d-upload-box {
    margin-bottom: 10px !important;
    padding: 12px !important;
  }

  .vk3d-upload-head {
    gap: 10px !important;
    align-items: flex-start !important;
  }

  .vk3d-upload-title {
    font-size: .94rem !important;
  }

  .vk3d-upload-copy {
    font-size: .76rem !important;
    line-height: 1.35 !important;
  }

  .vk3d-file-picker-panel {
    margin-top: 10px !important;
    padding: 10px !important;
  }

  .vk3d-file-picker-row {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  .vk3d-file-label {
    margin: 0 !important;
    color: #fff !important;
    font-size: .78rem !important;
  }

  #file {
    max-width: 100% !important;
    font-size: .78rem !important;
    color: rgba(238,246,255,.82) !important;
  }

  #vk3d-dropzone {
    margin-top: 9px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    border: 1px dashed rgba(255,229,102,.34) !important;
    background: rgba(255,229,102,.045) !important;
    color: rgba(255,229,102,.95) !important;
    font-weight: 900 !important;
  }

  .filetable {
    margin-top: 10px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .filetable th,
  .filetable td {
    padding: 8px 9px !important;
    font-size: .78rem !important;
    vertical-align: middle !important;
  }

  .vk3d-toggle-btn,
  .vk3d-dup-btn,
  .vk3d-rem-btn {
    padding: 5px 7px !important;
    font-size: .72rem !important;
    border-radius: 7px !important;
  }

  .vk3d-sales-box {
    margin-top: 10px !important;
    padding: 11px 12px !important;
  }

  .vk3d-recommendation {
    margin-top: 10px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(95,215,255,.08), rgba(255,255,255,.045)) !important;
    border: 1px solid rgba(95,215,255,.18) !important;
  }

  .vk3d-recommendation.is-warning {
    background: linear-gradient(180deg, rgba(255,118,92,.10), rgba(255,255,255,.045)) !important;
    border-color: rgba(255,118,92,.28) !important;
  }

  .vk3d-reco-eyebrow {
    margin-bottom: 5px !important;
    color: rgba(255,229,102,.96) !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  .vk3d-reco-title {
    margin-bottom: 5px !important;
    color: #fff !important;
    font-size: .92rem !important;
    font-weight: 900 !important;
  }

  .vk3d-reco-copy {
    color: rgba(238,246,255,.76) !important;
    font-size: .76rem !important;
    line-height: 1.4 !important;
  }

  .vk3d-reco-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 9px !important;
  }

  .vk3d-reco-chips span {
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: rgba(238,246,255,.88) !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
  }

  .vk3d-presets-head {
    margin-bottom: 8px !important;
  }

  .vk3d-presets-sub,
  .vk3d-presets-badges {
    display: none !important;
  }

  .vk3d-presets {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .vk3d-presets label {
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
  }

  #vk3d-slicer-panel {
    margin: 10px 0 0 !important;
    padding: 11px !important;
    color: #eef6ff !important;
  }

  .vk3d-basic-box {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #eef6ff !important;
  }

  .vk3d-basic-info {
    margin: 0 0 9px !important;
    padding: 9px 10px !important;
    border-radius: 9px !important;
    background: rgba(95,215,255,.08) !important;
    border: 1px solid rgba(95,215,255,.16) !important;
    color: rgba(238,246,255,.82) !important;
    font-size: .75rem !important;
  }

  .vk3d-basic-box .vk3d-radio-group {
    margin: 0 0 8px !important;
  }

  .vk3d-basic-box .vk3d-radio-title {
    margin: 0 0 6px !important;
    color: #fff !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
  }

  .vk3d-basic-box .vk3d-radio-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .vk3d-basic-box .vk3d-radio-option {
    min-width: 0 !important;
    padding: 8px !important;
    gap: 3px !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    color: #eef6ff !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .vk3d-basic-box .vk3d-radio-option:has(input:checked) {
    background: rgba(255,229,102,.13) !important;
    border-color: rgba(255,229,102,.42) !important;
  }

  .vk3d-basic-box .vk3d-radio-option *,
  .vk3d-basic-box .vk3d-radio-label,
  .vk3d-basic-box .vk3d-radio-hint {
    color: #eef6ff !important;
  }

  .vk3d-bg #vk3d-slicer-panel .vk3d-basic-box,
  .vk3d-bg #vk3d-slicer-panel .vk3d-basic-box label,
  .vk3d-bg #vk3d-slicer-panel .vk3d-basic-box .vk3d-radio-title,
  .vk3d-bg #vk3d-slicer-panel .vk3d-basic-box .vk3d-basic-info,
  .vk3d-bg #vk3d-slicer-panel .vk3d-basic-box .vk3d-radio-label,
  .vk3d-bg #vk3d-slicer-panel .vk3d-basic-box .vk3d-radio-hint,
  .vk3d-bg #vk3d-slicer-panel .vk3d-basic-box .vk3d-card-text,
  .vk3d-bg #vk3d-slicer-panel .vk3d-basic-box legend,
  .vk3d-bg #vk3d-slicer-panel .vk3d-basic-box h3 {
    color: #eef6ff !important;
  }

  .vk3d-bg #vk3d-slicer-panel .vk3d-basic-box .vk3d-basic-info {
    color: rgba(238,246,255,.82) !important;
  }

  .vk3d-bg #vk3d-slicer-panel .vk3d-tip {
    background: rgba(95,215,255,.16) !important;
    color: #dff7ff !important;
    border: 1px solid rgba(95,215,255,.24) !important;
  }

  .vk3d-basic-box .vk3d-radio-label {
    font-size: .76rem !important;
    line-height: 1.15 !important;
  }

  .vk3d-basic-box .vk3d-radio-hint {
    font-size: .66rem !important;
    line-height: 1.2 !important;
    opacity: .74 !important;
  }

  .vk3d-basic-box .vk3d-card-text,
  .vk3d-adhesion-info {
    display: none !important;
  }

  .vk3d-unsure-btn,
  .vk3d-basic-extra-title {
    margin-top: 4px !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
    font-size: .74rem !important;
  }

  .vk3d-value-props {
    display: none !important;
  }

  .vk3d-trust-list {
    display: grid !important;
    gap: 7px !important;
    margin-top: 11px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
  }

  .vk3d-trust-list div {
    display: grid !important;
    gap: 2px !important;
    padding: 8px 9px !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.045) !important;
  }

  .vk3d-trust-list strong {
    color: #fff !important;
    font-size: .76rem !important;
    line-height: 1.2 !important;
  }

  .vk3d-trust-list span {
    color: rgba(238,246,255,.66) !important;
    font-size: .70rem !important;
    line-height: 1.28 !important;
  }

  .vk3d-help-btn {
    top: 86px !important;
    right: max(18px, calc((100vw - min(calc(100vw - 36px), 1920px)) / 2)) !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
  }
}

@media (min-width: 1600px) {
  .vk3d-bg .container {
    width: min(calc(100vw - 44px), 2040px) !important;
    max-width: 2040px !important;
  }

  form#orderForm {
    grid-template-columns: minmax(420px, 460px) minmax(620px, 1fr) minmax(340px, 390px) !important;
  }
}

@media (min-width: 1180px) and (max-height: 860px) {
  .vk3d-hero {
    display: none !important;
  }

  form#orderForm {
    min-height: calc(100svh - 96px) !important;
  }

  .vk3d-left,
  .vk3d-right-inner {
    height: calc(100svh - 96px) !important;
    max-height: calc(100svh - 96px) !important;
  }

  #preview,
  #preview-wrap {
    min-height: 420px !important;
  }

  .vk3d-contact-sub,
  .vk3d-quote-email-hint {
    display: none !important;
  }

  .vk3d-contact-box textarea {
    min-height: 58px !important;
  }

  #breakdown {
    max-height: 130px !important;
  }
}

@media (min-width: 1180px) {
  .vk3d-bg {
    --vk-workspace-height: clamp(560px, calc(100svh - 250px), 1100px);
  }

  form#orderForm {
    min-height: var(--vk-workspace-height) !important;
  }

  .vk3d-left {
    height: auto !important;
    max-height: var(--vk-workspace-height) !important;
  }

  .vk3d-right-inner {
    height: var(--vk-workspace-height) !important;
  }

  #vk3d-preview-tools {
    top: 12px !important;
    right: 12px !important;
    max-width: calc(100% - 24px) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  #vk3d-preview-tools button {
    min-height: 28px !important;
    padding: 6px 9px !important;
    border-radius: 8px !important;
    background: rgba(238,246,255,.88) !important;
    color: #13202a !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
  }

  #vk3d-preview-tools button.active {
    background: #ffe566 !important;
    color: #1f1a04 !important;
  }

  #vk3d-preview-hud {
    left: 14px !important;
    bottom: 14px !important;
    max-width: min(360px, calc(100% - 28px)) !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(238,246,255,.90) !important;
  }
}

@media (min-width: 1180px) and (max-height: 860px) {
  .vk3d-bg {
    --vk-workspace-height: clamp(500px, calc(100svh - 155px), 760px);
  }
}