/* ==========================================================================
   Payment Method UX
   Covers: method selection, radio highlighting, card entry box, Manage Wallet,
           gateway field styling, billing field styling
   Epic: Pay Now in the Portal
   Base em context: 14px (Bootstrap 3 body font-size)
   ========================================================================== */

:root {
    --portal-highlight-bg: #F0F6FA;
    --portal-highlight-border: #215583;
    --portal-option-border: #E5E5E5;
    --portal-secure-entry-text: #36658F;
    --portal-field-border: #D8D8D8;
    --portal-field-bg: #F7F8F9;
    --portal-error-border: #FF595A;
}

/* Manage Wallet — positioned top-right of content box, vertically centered with h3 */
.manageWalletBtn {
    float: right;
    margin-top: 0.3em;
    height: 2.25em;
}
.contentBox > .manageWalletBtn ~ h3 {
    line-height: 1.4;
    padding-top: 0.35em;
    padding-bottom: 0;
    margin-bottom: 0.5357em;
}

/* Remove Bootstrap column padding/float inside amountAndPaymentMethod — contentBox already provides padding.
   Clearing the float on col-md-12 prevents margin collapse from being eaten by float clearance on .paymentMethodDivider. */
.amountAndPaymentMethod > .col-md-12,
.amountAndPaymentMethod [name="paymentMethodOptions"] {
    padding-left: 0;
    padding-right: 0;
    float: none;
}
.amountAndPaymentMethod .paymentMethodOption .col-md-10,
.amountAndPaymentMethod .paymentMethodOption .col-md-1 {
    padding-left: 0;
    padding-right: 0;
}

/* Card logo group — spacing when visible */
.cardLogoGroup {
    padding: 0 0 1.15em 0;
}

/* V2 captcha container — collapse when emptied after validation passes */
div[id^="singlePaymentCaptchaV2"]:empty {
    display: none;
}

/* Divider between sections.
   Bottom margin is 1em minus ~2px ascender gap in the following uppercase label,
   so the visual distance from the line to the cap tops reads as 1em. */
.paymentMethodDivider {
    border-top: 1px solid #8F8F8F;
    margin: 1em 0 0.857em;
    clear: both;
}

/* Balance display — tighter line-height */
.singlePaymentDisplay.balance {
    line-height: 1em;
    margin-bottom: 0.5357em;
}

/* Section labels — uppercase per design, line-height: 1 minimizes half-leading so
   the divider's 1em margin lands visually at the top of the text */
.paymentMethodHeader {
    margin-bottom: 0.35em;
    line-height: 1;
}
.paymentMethodHeader label {
    display: block;
    margin-top: 0;
    margin-bottom: -0.072em;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.035em;
    line-height: 1;
}

/* Override wallet checkbox defaults — consistent text color, inactive borders, tighter spacing */
#singlePaymentForm .checkbox {
    border-color: var(--portal-option-border);
    margin-top: 0;
    margin-bottom: 0.35715em;
}
#singlePaymentForm .checkbox + .checkbox {
    margin-top: 0;
}
/* Last checkbox in a group — zero bottom margin so the divider's 1em margin controls the gap exactly */
#singlePaymentForm .checkbox:last-child {
    margin-bottom: 0;
}
#singlePaymentForm .checkbox label {
    color: var(--portal-text-primary);
    padding-left: 1.2143em;
    padding-right: 1.2143em;
}

/* Radio buttons in amount/payment section — vertically centered, accent color */
.amountAndPaymentMethod input[type="radio"] {
    accent-color: var(--portal-highlight-border);
    vertical-align: middle;
    margin-top: 0;
    margin-bottom: 2px;
}

/* Amount checkboxes (Pay Total, Pay Another) — active state on whole element */
#singlePaymentForm .amountAndPaymentMethod .checkbox.active {
    border-color: var(--portal-highlight-border);
    background-color: var(--portal-highlight-bg);
}

/* #paymentAmount — match billing inputs by default, card inputs when active */
#paymentAmount {
    height: 1.8em;
    color: var(--portal-text-primary);
    background-color: var(--portal-field-bg);
    border: 1px solid var(--portal-field-border);
    border-radius: 0.3em;
    padding: 0 0.35em;
}
.checkbox.active #paymentAmount {
    background-color: #FFFFFF;
}

/* Radio row containers — bordered card style */
.paymentMethodOption,
.addPaymentMethodOption {
    border: 1px solid var(--portal-option-border);
    border-radius: 0.3em;
    margin-bottom: 0.35715em;
}
.paymentMethodOption label,
.addPaymentMethodOption label {
    color: var(--portal-text-primary);
    width: 100%;
    padding: 0.4em 0.7em;
    border-radius: 0.3em;
    transition: background-color 0.15s, border-color 0.15s;
}

/* Active state — selected payment method with border + background on whole element */
.paymentMethodOption.active,
.addPaymentMethodOption.active {
    border-color: var(--portal-highlight-border);
    background-color: var(--portal-highlight-bg);
}
.paymentMethodOption.active input[type="radio"] ~ *,
.addPaymentMethodOption.active input[type="radio"] ~ * {
    font-weight: 600;
}

/* "Enter Payment Method" option — dashed border when not active, solid when active */
#singlePaymentForm .addPaymentMethodOption {
    border-style: dashed;
    margin-top: 0.4em;
    margin-bottom: 1.5em;
}
#singlePaymentForm .addPaymentMethodOption.active {
    border-style: solid;
}

/* Subtext under Enter New Card Information */
.enterNewCardSubtext {
    font-size: 0.8571428571em;
    color: #555;
    margin-bottom: -0.5em;
}

/* Blue outline box around new card entry (non-Element gateways) */
.newCardOutlineBox {
    background: var(--portal-highlight-bg);
    border: 1px solid var(--portal-highlight-border);
    border-radius: 0.4em;
    padding: 1.2143em;
    margin-top: 1em;
    color: var(--portal-text-primary);
}

/* "Secure Card Entry" header inside the blue box */
.secureCardEntryHeader {
    color: var(--portal-secure-entry-text);
    font-size: 0.85em;
    font-weight: 400;
    line-height: 0.85em;
    margin-bottom: 1em;
}

/* Gateway field labels — uppercase inside card entry box */
.newCardOutlineBox label {
    text-transform: uppercase;
    font-size: 0.71429em;
    letter-spacing: 0.02em;
}
/* Non-Braintree gateway labels — display: block eliminates Bootstrap's inline-block strut,
   line-height: 1 removes half-leading, margin-bottom: 3px matches Braintree's label gap */
.newCardOutlineBox .gateway-fields label {
    display: block;
    line-height: 1;
    margin-bottom: 3px;
}

.singlePayCC::after {
    content: '';
    display: table;
    clear: both;
}

.singlePayCC .secureCardDisplay {
    margin: 1px 0 -5px 0;
}

/* Billing form field labels — display: block eliminates the CSS strut, specificity bumped with
   .singlePayCC to override .billingForm label { margin-bottom: 0 } from pestportals.css (0,1,1) */
.singlePayCC .billingFieldLabel {
    display: block;
    text-transform: uppercase;
    font-size: 0.71429em;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 0;
}

/* Gateway fields container — no extra padding (newCardOutlineBox provides sufficient padding) */
.newCardOutlineBox .gateway-fields {
    padding: 0;
}
/* Card number group — bottom margin separates it from the expiration/CVV row */
.newCardOutlineBox .gateway-fields > div:first-child {
    margin-bottom: 0.7142857143em;
}

/* Reset Bootstrap row inside card entry box — gateway-fields handles its own layout */
.newCardOutlineBox .row.form-group-sm {
    gap: 0;
    margin: 0;
    padding: 0;
}

/* Expiration + CVV row — equal width with gap */
.newCardOutlineBox .gateway-field-row {
    display: flex;
    gap: 1.2143em;
}
.newCardOutlineBox .gateway-field-row > div {
    flex: 1;
}

/* Card entry iframe containers — sized to match design */
.newCardOutlineBox .gateway-iframe-field,
.newCardOutlineBox .gateway-text-field {
    height: 1.7857142857em;
    border: 1px solid var(--portal-field-border);
    border-radius: 0.3em;
    background: #FFFFFF;
    overflow: hidden;
}

/* Override .singlePayCC input[type="text"] — gateway fields need white background and no margin */
.singlePayCC .newCardOutlineBox input[type="text"].gateway-text-field {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 1px 5px 0;
    margin: 0;
    color: #1A1A1A;
    font-size: 14px;
    line-height: 1.7857142857em;
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
}
.singlePayCC .newCardOutlineBox input[type="text"].gateway-text-field::placeholder {
    color: #757575;
    letter-spacing: 1.5px;
}

/* Ensure iframe fills container — !important needed to override inline styles injected by gateway SDKs (e.g., NMI CollectJS) */
.newCardOutlineBox .gateway-iframe-field iframe {
    display: block !important;
    height: 1.7857142857em !important;
    width: 100% !important;
    border: none !important;
}

/* Payrix: border lives on the SDK .input inside the iframe (so the SDK can swap it to red on
   validation failure). Remove the outer container border and let the iframe cover the full area. */
#payrix_number,
#payrix_expiration,
#payrix_cvv {
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
#payrix_number iframe,
#payrix_expiration iframe,
#payrix_cvv iframe {
    height: 1.7857142857em !important;
}


/* Billing form rows — equal-width columns with gap, reset Bootstrap row margins */
.singlePayCC .row.form-group-sm {
    display: flex;
    gap: 1.5em;
    margin-left: 0;
    margin-right: 0;
}
/* Hide Bootstrap clearfix pseudo-elements — they become phantom flex items that gap adds space around */
.singlePayCC .row.form-group-sm::before,
.singlePayCC .row.form-group-sm::after {
    display: none;
}
.singlePayCC .row.form-group-sm > [class*="col-"] {
    flex: 1;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    float: none;
}
.singlePayCC .row.form-group-sm > .col-md-12 {
    flex: 0 0 100%;
}

/* Billing form container — bottom padding, last row flush */
.singleCardElements.billingForm {
    padding-bottom: 1.5em;
}
.singlePayCC .row.form-group-sm:last-of-type {
    margin-bottom: -3px;
}
.singlePayCC .newCardOutlineBox .row.form-group-sm:last-of-type {
    margin-bottom: 0;
}

/* Billing form fields — shared dimensions, different background (sits on white) */
.singlePayCC input[type="text"],
.singlePayCC select {
    height: 1.7857142857em;
    color: var(--portal-text-primary);
    background-color: var(--portal-field-bg);
    border: 1px solid var(--portal-field-border);
    border-radius: 0.3em;
    padding: 0 0.35em;
    width: 100%;
    box-sizing: border-box;
}

/* Focused billing fields — 1px active border */
.singlePayCC input[type="text"]:focus,
.singlePayCC select:focus {
    border: 1px solid var(--portal-highlight-border);
    outline: none;
}

/* Validation error state */
.singlePayCC input[type="text"].invalid,
.singlePayCC select.invalid,
#paymentAmount.invalid {
    border-color: var(--portal-error-border);
}

.singlePayCC input[type="text"].invalid:focus-visible,
.singlePayCC select.invalid:focus-visible,
#paymentAmount.invalid:focus-visible {
    outline: var(--portal-error-border) auto;
}

/* Tipping-active button visibility — !important overrides inline styles set by
   toggleSaveLoader, jQuery .toggle(), and other JS controlling button display */
#submitPaymentOptionsButton.hide-for-tipping {
    display: none !important;
}

/* WCAG-compliant text colors for form labels */
#singlePaymentForm label,
#singlePaymentForm .checkbox label,
.amountAndPaymentMethod label,
.singleCardElements label {
    color: var(--portal-text-primary);
}

/* Save to Wallet — checkbox resets and initials outline box (FR-6034) */
#saveToWalletSection .checkbox {
    border: none;
    border-radius: 0;
    padding: 0;
    display: block;
    color: inherit;
}
#singlePaymentForm #saveToWalletSection .checkbox label {
    display: flex;
    align-items: center;
    padding: 0;
    line-height: normal;
}
#saveToWalletSection .checkbox input[type="checkbox"] {
    position: static;
    margin-left: 0;
    margin-top: 0;
    margin-right: 7px;
}
#defaultAutopaySection .checkbox {
    padding-left: 20px;
}
#singlePaymentAutopayInitials {
    width: 60px;
    display: inline-block;
    text-align: center;
    background: #FFFFFF;
    margin: 0;
    position: relative;
    top: 2px;
}
#singlePaymentAutopayInitialsSection label {
    display: inline;
    color: inherit;
}
#singlePaymentAutopayInitialsSection {
    border: 1px solid var(--portal-highlight-border);
    border-radius: 0.4em;
    background-color: var(--portal-highlight-bg);
    padding: calc(1.2143em - 2px) 1.2143em calc(1.2143em - 5px);
    margin-top: 9px;
}

/* =====================================================================
   Braintree Drop-in Overrides
   Unlike Spreedly/NMI/Payrix where we control the outer HTML and they inject iframes,
   Braintree's drop-in injects the ENTIRE form (labels, layout, borders, card icons).
   We override everything to match our design. Pinned to drop-in v1.23.0.
   Targeted via data-braintree-id where possible (class names may change between versions).
   ===================================================================== */

/* Hide decorative/navigation elements — we only want the card entry form */
.newCardOutlineBox [data-braintree-id="methods-label"],
.newCardOutlineBox [data-braintree-id="methods-edit"],
.newCardOutlineBox [data-braintree-id="choose-a-way-to-pay"],
.newCardOutlineBox [data-braintree-id="other-ways-to-pay"],
.newCardOutlineBox [data-braintree-id="toggle"],
.newCardOutlineBox .braintree-methods,
.newCardOutlineBox .braintree-options {
    display: none !important;
}

/* Prevent drop-in from hiding the card form after successful tokenization —
   keep the form visible throughout the payment flow.
   Target specifically the card sheet, not other payment method sheets (venmo, etc). */
.newCardOutlineBox [data-braintree-id="card"].braintree-sheet {
    display: block !important;
    transform: none !important;
    opacity: 1 !important;
    max-height: none !important;
}

/* Placeholder is a loading spacer ( ) — hide once form loads (.braintree-hidden),
   collapse to zero when empty so it doesn't add space between our header and fields */
.newCardOutlineBox .braintree-placeholder {
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
}
.newCardOutlineBox .braintree-placeholder.braintree-hidden {
    display: none !important;
}

/* Sheet-level error — pull the icon into the left margin so the message
   stays on one line at typical widths. Negative left margin on the icon
   shifts it outside the text flow; the container's left margin makes room. */
.newCardOutlineBox [data-braintree-id="sheet-error"] {
    margin: 10px 0 -4px 12px;
    padding: 0;
}
.braintree-sheet--has-error .braintree-sheet__error .braintree-sheet__error-icon {
    margin-left: -24px;
    margin-right: 0;
}
.newCardOutlineBox [data-braintree-id="sheet-error"]:empty,
.newCardOutlineBox [data-braintree-id="sheet-error"].braintree-hidden {
    display: none !important;
}

/* Reserve space for the Braintree drop-in and ensure it spans the full container width
   so the loading indicator centers horizontally */
#dropin-container {
    min-height: 86px;
    width: 100%;
}
.newCardOutlineBox .braintree-loader__container {
    height: 86px;
    left: 0;
}

/* Strip Braintree's outer container styling — our .newCardOutlineBox is the visual container */
.newCardOutlineBox .braintree-dropin {
    padding: 0;
    margin: 0;
    min-width: 0;
}
.newCardOutlineBox .braintree-upper-container {
    min-height: 0;
    border-radius: 0;
}
.newCardOutlineBox .braintree-upper-container::before {
    background-color: transparent;
    border: none;
}
.newCardOutlineBox .braintree-sheet__container {
    margin: 0;
}
.newCardOutlineBox .braintree-sheet {
    border: none;
    border-radius: 0;
    background: transparent;
    margin: 0;
}

/* Hide the "Pay with card" header + card brand icons — our secureCardEntryHeader replaces this */
.newCardOutlineBox .braintree-sheet__header {
    display: none;
}

/* Strip content padding — newCardOutlineBox provides its own */
.newCardOutlineBox .braintree-sheet__content {
    padding: 0;
}

/* Form field groups — flex column eliminates the inline formatting strut
   (a phantom 3-4px gap from anonymous inline boxes at the parent's font-size).
   Card number field-group gets 10px bottom margin to match other gateways;
   exp/cvv fields inside flexible-fields get 0 (newCardOutlineBox padding handles it). */
.newCardOutlineBox .braintree-form__field-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    padding-left: 0;
}
.newCardOutlineBox .braintree-form__flexible-fields > .braintree-form__field-group {
    flex: 1;
    margin-bottom: 0;
}

/* Labels — match our .newCardOutlineBox label style.
   Specificity must beat Braintree's .braintree-sheet__content--form
   .braintree-form__field-group .braintree-form__label (0,3,0). */
.newCardOutlineBox .braintree-sheet__content--form .braintree-form__field-group .braintree-form__label {
    display: block;
    text-transform: uppercase;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0.02em;
    line-height: 1;
    font-weight: 400;
    color: inherit;
    margin-bottom: 3px;
    white-space: nowrap;
}
/* Format hint "(MM/YY)" — match the label's style, override Braintree's
   .braintree-sheet__content--form .braintree-form__field-group .braintree-form__descriptor (0,3,0) */
.newCardOutlineBox .braintree-sheet__content--form .braintree-form__field-group .braintree-form__descriptor {
    color: inherit;
    font-size: inherit;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: inherit;
}

/* Inline field errors — visible when Braintree shows them. */
.newCardOutlineBox .braintree-form__field-error {
    margin: 2px 0 0;
    line-height: 1;
}
.braintree-sheet__content--form .braintree-form__field-group.braintree-form__field-group--has-error .braintree-form__field-error {
    margin: 0;
}

/* Field wrapper — reset Braintree's padding that creates extra space above error messages */
.newCardOutlineBox .braintree-form__field {
    padding: 0;
}

/* Hosted field containers (iframe wrappers) — match our gateway-iframe-field.
   Specificity must beat Braintree's .braintree-sheet__content--form .braintree-form__field-group
   .braintree-form__field .braintree-form__hosted-field (0,4,0) which sets height: 44px. */
.newCardOutlineBox .braintree-sheet__content--form .braintree-form__field-group .braintree-form__field .braintree-form__hosted-field {
    height: 25px;
    border: 1px solid var(--portal-field-border);
    border-radius: 4px;
    background: #FFFFFF;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transition: border-color 0.15s;
}
.newCardOutlineBox .braintree-sheet__content--form .braintree-form__field-group .braintree-form__field .braintree-form__hosted-field iframe {
    height: 100% !important;
}

/* Focused hosted field — active border */
.newCardOutlineBox .braintree-sheet__content--form .braintree-form__field-group .braintree-form__field .braintree-form__hosted-field.braintree-hosted-fields-focused {
    border-color: var(--portal-highlight-border);
}

/* Expiration + CVV in a row — match our gateway-field-row layout */
.newCardOutlineBox .braintree-form__flexible-fields {
    display: flex;
    gap: 17px;
}

/* Hide elements not needed in our layout: card/error icons, CVV descriptor, payment toggle */
.newCardOutlineBox .braintree-form__icon-container,
.newCardOutlineBox [data-braintree-id="cvv-label-descriptor"],
.newCardOutlineBox .braintree-test-class.braintree-options {
    display: none;
}

/* Reset background on native inputs Braintree injects — prevents pestportals.css
   `form input { background-color: #f0f0f0 }` from bleeding through */
.newCardOutlineBox .braintree-dropin input {
    background-color: transparent;
}

/* Save card checkbox — hide (not applicable for single payment) */
.newCardOutlineBox [data-braintree-id="save-card-field-group"] {
    display: none;
}

/* Element Gateway: "Enter Credit Card" button (#renderSecureCardFormButton) lives in the
   button group as a sibling of Make Payment. paymentMethodUX.js toggles visibility based
   on payment method selection. Styled to match #submitPaymentOptionsButton. */
#renderSecureCardFormButton {
    display: inline-block;
    margin: 0;
    font-weight: normal;
}
#elementSingleFrame {
    padding-bottom: 6px;
    background: transparent !important;
}

/* Shown during slow payment requests */
.payment-status-message {
    position: absolute;
    top: calc(20% + 120px);
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 14px;
    margin: 0;
}

/* Prevent the overlay from covering the dialog when browser extensions disrupt DOM order */
.systemResponseDialog.ui-dialog + .ui-widget-overlay {
    z-index: 9998 !important;
}