/*
 * CHK-08 (z8udzkmp69): the two "Change" buttons on My Account > View subscription
 * (Subscription frequency, Next payment) are plain <button class="next-payment--change">
 * from cp-bonza and render as grey browser buttons. Give them the same look as the
 * page's action buttons (a.woocommerce-button.button): theme button colours, radius,
 * weight and a 40px height, with hover and keyboard focus states.
 *
 * Config investigated: Customizer > Buttons (Blocksy) already styles every
 * .button / a.woocommerce-button through the --theme-button-* variables, and that is
 * the source of the green action buttons on this page. The cp-bonza markup is a bare
 * <button> with its own class, so the Customizer rule never reaches it and there is no
 * setting in cp-bonza or WooCommerce Subscriptions for its class. Code is needed only to
 * point the same variables at that class, so the buttons follow the Customizer.
 *
 * Measured on the clone (Cancel action button): 40px high, radius 3px, weight 500,
 * white 15px label on rgb(36,123,78), contrast 5.23:1 (computed from that fill).
 * Hover fill is the Customizer variable, measured on the clone's Cancel button as
 * rgb(28,95,60), white label, 7.64:1 (computed from that fill). The axe run on the
 * rendered page follows with the after shots.
 */

/* CHK-08: at 320px the Dutch subscription details table is 5px wider than the content column: the
   label column cannot shrink below "Abonnementsfrequentie" and the value column below its buttons. Halve
   the 10.5px gap between the two columns on small screens so the table fits; labels stay whole words. */
@media (max-width: 480px) {
	.woocommerce-MyAccount-content table.shop_table.subscription_details td:first-child {
		padding-right: 5px;
	}
	.woocommerce-MyAccount-content table.shop_table.subscription_details td:last-child {
		padding-left: 5px;
	}
}

.woocommerce-MyAccount-content button.next-payment--change {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--theme-button-min-height);
	padding: var(--theme-button-padding);
	border: var(--theme-button-border);
	border-radius: 3px; /* --theme-button-border-radius is empty on this site, so var() would drop to 0; 3px is the action buttons' measured radius */
	font-family: "Nominee", "Arial Black", var(--theme-font-family, Arial), Arial, sans-serif; /* the brand button face, as the checkout buttons use. --theme-button-font-family is not set on this site, so the old var() chain fell to the bare system stack (CHK-08, GLS tests 4 Nov); the stack ends in a sans, never a serif */
	background-color: var(--theme-button-background-initial-color);
	color: var(--theme-button-text-initial-color);
	font-size: 15px; /* the action buttons' measured size; --theme-font-size is 16px here */
	font-weight: var(--theme-button-font-weight);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.woocommerce-MyAccount-content button.next-payment--change:hover,
.woocommerce-MyAccount-content button.next-payment--change:focus-visible {
	background-color: var(--theme-button-background-hover-color);
	color: var(--theme-button-text-hover-color);
}

.woocommerce-MyAccount-content button.next-payment--change:focus-visible {
	outline: 2px solid var(--theme-button-background-initial-color); /* white ring is invisible on the light page */
	outline-offset: 2px;
}

.woocommerce-MyAccount-content button.next-payment--change:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* The page's other action buttons and the address / payment links take the same face, so every
   button on My Account reads as one set (Cancel, Suspend, Renew now, Change payment, Change address). */
.woocommerce-MyAccount-content a.woocommerce-button.button,
.woocommerce-MyAccount-content .woocommerce-Address-title a.edit {
	font-family: "Nominee", "Arial Black", var(--theme-font-family, Arial), Arial, sans-serif;
}