/*
 * Focused Enrollment: native Paid Memberships Pro form skin.
 * Source selectors checked against PMPro 3.8.9 and 3.2.2 checkout templates.
 * Deliberately leaves field presence, pricing text, consent, validation,
 * visibility helpers, gateway scripts and submission behavior with PMPro.
 */
#tf-checkout-a .pmpro {
  --pmpro--color--accent: #ce0e2d;
  --pmpro--color--accent--variation: #ad0c27;
  --pmpro--color--base: #fff;
  --pmpro--color--contrast: #202326;
  --pmpro--color--border: #8b908c;
  --pmpro--color--border--variation: #deded8;
  --pmpro--base--border-radius: 6px;
  --pmpro--base--spacing--small: 8px;
  --pmpro--base--spacing--medium: 16px;
  --pmpro--base--spacing--large: 24px;
  --pmpro--btn--border-radius: 7px;
  color: #202326;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--tfc-checkout-text, 14px);
  line-height: 1.6;
  min-width: 0;
  width: 100%;
}

#tf-checkout-a .pmpro .pmpro_section,
#tf-checkout-a #pmpro_form {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

#tf-checkout-a #pmpro_form :where(input, select, textarea, button) {
  box-sizing: border-box;
  font-family: inherit;
}

#tf-checkout-a #pmpro_form .pmpro_card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

#tf-checkout-a #pmpro_form .pmpro_card_content {
  min-width: 0;
  margin: 0;
  padding: 0;
}

#tf-checkout-a #pmpro_form .pmpro_form_fieldset,
#tf-checkout-a #pmpro_user_fields,
#tf-checkout-a #pmpro_billing_address_fields,
#tf-checkout-a #pmpro_payment_information_fields {
  min-width: 0;
  width: 100%;
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}

/* Modern card titles and the legacy legend/heading variant. */
#tf-checkout-a #pmpro_form .pmpro_card_title,
#tf-checkout-a #pmpro_form .pmpro_form_heading {
  color: #202326;
  margin: 0 0 18px;
  padding: 0;
  font-family: inherit;
  font-size: var(--tfc-checkout-section, 24px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.3px;
}

#tf-checkout-a #pmpro_form .pmpro_form_legend {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

/* The live membership cost is authoritative, including taxes/discounts and
 * membership replacement/expiration notices. None of it is suppressed. */
#tf-checkout-a #pmpro_pricing_fields {
  padding-bottom: 22px;
  border-bottom: 1px solid #deded8;
}

#tf-checkout-a #pmpro_pricing_fields .pmpro_card_title {
  margin-bottom: 10px;
  font-size: var(--tfc-checkout-title, 16px);
}

#tf-checkout-a #pmpro_pricing_fields .pmpro_level_name_text,
#tf-checkout-a #pmpro_pricing_fields .pmpro_level_description_text,
#tf-checkout-a #pmpro_level_cost {
  font-size: var(--tfc-checkout-text, 14px);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

#tf-checkout-a #pmpro_pricing_fields p {
  margin: 8px 0 0;
  padding: 0;
}

#tf-checkout-a #pmpro_pricing_fields .pmpro_level_description_text,
#tf-checkout-a #pmpro_pricing_fields .pmpro_level_expiration_text {
  color: #62656a;
}

#tf-checkout-a #pmpro_level_cost strong { color: #202326; }

#tf-checkout-a #pmpro_form .pmpro_card_actions {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid #e9e7e0;
  border-radius: 6px;
  background: #f8f7f3;
  color: #62656a;
  font-size: var(--tfc-checkout-text, 14px);
  line-height: 1.7;
}

/* Use the existing login URL, including PMPro's checkout redirect. */
#tf-checkout-a #pmpro_user_fields .pmpro_card_actions {
  order: -1;
  margin: 0 0 20px;
}

#tf-checkout-a #pmpro_account_loggedin {
  padding: 16px;
  border: 1px solid #b7d6ca;
  border-radius: 7px;
  background: #eaf5f1;
  color: #285c4d;
  font-size: var(--tfc-checkout-text, 14px);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

#tf-checkout-a #pmpro_form a {
  color: #ad0c27;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#tf-checkout-a #pmpro_form a:hover { color: #7f0a1e; }

/* Only PMPro's explicit field groups become columns: arbitrary plugin
 * wrappers, hidden inputs and honeypots are never made into grid items. */
#tf-checkout-a #pmpro_form .pmpro_form_fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

#tf-checkout-a #pmpro_form .pmpro_cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  min-width: 0;
}

#tf-checkout-a #pmpro_form .pmpro_cols-2 > .pmpro_form_field,
#tf-checkout-a #pmpro_form .pmpro_cols-2 > .pmpro_form_fields {
  min-width: 0;
  width: 100%;
  margin: 0;
}

#tf-checkout-a #pmpro_form .pmpro_form_field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  gap: 6px;
}

#tf-checkout-a #pmpro_form .pmpro_form_label,
#tf-checkout-a #pmpro_form label:not(.pmpro_form_label-inline) {
  display: block;
  margin: 0;
  padding: 0;
  color: #202326;
  font-size: var(--tfc-checkout-text, 14px);
  font-weight: 700;
  line-height: 1.5;
}

#tf-checkout-a #pmpro_form :where(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], select, textarea) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 47px;
  height: auto;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid #8b908c;
  border-radius: 6px;
  background-color: #fff;
  color: #202326;
  /* Keep editable controls readable without mobile focus zoom. */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: none;
}

#tf-checkout-a #pmpro_form select:not([multiple]) { padding-right: 32px; }
#tf-checkout-a #pmpro_form textarea { min-height: 110px; resize: vertical; }
#tf-checkout-a #pmpro_form input::placeholder { color: #62656a; opacity: 1; }

#tf-checkout-a #pmpro_form :where(input, select, textarea):focus-visible {
  outline: 2px solid #287ab0;
  outline-offset: 2px;
  border-color: #287ab0;
  box-shadow: none;
}

#tf-checkout-a #pmpro_form :where(a, button, input[type="submit"], input[type="button"]):focus-visible {
  outline: 3px solid #287ab0;
  outline-offset: 3px;
}

#tf-checkout-a #pmpro_form .pmpro_form_hint {
  color: #62656a;
  opacity: 1;
  font-size: var(--tfc-checkout-small, 12px);
  line-height: 1.6;
  margin: 0;
}

/* Keep PMPro's show/hide-password button and accessible state intact. */
#tf-checkout-a #pmpro_form .pmpro_form_field-password-toggle {
  margin: 0;
  padding: 0;
}

#tf-checkout-a #pmpro_form .pmpro_btn-password-toggle,
#tf-checkout-a #pmpro_form .pmpro_btn-password-toggle:hover,
#tf-checkout-a #pmpro_form .pmpro_btn-password-toggle:focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-height: 32px;
  padding: 4px 0;
  margin: 0;
  border: 0;
  border-radius: 3px;
  box-shadow: none;
  background: transparent;
  color: #ad0c27;
  font-size: var(--tfc-checkout-small, 12px);
  font-weight: 600;
  line-height: 1.4;
}

#tf-checkout-a #pmpro_form .pmpro_btn-password-toggle svg { width: 18px; height: 18px; }

/* Payment fields remain stationary. Gateway-owned iframes are not restyled
 * internally, resized, or clipped; these selectors cover their outer hosts. */
#tf-checkout-a #pmpro_payment_information_fields > .pmpro_card > .pmpro_card_content {
  padding: 18px;
  border: 1px solid #d6d7d1;
  border-radius: 7px;
  background: #fbfbf9;
}

#tf-checkout-a #pmpro_payment_information_fields div#AccountNumber,
#tf-checkout-a #pmpro_payment_information_fields div#Expiry,
#tf-checkout-a #pmpro_payment_information_fields div#CVV {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 47px;
  padding: 12px 13px;
  border: 1px solid #8b908c;
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}

#tf-checkout-a #pmpro_payment_information_fields .StripeElement--focus {
  outline: 2px solid #287ab0;
  outline-offset: 2px;
}

#tf-checkout-a #pmpro_payment_information_fields .pmpro_payment-request-button {
  margin-bottom: 18px;
}

#tf-checkout-a #pmpro_payment_information_fields .pmpro_payment-request-button h3 {
  margin: 18px 0 0;
  font-size: var(--tfc-checkout-title, 16px);
}

#tf-checkout-a #pmpro_form .pmpro_form_fields-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

#tf-checkout-a #pmpro_form .pmpro_form_fields-inline > input[type="text"],
#tf-checkout-a #pmpro_form .pmpro_form_fields-inline > select {
  flex: 1 1 0;
  min-width: 0;
}

#tf-checkout-a #pmpro_form .pmpro_payment-discount-code { grid-column: 1 / -1; }

/* Native coupon disclosure, AJAX feedback and Apply controls. No forced
 * display value: PMPro retains control of their open/closed states. */
#tf-checkout-a #other_discount_code_fields { margin: 12px 0 0; }
#tf-checkout-a #other_discount_code_fields label { margin-bottom: 6px; }
#tf-checkout-a #other_discount_code_p { font-size: var(--tfc-checkout-text, 14px); }

#tf-checkout-a #other_discount_code_toggle {
  padding: 4px 0;
  min-height: 32px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #ad0c27;
  box-shadow: none;
  font-size: var(--tfc-checkout-text, 14px);
  font-weight: 600;
  line-height: 1.5;
  text-align: start;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: normal;
  cursor: pointer;
}

#tf-checkout-a #pmpro_form .pmpro_btn-submit-discount-code,
#tf-checkout-a #other_discount_code_button,
#tf-checkout-a #discount_code_button {
  flex: 0 0 auto;
  width: auto;
  min-height: 47px;
  margin: 0;
  padding: 10px 17px;
  border: 1px solid #202326;
  border-radius: 6px;
  background: #202326;
  color: #fff;
  box-shadow: none;
  font-size: var(--tfc-checkout-text, 14px);
  font-weight: 700;
  line-height: 1.5;
  text-transform: none;
  cursor: pointer;
}

#tf-checkout-a #pmpro_form .pmpro_btn-submit-discount-code:hover { background: #373b3f; }

/* Consent and custom checkbox/radio fields remain ordinary usable inputs. */
#tf-checkout-a #pmpro_form :where(input[type="checkbox"], input[type="radio"]) {
  appearance: auto;
  -webkit-appearance: auto;
  position: static;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0 7px 0 0;
  vertical-align: middle;
  accent-color: #ce0e2d;
  opacity: 1;
  cursor: pointer;
}

#tf-checkout-a #pmpro_form .pmpro_form_field-checkbox .pmpro_form_label,
#tf-checkout-a #pmpro_form .pmpro_form_field-checkbox-grouped-item {
  display: block;
  font-size: var(--tfc-checkout-text, 14px);
  font-weight: 400;
  line-height: 1.7;
}

#tf-checkout-a #pmpro_form .pmpro_form_field-radio-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
}

#tf-checkout-a #pmpro_form .pmpro_form_field-radio-item label {
  display: inline;
  font-size: var(--tfc-checkout-text, 14px);
  font-weight: 400;
}

#tf-checkout-a #pmpro_tos_fields {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #deded8;
}

#tf-checkout-a #pmpro_license {
  max-width: 100%;
  padding: 16px;
  border: 1px solid #deded8;
  border-radius: 6px;
  background: #f8f7f3;
  font-size: var(--tfc-checkout-text, 14px);
  line-height: 1.7;
}

/* Preserve PMPro's native visible/hidden states. Styling errors must never
 * remove the message or override its inline display or processing visibility. */
#tf-checkout-a .pmpro .pmpro_message {
  margin: 16px 0;
  padding: 13px 15px;
  border: 1px solid #becfdb;
  border-radius: 7px;
  background: #edf5fa;
  color: #234e69;
  box-shadow: none;
  font-size: var(--tfc-checkout-text, 14px);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

#tf-checkout-a .pmpro .pmpro_message.pmpro_error {
  border-color: #dfabb5;
  background: #fff1f3;
  color: #9c1230;
}

#tf-checkout-a .pmpro .pmpro_message.pmpro_success {
  border-color: #b7d6ca;
  background: #eaf5f1;
  color: #285c4d;
}

#tf-checkout-a .pmpro .pmpro_message.pmpro_alert {
  border-color: #dec790;
  background: #fff3da;
  color: #805512;
}

#tf-checkout-a .pmpro .pmpro_message a { color: inherit; font-weight: 600; }
#tf-checkout-a .pmpro .pmpro_message p { margin: 0 0 8px; }
#tf-checkout-a .pmpro .pmpro_message p:last-child { margin-bottom: 0; }

#tf-checkout-a #pmpro_form .pmpro_form_input.pmpro_form_input-error,
#tf-checkout-a #pmpro_form :where(input, select, textarea)[aria-invalid="true"],
#tf-checkout-a #pmpro_payment_information_fields .StripeElement--invalid {
  border-color: #b7203e;
  box-shadow: 0 0 0 2px #fbe2e7;
}

#tf-checkout-a #discount_code_message,
#tf-checkout-a #other_discount_code_message {
  margin: 10px 0 0;
  font-size: var(--tfc-checkout-text, 14px);
}

#tf-checkout-a #pmpro_form .pmpro_form_submit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
}

#tf-checkout-a #pmpro_submit_span { width: 100%; }

#tf-checkout-a #pmpro_btn-submit,
#tf-checkout-a #pmpro_form .pmpro_btn-submit-checkout:not(.pmpro_btn-submit-checkout-paypal) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 55px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid #ce0e2d;
  border-radius: 7px;
  background: #ce0e2d;
  color: #fff;
  box-shadow: none;
  font-family: inherit;
  font-size: var(--tfc-checkout-text, 14px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}

#tf-checkout-a #pmpro_btn-submit:hover,
#tf-checkout-a #pmpro_form .pmpro_btn-submit-checkout:not(.pmpro_btn-submit-checkout-paypal):hover {
  background: #ad0c27;
  border-color: #ad0c27;
  color: #fff;
}

#tf-checkout-a #pmpro_form :where(button, input[type="submit"], input[type="button"]):disabled {
  opacity: .65;
  cursor: wait;
}

#tf-checkout-a #pmpro_processing_message {
  margin: 0;
  padding: 0;
  color: #62656a;
  font-size: var(--tfc-checkout-text, 14px);
  line-height: 1.6;
  text-align: center;
}

/* Preserve the exact native utility even if it is attached to a field group.
 * This also keeps PMPro's spam-trap wrapper hidden without targeting its input. */
#tf-checkout-a #pmpro_form .pmpro_hidden { display: none; }
#tf-checkout-a #pmpro_form .pmpro_btn-password-toggle.hide-if-no-js { display: none; }

@media (max-width: 540px) {
  #tf-checkout-a #pmpro_form .pmpro_cols-2 { grid-template-columns: minmax(0, 1fr); }
  #tf-checkout-a #pmpro_form .pmpro_payment-discount-code { grid-column: auto; }
  #tf-checkout-a #pmpro_payment_information_fields > .pmpro_card > .pmpro_card_content { padding: 14px; }
  #tf-checkout-a #pmpro_form .pmpro_card_title,
  #tf-checkout-a #pmpro_form .pmpro_form_heading { font-size: var(--tfc-checkout-section, 24px); }
  #tf-checkout-a #pmpro_form .pmpro_btn-submit-discount-code { padding-inline: 13px; }
}

/* The price and complete billing terms are represented by the live sidebar.
 * Keep the native PMPro nodes for its own coupon/gateway initialization. The
 * card itself, coupon controls, descriptions and replacement notices remain.
 * Server ready class covers no-JS; JS clears it if price state becomes invalid.
 */
body.tfc-checkout-price-ready #tf-checkout-a:has(.tfc-checkout-price[data-tfc-checkout-state]) #pmpro_pricing_fields > .pmpro_card_title,
body.tfc-checkout-price-ready #tf-checkout-a:has(.tfc-checkout-price[data-tfc-checkout-state]) #pmpro_pricing_fields > .pmpro_form_legend,
body.tfc-checkout-price-ready #tf-checkout-a:has(.tfc-checkout-price[data-tfc-checkout-state]) #pmpro_pricing_fields .pmpro_level_cost_text,
body.tfc-checkout-price-ready #tf-checkout-a:has(.tfc-checkout-price[data-tfc-checkout-state]) #pmpro_pricing_fields .pmpro_level_expiration_text,
#tf-checkout-a.tfc-checkout-price-ready #pmpro_pricing_fields > .pmpro_card_title,
#tf-checkout-a.tfc-checkout-price-ready #pmpro_pricing_fields > .pmpro_form_legend,
#tf-checkout-a.tfc-checkout-price-ready #pmpro_pricing_fields .pmpro_level_cost_text,
#tf-checkout-a.tfc-checkout-price-ready #pmpro_pricing_fields .pmpro_level_expiration_text,
#tf-checkout-a #pmpro_pricing_fields .pmpro_level_name_text:empty,
#tf-checkout-a #pmpro_pricing_fields .tfc-checkout-empty-level-name{display:none}

/* PMPro's grid alignment must not center children in Core's column layout. */
#tf-checkout-a #pmpro_form .pmpro_form_field-password { align-items: stretch; text-align: start; }
#tf-checkout-a #pmpro_form .pmpro_form_field-password > label { align-self: stretch; text-align: start; }
#tf-checkout-a #pmpro_form .pmpro_form_field-password-toggle { align-self: flex-start; justify-content: flex-start; text-align: start; }

/* Native PMPro owns when processing is visible. This panel only presents it. */
#tf-checkout-a #pmpro_processing_message > .tfc-checkout-processing {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 2px 0 0;
  padding: 17px 18px 16px;
  border: 1px solid #ecdde0;
  border-radius: 9px;
  background: #fff9fa;
  color: #62656a;
  font: var(--tfc-checkout-text, 14px)/1.6 Arial, Helvetica, sans-serif;
  text-align: center;
}

/* Collapse only our child while PMPro explicitly hides its native message.
 * Keep the parent's visibility/display untouched for Stripe and other gateways. */
#tf-checkout-a #pmpro_processing_message[style*="visibility: hidden" i] > .tfc-checkout-processing,
#tf-checkout-a #pmpro_processing_message[style*="visibility:hidden" i] > .tfc-checkout-processing {
  display: none;
}

#tf-checkout-a .tfc-checkout-processing__mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 10px;
  margin: 0 0 9px;
}
#tf-checkout-a .tfc-checkout-processing__mark > span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ce0e2d;
  opacity: .55;
  animation: tfc-checkout-processing-pulse 1.4s ease-in-out infinite;
}
#tf-checkout-a .tfc-checkout-processing__mark > span:nth-child(2) { animation-delay: .16s; }
#tf-checkout-a .tfc-checkout-processing__mark > span:nth-child(3) { animation-delay: .32s; }
#tf-checkout-a .tfc-checkout-processing__title {
  display: block;
  margin: 0;
  color: #202326;
  font-size: var(--tfc-checkout-title, 16px);
  font-weight: 700;
  line-height: 1.4;
}
#tf-checkout-a .tfc-checkout-processing__copy { margin: 5px 0 0; }
#tf-checkout-a .tfc-checkout-processing__native { margin: 8px 0 0; overflow-wrap: anywhere; }
#tf-checkout-a .tfc-checkout-processing__native > :last-child { margin-bottom: 0; }
#tf-checkout-a .tfc-checkout-processing__track {
  display: block;
  width: 100%;
  height: 4px;
  margin: 14px 0 0;
  overflow: hidden;
  border-radius: 999px;
  background: #ecdfe2;
}
#tf-checkout-a .tfc-checkout-processing__track > span {
  display: block;
  width: 35%;
  height: 100%;
  border-radius: inherit;
  background: #ce0e2d;
  background: linear-gradient(90deg, #ce0e2d 0%, #df3f61 55%, #ef8ba1 100%);
  animation: tfc-checkout-processing-travel 1.8s ease-in-out infinite;
}
@keyframes tfc-checkout-processing-pulse {
  0%, 70%, 100% { opacity: .4; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-3px); }
}
@keyframes tfc-checkout-processing-travel {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(400%); }
}
@media (prefers-reduced-motion: reduce) {
  #tf-checkout-a .tfc-checkout-processing__mark > span,
  #tf-checkout-a .tfc-checkout-processing__track > span { animation: none; }
  #tf-checkout-a .tfc-checkout-processing__mark > span { opacity: .8; transform: none; }
  #tf-checkout-a .tfc-checkout-processing__track > span { transform: translateX(93%); }
}
@media (forced-colors: active) {
  #tf-checkout-a #pmpro_processing_message > .tfc-checkout-processing { border-color: CanvasText; }
  #tf-checkout-a .tfc-checkout-processing__mark > span { background: CanvasText; }
  #tf-checkout-a .tfc-checkout-processing__track { outline: 1px solid CanvasText; }
  #tf-checkout-a .tfc-checkout-processing__track > span { background: Highlight; }
}