/*
 * Scoped under .awip-pf-wrap and !important throughout on purpose: this form
 * is embedded via shortcode into arbitrary WordPress pages/themes, whose own
 * global styles (body, input, button, label, *, etc.) would otherwise bleed
 * in and break the design. !important guarantees this exact look regardless
 * of the host theme.
 */
.awip-pf-wrap {
    --awip-ink-950: #17151F;
    --awip-ink-700: #43404F;
    --awip-ink-500: #7A7686;
    --awip-ink-300: #B4AFC2;
    --awip-paper: #FFFFFF;
    --awip-surface: #F6F4FB;
    --awip-surface-line: #E7E3F2;
    --awip-line: #E4E1EA;
    --awip-violet-600: #6D28D9;
    --awip-violet-700: #5B21B6;
    --awip-violet-50: #F2ECFD;
    --awip-ok: #1F9D63;

    --awip-display: "Manrope", -apple-system, sans-serif;
    --awip-body: "Inter", -apple-system, sans-serif;
    --awip-mono: "IBM Plex Mono", ui-monospace, monospace;

    max-width: 980px !important;
    margin: 24px auto !important;
    padding: 0 !important;
    font-family: var(--awip-body) !important;
    color: var(--awip-ink-950) !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
    text-align: left !important;
}

.awip-pf-wrap *,
.awip-pf-wrap *::before,
.awip-pf-wrap *::after {
    box-sizing: border-box !important;
}

.awip-pf-wrap :focus-visible {
    outline: unset; !important;
    outline-offset: unset !important;
    border-radius: unset !important;
}

.awip-pf-checkout {
    background: var(--awip-paper) !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 2px rgba(23, 21, 31, 0.04), 0 24px 60px -24px rgba(23, 21, 31, 0.18) !important;
    display: grid !important;
    grid-template-columns: 0.86fr 1.14fr !important;
    overflow: hidden !important;
    border: 1px solid var(--awip-line) !important;
    margin: 0 !important;
}

/* ===================== LEFT: invoice summary ===================== */
.awip-pf-summary {
    background: var(--awip-surface) !important;
    padding: 40px 36px 36px !important;
    position: relative !important;
    border-right: 1px dashed var(--awip-surface-line) !important;
    margin: 0 !important;
}

.awip-pf-summary::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: -9px !important;
    bottom: 0 !important;
    width: 18px !important;
    background-image: radial-gradient(circle, var(--awip-paper) 5px, transparent 5.5px) !important;
    background-size: 18px 22px !important;
    background-repeat: repeat-y !important;
}

.awip-pf-brand {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    margin: 0 0 30px !important;
    padding: 0 !important;
}

.awip-pf-brand-mark {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    background: var(--awip-ink-950) !important;
    color: var(--awip-paper) !important;
    display: grid !important;
    place-items: center !important;
    font-family: var(--awip-display) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    flex: none !important;
    margin: 0 !important;
}

.awip-pf-brand-logo {
    object-fit: contain !important;
    background: var(--awip-paper) !important;
    border: 1px solid var(--awip-line) !important;
}

.awip-pf-brand-name {
    font-family: var(--awip-display) !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    color: var(--awip-ink-950) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.awip-pf-brand-addr {
    font-size: 13px !important;
    color: var(--awip-ink-500) !important;
    margin: 2px 0 0 !important;
    line-height: 1.4 !important;
}

.awip-pf-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 18px 0 22px !important;
    border-top: 1px solid var(--awip-surface-line) !important;
    border-bottom: 1px solid var(--awip-surface-line) !important;
    margin: 0 0 26px !important;
}

.awip-pf-meta-row {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    font-size: 13.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.awip-pf-meta-row .k {
    color: var(--awip-ink-500) !important;
    font-weight: 400 !important;
}

.awip-pf-meta-row .v {
    color: var(--awip-ink-950) !important;
    font-weight: 600 !important;
    font-family: var(--awip-mono) !important;
    font-size: 13px !important;
    text-align: right !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.awip-pf-items {
    margin: 0 0 22px !important;
    padding: 14px 16px !important;
    background: var(--awip-paper) !important;
    border: 1px solid var(--awip-surface-line) !important;
    border-radius: 12px !important;
}

.awip-pf-items-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--awip-ink-500) !important;
    margin: 0 0 10px !important;
}

.awip-pf-items-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

.awip-pf-items-table th,
.awip-pf-items-table td {
    text-align: left !important;
    font-size: 12.5px !important;
    padding: 6px 4px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px dashed var(--awip-surface-line) !important;
}

.awip-pf-items-table thead th {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: var(--awip-ink-500) !important;
    padding-top: 0 !important;
}

.awip-pf-items-table tbody tr:last-child td {
    border-bottom: none !important;
}

.awip-pf-items-table td {
    color: var(--awip-ink-700) !important;
    font-family: var(--awip-mono) !important;
}

.awip-pf-items-table th.num,
.awip-pf-items-table td.num {
    text-align: right !important;
    white-space: nowrap !important;
}

.awip-pf-amount-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--awip-ink-500) !important;
    margin: 0 0 10px !important;
}

.awip-pf-amount-shell {
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    background: var(--awip-paper) !important;
    border: 1.5px solid var(--awip-line) !important;
    border-radius: 14px !important;
    padding: 10px 20px !important;
    margin: 0 !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

.awip-pf-amount-shell:focus-within {
    border-color: var(--awip-violet-600) !important;
    box-shadow: 0 0 0 4px var(--awip-violet-50) !important;
}

.awip-pf-amount-shell .awip-pf-sign {
    font-family: var(--awip-mono) !important;
    font-size: 26px !important;
    color: #b4afc2 !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.awip-pf-amount-shell input {
    border: none !important;
    outline: none !important;
    font-family: var(--awip-mono) !important;
    font-size: 34px !important;
    font-weight: 600 !important;
    color: #17151f !important;
    width: 100% !important;
    background: transparent !important;
    letter-spacing: -0.01em !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
}

.awip-pf-amount-shell input::-webkit-outer-spin-button,
.awip-pf-amount-shell input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.awip-pf-amount-shell input::placeholder {
    color: var(--awip-ink-300) !important;
}

.awip-pf-trust {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 26px 0 0 !important;
    font-size: 12.5px !important;
    color: var(--awip-ink-500) !important;
}

.awip-pf-trust svg {
    flex: none !important;
}

/* ===================== RIGHT: payment form ===================== */
.awip-pf-pay {
    padding: 40px 40px 36px !important;
}

.awip-pf-pay .awip-pf-title {
    font-family: var(--awip-display) !important;
    font-weight: 800 !important;
    font-size: 19px !important;
    margin: 0 0 20px !important;
    color: var(--awip-ink-950) !important;
}

.awip-pf-row {
    display: flex !important;
    gap: 16px !important;
    margin: 0 0 18px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
}

.awip-pf-field {
    flex: 1 1 220px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

.awip-pf-row .awip-pf-field {
    margin-bottom: 0 !important;
}

.awip-pf-field > label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--awip-ink-950) !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

.awip-pf-field > label .awip-pf-opt {
    font-weight: 500 !important;
    color: var(--awip-ink-500) !important;
}

.awip-pf-field input[type="text"],
.awip-pf-field input[type="email"],
.awip-pf-field input[type="tel"] {
    width: 100% !important;
    border: 1.5px solid var(--awip-line) !important;
    border-radius: 12px !important;
    padding: 13px 14px !important;
    margin: 0 !important;
    font-family: var(--awip-body) !important;
    font-size: 14.5px !important;
    color: var(--awip-ink-950) !important;
    outline: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    background: var(--awip-paper) !important;
    height: auto !important;
    box-shadow: none !important;
    line-height: normal !important;
}

.awip-pf-field input::placeholder {
    color: var(--awip-ink-300) !important;
    opacity: 1 !important;
}

.awip-pf-field input:focus {
    border-color: var(--awip-violet-600) !important;
    box-shadow: 0 0 0 4px var(--awip-violet-50) !important;
}

.awip-pf-reference-status {
    margin: 6px 0 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: #DC2626 !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.awip-pf-reference-status.awip-pf-no-match {
    color: var(--awip-ink-500) !important;
    font-weight: 400 !important;
}

.awip-pf-amount-status {
    margin: 6px 0 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: #DC2626 !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Card fields — Stripe's split Card Elements (cardNumber/cardExpiry/cardCvc)
   mounted into these boxes so the layout matches the reference design while
   the actual card data stays inside Stripe's PCI-compliant iframes. */
.awip-pf-card-block {
    border: 1.5px solid var(--awip-line) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: var(--awip-paper) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

.awip-pf-card-block.awip-pf-focused {
    border-color: var(--awip-violet-600) !important;
    box-shadow: 0 0 0 4px var(--awip-violet-50) !important;
}

.awip-pf-card-num-row {
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--awip-line) !important;
    padding: 0 12px 0 14px !important;
}

.awip-pf-card-number-element {
    flex: 1 !important;
    padding: 13px 0 !important;
}

.awip-pf-card-icons {
    display: flex !important;
    gap: 6px !important;
    flex: none !important;
}

.awip-pf-card-icons span {
    font-family: var(--awip-mono) !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    color: var(--awip-ink-500) !important;
    border: 1px solid var(--awip-line) !important;
    border-radius: 4px !important;
    padding: 2px 5px !important;
}

.awip-pf-card-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}

.awip-pf-card-expiry-element {
    padding: 13px 14px !important;
    border-right: 1px solid var(--awip-line) !important;
}

.awip-pf-card-cvc-element {
    padding: 13px 14px !important;
}

.awip-pf-element-error {
    margin: 6px 0 0 !important;
    font-size: 12px !important;
    color: #df1b41 !important;
    min-height: 0 !important;
}

.awip-pf-consent {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border: 1.5px solid var(--awip-line) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin: 6px 0 22px !important;
}

.awip-pf-consent input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 1px 0 0 !important;
    accent-color: var(--awip-violet-600) !important;
    flex: none !important;
}

.awip-pf-consent label {
    font-size: 13px !important;
    color: var(--awip-ink-700) !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

.awip-pf-consent label strong {
    color: var(--awip-ink-950) !important;
    font-weight: 700 !important;
}

.awip-pf-error {
    margin: 16px auto 0 !important;
    max-width: 980px !important;
    padding: 12px 15px !important;
    background: #fcf0f1 !important;
    border: 1px solid #dc3232 !important;
    border-radius: 10px !important;
    color: #8a1f1f !important;
    font-size: 13px !important;
}

.awip-pf-success {
    margin: 0 auto !important;
    max-width: 620px !important;
    padding: 40px 36px !important;
    background: var(--awip-paper) !important;
    border: 1.5px solid var(--awip-ok) !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 2px rgba(23, 21, 31, 0.04), 0 24px 60px -24px rgba(23, 21, 31, 0.18) !important;
    color: var(--awip-ink-950) !important;
    text-align: center !important;
    font-family: var(--awip-display) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

/*
 * Dedicated hide class: jQuery's .hide()/.show() only toggle a plain inline
 * display style, which cannot beat the !important display rules above (e.g.
 * .awip-pf-checkout's `display: grid !important`) — without this, "hidden"
 * elements stayed visible and the success message just appended below them.
 */
.awip-pf-wrap .awip-pf-hidden {
    display: none !important;
}

.awip-pf-submit {
    width: 100% !important;
    border: none !important;
    border-radius: 12px !important;
    background: var(--awip-violet-600) !important;
    color: var(--awip-paper) !important;
    font-family: var(--awip-display) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 17px !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: background .15s ease, transform .12s ease !important;
    height: auto !important;
    line-height: normal !important;
}

.awip-pf-submit:hover {
    background: var(--awip-violet-700) !important;
    transform: translateY(-1px) !important;
}

.awip-pf-submit:disabled {
    background: var(--awip-ink-300) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.awip-pf-secure-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 16px 0 0 !important;
    font-size: 12px !important;
    color: var(--awip-ink-500) !important;
}

@media (prefers-reduced-motion: reduce) {
    .awip-pf-wrap * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

@media (max-width: 860px) {
    .awip-pf-checkout {
        grid-template-columns: 1fr !important;
    }
    .awip-pf-summary {
        border-right: none !important;
        border-bottom: 1px dashed var(--awip-surface-line) !important;
    }
    .awip-pf-summary::after {
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        bottom: -9px !important;
        height: 18px !important;
        width: auto !important;
        background-image: radial-gradient(circle, var(--awip-paper) 5px, transparent 5.5px) !important;
        background-size: 22px 18px !important;
        background-repeat: repeat-x !important;
    }
    .awip-pf-pay {
        padding-top: 34px !important;
    }
}

@media (max-width: 480px) {
    .awip-pf-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    /* flex-basis (the "220px" in .awip-pf-field's flex shorthand) applies
       along the main axis — once .awip-pf-row switches to a column direction
       above, that 220px becomes a *height* reservation instead of a width
       one, leaving a large empty gap under every stacked field. */
    .awip-pf-row .awip-pf-field {
        flex: 1 1 auto !important;
        margin: 0 0 18px !important;
    }
    .awip-pf-row .awip-pf-field:last-child {
        margin-bottom: 0 !important;
    }
    .awip-pf-card-split {
        grid-template-columns: 1fr 1fr !important;
    }
    .awip-pf-summary,
    .awip-pf-pay {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
    /* The VISA/MC/AMEX badges are decorative — on narrow phones they were
       eating nearly half the card-number row, squeezing the actual input
       down to ~87px wide (barely a few digits visible). Drop them so the
       number field gets the room it needs. */
    .awip-pf-card-icons {
        display: none !important;
    }
    .awip-pf-card-num-row {
        padding-right: 14px !important;
    }
    .awip-pf-amount-shell .awip-pf-sign {
        font-size: 22px !important;
    }
    .awip-pf-amount-shell input {
        font-size: 28px !important;
    }
}