/*
 * HansaPay WooCommerce payment components.
 * Theme-agnostic by design: components inherit the active WooCommerce theme's
 * typography, foreground color and button styling. The plugin owns only the
 * payment-component layout, accessibility states and semantic status accents.
 *
 * Themes may override the --hpwc-* custom properties globally or per component.
 */
.hpwc-payment,
.hpwc-payment-state{
    --hpwc-component-radius:.625rem;
    --hpwc-border:color-mix(in srgb,currentColor 16%,transparent);
    --hpwc-border-strong:color-mix(in srgb,currentColor 28%,transparent);
    --hpwc-soft:color-mix(in srgb,currentColor 5%,transparent);
    --hpwc-muted:color-mix(in srgb,currentColor 68%,transparent);
    --hpwc-success:#2f7d32;
    --hpwc-processing:#9a6700;
    --hpwc-danger:#b42318;
    --hpwc-review:#175cd3;
    box-sizing:border-box;
    max-width:100%;
    color:inherit;
    font:inherit;
    line-height:1.5;
    text-align:start;
}
.hpwc-payment *,
.hpwc-payment-state *{box-sizing:border-box}

/* Hidden quote transport has no visual ownership of the surrounding gateway box. */
.hpwc-payment-hidden-fields{margin:0;padding:0;border:0;background:transparent;min-height:0}
.hpwc-payment-hidden-fields:has(.hpwc-quote:only-child){display:none}

/* Merchant-uploaded logos. The theme still owns the payment-method row itself. */
li.payment_method_hansapay_card>label img,
li.payment_method_hansapay_apple>label img,
li.payment_method_hansapay_google>label img,
.hpwc-title-logo{
    display:inline-block!important;
    width:auto!important;
    height:auto!important;
    max-height:24px!important;
    max-width:120px!important;
    object-fit:contain!important;
    vertical-align:middle!important;
    margin-inline-start:8px!important;
}
.hpwc-block-label{display:inline-flex;align-items:center;gap:.45rem;min-width:0}
.hpwc-block-label .hpwc-title-logo{margin-inline-start:0!important;flex:0 0 auto}

/* On-site card fields use WooCommerce's normal .input-text styling. */
.hpwc-card-payment{margin:.45rem 0 0;max-width:100%;overflow:visible}
.hpwc-card-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.9rem 1rem;max-width:100%}
.hpwc-card-fields .form-row{float:none!important;width:auto!important;margin:0!important;padding:0!important;min-width:0}
.hpwc-card-fields .form-row-wide,
.hpwc-card-security,
.hpwc-inline-status,
.hpwc-card-fields .clear{grid-column:1/-1}
.hpwc-card-fields label{display:flex;align-items:center;gap:.25rem;margin:0 0 .4rem;font:inherit;font-size:.92em;font-weight:600;color:inherit}
.hpwc-card-fields .required{opacity:.72;text-decoration:none}
.hpwc-card-fields input.hpwc-sensitive{box-sizing:border-box;width:100%!important;max-width:100%;min-height:46px;font:inherit;transition:border-color .16s ease,box-shadow .16s ease}
.hpwc-card-fields input.hpwc-sensitive[aria-invalid="true"]{border-color:var(--hpwc-danger)!important;box-shadow:0 0 0 1px var(--hpwc-danger)!important}

.hpwc-card-security,
.hpwc-inline-status{
    display:flex;
    align-items:flex-start;
    gap:.55rem;
    border:1px solid var(--hpwc-border);
    border-radius:var(--hpwc-component-radius);
    background:var(--hpwc-soft);
    color:inherit;
}
.hpwc-card-security{margin:.05rem 0 0;padding:.7rem .8rem;font-size:.82em;color:var(--hpwc-muted)}
/* Crisp, accessible vector icon instead of the OS-dependent lock emoji. */
.hpwc-security-mark{display:inline-flex;flex:0 0 18px;align-items:center;justify-content:center;line-height:1;color:inherit;opacity:.82}
.hpwc-security-icon{display:block;width:18px;height:18px;stroke:currentColor;flex-shrink:0}
.hpwc-inline-status{margin:.1rem 0 0;padding:.8rem .9rem;font-size:.9em}
.hpwc-inline-status[hidden]{display:none!important}
.hpwc-inline-status strong{display:block;margin:0 0 .15rem;color:inherit}
.hpwc-inline-status p{margin:0;color:var(--hpwc-muted)}
.hpwc-inline-status--processing{border-color:color-mix(in srgb,var(--hpwc-processing) 35%,transparent)}
.hpwc-inline-status--success{border-color:color-mix(in srgb,var(--hpwc-success) 35%,transparent)}
.hpwc-inline-status--error{border-color:color-mix(in srgb,var(--hpwc-danger) 40%,transparent)}
.hpwc-inline-status--verification{border-color:color-mix(in srgb,var(--hpwc-review) 35%,transparent)}
.hpwc-inline-dot{width:.72rem;height:.72rem;margin-top:.2rem;border-radius:999px;background:currentColor;flex:0 0 auto;opacity:.8}
.hpwc-inline-status--processing .hpwc-inline-dot{color:var(--hpwc-processing);animation:hpwc-pulse 1.15s ease-in-out infinite}
.hpwc-inline-status--success .hpwc-inline-dot{color:var(--hpwc-success)}
.hpwc-inline-status--error .hpwc-inline-dot{color:var(--hpwc-danger)}
.hpwc-inline-status--verification .hpwc-inline-dot{color:var(--hpwc-review)}

/* Checkout validation component; does not alter WooCommerce/theme notice selectors. */
.hpwc-checkout-notice{margin:0 0 1rem;padding:.85rem 1rem;border:1px solid color-mix(in srgb,var(--hpwc-danger) 42%,transparent);border-radius:var(--hpwc-component-radius);background:color-mix(in srgb,var(--hpwc-danger) 7%,transparent);color:inherit}
.hpwc-checkout-notice p{margin:0;color:inherit}

/* Standard payment-state component injected through WooCommerce hooks only. */
.hpwc-payment-state{
    --hpwc-state-color:var(--hpwc-processing);
    margin:1.35rem 0;
    padding:1.2rem;
    border:1px solid var(--hpwc-border);
    border-radius:var(--hpwc-component-radius);
    background:var(--hpwc-soft);
    overflow:hidden;
}
.hpwc-payment-state--success{--hpwc-state-color:var(--hpwc-success)}
.hpwc-payment-state--processing{--hpwc-state-color:var(--hpwc-processing)}
.hpwc-payment-state--review{--hpwc-state-color:var(--hpwc-review)}
.hpwc-payment-state--failed{--hpwc-state-color:var(--hpwc-danger)}
.hpwc-state-head{display:flex;align-items:flex-start;gap:1rem}
.hpwc-state-icon{display:inline-grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:999px;background:color-mix(in srgb,var(--hpwc-state-color) 12%,transparent);border:1px solid color-mix(in srgb,var(--hpwc-state-color) 32%,transparent);color:var(--hpwc-state-color);font-size:1.25rem;font-weight:700;line-height:1}
.hpwc-state-copy{min-width:0;flex:1}
.hpwc-state-badge{display:inline-flex;align-items:center;min-height:24px;margin:0 0 .38rem;padding:.16rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--hpwc-state-color) 11%,transparent);border:1px solid color-mix(in srgb,var(--hpwc-state-color) 25%,transparent);color:var(--hpwc-state-color);font-size:.72rem;font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:.035em}
.hpwc-payment-state h2{margin:0 0 .35rem;font:inherit;font-size:clamp(1.15rem,2vw,1.35rem);font-weight:700;line-height:1.25;color:inherit}
.hpwc-payment-state p{margin:0;color:var(--hpwc-muted)}
.hpwc-status-caption{margin-top:.45rem!important;font-size:.82em}
.hpwc-state-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hpwc-border)}
.hpwc-state-meta>div{min-width:0}
.hpwc-state-meta span{display:block;margin:0 0 .2rem;font-size:.76rem;color:var(--hpwc-muted)}
.hpwc-state-meta strong{display:block;min-width:0;font-size:.93rem;font-weight:650;color:inherit;overflow-wrap:anywhere}
.hpwc-state-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hpwc-border)}
.hpwc-state-actions .button{margin:0!important}
.hpwc-action-secondary{opacity:.92}

.hpwc-state-spinner{position:relative;font-size:0}
.hpwc-state-spinner:before{content:"";width:17px;height:17px;border:2px solid color-mix(in srgb,var(--hpwc-state-color) 24%,transparent);border-top-color:var(--hpwc-state-color);border-radius:999px;animation:hpwc-spin .8s linear infinite}

/* Preserve the active theme's button appearance; communicate busy state only. */
#place_order[aria-busy="true"]{cursor:wait;opacity:.72}

@keyframes hpwc-spin{to{transform:rotate(360deg)}}
@keyframes hpwc-pulse{0%,100%{opacity:.35;transform:scale(.86)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hpwc-state-spinner:before,.hpwc-inline-status--processing .hpwc-inline-dot{animation:none}}

@media(max-width:560px){
    li.payment_method_hansapay_card>label img,
    li.payment_method_hansapay_apple>label img,
    li.payment_method_hansapay_google>label img,
    .hpwc-title-logo{max-height:20px!important;max-width:96px!important;margin-inline-start:6px!important}
    .hpwc-block-label .hpwc-title-logo{margin-inline-start:0!important}
    .hpwc-card-fields{grid-template-columns:1fr;gap:.8rem}
    .hpwc-card-fields .form-row-wide,
    .hpwc-card-security,
    .hpwc-inline-status,
    .hpwc-card-fields .clear{grid-column:1}
    .hpwc-card-fields .form-row-first,.hpwc-card-fields .form-row-last{grid-column:auto}
    .hpwc-payment-state{padding:1rem}
    .hpwc-state-head{gap:.75rem}
    .hpwc-state-icon{width:38px;height:38px;flex-basis:38px}
    .hpwc-state-meta{grid-template-columns:1fr;gap:.65rem}
    .hpwc-state-actions{flex-direction:column}
    .hpwc-state-actions .button{width:100%;text-align:center}
}