/* 
CSRP Repair Planner — Merged CSS
Generated: 2025-11-12
Notes:
- Consolidates: csrp-mobile-flow.css, openstaande.css, csrp-overrides.css, legacy-extracted.css
- Organised into: Base, Layout, Components, Utilities, Responsive (mobile/desktop)
- "Apple-ish" styling: clean typography, soft shadows, rounded corners
*/

/* ===== Original: csrp-mobile-flow.css ===== */
/*!
* CSRP Repair Planner — Unified CSS
* Merge strategy: preserve original file order (by heuristic), keep media queries inline.
* This file is intentionally formatted for readability.
*
* Files included (in order):
* csrp-repair-planner_0_9_7 2/assets/css/openstaande.css
* csrp-repair-planner_0_9_7 2/assets/css/csrp-overrides.css
* csrp-repair-planner_0_9_7 2/assets/css/csrp-mobile-flow.css
* csrp-repair-planner_0_9_7 2/assets/css/legacy-extracted.css
* __MACOSX/csrp-repair-planner_0_9_7 2/assets/css/._openstaande.css
* __MACOSX/csrp-repair-planner_0_9_7 2/assets/css/._csrp-overrides.css
* __MACOSX/csrp-repair-planner_0_9_7 2/assets/css/._csrp-mobile-flow.css
* __MACOSX/csrp-repair-planner_0_9_7 2/assets/css/._legacy-extracted.css
*/

/* ===== File: csrp-repair-planner_0_9_7 2/assets/css/openstaande.css ===== */
#open-service-items.open-service-items.section {
  border: 1px solid var(--csrp-border, #e5e7eb);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin-bottom: .75rem;
}

#open-service-items .activity-item.open-from-si { margin: 8px 0; }

/* ===== File: csrp-repair-planner_0_9_7 2/assets/css/csrp-overrides.css ===== */
/* CSRP Design Tweaks — pseudo Apple style */
/* Global font smoothing */
html, body, .scheduler-form {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Desktop layout for the scheduler form */
@media (min-width: 769px) {
.scheduler-form {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 40px;
    background: #ffffff;
    border: 1px solid #e5e7eb; /* neutral gray, like other elements */
    border-radius: .75rem;      /* match other cards/inputs */
    box-sizing: border-box;
  }
}

/* Mobile layout */
@media (max-width: 768px) {
.scheduler-form {
    padding: 10px;
    background: #ffffff;
    box-sizing: border-box;
  }

/* Allow activity labels to wrap to multiple lines on small screens */
.scheduler-form .activity-item label,
.activity-item label {
  white-space: normal;
  word-break: break-word;
}
}

/* Buttons: pill shape */
.scheduler-form button,
.scheduler-form .button,
.scheduler-form [type="button"],
.scheduler-form [type="submit"],
.scheduler-form .btn,
button,
.button,
input[type="button"],
input[type="submit"] {
  border-radius: 100px !important;
}

/* Step title: enforce exact color without opacity overlays */
.step-title,
.scheduler-form .step-title,
.scheduler-form .step-title * {
  color: #1d1d1f !important;
}

/* Try to neutralize opacity effects applied by utility classes */
.step-title,
.scheduler-form .step-title {
  opacity: 1 !important;
  mix-blend-mode: normal;
  filter: none !important;
}

/* --- Tweaks round 2 --- */

/* 1) Alleen de onderste scheidslijn weg bij de laatste step */
.scheduler-form .step:last-child,
.scheduler-form .steps > .step:last-child,
.scheduler-form .step:last-child .step-header,
.scheduler-form .steps > .step:last-child .step-header {
  border-bottom: none !important;
}

/* 2) Bike thumb 60px breed (en even hoog) */
.bike-thumb {
  width: 60px;
  height: 60px;
  background-size: cover;
  background-position: center;
  border-radius: .5rem;
  flex: 0 0 60px;
}

/* 3) Opacity fix voor afgeronde stappen: titels niet vaal maken */
.step.completed .step-header {
  opacity: 1 !important;
  filter: none !important;
}

/* 4) Desktop: chip-datecell 100px breed */
@media (min-width: 769px) {
.chip-datecell {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    flex: 0 0 100px !important;
    text-align: center;
  }
}

/* 5) Final summary typografie + spacing consistent met formulier */
.final-summary {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  padding: 20px 24px;
  color: #1d1d1f;
}

.final-summary h3,
.final-summary .step-title {
  color: #1d1d1f !important;
  font-weight: 600;
  margin: 0 0 .75rem 0;
}

.final-summary p,
.final-summary li,
.final-summary dd,
.final-summary dt {
  margin: 0;
  line-height: 1.55;
}

.final-summary ul,
.final-summary ol {
  margin: .5rem 0 0 1.25rem;
}

.final-summary .row,
.final-summary .summary-line {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .375rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.final-summary .row:last-child,
.final-summary .summary-line:last-child {
  border-bottom: none;
}

/* 6) Confirm-block: checkbox + tekst op één regel, tekst vult de breedte */
.confirm-block,
.scheduler-form .confirm-block {
  display: block;
  width: 100%;
}

.confirm-block label,
.scheduler-form .confirm-block label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin: 0;
}

.confirm-block input[type="checkbox"] {
  margin: 3px 0 0 0;
  flex: 0 0 auto;
}

.confirm-block .confirm-text,
.scheduler-form .confirm-block .confirm-text {
  flex: 1 1 auto;
}

/* --- Tweaks round 3: border rules for completed/open/gated --- */
/* Show separator for completed steps */
.step.completed,
.step .completed,
.step .step-header.completed {
  border-bottom: 1px solid #e5e7eb !important;
}

/* Hide separator for gated+open step variants */
.step.gated.open,
.step.gated .open,
.step .gated.open,
.step .gated .open,
.step.open.gated,
.step .step-header.gated.open,
.step .step-header.open.gated {
  border-bottom: none !important;
}

/* Still remove the very last one overall */
.scheduler-form .step:last-child,
.scheduler-form .steps > .step:last-child,
.scheduler-form .step:last-child .step-header,
.scheduler-form .steps > .step:last-child .step-header {
  border-bottom: none !important;
}

/* --- Tweaks round 4: put borders ONLY on descendants, never on .step itself --- */

/* Reset any borders applied directly on .step or common headers */
.step,
.step .step-header {
  border-bottom: none !important;
}

/* Show separator ONLY when a descendant has .completed */
.step .completed {
  border-bottom: 1px solid #e5e7eb !important;
}

/* Hide separator for gated+open descendant */
.step .gated.open {
  border-bottom: none !important;
}

/* Never show a separator on the last step */
.steps > .step:last-child .completed,
.scheduler-form .steps > .step:last-child .completed {
  border-bottom: none !important;
}

/* ===== File: csrp-repair-planner_0_9_7 2/assets/css/csrp-mobile-flow.css ===== */
/* CSRP planner — flow gating + mobile UX */

.step.gated{display:none!important;}

.step.gated.open{display:block!important;}

/* Mobile app-like layout + prevent focus zoom on iOS by keeping controls >=16px */
#repair_scheduler, [data-csrp-planner]{
  width:100vw; max-width:100vw; box-sizing:border-box;
  touch-action: manipulation;
}

#repair_scheduler *, [data-csrp-planner] * { -webkit-tap-highlight-color: transparent; }

#repair_scheduler input, #repair_scheduler select, #repair_scheduler textarea,
[data-csrp-planner] input, [data-csrp-planner] select, [data-csrp-planner] textarea {
  font-size:16px !important; line-height:1.35;
}

@media (max-width: 768px) {
#repair_scheduler .step-content, [data-csrp-planner] .step-content { font-size:16px; }

  #repair_scheduler { margin-left:0; margin-right:0; padding-left:12px; padding-right:12px; }
}

/* ===== File: csrp-repair-planner_0_9_7 2/assets/css/legacy-extracted.css ===== */
/* ── CORE LAYOUT ── */
.scheduler-form{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size: 14px;max-width:600px;margin:2rem auto;color:#1c1c1e;padding:0 1rem;}

.step{padding:1rem 0;}

.step.completed{border-bottom:1px solid #d1d1d6;}

.step-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:opacity .2s;}

.step.completed .step-header{cursor:default;}

.step-title{font-size:1rem;font-weight:500;}

.step-summary{font-size:.9rem;color:#6e6e73;}

.step-content{display:none;padding:1rem 0;}

.step.open .step-content{display:block;}

.step-actions{display:none;margin-top:1rem;}

.step.open .step-actions{display:flex;}

.step-content input,.step-content select,.step-content textarea{width:100%; font-size:14px;padding:.75rem;margin:.75rem 0;border:1px solid #d1d1d6;border-radius:4px;background:#fff;box-shadow:inset 0 1px 2px rgba(0,0,0,.05);box-sizing:border-box;transition:border-color .2s;}

.step-content input:focus,.step-content select:focus,.step-content textarea:focus{outline:none;border-color:#007aff;}

.btn{padding:.75rem 1.5rem;font-size:1rem;font-weight:500;color:#fff;background:#007aff;border:none;border-radius:6px;cursor:pointer;transition:background .2s;}

.btn:hover{background:#090b0e;color:#fff;}

.btn-back{background:transparent;color:#007aff;margin-right:auto;}

.btn[disabled]{opacity:.65;cursor:not-allowed;}

.btn.is-loading{position:relative;}

.btn.is-loading::after{content:"";position:absolute;right:.75rem;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.6);border-top-color:transparent;animation:spin .7s linear infinite;}

@keyframes spin{to{transform:translateY(-50%) rotate(360deg);}}

.switch{position:relative;display:inline-block;width:40px;height:20px;margin-right:.5rem;vertical-align:middle;margin-left: 10px;}

.switch input{opacity:0;width:0;height:0;}

.slider{position:absolute;inset:0;background:#ccc;transition:.4s;border-radius:20px;}

.slider:before{content:"";position:absolute;height:16px;width:16px;left:2px;bottom:2px;background:#fff;transition:.4s;border-radius:50%;}

input:checked + .slider{background:#34c759;}

input:checked + .slider:before{transform:translateX(20px);}

#otp-panel{display:none;gap:.5rem;max-width:300px;margin:.75rem auto;}

.otp-digit{width:2rem;text-align:center;font-size:1.25rem;border:1px solid #d1d1d6;border-radius:4px;}

.house-group{display:flex;gap:.5rem;}

.house-group input{flex:1;}

#bike-list{display:flex;flex-direction:column;gap:.5rem;}

.bike-item{display:flex;align-items:center;padding:.75rem;border:1px solid #ddd;border-radius:6px;cursor:pointer;}

.bike-item.selected{border-color:#007aff;background:#f0f8ff;}

.bike-thumb{width:60px;height:40px;background:#ddd;border-radius:4px;margin-right:1rem;}

.appt-type-list{display:flex;flex-direction:column;gap:.5rem;}

.appt-type-item{border:1px solid #007aff;border-radius:6px;padding:.75rem;cursor:pointer;transition:background .2s,color .2s;}

.appt-type-item.selected{background:#007aff;color:#fff;}

#csrp-root > div.step.completed.unlocked.open > div.step-content > div.appt-type-list > div.appt-type-item.selected > h4 {color:#fff!important;}

.activity-list{display:flex;flex-direction:column;gap:1rem;margin-top:1rem;}

#loan-chips{display:flex;gap:.5rem;margin-top:.5rem;}

#loan-chips .chip{flex:1;text-align:center;padding:.75rem 1rem;border:1px solid #007aff;border-radius:16px;cursor:pointer;transition:background .2s,color .2s;}

#loan-chips .chip.selected{background:#007aff;color:#fff;}

.loan-terms{font-size:.9rem;margin-top:.5rem;}

.date-picker{display:flex;align-items:center;margin-bottom:1rem;}

.date-nav{cursor:pointer;font-size:1.5rem;padding:0 .5rem;user-select:none;}

.chips{display:flex;overflow-x:auto;gap:.5rem;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;}

.chips::-webkit-scrollbar{display:none;}

.chip-datecell{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;width:100px;padding:.5rem;border:1px solid #007aff;border-radius:8px;cursor:pointer;transition:background .2s,color .2s;}

.chip-datecell.selected{background:#007aff;color:#fff;}

.chip-month{font-size:.8rem;}

.chip-daynum{font-size:1.4rem;font-weight:600;}

.chip-weekday{font-size:.8rem;}

#date-warning{color:#d9534f;margin-top:.5rem;}

.confirm-summary p{margin:.5rem 0;}

.confirm-block{display:flex;align-items:center;margin-top:1rem;}

.confirm-checkbox{width:20%;}

.confirm-text{width:80%;}

#submit-btn{float: right; margin-top:1rem;}

input.invalid, select.invalid, textarea.invalid {
  border-color: #d00 !important;
  background: #fff8f8;
}

#csrp-inline-error {
  display: none;
  margin: 0 0 1rem;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fff5f5;
  color: #b91c1c;
  font-size: 0.9rem;
}

.existing-cat-panel{
  display:block;
  margin: 10px;
  padding:.5rem .75rem;
  border:1px solid #d1d1d6;
  border-radius:6px;
  background:#f9fafb;
}

.existing-cat-panel .hint{font-size:.9rem;margin-bottom:.4rem;color:#374151;}

/* ── activity layout ── */
.activity-item{
  display:none;
  position:relative;
  border:1px solid var(--csrp-border);
  background:#fff;
  border-radius:6px;
  padding: .25rem .75rem;
  margin-bottom: .50rem;
  gap:.5rem;
  flex-direction:column;      /* ⬅️ stapelen */
  align-items:stretch;        /* ⬅️ volle breedte */
}

.activity-item.visible{ display:flex !important; }

.activity-item label{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.activity-item .price{
  margin-left:auto;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size: 0.8rem;
}

/* upsells volwaardige block onder item */
.upsell-list{
  display:none;
  padding: .25rem .75rem;
  border:1px dashed #d1d1d6;
  border-radius:6px;
  background:#f9f9f9;
  margin: 0px;
}

.upsell-list.visible{ display:block !important; }

.upsell-list label{
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* ── info dot + popover ── */
.info-wrap{ position:relative; display:inline-block; }

.info-dot{
  display:inline-flex; justify-content:center; align-items:center;
  width:18px; height:18px; border:1px solid #6e6e73; border-radius:50%;
  font-size:11px; line-height:1; cursor:pointer; user-select:none;
}

.info-dot:focus{ outline:2px solid #007aff; outline-offset:2px; }

.popover{
  position:absolute; top:130%; left:50%; transform:translateX(-100%);
  background:rgba(0,0,0,.9); color:#fff; padding:.5rem .6rem; border-radius:6px;
  font-size:.85rem; min-width:200px; max-width:280px; box-shadow:0 10px 20px rgba(0,0,0,.25);
  display:none; z-index:20;
}

.info-wrap:hover .popover,
.info-wrap:focus-within .popover{ display:block; }

/* Activity-rij en upsell-rij als grid: checkbox | tekst | prijs */
.activity-item label,
.upsell-list .upsell-item{
  display:grid;
  grid-template-columns: auto 1fr auto;
  column-gap:.5rem;
}

/* Tekst mag breken; prijs blijft rechts */
.activity-item .act-text,
.upsell-list .upsell-text{
  padding-left: 10px;
  min-width:0;
  overflow-wrap:anywhere;
}

.activity-item .price,
.upsell-list .price{
  justify-self:end;
  white-space:nowrap;
}

/* Op small screens prijs onder de tekst */
@media (max-width:560px) {
.activity-item label,
  .upsell-list .upsell-item{
    grid-template-columns: auto 1fr;
  }

.activity-item .price,
.upsell-list .price{
  grid-column: 2 / 3;
  justify-self:start;
  margin-top:.25rem;
  white-space:normal;
}
}

/* Info-icoontje (i) */
.info{
  display:inline-flex;
  width:16px;height:16px;
  border-radius:50%;
  border:1px solid currentColor;
  font-size:.75rem; line-height:1;
  align-items:center; justify-content:center;
  cursor:help; user-select:none;
  margin-left:.35rem;
}

/* Upsell-kader alleen tonen als er inhoud is (jij had dit al ongeveer) */
.upsell-list:empty{ display:none !important; border:0; padding:0; margin:0; }

.upsell-list{
  display:block;
  margin:.5rem 0 0 2rem;
  padding:.25rem .5rem;
  border:1px solid #d1d1d6;
  border-radius:6px;
  background:#f9f9fb;
}

.upsell-list .upsell-item + .upsell-item{ margin-top:.35rem; }

.step .step-actions { align-items: center; }

.btn-error-msg {
  color: #d00;
  font-size: 0.85rem;
  margin-left: .75rem;      /* naast de Next-knop */
  white-space: nowrap;
  align-self: center;
}

.btn.error { border: 2px solid #d00 !important; background: #c53030 !important; }

@keyframes shake { 10%,90%{transform:translateX(-1px)}

  20%,80%{translate:2px}

  30%,50%,70%{translate:-4px}

  40%,60%{translate:4px} }

.btn.shake { animation: shake .4s; }

/* Chips */
.chip-datecell { position: relative; }

.chip-datecell.disabled { opacity:.55; cursor:not-allowed; border: 1px solid #a8a8a8; }

/* Badges */
.chip-badge {
  width:100%; text-align: center; font-size:.7rem; color: #fff; margin-top: 5px;
  padding:.15rem .4rem; border-radius:.5rem; line-height:1; opacity:.95;
}

.chip-badge.low  { background:#009c63; }

/* Rustig */
.chip-badge.mid  { background:#54a6ff; }

/* Gemiddeld */
.chip-badge.high { background:#da4747; }

/* Druk   */
.chip-badge.full { background:#a1a1a1; }

/* Vol */
.chip-badge.loan { background:#ffe696; color:#000; }

/* Geen leenfiets */

/* Meldingen onder de chips */
#date-warning { margin-top:.5rem; }

.banner { margin-left: 30px!important; margin-right: 30px!important;padding:.5rem .75rem; border-radius:.5rem; margin:.35rem 0; font-size:.9rem; }

.banner--day   { background: #fff1e0; border: 1px solid #ff8700; color: #ff8700;}

.banner--error { background:#fff2f0; border:1px solid #ffccc7; }

/* niet beschikbaar voor combinatie */

.sum-block { padding:10px; border:1px solid #d1d1d6; border-radius:6px; margin-bottom: 10px; }

.final-summary .sum-row { display:grid; grid-template-columns: 160px 1fr; gap:.5rem 1rem; padding:.35rem 0; }

.final-summary .sum-label { color:#555; font-weight:600; }

.final-summary .sum-value { color:#111; }

.final-summary .sum-list { margin:0; padding-left:1.2rem; }

.final-summary .muted { opacity:.75; font-size:.9em; }

#otp-sent {text-align: left;}

/* DEBUG OVERLAY */
#csrp-debug{position:fixed;right:12px;bottom:12px;width:380px;max-height:55vh;background:rgba(28,28,30,.97);color:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);display:none;flex-direction:column;overflow:hidden;z-index:99999;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}

#csrp-debug.open{display:flex;}

#csrp-debug header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-bottom:1px solid rgba(255,255,255,.1);}

#csrp-debug header strong{font-size:.95rem;}

#csrp-debug .body{overflow:auto;padding:.5rem .75rem;font-size:.82rem;line-height:1.3;}

#csrp-debug .row{border-bottom:1px dashed rgba(255,255,255,.15);padding:.4rem 0;}

#csrp-debug .row:last-child{border-bottom:none;}

#csrp-debug .tag{display:inline-block;padding:.1rem .35rem;border-radius:4px;font-weight:600;margin-right:.3rem;background:#0ea5e9;color:#001018;}

#csrp-debug .bad{background:#ef4444;color:#330000;}

#csrp-debug .muted{color:#cbd5e1;opacity:.9;}

#csrp-debug pre{white-space:pre-wrap;word-break:break-word;margin:.25rem 0;background:rgba(255,255,255,.05);padding:.35rem;border-radius:4px;}

#csrp-debug button{background:#1f2937;color:#fff;border:none;border-radius:6px;padding:.35rem .6rem;cursor:pointer;}

#csrp-debug button:hover{background:#374151;}

/* ===== File: __MACOSX/csrp-repair-planner_0_9_7 2/assets/css/._openstaande.css ===== */
Mac OS X        	2ATTR<
<com.apple.quarantineq/0083;69136caf;Safari;081A6D4D-56E7-4CD6-85DE-26A75DEEA022

/* ===== File: __MACOSX/csrp-repair-planner_0_9_7 2/assets/css/._csrp-overrides.css ===== */
Mac OS X        	2ATTR<
<com.apple.quarantineq/0083;69136caf;Safari;081A6D4D-56E7-4CD6-85DE-26A75DEEA022

/* ===== File: __MACOSX/csrp-repair-planner_0_9_7 2/assets/css/._csrp-mobile-flow.css ===== */
Mac OS X        	2ATTR<
<com.apple.quarantineq/0083;69136caf;Safari;081A6D4D-56E7-4CD6-85DE-26A75DEEA022

/* ===== File: __MACOSX/csrp-repair-planner_0_9_7 2/assets/css/._legacy-extracted.css ===== */
Mac OS X        	2
1
cATTR
cHcom.apple.macl
com.apple.provenance
'<com.apple.quarantine@5sC+kGT
@q/0083;69136caf;Safari;081A6D4D-56E7-4CD6-85DE-26A75DEEA022

/* ===== Original: openstaande.css ===== */
/* Merged into csrp-mobile-flow.css by unified bundle on build. */

/* ===== Original: csrp-overrides.css ===== */
/* Merged into csrp-mobile-flow.css by unified bundle on build. */

/* ===== Original: legacy-extracted.css ===== */
/* Merged into csrp-mobile-flow.css by unified bundle on build. */


/* ===== Merged, Normalized & Tweaks BELOW (take precedence) ===== */

/* ===== Base & Variables ===== */
:root{
  --csrp-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --csrp-text: #0f172a;
  --csrp-muted: #475569;
  --csrp-border: #e5e7eb;
  --csrp-bg: #f8fafc;
  --csrp-card: #ffffff;
  --csrp-accent: #0ea5e9;
  --csrp-success: #10b981;
  --csrp-danger: #ef4444;
  --csrp-radius: 14px;
  --csrp-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
}

#repair_scheduler, #repair-scheduler, .repair-scheduler, [data-csrp-planner]{
  font-family: var(--csrp-font);
  color: var(--csrp-text);
}

.csrp-card{
  background: var(--csrp-card);
  border: 1px solid var(--csrp-border);
  border-radius: var(--csrp-radius);
  box-shadow: var(--csrp-shadow);
}
.csrp-muted{ color: var(--csrp-muted); }
.csrp-sep{ border-color: var(--csrp-border); }

/* ===== Components ===== */

/* Steps */
.step{
  border-bottom: 1px solid var(--csrp-border);
}
.step:last-child{ border-bottom: none; }
/* Allow nuanced borders via state classes */
.step.gated.open{ border-bottom-color: transparent; }
.step.completed{ border-bottom-color: var(--csrp-border); }

.step-header{ display:flex; align-items:center; gap:.75rem; padding:1rem 0; }
.step.completed .step-header{ opacity: 1; } /* ensure completed headers are fully visible */

/* Bike thumb */
.bike-thumb{
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  flex: 0 0 60px;
  border: 1px solid var(--csrp-border);
}

/* Date chip cell */
.chip-datecell{
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 40px; padding: .25rem .5rem;
  border:1px solid var(--csrp-border); border-radius: .75rem;
  background: #fff;
}

/* Final summary */
.final-summary{
  background: var(--csrp-card);
  border: 1px solid var(--csrp-border);
  border-radius: var(--csrp-radius);
  padding: 1rem;
  line-height: 1.5;
}
.final-summary h3{ font-size:1.125rem; margin:0 0 .5rem; }
.final-summary .row{ display:flex; justify-content:space-between; gap: .75rem; padding:.5rem 0; border-bottom:1px dashed var(--csrp-border); }
.final-summary .row:last-child{ border-bottom:none; }

/* Confirm block: align checkbox + text on one line and allow wrapping */
.confirm-block{
  display:flex; align-items:center; gap:.75rem; width:100%;
}
.confirm-block input[type="checkbox"]{ margin: 0; }
.confirm-block label, .confirm-block .confirm-text{ flex:1; display:block; }

/* Buttons (subtle Apple-ish) */
.button, .btn, button, input[type="submit"], .csrp-btn{
  border-radius: 12px;
  border: 1px solid var(--csrp-border);
  padding: .625rem .95rem;
  background: linear-gradient(#fff, #f7fafc);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(0,0,0,.06);
  transition: transform .06s ease, box-shadow .2s ease;
}
.button:hover, .btn:hover, button:hover, input[type="submit"]:hover, .csrp-btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--csrp-shadow);
}
.button.primary, .btn.primary, .csrp-btn.primary{
  background: linear-gradient(#0ea5e9, #0284c7);
  color: #fff; border-color: #0284c7;
}

/* Inputs */
input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  border-radius: 12px;
  border:1px solid var(--csrp-border);
  padding:.6rem 1rem;
  background:#fff;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--csrp-accent);
  box-shadow: 0 0 0 4px rgba(14,165,233,.15);
}

/* ===== Responsive ===== */

/* Mobile first defaults live above; override for desktop here */
@media (min-width: 1024px){
  .scheduler-form{ max-width: 900px; margin: 0 auto; padding: 1rem; }
  .chip-datecell{ width: 100px; }
}

/* Small screens polish */
@media (max-width: 640px){
  .step-header{ padding: .75rem 0; }
  .final-summary{ padding: .75rem; }
}


/* ===== Requested Fixes (2025-11-12) ===== */

/* Breakpoint strategy:
   - Mobile layout remains active up to 1023px (incl. iPhone Pro/Max landscape ~932px).
   - Desktop kicks in at 1024px+ (already defined above). */

/* Mobile-specific paddings */
@media (max-width: 1023px){
  .scheduler-form{ padding-left:20px; padding-right:20px; }
  .chip-datecell{ width:85px; }

  /* Center popovers on small screens */
  .popover{
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    max-width: calc(100vw - 40px);
  }

  /* Make activity/open-si cards robust on narrow screens */
    /* padding: .875rem 1rem; */
  .activity-item,
  .open-si-item{
  display:flex;
  align-items:stretch;
  gap:.75rem;
  border: 1px solid var(--csrp-border);
  border-radius: var(--csrp-radius);
  background: #fff;
  box-shadow: var(--csrp-shadow);
  margin-bottom: .75rem;
  line-height: 1.35;
  cursor: pointer;
}
  .activity-item .meta,
  .open-si-item .meta{
    display:flex; gap:.5rem; flex-wrap:wrap;
  }
}

/* Hide empty service-items message */
.service-items-root .empty{ display:none !important; }

/* Additional info placeholder area taller */
#additional-info, textarea#additional-info{
  min-height: 140px;
  padding-top: 2.5rem;
}

/* ===== Apple Light UI Contrast Pass (2025-11-12) ===== */
/* Tokens tuned to white 'day' mode: */
:root{
  --csrp-text: #111315;
  --csrp-muted: #5b636b;
  --csrp-border: #d4d6db;
  --csrp-bg: #ffffff;
  --csrp-card: #ffffff;
  --csrp-accent: #0a84ff; /* iOS/macos system blue */
  --csrp-danger: #ff3b30;
  --csrp-success: #34c759;
  --csrp-warning: #ffd60a;
  --csrp-radius: 12px;
  --csrp-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 20px rgba(0,0,0,.06);
}

/* Inputs */
input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  background: #fbfbfd;
  border: 1px solid var(--csrp-border);
  color: var(--csrp-text);
  border-radius: 12px;
  padding: .7rem .9rem;
}
input::placeholder, textarea::placeholder{ color: #9aa0a6; }
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--csrp-accent);
  box-shadow: 0 0 0 3px rgba(10,132,255,.18);
  background: #fff;
}

/* Buttons */
.button, .btn, button, input[type="submit"], .csrp-btn{
  background: var(--csrp-card);
  color: var(--csrp-text);
  border: 1px solid var(--csrp-border);
  border-radius: 12px;
  padding: .65rem 1rem;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(0,0,0,.04);
}
.button:hover, .btn:hover, button:hover, input[type="submit"]:hover, .csrp-btn:hover{
  box-shadow: var(--csrp-shadow);
}
.button.primary, .btn.primary, .csrp-btn.primary{
  background: #0a84ff;
  color: #fff;
  border-color: #0a84ff;
}
.button.primary:hover, .btn.primary:hover, .csrp-btn.primary:hover{
  filter: brightness(.95);
}

/* Form rows and cards */
.csrp-card, .final-summary{
  background: #fff;
  border: 1px solid var(--csrp-border);
  border-radius: 12px;
  box-shadow: var(--csrp-shadow);
}

/* Popover (light, centered on mobile already) */
.popover{
  background: #fff;
  border: 1px solid var(--csrp-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

/* Notices (Apple-like banners) */
.notice{ 
  display:flex; align-items:flex-start; gap:.6rem; 
  padding:.75rem .9rem; border-radius:12px; border:1px solid var(--csrp-border);
}
.notice .title{ font-weight:600; margin-right:.25rem; }
.notice .body{ opacity:.95; }
.notice--info{    background:#f2f8ff; border-color:#cfe4ff; }
.notice--success{ background:#f4fff6; border-color:#ccf3d6; }
.notice--warn{    background:#fff9e6; border-color:#ffe6a3; }
.notice--error{   background:#fff5f4; border-color:#ffc9c4; }

/* Inputs + buttons spacing inside scheduler */
.scheduler-form .form-row + .form-row{ margin-top:.75rem; }
.scheduler-form .actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* Mobile specifics for visibility */
@media (max-width: 1023px){
  .button, .btn, button, input[type="submit"], .csrp-btn{ width: auto; min-height: 44px; }
  input[type="text"], input[type="email"], input[type="tel"], select, textarea{ min-height: 44px; }
}


/* ===== UI Refinements (2025-11-12) ===== */

/* Make .btn-next permanently primary blue */
.btn-next,
button.btn-next,
.csrp-btn.btn-next{
  background: #0a84ff !important;
  color: #fff !important;
  border-color: #0a84ff !important;
}
.btn-next:hover{ filter: brightness(.95); }

/* Desktop paddings: reduce vertical padding on steps; increase page gutters */
@media (min-width: 1024px){
  .scheduler-form{ max-width: 900px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
  .step{ padding-top: .25rem; padding-bottom: .75rem; } /* leaner vertical rhythm */
  .step-header{ padding-top: .5rem; padding-bottom: .5rem; } /* avoid double stacking */
}

/* Error fields: light red background like Apple */
input.invalid, select.invalid, textarea.invalid,
input.is-invalid, select.is-invalid, textarea.is-invalid,
input.error, select.error, textarea.error{
  background: #fff5f4 !important;
  border-color: #ffb4ae !important;
}
input.invalid:focus, select.invalid:focus, textarea.invalid:focus,
input.is-invalid:focus, select.is-invalid:focus, textarea.is-invalid:focus,
input.error:focus, select.error:focus, textarea.error:focus{
  box-shadow: 0 0 0 3px rgba(255,59,48,.2) !important;
  border-color: #ff3b30 !important;
}

/* Bike thumb: 60w x 40h */
.bike-thumb{
  width: 60px !important;
  height: 40px !important;
  flex: 0 0 60px !important;
  border-radius: 8px;
}

/* Floating labels (Apple-like) */
.fl-field{
  position: relative;
}

.fl-field input,
.fl-field select,
.fl-field textarea{
  /* Extra ruimte bovenin voor het label */
  padding-top: 1.6rem;
}

.fl-label{
  position: absolute;
  /* Rustpositie: veld leeg */
  top: 2rem;
  left: 1rem;
  font-size: .95rem;
  color: #6d7380;
  pointer-events: none;
  transition:
    top .15s ease,
    font-size .15s ease,
    opacity .15s ease;
  opacity: .95;
}

/* Wanneer gebruiker typt of focus heeft → label omhoog + kleiner */
.fl-field input:not(:placeholder-shown) + .fl-label,
.fl-field textarea:not(:placeholder-shown) + .fl-label,
.fl-field select:focus + .fl-label,
.fl-field input:focus + .fl-label,
.fl-field textarea:focus + .fl-label{
  top: 1.4rem;
  font-size: .75rem;
  opacity: .9;
}

/* Placeholdertekst verbergen, maar :placeholder-shown laten werken */
.fl-field input::placeholder,
.fl-field textarea::placeholder{
  color: transparent;
  opacity: 0;
}

/* Uitzondering: land-keuze (#country) geen floating label */
#country + .fl-label{
  display: none;
}


/* ===== UI Refinements v3 (2025-11-12) ===== */

/* Primary buttons: include #send-otp; solid fill to avoid border/gradient 'glitch' */
.btn-next,
button.btn-next,
.csrp-btn.btn-next,
#send-otp {
  background: #0a84ff !important;
  color: #fff !important;
  border: 1px solid #0a84ff !important;
  box-shadow: none !important; /* remove inner highlight to prevent flicker line */
}
.btn-next:hover,
#send-otp:hover { filter: brightness(.95); }

/* Back button: render as blue text-link */
.btn-back, button.btn-back, .csrp-btn.btn-back {
  background: transparent !important;
  border-color: transparent !important;
  color: #0a84ff !important;
  padding-left: 0 !important; padding-right: 0 !important;
  font-weight: 600;
  box-shadow: none !important;
}
.btn-back:hover { text-decoration: underline; }

/* Desktop paddings / spacing */
@media (min-width: 1024px){
  .scheduler-form{ padding-left: 48px; padding-right: 48px; } /* larger gutters */
  .step{ padding-top: .25rem; padding-bottom: .5rem; }
  .step-header{ padding-top: .5rem; padding-bottom: .5rem; }
}

/* Error states (existing classes) already styled; ensure text contrast stays */
input.invalid, select.invalid, textarea.invalid,
input.is-invalid, select.is-invalid, textarea.is-invalid,
input.error, select.error, textarea.error{
  color: var(--csrp-text) !important;
}

/* Popover: ensure text color and on-mobile centering + containment */
.popover{
  color: var(--csrp-text);
}
@media (max-width:1023px){
  .popover{
    position: fixed !important;
    left: 50% !important;
    top: 12vh !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    width: min(560px, calc(100vw - 40px)) !important;
    max-height: 76vh !important;
    overflow: auto !important;
    z-index: 9999;
  }
  
  /* Date-picker wider edge-to-edge */
.date-picker{
  margin-left: -20px;
  margin-right: -20px;
}
  
}

/* Step actions spacing */
.step-actions, .actions.step-actions { margin-top: 20px !important; }



/* Final summary redesign (read-only look, not 'clickable'): */
.final-summary{
  background: #fbfbfd;
  border: 1px solid var(--csrp-border);
  border-radius: 12px;
  box-shadow: none; /* calmer */
  padding: 1rem;
}
.final-summary .group{ margin-top: .75rem; }
.final-summary .group-title{
  font-size: .8rem; letter-spacing: .02em; text-transform: uppercase;
  color: #6d7380; margin-bottom: .35rem; font-weight: 600;
}
.final-summary .kv{
  display:flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; padding: .35rem 0;
}
.final-summary .kv .k{ color: #5b636b; }
.final-summary .kv .v{ font-weight: 600; color: #111315; }
.final-summary .hr{ height: 1px; background: #eceff3; margin: .5rem 0; border-radius: 1px; }

/* Reduce 'clickable' affordance */
.final-summary .row, .final-summary .card, .final-summary .selectable{
  border: 0 !important; box-shadow: none !important; background: transparent !important;
}


/* Float label when field has content via JS 'has-value' */
.fl-field input.has-value + .fl-label,
.fl-field textarea.has-value + .fl-label,
.fl-field select.has-value + .fl-label{
  top: .35rem;
  font-size: .75rem;
  opacity: .9;
}


/* ===== UI Refinements v4 (2025-11-12) ===== */

/* Desktop: planner gutters back to 30px */
@media (min-width: 1024px){
  .scheduler-form{ padding-left: 30px; padding-right: 30px; }
}

/* Upsell list spacing */
.upsell-list{
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* Popover text running out on desktop: ensure width, padding and wrapping */
.popover{
  padding: 16px 20px;
  max-width: min(640px, 92vw);
  overflow-wrap: anywhere;
  word-wrap: break-word;
  line-height: 1.45;
  color: var(--csrp-text);
}

/* #additional-info smaller */
#additional-info, textarea#additional-info{ min-height: 100px; }

/* Final summary & sum-block: no borders/shadows, calmer read-only look */
.final-summary, .sum-block{
  background: #fbfbfd;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 12px;
  padding: 1rem;
}
.final-summary .row, .sum-block .row,
.final-summary .card, .sum-block .card,
.final-summary .selectable, .sum-block .selectable{
  border: 0 !important; box-shadow: none !important; background: transparent !important;
}
.final-summary .group-title, .sum-block .group-title{
  font-size: .8rem; letter-spacing: .02em; text-transform: uppercase;
  color: #6d7380; margin-bottom: .35rem; font-weight: 600;
}
.final-summary .kv, .sum-block .kv{
  display:flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; padding: .35rem 0;
}
.final-summary .kv .k, .sum-block .kv .k{ color: #5b636b; }
.final-summary .kv .v, .sum-block .kv .v{ font-weight: 600; color: #111315; }
.final-summary .hr, .sum-block .hr{ height: 1px; background: #eceff3; margin: .5rem 0; border-radius: 1px; }

/* Confirm block: keep within container & wrap nicely (desktop too) */
.confirm-block{
  display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; width: 100%;
  max-width: 100%;
}
.confirm-block > *{ max-width: 100%; }
.confirm-block input[type="checkbox"]{ margin-top: .1rem; }
.confirm-block .confirm-text, .confirm-block label{ flex: 1 1 0; min-width: 200px; }
/* Also contain any inner long text */
.confirm-block .confirm-text p{ margin: 0; }

/* Unify card shadows for clickable items across breakpoints (softer) */
:root{ --csrp-shadow-soft: 0 1px 8px rgba(0,0,0,.06); }
.activity-item, .open-si-item, .bike-card, .selectable-card{
  box-shadow: var(--csrp-shadow-soft) !important;
  border: 1px solid var(--csrp-border);
  border-radius: 12px;
  background: #fff;
}
/* Make sure no media-query overrides kill the shadow on desktop */
@media (min-width: 1024px){
  .activity-item, .open-si-item, .bike-card, .selectable-card{
    box-shadow: var(--csrp-shadow-soft) !important;
  }
}

    .open-si-item{padding: 1rem 1rem 1rem 2rem!important;}
    .open-si-item input[type="checkbox"]{
        width:1rem;
        position: absolute;
        margin-left:-20px!important;
        margin-top:-15px!important;
    }

/* Modalized popover on mobile: padding and backdrop handled via JS class */
@media (max-width:1023px){
  .popover{
    top: 10vh !important;
    padding-top: 18px; padding-bottom: 18px;
  }
}
.popover-backdrop{
  position: fixed; inset: 0; background: rgba(17,19,21,.35);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
body.has-popover-open .popover-backdrop{ opacity: 1; pointer-events: auto; }


/* ===== UI Refinements v5 (2025-11-12) ===== */


/* sum-acts-list: dash bullets and padding-inline 20px */
.sum-acts-list{
  list-style: none;
  padding-inline: 20px;
  margin: 0;
}
.sum-acts-list > li{
  position: relative;
  padding-left: .75rem;
  margin: .25rem 0;
}
.sum-acts-list > li::before{
  content: "–";
  position: absolute; left: 0;
  color: #5b636b;
}

/* confirm-block: checkbox small column, text fills remaining */
.confirm-block{
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
}
.confirm-block input[type="checkbox"]{
  flex: 0 0 20px; /* small left column */
  width: 20px; height: 20px;
  margin-top: .15rem;
}
.confirm-block label,
.confirm-block .confirm-text,
.confirm-block span{
  flex: 1 1 auto;
  max-width: calc(100% - 28px);
}

/* Guard against any inputs stretching full width inside confirm-block */
.confirm-block input[type="text"],
.confirm-block input[type="email"],
.confirm-block input[type="tel"],
.confirm-block select,
.confirm-block textarea{ flex: 1 1 auto; width: auto; max-width: 100%; }



/* ===== UI Refinements v6 (2025-11-12) ===== */

/* sum-acts-list: enforce on UL with stronger specificity */
ul.sum-acts-list,
.final-summary ul.sum-acts-list,
.sum-block ul.sum-acts-list{
  list-style: none !important;
  padding-inline: 20px !important;
  margin: 0 !important;
}
ul.sum-acts-list > li{
  position: relative;
  padding-left: .9rem !important;
  margin: .25rem 0 !important;
}
ul.sum-acts-list > li::before{
  content: "–";
  position: absolute; left: 0;
  color: #5b636b;
}

/* #submit-btn as primary */
#submit-btn{
  background: #0a84ff !important;
  color: #fff !important;
  border: 1px solid #0a84ff !important;
  box-shadow: none !important;
}
#submit-btn:hover{ filter: brightness(.95); }

/* Floating label minor tweaks */
.fl-label{ line-height: 1; }


.open-si-item input[type="checkbox"],
.open-si-item input[type="radio"]{
  flex: 0 0 auto;
  margin-top: .2rem;
}

/* Tekstblok in de SI kaart */
.open-si-item .meta,
.open-si-item .content,
.open-si-item .si-main{
  flex: 1 1 auto;
}

@media (min-width: 769px){
  /* Adresblok in twee rijen:
     1: straat + huisnummer/toevoeging
     2: postcode + plaats */
  .scheduler-form #street,
  .scheduler-form #postal-code,
  .scheduler-form #city{
    display: inline-block;
    vertical-align: top;
  }
  
    .scheduler-form #street
  {
        float: left;
    }


  /* Rij 1 */
  .scheduler-form #street{
    width: 64%;
    margin-right: 2%;
  }
  .scheduler-form .house-group{
    display: inline-flex;
    gap: .75rem;
    width: 34%;
  }
  .scheduler-form .house-group input{
    flex: 1 1 0;
  }

  /* Rij 2 */
  .scheduler-form #postal-code{
    width: 35%;
    margin-right: 2%;
  }
  .scheduler-form #city{
    width: 60%;
  }
}

/* Dropdown hoogte + eigen appearance */
.scheduler-form select{
  min-height: 2.6rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  background-color: #f9fafb;
  border-radius: 12px;
  border: 1px solid var(--csrp-border);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Zelfde card-achtergrond (wit) voor activity als open-si */
.activity-item{ background:#f9fafb; }
.activity-item label{ background:transparent; }

/* Subtiele highlight alleen op upsell items */
.upsell-list .upsell-item{
  background:#fcfcfc;
  border-radius:.75rem;
  padding:.25rem .35rem;
}

/* Verberg melding geen SI gevonden  */
#service-items-root .empty {
    display:none;
}

.csrp-accordion {
  border-radius: .75rem;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  margin-top: .75rem;
}

.csrp-accordion__toggle {
  width: 100%;
  padding: .85rem 1rem;
  border: none;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

.csrp-accordion__toggle:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.csrp-accordion__icon {
  font-size: 1.1rem;
  transition: transform .2s ease, opacity .2s ease;
}

.csrp-accordion__panel {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.2rem;
  font-size: .9rem;
  line-height: 1.5;
  transition: max-height .25s ease, padding-bottom .25s ease;
}

.csrp-accordion.is-open .csrp-accordion__panel {
  max-height: 320px; /* ruim genoeg voor deze tekst */
  padding-bottom: .85rem;
}

.csrp-accordion.is-open .csrp-accordion__icon {
  transform: rotate(45deg); /* plusje → kruisje */
}

input[type="checkbox"]:checked ~ span::before, input[type="checkbox"]:checked ~ label span::before {
    background: url("")!important;
    background-color: #fff!important;
}