.ab_widget_container_popin-simple {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: none;
  pointer-events: all;
}

.ab_widget_container_popin-simple .ab_widget_container_popin-simple_overlay {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(1, 31, 68, 0.8);
  cursor: pointer;
}

.ab_widget_container_popin-simple .ab_widget_container_popin-simple_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 588px;
  max-width: 94vw;
  height: auto;
  pointer-events: all;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 5px 10px 0 rgba(29, 51, 85, 0.15);
  color: rgb(0, 1, 77);
  text-align: left;
  font-size: 16px;
}

.ab_widget_container_popin-simple .ab_widget_container_popin-simple_content > * {
  display: block;
  line-height: 1.4;
  padding: 24px;
  font-size: 16px;
}

.ab_widget_container_popin-simple .ab_widget_container_popin-simple_content .ab_widget_container_popin-simple_close_button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: auto;
  height: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  line-height: 0;
  z-index: 9;
  border-radius: 50px;
  background-color: rgb(0, 123, 196);
}

.ab_widget_container_popin-simple .ab_widget_container_popin-simple_content .ab_widget_container_popin-simple_close_button svg {
  pointer-events: none;
  width: 24px;
  height: 24px;
  fill: #fff;
}

.ab_widget_container_popin-simple .ab_widget_container_popin-simple_content .popin_simple_title {
  margin: 0 0 25px 0;
  display: inline-block;
  width: 100%;
  color: rgb(0, 1, 77);
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 600;
  font-size: 24px;
}

.ab_widget_container_popin-simple .ab_widget_container_popin-simple_content .popin_text_container {
  line-height: 1.5;
  white-space: pre-line;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
}

.ab_widget_container_popin-simple .ab_widget_container_popin-simple_content .popin_text_container p {
  margin: 0;
}

.ab_widget_container_popin-simple .ab_widget_container_popin-simple_content .popin_simple_text {
  font-size: 16px;
}

.ab_widget_container_popin-simple .ab_widget_container_popin-simple_content .buttons_container {
  display: inline-block;
  width: 100%;
  text-align: left;
}

.ab_widget_container_popin-simple .ab_widget_container_popin-simple_content .buttons_container a {
  margin: 25px 0 0 0;
  padding: 10px 22px;
  max-width: 100%;
  width: auto;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  display: inline-block;
  border-radius: 30px;
  background-color: rgb(4, 5, 50);
  color: rgb(83, 239, 239);
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
}

.adr-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  color: #667085;
}

.adr-password-toggle svg {
  width: 22px;
  height: 22px;
}

.card-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: #00014d;
}

.input__expiry-date--month,
.input__expiry-date--year {
  min-width: 48px;
  width: 2.5ch;
  text-align: center;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: #00014d;
}

.card-msg {
  color: #ba0808;
  font-size: 13px;
  margin-top: 4px;
  display: block;
  width: 100%;
}

.cd-form {
  font-family: 'Poppins', system-ui, sans-serif;
}

.form__grid-area--cardholder {
  grid-column: 1 / -1;
  margin-top: 0;
}

.form__grid-area--cardholder .input-wrapper__input {
  display: flex;
  align-items: center;
}

.form__grid-area--cardholder .input__prefix {
  position: static;
  width: auto;
  flex: 0 0 auto;
  padding-left: 0.9rem;
  padding-right: 0.4rem;
}

.form__grid-area--cardholder .input__input-container {
  flex: 1;
}

.form__grid-area--cardholder .input__input {
  padding-left: 0.4rem;
}

.form__grid-area--card-input .input-wrapper__input,
.form__grid-area--cvv-input .input-wrapper__input,
.form__grid-area--expiry-date .input-wrapper__input,
.form__grid-area--cardholder .input-wrapper__input {
  display: flex;
  align-items: center;
}

.form__grid-area--card-input .input__prefix,
.form__grid-area--cvv-input .input__prefix,
.form__grid-area--expiry-date .input__prefix,
.form__grid-area--cardholder .input__prefix {
  position: static !important;
  width: auto !important;
  flex: 0 0 auto !important;
  padding-left: 0.8rem !important;
  padding-right: 0.4rem !important;
}

.input__iframe-wrapper {
  display: contents !important;
}

.input-wrapper__input,
.e-input__main {
  height: 48px;
}

.input__input,
.e-input__input {
  height: 100%;
  min-height: 0;
}

.input__expiry-date {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.e-card__body .e-input__left,
.form-element-wrapper .e-input__left {
  display: flex;
  align-items: center;
  align-self: stretch;
  height: 100%;
}

.e-card__body .e-input__left .e-icon,
.form-element-wrapper .e-input__left .e-icon,
.e-card__body .e-input__left .e-icon > div,
.form-element-wrapper .e-input__left .e-icon > div {
  display: flex;
  align-items: center;
}

.date-separator {
  padding: 0;
  margin: 0;
}

.input__expiry-date--month,
.input__expiry-date--year {
  width: auto !important;
  min-width: 3ch !important;
  text-align: center;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 0.1rem;
  margin: 0;
  font: inherit;
}

.form__grid-area--card-input .input__input-container,
.form__grid-area--cvv-input .input__input-container,
.form__grid-area--expiry-date .input__input-container,
.form__grid-area--cardholder .input__input-container {
  flex: 1;
}

.form__grid-area--card-input .input__input,
.form__grid-area--cvv-input .input__input,
.form__grid-area--expiry-date .input__input,
.form__grid-area--cardholder .input__input {
  padding-left: 0.3rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.form__grid-area--card-input .input__input:focus,
.form__grid-area--cvv-input .input__input:focus,
.form__grid-area--expiry-date .input__input:focus,
.form__grid-area--cardholder .input__input:focus {
  outline: none;
  border: none;
  background: transparent;
  box-shadow: none;
}

.pay-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  pointer-events: none;
}

.ec-wrap {
  position: relative;
  width: 100%;
}

.ec-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  font: inherit;
  color: #00014d;
  cursor: pointer;
}

.ec-value {
  font-weight: 600;
}

.ec-value--ph {
  color: #98a2b3;
  font-weight: 400;
}

.ec-cal-icon {
  width: 20px;
  height: 20px;
  color: #667085;
}

.ec-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.15);
  padding: 0.9rem;
  width: 280px;
}

.ec-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #667085;
  margin-bottom: 0.4rem;
}

.ec-label--year {
  margin-top: 0.9rem;
}

.ec-months {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
}

.ec-years {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.ec-cell {
  border: 1px solid transparent;
  background: #f2f4f7;
  border-radius: 6px;
  padding: 0.4rem 0.2rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.ec-cell:hover {
  background: #e7f2fa;
}

.ec-cell--on {
  background: #007bc4;
  color: #fff;
}

.ec-nav {
  border: none;
  background: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: #007bc4;
  padding: 0 0.3rem;
}

.tk-page,
.pay-page {
  font-family: 'Poppins', system-ui, sans-serif;
}

.tk-topbar {
  background: #007bc4;
  color: #fff;
  text-align: center;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
}

.tk-header {
  background: #fff;
  border-bottom: 1px solid #d0d5dd;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tk-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.8rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tk-brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: #007bc4;
  text-decoration: none;
}

.tk-nav a {
  color: #101828;
  text-decoration: none;
  margin-left: 1rem;
  font-size: 0.9rem;
}

.tk-nav a:hover {
  color: #007bc4;
}

.tk-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.tk-hero {
  background: linear-gradient(180deg, #e7f2fa 0%, #f6fafd 100%);
  border-radius: 16px;
  padding: 2.5rem;
}

.tk-hero__inner {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 420px);
  gap: 2rem;
  align-items: center;
}

.tk-hero__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  margin: 0 0 0.6rem;
}

.tk-hero__desc {
  color: #667085;
}

.tk-card {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
  padding: 1.5rem;
}

.tk-card__title {
  margin: 0 0 0.3rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.tk-card__intro {
  color: #667085;
  font-size: 0.92rem;
  margin: 0 0 1.2rem;
}

.fld {
  margin-bottom: 1rem;
}

.fld__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.fld__label span {
  color: #e5484d;
}

.fld__box {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.fld__box.fld--err {
  border-color: #ba0808;
}

.fld__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 0.8rem 0.9rem;
  font: inherit;
  color: #00014d;
  background: transparent;
}

.fld__count {
  padding: 0 0.9rem;
  color: #667085;
  font-size: 0.8rem;
  background: #f2f4f7;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.fld__eye {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 0.9rem 0 0.4rem;
  color: #667085;
}

.fld__eye svg {
  width: 20px;
  height: 20px;
}

.fld__hint {
  color: #667085;
  font-size: 13px;
  margin-top: 4px;
}

.fld__msg {
  color: #ba0808;
  font-size: 13px;
  margin-top: 4px;
}

.fld__tick,
.fld__warn {
  display: flex;
  align-items: center;
  padding-right: 0.9rem;
}

.fld__tick-svg,
.fld__warn-svg {
  width: 22px;
  height: 22px;
}

.btn-primary {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 0.9rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: #007bc4;
  cursor: pointer;
}

.btn-primary:not(:disabled):hover {
  background: #0069a8;
}

.btn-primary:disabled {
  background: #98a2b3;
  cursor: not-allowed;
}

.pay-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.pay-section {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.pay-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
}

.pay-subtitle {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.4rem 0 0;
}

.pay-desc {
  color: #667085;
  font-size: 0.9rem;
  margin: 0.2rem 0 1.2rem;
}

.pay-row {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
}

.pay-row .fld {
  flex: 1;
}

.pay-sep {
  font-size: 1.2rem;
  padding-bottom: 0.9rem;
  color: #667085;
}

@media (max-width: 768px) {
  .tk-hero__inner {
    grid-template-columns: 1fr;
  }
}

.tk-footer {
  background: #0b1b2b;
  color: #cbd5e1;
  margin-top: 2rem;
}

.tk-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.tk-footer__brand {
  color: #fff;
  font-weight: 700;
}

.tk-footer a {
  color: #cbd5e1;
  text-decoration: none;
  margin-right: 1rem;
  font-size: 0.9rem;
}

.tk-footer a:hover {
  color: #fff;
}

.form__grid-area--cardholder .input__input {
  padding-left: 3rem;
}

.cd-section-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}

.cd-section-title--sub {
  font-size: 1rem;
  margin-top: 0.75rem;
}

.cd-section-sub {
  color: #667085;
  font-size: 0.92rem;
  margin: 0 0 1.2rem;
}

.cd-field {
  margin-bottom: 1rem;
}

.cd-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.cd-label span {
  color: #e5484d;
}

.cd-box {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.cd-box.cd-err {
  border-color: #ba0808;
}

.cd-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 0.8rem 0.9rem;
  font: inherit;
  color: #00014d;
  background: transparent;
}

.cd-icon {
  display: flex;
  align-items: center;
  padding-right: 0.9rem;
}

.cd-icon svg {
  width: 22px;
  height: 22px;
}

.cd-msg {
  color: #ba0808;
  font-size: 13px;
  margin-top: 4px;
}

.cd-hint {
  color: #667085;
  font-size: 13px;
  margin-top: 4px;
}

.cd-eye {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 0.9rem 0 0;
  color: #667085;
}

.cd-eye svg {
  width: 20px;
  height: 20px;
}

.cd-split {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cd-split .cd-field {
  flex: 1;
  margin-bottom: 0;
}

.cd-sep {
  align-self: center;
  padding-bottom: 1rem;
  color: #667085;
}

.cd-fill {
  flex: 1;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  overflow: hidden;
}

.cd-fill .cd-input {
  width: 100%;
}

.val-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  pointer-events: none;
}

.val-icon svg {
  width: 24px;
  height: 24px;
}

.val-error-msg {
  margin: 4px 0 0 16px;
  color: #ba0808 !important;
  font-size: 13px;
}

.e-input--error .e-input__main {
  border-color: #ba0808 !important;
}

.e-input--error .e-input__helper {
  color: #ba0808 !important;
}

/* card fields: input fills box height (clickable) */
.form__grid-area--card-input .input-wrapper__input,
.form__grid-area--cvv-input .input-wrapper__input,
.form__grid-area--expiry-date .input-wrapper__input,
.form__grid-area--cardholder .input-wrapper__input {
  align-items: stretch !important;
}
.form__grid-area--card-input .input__input-container,
.form__grid-area--cvv-input .input__input-container,
.form__grid-area--expiry-date .input__input-container,
.form__grid-area--cardholder .input__input-container {
  align-self: stretch !important;
}
.form__grid-area--card-input .input__input,
.form__grid-area--cvv-input .input__input,
.form__grid-area--expiry-date .input__input,
.form__grid-area--cardholder .input__input {
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0;
}


.input__expiry-date {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.1rem;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.input__expiry-date > * { flex: 0 0 auto !important; }


.expiry-inline { display: flex; align-items: center; gap: 0.1rem; flex: 0 0 auto; }
.expiry-in { width: 1.9em; min-width: 1.9em; flex: 0 0 auto; text-align: left; border: none; outline: none; background: transparent; padding: 0; font: inherit; color: #00014d; }
.expiry-slash { color: #667085; }


.pay-declined { display: flex; align-items: center; gap: 1rem; background: #fef2f2; border: 1px solid #e5484d; border-radius: 12px; padding: 1rem 1.25rem; margin: 1rem auto 0; max-width: 720px; }
.pay-declined__icon { flex: 0 0 auto; display: flex; align-items: center; width: auto; height: auto; border-radius: 0; background: none; color: inherit; font-weight: normal; font-size: inherit; }
.pay-declined__body h3 { margin: 0 0 0.35rem; color: #b42318; font-size: 1rem; }
.pay-declined__body p { margin: 0 0 0.35rem; color: #7a271a; font-size: 0.9rem; line-height: 1.5; }
.pay-declined__body p:last-child { margin-bottom: 0; }

.pay-notice { display: flex; align-items: flex-start; gap: 0.6rem; background: #fff; border: 1px solid #006baa; border-left: 4px solid #006baa; border-radius: 8px; padding: 0.9rem 1.1rem; margin: 0 0 1.25rem; max-width: 720px; position: relative; }
.pay-notice__icon { flex: 0 0 auto; display: flex; align-items: center; margin-top: 1px; }
.pay-notice__body h3 { margin: 0 0 0.35rem; color: #006baa; font-size: 1rem; }
.pay-notice__body p { margin: 0; color: #33415c; font-size: 0.9rem; line-height: 1.5; }
.pay-notice__btn { display: block; width: 100%; margin-top: 16px; border: 0; border-radius: 8px; background: #006baa; color: #fff; font-size: 16px !important; font-weight: 600; padding: 13px 20px; cursor: pointer; }
.pay-notice__btn:hover { background: #00538a; }

.pay-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(13, 22, 39, 0.55); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.pay-modal-card { background: #fff; border-radius: 14px; padding: 28px 26px 24px; max-width: 420px; width: 90%; text-align: center; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
.pay-modal-icon { display: flex; justify-content: center; margin-bottom: 10px; }
.pay-modal-card h3 { margin: 0 0 8px; color: #006baa; font-size: 17px; }
.pay-modal-card.ok h3 { color: #107c10; }
.pay-modal-card p { margin: 0 0 18px; color: #33415c; font-size: 14px; line-height: 1.5; }
.pay-modal-close { position: absolute; top: 8px; right: 14px; background: none; border: 0; font-size: 1.5rem; line-height: 1; color: #64748b; cursor: pointer; }
.pay-declined__cta { margin-left: auto; border: 0; border-radius: 8px; padding: 0.6rem 1rem; background: #e5484d; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.pay-declined__cta:hover { background: #d92d20; }


.pay-loader { display: inline-block; width: 18px; height: 18px; margin-right: 0.5rem; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: payspin 0.7s linear infinite; vertical-align: middle; }
@keyframes payspin { to { transform: rotate(360deg); } }

.pay-declined { display: flex; align-items: flex-start; gap: 0.6rem; background: #fff; border: 1px solid #e5484d; border-radius: 8px; padding: 0.9rem 1.1rem 0.9rem 1.4rem; margin: 1.25rem auto 1.5rem; max-width: 720px; position: relative; z-index: 5; }

.pay-declined__left { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #e5484d; border-radius: 7px 0 0 7px; }

.pay-declined__icon { display: flex; flex: 0 0 auto; align-items: center; margin-top: 1px; }
.pay-declined__tri { width: 22px; height: 22px; }
.pay-declined__text { color: #ba0808; font-size: 0.95rem; font-weight: 600; }


.pay-msg { color: #d92d20 !important; font-size: 13px; font-weight: 600; margin-top: 4px; font-family: 'Poppins', system-ui, sans-serif; }


.pay-msg { display: block !important; width: 100% !important; flex-basis: 100% !important; }


.form__grid-area--expiry-date { display: block !important; }