/* See ./product-panel.md for design notes and rationale. */

/* stylelint-disable selector-class-pattern -- EDS BEM */

.product-panel-container,
main > .section.product-panel-container,
main > .section#planschart {
  margin: 0;
  padding: 0;
}

main > .section.product-panel-container > div,
main > .section#planschart > div {
  max-inline-size: none;
  margin: 0;
  padding: 0;
}

.product-panel.block {
  --pp-color-discount: #007644;
  --pp-shadow: 0 4px 40px rgb(0 0 0 / 8%);
  --pp-shadow-featured: 0 4px 20px rgb(15 113 240 / 25%);

  color: var(--nc-color-text-primary);
  font-family: var(--nc-font-family);
  letter-spacing: var(--nc-text-letter-spacing);
}

.product-panel__head {
  margin-block-end: 0;
}

.product-panel__title {
  margin: 0;
  color: var(--nc-color-text-primary);
  font-family: var(--nc-font-family);
  font-size: var(--nc-text-title-44-size);
  font-weight: var(--nc-text-heading-weight);
  letter-spacing: var(--nc-text-letter-spacing);
  line-height: var(--nc-text-title-44-leading);
  text-align: center;
}

.product-panel__carousel {
  position: relative;
  padding-block-start: 15px;
  padding-block-end: 90px;
}

.product-panel__track {
  display: flex;
  column-gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;

  /* pan-y (not none): keeps native touch-scroll swipe working for vertical page scroll while
     leaving horizontal drag to bindCarouselDrag()'s own pointer handling. */
  touch-action: pan-y;
  cursor: grab;

  /* scroll-padding-inline (not padding-inline): insets the scroll-snap alignment box only, so
     the first/last card's own scroll-snap-align: center rest position lands centered without
     a jump-to-snap on load. A real padding-inline here would shrink this flex container's own
     content-box, and .product-panel__item's flex-basis percentage is computed against THAT
     content-box, not the viewport - box-model padding here was silently compounding with the
     item's own percentage (88% of an already-88%-wide content box ≈ 77% of viewport, narrower
     than even the pre-fix width). Half the leftover space (100% - .product-panel__item's 88%),
     on each side. Reset at 768px+, where two cards show side by side and centering a single
     one doesn't apply. */
  scroll-padding-inline: 6%;
}

.product-panel__track--dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.product-panel__track::-webkit-scrollbar {
  display: none;
}

.product-panel__item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 88%;
  flex-direction: column;
  min-inline-size: 0;
  margin-block-start: 16px;
  border-radius: 16px;
  padding: 30px 15px;
  background-color: var(--nc-color-bg-default);
  box-shadow: var(--pp-shadow);

  /* Mobile shows one card at a time with a peek of its neighbor(s) on both sides, matching
     the live reference page's slider - center (not start) is what actually centers the
     active card given .product-panel__track's matching padding-inline. Reset to `start` at
     768px+, where two cards are visible side by side. */
  scroll-snap-align: center;
}

.product-panel__item--featured {
  outline: 2px solid var(--nc-color-link);
  outline-offset: -2px;
  box-shadow: var(--pp-shadow-featured);
}

.product-panel__banner {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: flex;
  justify-content: center;
  inline-size: 100%;
}

.product-panel__banner-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 100px;
  border-radius: 50px;
  padding: 2px 30px;
  background-color: var(--nc-color-link);
  color: var(--nc-color-text-inverse);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  transform: translateY(-50%);
}

.product-panel__top {
  text-align: center;
}

.product-panel__title-link {
  display: block;
}

a.product-panel__title-link:any-link,
a.product-panel__title-link:visited {
  color: inherit;
  text-decoration: none;
}

a.product-panel__title-link:hover {
  color: var(--nc-color-link-hover);
  text-decoration: none;
}

.product-panel__product {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  min-block-size: 26px;
}

.product-panel__tier {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 40px;
}

.product-panel__term-pill {
  display: inline-block;
  box-sizing: border-box;
  min-inline-size: 60px;
  min-block-size: 24px;
  margin-block-start: 15px;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 5px 10px;
  background-color: var(--nc-color-text-primary);
  color: var(--nc-color-text-inverse);
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}

.product-panel__price-row {
  margin: 0;
  margin-block-start: 15px;
  font-size: 14px;
  line-height: 22px;
}

.product-panel__msrp {
  font-weight: 400;
  text-decoration: line-through;
}

.product-panel__discount {
  display: inline-block;
  padding-inline-start: 5px;
  color: var(--pp-color-discount);
  font-weight: 700;
  white-space: nowrap;
}

.product-panel__sale-row {
  margin: 0;
}

.product-panel__sale {
  display: inline-block;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
}

.product-panel__term {
  margin-inline-start: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

.product-panel__buy {
  max-inline-size: 270px;
  margin-block-start: 15px;
  margin-inline: auto;
}

.product-panel__legal {
  margin: 0;
  margin-block-end: 10px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}

/* entitlementNote is richtext (WEBEXP-112379) - its sanitized markup can be a <p>, which
   would otherwise carry the global p { margin-block-* } reset. */
.product-panel__legal p {
  margin: 0;
}

.product-panel__cta {
  margin: 0;
}

.product-panel__cta.button-wrapper {
  margin: 0;
}

.product-panel a.button {
  display: flex;
  inline-size: 100%;
  min-inline-size: 0;
  border-width: var(--nc-border-button-compact);
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 14px;
  line-height: 20px;
}

.product-panel__bottom {
  margin-block-start: 30px;
  text-align: start;
}

.product-panel__features {
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-panel__features li {
  display: block;
  margin: 0;
  margin-block-end: 14px;
  padding-inline-start: 30px;
  background-image: url('/gd-eds-ue/icons/green-check-16x12.svg');
  background-repeat: no-repeat;
  background-position: 0 6px;
  background-size: 16px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.product-panel__features li:last-child {
  margin-block-end: 0;
}

.product-panel__item--featured .product-panel__features li {
  background-image: url('/gd-eds-ue/icons/blue-check.svg');
  background-size: 16px 12px;
}

.product-panel__controls {
  position: absolute;
  inset-block-start: 180px;
  inset-inline: 0;
  pointer-events: none;
}

.product-panel__control {
  position: absolute;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background-color: var(--nc-color-border-disabled);
  color: var(--nc-color-text-inverse);
  font-size: 22px;
  font-weight: 700;
  line-height: 36px;
  cursor: pointer;
  pointer-events: auto;
}

.product-panel__control:hover,
.product-panel__control:focus-visible {
  background-color: #87b8f7;
}

.product-panel__control:disabled {
  display: none;
}

.product-panel__control--prev {
  inset-inline-start: 0;
}

.product-panel__control--next {
  inset-inline-end: 0;
}

.product-panel__bullets {
  position: absolute;
  inset-block-end: 50px;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  column-gap: 12px;
}

.product-panel__bullet {
  inline-size: 12px;
  block-size: 12px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background-color: var(--nc-color-border-disabled);
  cursor: pointer;
}

.product-panel__bullet--active {
  background-color: var(--nc-color-text-primary);
}

@media (width >= 768px) {
  .product-panel__carousel {
    padding-block-start: 90px;
    padding-block-end: 90px;
  }

  .product-panel__track {
    column-gap: 20px;
    scroll-padding-inline: 0;
  }

  .product-panel__item {
    flex: 0 0 45%;
    border-radius: 20px;
    padding: 40px 20px;
    scroll-snap-align: start;
  }

  .product-panel__banner-bar {
    padding: 3px 40px;
    font-size: 12px;
    line-height: 20px;
  }

  .product-panel__price-row {
    font-size: 16px;
    line-height: 24px;
  }

  .product-panel__sale {
    font-size: 36px;
    line-height: 48px;
  }

  .product-panel__term {
    font-size: 16px;
    line-height: 24px;
  }

  .product-panel a.button {
    border-width: var(--nc-border-button);
    border-radius: var(--nc-radius-pill);
    padding: var(--nc-space-button-y) var(--nc-space-button-x);
    font-size: var(--nc-text-button-size);
    line-height: 1;
  }

  .product-panel__legal {
    margin-block-end: 20px;
    font-size: 12px;
    line-height: 16px;
  }

  .product-panel__features li {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (width >= 1022px) {
  .product-panel__track {
    overflow: visible;
    scroll-snap-type: none;
  }

  .product-panel__item {
    flex: 1 1 0;
  }

  .product-panel__controls,
  .product-panel__bullets {
    display: none;
  }
}