/* Kroonheuvel Lease Calculator – v1.1 (brand: orange + green, charcoal ink) */
.khlc,.khlc-modal{--khlc-primary:#FF6600;--khlc-accent:#3aaa35;--khlc-ink:#1f2321;--khlc-muted:#6b7370;--khlc-line:#dfe3e1;--khlc-soft:#f3f5f4;--khlc-aside-bg:#f8f8f8;--khlc-aside-text:#1f2321;--khlc-amount:var(--khlc-primary)}
.khlc{margin:12px 0}
.khlc *,.khlc-modal *{box-sizing:border-box}

/* Trigger button */
.khlc-btn{flex-direction: row-reverse;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font:inherit;font-weight:700;font-size:16px;padding:12px 18px;border-radius:4px;border:0;background:var(--khlc-primary);color:#fff;width:100%;line-height:1.2;text-align:center;transition:filter .15s,transform .15s}
.khlc-btn:hover{filter:brightness(.93)}
.khlc-btn:active{transform:translateY(1px)}
.khlc-btn:focus-visible{outline:3px solid var(--khlc-ink);outline-offset:2px}
.khlc-btn__icon{flex:none}
.khlc-btn--accent{background:var(--khlc-accent);width:auto}
.khlc-btn[disabled]{opacity:.6;cursor:wait}
svg.khlc-btn__icon path {
    fill: #ff6600;
}
/* Modal shell */
body.khlc-lock{overflow:hidden}
.khlc-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 12px;color:var(--khlc-ink);font-size:15px;line-height:1.5}
.khlc-modal[hidden]{display:none}
.khlc-overlay{position:fixed;inset:0;background:rgba(20,24,22,.65);backdrop-filter:blur(2px)}
.khlc-box{position:relative;width:100%;max-width:940px;margin:auto 0;display:grid;grid-template-columns:330px 1fr;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.khlc-step[hidden]{display:none}
.khlc-close{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:var(--khlc-soft);color:var(--khlc-ink);font-size:22px;line-height:1;cursor:pointer}
.khlc-close:hover{background:var(--khlc-line)}

/* Left pane */
.khlc-aside{background:var(--khlc-aside-bg);color:var(--khlc-aside-text);padding:32px 28px;display:flex;flex-direction:column;gap:26px;border-top:6px solid var(--khlc-primary);border-right:1px solid var(--khlc-line)}
.khlc-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--khlc-primary);margin-bottom:10px}
.khlc-machine__name{display:block;font-size:18px;font-weight:700;line-height:1.3;margin-bottom:6px}
.khlc-machine__price{font-size:14px;opacity:.8}
.khlc-machine__price strong{opacity:1}
.khlc-result{background:#fff;border:1px solid var(--khlc-line);border-radius:14px;padding:18px;color:var(--khlc-ink)}
.khlc-result__label{display:block;font-size:13px;color:var(--khlc-muted);margin-bottom:6px}
.khlc-result__row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.khlc-result__amount{font-size:38px;font-weight:800;line-height:1.1;color:var(--khlc-amount)}
.khlc-result__per{font-size:14px;color:var(--khlc-muted)}
.khlc-benefits{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:10px;font-size:14px}
.khlc-benefits li{position:relative;padding-left:26px}
.khlc-benefits li:before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--khlc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4.5 8.3 2.2 2.2 4.8-4.9'/%3E%3C/svg%3E") center/100% no-repeat}

/* Right pane */
.khlc-main{padding:32px 34px 30px}
.khlc-steps{list-style:none;display:flex;gap:18px;margin:0 44px 22px 0;padding:0;font-size:13px;font-weight:600;color:var(--khlc-muted)}
.khlc-steps__item{display:flex;align-items:center;gap:8px}
.khlc-steps__item span{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--khlc-line);color:var(--khlc-muted);font-size:12px}
.khlc-box[data-step="1"] .khlc-steps__item:nth-child(1),.khlc-box[data-step="2"] .khlc-steps__item:nth-child(2){color:var(--khlc-ink)}
.khlc-box[data-step="1"] .khlc-steps__item:nth-child(1) span,.khlc-box[data-step="2"] .khlc-steps__item:nth-child(2) span{background:var(--khlc-primary);color:#fff}
.khlc-box[data-step="2"] .khlc-steps__item:nth-child(1) span{background:var(--khlc-accent);color:#fff}
.khlc-title{margin:0 0 20px;color:var(--khlc-ink);font-size:24px;line-height:1.25;font-weight:800}

.khlc-field{margin-bottom:22px}
.khlc-field__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.khlc-field__head small{color:var(--khlc-muted);font-size:12.5px}
.khlc-label{display:block;font-weight:700;margin:0}
.khlc-label small{font-weight:400;color:var(--khlc-muted)}
.khlc-money{display:flex;align-items:center;border:2px solid var(--khlc-line);border-radius:10px;background:#fff;overflow:hidden}
.khlc-money span{padding:0 4px 0 14px;font-weight:700;color:var(--khlc-muted)}
.khlc-money input{border:0;flex:1;min-width:0;padding:11px 14px 11px 6px;font:inherit;font-size:18px;font-weight:700;color:var(--khlc-ink);background:transparent;outline:0;box-shadow:none}
.khlc-money:focus-within{border-color:var(--khlc-primary)}
.khlc-help{font-size:12.5px;color:var(--khlc-muted);margin-top:6px}
.khlc-msg{color:#c0392b;font-size:12.5px}
.khlc-msg:empty{display:none}
.khlc-msg--general{font-size:14px;margin-bottom:10px}

/* Slider */
.khlc-range{--p:0%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:6px;margin:14px 0 0;border-radius:999px;outline:0;cursor:pointer;background:linear-gradient(to right,var(--khlc-primary) var(--p),var(--khlc-line) var(--p))}
.khlc-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--khlc-primary);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.khlc-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--khlc-primary);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.khlc-range:focus-visible{outline:2px solid var(--khlc-ink);outline-offset:6px}
.khlc-range:disabled{opacity:.45;cursor:not-allowed}

/* Term pills */
.khlc-terms{display:flex;gap:8px;flex-wrap:wrap}
.khlc-term{position:relative;cursor:pointer}
.khlc-term input{position:absolute;opacity:0}
.khlc-term span{display:block;min-width:54px;text-align:center;padding:9px 14px;border:2px solid var(--khlc-line);border-radius:999px;background:#fff;font-weight:600;transition:all .15s}
.khlc-term:hover span{border-color:var(--khlc-primary)}
.khlc-term input:checked+span{background:var(--khlc-primary);border-color:var(--khlc-primary);color:#fff;font-weight:700}
.khlc-term input:focus-visible+span{outline:3px solid var(--khlc-ink);outline-offset:2px}

.khlc-step-1>.khlc-next{width:100%;margin-top:4px}
.khlc-more{margin-top:18px;font-size:12.5px;color:var(--khlc-muted)}
.khlc-more p{margin:0 0 6px}

/* Step 2 */
.khlc-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px;padding:0}
.khlc-chips li{background:var(--khlc-soft);border:1px solid var(--khlc-line);border-radius:10px;padding:8px 14px;display:flex;flex-direction:column;font-size:13px;line-height:1.3}
.khlc-chips span{color:var(--khlc-muted);font-size:12px}
.khlc-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.khlc-f label{display:block;font-weight:700;margin-bottom:6px;font-size:14px}
.khlc-f label b{color:var(--khlc-primary)}
.khlc-f label .khlc-opt{font-weight:400;color:#6B7785;font-size:13px}
.khlc-f input[type=text],.khlc-f input[type=email],.khlc-f input[type=tel]{width:100%;padding:11px 12px;border:2px solid var(--khlc-line);border-radius:10px;font:inherit;color:var(--khlc-ink);background:#fff;outline:0}
.khlc-f input[type=text]:focus,.khlc-f input[type=email]:focus,.khlc-f input[type=tel]:focus{border-color:var(--khlc-primary)}
.khlc-f input.khlc-invalid{border-color:#c0392b}
.khlc-privacy{margin-top:16px}
.khlc-privacy label{font-weight:400}
.khlc-privacy a{color:var(--khlc-ink);text-decoration:underline}
.khlc-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px}
.khlc-back{color:var(--khlc-muted);font-weight:600;text-decoration:none}
.khlc-back:hover{color:var(--khlc-ink);text-decoration:underline}
.khlc-success{background:#eef8ed;border:1px solid #b9e0b6;color:#1f5a1c;padding:14px 16px;border-radius:10px;margin-bottom:6px}
.khlc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:820px){
 .khlc-box{grid-template-columns:1fr}
 .khlc-aside{padding:22px 20px;gap:16px;border-top-width:5px}
 .khlc-benefits{display:none}
 .khlc-result__amount{font-size:32px}
 .khlc-main{padding:22px 18px}
 .khlc-close{top:10px;right:10px}
 .khlc-aside{border-right:0;border-bottom:1px solid var(--khlc-line)}
 .khlc-steps{margin-right:0}
 .khlc-form__grid{grid-template-columns:1fr}
 .khlc-actions{flex-direction:column-reverse;align-items:stretch;text-align:center}
 .khlc-btn--accent{width:100%}
}
@media (prefers-reduced-motion:reduce){.khlc-btn,.khlc-term span{transition:none}}

/* Theme-proofing: the modal lives in <body>, so global theme rules can leak in */
.khlc-modal .khlc-close{background:var(--khlc-soft)!important;color:var(--khlc-ink)!important;border:0!important;padding:0!important;box-shadow:none!important;min-width:0}
.khlc-modal .khlc-close:hover{background:var(--khlc-line)!important}
.khlc-modal .khlc-aside{background:var(--khlc-aside-bg)!important;color:var(--khlc-aside-text)}
.khlc-modal .khlc-money{border:2px solid var(--khlc-line)}
.khlc-modal .khlc-money:focus-within{border-color:var(--khlc-primary)}
.khlc-modal .khlc-money input{border:0!important;background:transparent!important;box-shadow:none!important;margin:0;height:auto}
.khlc-modal .khlc-f input[type=text],.khlc-modal .khlc-f input[type=email],.khlc-modal .khlc-f input[type=tel]{border:2px solid var(--khlc-line);height:auto;margin:0;box-shadow:none}
.khlc-modal .khlc-f input.khlc-invalid{border-color:#c0392b}
.khlc-modal .khlc-btn{border:0;margin:0;text-transform:none;letter-spacing:0}
.khlc-modal .khlc-btn--accent{background:var(--khlc-primary);color:#fff}
.khlc-modal .khlc-back{color:var(--khlc-muted)}
.khlc-modal .khlc-title{color:var(--khlc-ink);font-family:inherit}
.khlc-modal .khlc-range{height:6px;padding:0;border:0;background:linear-gradient(to right,var(--khlc-primary) var(--p),var(--khlc-line) var(--p))}
/* Trigger button: keep brand colour even when the theme styles every <button> */
.khlc .khlc-open{    padding: 8px 15px 8px 15px;font-size: 20px;font-weight: 600;background: #F8F8F8!important;color:#363636!important;border:solid 1px #BBBBBB;!important;border-radius:4px!important;box-shadow:none!important;text-transform:none;letter-spacing:0}
.khlc .khlc-open:hover,.khlc .khlc-open:focus{background:#F8F8F8!important;color:#363636!important;}
