:root { --formpay-success-color: #16a34a; --formpay-error-color: #dc2626; } @media ( prefers-color-scheme: dark ) { :root { --formpay-success-color: #4ade80; --formpay-error-color: #f87171; } } .formpay-payment-summary { width: 100%; max-width: 100%; box-sizing: border-box; display: block; margin: 0; } .elementor-field-type-formpay_payment_info .elementor-field.formpay-payment-summary { padding: var( --e-form-field-padding-block, 1em ) var( --e-form-field-padding-inline, 1.25em ); } .elementor-field-type-formpay_payment_info .formpay-payment-summary { width: 100%; max-width: 100%; } .formpay-payment-summary .formpay-summary-label { display: block; margin-bottom: 14px; font-weight: 600; } .formpay-payment-summary .formpay-summary-cart { display: flex; flex-direction: column; gap: 2px; } .formpay-payment-summary .formpay-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; } .formpay-payment-summary .formpay-summary-row-label { opacity: 0.75; } .formpay-payment-summary .formpay-summary-row-value { white-space: nowrap; } .formpay-payment-summary .formpay-summary-discount { color: var( --formpay-success-color ); } .formpay-payment-summary .formpay-summary-discount .formpay-summary-row-label { opacity: 1; } .formpay-payment-summary .formpay-summary-discount-code { text-transform: uppercase; letter-spacing: 0.5px; } .formpay-payment-summary .formpay-summary-divider { border-top: 1px dashed currentColor; opacity: 0.2; margin: 6px 0; } .formpay-payment-summary .formpay-summary-total { font-weight: 700; padding-top: 6px; } .formpay-payment-summary .formpay-summary-total .formpay-summary-row-label { opacity: 1; } .formpay-payment-summary .formpay-summary-gateway { opacity: 0.65; padding-top: 4px; margin-top: 2px; } .formpay-payment-summary .formpay-summary-gateway .formpay-summary-row-value { font-weight: 400; } .formpay-payment-summary .formpay-summary-description { opacity: 0.55; margin-top: 12px; } .formpay-summary-muted { opacity: 0.5; font-style: italic; } .formpay-payment-summary.formpay-editor-placeholder, .formpay-dc-field.formpay-editor-placeholder { opacity: 0.6; } .formpay-editor-placeholder .formpay-dc-input, .formpay-editor-placeholder .formpay-dc-apply { pointer-events: none; } .formpay-dc-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .elementor-field-type-formpay_discount_code .formpay-dc-field { width: 100%; flex-basis: 100%; max-width: 100%; } .formpay-dc-field .formpay-dc-input { width: auto; flex: 1 1 160px; padding: var( --e-form-field-padding-block, 0.5em ) var( --e-form-field-padding-inline, 0.75em ); } .formpay-dc-input::placeholder { opacity: 0.5; } .formpay-dc-apply { flex: 0 0 auto; display: inline-flex; cursor: pointer; transition: opacity 0.15s ease; } .formpay-dc-apply:hover { opacity: 0.85; } .formpay-dc-apply:disabled { opacity: 0.4; cursor: not-allowed; } .formpay-dc-msg { width: 100%; padding: 4px 0; display: none; } .formpay-dc-msg.formpay-dc-success { color: var( --formpay-success-color ); } .formpay-dc-msg.formpay-dc-error { color: var( --formpay-error-color ); }