/* HyperPay widget — AMMN branded styling. paymentWidgets.js injects the widget's own stylesheet at the END of when it loads, i.e. after this file (App.razor links every sheet up front). So these overrides cannot win on source order: every rule is scoped under .page-payment-gateway, the page that hosts the form, which gives it one class more than the widget's own rules. */ .page-payment-gateway .wpwl-label-brand { display: none; } .page-payment-gateway .wpwl-form-card { border: 0; font-family: var(--font-body); } /* All input controls */ .page-payment-gateway .wpwl-control, .page-payment-gateway input.wpwl-control { display: block; width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; font-family: var(--font-body); color: var(--text); background-color: var(--n0); background-clip: padding-box; border: 1px solid var(--border); border-radius: var(--radius-sm); direction: ltr; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } /* Focus state */ .page-payment-gateway .wpwl-control:focus, .page-payment-gateway input.wpwl-control:focus { background-color: var(--n0); border-color: var(--brand-green); outline: 0; box-shadow: var(--shadow-md); color: var(--text); } /* Card number, expiry, CVV — always LTR + left-aligned regardless of page direction */ .page-payment-gateway .wpwl-control-cardNumber, .page-payment-gateway .wpwl-control-expiry, .page-payment-gateway .wpwl-control-cvv { direction: ltr; text-align: left; } /* RTL layout — flip labels and group text alignment */ [dir="rtl"] .page-payment-gateway .wpwl-form-card { text-align: right; } [dir="rtl"] .page-payment-gateway .wpwl-label { text-align: right; } /* Labels */ .page-payment-gateway .wpwl-label { font-size: 0.85rem; font-weight: 500; color: var(--n600); margin-bottom: 4px; } /* Groups — spacing between fields */ .page-payment-gateway .wpwl-group { margin-bottom: 16px; } /* Pay now button */ .page-payment-gateway .wpwl-button-pay { display: block; width: 100%; padding: 14px 24px; font-size: 1rem; font-weight: 600; font-family: var(--font-body); color: var(--n0); background: var(--brand-green); border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.2s ease, box-shadow 0.2s ease; margin-top: 8px; } .page-payment-gateway .wpwl-button-pay:hover { background: var(--brand-green-hover, var(--brand-green)); box-shadow: var(--shadow-md); } .page-payment-gateway .wpwl-button-pay:active { transform: translateY(1px); } /* Brand selector dropdown */ .page-payment-gateway .wpwl-control-brand { padding: 10px 12px; font-size: 0.95rem; cursor: pointer; } /* Dark mode */ [data-theme="dark"] .page-payment-gateway .wpwl-control, [data-theme="dark"] .page-payment-gateway input.wpwl-control { background-color: var(--n0); border-color: var(--border); color: var(--text); } [data-theme="dark"] .page-payment-gateway .wpwl-control:focus, [data-theme="dark"] .page-payment-gateway input.wpwl-control:focus { border-color: var(--brand-green); color: var(--text); } [data-theme="dark"] .page-payment-gateway .wpwl-label { color: var(--n300); } [data-theme="dark"] .page-payment-gateway .wpwl-button-pay { background: var(--brand-green); color: var(--n0); } /* Apple's HIG requires this rule for the native Apple Pay button glyph to render */ .page-payment-gateway .wpwl-apple-pay-button { -webkit-appearance: -apple-pay-button !important; cursor: pointer; display: block; width: 100%; height: 44px; margin-top: 8px; } /* Mobile-first: 44x44px minimum tap target per Apple HIG / HyperPay mobile guide */ @media (max-width: 480px) { .page-payment-gateway .wpwl-control, .page-payment-gateway input.wpwl-control, .page-payment-gateway .wpwl-button-pay, .page-payment-gateway .wpwl-apple-pay-button { min-height: 44px; } } /* Validation + server-error states — use brand --error token so error messages stand out (HyperPay widget defaults render in black text with no border). */ .page-payment-gateway .wpwl-message-error, .page-payment-gateway .wpwl-hint, .page-payment-gateway .wpwl-icon-error { color: var(--error); } .page-payment-gateway .wpwl-message-error { padding: 8px 12px; border: 1px solid var(--error); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--error) 8%, transparent); margin-bottom: 12px; font-weight: 500; } .page-payment-gateway .wpwl-has-error .wpwl-control, .page-payment-gateway .wpwl-control.wpwl-has-error { border-color: var(--error); box-shadow: 0 0 0 2px color-mix(in srgb, var(--error) 18%, transparent); } [data-theme="dark"] .page-payment-gateway .wpwl-message-error, [data-theme="dark"] .page-payment-gateway .wpwl-hint { color: var(--error); }