/**
 * cgp-price-breakdown.css
 *
 * "Τι περιλαμβάνει η τιμή" (B-249): the price-breakdown block drawn by
 * cgp-price-breakdown.js, on the residential calculator's price card and in
 * each history card's panel, plus the history card's charger note. The
 * block carries the class cgp-pb; where it sits (spacing, dividers, width)
 * is the page's own CSS.
 *
 * Self-contained: its colours and sizes are its own tokens, set on .cgp-pb
 * (the charger note, outside a block, uses the same values), so it
 * looks the same on both pages, whose tokens differ. Every rule below the
 * root is two classes deep, so the pages' resets
 * (.cgp-calculator-residential * { margin: 0; padding: 0 }) and theme
 * styles for h3, ul, li and p cannot override it.
 *
 * Modifiers: cgp-pb--compact, smaller type (history card panels);
 * cgp-pb--price-hidden, no bar and no percentages while the price is
 * hidden (set by the residential page, output.js applyCostBlur()).
 *
 * 1.0.0 (2026-10-16, B-249 Part 3): moved from cgp-calculator-residential.css
 * 1.6.1 (.cgp-res-pb*); classes renamed cgp-pb-*. Each row has the tick
 * campaign quotes used (no bar, no shares, no colours, no price-hidden
 * state: the block is text only). The compact panel and the charger chip
 * are new.
 *
 * 1.1.0 (2026-10-18): the bar, the coloured dot and the percentage per row
 * return for the residential calculator (rows--shares), restored from
 * cgp-calculator-residential.css 1.6.1 with its tones (the action blue in
 * three depths) and the price-hidden state. Rows without shares keep the
 * tick.
 *
 * 1.2.0 (2026-10-18, CGP 0.6.316): the history card's charger chip (a
 * two-part pill, .cgp-pb-chip*) is replaced by .cgp-pb-charger-note, one
 * sentence in the warning colour without a background or border.
 *
 * @package charge-guide-platform
 * @version 1.2.0
 * @date    2026-10-18
 */

.cgp-pb {
  --cgp-pb-ink:         #0F2237;
  --cgp-pb-text-2:      #5C708A;
  --cgp-pb-text-3:      #8E9CAE;
  --cgp-pb-line:        #EDF1F6;
  --cgp-pb-line-strong: #C8D4E2;
  --cgp-pb-tint:        #F4F8FD;
  --cgp-pb-ok:          #2E9A5A;
  --cgp-pb-warn-text:   #97631A;
  --cgp-pb-warn-bg:     #FBF2DF;
  --cgp-pb-warn-border: #EEDCB5;
  --cgp-pb-radius:      12px;
  --cgp-pb-tone-1:      #1F3F99;
  --cgp-pb-tone-2:      #1665D8;
  --cgp-pb-tone-3:      #9DBAF2;
  --cgp-pb-tone-4:      #C8D4E2;
  display:        flex;
  flex-direction: column;
  gap:            16px;
  font-family:    'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.cgp-pb .cgp-pb-heading {
  font-family:    inherit;
  font-size:      17px;
  font-weight:    700;
  line-height:    1.3;
  letter-spacing: -0.005em;
  color:          var(--cgp-pb-ink);
  margin:         0;
  padding:        0;
}

.cgp-pb .cgp-pb-rows {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
}

.cgp-pb .cgp-pb-row {
  margin:                0;
  list-style:            none;
  display:               grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap:            12px;
  align-items:           start;
  padding:               12px 0;
  border-bottom:         1px solid var(--cgp-pb-line);
}
.cgp-pb .cgp-pb-row::before,
.cgp-pb .cgp-pb-row::marker { content: none; }
.cgp-pb .cgp-pb-row:first-child { padding-top: 2px; }
.cgp-pb .cgp-pb-row:last-child  { border-bottom: 0; padding-bottom: 0; }

.cgp-pb .cgp-pb-tick {
  width:         18px;
  height:        18px;
  margin-top:    1px;
  border-radius: 50%;
  background:    var(--cgp-pb-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12 L10 17 L20 7'/%3E%3C/svg%3E") center/10px no-repeat;
}

.cgp-pb .cgp-pb-text {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
}

.cgp-pb .cgp-pb-label {
  font-size:   14.5px;
  font-weight: 600;
  color:       var(--cgp-pb-ink);
  line-height: 1.35;
}

.cgp-pb .cgp-pb-desc {
  font-size:   13px;
  line-height: 1.45;
  color:       var(--cgp-pb-text-2);
}

/* Shares (residential calculator): a bar, then a coloured dot and the
   percentage per row instead of the tick. */
.cgp-pb .cgp-pb-bar {
  display:       flex;
  gap:           3px;
  height:        10px;
  border-radius: 5px;
  overflow:      hidden;
}

.cgp-pb .cgp-pb-seg { display: block; height: 100%; min-width: 3px; }

.cgp-pb .cgp-pb-tone-1 { background: var(--cgp-pb-tone-1); }
.cgp-pb .cgp-pb-tone-2 { background: var(--cgp-pb-tone-2); }
.cgp-pb .cgp-pb-tone-3 { background: var(--cgp-pb-tone-3); }
.cgp-pb .cgp-pb-tone-4,
.cgp-pb .cgp-pb-tone-5,
.cgp-pb .cgp-pb-tone-6 { background: var(--cgp-pb-tone-4); }

.cgp-pb .cgp-pb-rows--shares .cgp-pb-row { grid-template-columns: 12px minmax(0, 1fr) auto; }

.cgp-pb .cgp-pb-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  margin-top:    5px;
}

.cgp-pb .cgp-pb-pct {
  font-size:            14.5px;
  font-weight:          700;
  color:                var(--cgp-pb-ink);
  text-align:           right;
  min-width:            40px;
  font-variant-numeric: tabular-nums;
  line-height:          1.35;
}

/* Price hidden: no bar and no percentages; the rows stay. */
.cgp-pb--price-hidden .cgp-pb-bar,
.cgp-pb--price-hidden .cgp-pb-pct { display: none; }
.cgp-pb--price-hidden .cgp-pb-rows--shares .cgp-pb-row { grid-template-columns: 12px minmax(0, 1fr); }

/* Charger slot */
.cgp-pb .cgp-pb-charger {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       14px 16px;
  border:        1.5px dashed var(--cgp-pb-line-strong);
  border-radius: var(--cgp-pb-radius);
  background:    var(--cgp-pb-tint);
}

.cgp-pb .cgp-pb-charger-icon {
  width:           52px;
  height:          52px;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.cgp-pb .cgp-pb-charger-svg { display: block; width: 100%; height: 100%; }

.cgp-pb .cgp-pb-charger-body {
  flex:           1 1 auto;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            3px;
}

.cgp-pb .cgp-pb-charger-head {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         6px 10px;
}

.cgp-pb .cgp-pb-charger-title {
  font-size:   15px;
  font-weight: 700;
  color:       var(--cgp-pb-ink);
}

.cgp-pb .cgp-pb-badge {
  font-size:     11.5px;
  font-weight:   600;
  line-height:   1.3;
  padding:       3px 10px;
  border-radius: 9999px;
  background:    var(--cgp-pb-warn-bg);
  border:        1px solid var(--cgp-pb-warn-border);
  color:         var(--cgp-pb-warn-text);
}

.cgp-pb .cgp-pb-charger-text {
  font-size:   13px;
  line-height: 1.45;
  color:       var(--cgp-pb-text-2);
}

.cgp-pb .cgp-pb-footnote {
  font-size:   11.5px;
  line-height: 1.55;
  color:       var(--cgp-pb-text-3);
  margin:      0;
  padding:     0;
}

/* Charger note: one sentence in the warning colour, no pill (a history
   card's price column; sized like the card's "εντός 7 ημερών" line).
   data-status carries the charger's status: a later status that needs a
   different look (a pill, another colour) gets its own rule then. */
.cgp-pb-charger-note {
  display:     block;
  color:       #97631A;
  font-family: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:   12.5px;
  font-weight: 500;
  line-height: 1.35;
}

/* Compact (history card panels). */
.cgp-pb--compact { gap: 12px; }
.cgp-pb--compact .cgp-pb-row { padding: 9px 0; }
.cgp-pb--compact .cgp-pb-label { font-size: 13.5px; }
.cgp-pb--compact .cgp-pb-desc { font-size: 12.5px; }
.cgp-pb--compact .cgp-pb-footnote { font-size: 11px; }

@media (max-width: 540px) {
  .cgp-pb .cgp-pb-charger { align-items: flex-start; padding: 12px 14px; }
  .cgp-pb .cgp-pb-charger-icon { width: 44px; height: 44px; }
  .cgp-pb .cgp-pb-charger-head { flex-direction: column; align-items: flex-start; }
}