/* KBK Koffiefinder Enhanced Styles - Final Version */
:root{
  --kbk-primary:#b61f1f;
  --kbk-primary-50:#fef2f2;
  --kbk-primary-100:#fee2e2;
  --kbk-primary-200:#fecaca;
  --kbk-primary-500:#b61f1f;
  --kbk-primary-600:#a31c1c;
  --kbk-primary-700:#8e1818;
  --kbk-primary-900:#6b1515;

  --kbk-success:#10b981;
  --kbk-warning:#f59e0b;

  --kbk-gray-50:#f9fafb;
  --kbk-gray-100:#f3f4f6;
  --kbk-gray-200:#e5e7eb;
  --kbk-gray-300:#d1d5db;
  --kbk-gray-400:#9ca3af;
  --kbk-gray-500:#6b7280;
  --kbk-gray-600:#4b5563;
  --kbk-gray-700:#374151;
  --kbk-gray-800:#1f2937;
  --kbk-gray-900:#111827;

  --kbk-radius-sm:8px;
  --kbk-radius-md:12px;
  --kbk-radius-lg:16px;
  --kbk-radius-xl:20px;

  --kbk-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);
  --kbk-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);
  --kbk-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);
  --kbk-shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);
  --kbk-shadow-2xl:0 25px 50px -12px rgb(0 0 0 / 0.25);

  --kbk-focus:0 0 0 2px #fff,0 0 0 4px var(--kbk-primary-500);
  --kbk-transition:all .2s cubic-bezier(.4,0,.2,1);
  --kbk-transition-slow:all .3s cubic-bezier(.4,0,.2,1);
}

/* Entry Buttons - huisstijl geïntegreerd, opvallend maar passend */
.kbk-open{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 32px;border:2px solid var(--kbk-primary-500);border-radius:8px;
  background:var(--kbk-primary-500);color:#fff;font-weight:600;font-size:16px;
  line-height:1.5;text-decoration:none;cursor:pointer;font-family:inherit;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 6px 20px rgba(182,31,31,0.3);
  text-transform:none;letter-spacing:0.5px;min-height:52px;
  position:relative;overflow:hidden;
}
.kbk-open::before{
  content:'';position:absolute;inset:0;background:linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  transform:translateX(-100%);transition:transform 0.6s;
}
.kbk-open:hover::before{transform:translateX(100%);}
.kbk-open:hover{
  background:var(--kbk-primary-600);color:#fff;
  border-color:var(--kbk-primary-700);
  transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(182,31,31,0.4), 0 0 0 3px rgba(182,31,31,0.15);
}
.kbk-open:active{transform:translateY(-1px)}
.kbk-open:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(182,31,31,0.5)}

/* Modal Overlay */
.kbk-modal{
  position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px
}
.kbk-modal.open{display:flex;animation:modalFadeIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}

/* Panel */
.kbk-panel{
  position:relative;width:100%;max-width:900px;height:85vh;min-height:600px;background:#fff;
  border-radius:var(--kbk-radius-xl);box-shadow:var(--kbk-shadow-2xl);overflow:hidden;
  animation:modalSlideIn .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column
}
@keyframes modalSlideIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Close Button - aangepast voor betere layout positionering */
.kbk-close{
  position:absolute !important;top:20px !important;right:20px !important;z-index:9999 !important;
  width:40px !important;height:40px !important;border:0 !important;
  border-radius:50% !important;background:rgba(255,255,255,0.98) !important;color:var(--kbk-gray-700) !important;
  font-size:24px !important;cursor:pointer !important;transition:all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  box-shadow:0 2px 12px rgba(0,0,0,0.15) !important;backdrop-filter:blur(10px) !important;
  margin:0 !important;line-height:1 !important;padding:0 !important;
}
.kbk-close:hover{
  background:rgba(248,249,250,1) !important;color:var(--kbk-gray-900) !important;
  transform:scale(1.08) !important;box-shadow:0 4px 20px rgba(0,0,0,0.2) !important;
}
.kbk-close:focus-visible{outline:none !important;box-shadow:0 0 0 3px rgba(182,31,31,0.5) !important;}

/* Header */
.kbk-header{
  padding:32px 32px 24px;background:linear-gradient(135deg,var(--kbk-gray-50) 0%,#fff 100%);
  border-bottom:1px solid var(--kbk-gray-200);flex-shrink:0
}
.kbk-header h2{margin:0 0 16px;font-size:28px;font-weight:800;color:var(--kbk-gray-900);letter-spacing:-.02em}
.kbk-subtitle{margin:12px 0 0;color:var(--kbk-gray-600);font-size:16px;line-height:1.5}

/* Progress */
.kbk-progress{height:4px;background:var(--kbk-gray-200);border-radius:2px;overflow:hidden;margin-bottom:4px}
.kbk-progress-bar{
  height:100%;background:linear-gradient(90deg,var(--kbk-primary-500) 0%,var(--kbk-primary-600) 100%);
  border-radius:2px;transition:width .4s cubic-bezier(.4,0,.2,1)
}

/* Container */
.kbk-container{flex:1;position:relative;overflow:hidden}
body.kbk-locked{overflow:hidden}

/* Steps */
.kbk-step{
  position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:translateX(50px);
  transition:var(--kbk-transition-slow);pointer-events:none
}
.kbk-step--active{opacity:1;transform:translateX(0);pointer-events:all}
.kbk-step--prev{transform:translateX(-50px)}
.kbk-step-content{
  flex:1;padding:40px 32px 20px;display:flex;flex-direction:column;justify-content:center;
  max-height:calc(100% - 100px);overflow-y:auto
}
.kbk-step-icon{
  width:60px;height:60px;margin:0 auto 24px;
  background:linear-gradient(135deg,var(--kbk-primary-50) 0%,var(--kbk-primary-100) 100%);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;
  border:3px solid var(--kbk-primary-200);flex-shrink:0
}
.kbk-step-icon.success{background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%);border-color:#6ee7b7}
.kbk-step h3{margin:0 0 12px;font-size:24px;font-weight:700;text-align:center;color:var(--kbk-gray-900)}
.kbk-step-desc{margin:0 0 32px;text-align:center;color:var(--kbk-gray-600);font-size:16px;line-height:1.6}

/* === UNIFORME KNOP STYLING - ALLE STAPPEN === */
/* Alle choice containers krijgen consistente grid layout */
.kbk-step .choices,
.kbk-grid-2rows,
.kbk-grid-1row,
.kbk-strength-presets,
.kbk-price-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  justify-content: center;
  justify-items: center;
  margin: 0 auto 16px;
  max-width: 700px;
}

/* Speciale layout voor stap 4 (sterkte presets) - 3 kolommen */
.kbk-step[data-step="4"] .kbk-strength-presets {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  max-width: 500px;
}

/* Speciale layout voor stap 3 (cafeïne) - 3 kolommen */
.kbk-step[data-step="3"] .choices {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

/* Speciale layout voor stap 5 (prijsklasse) - 2+1 layout */
.kbk-step[data-step="5"] .choices {
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 12px;
  max-width: 400px;
}
.kbk-step[data-step="5"] .choices button:last-child {
  grid-column: 1 / -1;
  max-width: 200px;
  justify-self: center;
}

/* Uniforme button styling voor ALLE knoppen */
.kbk-step .choices button,
.kbk-grid-2rows button,
.kbk-grid-1row button,
.strength-preset-btn,
.price-preset-btn,
.kbk-strength-presets button {
  position: relative;
  padding: 14px 10px;
  border: 2px solid var(--kbk-gray-300);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 85px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  width: 100%;
  max-width: none;
}

/* Uniforme hover states */
.kbk-step .choices button:hover,
.kbk-grid-2rows button:hover,
.kbk-grid-1row button:hover,
.strength-preset-btn:hover,
.price-preset-btn:hover,
.kbk-strength-presets button:hover {
  border-color: var(--kbk-primary-400);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* Uniforme active states */
.kbk-step .choices button.active,
.kbk-grid-2rows button.active,
.kbk-grid-1row button.active,
.strength-preset-btn.active,
.price-preset-btn.active,
.kbk-strength-presets button.active {
  border-color: var(--kbk-primary-500);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(182,31,31,0.25), 0 8px 25px rgba(182,31,31,0.15);
  transform: translateY(-1px);
}

/* Focus states */
.kbk-step .choices button:focus-visible,
.kbk-grid-2rows button:focus-visible,
.kbk-grid-1row button:focus-visible,
.strength-preset-btn:focus-visible,
.price-preset-btn:focus-visible,
.kbk-strength-presets button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(182,31,31,0.4);
}

.choice-icon{font-size:32px;margin-bottom:4px}
.choice-title{font-weight:700;font-size:16px;color:var(--kbk-gray-900)}
.choice-desc{color:var(--kbk-gray-500);font-size:14px;margin-top:auto}

/* Step Navigation */
.kbk-step-nav{
  display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 32px;
  background:var(--kbk-gray-50);border-top:1px solid var(--kbk-gray-200);flex-shrink:0
}

/* Buttons */
.kbk-btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:0;
  border-radius:var(--kbk-radius-md);font-weight:600;font-size:16px;cursor:pointer;
  transition:var(--kbk-transition);text-decoration:none;line-height:1.5
}
.kbk-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.kbk-btn--primary{
  background:linear-gradient(135deg,var(--kbk-primary-500) 0%,var(--kbk-primary-600) 100%);
  color:#fff;box-shadow:var(--kbk-shadow-md)
}
.kbk-btn--primary:not(:disabled):hover{transform:translateY(-1px);box-shadow:var(--kbk-shadow-lg)}
.kbk-btn--secondary{background:#fff;color:var(--kbk-gray-700);border:1px solid var(--kbk-gray-300);border-radius:12px;}
.kbk-btn--secondary:hover{background:var(--kbk-gray-50);border-color:var(--kbk-gray-400)}
.kbk-btn--finish{
  background:linear-gradient(135deg,var(--kbk-success) 0%,#059669 100%);
  color:#fff;font-size:18px;padding:16px 32px
}
.kbk-btn:focus-visible{outline:none;box-shadow:var(--kbk-focus)}

.strength-preset-btn .preset-icon,
.price-preset-btn .preset-icon{font-size:24px}
.strength-preset-btn .preset-title,
.price-preset-btn .preset-title{font-weight:700;color:var(--kbk-gray-900)}
.strength-preset-btn .preset-range{display:none;}
.price-preset-btn .preset-range{color:var(--kbk-gray-500);font-size:13px}

/* Ranges */
.kbk-range-controls{display:flex;flex-direction:column;gap:20px;max-width:400px;margin:0 auto}
.range-group{display:flex;flex-direction:column;gap:8px}
.range-group label{font-weight:600;color:var(--kbk-gray-700);font-size:14px}
.range-input-wrapper{display:flex;gap:12px;align-items:center}
.range-slider{
  flex:1;height:8px;border-radius:4px;background:linear-gradient(to right, var(--kbk-gray-200) 0%, var(--kbk-gray-200) 100%);
  outline:none;-webkit-appearance:none;appearance:none;
}
.range-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--kbk-primary-500);
  cursor:pointer;box-shadow:var(--kbk-shadow-md);transition:var(--kbk-transition);border:2px solid #fff;
}
.range-slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:var(--kbk-shadow-lg)}
.range-slider::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--kbk-primary-500);
  cursor:pointer;box-shadow:var(--kbk-shadow-md);transition:var(--kbk-transition);border:2px solid #fff;
}
.range-slider::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:var(--kbk-shadow-lg)}
.range-display{
  width:50px;padding:8px 10px;border:2px solid var(--kbk-gray-300);border-radius:8px;
  text-align:center;font-weight:700;font-size:16px;background:#fff;color:var(--kbk-gray-900);
}
.range-display:focus{outline:none;border-color:var(--kbk-primary-500);box-shadow:0 0 0 3px rgba(182,31,31,.15)}

/* Results - verbeterde layout: gecentreerde titel, "Neu starten" rechtsboven */
.kbk-results{
  position:absolute;inset:0;padding:30px 32px;opacity:0;transform:translateY(20px);
  transition:var(--kbk-transition-slow);pointer-events:none;overflow-y:auto
}
.kbk-results.show{opacity:1;transform:translateY(0);pointer-events:all}

.kbk-results-header{
  position:relative;text-align:center;margin-bottom:20px;
}
.results-title{
  text-align:center;width:100%;
}
.results-title h3{margin:16px 0 8px;font-size:24px;font-weight:700;color:var(--kbk-gray-900)}
.results-title p{margin:0;color:var(--kbk-gray-600);font-size:16px}
.results-actions{
  position:absolute;top:0;right:0;
}
.results-actions .kbk-restart{
  border-radius:12px;
}

/* Bulk hint */
.kbk-bulk-hint{
  margin:8px 0;padding:10px 14px;border:1px dashed var(--kbk-gray-300);
  border-radius:12px;background:#fff;color:var(--kbk-gray-700);text-align:center;font-size:14px
}

/* Filters - ronde afwerking, consistent design */
.kbk-results-filters{
  display:flex;gap:10px;margin-bottom:20px;justify-content:center;flex-wrap:wrap
}
.filter-btn{
  padding:10px 16px;border:2px solid var(--kbk-gray-300);border-radius:16px;
  background:#fff;color:var(--kbk-gray-600);cursor:pointer;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  font-size:14px;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,0.06)
}
.filter-btn:hover{border-color:var(--kbk-primary-400);color:var(--kbk-primary-600)}
.filter-btn.active{
  background:#fff;border-color:var(--kbk-primary-500);color:var(--kbk-primary-600);
  box-shadow:0 0 0 3px rgba(182,31,31,0.2), 0 4px 15px rgba(182,31,31,0.1)
}

/* Cards - ronde afwerking, consistent met rest van design */
.kbk-cards-container{position:relative}
.kbk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.kbk-card{
  background:#fff;border:1px solid var(--kbk-gray-200);border-radius:16px;overflow:hidden;
  transition:var(--kbk-transition);box-shadow:0 2px 8px rgba(0,0,0,0.06);display:flex;flex-direction:column
}
.kbk-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,0.12);border-color:var(--kbk-gray-300)}
.kbk-card .img{position:relative;aspect-ratio:1;background:var(--kbk-gray-50);overflow:hidden}
.kbk-card .img img{width:100%;height:100%;object-fit:contain;transition:var(--kbk-transition)}
.kbk-card:hover .img img{transform:scale(1.05)}
.kbk-card-content{padding:18px;flex:1;display:flex;flex-direction:column}
.kbk-card h4{margin:0 0 12px;font-size:16px;font-weight:700;line-height:1.4;color:var(--kbk-gray-900)}
.kbk-card h4 a{color:inherit;text-decoration:none;transition:var(--kbk-transition)}
.kbk-card h4 a:hover{color:var(--kbk-primary-600)}
.kbk-card .excerpt{margin:0 0 14px;color:var(--kbk-gray-600);font-size:14px;line-height:1.5;flex:1}
.kbk-card .meta{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;font-size:14px
}
.kbk-card .price{font-weight:800;font-size:18px;color:var(--kbk-primary-600)}
.kbk-card .badge{
  display:inline-flex;align-items:center;gap:4px;padding:4px 8px;
  background:var(--kbk-primary-100);color:var(--kbk-primary-700);
  border-radius:12px;font-size:12px;font-weight:600
}

/* Card actions - ronde afwerking, consistent design */
.kbk-card .actions{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
.kbk-card .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;
  border-radius:16px;font-weight:700;font-size:14px;text-decoration:none;transition:var(--kbk-transition)
}
.kbk-card .kbk-view{background:var(--kbk-gray-900);color:#fff;border:0}
.kbk-card .kbk-view:hover{background:var(--kbk-primary-500);transform:translateY(-1px)}
.kbk-card .kbk-quick-add{
  background:linear-gradient(135deg,var(--kbk-primary-500) 0%,var(--kbk-primary-600) 100%);
  color:#fff;border:0
}
.kbk-card .kbk-quick-add:hover{filter:brightness(1.05);transform:translateY(-1px)}

/* Match & Priority badges */
.match-score{
  position:absolute;top:12px;right:12px;
  background:linear-gradient(135deg,var(--kbk-primary-500) 0%,var(--kbk-primary-600) 100%);
  color:#fff;padding:6px 10px;border-radius:12px;
  font-size:12px;font-weight:700;box-shadow:var(--kbk-shadow-md)
}
.priority-indicator{
  position:absolute;top:12px;left:12px;
  background:linear-gradient(135deg,var(--kbk-warning) 0%,#d97706 100%);
  color:#fff;padding:4px 8px;border-radius:8px;
  font-size:10px;font-weight:700;text-transform:uppercase
}

/* Loading & Empty */
.kbk-loading{
  padding:60px 20px;text-align:center;color:var(--kbk-gray-500);font-size:16px;grid-column:1 / -1
}
.kbk-loading::before{
  content:'';display:block;width:40px;height:40px;margin:0 auto 16px;border:3px solid var(--kbk-gray-200);
  border-top-color:var(--kbk-primary-500);border-radius:50%;animation:spin 1s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.kbk-empty{
  padding:60px 20px;text-align:center;color:var(--kbk-gray-500);background:var(--kbk-gray-50);
  border-radius:16px;border:2px dashed var(--kbk-gray-300);grid-column:1 / -1
}

/* Toast */
.kbk-toast{
  position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);
  background:var(--kbk-gray-900);color:#fff;padding:12px 24px;border-radius:12px;
  font-weight:600;box-shadow:var(--kbk-shadow-xl);z-index:10000;opacity:0;
  transition:var(--kbk-transition-slow)
}
.kbk-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.kbk-toast.error{background:#dc2626}
.kbk-toast.success{background:var(--kbk-success)}

/* Animations */
.kbk-bump{animation:bump .3s ease-in-out}
@keyframes bump{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.kbk-fade-in{animation:fadeIn .5s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Scrollbars */
.kbk-step-content::-webkit-scrollbar,
.kbk-results::-webkit-scrollbar{width:6px}
.kbk-step-content::-webkit-scrollbar-track,
.kbk-results::-webkit-scrollbar-track{background:var(--kbk-gray-50)}
.kbk-step-content::-webkit-scrollbar-thumb,
.kbk-results::-webkit-scrollbar-thumb{background:var(--kbk-gray-300);border-radius:3px}
.kbk-step-content::-webkit-scrollbar-thumb:hover,
.kbk-results::-webkit-scrollbar-thumb:hover{background:var(--kbk-gray-400)}

/* === RESPONSIVE AANPASSINGEN === */
@media (max-width:768px){
  .kbk-panel{margin:0;border-radius:0;height:100vh;min-height:auto;max-height:none}
  .kbk-header{padding:20px 16px 16px}
  .kbk-header h2{font-size:22px}
  
  /* Close button voor alle mobiele schermen - altijd binnen bereik */
  .kbk-close{top:16px !important;right:16px !important;width:38px !important;height:38px !important;font-size:22px !important;}
  
  .kbk-step-content{padding:16px 16px 12px}
  .kbk-step-nav{padding:14px 16px;flex-direction:column;gap:10px}
  .kbk-btn{width:100%;justify-content:center}

  /* Mobiele grid aanpassingen */
  .kbk-step .choices,
  .kbk-grid-2rows,
  .kbk-grid-1row,
  .kbk-strength-presets,
  .kbk-price-presets {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: none;
  }
  
  .kbk-step[data-step="3"] .choices {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .kbk-step[data-step="4"] .kbk-strength-presets {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .kbk-step[data-step="5"] .choices {
    grid-template-columns: repeat(2, 1fr);
  }
  .kbk-step[data-step="5"] .choices button:last-child {
    grid-column: 1 / -1;
  }
  
  /* Compactere buttons op mobiel */
  .kbk-step .choices button,
  .kbk-grid-2rows button,
  .kbk-grid-1row button,
  .strength-preset-btn,
  .price-preset-btn {
    padding: 10px 6px;
    min-height: 75px;
    gap: 4px;
  }
  .choice-icon{font-size:26px}
  .choice-title{font-size:14px}
  .choice-desc{font-size:12px}

  .kbk-range-controls{max-width:none;padding:0 16px;}
  .range-input-wrapper{flex-direction:row;gap:12px;align-items:center;}
  .range-slider{width:100%;flex:1;}
  .range-display{width:45px;font-size:15px;padding:6px 8px;}

  /* Results layout voor mobiel */
  .kbk-results-header{text-align:center;margin-bottom:16px}
  .results-actions{position:static;margin-top:12px}
  .kbk-results{padding:16px}
}

@media (min-width:769px) and (max-width:1024px){
  /* Tablet: 3 kolommen */
  .kbk-step .choices,
  .kbk-grid-2rows,
  .kbk-grid-1row {
    grid-template-columns: repeat(3, 1fr);
  }

  .kbk-strength-presets,
  .kbk-price-presets {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Close button voor tablet - zelfde als desktop */
  .kbk-close{top:20px !important;right:20px !important;width:40px !important;height:40px !important;}
}

@media (max-width:480px){
  .kbk-header{padding:16px 12px 12px}
  .kbk-step-content{padding:12px 12px 10px}
  .kbk-step-nav{padding:12px}
  .kbk-step h3{font-size:18px}
  .kbk-results{padding:12px}

  /* Zeer kleine schermen: blijf bij 2 kolommen (beter dan 1) */
  .kbk-step .choices,
  .kbk-grid-2rows,
  .kbk-grid-1row,
  .kbk-strength-presets,
  .kbk-price-presets {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .kbk-step .choices button,
  .kbk-grid-2rows button,
  .kbk-grid-1row button,
  .strength-preset-btn,
  .price-preset-btn {
    padding: 8px 4px;
    min-height: 70px;
  }
  .choice-icon{font-size:24px}
}

/* High Contrast & Accessibility */
@media (prefers-contrast:high){
  .kbk-panel{border:2px solid var(--kbk-gray-900)}
  .kbk-step .choices button,
  .kbk-grid-2rows button,
  .kbk-grid-1row button,
  .strength-preset-btn,
  .price-preset-btn{border-width:2px}
  .kbk-btn--primary{background:var(--kbk-primary-700)}
}

/* Reduced Motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important
  }
}

/* Print */
@media print{.kbk-modal{display:none !important}}

/* === KBK PATCH: voortgangstekst bij progressbar === */
.kbk-progress-text{
  margin: 6px 0 0;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--kbk-gray-600);
}