/* KJ Plissee – mask.css (v0.6) */
/* Formular, Layout, Modal-Overlay mit Vollbild, responsive & z-index Fixes */

/* ---------- Formular-Grundlayout ---------- */
.kj-mask { margin: 1rem 0; }
.kj-mask .kj-grid-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 10px; }
.kj-mask .kj-section { border-top: 1px dashed #cfd4da; padding-top: 12px; margin-bottom: 16px; }
.kj-mask .kj-sec-head { font-weight: 600; margin-bottom: 8px; display: flex; justify-content: space-between; }
.kj-mask .kj-req { font-weight: 400; color: #6b7280; font-size: .875rem; }

.kj-mask .kj-field > span { display:block; font-weight:600; margin-bottom:6px; color:#374151; }
.kj-mask .kj-field input,
.kj-mask .kj-field select,
.kj-mask .kj-field textarea {
  width:100%; max-width:100%; height:44px; padding:8px 10px;
  font-size:16px; box-sizing:border-box; border:1px solid #d1d5db; border-radius:6px;
}

.kj-open-selector {
  display:inline-block; padding:10px 14px; border-radius:8px; border:0; cursor:pointer;
  background:#16a34a; color:#fff; font-weight:700;
}
.kj-open-selector:hover{ filter:brightness(1.05); }

/* Preisbox / Hinweise */
.kj-pricebox { padding:10px; border:1px solid #e5e7eb; border-radius:8px; background:#f9fafb; }
.kj-price-row { display:flex; align-items:center; gap:8px; font-size:1.1rem; }
.kj-price { font-size:1.3rem; }
.kj-incomplete{ margin-top:8px; background:#e0f2fe; border:1px solid #bae6fd; padding:6px 8px; border-radius:6px; color:#075985; }
.kj-ready{ margin-top:8px; }

/* Klicks/Tastatur sicher (ggf. Galerie-Overlays im Theme) */
.single-product .summary { position: relative; z-index: 3; }
.woocommerce-product-gallery { position: relative; z-index: 1; }
.kj-mask .kj-field input,
.kj-mask .kj-field select,
.kj-mask .kj-field textarea { pointer-events: auto; }

/* ---------- Overlay-Modal für die Stoffauswahl ---------- */
.kj-selector { position: fixed; inset: 0; z-index: 100001; display: none; }
.kj-selector.is-open { display: block; }
.kj-selector__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }

.kj-selector__dialog{
  position: absolute; inset: 5vh 5vw;
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:flex; flex-direction:column;
  max-width:1400px; max-height:90vh;
}

.kj-selector__toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid #e5e7eb; background:#f9fafb;
}
.kj-selector__tools{ display:flex; gap:8px; }
.kj-selector__btn{
  border:0; background:#e5e7eb; padding:6px 10px; border-radius:8px; cursor:pointer;
}
.kj-selector__btn:hover{ background:#d1d5db; }

.kj-selector__frame{ width:100%; height:100%; border:0; }

/* Vollbild-Modus */
.kj-selector.is-fullscreen .kj-selector__dialog{
  inset:0; border-radius:0; max-width:none; max-height:none;
}
html.kj-no-scroll, body.kj-no-scroll{ overflow:hidden !important; }

/* ---------- Mobil ---------- */
@media (max-width:980px){
  .kj-mask .kj-grid-2{ grid-template-columns:1fr; }
  .kj-selector__dialog{ inset:0; border-radius:0; }
}

/* iOS/Chrome dynamische Viewport-Höhe */
@supports (height:100dvh){
  .kj-selector.is-fullscreen .kj-selector__dialog{ height:100dvh; }
}