/* GamesBay Visa Card: our own card fields (Visa's frames only inside .gb-visa__host), same look as the payabl card form:
   grey panel #f8f8f8, white 50px fields, 1px #e5e7eb, radius 6px, 14px #2b2d2f text, focus #1cbcff, 13px grey labels. */

.gb-visa { position: relative; }
.gb-visa__form { position: relative; }
.gb-visa__fields { display: block; }
.gb-visa--loading .gb-visa__fields { visibility: hidden; } /* Visa's frames load underneath, the dots sit on top */
.gb-visa--ready .gb-visa__fields { animation: gb-visa-fadein .18s ease-out; }
@keyframes gb-visa-fadein { from { opacity: 0; } to { opacity: 1; } }
.gb-visa--processing .gb-visa__fields, .gb-visa--challenge .gb-visa__fields, .gb-visa--done .gb-visa__fields { pointer-events: none; opacity: .6; }

.gb-visa__field { margin: 0 0 12px; min-width: 0; }
.gb-visa__row { display: flex; gap: 24px; }
.gb-visa__row .gb-visa__field { flex: 1 1 0; }
.gb-visa__label { display: block; margin: 0; line-height: 20px; font-size: 13px; color: #6b7280; cursor: default; }
.gb-visa__box {
  display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 50px; padding: 0 12px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; transition: border-color .12s ease, box-shadow .12s ease;
}
.gb-visa__box.is-focus, .gb-visa__input:focus { border-color: #1cbcff; box-shadow: 0 0 0 1px #1cbcff; outline: 0; }
.gb-visa__host { width: 100%; height: 20px; }
.gb-visa__host iframe { display: block; width: 100% !important; height: 20px !important; border: 0; }
/* Our expiry input: the theme styles every checkout input; restate the field look with enough weight. */
body.woocommerce-checkout .gb-visa input.gb-visa__input {
  height: 50px !important; min-height: 50px !important; margin: 0 !important; padding: 0 12px !important; border: 1px solid #e5e7eb !important;
  border-radius: 6px !important; background: #fff !important; box-shadow: none; font: 14px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  color: #2b2d2f !important; letter-spacing: normal;
}
body.woocommerce-checkout .gb-visa input.gb-visa__input:focus { border-color: #1cbcff !important; box-shadow: 0 0 0 1px #1cbcff !important; }
.gb-visa__input::placeholder { color: #9ca3af; opacity: 1; }

/* Loading: three pulsing dots centred over the fields (same as the payabl card form). */
.gb-visa__loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; }
.gb-visa__dots { display: inline-flex; gap: 7px; }
.gb-visa__dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; opacity: .35; animation: gb-visa-pulse 1.1s ease-in-out infinite; }
.gb-visa__dots i:nth-child(2) { animation-delay: .18s; }
.gb-visa__dots i:nth-child(3) { animation-delay: .36s; }
@keyframes gb-visa-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .gb-visa__dots i, .gb-visa__wait::before { animation: none; opacity: .7; } .gb-visa--ready .gb-visa__fields { animation: none; } }

.gb-visa__error { padding: 12px 14px; margin: 0 0 10px; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 14px; }
.gb-visa__retry { margin-left: 6px; padding: 4px 10px; border: 1px solid #991b1b; border-radius: 6px; background: #fff; color: #991b1b; font-size: 13px; cursor: pointer; }
.gb-visa__desc { margin: 8px 0 0; font-size: 13px; color: #6b7280; }
.gb-visa__sandbox { margin: 0 0 10px; padding: 8px 12px; border-radius: 6px; background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; font-size: 12px; font-weight: 600; }
.gb-visa__wait { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: #6b7280; }
.gb-visa__wait::before { content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%; background: #1cbcff; animation: gb-visa-blink 1.2s ease-in-out infinite; }
@keyframes gb-visa-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Decline panel: what went wrong in plain words + what to do (same as the payabl card form). */
.gb-visa__decline { margin: 0 0 12px; padding: 14px 16px; background: #fff; border: 1px solid #e5e7eb; border-left: 4px solid #f59e0b; border-radius: 8px; }
.gb-visa__decline-title { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 700; line-height: 1.35; color: #111827; }
.gb-visa__decline-body { margin: 0; font-size: 13px; line-height: 1.45; color: #4b5563; }
.gb-visa__preview { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; font-size: 12px; color: #6b7280; }
.gb-visa__preview button { width: auto !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 3px 9px !important; border: 1px solid #d1d5db !important; border-radius: 999px !important; background: #fff !important; font-size: 12px !important; font-weight: 600 !important; color: #374151 !important; cursor: pointer; box-shadow: none !important; }

/* Checkout accordion panel while our method is open: the same grey surface as the payabl card panel. */
body.woocommerce-checkout .wc-block-components-radio-control-accordion-content:has(.gb-visa) { background: #f8f8f8 !important; padding: 10px 10px 4px !important; }
@media (min-width: 768px) {
  body.woocommerce-checkout .wc-block-components-radio-control-accordion-content:has(.gb-visa) { padding: 12px 20px 6px !important; }
}

/* Method row: title left, accepted networks right; the typed number lights up its network. */
#gb_visa.gb-visa__row-label { width: 100%; display: flex; align-items: center; margin: 0; }
#gb_visa > :first-child { flex: 0 1 auto; margin-left: 0 !important; text-align: left; }
.gb-visa__icons { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; padding-left: 10px; }
.gb-visa__icon { display: block; height: 20px; width: auto; transition: opacity .12s ease; }
.gb-visa__icons.has-match .gb-visa__icon { opacity: .25; }
.gb-visa__icons.has-match .gb-visa__icon.is-on { opacity: 1; }
@media (max-width: 420px) { .gb-visa__icon { height: 17px; } .gb-visa__row { gap: 12px; } }

/* 3D Secure challenge: the bank's page in our modal (same frame as the payabl 3DS overlay). */
html.gb-visa-3ds-open, html.gb-visa-3ds-open body { overflow: hidden; }
.gb-visa-3ds { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .62); }
.gb-visa-3ds__box {
  position: relative; display: flex; flex-direction: column; box-sizing: border-box;
  width: min(var(--gbv-w, 500px), calc(100% - 24px)); height: min(calc(var(--gbv-h, 600px) + 48px), calc(100% - 24px));
  background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.gb-visa-3ds__head { flex: 0 0 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; border-bottom: 1px solid #e5e7eb; font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #111827; }
.gb-visa-3ds__close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f3f4f6; color: #374151; font-size: 22px; line-height: 30px; cursor: pointer; padding: 0; }
.gb-visa-3ds__close:hover { background: #e5e7eb; color: #111827; }
.gb-visa-3ds__frame { flex: 1 1 auto; width: 100%; border: 0; display: block; }
@media (max-width: 600px) { .gb-visa-3ds__box { width: 100%; height: 100%; border-radius: 0; } }

/* Apple Pay / Google Pay express buttons (assets/gb-visa-wallet.js): Visa draws each wallet in its own frame; our row
   puts them side by side (Stripe-like, phones too), and a wallet this device does not offer leaves the row to the other.
   Ours are only the placeholder while they load, the wait line and the same decline panel as the card form. */
.gb-visa-wallet { position: relative; width: 100%; }
.gb-visa-wallet__buttons { position: relative; display: flex; gap: 8px; width: 100%; }
/* While the frames draw the row is laid out (Visa sizes its frames to it) but not shown: the placeholder stands in. */
.gb-visa-wallet--loading .gb-visa-wallet__buttons { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }
.gb-visa-wallet--processing .gb-visa-wallet__buttons, .gb-visa-wallet--challenge .gb-visa-wallet__buttons, .gb-visa-wallet--done .gb-visa-wallet__buttons { pointer-events: none; opacity: .45; }
.gb-visa-wallet__slot { flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 5px; container-type: inline-size; }
.gb-visa-wallet__slot.is-empty { display: none; }
/* A slot whose frame has not shown a button yet: laid out at half the row (Visa sizes its frame to it), not shown, no
   space taken. It joins the row once its button is there (gb-visa-wallet.js watchDraw). */
.gb-visa-wallet__slot.is-pending { position: absolute; top: 0; left: 0; width: 50%; visibility: hidden; pointer-events: none; }
/* Google's button needs about 240px or it pushes its logo right and cuts it (measured 2026-10-13: off-centre at 158 and
   218px, centred at 328px). Narrower slots get a 240px frame centred in the slot, whose edges the slot clips: the logo
   stays centred, the slot gives the rounded corners. Browsers without container units simply use the slot width. */
.gb-visa-wallet__frame { width: max(100cqw, 240px); margin-left: min(0px, calc((100cqw - 240px) / 2)); }
/* Visa's button frame is an inline iframe: as inline it sits on the text line and leaves a gap under the button. */
.gb-visa-wallet__frame iframe { display: block; }
.gb-visa-wallet__skeleton { height: 45px; border-radius: 5px; background: #eef0f2; animation: gb-visa-blink 1.2s ease-in-out infinite; }
.gb-visa-wallet .gb-visa__decline { margin: 10px 0 0; }
.gb-visa-wallet .gb-visa__wait { margin: 10px 0 0; }
.gb-visa-wallet .gb-visa__error { margin: 10px 0 0; }
.gb-visa-wallet .gb-visa__sandbox { margin: 0 0 8px; }
/* Nothing to offer on this device (or the buttons could not load for a customer): no empty "Express checkout" box.
   The class sits on the block's own wrapper (express box + "Or continue below"), set by gb-visa-wallet.js. */
.gb-visa-wallet-hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) { .gb-visa-wallet__skeleton { animation: none; } }
/* The theme lays the express area out as a flex row: our single method takes the whole width. */
#express-payment-method-gb_visa_wallet { flex: 1 1 100%; width: 100%; min-width: 0; }
/* WooCommerce draws a 2px blue frame around a focused express button (its :focus-within / --focused ::after). On a
   click into Visa's frame that reads as a stray outline around the button and the space under it: not on ours. */
.wc-block-components-express-payment .wc-block-components-express-payment__event-buttons > #express-payment-method-gb_visa_wallet::after { content: none !important; display: none !important; }