/* MobilePay direct (vooma-vipps): the Express button (product page, cart, checkout) and the payment option. */

/* ---- Express ------------------------------------------------------------------------------------------------------ */

.vooma-vipps-express { width: 100%; }
.vooma-vipps-express [hidden] { display: none !important; }
/* Product page: right under "Læg i kurv" (the form keeps its 1.5rem below; the gap matches the form's own .75rem). */
.vooma-product__cart .vooma-vipps-express,
.wc-block-add-to-cart-form .vooma-vipps-express { margin: -.75rem 0 1.5rem; }

/* The reserved place (also inline in the server's HTML): nothing moves when the page settles (CLS 0). */
.vooma-vipps-express__slot { min-height: 44px; }

/* Our own button: "Køb nu med" + MobilePay's official wordmark, both white, on MobilePay blue #5a78ff, pill shaped,
   full width, 44 px (the touch target). The text is 19 px bold — "large text" in WCAG terms, which white on #5a78ff
   (3.6 : 1) passes; hover / press only darken it (more contrast, never less). Focus: a dark ring off the blue. */
.vooma-vipps-express__button {
	display: flex; align-items: center; justify-content: center; gap: .4rem; box-sizing: border-box;
	width: 100%; min-height: 44px; margin: 0; padding: 0 1.25rem; overflow: hidden;
	border: 0; border-radius: 999px; background: #5a78ff; color: #fff; cursor: pointer;
	font-family: inherit; font-size: 19px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none;
	transition: background-color .15s ease;
}
.vooma-vipps-express__text { display: block; white-space: nowrap; pointer-events: none; }
/* Element + two classes (0,2,1): beats WooCommerce's ".woocommerce img, .woocommerce-page img { height: auto;
   max-width: 100% }" (0,1,1), which blew the wordmark up to its natural size (staging, 2026-11-05). Product page and
   the cart / checkout blocks share the button class. */
.vooma-vipps-express__button img.vooma-vipps-express__wordmark {
	display: block; flex: none; width: auto; height: 32px; max-width: none; max-height: none; margin: 0; padding: 0;
	border: 0; box-shadow: none; pointer-events: none;
}
.vooma-vipps-express__button:hover { background: #4b69f0; }
.vooma-vipps-express__button:active { background: #3f5bdd; }
.vooma-vipps-express__button:focus-visible { outline: 3px solid var(--v-ink, #1e293b); outline-offset: 2px; }
.vooma-vipps-express__button[aria-busy="true"] { cursor: progress; background: #3f5bdd; }
@media (prefers-reduced-motion: reduce) { .vooma-vipps-express__button { transition: none; } }

/* Above the button: what the shortcut does (muted, small). */
.vooma-vipps-express__helper {
	margin: 0 0 .4rem; color: var(--v-muted, #5b6573); font-size: var(--wp--preset--font-size--small, .875rem);
	line-height: 1.4; text-align: center;
}
.vooma-vipps-express__error {
	margin: .5rem 0 0; color: #b42318; font-size: var(--wp--preset--font-size--small, .875rem); line-height: 1.4;
}
.vooma-vipps-express__legal {
	margin: .45rem 0 0; color: var(--v-muted, #5b6573); font-size: var(--wp--preset--font-size--x-small, .78rem);
	line-height: 1.4; text-align: center;
}
.vooma-vipps-express__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.vooma-vipps-express__legal a:hover { color: var(--v-ink, #1e293b); }

/* Cart and checkout: WooCommerce's express area is hidden by the theme (Stripe's empty wallet frames, the owner
   2026-10-26); it shows again while it holds MobilePay — and then only MobilePay. */
.wc-block-cart__payment-options:has(#express-payment-method-vooma_vipps_express),
.wc-block-components-express-payment:has(#express-payment-method-vooma_vipps_express) { display: block !important; }
.wc-block-components-express-payment:has(#express-payment-method-vooma_vipps_express) ~ .wc-block-components-express-payment-continue-rule,
.wc-block-cart__payment-options:has(#express-payment-method-vooma_vipps_express) .wc-block-components-express-payment-continue-rule { display: flex !important; }
.wc-block-cart__payment-options:has(#express-payment-method-vooma_vipps_express) .wc-block-components-express-payment { display: block !important; }
.wc-block-components-express-payment__event-buttons:has(#express-payment-method-vooma_vipps_express) > :not(#express-payment-method-vooma_vipps_express) { display: none !important; }
.wc-block-components-express-payment__event-buttons:has(#express-payment-method-vooma_vipps_express) { display: block; margin: 0; padding: 0; list-style: none; }
#express-payment-method-vooma_vipps_express { width: 100%; margin: 0; }
/* Reserve the button's place while WooCommerce initialises the express methods (no jump in the cart's totals). */
.wc-block-components-express-payment__event-buttons:has(#express-payment-method-vooma_vipps_express) { min-height: 44px; }
.wc-block-cart__payment-options:has(#express-payment-method-vooma_vipps_express) { margin-bottom: .25rem; }

/* ---- The payment option in the checkout (as the theme's cards: name + one line on the left, the logo right) -------- */

.wc-block-checkout__payment-method .vooma-vipps-label {
	display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; width: 100%;
}
/* (Over Stripe's upe-blocks.css "… __label > span > span" — it centres every label span.) */
.wc-block-checkout__payment-method .wc-block-components-radio-control__label > .vooma-vipps-label > .vooma-vipps-label__text {
	display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: start;
	font-weight: 600; color: var(--v-ink, #1e293b); line-height: 1.3;
}
.wc-block-checkout__payment-method .vooma-vipps-label__hint {
	display: block; font-weight: 400; font-size: var(--wp--preset--font-size--small, .875rem); line-height: 1.35; color: var(--v-muted, #5b6573);
}
.wc-block-checkout__payment-method .vooma-vipps-label__logo {
	display: block; flex: none; width: auto; height: 1.6rem; max-height: none; aspect-ratio: 70.5 / 23.2; margin: 0; /* the coloured logo */
}
.wc-block-checkout__payment-method .vooma-vipps-description { margin: 0; }
/* The line above the options while MobilePay is the choice (as the theme does for Frisbii's MobilePay). */
body .wc-block-checkout__payment-method .wc-block-components-radio-control:has(#radio-control-wc-payment-method-options-vooma_vipps:checked)::before {
	content: "MobilePay er valgt for dig – tryk på en anden betalingsmåde for at skifte.";
}
@media (max-width: 480px) {
	.wc-block-checkout__payment-method .vooma-vipps-label { gap: .5rem .6rem; }
	.wc-block-checkout__payment-method .vooma-vipps-label__logo { height: 1.3rem; }
}