/** * Redsys inSite V3 - Checkout Styles * * Styles for the Redsys payment form iframes, matching WooCommerce/Storefront * default theme conventions. * * @package Redsys_InSite_Gateway */ /* Container - a flex row so the layout templates can arrange the fields. Spacing is driven by the admin "field spacing" setting (--redsys-field-gap). */ #redsys-payment-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--redsys-field-gap, 14px); padding: 4px 0; } /* Each field wrapper (label + iframe container) is a flex item. */ .redsys-field { min-width: 0; /* allow items to shrink below their content width */ flex: 1 1 100%; } /* Full-width, layout-independent elements always take their own row. */ #redsys-loading, #redsys-error-msg { flex: 0 0 100%; width: 100%; } /* ---- Layout: single line (default) - card / expiry / CVV on one row, wrapping to stacked automatically on narrow / mobile widths. ---- */ .redsys-layout-oneline .redsys-field--card { flex: 3 1 220px; } .redsys-layout-oneline .redsys-field--expiry { flex: 1 1 120px; } .redsys-layout-oneline .redsys-field--cvv { flex: 1 1 90px; } .redsys-layout-oneline .redsys-field--button { flex: 1 1 100%; } /* ---- Layout: two rows - card full width, expiry + CVV side by side. ---- */ .redsys-layout-tworow .redsys-field--card, .redsys-layout-tworow .redsys-field--button { flex: 1 1 100%; } .redsys-layout-tworow .redsys-field--expiry, .redsys-layout-tworow .redsys-field--cvv { flex: 1 1 calc(50% - (var(--redsys-field-gap, 14px) / 2)); } /* ---- Layout: stacked - one field per row. ---- */ .redsys-layout-stacked .redsys-field { flex: 1 1 100%; } /* Labels (colour follows the admin "module text color", so they stay legible on a dark module background). Scoped by #id + !important so an aggressive theme can't override only some of the field labels. */ #redsys-payment-form .redsys-field-label { display: block; font-size: 14px; font-weight: 600; color: var(--redsys-card-text, #374151) !important; margin-bottom: 8px; line-height: 1.4; } /* Iframe containers - height driven by the admin "field height" setting. The iframe is field-height + 16px: Redsys renders the styled box inside the iframe's , which keeps its default ~8px margin, so the box sits ~8px from the top. Sizing the iframe to exactly the box height clips the box's bottom border / rounded corners. +16px (8px top + 8px bottom) gives the full box room and centres it vertically. */ #redsys-card-number iframe, #redsys-expiration iframe, #redsys-cvv iframe { width: 100% !important; height: calc(var(--redsys-field-height, 52px) + 16px) !important; display: block; } /* Pay button container (spacing handled by the flex gap). */ #redsys-pay-button iframe { width: 100% !important; height: calc(var(--redsys-field-height, 52px) + 16px) !important; display: block; } /* Error message */ .redsys-error { color: #e2401c; font-size: 13px; margin-top: 8px; padding: 8px 12px; background: #fef7f5; border: 1px solid #fcd5cd; border-radius: 3px; display: none; } .redsys-error:empty { display: none !important; } /* Hidden elements */ #redsys-error-msg-hidden { display: none !important; } /* Loading spinner */ #redsys-loading { text-align: center; padding: 20px; display: none; } #redsys-loading .redsys-spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid #d3ced2; border-top-color: #96588a; border-radius: 50%; animation: redsys-spin 0.8s linear infinite; } @keyframes redsys-spin { to { transform: rotate(360deg); } } #redsys-loading .redsys-loading-text { display: block; margin-top: 8px; font-size: 13px; color: #777; } /* Responsive: on small screens the single-line layout collapses to stacked (full-width fields) so nothing is cramped. */ @media (max-width: 480px) { .redsys-layout-oneline .redsys-field--card, .redsys-layout-oneline .redsys-field--expiry, .redsys-layout-oneline .redsys-field--cvv { flex: 1 1 100%; } } /* Clean white "card" look for the inSite form (override WC's default lavender payment box, which has higher specificity, so use #payment + !important). */ #payment .payment_box.payment_method_redsys_insite, .woocommerce-checkout #payment div.payment_box.payment_method_redsys_insite { background: #ffffff !important; border: 1px solid #eceef1 !important; border-radius: 16px !important; padding: 22px 20px !important; box-shadow: 0 1px 3px rgba( 16, 24, 40, 0.06 ) !important; color: #374151 !important; } /* Remove WooCommerce's default pointer triangle above the payment box */ #payment .payment_box.payment_method_redsys_insite::before { display: none !important; } /* Intro/description line */ .payment_method_redsys_insite .payment_box > p { margin: 0 0 16px; font-size: 13px; color: #6b7280; } /* ---- Surrounding WooCommerce payment area: neutralise the default grey chrome so the white inSite card is the focus. Scoped to body.redsys-insite-selected (toggled by JS) so OTHER payment gateways keep their default look. ---- */ body.redsys-insite-selected #payment.woocommerce-checkout-payment { background: transparent !important; border: none !important; border-radius: 0 !important; } body.redsys-insite-selected #payment ul.payment_methods { border: none !important; background: transparent !important; margin: 0 0 6px !important; padding: 0 !important; } body.redsys-insite-selected #payment .place-order { background: transparent !important; border: none !important; padding: 14px 0 0 !important; margin: 0 !important; } /* Redsys method row + label (scoped to the Redsys

, so always safe) */ #payment ul.payment_methods li.payment_method_redsys_insite { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; list-style: none; } #payment ul.payment_methods li.payment_method_redsys_insite > label { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #1f2937; margin: 0 0 12px; cursor: pointer; } #payment ul.payment_methods li.payment_method_redsys_insite input[type="radio"] { accent-color: #5A4FE4; width: 18px; height: 18px; margin: 0 6px 0 0; } /* ========================================================================= WooCommerce Blocks (Store API) checkout The #id / .class rules above already style the injected iframes, error and loading elements (the block component renders the same ids). These add the block-only layout + single-button UX. ========================================================================= */ /* On the block checkout the form itself is the "card": give it padding + radius + a subtle border/shadow so the admin module background (applied inline) reads as a card (matching the classic payment box). */ .wc-block-components-payment-method-content #redsys-payment-form { padding: 20px; border-radius: 16px; border: 1px solid rgba( 0, 0, 0, 0.06 ); box-shadow: 0 1px 3px rgba( 16, 24, 40, 0.06 ); } .redsys-blocks-description { margin: 0 0 16px; font-size: 13px; color: var(--redsys-card-text, #6b7280); opacity: 0.75; } .redsys-blocks-title { font-weight: 600; color: #1f2937; } /* Single-button UX: while Redsys inSite is the active block method, hide the block "Place order" button - the Redsys pay button is the sole call to action and auto-submits the order on tokenization (JS clicks the hidden button). */ body.redsys-insite-blocks-active .wc-block-components-checkout-place-order-button, body.redsys-insite-blocks-active .wp-block-woocommerce-checkout-actions-block .wc-block-components-checkout-place-order-button { display: none !important; }