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

/* Section wrappers + headings */
.product-hero-plans-wrapper {
  margin-block-start: var(--ll-space-7);
}

.product-hero-plans {
  --pp-card-bg-selected: var(--ll-color-bg-default);
  --pp-card-border-selected: var(--ll-color-border-on-brand);
  --pp-discount-bg: rgb(138 111 168 / 25%);
  --pp-cta-radius: 100px;
}

.product-hero-plans__root {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-5);
}

.product-hero-plans__section {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-4);
}

.product-hero-plans__checkout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ll-space-5);
}

.product-hero-plans__chrome {
  margin: 0;
}

.product-hero-plans__heading {
  margin: 0;
  color: var(--ll-color-text-secondary); /* Figma: Color/Content/secondary #161616 */
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
}

.product-hero-plans__chrome p {
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  font-weight: var(--ll-text-body-base-weight);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
}

/* Plan picker */
.product-hero-plans__plan-options {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--ll-space-4);
}

.product-hero-plans__plan-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--ll-space-4) var(--ll-space-5);
  border-radius: var(--ll-radius-md-mobile);
  outline: 1px solid var(--ll-color-border-disabled);
  outline-offset: -1px;
  background: var(--ll-color-bg-muted);
  color: var(--ll-color-text-secondary);
  text-align: left;
  cursor: pointer;
  transition:
    outline-color var(--ll-motion-hover-duration) var(--ll-motion-hover-easing),
    background-color var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

@media (hover: hover) {
  .product-hero-plans__plan-card:hover {
    outline-color: var(--pp-card-border-selected);
  }
}

.product-hero-plans__plan-card:has(> input:checked) {
  outline-width: 2px;
  outline-color: var(--pp-card-border-selected);
  outline-offset: -2px;
  background: var(--pp-card-bg-selected);
}

.product-hero-plans__plan-input,
.product-hero-plans__billing-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.product-hero-plans__plan-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-bottom: var(--ll-space-3);
}

.product-hero-plans__plan-card:has(> input:checked) .product-hero-plans__plan-icon {
  color: var(--ll-color-text-primary);
}

.product-hero-plans__plan-icon-glyph {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentcolor;
  mask: var(--product-hero-plans-plan-icon-url) center / contain no-repeat;
}

.product-hero-plans__plan-icon-glyph img {
  display: none;
}

.product-hero-plans__plan-name {
  display: block;
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
}

.product-hero-plans__plan-tag {
  display: block;
  margin: 0;
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  font-weight: var(--ll-text-body-xs-weight);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
}

.product-hero-plans__plan-tag p {
  margin: 0;
}

/* Billing picker */
.product-hero-plans__billing-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ll-space-4);
}

.product-hero-plans__billing-card {
  position: relative;
  display: none;
  flex-direction: column;
  gap: 0;
  padding: var(--ll-space-4) var(--ll-space-5);
  border-radius: var(--ll-radius-md-mobile);
  outline: 1px solid var(--ll-color-border-disabled);
  outline-offset: -1px;
  background: var(--ll-color-bg-muted);
  color: var(--ll-color-text-secondary);
  text-align: left;
  cursor: pointer;
  transition:
    outline-color var(--ll-motion-hover-duration) var(--ll-motion-hover-easing),
    background-color var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

@media (hover: hover) {
  .product-hero-plans__billing-card:hover {
    outline-color: var(--pp-card-border-selected);
  }
}

.product-hero-plans__billing-label {
  display: block;
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
}

.product-hero-plans__billing-price {
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
}

.product-hero-plans__billing-price p {
  display: inline;
  margin: 0;
}

.product-hero-plans__billing-price :is(.dp-currency, .dp-suffix),
.product-hero-plans__billing-price > p > sub {
  margin: 0 1px;
  vertical-align: baseline;
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
}

.product-hero-plans__billing-price :is(del, s, strike) {
  margin-left: var(--ll-space-2);
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  font-weight: var(--ll-text-body-xs-weight);
  letter-spacing: normal;
  text-decoration: line-through;
}

.product-hero-plans__billing-price a,
.product-hero-plans__billing-conditions a,
.product-hero-plans__summary a {
  color: inherit;
  text-decoration: none;
}

.product-hero-plans__billing-conditions {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-1);
  margin: 0;
}

.product-hero-plans__billing-variant {
  display: contents;
}

.product-hero-plans__billing-variant[hidden] {
  display: none;
}

.product-hero-plans__billing-pay-today {
  display: block;
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
}

.product-hero-plans__billing-pay-today p {
  display: inline;
  margin: 0;
}

.product-hero-plans__billing-pay-today :is(.dp-currency, .dp-suffix),
.product-hero-plans__billing-pay-today > p > sub {
  margin: 0 1px;
  vertical-align: baseline;
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
}

.product-hero-plans__billing-price .dp-currency,
.product-hero-plans__billing-price > p > sub:first-of-type,
.product-hero-plans__billing-pay-today .dp-currency,
.product-hero-plans__billing-pay-today > p > sub:first-of-type {
  font-weight: var(--ds-font-weight-light);
}

.product-hero-plans__billing-renewal {
  display: block;
  margin: 0;
  color: var(--ll-color-highlight-iota);
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  font-weight: var(--ll-text-body-xs-weight);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
}

.product-hero-plans__billing-renewal p {
  display: inline;
  margin: 0;
}

.product-hero-plans__billing-discount {
  position: absolute;
  top: calc(var(--ll-space-4) + 2px);
  right: var(--ll-space-5);
  padding: 0 var(--ll-space-3);
  border-radius: 10px;
  background: var(--pp-discount-bg);
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-xs-family);
  font-size: 10px;
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: -0.3px;
}

.product-hero-plans__billing-discount p {
  margin: 0;
}

/* Your price summary */
.product-hero-plans__summary {
  display: none;
  align-items: baseline;
  justify-content: center;
  gap: var(--ll-space-2);
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
  text-align: center;
}

.product-hero-plans__summary p {
  display: inline;
  margin: 0;
}

.product-hero-plans__summary .dp-element {
  font-family: var(--ll-text-h5-family);
  font-size: var(--ll-text-h5-size);
  font-weight: var(--ds-font-weight-medium); /* Figma: PRIMARY/H5/Medium = 500, not LL's default semibold */
  line-height: var(--ll-text-h5-line-height);
  letter-spacing: var(--ll-text-h5-letter-spacing);
}

.product-hero-plans__summary .dp-currency,
.product-hero-plans__summary > p > sub:first-of-type {
  margin: 0 1px;
  vertical-align: baseline;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-lg-family);
  font-size: var(--ll-text-body-lg-size);
  font-weight: var(--ds-font-weight-light);
  line-height: var(--ll-text-body-lg-line-height);
  letter-spacing: var(--ll-text-body-lg-letter-spacing);
}

.product-hero-plans__summary .dp-suffix,
.product-hero-plans__summary > p > sub:not(:first-of-type) {
  margin: 0 1px;
  vertical-align: baseline;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: normal;
}

.product-hero-plans__summary :is(del, s, strike) {
  margin-left: var(--ll-space-3);
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  font-weight: var(--ll-text-body-sm-weight);
  letter-spacing: normal;
  text-decoration: line-through;
}

/* CTAs */
.product-hero-plans__cta {
  display: none;
  justify-content: center;
  align-items: center;
  gap: var(--ll-space-2);
  width: 100%;
  box-sizing: border-box;
  padding: var(--ll-space-4) var(--ll-space-6);
  border: 0;
  border-radius: var(--pp-cta-radius);
  background: var(--ll-color-bg-cta-gradient);
  color: var(--ll-color-text-inverse);
  font-family: var(--ll-text-button-sm-family);
  font-size: var(--ll-text-button-sm-size);
  font-weight: var(--ll-text-button-sm-weight);
  line-height: var(--ll-text-button-sm-line-height);
  letter-spacing: var(--ll-text-button-sm-letter-spacing);
  text-align: center;
  text-decoration: none;
  transition: filter var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

.product-hero-plans__cta:hover,
.product-hero-plans__cta:focus-visible {
  background: var(--ll-color-bg-cta-gradient);
  color: var(--ll-color-text-inverse);
  filter: brightness(0.92);
}

.product-hero-plans__cta-icon {
  flex: 0 0 auto;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentcolor;
  mask: var(--product-hero-plans-cta-icon-url) center / contain no-repeat;
}

.product-hero-plans__cta-icon img {
  display: none;
}

/* Entitlement notes */
.product-hero-plans__notes {
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  font-weight: var(--ll-text-body-xs-weight);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  text-align: center;
}

.product-hero-plans__notes p {
  margin: 0;
}

/* Focus visibility (WCAG 2.4.7) */
.product-hero-plans__plan-card:has(> input:focus-visible),
.product-hero-plans__billing-card:has(> input:focus-visible),
.product-hero-plans__cta:focus-visible {
  outline: 2px solid var(--ll-color-focus-ring);
  outline-offset: 2px;
}

/* Display mode toggles */
.product-hero-plans__root[data-display-mode="plans-only"] .product-hero-plans__section--billing {
  display: none;
}

.product-hero-plans__root[data-display-mode="billings-only"] .product-hero-plans__section--plans {
  display: none;
}

.product-hero-plans__billing-card--annual .product-hero-plans__billing-price .dp-currency,
.product-hero-plans__billing-card--annual .product-hero-plans__billing-price > p > sub:first-of-type,
.product-hero-plans__billing-card--annual .product-hero-plans__billing-pay-today .dp-currency,
.product-hero-plans__billing-card--annual .product-hero-plans__billing-pay-today > p > sub:first-of-type {
  line-height: 16px;
}

/* LG/XL */
@media (width >= 1024px) {
  .product-hero-plans-wrapper {
    margin-block-start: var(--ll-space-5);
  }

  .product-hero-plans__root {
    gap: var(--ll-space-4);
  }

  .product-hero-plans__heading {
    font-family: var(--ll-text-body-lg-family);
    font-size: var(--ll-text-body-lg-size);
    line-height: var(--ll-text-body-lg-line-height);
    letter-spacing: var(--ll-text-body-lg-letter-spacing);
  }

  .product-hero-plans__plan-card {
    padding: var(--ll-space-3) var(--ll-space-4);
    border-radius: var(--ll-radius-md-desktop);
  }

  .product-hero-plans__plan-icon {
    margin-bottom: var(--ll-space-2);
  }

  .product-hero-plans__billing-card {
    padding: var(--ll-space-3) var(--ll-space-4);
    border-radius: var(--ll-radius-md-desktop);
  }

  .product-hero-plans__billing-discount {
    top: calc(var(--ll-space-3) + 2px);
    right: var(--ll-space-4);
    padding: 1px var(--ll-space-3);
    border-radius: 11px;
    font-size: var(--ll-text-body-xs-size);
    line-height: var(--ll-text-body-xs-line-height);
    letter-spacing: var(--ll-text-body-xs-letter-spacing);
  }

  .product-hero-plans__summary {
    font-family: var(--ll-text-body-base-family);
    font-size: var(--ll-text-body-base-size);
    line-height: var(--ll-text-body-base-line-height);
    letter-spacing: var(--ll-text-body-base-letter-spacing);
  }

  .product-hero-plans__summary .dp-currency,
  .product-hero-plans__summary > p > sub:first-of-type {
    font-family: var(--ll-text-body-xl-family);
    font-size: var(--ll-text-body-xl-size);
    line-height: var(--ll-text-body-xl-line-height);
    letter-spacing: var(--ll-text-body-xl-letter-spacing);
  }

  .product-hero-plans__cta {
    padding: var(--ll-space-5) var(--ll-space-8);
    font-family: var(--ll-text-button-lg-family);
    font-size: var(--ll-text-button-lg-size);
    font-weight: var(--ll-text-button-lg-weight);
    line-height: var(--ll-text-button-lg-line-height);
    letter-spacing: var(--ll-text-button-lg-letter-spacing);
  }

  .product-hero-plans__cta-icon {
    width: 24px;
    height: 24px;
  }
}

.product-hero-plans > .product-hero-plans__root {
  display: flex;
}