:root{
  --bg:#f2f5ff;
  --panel:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --primary:#2f6fff;
  --border:rgba(17,24,39,.10);
  --shadow:0 10px 30px rgba(17,24,39,.08);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:radial-gradient(900px 500px at 20% 0%, #ffffff 0%, var(--bg) 60%, #eaf0ff 100%);
  color:var(--text);
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  backdrop-filter: blur(10px);
  background:rgba(255,255,255,0.72);
  border-bottom:1px solid var(--border);
}

.brand{display:flex; align-items:center; gap:10px}
.logo{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, var(--primary), #6aa7ff);
  color:white;font-weight:900;
  box-shadow:0 10px 25px rgba(47,111,255,.25);
}
.brandTitle{font-weight:900; letter-spacing:.2px}
.brandSub{font-size:12px;color:var(--muted); margin-top:2px}

.topActions{display:flex;gap:10px;align-items:center}

.btn{
  border:1px solid var(--border);
  background:white;
  padding:10px 14px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(17,24,39,.06);
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background:linear-gradient(135deg, var(--primary), #6aa7ff);
  color:white;
  border:none;
}

.wrap{max-width:1180px; margin:18px auto; padding:0 14px 32px}

.errorBox{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,74,74,.10);
  border:1px solid rgba(255,74,74,.22);
  color:#7f1d1d;
  margin-bottom:12px;
  font-weight:600;
}

.grid{
  display:grid;
  grid-template-columns: 380px 1fr;
  gap:14px;
}
@media(max-width:980px){
  .grid{grid-template-columns:1fr}
}

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
}

h2{margin:4px 0 12px 0}
h3{margin:12px 0 10px 0}
.mt16{margin-top:16px}

.row{margin-bottom:10px}
.row label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}
.row input,.row select,.row textarea{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  outline:none;
  background:#fff;
}
.row textarea{resize:vertical}
.row.cols2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.note{
  font-size:12px;color:var(--muted);
  background:rgba(17,24,39,.03);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
}
.subpanel{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(17,24,39,.03);
  border:1px solid var(--border);
  margin-bottom:10px;
}

.toggleRow{
  display:flex;
  align-items:center;
  gap:10px;
}
.toggleRow input{width:auto}
.toggleRow label{margin:0;color:var(--text);font-weight:600}

hr{border:none;border-top:1px solid var(--border); margin:12px 0}

.rightHead{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.viewTabs{display:flex; gap:8px}
.tab{
  border:1px solid var(--border);
  background:white;
  padding:8px 12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
}
.tab.active{
  background:rgba(47,111,255,.12);
  border-color:rgba(47,111,255,.25);
  color:#163b9f;
}

.sum{text-align:right}
.sumLbl{font-size:12px;color:var(--muted)}
.sumVal{font-size:22px;font-weight:900}

.canvasWrap{
  margin-top:12px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
  position:relative;
}
#planCanvas{display:block; width:100%; height:auto}
.view3d{
  width:100%;
  height:720px;
}
@media(max-width:980px){
  .view3d{height:520px}
}

.infoWrap{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(17,24,39,.02);
}
.planInfo{font-size:12px;line-height:1.45;color:rgba(17,24,39,.92)}
.infoOffer{
  margin-top:8px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(47,111,255,.08);
  border:1px solid rgba(47,111,255,.18);
}
.infoOfferMuted{
  background:rgba(17,24,39,.03);
  border-color:var(--border);
}

.granitePreview{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.graniteCard{
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 20px rgba(17,24,39,.06);
}
.graniteCard img{
  width:100%;
  height:110px;
  object-fit:cover;
  display:block;
}
.graniteCap{
  padding:8px 10px;
  font-size:12px;
  color:rgba(17,24,39,.92);
}

.offersGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media(max-width:980px){
  .offersGrid{grid-template-columns:1fr}
}
.offerCard{
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 14px 30px rgba(17,24,39,.08);
}
.offerTop{
  position:relative;
  height:210px;
}
.offerBg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.05);
  transform:scale(1.05);
}
.offerGlass{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.38) 100%);
}
.offerInner{
  position:absolute; inset:0;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:white;
}
.offerHeader{font-size:12px;opacity:.92}
.offerTitle{font-size:18px;font-weight:1000;margin-top:6px;text-shadow:0 3px 14px rgba(0,0,0,.65)}
.offerPrice{font-size:34px;font-weight:1000; margin-top:6px; letter-spacing:.4px}

.offerBtns{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.offerBtns button{
  border:none;
  border-radius:14px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  background:linear-gradient(135deg, #ffffff, rgba(255,255,255,.85));
  color:#111827;
  box-shadow:0 14px 24px rgba(0,0,0,.20);
}
.offerBtns button.ghost{
  background:rgba(255,255,255,.18);
  color:white;
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(8px);
}

.offerFooter{
  padding:12px 14px;
  font-size:12px;
  color:rgba(17,24,39,.85);
  background:rgba(17,24,39,.02);
}
.offerBanner{
  margin-top:10px;
  padding:9px 10px;
  border-radius:14px;
  background:rgba(47,111,255,.10);
  border:1px solid rgba(47,111,255,.20);
  color:#163b9f;
  font-weight:900;
}

/* Modal */
.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:99;
  display:grid;
  place-items:center;
  padding:18px;
}
.modalOverlay{
  position:absolute; inset:0;
  background:rgba(17,24,39,.55);
  backdrop-filter: blur(8px);
}
.modalCard{
  position:relative;
  width:min(720px, 100%);
  background:#fff;
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  overflow:hidden;
}
.modalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.modalTitle{font-weight:1000}
.modalX{
  background:rgba(17,24,39,.04);
  border:1px solid var(--border);
  border-radius:12px;
  padding:6px 10px;
  cursor:pointer;
}
.modalBody{padding:14px}
.modalBtns{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}

.modalStatus{
  border-radius:14px;
  padding:10px 12px;
  margin-bottom:10px;
  border:1px solid var(--border);
  font-weight:800;
}
.modalStatus.ok{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.25);
  color:#14532d;
}
.modalStatus.bad{
  background:rgba(255,74,74,.10);
  border-color:rgba(255,74,74,.25);
  color:#7f1d1d;
}


/* Monument catalog */
.catalogGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 980px){
  .catalogGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.catalogItem{
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(17,24,39,.02);
  padding:10px;
  cursor:pointer;
  display:grid;
  gap:8px;
  transition: transform .05s ease, box-shadow .12s ease;
}
.catalogItem:hover{ transform: translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.06); }
.catalogItem.active{
  border-color: rgba(47,111,255,.55);
  box-shadow:0 0 0 3px rgba(47,111,255,.16);
  background: rgba(47,111,255,.06);
}
.catalogThumb{
  width:100%;
  aspect-ratio: 4 / 3;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.10);
  background: linear-gradient(135deg, rgba(47,111,255,.08), rgba(255,255,255,.0));
  display:grid;
  place-items:center;
  overflow:hidden;
}
.catalogThumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.catalogName{ font-weight:900; font-size:13px; color: rgba(17,24,39,.92); }
.catalogMeta{ font-size:12px; color: rgba(17,24,39,.70); }


/* Modal visible state */
.modal.show{display:grid;}

.granitePreviewMissing{background: repeating-linear-gradient(45deg, rgba(0,0,0,.06), rgba(0,0,0,.06) 10px, rgba(0,0,0,.02) 10px, rgba(0,0,0,.02) 20px);} 

.graniteDisclaimer{
  margin-top:10px;
  font-size:12.5px;
  line-height:1.35;
  color: rgba(17,24,39,.72);
  background: rgba(17,24,39,.02);
  border:1px solid rgba(17,24,39,.10);
  border-radius:12px;
  padding:10px 12px;
}

/* Paslėpti informacinį tekstą apie postamento gylį */
.note,
.helper-note,
.info-note,
.small-note,
#coverNote,
#planInfoNote {
  display: none !important;
}

/* Sticky preview (2D/3D + orientacinė suma) */
.stickyPreview{
  position: sticky;
  top: 12px;
  align-self: start;
  max-height: calc(100vh - 24px);
  overflow: auto;
}



/* ===== Layout v2 (reference-style: big preview left, options right) ===== */
.grid{
  display:grid;
  grid-template-columns: minmax(520px, 1.65fr) minmax(340px, 1fr);
  gap: 22px;
  align-items:start;
}

/* Swap columns without touching HTML */
.grid > aside.panel{ grid-column: 2; }
.grid > section.panel.stickyPreview{ grid-column: 1; }

/* Preview becomes the hero area */
.stickyPreview{
  position: sticky;
  top: 16px;
  padding: 16px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  border: 1px solid rgba(17,24,39,0.08);
}

.canvasWrap{
  border-radius: 16px;
  overflow: hidden;
  background: #f3f6fb;
  border: 1px solid rgba(17,24,39,0.08);
}

/* Make preview bigger / cleaner */
#planCanvas{
  width: 100%;
  height: auto;
  display:block;
}
.view3d{
  border-radius: 16px;
}

/* Right options panel styled like modern side panel */
.grid > aside.panel{
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 18px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(17,24,39,0.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

/* Make sections inside panel feel like cards */
.panel h2{
  font-size: 18px;
  margin-bottom: 14px;
}
.panel .row{
  margin-bottom: 14px;
}
.panel label{
  font-size: 12.5px;
  opacity: .78;
  margin-bottom: 6px;
}
.panel select, .panel input, .panel textarea{
  background: #f8fafc;
  border: 1px solid rgba(17,24,39,0.12);
}
.panel select:focus, .panel input:focus, .panel textarea:focus{
  outline: none;
  border-color: rgba(37,99,235,0.65);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

/* Header area above preview */
.rightHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.viewTabs .tab{
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(17,24,39,0.14);
  background: #ffffff;
}
.viewTabs .tab.active{
  background: rgba(37,99,235,0.10);
  border-color: rgba(37,99,235,0.35);
  color: #1d4ed8;
}
.sum{
  border-radius: 14px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(17,24,39,0.10);
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  text-align:right;
}
.sumLbl{ font-size: 11.5px; opacity:.72; }
.sumVal{ font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }

/* Make offers & summary look secondary (kept but calmer) */
.graniteDisclaimer, .infoWrap, .offersGrid{
  border-radius: 14px;
}
.infoWrap{
  background: #ffffff;
  border: 1px solid rgba(17,24,39,0.08);
}
.graniteDisclaimer{
  background: rgba(17,24,39,0.03);
  border: 1px solid rgba(17,24,39,0.08);
}

/* Scrollbar subtle (optional) */
.grid > aside.panel::-webkit-scrollbar{ width: 10px; }
.grid > aside.panel::-webkit-scrollbar-thumb{
  background: rgba(17,24,39,0.18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.grid > aside.panel::-webkit-scrollbar-track{ background: transparent; }

/* Mobile: stack */
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
  .grid > aside.panel{ grid-column: 1; position: relative; max-height: none; overflow: visible; }
  .grid > section.panel.stickyPreview{ grid-column: 1; position: relative; }
}



/* ===== Layout v3 fixes: show preview immediately + scroll together ===== */
.wrap{ margin: 10px auto; }

.stickyPreview{
  max-height: none !important;
  overflow: visible !important;
  top: 12px;
}

.grid > aside.panel{
  position: relative !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Ensure the left column never collapses */
.grid > section.panel.stickyPreview{ align-self: start; }



/* ===== Layout v4 fixes: remove empty top-left gap + keep both columns visible ===== */
.grid{
  grid-auto-flow: row dense;
}
.grid > aside.panel{
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: sticky !important;
  top: 16px !important;
  align-self: start !important;
  max-height: none !important;
  overflow: visible !important;
}
.grid > section.panel.stickyPreview{
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: sticky !important;
  top: 16px !important;
  align-self: start !important;
  max-height: none !important;
  overflow: visible !important;
}



/* ===== Mobile fixes (v5) ===== */
@media (max-width: 900px){
  /* one column, no squeezed two-panel view */
  .grid{
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 16px !important;
  }
  .grid > section.panel.stickyPreview,
  .grid > aside.panel{
    grid-column: 1 !important;
    grid-row: auto !important;
    position: relative !important; /* avoid weird sticky on small screens */
    top: auto !important;
  }

  /* make header buttons fit */
  .topbar{
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .topbar .actions{
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  .topbar .btn,
  .topbar button{
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }

  /* 2D/3D area: fit in screen */
  .stickyPreview{ padding: 14px !important; }
  .canvasWrap{
    padding: 12px !important;
  }

  /* keep price + tabs compact */
  .rightHead{
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .sum{
    width: 100% !important;
    text-align: left !important;
  }

  /* ensure canvases never overflow; give them a sensible height */
  #planCanvas{
    width: 100% !important;
    height: auto !important;
    max-height: 52vh !important;
  }
  .view3d, #view3d, canvas.webgl{
    width: 100% !important;
    max-height: 52vh !important;
  }
  /* if 3D container uses a fixed height, override */
  .view3d{ height: min(52vh, 420px) !important; }

  /* options panel spacing */
  .panel{
    padding: 16px !important;
    border-radius: 18px !important;
  }
  .row{
    margin-bottom: 12px !important;
  }
  label{
    font-size: 13px !important;
  }
  select, input, textarea{
    font-size: 16px !important; /* prevents mobile zoom quirks */
  }

  /* granite offer cards and catalog tiles: prevent 2 columns squish */
  .offersGrid,
  .monumentsGrid,
  .cardsGrid{
    grid-template-columns: 1fr !important;
  }

  /* keep disclaimer readable */
  .graniteDisclaimer{
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

/* Very small phones */
@media (max-width: 420px){
  #planCanvas{ max-height: 46vh !important; }
  .view3d{ height: min(46vh, 360px) !important; }
  .sumVal{ font-size: 20px !important; }
}



/* ===== Mobile & preview fixes (v6) ===== */

/* Ensure no blank clipping on preview area */
.stickyPreview{
  max-height: none;          /* allow full preview block */
  overflow: visible;         /* avoid cropping the 2D canvas */
}

/* 2D preview container: never crop */
.canvasWrap{
  overflow: visible;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding: 14px;
  background: #f3f6fb;
}

/* Make canvas scale down cleanly */
#planCanvas{
  max-width: 100%;
  height: auto;
}

/* Responsive: stack earlier (helps tablets/phones) */
@media (max-width: 1100px){
  .grid{
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 16px !important;
  }
  .grid > section.panel.stickyPreview,
  .grid > aside.panel{
    grid-column: 1 !important;
    grid-row: auto !important;
    position: relative !important;
    top: auto !important;
  }
}

/* True mobile tweaks */
@media (max-width: 520px){
  /* reduce paddings so preview fits */
  .stickyPreview{ padding: 12px !important; }
  .canvasWrap{ padding: 10px !important; }
  #planCanvas{ max-height: 60vh !important; }

  /* keep actions from squeezing */
  .topbar .actions{ flex-wrap: wrap !important; }
  .topbar .btn, .topbar button{ width: auto; min-width: 0; }
}



/* ===== Catalog monument dimensions ===== */
.catalogDims{
  font-size: 12.5px;
  opacity: .78;
  margin-top: 4px;
  line-height: 1.2;
}