/* -------------------------------------------------------- */
/* 🔹 Electricity Price Page                                */
/* -------------------------------------------------------- */
/* Feature-specific layout for the electricity price view.   */
/* The page is a stack of full-width sections — the dark hero */
/* then alternating light/tinted bands (map, upsell, FAQ).    */

/* Dark hero — full-width navy behind the title, area selector, current
   price and chart. Price and chart sit in white cards so their colours
   stay legible; the selector and disclaimer read light on the navy */
.electricity-price-hero {
  background-color: var(--color-hero-bg);
  padding-block: var(--space-xxxl);
}

.electricity-price-hero__inner {
  width: 100%;
  max-width: var(--max-content-width);
  margin-inline: auto;
  padding-inline: var(--space-l);
}

.electricity-price-hero__title {
  font-size: var(--text-headline-medium);
  font-weight: var(--text-title-weight);
  color: var(--color-on-hero);
  margin: 0 0 var(--space-l);
}

.electricity-price-hero #current-price {
  margin-bottom: var(--space-l);
  padding: var(--space-l);
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

/* Segmented control on the navy — translucent track, selected cell a
   solid light pill. Scoped to the hero so the base selector is untouched */
.electricity-price-hero .discrete-selector {
  padding: var(--space-xs);
  background-color: rgba(252, 252, 251, 0.10);
  border-radius: var(--radius-medium);
}

.electricity-price-hero .discrete-selector__cell {
  height: 40px;
  border: 0;
  border-radius: var(--radius-small);
  color: var(--color-on-hero-variant);
  font-weight: 500;
}

.electricity-price-hero a.discrete-selector__cell:hover {
  background-color: rgba(252, 252, 251, 0.08);
}

.electricity-price-hero .discrete-selector__cell--selected {
  background-color: var(--color-on-hero);
  color: var(--color-hero-bg);
  font-weight: 600;
}

.electricity-price-hero .electricity-price-page__disclaimer {
  color: var(--color-on-hero-variant);
}

@media (max-width: 767px) {
  .electricity-price-hero__inner {
    padding-inline: var(--space-m);
  }
}

.electricity-price-page__area-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-l);
}

.electricity-price-page__chart-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.electricity-price-page__chart-card > .tab-selector {
  padding: 0 var(--space-l);
}

.electricity-price-page__chart-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-sections);
}

.electricity-price-page__chart-section {
  padding: 0 var(--space-l);
}

/* Full-width bands below the hero — alternating light / tinted */
.electricity-price-band {
  padding-block: var(--website-section-spacing);
}

.electricity-price-band--tint {
  background-color: var(--color-primary-container);
}

.electricity-price-page__disclaimer {
  display: block;
  text-align: center;
  font-size: var(--text-body-small);
  color: var(--color-on-surface-variant);
  margin-top: var(--space-l);
}


/* -------------------------------------------------------- */
/* 🔹 Mobile — match Flutter screenPadding (spaceM = 12px)  */
/* -------------------------------------------------------- */

@media (max-width: 767px) {
  .electricity-price-page__chart-card > .tab-selector,
  .electricity-price-page__chart-section {
    padding-inline: 0;
  }

  .electricity-price-page__chart-body {
    padding-bottom: var(--space-m);
  }
}


/* -------------------------------------------------------- */
/* 🔹 SEO — price areas explainer (hub page)                */
/* -------------------------------------------------------- */

.area-info {
  padding-block: var(--website-section-spacing);
  background-color: var(--color-primary-container);
}

.area-info .section-title {
  margin-bottom: var(--space-l);
  text-align: center;
}

.area-info__text {
  font-size: var(--text-body-large);
  line-height: 1.7;
  color: var(--color-on-surface-variant);
  margin: 0 0 var(--space-m);
}

.area-info__text:last-child {
  margin-bottom: 0;
}