/* GamesBay payabl Card (Web SDK): checkout container + the SDK's 3DS overlay (its markup, our look). */ .gb-pcard { position: relative; } .gb-pcard__frame { width: 100%; } .gb-pcard #pc21_ifrm { display: block; width: 100% !important; border: 0; background: transparent; } /* The SDK writes its own status box ("Transaction failed"…) into the container; we use checkout notices instead. */ .gb-pcard #pc21_info_box { display: none !important; } /* Loading: three pulsing dots centred in the space the form will occupy. */ .gb-pcard__loader { display: flex; align-items: center; justify-content: center; } .gb-pcard__dots { display: inline-flex; gap: 7px; } .gb-pcard__dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; opacity: .35; animation: gb-pcard-pulse 1.1s ease-in-out infinite; } .gb-pcard__dots i:nth-child(2) { animation-delay: .18s; } .gb-pcard__dots i:nth-child(3) { animation-delay: .36s; } @keyframes gb-pcard-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .gb-pcard__dots i { animation: none; opacity: .7; } } .gb-pcard--ready .gb-pcard__frame { animation: gb-pcard-fadein .18s ease-out; } @keyframes gb-pcard-fadein { from { opacity: 0; } to { opacity: 1; } } .gb-pcard__error { padding: 12px 14px; margin: 0 0 10px; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 14px; } .gb-pcard__retry { margin-left: 6px; padding: 4px 10px; border: 1px solid #991b1b; border-radius: 6px; background: #fff; color: #991b1b; font-size: 13px; cursor: pointer; } .gb-pcard__desc { margin: 8px 0 0; font-size: 13px; color: #6b7280; } .gb-pcard--processing .gb-pcard__frame { pointer-events: none; opacity: .6; } /* While loading, the frame element exists (the widget is loading inside it) but stays collapsed under the dots. */ .gb-pcard--loading .gb-pcard__frame, .gb-pcard--error .gb-pcard__frame { height: 0; overflow: hidden; } .gb-pcard--done .gb-pcard__frame { pointer-events: none; } /* 3DS overlay: #pc21_3dmodal is created by the SDK (class "modal", inline display toggled by it) and parked on . */ #pc21_3dmodal.modal { display: none; /* hidden until the SDK sets display:block inline for 3DS; its own modal.css arrives late and the box flashed */ position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: rgba(15, 23, 42, .62) !important; z-index: 2147483000 !important; overflow: auto !important; } #pc21_3dmodal .modal-content { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(480px, calc(100% - 24px)) !important; height: min(680px, calc(100% - 24px)) !important; box-sizing: border-box; margin: 0 !important; padding: 48px 0 0 !important; background: #fff !important; border: 0 !important; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); } /* Our own (empty) header strip above the bank page: only the close control lives here, never on top of the bank's buttons. */ #pc21_3dmodal .modal-content::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 48px; background: #fff; border-bottom: 1px solid #e5e7eb; } #pc21_3dmodal .modal-content iframe { width: 100% !important; height: 100% !important; border: 0; display: block; } #pc21_3dmodal .close { position: absolute; top: 8px; right: 12px; width: 32px; height: 32px; line-height: 30px !important; text-align: center; float: none !important; z-index: 2; border-radius: 50%; background: #f3f4f6; color: #374151 !important; font-size: 22px !important; font-weight: 400 !important; cursor: pointer; transition: background .15s ease; } #pc21_3dmodal .close:hover { background: #e5e7eb; color: #111827 !important; } @media (max-width: 600px) { #pc21_3dmodal .modal-content { width: 100% !important; height: 100% !important; border-radius: 0; } } /* Checkout accordion panel while our method is open: one white surface (the theme paints the generic panel gray). */ body.woocommerce-checkout .wc-block-components-radio-control-accordion-content:has(.gb-pcard) { background: #f8f8f8 !important; /* same grey the widget page paints (body.backgroundColor): one surface, white fields on it */ padding: 10px 10px 4px !important; } @media (min-width: 768px) { body.woocommerce-checkout .wc-block-components-radio-control-accordion-content:has(.gb-pcard) { padding: 12px 20px 6px !important; /* desktop: fields off the panel edges */ } } /* Our own field labels, drawn in the widget's blank label slots (see placeLabels() in the JS). */ .gb-pcard__labels { position: absolute; left: 0; top: 0; right: 0; pointer-events: none; z-index: 1; } .gb-pcard__lbl { position: absolute; display: block; line-height: 20px; font-size: 13px; color: #6b7280; font-family: inherit; white-space: nowrap; pointer-events: none; /* Painted on the panel grey: on very narrow phones payabl's "Invalid expiration date." wraps to a second line that spills out of its 20px slot into this label's line; the label simply covers it. */ background: #f8f8f8; padding-right: 8px; border-radius: 3px; } /* Method row: title stays left next to the radio, card badges float to the right edge of the row. */ #payabl_gbcard { justify-content: flex-start; } #payabl_gbcard > :first-child { flex: 0 1 auto; margin-left: 0 !important; text-align: left; } #payabl_gbcard > span:last-child { margin-left: auto !important; padding-left: 10px !important; } #payabl_gbcard img { display: block; height: 20px; width: auto; } /* Every payment method row (card, Google Pay, Apple Pay…): tighter gap between the radio (16px from the edge) and the title, 48px → 41px left padding, so all rows stay aligned. */ body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__option { padding-left: 41px !important; }