.pro-page,
.pro-checkout-skin {
  --pro-card-shadow: 0 4px 14px rgba(17, 24, 39, .08);
  --pro-field-shadow: 0 2px 8px rgba(17, 24, 39, .06);
  color: #606973;
  font-size: 13px;
  font-weight: 400;
}
.pro-page { margin: 30px auto 72px; }

.pro-page strong,
.pro-page b,
.pro-page button,
.pro-page th,
.pro-page dd,
.pro-page .pro-status,
.pro-checkout-skin strong,
.pro-checkout-skin button { font-weight: 400; }

.pro-page__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  align-items: stretch;
  gap: 18px;
  margin-bottom: 20px;
}

.pro-eyebrow {
  color: #707782;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pro-intro-card {
  display: grid;
  align-content: center;
  padding: 14px 18px;
}

.pro-intro-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}

.pro-intro-badge {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  padding: 2px 6px;
  border-radius: 2px;
  background: #2f9e35;
  color: #fff;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .04em;
}

.pro-intro-kicker .pro-eyebrow { color: #707782; font-size: 10px; }
.pro-page__heading p { max-width: 720px; margin: 0; color: #7a838c; font-size: 12px; line-height: 1.45; }
.pro-page-title { margin: 0 0 6px !important; color: #59626a !important; font-size: 1.05rem !important; line-height: 1.2; text-align: left !important; }
.pro-page__heading .pro-return-model { margin-top: 10px; }
.pro-return-model__link { margin-top: 7px; color: #56616a; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.pro-return-model__link i { margin-left: 5px; font-size: 10px; }

.pro-intro-card,
.pro-balance-card,
.pro-purchase-card,
.pro-rules-card,
.pro-table-card {
  border: 1px solid rgba(17, 24, 39, .14);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--pro-card-shadow);
}

.pro-balance-card { width: 100%; min-width: 0; padding: 14px 18px; }
.pro-balance-card span { display: block; color: #7b858e; font-size: 11px; }
.pro-balance-card strong { display: block; margin-top: 3px; color: #505860; font-size: 20px; }
.pro-balance-card [data-pro-balance] {
  color: #2f9e35;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
}

.pro-purchase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 18px;
}

.pro-purchase-card,
.pro-rules-card { padding: 20px; }

.pro-table-card__heading { position: relative; }
.pro-card-title { color: #707782 !important; font-size: .95rem !important; font-weight: 500 !important; }

.pro-quantity-field {
  max-width: 340px;
}

.pro-quantity-label {
  display: block;
  margin: 0 0 6px;
  color: #89939b;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}

.pro-quantity {
  display: grid;
  grid-template-columns: 42px minmax(130px, 1fr) 42px;
  gap: 7px;
}

.pro-quantity button,
.pro-quantity input { min-height: 42px; border: 1px solid #dfe3e6; border-radius: 6px; background: #fafafa; box-shadow: var(--pro-field-shadow); }
.pro-quantity button { color: #606973; font-size: 20px; cursor: pointer; }
.pro-quantity input {
  width: 100%;
  padding: 0 12px;
  appearance: textfield;
  color: #2f9e35;
  font-size: 20px;
  font-weight: 500;
  line-height: 42px;
  text-align: center;
  cursor: default;
}
.pro-quantity input::-webkit-inner-spin-button,
.pro-quantity input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.pro-quantity input:focus { border-color: #dfe3e6; outline: 0; box-shadow: var(--pro-field-shadow); }

.pro-payment-methods { margin: 20px 0 0; padding: 0; border: 0; }
.pro-payment-methods legend { margin-bottom: 9px; color: #606973; font-size: 11px; font-weight: 400; }
.pro-payment-methods__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }

.pro-payment-method {
  position: relative;
  display: grid;
  min-height: 92px;
  align-content: start;
  gap: 3px;
  padding: 10px;
  border: 1px solid #dfe3e6;
  border-radius: 7px;
  background: #fff;
  box-shadow: var(--pro-field-shadow);
  cursor: pointer;
}

.pro-payment-method:has(input:checked) { border-color: #727980; background: #f5f5f5; box-shadow: inset 0 0 0 1px #727980, var(--pro-field-shadow); }
.pro-payment-method input { position: absolute; top: 8px; right: 8px; accent-color: #656c72; }
.pro-payment-method__logo { display: flex; height: 25px; align-items: center; padding-right: 20px; }
.pro-payment-method__logo img { display: block; max-width: 78px; max-height: 23px; filter: grayscale(1); object-fit: contain; }
.pro-payment-method:not(.is-disabled) .pro-payment-method__logo img { filter: none; }
.pro-payment-method strong { color: #545c63; font-size: 11px; }
.pro-payment-method small { margin: 0; color: #858e96; font-size: 8px; line-height: 1.35; text-align: left; }
.pro-payment-method.is-disabled { cursor: not-allowed; opacity: .45; }

.pro-checkout-summary { display: grid; margin: 20px 0 13px; }
.pro-checkout-summary > div { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid #e9ecee; }
.pro-checkout-summary dt { color: #6c7680; font-weight: 400; }
.pro-checkout-summary dd { margin: 0; }
.pro-checkout-summary__total dd { color: #505860; font-size: 16px; }
.pro-rate-note { min-height: 34px; margin: 0 0 14px; color: #7b858e; font-size: 11px; }

.pro-primary-button {
  display: inline-flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid #656c72;
  border-radius: 4px;
  background: #70767b;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.pro-primary-button:hover { background: #5f656a; color: #fff; }
.pro-purchase-card > small { display: block; margin-top: 10px; color: #8a939b; font-size: 10px; text-align: center; }
.pro-acceptance { margin: 7px 14px 0; color: #7c868e; font-size: 10px; line-height: 1.45; text-align: center; }
.pro-acceptance a,
.pro-table-card a,
.pro-rules-links a { color: #56616a; font-weight: 400; }

.pro-rules-card h2 { margin-bottom: 18px !important; }
.pro-rules-card ol { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; counter-reset: pro-steps; }
.pro-rules-card li { position: relative; padding-left: 36px; counter-increment: pro-steps; }
.pro-rules-card li::before {
  content: counter(pro-steps);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #d9dee2;
  border-radius: 50%;
  background: #f5f6f7;
  color: #626b73;
  font-weight: 400;
}

.pro-rules-card li strong,
.pro-rules-card li span { display: block; }
.pro-rules-card li span { margin-top: 3px; color: #79838b; font-size: 11px; }
.pro-rules-card__note { display: flex; margin-top: 18px; padding: 11px; align-items: flex-start; gap: 7px; border: 1px solid #e4e7e9; border-radius: 7px; background: #f7f7f7; box-shadow: var(--pro-field-shadow); color: #68727b; font-size: 10px; line-height: 1.45; }
.pro-rules-card__note .pro-intro-badge { flex: 0 0 auto; margin-top: 1px; }

.pro-rules-links { display: grid; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e5e8ea; }
.pro-rules-links h3 { margin: 0 0 7px; color: #5b646c; font-size: 11px; font-weight: 400; }
.pro-rules-links a { display: flex; min-height: 33px; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #eceeef; font-size: 10px; text-decoration: none; }
.pro-rules-links a > span { display: inline-flex; min-width: 0; align-items: center; gap: 8px; }
.pro-rules-links a > span i { width: 13px; color: #7e878f; text-align: center; }
.pro-rules-links a > .fa-chevron-right { color: #a5adb3; font-size: 8px; }
.pro-rules-links .pro-rules-links__all { min-height: auto; margin-top: 9px; border-bottom: 0; text-decoration: underline; text-decoration-color: #c3cdd2; text-underline-offset: 3px; }

.pro-table-card { margin-top: 18px; overflow: hidden; }
.pro-table-card__heading { padding: 11px 18px 8px; border-bottom: 1px solid #e4e7e9; }
.pro-table-card__heading h2 { margin: 0 !important; padding: 0 100px; }
.pro-table-card__heading > span { position: absolute; top: 11px; right: 18px; color: #879098; font-size: 10px; }
.pro-table-wrap { overflow-x: auto; }

.pro-table-card table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 10px; }
.pro-table-card th { padding: 6px 9px; border-right: 1px solid #e4e7e9; background: #f4f5f6; color: #68717a; font-size: 9px; text-align: left; text-transform: uppercase; }
.pro-table-card td { padding: 7px 9px; border-top: 1px solid #e7eaec; border-right: 1px solid #eef0f1; vertical-align: middle; }
.pro-table-card th:last-child,
.pro-table-card td:last-child { border-right: 0; }
.pro-table-card tbody tr:nth-child(even) { background: #fafafa; }
.pro-empty { color: #89929a; text-align: center; }
.is-positive,
.is-negative { color: #505860; }
.pro-status { display: inline-flex; padding: 3px 7px; border: 1px solid #dfe3e6; border-radius: 3px; background: #f3f4f5; color: #606973; font-size: 9px; }
.pro-status--paid,
.pro-status--failed,
.pro-status--cancelled { background: #f3f4f5; color: #606973; }

.pro-messages { margin-bottom: 14px; }
.pro-message { padding: 10px 13px; border: 1px solid #dfe3e6; border-radius: 4px; background: #f5f5f5; color: #606973; }
.pro-message--error { background: #f3f3f3; color: #505860; }

@media (max-width: 820px) {
  .pro-page { margin-top: 22px; }
  .pro-page__heading { grid-template-columns: 1fr; align-items: stretch; }
  .pro-purchase-grid { grid-template-columns: 1fr; }
  .pro-payment-methods__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .pro-purchase-card,
  .pro-rules-card { padding: 15px; }
  .pro-quantity { max-width: none; }
  .pro-table-card table { min-width: 620px; }
}