/* ====================
C5101 v4 — outage status chip + details modal
Loaded alongside component/css/c5101/accounts_payments.css (shared v2/v3/v4
base). Design source: Figma file tNuAa9CBhSJdLTSEBzssg9, node 5461-1471
(pills), 5461-1266/1361 (modal), 5461-1391/1411/1431/1451 (progress-indicator
states).
==================== */

:root {
  --ap-outage-red: #e10101;
  --ap-outage-red-hover: #c60000;
  --ap-outage-orange: #f97b06;
  --ap-outage-orange-hover: #d85504;
  --ap-outage-yellow: #f9a606;
  --ap-outage-yellow-hover: #d77903;
  --ap-outage-green: #76a84f;
  --ap-outage-green-hover: #236817;
  /* Tailwind grey-03 - site-wide grey that keeps AA contrast with the chip's white text. */
  --ap-outage-grey: #707070;
}

.ap__outage-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background-color: var(--ap-outage-green);
  cursor: default;
}

.ap__account-header .ap__outage-chip {
  margin-left: auto;
}

.ap__outage-chip-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: normal;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
}

.ap__outage-chip-chevron {
  transform: rotate(-90deg);
  flex-shrink: 0;
}

.ap__outage-chip--reported,
.ap__outage-chip--en-route,
.ap__outage-chip--repairing,
.ap__outage-chip--restored {
  cursor: pointer;
}

.ap__outage-chip--reported {
  background-color: var(--ap-outage-red);
}

.ap__outage-chip--reported:hover {
  background-color: var(--ap-outage-red-hover);
}

.ap__outage-chip--en-route {
  background-color: var(--ap-outage-orange);
}

.ap__outage-chip--en-route:hover {
  background-color: var(--ap-outage-orange-hover);
}

.ap__outage-chip--repairing {
  background-color: var(--ap-outage-yellow);
}

.ap__outage-chip--repairing:hover {
  background-color: var(--ap-outage-yellow-hover);
}

.ap__outage-chip--restored,
.ap__outage-chip--normal {
  background-color: var(--ap-outage-green);
}

.ap__outage-chip--restored:hover {
  background-color: var(--ap-outage-green-hover);
}

/* Service-off account (`is_service_on` falsey) - shows `account_status_label`.
Not clickable, no chevron, so no :hover/cursor rule. */
.ap__outage-chip--inactive {
  background-color: var(--ap-outage-grey);
}

/* The header's 4px bottom accent is status-colored, not type-colored (Figma node 5461-1108: a
FIBER card in REPAIRING shows orange, not fiber blue), so it follows whichever
chip that element contains. :not(.cp__hide) keeps a hidden chip (outage status
disabled) from overriding the default .ap__energy/.ap__fiber color. */
:is(.ap__energy, .ap__fiber):has(.ap__outage-chip--normal:not(.cp__hide)),
:is(.ap__energy, .ap__fiber):has(.ap__outage-chip--restored:not(.cp__hide)) {
  border-bottom-color: var(--ap-outage-green);
}

:is(.ap__energy, .ap__fiber):has(.ap__outage-chip--reported:not(.cp__hide)) {
  border-bottom-color: var(--ap-outage-red);
}

:is(.ap__energy, .ap__fiber):has(.ap__outage-chip--inactive:not(.cp__hide)) {
  border-bottom-color: var(--ap-outage-grey);
}

:is(.ap__energy, .ap__fiber):has(.ap__outage-chip--en-route:not(.cp__hide)) {
  border-bottom-color: var(--ap-outage-orange);
}

:is(.ap__energy, .ap__fiber):has(.ap__outage-chip--repairing:not(.cp__hide)) {
  border-bottom-color: var(--ap-outage-yellow);
}

/* Outage details modal — narrower than the shared 720px .cp__modal default. */
.cp__modal--outage-details {
  max-width: 453px;
}

.ap__outage-modal__content {
  gap: 16px;
}

/* The shared .cp__modal__content sets pointer-events: none, which would
   swallow clicks on the unlink modal's Cancel/Unlink buttons. */
.cp__modal--unlink-account .cp__modal__content {
  pointer-events: auto;
}

.ap__outage-modal__title {
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  color: #0d123d;
}

/* Fixed width, not 100%: the background/fill assets are a fixed-geometry
   221px track (bump centers at x=16/79/142/205 — evenly spaced), matching
   the Figma source's own w-[220px] (not stretched to the modal's width). The
   icon row below shares this same fixed width so its flex space-between
   spacing lines up with the bumps exactly, instead of spreading across
   whatever width the modal content happens to be. */
.ap__outage-modal__progress {
  position: relative;
  width: 221px;
  height: 32px;
}

.ap__outage-modal__progress-bg {
  position: absolute;
  top: 50%;
  left: 0;
  width: 221px;
  height: 32px;
  transform: translateY(-50%);
}

/* Fill is intentionally NOT pinned to 221px — its own intrinsic width IS the
   progress amount (45/109/177/221px per status), always anchored at the
   left edge. Stretching it would show every status as "fully progressed". */
.ap__outage-modal__progress-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 32px;
  transform: translateY(-50%);
}

.ap__outage-modal__progress-icons {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ap__outage-modal__progress-icon {
  width: 32px;
  height: 32px;
}

.ap__outage-modal__times {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  color: #0d123d;
}

.ap__outage-modal__time-column--right {
  align-items: flex-end;
  text-align: right;
}

.ap__outage-modal__time-label {
  font-family: 'Futura Next', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.ap__outage-modal__time-day {
  font-family: 'Futura Next', sans-serif;
  font-size: 16px;
}

.ap__outage-modal__time-time {
  font-family: 'Futura Next', sans-serif;
  font-weight: 600;
  font-size: 16px;
}

.ap__outage-modal__status-copy {
  font-size: 14px;
  color: #707070;
}

.ap__outage-modal__hr {
  width: 100%;
  border: none;
  border-top: 1px solid #ccc;
}

.ap__outage-modal__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.ap__outage-modal__stat-label {
  font-family: 'Futura Next', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #0d123d;
}

.ap__outage-modal__stat-value {
  font-size: 14px;
  color: #2d2d2d;
}

.ap__carousel-button-container .ap__carousel-back,
.ap__carousel-button-container .ap__carousel-next,
.ap__carousel-button-container .cp__carousel-back,
.ap__carousel-button-container .cp__carousel-next {
  cursor: pointer;
}

/* Card-count breakpoints (Figma 5461-1161/1218/1323/1294):
   >=1130px  3 cards per row (2 accounts: 2 cards + Pay Now card to the right)
   769-1138  2 cards per row (2 accounts: Pay Now card drops below)
   <769      one card at a time in the carousel
   The shared accounts_payments.css switches everything at 1026px, so v4
   overrides the card-count rules here. */

/* 2 accounts: grid cards from 769px up; the .ap__mobile-carousel clones
take over below that. */
.ap__two-cards.ap__card {
  display: none;
}

@media screen and (min-width: 769px) {
  .ap__two-cards.ap__card {
    display: flex;
  }

  .ap__two-cards .ap__mobile-carousel {
    display: none;
  }
}

@media screen and (min-width: 1026px) and (max-width: 1138px) {
  .ap__two-cards.ap__card-wrapper {
    flex-wrap: wrap;
  }

  .ap__two-cards.ap__card {
    width: calc(50% - 32px);
  }

  .ap__two-cards .ap__pay-now-card {
    width: calc(100% - 32px);
    margin-top: 32px;
    border: none;
  }

  .ap__two-cards .ap__pay-now-button-wrapper {
    padding: 0;
  }
}

/* 3 accounts: grid cards only once 3 fit; the 2-per-page carousel covers
769-1138px. */
@media screen and (min-width: 1026px) and (max-width: 1138px) {
  .ap__three-cards.ap__card {
    display: none;
  }

  .ap__three-cards .ap__mobile-carousel {
    display: flex;
  }
}

/* One card wide (single account, or a 1-per-page carousel slide): lay the
content out in a row (account info | bill info | links) on tablets, then
stack it again on phones (Figma 5461-1323 / 5461-1294). A single account
card stays a row up to the 1026px desktop layout. */
@media screen and (min-width: 640px) and (max-width: 768px) {
  .ap__carousel .ap__card-inner-wrapper {
    min-height: 0;
  }

  .ap__carousel .ap__content-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    padding: 32px;
  }

  .ap__carousel .ap__content-wrapper> :is(.ap__account-information, .ap__bill-information, .ap__links_promise_pay) {
    flex: 1 0 0;
    min-width: 160px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
}

@media screen and (min-width: 640px) and (max-width: 1025px) {
  .ap__card-wrapper:not(.ap__two-cards, .ap__three-cards, .ap__multiple-cards)>.ap__card .ap__content-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    padding: 32px;
  }

  .ap__card-wrapper:not(.ap__two-cards, .ap__three-cards, .ap__multiple-cards)>.ap__card .ap__content-wrapper> :is(.ap__account-information, .ap__bill-information, .ap__links_promise_pay) {
    flex: 1 0 0;
    min-width: 160px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* The card wrapper's -8px side margins assume the slide's 8px padding. The
shared file drops that padding to 4px below 425px, which pushes the card's
side borders 4px past the visible area, so keep 8px on the sides. */
@media screen and (max-width: 424px) {
  .ap__carousel-slide {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Equal-height carousel cards. Siema floats each slide's wrapper, so every
slide is only as tall as its own content. A flex track stretches the wrappers
to the tallest slide, and the card fills its slide, with the content area
taking up the extra space so the bottom borders line up. */
.ap__carousel > div {
  display: flex;
}

.ap__carousel > div > div {
  flex-shrink: 0;
}

.ap__carousel .ap__carousel-slide {
  height: 100%;
}

.ap__carousel .ap__card-inner-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ap__carousel .ap__content-wrapper {
  flex-grow: 1;
}

/* The shared file's 70% width (meant for the single wide card) would wrap
the carousel slides' links. */
.ap__multiple-cards .ap__links_promise_pay {
  width: 100%;
}

/* Single account below 1026px: the controller moves Pay Now out of the card
to sit below it (dockSinglePayNowButton). */
.ap__card-wrapper>.ap__account-button-wrapper {
  margin-top: 16px;
}

@media screen and (min-width: 1026px) {
  .ap__pay-now-card .ap__pay-now-button-wrapper.ap__autopay {
    justify-content: space-between;
  }
}