/* TODO v¨®¨®r livegang: prefix elke top-level selector hieronder met
       .aio-shutter-config zodat niets buiten dit blok kan lekken
       (menu, andere widgets, thema-stijlen). */
    .aio-shutter-config * { box-sizing: border-box; }
  .aio-shutter-config { font-family: -apple-system, Arial, sans-serif; background:#f4f4f4; color:#222; padding:20px; margin:0; }
  .aio-shutter-config .layout { max-width: 1180px; margin:0 auto; display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }

  .aio-shutter-config .preview-col { flex: 1 1 380px; position: sticky; top: var(--aio-sticky-offset, 0px); z-index: 10; }
  .aio-shutter-config .info-icon-btn { display: none; }
  .aio-shutter-config .info-popover { display: none; }

  
  .aio-shutter-config label.field-label { display:block; font-size:13px; color:#555; margin-bottom:4px; font-weight:600; }
  .aio-shutter-config .char-counter { text-align:right; font-size:12px; color:#999; margin-top:-6px; }
  .aio-shutter-config .choice-row { display:flex; gap:10px; margin-bottom:14px; }
  .aio-shutter-config .choice-btn { flex:1; padding:14px; border:2px solid #e2e2e2; border-radius:10px; text-align:center; cursor:pointer; font-weight:600; font-size:14px; background:#fafafa; }
  .aio-shutter-config .choice-btn.selected { border-color:#2f6fed; background:#eef3ff; color:#2f6fed; }
  .aio-shutter-config .window-row {
    display:flex; flex-direction:column; gap:6px; margin-bottom:10px;
    background:#fafafa; padding:8px; border-radius:8px;
  }
  .aio-shutter-config .window-row input {
    margin-bottom:0; font-size:13px; padding:9px 8px; text-align:center; width:100%; box-sizing:border-box;
  }
  .aio-shutter-config .window-row-line1 { display:flex; gap:6px; }
  .aio-shutter-config .window-row-line1 input { flex:1 1 0; min-width:0; }
  .aio-shutter-config .window-row-line2 { display:flex; gap:6px; align-items:flex-end; }
  .aio-shutter-config .window-row-line2 .qty { flex:1 1 0; min-width:0; }
  .aio-shutter-config .field-with-label { display:flex; flex-direction:column; gap:3px; flex:1 1 0; min-width:0; }
  .aio-shutter-config .field-label-small { font-size:11px; font-weight:700; color:#666; text-transform:uppercase; letter-spacing:0.02em; }
  .aio-shutter-config .info-callout {
    background:#eef6ff; border:1px solid #cfe3fb; border-radius:8px;
    padding:12px 14px; font-size:13px; line-height:1.5; color:#2c4f73;
    margin-bottom:16px; display:flex; gap:8px; align-items:flex-start;
  }
  .aio-shutter-config .info-callout-icon { font-size:16px; flex-shrink:0; line-height:1.4; }
  .aio-shutter-config .remove-row { background:#ffeded; color:#d33; border:none; border-radius:6px; width:32px; height:32px; cursor:pointer; font-weight:700; flex-shrink:0; }
  .aio-shutter-config .add-row-btn { margin-top:6px; padding:10px 16px; border:2px dashed #2f6fed; color:#2f6fed; background:#fff; border-radius:8px; cursor:pointer; font-weight:600; font-size:13px; }
  .aio-shutter-config .row-count-note { font-size:12px; color:#999; margin-top:6px; }
  .aio-shutter-config .nav-buttons { display:flex; justify-content:space-between; margin-top:26px; }
  .aio-shutter-config .btn { padding:12px 24px; border-radius:8px; border:none; font-weight:700; font-size:14px; cursor:pointer; }
  .aio-shutter-config .btn-primary { background:#2f6fed; color:#fff; }
  .aio-shutter-config .btn-primary:disabled { background:#cfd8ee; cursor:not-allowed; }
  .aio-shutter-config .btn-secondary { background:#eee; color:#555; }
  .aio-shutter-config .b2b-fields { display:none; margin-top:6px; padding-top:6px; border-top:1px dashed #ddd; }
  .aio-shutter-config .b2b-fields.show { display:block; }
  .aio-shutter-config .check-row { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
  .aio-shutter-config .file-drop { border:2px dashed #ccc; border-radius:10px; padding:20px; text-align:center; color:#888; font-size:13px; cursor:pointer; }
  .aio-shutter-config .file-drop.has-file { border-color:#2f6fed; color:#2f6fed; }
  .aio-shutter-config .summary-box { background:#f7f9ff; border:1px solid #dde6ff; border-radius:8px; padding:14px; font-size:12px; line-height:1.6; margin-top:16px; white-space:pre-wrap; max-height:220px; overflow:auto; }
  .aio-shutter-config .info-box { background:#fff8e6; border:1px solid #ffe0a3; border-radius:8px; padding:12px 14px; font-size:13px; line-height:1.6; margin-top:14px; white-space:pre-wrap; }
  .aio-shutter-config .info-box b { color:#9a6b00; }
  .aio-shutter-config .asset-warning { font-size:11px; color:#c47b00; margin-top:6px; }

  
  .aio-shutter-config .house-container {
    position: relative; width: 100%; max-width: 640px; margin: 0 auto;
    border-radius:10px; overflow:hidden; background:#eee; aspect-ratio: 1 / 1;
  }
  .scene-photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display:block;
    opacity: 0; transition: opacity 0.6s ease-in-out;
  }
  .scene-photo.is-visible { opacity: 1; }
  .scene-placeholder {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    text-align:center; padding: 20px; color:#888; font-size:14px; background:#eee;
  }
  .scene-placeholder.is-hidden { display:none; }

  /* Open/Dicht demo feature: no "closed" renders exist yet, so this is hidden
     from visitors for now (space left blank). The underlying JS logic and the
     step-4 Vast/Beweegbaar question (still needed for order data) are both
     left fully in place - only the visible toggle UI is switched off here,
     so re-enabling it later is just deleting these two "display:none" rules. */
  .aio-shutter-config .preview-toggle-wrap { display: none; }
  .aio-shutter-config .preview-note { display: none; }
  .aio-shutter-config .info-icon-btn { display: none !important; }
  .aio-shutter-config .info-popover { display: none !important; }

  .aio-shutter-config .preview-toggle-btn {
    box-sizing: border-box; margin:0; border:none; outline:none; -webkit-appearance:none; appearance:none;
    padding:10px 20px; border-radius:8px; background:#2f6fed; color:#fff; cursor:pointer; font-size:14px; font-weight:600;
    display:inline-flex; align-items:center; justify-content:center; user-select:none;
    -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  }
  .aio-shutter-config .preview-toggle-btn.is-disabled { background:#cfd8ee; cursor:not-allowed; }

  .aio-shutter-config .form-wrap { flex: 1 1 380px; background:#fff; border-radius:12px; padding:30px; box-shadow:0 2px 12px rgba(0,0,0,0.08); min-width:320px; }
  .aio-shutter-config .progress { display:flex; justify-content:space-between; margin-bottom:24px; gap:2px; }
  .aio-shutter-config .progress-dot { flex:1; height:5px; border-radius:3px; background:#e0e0e0; }
  .aio-shutter-config .progress-dot.done { background:#2f6fed; }
  .aio-shutter-config .step-title { font-size:20px; font-weight:700; margin-bottom:4px; }
  .aio-shutter-config .step-sub { font-size:13px; color:#888; margin-bottom:20px; }
  .aio-shutter-config .step { display:none; } .aio-shutter-config .step.active { display:block; }
  .aio-shutter-config .grid-select { display:grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap:12px; }
  .aio-shutter-config .option-card { border:2px solid #e2e2e2; border-radius:10px; padding:10px; cursor:pointer; text-align:center; transition: border-color .15s; background:#fafafa; }
  .aio-shutter-config .option-card.selected { border-color:#2f6fed; background:#eef3ff; }
  .aio-shutter-config .option-card img { width:100%; height:90px; object-fit:contain; display:block; margin-bottom:6px; }
  .aio-shutter-config .option-card span { font-size:12px; font-weight:600; }
  .aio-shutter-config .swatch-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
  .aio-shutter-config .swatch-grid {
    display:grid; grid-template-columns: repeat(auto-fill, minmax(78px,1fr)); gap:12px; margin-bottom:16px;
  }
  .aio-shutter-config .swatch-item {
    display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
    padding:6px; border-radius:10px; border:2px solid transparent;
  }
  .aio-shutter-config .swatch-item.selected { border-color:#2f6fed; background:#eef3ff; }
  .aio-shutter-config .swatch-item .swatch-label {
    font-size:11px; line-height:1.35; text-align:center; color:#555; font-weight:600;
  }
  .aio-shutter-config .swatch { width:42px; height:42px; border-radius:8px; border:2px solid #ddd; cursor:pointer; }
  .aio-shutter-config .swatch.selected { border-color:#2f6fed; box-shadow:0 0 0 2px #2f6fed; }
  .aio-shutter-config .swatch-geen-kleur {
    background: repeating-linear-gradient(45deg, #e8e8e8, #e8e8e8 5px, #ffffff 5px, #ffffff 10px);
  }
  .aio-shutter-config input[type=text], .aio-shutter-config input[type=email], .aio-shutter-config input[type=tel], .aio-shutter-config input[type=number], .aio-shutter-config textarea {
    width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-size:14px; margin-bottom:10px;
  }

  @media (max-width: 760px) {
    .aio-shutter-config .preview-col { top: 0; }
    .aio-shutter-config .house-container { max-width: 100%; }

    .aio-shutter-config .preview-toggle-wrap {
      position: absolute; top: 8px; right: 8px; margin: 0; z-index: 20;
    }
    .aio-shutter-config .preview-toggle-btn {
      padding: 4px 8px; font-size: 9px; border-radius: 6px;
      background: rgba(47,111,237,0.88);
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }
    .aio-shutter-config .preview-toggle-btn.is-disabled { background: rgba(207,216,238,0.85); }

    .aio-shutter-config .preview-note { display: none; }

    .aio-shutter-config .info-icon-btn {
      box-sizing: border-box; margin: 0; padding: 0; border: none; outline: none;
      -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
      display: flex; align-items: center; justify-content: center;
      position: absolute; top: 8px; left: 8px; z-index: 20;
      width: 26px; height: 26px; min-width: 26px; min-height: 26px;
      max-width: 26px; max-height: 26px; border-radius: 50%; flex-shrink: 0;
      background: rgba(0,0,0,0.55); color: #fff;
      font-size: 14px; font-weight: 700; font-style: italic; font-family: Georgia, serif;
      cursor: pointer; line-height: 1; -webkit-appearance: none; appearance: none;
    }
    .aio-shutter-config .info-popover {
      position: absolute; top: 42px; left: 8px; z-index: 21;
      max-width: 78%; background: rgba(20,20,20,0.92); color: #fff;
      font-size: 12px; line-height: 1.5; padding: 10px 12px; border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .aio-shutter-config .info-popover.show { display: block; }
  }