/* Extended Support Manager — product page period selector + cart presentation.
   WP15: selector moved into the add-to-cart row (displayProductActions), cards
   on the Champion skin, cart support line restyled as an attached sub-row.    */

/* ------------------------------------------------------------------ */
/* Product page: period selector                                       */
/* ------------------------------------------------------------------ */

/* The selector renders inside .product__actions-qty-add (a wrapping flex
   row). Full width + order:-1 slots it ABOVE the qty + add-to-cart pair,
   directly under the availability line. */
.product__actions-qty-add #esm-selector {
  flex: 1 1 100%;
  order: -1;
  margin: 0 0 .35rem;
}

.esm-selector__title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pc-muted, #6b7280);
  margin-bottom: .5rem;
}

.esm-selector .esm-card {
  cursor: pointer;
  padding: .65rem .5rem;
  border: 1.5px solid var(--pc-line-soft, #e6e3f0);
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
  margin-bottom: 0;
  user-select: none;
}

.esm-selector .esm-card:hover {
  border-color: #d9b9cf;
}

.esm-selector .esm-card--selected {
  border-color: var(--pc-magenta, #E80D6E) !important;
  background-color: var(--pc-blush, #FBE9F1);
  box-shadow: none;
}

.esm-selector .esm-card__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.esm-selector .esm-card__months {
  font-size: .9375rem;
  color: var(--pc-ink, #23204F);
}

.esm-selector .esm-card__price {
  font-size: .8125rem;
  color: var(--pc-muted, #556);
}

.esm-selector .esm-card--selected .esm-card__price {
  color: var(--pc-magenta, #E80D6E);
  font-weight: 600;
}

/* kept for quickview / any theme still rendering the running total */
.esm-final-price {
  font-size: 1rem;
}

.esm-final-price__value {
  font-size: 1.15rem;
}

/* Main price when a paid period is selected (module output through the
   theme's custom_price slot) — the note explains why the figure grew. */
/* WP16c: discount row inside the price takeover - full row above the
   figure, matching the theme's own discount line */
.esm-price__discount-row {
  width: 100%;
  margin: 0 0 .1rem;
}

.esm-price__note {
  display: block;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--pc-muted, #6b7280);
}

/* ------------------------------------------------------------------ */
/* Chips (cart lines) — own class, no bootstrap bg-* utilities: the    */
/* theme maps those to layered !important colors we cannot restyle.    */
/* ------------------------------------------------------------------ */

.esm-chip {
  display: inline-block;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: var(--pc-blush, #FBE9F1);
  color: var(--pc-ink, #23204F);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: normal;
}

.esm-chip--muted {
  background: var(--pc-lilac, #EEECF7);
  font-weight: 500;
}

/* ------------------------------------------------------------------ */
/* Cart / checkout: a support line belongs to the product above it     */
/* ------------------------------------------------------------------ */

.esm-line--has-support {
  border-bottom: 0 !important;
  padding-bottom: .4rem !important;
}

.esm-line--support {
  font-size: .9375em;
}

/* WP16: the indented sub-row treatment applies only when the script paired
   the line with its parent (same product AND same duration). A standalone
   support line - a renewal, or a parent it could not match - stays a
   normal-looking cart item with its identifying chip visible. */
.esm-line--nested {
  position: relative;
  margin-left: 3.25rem;
  padding: .65rem .9rem .8rem !important;
  border-top: 0 !important;
  border-bottom: 0 !important; /* the next item brings its own top border */
  border-left: 3px solid rgba(232, 13, 110, .35);
  border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, .65);
}

/* the support line carries no image, stock wording or quantity stepper of
   its own: it is an option on the product above, not a separate purchase */
.esm-line--nested .product-line__image,
.esm-line--nested .product-line__item--availability,
.esm-line--nested .product-line__quantity-button,
.esm-line--nested .quantity-button {
  display: none !important;
}

.esm-line--support .product-line__title {
  font-size: .9rem;
  font-weight: 500;
  color: var(--pc-muted, #6b7280);
}

.esm-line--support .product-line__item--info {
  font-size: .8125rem;
  color: var(--pc-muted, #6b7280);
}

/* nested under its parent, the "Support option for:" chip is redundant */
.esm-line--nested .esm-cart-badge {
  display: none;
}

/* parent line: keep Remove and "Change support period" apart */
.esm-line--parent .product-line__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1.1rem;
}

.esm-change-period {
  font-size: .8125rem;
  color: var(--pc-muted, #6b7280);
  text-decoration: underline;
}

.esm-change-period:hover,
.esm-change-period:focus {
  color: var(--pc-magenta, #E80D6E);
}

/* WP16: the line-key customization also renders core's 'Product
   customization' modal trigger on the cart line - redundant next to the
   period chip and the inline selector, so it is hidden on parent lines.
   Real personalizations (e.g. the GDPR Domain) live on lines the module
   does not mark, and order pages keep the record untouched. */
.esm-line--keyed .product-customization-modal__content {
  display: none;
}

/* WP16: inline period selector on the cart line (posts to changeperiod) */
.esm-period-form {
  display: inline-flex;
  align-items: center;
}

.esm-period-form__label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: .8125rem;
  color: var(--pc-muted, #6b7280);
}

.esm-period-form__select {
  appearance: auto;
  max-width: 15rem;
  padding: .2rem 1.6rem .2rem .55rem;
  font-size: .8125rem;
  color: var(--pc-ink, #23204F);
  background-color: #fff;
  border: 1.5px solid var(--pc-line-soft, #E7E2F2);
  border-radius: 9px;
}

.esm-period-form__select:focus {
  border-color: var(--pc-magenta, #E80D6E);
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 13, 110, .12);
}

.esm-summary-marker {
  display: none;
}

@media (max-width: 575.98px) {
  .esm-line--nested {
    margin-left: .75rem;
  }

  /* WP16: the inline period form must be able to shrink on small phones */
  .esm-period-form {
    width: 100%;
  }

  .esm-period-form__label {
    flex-wrap: wrap;
    width: 100%;
  }

  .esm-period-form__select {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* My purchased modules                                               */
/* ------------------------------------------------------------------ */

.esm-account {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.esm-purchase {
  background: #fff;
  border: 1px solid rgba(20, 20, 43, 0.12);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 20, 43, 0.05);
}

.esm-purchase--highlight {
  border-color: #2b6cb0;
  box-shadow: 0 0 0 2px rgba(43, 108, 176, 0.18);
}

.esm-purchase__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.15rem 1.35rem 0.9rem;
}

.esm-purchase__title {
  margin: 0 0 0.2rem;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.esm-purchase__title a {
  color: inherit;
  text-decoration: none;
}

.esm-purchase__title a:hover {
  text-decoration: underline;
}

.esm-purchase__meta {
  margin: 0;
  font-size: 0.8125rem;
  color: #6b7280;
}

.esm-purchase__ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78125rem;
}

.esm-purchase__sep {
  margin: 0 0.15rem;
  opacity: 0.6;
}

/* status pill */
.esm-status {
  flex: none;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  color: #fff;
  background: #6b7280;
}

.esm-status--active {
  background: #1e7d47;
}

.esm-status--expiring {
  background: #b7791f;
}

.esm-status--expired {
  background: #b02a2a;
}

.esm-status--pending {
  background: #2b6cb0;
}

/* start / expires / remaining */
.esm-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.5rem;
  margin: 0;
  padding: 0 1.35rem 1.15rem;
  border-bottom: 1px solid rgba(20, 20, 43, 0.08);
}

.esm-facts__item dt {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.esm-facts__item dd {
  margin: 0.1rem 0 0;
  font-size: 0.9375rem;
}

.esm-facts__strong {
  font-weight: 700;
}

.esm-facts__expired {
  color: #b02a2a;
  font-weight: 600;
}

.esm-purchase__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.esm-contact {
  font-size: 0.8125rem;
  color: #2b6cb0;
  text-decoration: underline;
}

/* downloads */
.esm-downloads {
  padding: 0 1.35rem 1.15rem;
}

.esm-downloads__title {
  margin: 0 0 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.esm-downloads__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.esm-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(20, 20, 43, 0.1);
  border-radius: 0.5rem;
  background: #fbfbfd;
}

.esm-download__compat {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
}

.esm-download__kept {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #e6f6ea;
  color: #1e7d47;
  font-size: 0.6875rem;
  font-weight: 600;
  vertical-align: 1px;
}

.esm-download__meta {
  display: block;
  font-size: 0.8125rem;
  color: #6b7280;
}

.esm-download__changelog {
  margin-top: 0.3rem;
  font-size: 0.8125rem;
}

.esm-download__changelog summary {
  cursor: pointer;
  color: #2b6cb0;
}

.esm-download__btn {
  flex: none;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: #1e7d47;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.esm-download__btn:hover,
.esm-download__btn:focus {
  background: #166138;
  color: #fff;
  text-decoration: none;
}

.esm-downloads__locked,
.esm-downloads__note {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  color: #6b7280;
}

.esm-downloads__locked {
  color: #8f2020;
}

/* expired notice */
.esm-expired {
  padding: 1rem 1.35rem 1.15rem;
  background: #fdf1f1;
  border-top: 1px solid rgba(176, 42, 42, 0.18);
  border-bottom: 1px solid rgba(176, 42, 42, 0.18);
}

.esm-expired__title {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #8f2020;
}

.esm-expired__body {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #5b3535;
}

.esm-expired__cta {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: #b02a2a;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.esm-expired__cta:hover,
.esm-expired__cta:focus {
  background: #8f2020;
  color: #fff;
  text-decoration: none;
}

/* renewal footer */
.esm-extend {
  padding: 1.1rem 1.35rem 1.2rem;
  background: #f7f7fb;
}

.esm-extend__title {
  margin: 0 0 0.7rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.esm-extend__plans {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.esm-plan {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid #2b6cb0;
  border-radius: 999px;
  color: #2b6cb0;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.esm-plan:hover,
.esm-plan:focus {
  background: #2b6cb0;
  color: #fff;
  text-decoration: none;
}

.esm-plan__price {
  font-weight: 700;
}

.esm-extend__note {
  margin: 0.7rem 0 0;
  font-size: 0.8125rem;
  color: #6b7280;
}

.esm-extend--closed {
  background: #f7f7fb;
}

.esm-extend--closed .esm-extend__note {
  margin: 0;
}

.esm-empty {
  padding: 1.25rem;
  background: #fff;
  border: 1px solid rgba(20, 20, 43, 0.12);
  border-radius: 0.75rem;
}

@media (max-width: 575.98px) {
  .esm-facts {
    gap: 0.85rem 1.5rem;
  }

  .esm-plan {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .esm-selector .esm-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.9rem;
  }
}