.elementor-widget-coe-payment-center,
.elementor-widget-coe-payment-center > .elementor-widget-container {
  overflow: visible !important;
  max-width: none !important;
}

.elementor-element.elementor-widget-coe-payment-center {
  width: 100%;
}

.elementor-column:has(.coe-pay-band),
.elementor-widget-wrap:has(.coe-pay-band),
.elementor-container:has(.coe-pay-band),
.elementor-section:has(.coe-pay-band),
.e-con:has(.coe-pay-band),
.e-con-inner:has(.coe-pay-band) {
  overflow: visible !important;
}

body:has(.coe-pay) .page_title {
  margin-bottom: 0 !important;
}

body:has(.coe-pay) .e-con:has(.coe-pay-band),
body:has(.coe-pay) .e-con-inner:has(.coe-pay-band) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.coe-pay {
  --navy: #002856;
  --lime: #c5d32e;
  --muted: #777777;
  --white: #ffffff;
  --danger: #a31a1e;
  --pay: #0c9558;
  --band: #e8eef4;
  font-family: "Noto Sans", Arial, sans-serif !important;
  color: var(--navy);
  font-size: 14px;
  line-height: 26px;
}

.coe-pay *,
.coe-pay *::before,
.coe-pay *::after {
  box-sizing: border-box;
}

.coe-pay h1,
.coe-pay h2,
.coe-pay h3,
.coe-pay p,
.coe-pay li,
.coe-pay label,
.coe-pay button,
.coe-pay input {
  font-family: "Noto Sans", Arial, sans-serif !important;
}

.coe-pay h2,
.coe-pay h3 {
  font-weight: 700 !important;
  letter-spacing: -0.8px;
  line-height: 1.2 !important;
  color: var(--navy) !important;
}

.coe-pay .hero {
  padding: 0;
  margin: 0;
}

.coe-pay .hero h1 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}

.coe-pay .hero h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  background: var(--lime);
  margin-top: 0.85rem;
  border-radius: 2px;
}

.coe-pay .intro {
  margin: 0;
  max-width: 46rem;
  font-size: 1.05rem;
}

.coe-pay .coe-pay-band {
  display: block !important;
  position: relative;
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  background-image: none !important;
  padding: 2rem 1.25rem 2.5rem !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.coe-pay .coe-pay-band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #f4f6f8 0%, #e8edf2 100%);
  z-index: 0;
  pointer-events: none;
}

.coe-pay .coe-pay-band > * {
  position: relative;
  z-index: 1;
}

.coe-pay .payment-layout {
  display: grid !important;
  gap: 1.15rem;
  align-items: start;
  width: min(100%, 1120px);
  margin-inline: auto;
}

.coe-pay .payment-card,
.coe-pay .howto {
  min-width: 0;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0, 40, 86, 0.06);
  border: 0;
}

.coe-pay .payment-card {
  padding: 1.45rem 1.4rem 1.4rem 1.55rem;
  position: relative;
  overflow: hidden;
}

.coe-pay .payment-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 100%;
  background: var(--lime);
}

.coe-pay .payment-card-head {
  margin: 0 0 1.15rem;
  padding: 0 0 0.95rem;
  border-bottom: 1px solid #e6ebf0;
}

.coe-pay .card-kicker {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6a7c0f;
}

.coe-pay .payment-card h2 {
  margin: 0;
  padding: 0 !important;
  color: var(--navy);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.2;
}

.coe-pay .card-sub {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}

.coe-pay .howto {
  padding: 1.45rem 1.4rem 1.35rem;
}

.coe-pay .howto h3 {
  margin: 0 0 1rem;
  padding: 0 !important;
  color: var(--navy);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.2;
}

.coe-pay .howto ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.coe-pay .howto li {
  counter-increment: step;
  position: relative;
  padding-left: 2.35rem;
  margin: 0 0 0.75rem;
  color: var(--navy);
  font-size: 14px;
  line-height: 22px;
}
  font-size: 0.95rem;
  line-height: 1.45;
}

.coe-pay .howto li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.coe-pay .contact-note {
  margin: 1.05rem 0 0;
  padding-top: 0.95rem;
  border-top: 1px solid #e6ebf0;
  color: var(--muted);
  font-size: 14px;
  line-height: 22px;
}

.coe-pay .contact-note a {
  color: #1a5a9c;
  overflow-wrap: anywhere;
}

.coe-pay .simpay-form-wrap,
.coe-pay .simpay-checkout-form,
.coe-pay .simpay-form,
.coe-pay form.simpay-styled,
.coe-pay .simpay-checkout-form.simpay-styled,
.coe-pay .simpay-form-wrap.simpay-styled {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  float: none !important;
}

.coe-pay .simpay-form-title,
.coe-pay .simpay-form-description,
.coe-pay .simpay-plan-select-container,
.coe-pay .simpay-form-control.simpay-plan-select-container,
.coe-pay .simpay-subtotal-amount-container,
.coe-pay .simpay-tax-amount-container,
.coe-pay .simpay-fee-amount-container,
.coe-pay .simpay-form-wrap::after,
.coe-pay .simpay-card-container::before {
  display: none !important;
  content: none !important;
}

.coe-pay .simpay-upe-wrap:empty,
.coe-pay .simpay-form-control--card:has(.simpay-upe-wrap:empty) {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.coe-pay .simpay-styled .simpay-form-control,
.coe-pay .simpay-form-control {
  margin: 0 0 0.95rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.coe-pay .simpay-label-wrap,
.coe-pay .simpay-styled .simpay-label-wrap {
  margin: 0 0 0.35rem !important;
}

.coe-pay .simpay-label-wrap label,
.coe-pay .simpay-styled label {
  display: block !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  color: var(--navy) !important;
  margin: 0 !important;
}

.coe-pay .simpay-field-wrap input[type="text"],
.coe-pay .simpay-field-wrap input[type="email"],
.coe-pay .simpay-styled input[type="text"],
.coe-pay .simpay-styled input[type="email"] {
  width: 100% !important;
  max-width: none !important;
  height: 46px !important;
  border: 1px solid #c9d4de !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  font: 15px/1.4 "Noto Sans", Arial, sans-serif !important;
  background: #fff !important;
  color: var(--navy) !important;
  box-shadow: none !important;
}

.coe-pay .simpay-field-wrap input::placeholder,
.coe-pay .simpay-styled input::placeholder {
  color: #93a1b0 !important;
}

.coe-pay .simpay-field-wrap input:focus,
.coe-pay .simpay-styled input:focus {
  outline: none !important;
  border-color: #7eb6e0 !important;
  box-shadow: 0 0 0 1px #7eb6e0 !important;
}

.coe-pay .simpay-errors:empty {
  display: none !important;
}

.coe-pay .simpay-errors {
  color: var(--danger) !important;
  font-size: 0.88rem !important;
  margin: 0 0 0.7rem !important;
}

.coe-pay .simpay-total-amount-container,
.coe-pay .simpay-checkout-form-total,
.coe-pay .simpay-form-control.simpay-total-amount-container,
.coe-pay .simpay-form-control.simpay-checkout-form-total,
.coe-pay .simpay-styled .simpay-totals,
.coe-pay .simpay-styled .simpay-total-amount-container {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  width: auto !important;
  margin: 0.15rem 0 1rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--navy) !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
}

.coe-pay .simpay-total-amount-container > *,
.coe-pay .simpay-checkout-form-total > * {
  display: inline !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

.coe-pay .simpay-total-amount-value,
.coe-pay .simpay-total-amount-container .simpay-total-amount-value {
  font-weight: 700 !important;
  color: var(--navy) !important;
  font-size: 0.98rem !important;
}

.coe-pay .simpay-checkout-btn-container,
.coe-pay .simpay-form-control.simpay-checkout-btn-container {
  margin: 0 !important;
}

.coe-pay .simpay-styled .simpay-btn,
.coe-pay .simpay-checkout-form .simpay-btn,
.coe-pay .simpay-btn.simpay-checkout-btn,
.coe-pay button.simpay-checkout-btn,
.coe-pay .simpay-styled button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 12px 24px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--pay) !important;
  color: #fff !important;
  font: 600 1rem/1.3 "Noto Sans", Arial, sans-serif !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.coe-pay .simpay-styled .simpay-btn:hover,
.coe-pay .simpay-btn.simpay-checkout-btn:hover,
.coe-pay button.simpay-checkout-btn:hover {
  background: #087a48 !important;
}

.coe-pay .simpay-btn.simpay-checkout-btn em,
.coe-pay .simpay-total-amount-value {
  font-style: normal !important;
}

.coe-pay table.simpay-form-total,
.coe-pay .simpay-styled table {
  width: auto !important;
  max-width: none !important;
  margin: 0.15rem 0 1rem !important;
  border: 0 !important;
  background: none !important;
}

.coe-pay table.simpay-form-total td,
.coe-pay table.simpay-form-total th,
.coe-pay .simpay-styled table td {
  border: 0 !important;
  padding: 0 0.45rem 0 0 !important;
  background: none !important;
  color: var(--navy) !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  text-align: left !important;
}

.coe-pay .coe-pay-legal {
  display: grid;
  gap: 1.5rem;
  padding: 2.5rem 0 0.5rem;
}

.coe-pay .coe-pay-legal-grid {
  display: grid;
  gap: 2rem;
}

.coe-pay .coe-pay-legal article {
  min-width: 0;
}

.coe-pay .coe-pay-legal h2 {
  margin: 0 0 12px;
  padding: 0 !important;
  color: var(--navy);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.2;
}

.coe-pay .coe-pay-legal p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 26px;
  overflow-wrap: break-word;
}

.coe-pay .coe-pay-legal a,
.coe-pay .terms-link {
  color: #1a5a9c;
}

.coe-pay .terms-link {
  display: inline-block;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 3px solid var(--lime);
  padding-bottom: 0.15rem;
}

.coe-pay .coe-modal {
  width: min(92vw, 520px);
  max-height: min(90vh, 760px);
  overflow: auto;
  border: 0;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 24px 60px rgba(0, 40, 86, 0.28);
}

.coe-pay .coe-modal::backdrop {
  background: rgba(0, 28, 61, 0.55);
}

.coe-pay .modal-inner {
  padding: 1.75rem 1.5rem 1.6rem;
}

.coe-pay .modal-close {
  float: right;
  border: 0;
  background: transparent;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
}

.coe-pay .coe-modal h2 {
  margin: 0 1.5rem 1rem 0;
  color: var(--navy);
}

.coe-pay .pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border: 0;
  border-radius: 8px;
  background: var(--pay);
  color: #fff;
  font: 600 1.05rem/1.3 "Noto Sans", Arial, sans-serif;
  cursor: pointer;
}

@media (min-width: 768px) {
  .coe-pay .coe-pay-band {
    padding: 2rem 1.75rem 2.75rem !important;
  }

  .coe-pay .payment-card,
  .coe-pay .howto {
    padding: 1.6rem 1.65rem 1.5rem;
  }

  .coe-pay .payment-card {
    padding-left: 1.85rem;
  }

  .coe-pay .coe-pay-legal-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

@media (min-width: 980px) {
  .coe-pay .payment-layout {
    grid-template-columns: minmax(0, 1.22fr) minmax(260px, 0.78fr);
    gap: 1.25rem;
  }
}