/* Veton Charger Configurator — /overview/ (step 5).
 *
 * Long-form recap of the entire configuration: chargers, extras,
 * installation summary + estimate, customer details, totals.
 *
 * Visual language matches the mockup: section heading on top, table-like
 * rows with one row per line, grey subtotal bar at the bottom of each
 * section, three-column "Your details" grid, totals stack with the headline
 * bookended by stronger weight. JS in overview.js hydrates each row +
 * subtotal from localStorage and the installation-quote endpoint. */

.vcc-overview-page .vcc-inquiry-body {
  padding-bottom: 40px;
}

/* Bootstrap `.alert.alert-warning` regelt nu het orange/yellow palet en de
 * border. We voegen alleen layout-tweaks toe: vlakke hoeken (in lijn met
 * de andere recap-bars op deze pagina), iets meer ademruimte, en typografie
 * voor de title + body slot zodat ze niet plat door de alert-default
 * worden afgevlakt. */
.vcc-overview-multi-charger {
  margin: 0 0 24px;
  padding: 18px 22px;
  border-radius: 0;
}
.vcc-overview-multi-charger[hidden] { display: none; }
.vcc-overview-multi-charger-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Bulletproof color inheritance: the global `.alert :is(p) { color: inherit }`
 * normally suffices, but the theme bundles a `body { color: #656565 }`
 * rule that wins under certain compiled-css orderings — pin color on
 * the body wrapper + its children with higher specificity to force the
 * amber/alert-warning palette through. */
.vcc-overview-multi-charger-body,
.vcc-overview-multi-charger-body p {
  color: inherit;
}
.vcc-overview-multi-charger-body p {
  margin: 0 0 8px;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.45;
}
.vcc-overview-multi-charger-body p:last-child { margin-bottom: 0; }

/* Apartment alert — overview.js shows this in place of the install
 * breakdown when the customer picked an apartment building. Same visual
 * language as the inquiry-side .vcc-appartement-alert: chained
 * `.alert.vcc-overview-appartement` out-specifies Bootstrap, body p
 * colour is pinned to the warning brown so the theme's grey body rule
 * can't bleed through. */
.alert.vcc-overview-appartement {
  margin: 0 0 24px;
  padding: 20px;
  border-radius: 0;
}
.vcc-overview-appartement[hidden] { display: none; }
.alert.vcc-overview-appartement .vcc-overview-appartement-title,
.alert.vcc-overview-appartement .vcc-overview-appartement-body,
.alert.vcc-overview-appartement .vcc-overview-appartement-body p {
  color: #856404;
}
.vcc-overview-appartement-title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
}
.vcc-overview-appartement-title:empty { display: none; }
.vcc-overview-appartement-body p {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
.vcc-overview-appartement-body p:last-child { margin-bottom: 0; }

/* ================== Section primitive ================== */
/* Every block (Chargers, Extras, Installation, Your details, Totals) is a
 * .vcc-recap with a heading + content + an optional grey subtotal bar.
 * Adjacent recap-pairs get a thin top border + 40px padding-top so the
 * reader scans them as distinct chapters. */
.vcc-recap {
  margin-bottom: 40px;
}
.vcc-recap + .vcc-recap {
  border-top: 1px solid #dbdadb;
  padding-top: 40px;
}
.vcc-recap-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #2A2A2A;
  margin: 0 0 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-recap-subhead {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2A2A2A;
  margin: 24px 0 12px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-recap-empty {
  color: #8C8C8C;
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0 0 16px;
}

/* ----- shared row layout (Chargers + Extras) -----
 * Thumbnail | name | qty | attr | attr | attr | price.
 * Auto-shrinks on narrow viewports by stacking the meta columns. */
.vcc-recap-row {
  display: grid;
  grid-template-columns: 80px 1.4fr 0.4fr 1fr 1fr 1fr 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
}
.vcc-recap-row + .vcc-recap-row {
  border-top: 1px solid #f1f1f1;
}
.vcc-recap-thumb {
  width: 80px;
  height: 80px;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.vcc-recap-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Stacked charger composite — same shadow → body → trim → cable order
 * as the /extras/ inquiry-line thumb, each layer absolutely positioned
 * inside the grey square. */
.vcc-recap-thumb--stacked .vcc-recap-thumb-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: none;
  max-height: none;
}
.vcc-recap-thumb-layer[data-layer="shadow"] { z-index: 1; }
.vcc-recap-thumb-layer[data-layer="body"]   { z-index: 2; }
.vcc-recap-thumb-layer[data-layer="trim"]   { z-index: 3; }
.vcc-recap-thumb-layer[data-layer="cable"]  { z-index: 4; }
/* Typography mirrors the /extras/ inquiry-line column treatment so the
 * recap rows on /overview/ read as the same component: bold-XL name +
 * qty, mid-weight muted attribute labels, bold price. Update both files
 * together if either side moves. */
.vcc-recap-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2A2A2A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Inline "(xN)" suffix shown only on mobile (qty cell is hidden there).
 * Stays in the name node so it inherits the bold weight + heading colour. */
.vcc-recap-name-qty { display: none; }
.vcc-recap-qty {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2A2A2A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-recap-meta {
  font-size: 1.1rem;
  font-weight: 500;
  color: #656565;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-recap-meta--muted {
  color: #8C8C8C;
}
.vcc-recap-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2A2A2A;
  text-align: right;
  white-space: nowrap;
  /* Matches the subtotal bar's 15px right padding so the price column
   * lines up visually with the subtotal value below it. */
  padding-right: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Extras section reads as smaller secondary content next to the bold
 * Chargers rows above — flatten name / qty / meta / price to a single
 * 1.05rem across the row. Specificity 0,2,1 beats each of the per-cell
 * defaults (0,1,0). */
.vcc-recap-extras .vcc-recap-row .vcc-recap-name,
.vcc-recap-extras .vcc-recap-row .vcc-recap-qty,
.vcc-recap-extras .vcc-recap-row .vcc-recap-meta,
.vcc-recap-extras .vcc-recap-row .vcc-recap-price {
  font-size: 1.05rem;
}

/* Desktop: the meta wrap is layout-transparent so its 3 children take
 * their natural columns 4/5/6 in the parent's 7-col grid (just as
 * before the wrapper existed). */
.vcc-recap-meta-wrap { display: contents; }

@media (max-width: 767.98px) {
  .vcc-recap-row {
    grid-template-columns: 64px 1fr auto;
    grid-template-areas:
      "thumb name  price"
      "thumb metas price";
    gap: 6px 14px;
  }
  .vcc-recap-thumb { grid-area: thumb; width: 64px; height: 64px; }
  .vcc-recap-name  { grid-area: name; }
  .vcc-recap-price { grid-area: price; align-self: start; }
  /* Mobile: wrap takes the metas-cell and lays its children inline so
   * the 3 attribute labels read as "Imperial Black / Coated metal /
   * No branding" instead of stacking. Empty meta lines drop out. */
  .vcc-recap-meta-wrap {
    grid-area: metas;
    display: block;
    font-size: 0.9rem;
    color: #8C8C8C;
  }
  .vcc-recap-qty { display: none; }
  .vcc-recap-name-qty { display: inline; }
  .vcc-recap-meta-line {
    display: inline;
    font-size: 0.9rem;
    color: #8C8C8C;
  }
  .vcc-recap-meta-line:empty { display: none; }
  .vcc-recap-meta-line + .vcc-recap-meta-line:not(:empty)::before {
    content: ' / ';
  }
}

/* ----- grey subtotal bar -----
 * Slim full-width bar that closes each section. Sits flush with the
 * preceding rows so the bar reads as the row's total. */
.vcc-recap-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 12px;
  padding: 15px;
  background: #eaeaea;
  font-size: 1rem;
}
.vcc-recap-subtotal-label {
  font-weight: 700;
  color: #2A2A2A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-recap-subtotal-value {
  font-weight: 700;
  color: #2A2A2A;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-recap-subtotal--loading .vcc-recap-subtotal-label,
.vcc-recap-subtotal--loading .vcc-recap-subtotal-value {
  color: #8C8C8C;
  font-weight: 500;
}
.vcc-recap-subtotal--custom,
.vcc-recap-subtotal--fallback {
  background: #fdf4ee;
}
/* Mobile: stack the label above the value (no horizontal squeeze on a
 * narrow viewport) and ease both to font-weight 500 — the bold 700
 * reads too heavy on small text. */
@media (max-width: 767.98px) {
  .vcc-recap-subtotal {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  /* Label keeps its bold weight; value drops to 500 so the
   * label-on-top / value-underneath reads with a clear hierarchy. */
  .vcc-recap-subtotal-value {
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

.vcc-recap-subtotal--custom .vcc-recap-subtotal-label,
.vcc-recap-subtotal--fallback .vcc-recap-subtotal-label {
  color: #C49E60;
}

/* ================== Installation section ================== */
/* Breakdown card — frames the line list with a thin border, populated
 * by JS in the "range" quote state. The heading reads as
 * "Price estimation for <property sentence>", followed by the
 * grouped lines. */
.vcc-overview-install-card {
  margin-bottom: 12px;
  padding: 22px 24px;
  border: 1px solid #dbdadb;
  background: #fff;
}
.vcc-overview-install-card[hidden] { display: none; }
.vcc-overview-install-card-title {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2A2A2A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-overview-install-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vcc-overview-install-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 5px 0;
  font-size: 1rem;
  color: #2A2A2A;
}
.vcc-overview-install-line-name {
  flex: 1 1 auto;
}
.vcc-overview-install-line-qty {
  flex: 0 0 auto;
  color: #2A2A2A;
  white-space: nowrap;
}
/* Child-category heading (Preparation, Digging, …) — bold, slight
 * top margin to separate from the previous group, no transform. */
.vcc-overview-install-lines-heading {
  display: block;
  margin: 18px 0 4px;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #2A2A2A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-overview-install-lines-heading:first-child {
  margin-top: 0;
}

/* ================== Your details ================== */
.vcc-recap-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 25px;
}
@media (max-width: 767.98px) {
  .vcc-recap-details-grid { grid-template-columns: 1fr; gap: 18px; }
}
.vcc-recap-details-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2A2A2A;
  margin: 0 0 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-recap-details-body {
  font-size: 0.98rem;
  color: #2A2A2A;
  line-height: 1.5;
}
.vcc-recap-details-body p { margin: 0; }

/* ================== Totals ================== */
.vcc-recap-totals {
  margin-bottom: 30px;
}
.vcc-recap-total {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 1rem;
  color: #2A2A2A;
}
.vcc-recap-total-label {
  font-weight: 300;
  font-size: 1.3rem;
  color: #2A2A2A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-recap-total-value {
  font-weight: 300;
  white-space: nowrap;
  color: #2A2A2A;
  font-size: 1.3rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-recap-total--main .vcc-recap-total-label,
.vcc-recap-total--main .vcc-recap-total-value {
  font-weight: 700;
}

/* ================== Actions row ================== */
/* Inherits .vcc-inquiry-actions space-between behaviour from inquiry.css —
 * here we only need to keep the bottom margin. */
.vcc-overview-page .vcc-inquiry-actions {
  margin-bottom: 40px;
}
/* Right-side CTA group — keeps "Get definitive quote" + "Place order"
 * paired together while .vcc-inquiry-back stays flexed to the left
 * (via .vcc-inquiry-actions' space-between inherited from inquiry.css). */
.vcc-overview-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
}
.vcc-overview-quotation { text-transform: uppercase; }
/* VAT line sits one blank line below the address block so it reads as
 * a separate billing identifier rather than another address line.
 * Compound selector to beat the generic `.vcc-recap-details-body p { margin: 0 }`
 * reset on specificity (otherwise the address rule wins and the margin
 * gets stripped). */
.vcc-recap-details-body p.vcc-recap-details-vat {
  margin-top: 1em;
}

/* ================== Mobile actions layout ==================
 * Below the inquiry-page breakpoint, stack all three buttons
 * full-width — visual order top → bottom: Place order, Get definitive
 * quote, Back. Mirrors the e-commerce convention ("primary CTA at the
 * top, escape hatch at the bottom"). DOM order stays: Back, then
 * .vcc-overview-cta-group with [GetQuote, PlaceOrder] — we use
 * column-reverse on both wrappers to flip it visually without losing
 * the desktop horizontal layout. */
@media (max-width: 767px) {
  .vcc-overview-page .vcc-inquiry-actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
  }
  .vcc-overview-cta-group {
    flex-direction: column-reverse;
    width: 100%;
    gap: 12px;
  }
  .vcc-overview-page .vcc-inquiry-actions .btn {
    width: 100%;
    justify-content: center;
    /* Strip the desktop-only left/right padding asymmetry that's there
       for icon spacing — on mobile the text is centred so the padding
       is symmetrical. */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
/* Quotation CTA states — driven by JS adding/removing is-loading /
 * is-success / is-error. The label text comes from data-label-* on
 * the <button>, swapped in by overview.js. */
.vcc-overview-quotation.is-loading {
  opacity: 0.7;
  cursor: progress;
}
.vcc-overview-quotation.is-success {
  background: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
  cursor: default;
}
.vcc-overview-quotation.is-success .icon-arrow-right { display: none; }
.vcc-overview-quotation.is-error {
  background: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}