/**
 * @file
 * Styling for the coupon field, coupon status message, and order-summary
 * total on the Stripe Payment Element subscribe form.
 *
 * Everything here is scoped under #mc-subscribe-element-form (the id Drupal
 * generates for PaymentElementForm's form_id, mc_subscribe_element_form) so
 * nothing leaks onto the classic, non-Stripe subscribe form which shares the
 * .subscribe-form wrapper class.
 *
 * Palette taken from the active theme (abi_masterclass):
 * - #1B263B ($__dark__black)  - navy, used for headings and the emphasised
 *   total.
 * - #0D1B2A ($__darkblue)     - darker navy, used for body copy in the
 *   subscribe widget card.
 * - #F06543 ($__primarycolor) - brand orange, reserved for links/accents
 *   elsewhere on the page; not needed here.
 * - #E0E1DD ($__secondarycolor) - light neutral, used for hairlines/borders.
 * Status colours (success green / error red) are not defined by the theme,
 * so accessible values were chosen to pair with that palette; both text/
 * background combinations below meet WCAG 2.1 AA (>= 4.5:1).
 */

/* -----------------------------------------------------------------------
 * Discount code field + Apply button.
 * Bootstrap's grid already stacks .col-lg-6 / .col-lg-3 to full width below
 * the lg breakpoint, so only alignment and touch-target sizing are needed
 * here.
 * ----------------------------------------------------------------------- */
#mc-subscribe-element-form .mc-coupon-apply-wrapper {
  display: flex;
  align-items: flex-start;
}

#mc-subscribe-element-form #mc-coupon-apply {
  width: 100%;
  min-height: 44px;
}

@media (min-width: 992px) {
  /* Bootstrap's .row stretches both columns to the height of the taller
   * one - the discount-code column, whose height includes the help text
   * below the input. flex-end would then bottom-align Apply to the
   * bottom of that help text, not to the input. Push Apply down by the
   * label's height + gap (24px + 8px) instead, so it lines up with the
   * input field itself. */
  #mc-subscribe-element-form .mc-coupon-apply-wrapper {
    padding-top: 32px;
  }
}

@media (max-width: 991.98px) {
  #mc-subscribe-element-form .mc-coupon-apply-wrapper {
    margin-top: 12px;
  }
}

/* -----------------------------------------------------------------------
 * Coupon status message (#mc-coupon-message). Keeps role="status" /
 * aria-live from the markup; this only adds a visual treatment so the
 * message reads as a designed status rather than raw text. Colour is never
 * the only signal: the icon and the message text itself both say whether
 * the code worked.
 * ----------------------------------------------------------------------- */
#mc-subscribe-element-form .mc-coupon-message {
  position: relative;
  margin: 12px 0 20px;
  padding: 10px 16px 10px 42px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.9375rem;
  line-height: 1.4;
}

#mc-subscribe-element-form .mc-coupon-message::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

#mc-subscribe-element-form .mc-coupon-message.messages--status {
  background-color: #EAF6EC;
  border-color: #2E7D46;
  color: #1C5C30;
}

#mc-subscribe-element-form .mc-coupon-message.messages--status::before {
  background-color: #2E7D46;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.2 11.4 2.6 7.8l1.2-1.2 2.4 2.4 5.6-5.6 1.2 1.2z'/%3E%3C/svg%3E");
}

#mc-subscribe-element-form .mc-coupon-message.messages--error {
  background-color: #FDECEA;
  border-color: #C62828;
  color: #8F1F1F;
}

#mc-subscribe-element-form .mc-coupon-message.messages--error::before {
  background-color: #C62828;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M7.1 3h1.8l-.3 6.5H7.4zM8 11.1a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------
 * Order summary (#mc-total). Plain state is a single "Total today" row;
 * once a coupon is applied, JS swaps in the full row set below (struck
 * full price, discount line, emphasised total) built with textContent, so
 * this only needs to style the rows/classes, not generate them.
 * ----------------------------------------------------------------------- */
#mc-subscribe-element-form .mc-total {
  margin: 4px 0 20px;
  padding: 14px 16px;
  background-color: #F6F7F9;
  border: 1px solid #E0E1DD;
  border-radius: 8px;
}

#mc-subscribe-element-form .mc-total-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 4px 0;
}

#mc-subscribe-element-form .mc-total-row-label,
#mc-subscribe-element-form .mc-total-row-amount {
  font-size: 0.9375rem;
  color: #0D1B2A;
}

#mc-subscribe-element-form .mc-total-row-amount {
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
}

/* Struck-through full price, shown once a coupon is applied. */
#mc-subscribe-element-form .mc-total-row--original .mc-total-row-label,
#mc-subscribe-element-form .mc-total-row-amount--struck {
  color: #55637A;
  font-weight: 400;
}

#mc-subscribe-element-form .mc-total-row-amount--struck {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Discount line. */
#mc-subscribe-element-form .mc-total-row-amount--discount {
  color: #1C5C30;
}

/* Emphasised, final total row. */
#mc-subscribe-element-form .mc-total--discounted .mc-total-row--due {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #E0E1DD;
}

#mc-subscribe-element-form .mc-total-row--due .mc-total-row-label,
#mc-subscribe-element-form .mc-total-row--due .mc-total-row-amount {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1B263B;
}

/* Visually-hidden helper for the "Was" cue on the struck price, so screen
 * readers hear "Was $1,500.00" instead of just a bare, easy-to-miss number
 * next to a total. Self-contained rather than relying on core's
 * .visually-hidden being present on this page. */
#mc-subscribe-element-form .mc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 479.98px) {
  #mc-subscribe-element-form .mc-total-row {
    flex-direction: column;
    gap: 2px 0;
  }

  #mc-subscribe-element-form .mc-total-row-amount {
    margin-left: 0;
  }
}