/* Veton Charger Configurator — installation questionnaire (step 2).
 * Master-detail layout: site dropdowns + cards-list with a sticky details
 * pane on the right. The pane stacks below the cards list on narrow viewports. */

/* Nested inside .vcc-install-card — no border / padding of its own. The
 * grid-template-rows trick lets us animate from collapsed (0fr) to open
 * (1fr) without knowing the inner height. */
.vcc-questionnaire {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: 50px;
  opacity: 1;
  transition: grid-template-rows 0.4s ease, margin-top 0.35s ease, opacity 0.3s ease;
}
.vcc-questionnaire.is-collapsed {
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
}
/* min-height:0 lets the grid-template-rows trick shrink the inner box past
 * its content height. Overflow is set hidden *only* via .is-collapsed and
 * the temporary .is-transitioning class during expand — otherwise the
 * sticky .vcc-q-cards-list would be trapped in an overflow:hidden
 * containing block and stop sticking to the viewport. */
.vcc-questionnaire-inner {
  min-height: 0;
}
.vcc-questionnaire.is-collapsed .vcc-questionnaire-inner,
.vcc-questionnaire.is-transitioning .vcc-questionnaire-inner {
  overflow: hidden;
}

.vcc-questionnaire-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2A2A2A;
  margin: 0 0 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-questionnaire-intro {
  font-size: 1.1rem;
  color: #2A2A2A;
  margin: 0 0 30px;
  font-weight: 300;
  line-height: 1.5;
}
.vcc-questionnaire-list {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* ----- section header bar ----- */
.vcc-q-section {
  display: flex;
  flex-direction: column;
}
.vcc-q-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2A2A2A;
  margin: 0 0 25px;
  padding: 14px 18px;
  background: #f1f1f1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-q-section-chargers .vcc-q-section-title { margin-bottom: 15px; }

/* ----- site dropdowns ----- */
.vcc-q-site-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 36px;
  padding: 0 20px;
}
@media (max-width: 600px) {
  .vcc-q-site-grid { grid-template-columns: 1fr; }
}
/* Apartment short-circuit: questionnaire.js stamps this on every site
 * cell except the housing-type picker so the user reads the rest of the
 * site block as inactive. pointer-events: none disables hover / focus
 * affordances; the select itself also gets a `disabled` attribute so
 * keyboard nav can't reach it. Opacity holds back from 0 so the label
 * is still legible — it's context, not a blocker. */
.vcc-q-site-cell--muted {
  opacity: 0.25;
  pointer-events: none;
}
.vcc-q-site-label {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: #2A2A2A;
  margin: 0 0 15px;
}
.vcc-q-select {
  position: relative;
}
.vcc-q-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #8C8C8C;
  border-bottom: 2px solid #8C8C8C;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.vcc-q-select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 8px 28px 8px 2px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #dbdadb;
  font-size: 1.1rem;
  font-weight: 500;
  color: #2A2A2A;
  cursor: pointer;
  border-radius: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-q-select select:focus {
  outline: none;
  border-bottom-color: #C49E60;
}
/* Placeholder state: empty option selected = greyed out, matches our other
 * "no value yet" cues (vcc-q-details-placeholder etc.). */
.vcc-q-select select:has(option[value=""]:checked) { color: #8C8C8C; }
.vcc-q-select select option[value=""] { color: #8C8C8C; }

/* ----- master-detail layout ----- */
.vcc-q-master-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  margin-bottom: 35px;
}
@media (max-width: 900px) {
  .vcc-q-master-detail { grid-template-columns: 1fr; gap: 24px; }
}
.vcc-q-cards-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Cards stick onder de masthead-offset terwijl de details-pane verder scrollt.
 * Native sticky lost vanzelf op zodra de grid-rij's bodem het sticky-vlak
 * raakt — dus tops aligned bij start, bottoms aligned bij einde scroll. */
@media (min-width: 901px) {
  .vcc-q-cards-list {
    position: sticky;
    top: 165px;
    align-self: start;
  }
}

/* ----- charger card ----- */
.vcc-q-charger-card {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid #dbdadb;
  background: #fff;
  position: relative; /* anchors the status badge top-right */
  transition: opacity 0.15s ease-out, border-color 0.15s ease-out;
}

/* ---------- "Your details" submit validation ---------- */
/* Asterisk next to required site questions; matches the badge's red so the
 * visual language stays coherent. */
.vcc-q-required-mark { color: #D26161; }
/* Site select: red underline when the validator caught it empty. The select
 * is wrapped in `.vcc-q-select` which has the chevron styling, so the
 * highlight lives on the inner element rather than the wrapper border. */
.vcc-q-select select.is-invalid,
select.is-invalid {
  border-bottom: 2px solid #D26161;
}
/* Charger card flagged as missing / incomplete on submit gets a thicker
 * red border. Doesn't morph the badge background — only the outer
 * highlight, so the existing ✓/× stays readable. */
.vcc-q-charger-card.is-invalid {
  border-color: #D26161;
}

/* ---------- per-card status badge (✓ / ×) ---------- */
/* Appears after the modal has been opened-and-closed at least once
 * (JS toggles [data-status="complete"|"incomplete"] on the card). The
 * 3-stroke SVG morphs between the X and the ✓ via CSS `d` interpolation,
 * mirroring the .vcc-ral-stroke pattern on /configure/. */
.vcc-q-charger-status {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  transition: background-color 320ms ease,
              opacity 240ms ease 40ms,
              transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1) 40ms;
}
.vcc-q-charger-card[data-status] .vcc-q-charger-status {
  opacity: 1;
  transform: scale(1);
}
.vcc-q-charger-card[data-status="complete"]   .vcc-q-charger-status { background-color: #6BBE7B; }
.vcc-q-charger-card[data-status="incomplete"] .vcc-q-charger-status { background-color: #D26161; }

.vcc-q-charger-status-mark {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
}
.vcc-q-charger-status-stroke {
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: d 320ms ease;
}
/* X (incomplete) — two crossing diagonals. */
.vcc-q-charger-card[data-status="incomplete"] .vcc-q-charger-status-stroke-1 { d: path("M10 10 L22 22"); }
.vcc-q-charger-card[data-status="incomplete"] .vcc-q-charger-status-stroke-2 { d: path("M22 10 L10 22"); }
/* ✓ (complete) — stroke 1 is the short descender (upper-left → V bottom),
 * stroke 2 the long ascender (V bottom → upper-right). Coordinates pick
 * so the V bottom sits just below the viewBox centre and the two arms
 * span ~16 units horizontally — keeps the glyph visually centred inside
 * the 32×32 frame. */
.vcc-q-charger-card[data-status="complete"]   .vcc-q-charger-status-stroke-1 { d: path("M8 17 L14 23"); }
.vcc-q-charger-card[data-status="complete"]   .vcc-q-charger-status-stroke-2 { d: path("M14 23 L24 11"); }
/* Active/inactive treatment only applies on desktop — on mobile the modal
 * pops up as a fullscreen overlay so the cards underneath don't need to
 * indicate state. */
@media (min-width: 768px) {
  .vcc-q-charger-card.is-inactive { opacity: 0.45; }
  .vcc-q-charger-card.is-inactive:hover { opacity: 1; }
  .vcc-q-charger-card.is-active { border-color: #C49E60; }
}

/* Images stripped from the card entirely on every viewport. JS still ships
 * .vcc-q-charger-img markup so the DOM stays stable for any future status-
 * badge work; hiding here is enough. */
.vcc-q-charger-img { display: none; }
.vcc-q-charger-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Multi-layer composite: each layer fills the container, stacked by z-order
 * (shadow at the back, cable on top) — mirrors the inquiry-line stacking. */
.vcc-q-charger-img--stacked .vcc-q-charger-img-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: none;
  max-height: none;
}
.vcc-q-charger-img-layer[data-layer="shadow"] { z-index: 1; }
.vcc-q-charger-img-layer[data-layer="body"]   { z-index: 2; }
.vcc-q-charger-img-layer[data-layer="trim"]   { z-index: 3; }
.vcc-q-charger-img-layer[data-layer="cable"]  { z-index: 4; }
.vcc-q-charger-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.vcc-q-charger-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2A2A2A;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-q-charger-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.vcc-q-charger-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #2A2A2A;
  line-height: 1.3;
}
.vcc-q-charger-icon {
  width: 22px;
  flex-shrink: 0;
  color: #2A2A2A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.vcc-q-charger-icon i { line-height: 1; }
.vcc-q-charger-text {
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
}

.vcc-q-charger-toggle {
  align-self: flex-start;
  margin-top: 10px;
}

/* ----- details pane ----- */
.vcc-q-details-pane {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.vcc-q-details-empty {
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #8C8C8C;
}
.vcc-q-details-placeholder {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
  color: #8C8C8C;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-q-details-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2A2A2A;
  margin: 0 0 6px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-q-details-body {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* ----- empty state ----- */
.vcc-q-empty {
  color: #8C8C8C;
  font-style: italic;
  margin: 0 0 40px;
}

/* ----- question groups in details panel (radio / checkbox cards) ----- */
.vcc-q-group {
  border: none;
  padding: 0;
  margin: 0;
}
.vcc-q-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #2A2A2A;
  margin: 0 0 15px;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-q-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vcc-q-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #dbdadb;
  cursor: pointer;
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}
.vcc-q-option:hover { border-color: #C49E60; }
.vcc-q-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.vcc-q-option-box {
  width: 16px;
  height: 16px;
  border: 2px solid #dbdadb;
  flex-shrink: 0;
  background: #fff;
  position: relative;
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}
.vcc-q-group[data-vcc-q-type="single"] .vcc-q-option-box { border-radius: 50%; }
.vcc-q-option input:checked + .vcc-q-option-box {
  border-color: #C49E60;
  background: #C49E60;
}
.vcc-q-option input:checked + .vcc-q-option-box::after {
  content: "";
  position: absolute;
  background: #fff;
}
.vcc-q-group[data-vcc-q-type="single"] .vcc-q-option input:checked + .vcc-q-option-box::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.vcc-q-group[data-vcc-q-type="multi"] .vcc-q-option input:checked + .vcc-q-option-box::after {
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  background: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
}
.vcc-q-option:has(input:checked) {
  border-color: #C49E60;
  background: #fbf7f0;
}
.vcc-q-option-text {
  font-size: 1rem;
  color: #2A2A2A;
  font-weight: 500;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Inline questionnaire — rendered inside the active charger card on mobile.
 * Hidden on desktop where the right-hand .vcc-q-details-pane is canonical. */
.vcc-q-charger-inline-details { display: none; }

@media (max-width: 767px) {
  /* External details pane folds away — its content now lives inside the
   * active card via .vcc-q-charger-inline-details, which becomes a fixed
   * modal overlay below. */
  .vcc-q-details-pane { display: none; }
  /* Per-charger questionnaire as a fullscreen modal. Fixed to the viewport
   * so backdrop scrolling never bleeds through; body gets overflow:hidden
   * via .vcc-q-modal-open. The card itself stays in the document flow
   * underneath, but the modal covers it. */
  .vcc-q-charger-inline-details {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #fff;
    padding-top: 50px;
    overflow: hidden;
    /* Match Bootstrap's .modal.fade animation pattern — slide-down +
     * fade-in/out. JS toggles .is-shown via rAF after mount, then removes
     * it before unmount so the close motion plays before the node leaves
     * the DOM. */
    opacity: 0;
    transform: translate(0, -50px);
    transition: transform 0.3s ease-out, opacity 0.15s linear;
  }
  .vcc-q-charger-inline-details.is-shown {
    opacity: 1;
    transform: none;
  }
  .vcc-q-charger-inline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #e6e6e6;
    flex-shrink: 0;
  }
  .vcc-q-charger-inline-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2A2A2A;
  }
  .vcc-q-charger-close {
    background: transparent;
    border: 0;
    padding: 0;
    width: 36px;
    height: 36px;
    line-height: 1;
    color: #2A2A2A;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .vcc-q-charger-close .icon-close {
    font-size: 18px;
    color: #8C8C8C;
  }
  .vcc-q-charger-inline-body {
    flex: 1;
    /* min-height: 0 unlocks flex shrinking so overflow-y can actually
     * scroll. Without it the body grows past the flex container, pushing
     * the footer below the viewport and making clicks land ~10-20px off. */
    min-height: 0;
    overflow-y: auto;
    /* Stop the scroll chain leaking into the locked body underneath
     * (matters on iOS Safari especially). */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
  }
  .vcc-q-charger-body { padding: 15px; }
  .vcc-q-group { margin-bottom: 20px; }
  .vcc-q-charger-inline-footer {
    flex-shrink: 0;
    background: #fff;
    padding: 20px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  }
  .vcc-q-charger-confirm {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.vcc-q-modal-open { overflow: hidden; }
}