/* PayPlus Slim — Hosted Fields Styles */

.pp_iframe_h {
    width: 100%;
}

.pp_iframe_h #payment-form {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    max-width: 440px;
    margin: auto;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #E3E6E9;
    background: #F7F7F7;
}

.pp_iframe_h .hf-main {
    width: 100%;
}

#hostedTop {
    display: flex;
    height: fit-content;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E3E6E9;
    width: 100%;
    padding: 0 0 12px;
    margin-bottom: 12px;
}

#hostedTop .topText {
    color: #000;
    font-size: 16px;
    font-weight: 600;
}

#hostedTop .creditCards {
    display: flex;
    align-items: center;
}

#hostedTop .creditCards img {
    max-height: 20px;
    margin-inline-start: 6px;
}

#ppLogo {
    color: #c5cbcf;
    text-align: center;
    font-size: 12px;
    width: 100%;
    direction: ltr;
    padding: 14px 0 2px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    line-height: 15px;
}

#ppLogo .hf-image {
    height: 15px;
    display: inline-block;
    position: relative;
    top: 5px;
    vertical-align: baseline;
    margin-inline-start: 1px;
}

/* Blocks needs one pixel less tightening than the classic template. */
.payplus-hf-blocks #ppLogo .hf-image {
    margin-inline-start: 2px;
    top: 3px;
}

.pp_iframe_h .hf-col-4 {
    width: 100%;
}

.pp_iframe_h .fld-wrapper {
    width: 90%;
    margin: 0.4em auto;
}

.pp_iframe_h .fld-wrapper label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    border: none;
}

.pp_iframe_h .forms-control {
    max-width: 100%;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #E3E6E9 !important;
    border-radius: 8px !important;
    height: 38px !important;
    margin: auto;
    text-align: inherit;
    background-color: #fff;
    box-sizing: border-box;
    outline: none;
}

.pp_iframe_h .forms-control:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

/* Original plugin uses !important here too — the SDK sets its own inline
   styles on elements bearing the "form-control" class it manages, which
   would otherwise silently win over a plain (non-!important) rule. */
.pp_iframe_h .form-control {
    max-width: 100%;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #E3E6E9 !important;
    border-radius: 8px !important;
    height: 38px !important;
    margin: auto;
    text-align: inherit;
    background-color: #fff;
    box-sizing: border-box;
    outline: none;
}

.pp_iframe_h .form-select {
    height: 38px;
    width: 100%;
    border: 1px solid #E3E6E9;
    border-radius: 8px;
    background-color: #fff;
    outline: none;
    padding: 0 10px;
    font-size: 1rem;
    box-sizing: border-box;
}

/* Hosted field spans — before SDK replaces them */
.pp_iframe_h .fld-frame {
    border: none;
    height: 34px;
    padding: 0;
    margin: 0;
    background-color: transparent;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

/* SDK-injected wrapper — must match original exactly (no border, no overflow) */
.__payplus_hosted_fields_item_fld-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

/* Iframe rules — the iframe inherits form-control and fld-frame classes, override them.
   The SDK sets its own inline height on the injected iframe (needed for its
   internal dropdown/autofill overlays), which a plain "height: 100%" cannot
   override since it has no definite containing-block height to resolve
   against. Force a fixed pixel height with !important instead so the visible
   field always matches its bordered wrapper. */
.pp_iframe_h iframe.fld-frame,
.pp_iframe_h iframe.form-control,
.pp_iframe_h iframe.__payplus_hosted_fields_item_fld-frame {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    box-sizing: unset !important;
    height: 38px !important;
    width: 100% !important;
}

/* The wrapper's border eats into its own box-sizing: border-box height, so
   forcing the iframe to the SAME height as the wrapper makes it 2px taller
   than the wrapper's actual content area — poking out over the top/bottom
   border and making it look "cut" in the middle. Size the iframe to the
   wrapper's content-box height instead (wrapper height minus the two 1px
   borders). */
.pp_iframe_h #cCard iframe {
    height: 36px !important;
}

.pp_iframe_h .expiry-wrapper iframe,
.pp_iframe_h .expiry-wrapper-full iframe,
.pp_iframe_h #cvv-wrapper iframe {
    height: 32px !important;
}

.pp_iframe_h .expiries {
    width: 90%;
    margin: 0.4em auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.pp_iframe_h .h-fld-wrapper {
    width: 100%;
    margin-bottom: 0.4em;
}

.pp_iframe_h .h-fld-wrapper label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

/* The SDK sets its own inline styles (width/height/display) on the wrapper
   elements it manages, which silently wins over any non-!important rule
   here — same root cause as the iframe height issue below. !important on
   the layout-critical properties keeps our two-column design intact. */
.pp_iframe_h .expiry-wrapper {
    display: flex !important;
    justify-content: space-between;
    background-color: #fff;
    width: 58% !important;
    height: 34px !important;
    align-items: center;
    border: 1px solid #E3E6E9 !important;
    border-radius: 8px;
    padding: 0 10px;
    box-sizing: border-box;
}

.pp_iframe_h .expiry-wrapper-full {
    background-color: #fff;
    width: 58% !important;
    height: 34px !important;
    display: flex !important;
    align-items: center;
    border: 1px solid #E3E6E9 !important;
    border-radius: 8px;
    padding: 0 10px;
    box-sizing: border-box;
}

/* #cc (the SDK's elmSelector target) gets replaced/mutated by the SDK, so —
   same lesson as the expiry/cvv fields — the visible border lives on #cCard,
   a plain structural wrapper the SDK never touches, not on #cc itself. */
.pp_iframe_h #cCard {
    position: relative;
    border: 1px solid #E3E6E9;
    border-radius: 8px;
    height: 38px;
    background-color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 10px;
}

.pp_iframe_h #cc.form-control.fld-frame {
    border: none !important;
    height: 38px !important;
    margin: 0;
    padding: 0.5rem 0.75rem;
}

.pp_iframe_h .seperator {
    display: flex;
    width: auto;
    color: #E3E6E9;
    align-items: center;
    padding: 0 4px;
}

.pp_iframe_h #cvv-fld {
    background-color: #fff;
    width: 38% !important;
    height: 34px !important;
    display: flex !important;
    align-items: center;
    border: 1px solid #E3E6E9 !important;
    border-radius: 8px;
    padding: 0 10px;
    box-sizing: border-box;
}

.pp_iframe_h #cvv-wrapper {
    width: 100%;
    display: flex;
}

.pp_iframe_h .hf-row {
    width: 100%;
    display: flex;
}

.pp_iframe_h .hf-col-12 {
    width: 100%;
}

.pp_iframe_h .hf-col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.pp_iframe_h .hf-col-9 {
    flex: 0 0 auto;
    width: 75%;
}

.pp_iframe_h #payments-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.pp_iframe_h #payments-wrapper label {
    order: 1;
}

.pp_iframe_h #payments-wrapper select {
    order: 2;
}

.pp_iframe_h iframe {
    border: 0;
    max-height: 38px;
    outline: none;
}

.pp_iframe_h input:focus,
.pp_iframe_h iframe:focus {
    outline: none !important;
    box-shadow: none !important;
}

.pp_iframe_h input::placeholder {
    color: #A2ADB5;
    opacity: 1;
}

/* Error state from SDK */
.__payplus_hosted_fields_err_fld {
    color: red;
    border: 1px solid red !important;
}

/* Place order button state */
#place_order.pp-hf-submitting {
    opacity: 0.6;
    pointer-events: none;
}

/* Full-screen payment processing state (classic and Blocks checkout). */
.payplus-hf-processing-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(1px);
    cursor: wait;
    pointer-events: auto;
}

.payplus-hf-processing-overlay.is-active {
    display: flex;
}

.payplus-hf-processing-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px 30px;
    border: 1px solid #E3E6E9;
    border-radius: 12px;
    background: #fff;
    color: #222;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
}

.payplus-hf-processing-spinner {
    width: 38px;
    height: 38px;
    border: 4px solid #E3E6E9;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: payplus-hf-spin 0.8s linear infinite;
}

body.payplus-hf-is-processing {
    overflow: hidden;
}

@keyframes payplus-hf-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .payplus-hf-processing-spinner {
        animation-duration: 1.5s;
    }
}

/* Error message display */
.pp-hf-error {
    margin-top: 10px;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #991b1b;
    font-size: 13px;
    line-height: 1.4;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* 3DS iframe */
.hsted-Flds--r-secure3ds-iframe {
    border-radius: 15px;
    background: white;
}