#wcc-order-summary-box {
    background-color: transparent;
    color: #000;
    padding: 15px;
    border-radius: 12px;
    margin: 1em 0;
    border: 1px solid #2d2e2d;
}

#wcc-order-summary-box .summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #2d2e2d;
    flex-wrap: wrap;
}

#wcc-order-summary-box .summary-item:last-child {
    border-bottom: none;
}

#wcc-order-summary-box .summary-item-label {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: bold;
}

/* Updated styling to force color to black and remove gap */
#wcc-order-summary-box .summary-item-value,
#wcc-order-summary-box .summary-item-value .summary-item-sub-label {
    color: #000000 !important; /* Forces color to black */
    font-weight: bold !important; /* Makes it bold */
    line-height: 1.2 !important; /* Reduces vertical space */
    text-align: right; /* Keeps alignment to the right */
}

/* This targets the line break element causing the gap and hides it */
#wcc-order-summary-box .summary-item-value br {
    display: none !important;
}

/* Original styling for the icons, now updated to be more specific */
#wcc-order-summary-box .summary-item .summary-icon,
#wcc-order-summary-box .summary-item .summary-icon-img {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    object-fit: contain;
    /* Reset font icon specific styles */
    color: inherit !important;
    font-size: 30px !important; 
}


#wcc-order-summary-box .summary-item ul {
    list-style: none;
    padding-left: 0;
    margin: 5px 0 0 0;
    width: 100%;
    text-align: right;
}

#wcc-order-summary-box .summary-item ul li {
    font-size: 0.9em;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.5;
    padding-top: 5px;
}
#wcc-order-summary-box .summary-item-value .summary-item-sub-label {
    color: #000000 !important;
}

/* Force rooms line to appear on its own line and not wrap awkwardly */
#wcc-order-summary-box .cc-room-line{
    display:block !important;
    width:100% !important;
    margin-top:2px;
    white-space:nowrap;
}
/* Vlindervloer required note under concrete options */
.wcc-required-note{
    display:inline;
    font-size:12px;
    color:red;
    font-weight:600;
    white-space:nowrap;
}

/* Helper line under Step 5 select */
.wcc-vlinderen-helper{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:6px;
    font-size:13px;
    color:#4b5563;
}
.wcc-vlinderen-helper .wcc-vlinderen-icon{
    display:inline-flex;
    line-height:0;
    color:#4b5563;
}
.wcc-vlinderen-helper .wcc-vlinderen-text{
    line-height:1.4;
}

@media (max-width:480px){
    .wcc-required-note{
        font-size:11px;
    }
    .wcc-vlinderen-helper{
        font-size:12px;
    }
}


/* Step 5 (Vlindervloer) layout: 2 columns desktop, helper under selects */
#wcc-polish-floor-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-auto-flow:row;
    grid-gap:12px;
}
#wcc-polish-floor-grid #wcc-polish-floor-surface-area{
    grid-column:1;
    grid-row:1;
}
#wcc-polish-floor-grid #wcc-polish-floor-room-type{
    grid-column:2;
    grid-row:1;
}
#wcc-polish-floor-grid .wcc-vlinderen-helper{
    grid-column:1 / -1;
    grid-row:2;
}
@media (max-width:640px){
    #wcc-polish-floor-grid{
        grid-template-columns:1fr;
    }
    #wcc-polish-floor-grid #wcc-polish-floor-surface-area,
    #wcc-polish-floor-grid #wcc-polish-floor-room-type,
    #wcc-polish-floor-grid .wcc-vlinderen-helper{
        grid-column:1;
        grid-row:auto;
    }
}

/* === WCC custom: Vlindervloer helper + remove control layout/colors (version 3.5.40.20260219) === */
.wcc-vlinderen-icon{
  color:#8F84BE !important;
}
.wcc-vlinderen-icon svg,
.wcc-vlinderen-icon svg *{
  fill:currentColor !important;
}

/* Plain text "Vlinderen verwijderen" control */
.wcc-vlinderen-remove{
  display:inline-flex;
  gap:6px;
  align-items:center;
  cursor:pointer;
  color:#4b5563; /* text color */
  font-size:12px;
  line-height:1.2;
}
.wcc-vlinderen-remove svg{
  color:#8F84BE;
  fill:currentColor;
  display:inline-block;
  vertical-align:middle;
}

/* Helper icon + text spacing */
.wcc-vlinderen-helper{
  display:flex;
  gap:8px;
  align-items:flex-start;
}

/* Grid ordering for control + helper */
#wcc-polish-floor-grid{
  grid-auto-flow:row dense;
}

/* Desktop: helper under selects; when remove visible, it takes row 2 and helper row 3 */
#wcc-polish-floor-grid .wcc-vlinderen-helper{
  grid-column:1 / -1;
  grid-row:2;
}
#wcc-polish-floor-grid.wcc-vlinderen-remove-visible .wcc-vlinderen-remove{
  grid-column:1 / -1;
  grid-row:2;
}
#wcc-polish-floor-grid.wcc-vlinderen-remove-visible .wcc-vlinderen-helper{
  grid-row:3;
}

/* Mobile ordering */
@media (max-width:640px){
  #wcc-polish-floor-grid{
    grid-template-columns:1fr;
  }
  #wcc-polish-floor-grid #wcc-polish-floor-surface-area{
    grid-column:1;
    grid-row:1;
  }
  #wcc-polish-floor-grid #wcc-polish-floor-room-type{
    grid-column:1;
    grid-row:2;
  }
  #wcc-polish-floor-grid .wcc-vlinderen-helper{
    grid-column:1;
    grid-row:3;
  }
  /* When remove visible: it appears under first select, helper moves to end */
  #wcc-polish-floor-grid.wcc-vlinderen-remove-visible .wcc-vlinderen-remove{
    grid-column:1;
    grid-row:2;
  }
  #wcc-polish-floor-grid.wcc-vlinderen-remove-visible #wcc-polish-floor-room-type{
    grid-row:3;
  }
  #wcc-polish-floor-grid.wcc-vlinderen-remove-visible .wcc-vlinderen-helper{
    grid-row:4;
  }
}
/* === end WCC custom === */


/* --- m³ helper (calculator step 1) --- */
.wcc-helperbtn{
  width:100%;
  margin-top:10px;
  padding:15px 15px !important;
  background:#F7F5FF;
  border:1px solid rgba(49, 17, 98, 0.12);
  border-radius: 10px !important;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  cursor:pointer;
  box-sizing:border-box;

  font-family:"Poppins", Sans-serif;
  font-size:18px;
  font-weight:700;
}
#wcc-btn-m3-helper{
  border-radius:10px !important;
}

.wcc-helperbtn:hover,
.wcc-helperbtn:focus,
.wcc-helperbtn:active{
  background:#F7F5FF !important;
  border-color:rgba(49, 17, 98, 0.12) !important;
  box-shadow:none !important;
  outline:none !important;
  transform:none !important;
  filter:none !important;
}
.wcc-helperbtn span{
  font-family:"Poppins", Sans-serif;
  font-size:14px;
  line-height:20px;
  letter-spacing:0;
  vertical-align:middle;
}
.wcc-helperbtn span:first-child{
  font-weight:700;
  color:#311162;
}
.wcc-helperbtn-right{
  font-weight:400;
  color:#311162;
  white-space:normal; /* allow wrap on mobile */
  text-align:right;

  max-width: 70px !important;
}

/* Panel */
.wcc-helperpanel{
  display:none;
  margin-top:10px;
  background:#ffffff;
  border:1px solid rgba(49, 17, 98, 0.12);
  border-radius:10px !important;
  padding:14px;
  box-shadow:0 6px 16px rgba(0,0,0,0.06);
  box-sizing:border-box;
}
.wcc-helperpanel.is-open{
  display:block;
}

.wcc-helper-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}

.wcc-helper-col .wcc-helper-label,
.wcc-helper-label{
  font-size:13px;
  font-weight:700;
  color:#311162 !important;
  margin-bottom:6px;
}

.wcc-helper-input{
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(76, 0, 186, 0.35);
  border-radius:14px;
  font-size:15px;
  box-sizing:border-box;
  outline:none;
}
.wcc-helper-input:focus{
  border-color:#4C00BA;
  box-shadow:0 0 0 3px rgba(76, 0, 186, 0.12);
}


.wcc-helper-preview{
  display:none;
  margin-top:16px;
  text-align:center;
  font-family:"Poppins", Sans-serif;
  font-size:30px;
  line-height:1.1;
  font-weight:700;
  color:#311162;
}
.wcc-helper-preview.is-visible{
  display:block;
}

.wcc-helper-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px;
}

.wcc-helper-calc-btn{
  width:100%;
  margin-top:0;
  padding:12px 14px;
  background:#ffffff;
  color:#311162;
  border:1px solid #311162;
  border-radius:999px;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
}

#wcc-btn-add-m3.wcc-helper-calc-btn{
  font-size:16px !important;
}

#wcc-btn-calc-m3.wcc-helper-calc-btn{
  font-size:16px !important;
}

#wcc-btn-calc-m3::focus{
	color:#fff!important;
}

#wcc-btn-add-m3.wcc-helper-calc-btn[disabled]{
  opacity:0.55;
  cursor:not-allowed;
}

#wcc-m3-out{
  margin-top:10px;
  font-weight:600;
  color:#311162;
  font-size:13px;
  text-align:center;
}
#wcc-m3-out:empty{
  display:none;
  margin-top:0;
}

/* Desktop: 3 columns in one row for Lengte / Breedte / Dikte */
@media (min-width: 768px){
  .wcc-helperpanel.is-open{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    align-items:start;
  }
  .wcc-helperpanel .wcc-helper-row{
    display:contents; /* make its children participate in the panel grid */
    margin:0;
  }
  .wcc-helperpanel .wcc-helper-block{
    margin:0;
  }
  .wcc-helper-preview,
  .wcc-helper-actions,
  #wcc-m3-out{
    grid-column:1 / -1;
  }

}

/* Mobile: keep same layout (2 top, 1 bottom) + tidy helper button text */
@media (max-width: 520px){
  .wcc-helperbtn span{
    font-size:13px;
    line-height:20px;
  }
  .wcc-helperbtn span:first-child{
    text-align:left;
    flex:1 1 auto;
    min-width:0;
  }
  .wcc-helperbtn-right{
    text-align:right;
    white-space:nowrap;
    max-width:70px !important;
    flex:0 0 auto;
  }
}

@media (max-width: 767px){
  .wcc-helper-actions{
    grid-template-columns:1fr;
  }
  .wcc-helper-preview{
    font-size:26px;
  }
}

/* Hover: Bereken m³ button text white */
#wcc-btn-calc-m3.wcc-helper-calc-btn:hover{
  color:#fff !important;
}



/* Native hidden inputs (used for date + time pickers) */
.wcc-native-hidden{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Native date/time inputs are visually hidden; we open them via showPicker() */
.wcc-datetime-input-hidden{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
/* Regions (Stap 2) — tile design (matches provided reference)
   Desktop: 3 columns, Tablet: 3 columns, Mobile: 2 columns */
.wcc-regions-grid.wcc-regions-tiles{
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Mobile: 2 columns */
@media (max-width: 640px){
  .wcc-regions-grid.wcc-regions-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wcc-region-option.wcc-tile,
  .wcc-region-tile-btn{ padding: 10px 12px !important; min-height: 60px; }
  .wcc-region-ico{ width: 32px; height: 32px; border-radius: 12px; }
  .wcc-region-txt{ font-size: 14px; }
}

.wcc-region-title{
  font-weight: 600;
  color: #2E005C;
  font-size: 15px;
  line-height: 1.2;
}

.wcc-region-option.wcc-tile{
  min-width: 0;
  border: 1px solid rgba(0,0,0,.07) !important;
  background: #fafafa !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  min-height: 68px;
  text-align: left !important;
}

.wcc-region-option.wcc-tile.selected{
  background: #F4EEFF !important;
  border-color: rgba(76,0,186,.40) !important;
}

.wcc-region-radio{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.20);
  background: #fff;
  flex: 0 0 20px;
}

.wcc-region-option.wcc-tile.selected .wcc-region-radio{
  border-color: rgba(76,0,186,.50);
  box-shadow: inset 0 0 0 5px #4C00BA;
}

.wcc-region-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(76,0,186,.12);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2E005C;
  flex: 0 0 34px;
}

.wcc-region-ico svg{
  width: 20px;
  height: 20px;
}

.wcc-region-txt{
  font-weight: 600;
  color: #2E005C;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
  min-width: 0;
}

.wcc-region-tip{ margin-top: 15px; font-size: 13px; color: #6b5c90; line-height: 1.4; }


/* --- Region tiles: enforce sample (checkbox + icon + title in one line) --- */
.wcc-regions-grid.wcc-regions-tiles .wcc-region-option.wcc-tile,
.wcc-regions-grid.wcc-regions-tiles .wcc-region-tile-btn{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  text-align: left !important;
	min-height: 0px!important;
}

.wcc-region-tile-btn{
  width: 100%;
  background: #fafafa !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  cursor: pointer !important;
  min-height: 68px;
}

.wcc-region-tile-btn.selected{
  background: #F4EEFF !important;
  border-color: rgba(76,0,186,.40) !important;
}

.wcc-region-tile-btn:focus{ outline: none; }
.wcc-region-tile-btn:focus-visible{ outline: 2px solid rgba(76,0,186,.45); outline-offset: 2px; }

/* In case legacy tile styles inject check icons, hide them for region tiles */
.wcc-regions-grid.wcc-regions-tiles .wcc-region-option .wcc-option-check{ display:none !important; }

/* ===== Regions grid: force 3 columns desktop/tablet, 2 columns mobile ===== */
.wcc-regions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 640px) {
  .wcc-regions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .wcc-region-tile-btn,
  .wcc-regions-tiles .wcc-option {
    padding: 10px 12px !important;
    min-height: 60px !important;
  }
}

/* Ensure region tile content stays on one aligned row */
.wcc-regions-tiles .wcc-option,
.wcc-region-tile-btn {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 10px !important;
}
.wcc-regions-tiles .wcc-option .wcc-option-label,
.wcc-region-tile-title {
  font-weight: 600 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* ===== Native datetime single field ===== */
.wcc-datetime-input {
  width: 100% !important;
  position: relative !important;
}
/* Hide the browser icon (we use our own), but keep indicator area clickable */

/* Flatpickr: ensure the visible alt input matches calculator styling */
.wcc-input-wrapper .flatpickr-input {
  width: 100% !important;
  border: 1.5px solid #6a1bff !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  background: #fff !important;
  color: #2b174d !important;
  font-weight: 500 !important;
}

/* Force region grid columns */
#wcc-region.wcc-regions-tiles{grid-template-columns:repeat(3,1fr) !important;}
@media (max-width: 768px){#wcc-region.wcc-regions-tiles{grid-template-columns:repeat(3,1fr) !important;}}
@media@media (max-width: 520px){#wcc-region.wcc-regions-tiles{grid-template-columns:repeat(2,1fr) !important;}}



#wcc-concrete-type .wcc-option-check{left: 0px!important;}

#wcc-discharge-method .wcc-option-check{left: 0px!important;}

#wcc-polish-floor-grid {margin-top: 15px;}


/* Ensure execution method + rooms render on separate lines (flex-safe) */
#wcc-order-summary-box .summary-item.has-complex-value .summary-item-value{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#wcc-order-summary-box .cc-room-line{
    display: block;
    width: 100%;
    margin-top: 4px;
    white-space: nowrap;
}

/* Step 4: hide tooltips (keep markup for later) */
#wcc-discharge-method .wcc-modal-trigger,
#wcc-discharge-method .wcc-tooltip-icon{
  display:none !important;
}

/* Step 4: recommended badge + yellow border (like Step 8 default choice)
   Only when NOT selected. When selected, normal selected styling applies. */
#wcc-discharge-method .wcc-option.wcc-default-choice:not(.selected){
  border: 2px solid rgba(252, 196, 18, 1);
  position: relative;
}
#wcc-discharge-method .wcc-option.wcc-default-choice:not(.selected)::before{
  content: "Meest gekozen";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(252, 196, 18, 1);
  color: rgba(49, 17, 98, 1);
  font-weight: 600;
  font-size: 13px;
  padding: 4px 14px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
}

/* Step 4: Toggle row (reference Step 5 styles) */
#wcc-discharge-method .wcc-discharge-toggle-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid #E6DCFF;
  background: #F3EFFF;
  cursor: default;
  width: 100%;
  grid-column: 1 / -1;
}
#wcc-discharge-method .wcc-discharge-toggle-text{ display:flex; flex-direction:column; }
#wcc-discharge-method .wcc-discharge-toggle-title{ font-weight:700; color:#311162; }
#wcc-discharge-method .wcc-discharge-toggle-sub{ font-size:12px; opacity:0.85; margin-top:2px; }

/* Step 4: advanced options (hidden by default; shown when toggle is on via JS) */
#wcc-discharge-method .wcc-option.wcc-advanced-discharge{
  display:none;
}

/* Step 4: disable Mixer pomp (do not delete) */
#wcc-discharge-method .wcc-option[data-value="mixer_pump"]{
  display:none !important;
}


/* ------------------------------------------------------------
   Step 4: "Bekijk meer loswijze" toggle (match Step 5 style)
   ------------------------------------------------------------ */
#wcc-discharge-more-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:14px;
    background:#f5f3ff;
    border:1px solid rgba(138,43,226,0.18);
}
#wcc-discharge-more-toggle .wcc-discharge-toggle-text{
    display:flex;
    flex-direction:column;
    gap:2px;
}
#wcc-discharge-more-toggle .wcc-discharge-toggle-title{
    font-weight:600;
}
#wcc-discharge-more-toggle .wcc-discharge-toggle-sub{
    font-size:12px;
    opacity:0.8;
}

/* Toggle switch */
.wcc-switch{
    position:relative;
    display:inline-block;
    width:46px;
    height:26px;
    flex:0 0 auto;
}
.wcc-switch input{
    opacity:0;
    width:0;
    height:0;
}
.wcc-slider{
    position:absolute;
    cursor:pointer;
    top:0; left:0; right:0; bottom:0;
    background:#d7d7d7;
    transition:0.2s;
    border-radius:999px;
}
.wcc-slider:before{
    position:absolute;
    content:"";
    height:20px;
    width:20px;
    left:3px;
    top:3px;
    background:white;
    transition:0.2s;
    border-radius:999px;
    box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.wcc-switch input:checked + .wcc-slider{
    background:#3C0096;
}
.wcc-switch input:checked + .wcc-slider:before{
    transform:translateX(20px);
}

/* ------------------------------------------------------------
   Step 4: Advanced discharge methods visibility (toggle OFF)
   Uses CSS !important to beat existing display:flex !important rules.
   ------------------------------------------------------------ */
/*
   IMPORTANT: When toggle is OFF, advanced discharge methods must be hidden
   even if they are in a "locked" or "selected" state.
   This prevents a locked wheelbarrow/pump card from still showing.
*/
#wcc-discharge-method.wcc-hide-advanced .wcc-option[data-advanced="true"]{
    display:none !important;
}

/* Step 4: option descriptions */
#wcc-discharge-method .wcc-option .wcc-option-desc{
    font-size:12px;
    opacity:0.85;
    margin-top:2px;
}

/* Step 4: Hide wheelbarrow limit helper text (keep markup for future use) */
.wcc-wheelbarrow-limit-text{
    display:none !important;
}


/* ===== Step 7 custom date picker (version 3.8.2) ===== */
.wcc-datetime-grid--split {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start;
  gap: 15px;
}

.wcc-step7-field {
  min-width: 0;
}

.wcc-date-picker-wrapper {
  z-index: 20;
}

.wcc-date-picker-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  min-width: 320px;
  max-width: min(100vw - 32px, 420px);
  background: #fff;
  border: 1px solid #e6dcff;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(49, 17, 98, 0.14);
  padding: 14px;
}

.wcc-date-picker-panel.is-open {
  display: block;
}

.wcc-date-picker-header,
.wcc-date-picker-weekdays,
.wcc-date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.wcc-date-picker-header {
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  margin-bottom: 12px;
}

.wcc-date-picker-month {
  grid-column: 2;
  text-align: center;
  font-weight: 700;
  color: #311162;
}

.wcc-date-picker-nav {
  width: 44px;
  height: 44px;
  border: 1px solid #e6dcff;
  border-radius: 12px;
  background: #fff;
  color: #311162;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.wcc-date-picker-weekdays {
  margin-bottom: 8px;
}

.wcc-date-picker-weekdays span {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #6f5b95;
}

.wcc-date-picker-weekdays .is-saturday {
  color: #9a7b00;
}

.wcc-date-picker-weekdays .is-sunday {
  color: #b5a9cf;
}

.wcc-date-picker-day {
  min-height: 44px;
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #e6dcff;
  border-radius: 12px;
  background: #fff;
  color: #311162;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

.wcc-date-picker-day.is-saturday {
  background: #fff4b8;
  border-color: #ffd54a;
  color: #7a5c00;
}

.wcc-date-picker-day.is-selected {
  background: #6a1bff;
  border-color: #6a1bff;
  color: #fff;
}

.wcc-date-picker-day.is-outside {
  opacity: 0.35;
}

.wcc-date-picker-day.is-disabled {
  opacity: 0.45;
  background: #f5f2fb;
  border-color: #eee7fb;
  color: #b5a9cf;
  cursor: not-allowed;
}

.wcc-date-picker-wrapper .wcc-datetime-input,
#wcc-time-slot {
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
}

#wcc-time-slot {
  min-width: 0;
}

@media (max-width: 768px) {
  .wcc-datetime-grid--split {
    grid-template-columns: 1fr !important;
  }

  .wcc-date-picker-panel {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 10px;
  }

  .wcc-date-picker-days,
  .wcc-date-picker-weekdays {
    gap: 5px;
  }

  .wcc-date-picker-day {
    min-height: 40px;
    font-size: 15px;
  }
}


/* Step 7 hardening fixes v3.8.2 */
.wcc-datetime-grid--split {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 15px !important;
}

.wcc-datetime-grid--split > .wcc-step7-field,
.wcc-datetime-grid--split > .wcc-date-picker-wrapper {
  width: 100% !important;
  min-width: 0 !important;
}

.wcc-date-picker-weekdays span,
.wcc-date-picker-day {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  line-height: 1 !important;
  text-align: center !important;
}

.wcc-date-picker-day {
  display: grid !important;
  place-items: center !important;
  font-size: clamp(14px, 1.1rem, 16px) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#wcc-date-display,
#wcc-time-slot {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {
  .wcc-datetime-grid--split {
    grid-template-columns: 1fr !important;
  }
}






#wcc-time-slot {border: 1px solid #4C00BA !important;}

#wcc-date-display {background: #F9F9F9;}


@media screen and (max-width: 768px) {
	.wcc-step .wcc-step-title{
	font-size:15px!important;
		line-height:25px!important;
}
	.wcc-region-title{
		font-size:13px!important;
	}
	.wcc-header {
		gap: 0px!important;
	}
	.wcc-header h2 {
		padding-top: 5px!important;;
    }
	
	.wcc-header h2 .wcc-costing-text {
        float: left;
		font-size:22px!important;
		padding-right: 10px;
    }
	.wcc-auto-select-title{
		font-size:11px!important;
	}
	.wcc-auto-dot{
		width:4px!important;
		height:4px!important;
	}
	.wcc-auto-select-tag{
		font-size:11px!important;
		padding: 4px 8px!important;
	}
	.wcc-auto-select-tags {
        gap: 3px!important;
    }
	    .wcc-auto-select-box {
        padding: 8px 12px!important;
    }
	#wcc-concrete-compositions-toggle .wcc-concrete-toggle-title{
		font-size:14px!important;
	}
	#wcc-concrete-compositions-toggle .wcc-concrete-toggle-sub{
		font-size:10px!important;
	}
	#wcc-execution-method .wcc-room-count-option{
		min-height:0px!important;
		padding: 0px!important;
		
	}
	#wcc-execution-method .wcc-room-count-option-title{
		margin-top: 6px!important;
	}
	#wcc-execution-method .wcc-room-count-heading{
		font-size:14px!important;
	}
	#wcc-concrete-type .wcc-option img {
   
    width: 32px!important;
    height: 32px!important;
}
	    #wcc-concrete-type .wcc-option .wcc-option-label {
        font-size:14px!important;
    }
	#wcc-concrete-type .wcc-option .wcc-option-label-wrap{
		line-height: 20px!important;
	}
	#wcc-concrete-type .wcc-option{
		column-gap:0px!important;
		padding: 12px 17px!important;
	}
	#wcc-concrete-type .wcc-option .wcc-pump-required-note{
		margin-left:0px!important;
	}
	#wcc-concrete-type .wcc-option .wcc-option-price{
		 font-size:12px!important;
		line-height: 12px!important;
	}
}

@media screen and (min-width: 768px) {
	.wcc-room-count-option{
		padding: 14px 0px!important;
	}
	.wcc-room-count-heading{
		font-size:16px!important;
	}
}


/* Step 7 static note option (v3.8.13) */
#wcc-time-slot option.wcc-time-slot-note-option,
#wcc-time-slot option[value="wcc-confirmed-by-mail"] {
  background: #f3eaff;
  color: #4c00ba;
  font-weight: 600;
}

.wcc-option.selected:not(.wcc-pump-input-required){
	box-shadow: 0px 4px 6.7px 0px rgba(138, 43, 226, 0.08)!important;
}


.wcc-execution-price{
	font-size: 18px!important;
}




/* ===================================================================
   WCC Step Gating UI — v3.8.74
   - Steps beyond the next-to-fill step are visually dimmed (opacity only)
   - All steps remain fully interactive (no pointer-events blocking)
   - Clicking a locked step scrolls to + highlights the next step
   - Opacity effect only activates after first user interaction
     (wcc-calculator-active class added to #wcc-calculator-container)
   =================================================================== */

/* Only apply dimming when the calculator has been interacted with */
#wcc-calculator-container.wcc-calculator-active .wcc-step--disabled {
    opacity: 0.42;
    transition: opacity 0.35s ease;
}

/* Active/unlocked steps always full opacity */
#wcc-calculator-container.wcc-calculator-active .wcc-step:not(.wcc-step--disabled) {
    opacity: 1;
    transition: opacity 0.35s ease;
}

/* Step 4 inner wrapper (was a double nested .wcc-step, now .wcc-step-inner) */
.wcc-step-inner {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}