.iftp-pbl-live-field {
    /* Warning system */
    --iftp-warn-base:              var(--wpforms-label-error-color, #d63638);
    --iftp-warn-bg:                color-mix(in srgb, var(--iftp-warn-base) 8%, white);
    --iftp-warn-border:            color-mix(in srgb, var(--iftp-warn-base) 28%, white);
    --iftp-warn-accent:            var(--iftp-warn-base);
    --iftp-warn-title:             color-mix(in srgb, var(--iftp-warn-base) 85%, black);
    --iftp-warn-text:              color-mix(in srgb, var(--iftp-warn-base) 70%, black);
    --iftp-warn-bt-text:           color-mix(in srgb, var(--iftp-warn-base) 10%, rgb(255 255 255));
    --iftp-warn-text-dk:           color-mix(in srgb, var(--iftp-warn-base) 55%, black);

    /* WPForms button variables */
    --iftp-button-bg:              var(--wpforms-button-background-color);
    --iftp-button-bg-color-alt:     var(--wpforms-button-background-color-alt);
    --iftp-button-bg-hover:        color-mix(in srgb, var(--iftp-button-bg) 85%, black);
    --iftp-button-text:            var(--wpforms-button-text-color);
    --iftp-button-border-color:    var(--wpforms-button-border-color);
    --iftp-button-border-radius:   var(--wpforms-button-border-radius);
    --iftp-button-border-style:    var(--wpforms-button-border-style);
    --iftp-button-border-width:    var(--wpforms-button-border-size);
    --iftp-button-height:          var(--wpforms-button-size-height);
    --iftp-button-font-size:       var(--wpforms-button-size-font-size);
    --iftp-button-padding-h:       var(--wpforms-button-size-padding-h);
    --iftp-button-transition:      all 0.15s ease-in-out;
    --iftp-button-font-weight:     500;

    /* Text WPForms varible */
    --iftp-field-text-label-color:       var(--wpforms-label-color);

    /* WPForms variables for border */
    --iftp-field-background-color: var(--wpforms-field-background-color);
    --iftp-field-border-style:     var(--wpforms-field-border-style);
    --iftp-field-border-radius:    var(--wpforms-field-border-radius);
    --iftp-field-border-color:     var(--wpforms-field-border-color);

}

.iftp-pbl-field-block-section{
    background-color: var(--iftp-field-background-color) !important;
    background-clip: padding-box !important;
    border-radius: var(--iftp-field-border-radius) !important;
    color: var(--wpforms-field-text-color) !important;
    border-width: var(--wpforms-field-border-size) !important;
    border-style: var(--iftp-field-border-style) !important;
    border-color: var(--iftp-field-border-color) !important;
}

.iftp-pbl-field-shell {
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}

.iftp-pbl-field-shell.iftp-pbl-public-box {
  text-align: left;
}

.iftp-pbl-preview-container {
  margin: 16px 0;
}

.iftp-pbl-header-icon {
  width: 30px !important;
  height: 28px !important;
  margin-right: 20px !important;
}

.iftp-pbl-header-divider {
  display: inline-block;
  width: 1px;
  height: 32px;
  margin: 0 12px;
  background: #d1d5db;
  flex: none;
}

.iftp-pbl-preview-methods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.iftp-pbl-pay-now-button,
.iftp-pbl-public-button {
    height: var(--iftp-button-height) !important;
    background-color: var(--iftp-button-bg-color-alt, var(--iftp-button-bg)) !important;
    color: var(--iftp-button-text) !important;
    border-radius: var(--iftp-button-border-radius) !important;
    border-style: var(--iftp-button-border-style) !important;
    border-width: var(--iftp-button-border-width) !important;
    border-color: var(--iftp-button-border-color) !important;
    padding: 0 var(--iftp-button-padding-h) !important;
    font-family: inherit !important;
    font-size: var(--iftp-button-font-size) !important;
    font-weight: var(--iftp-button-font-weight) !important;
    line-height: 100% !important;
    cursor: pointer !important;
    transition: var(--iftp-button-transition) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    appearance: none !important;
}

.iftp-pbl-pay-now-button:hover,
.iftp-pbl-public-button:hover{
    background-color: var(--iftp-button-bg-hover) !important;
    outline: none !important;
}

.iftp-pbl-pay-now-button:active,
.iftp-pbl-public-button:active {
  background: linear-gradient(
    0deg,
    rgb(0 0 0 / 20%),
    rgb(0 0 0 / 20%)
), var(--iftp-button-bg-hover), var(--iftp-button-bg);
}

.iftp-pbl-pay-now-button:disabled,
.iftp-pbl-public-button:disabled {
    display:none !important;
    margin-top: 0 !important;
}

.iftp-pbl-config-warning,
.iftp-pbl-runtime-warning {
  margin-top: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--iftp-warn-text-dk);
  font-size: 12px;
}

.iftp-pbl-config-warning .wpforms-iftp-pbl-warning-div,
.iftp-pbl-runtime-warning .wpforms-iftp-pbl-warning-div,
.wpforms-iftp-pbl-warning-div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--iftp-warn-bg);
  padding: 10px 12px;
  border-radius: var(--iftp-field-border-radius) !important;
  border-width: var(--wpforms-field-border-size) !important;
  border-style: var(--iftp-field-border-style) !important;
  border-color: var(--iftp-warn-border) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
}

.iftp-pbl-config-warning .wpforms-iftp-pbl-warning-title,
.iftp-pbl-runtime-warning .wpforms-iftp-pbl-warning-title,
.wpforms-iftp-pbl-warning-title {
  margin: 0 !important;
  font-weight: 600 !important;
  color: var(--iftp-warn-title) !important;
  font-size: 15px !important;
  line-height: 1.4;
}

.wpforms-iftp-pbl-warning-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wpforms-iftp-pbl-warning-message {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--iftp-warn-text-dk) !important;
}

/*
 * Return-from-gateway outcome tones — "completed"/"pending" are not warnings and must not
 * read as errors, so they override the shared --iftp-warn-* tokens the warning box otherwise
 * relies on for its background/border/text colors, rather than getting their own markup.
 */
.wpforms-iftp-pbl-warning-div.iftp-pbl-outcome-completed {
  --iftp-warn-base: #1a7f4b;
  --iftp-warn-bg: color-mix(in srgb, var(--iftp-warn-base) 8%, white);
  --iftp-warn-border: color-mix(in srgb, var(--iftp-warn-base) 28%, white);
  --iftp-warn-accent: var(--iftp-warn-base);
  --iftp-warn-title: color-mix(in srgb, var(--iftp-warn-base) 85%, black);
  --iftp-warn-text-dk: color-mix(in srgb, var(--iftp-warn-base) 55%, black);
}

.wpforms-iftp-pbl-warning-div.iftp-pbl-outcome-pending {
  --iftp-warn-base: #00609c;
  --iftp-warn-bg: color-mix(in srgb, var(--iftp-warn-base) 8%, white);
  --iftp-warn-border: color-mix(in srgb, var(--iftp-warn-base) 28%, white);
  --iftp-warn-accent: var(--iftp-warn-base);
  --iftp-warn-title: color-mix(in srgb, var(--iftp-warn-base) 85%, black);
  --iftp-warn-text-dk: color-mix(in srgb, var(--iftp-warn-base) 55%, black);
}

@keyframes iftp-pbl-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(0 96 156 / 0%);
  }

  50% {
    box-shadow: 0 0 0 0.55rem rgb(0 96 156 / 12%);
  }
}

.iftp-pbl-method-item.is-default span {
  outline-offset: 2px;
}

.iftp-pbl-live-field.iftp-pbl-is-blocked .iftp-pbl-methods-section,
.iftp-pbl-live-field.iftp-pbl-is-blocked .iftp-pbl-header-divider {
  display: none !important;
}

/*
 * Another payment gateway field is active on the form — not a misconfiguration to explain
 * to the visitor, just hide the ifthenpay field (box + button) entirely rather than showing
 * a warning (see applyIfthenpayFieldState() in frontend.js).
 */
.iftp-pbl-live-field.iftp-pbl-gateway-conflict {
  display: none !important;
}

/*
 * The wrapper reuses WPForms core's own "wpforms-field" class for theme compatibility, but
 * that class carries the theme's generic per-field padding/spacing (often !important). In
 * "Show pay button only" mode the box is gone and only the button remains, so that inherited
 * padding shows up as a large empty gap below the button — override it explicitly.
 */
.iftp-pbl-live-field.iftp-pbl-box-hidden {
  padding: 15px 0 0 !important;
  margin: 0 !important;
}

.iftp-pbl-hide-wpforms-button .wpforms-submit-container,
.iftp-pbl-hide-wpforms-button input[type="submit"],
.iftp-pbl-hide-wpforms-button button[type="submit"],
.iftp-pbl-hide-wpforms-button .wpforms-submit,
.iftp-pbl-hide-wpforms-button .wpforms-page-button {
  display: none !important;
}

/*
 * Payment outcome popup (confirmation/pending/failed/cancelled), appended to <body> rather
 * than rendered inline on the field. WPForms conditional logic can set the field itself to
 * display:none, which hides all of its descendants regardless of z-index/position — including
 * a fixed-position notice — so the outcome has to live outside the field entirely to stay
 * visible. Colors are self-contained (not var(--iftp-warn-*) from .iftp-pbl-live-field) since
 * the modal isn't guaranteed to be a descendant of that scope.
 */
.iftp-pbl-outcome-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgb(15 23 42 / 55%);
  z-index: 999999;
}

.iftp-pbl-outcome-modal-overlay.iftp-pbl-is-open {
  display: flex;
}

.iftp-pbl-outcome-modal {
  --iftp-modal-bg: #f0f7fb;
  --iftp-modal-border: #b9dced;
  --iftp-modal-title: #00405f;
  --iftp-modal-text: #035073;

  position: relative;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  background-color: var(--iftp-modal-bg);
  border: 1px solid var(--iftp-modal-border);
  border-radius: 8px;
  padding: 28px 24px 24px;
  box-shadow: 0 10px 40px rgb(15 23 42 / 20%);
  font-family: inherit;
  animation: iftp-pbl-modal-in 0.15s ease-out;
}

.iftp-pbl-outcome-modal.iftp-pbl-outcome-completed {
  --iftp-modal-bg: #eafbf1;
  --iftp-modal-border: #b7e4c7;
  --iftp-modal-title: #0f5132;
  --iftp-modal-text: #1a7f4b;
}

.iftp-pbl-outcome-modal.iftp-pbl-outcome-pending {
  --iftp-modal-bg: #f0f7fb;
  --iftp-modal-border: #b9dced;
  --iftp-modal-title: #00405f;
  --iftp-modal-text: #035073;
}

.iftp-pbl-outcome-modal.iftp-pbl-outcome-cancelled,
.iftp-pbl-outcome-modal.iftp-pbl-outcome-failed {
  --iftp-modal-bg: #fdeaea;
  --iftp-modal-border: #f3b4b4;
  --iftp-modal-title: #842029;
  --iftp-modal-text: #b42318;
}

.iftp-pbl-outcome-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--iftp-modal-text);
  cursor: pointer;
  padding: 6px;
}

.iftp-pbl-outcome-modal-title {
  margin: 0 24px 8px 0 !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  line-height: 1.4;
  color: var(--iftp-modal-title) !important;
}

.iftp-pbl-outcome-modal-message {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--iftp-modal-text) !important;
}

.iftp-pbl-outcome-modal-entry-preview {
  display: none;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--iftp-modal-border);
}

.iftp-pbl-entry-preview-row {
  margin: 0 0 6px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--iftp-modal-text) !important;
}

.iftp-pbl-entry-preview-row:last-child {
  margin-bottom: 0 !important;
}

@keyframes iftp-pbl-modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/*
 * Form outcome animations — played on the outer .wpforms-container itself once an
 * external Pay By Link payment resolves (see frontend.js
 * resolveExternalPayment()/animateFormOutcome()). "closing" recedes the form as if it's
 * settling behind the popup that's about to appear over it; animateFormOutcome() then
 * follows this fade-out with a jQuery slideUp() collapsing its height/margin/padding to
 * nothing too — this class alone only fades/shrinks it in place, which would otherwise
 * leave its full box still reserving its old space on the page (a blank gap where the
 * form used to be). "shake" is a quick, self-reverting shake for a cancelled/failed
 * attempt, since the form stays usable afterwards for another try.
 */
.iftp-pbl-form-closing {
  transition: opacity 320ms ease, transform 320ms ease, filter 320ms ease;
  transform: translateY(-28px) scale(0.97);
  opacity: 0;
  filter: blur(1px);
  pointer-events: none;
}

@keyframes iftp-pbl-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.iftp-pbl-form-shake {
  animation: iftp-pbl-shake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}