/**
 * Customer-facing subscription styles.
 *
 * Loaded on My Account only. Deliberately small: this store has a documented
 * mobile-performance problem, and the toggle plus the modal shell are the only
 * things here that WooCommerce does not already style.
 */

.subscription-auto-renew-toggle {
	background: none;
	border: 0;
	cursor: pointer;
	display: inline-block;
	height: 1.5em;
	padding: 0;
	position: relative;
	width: 3em;
}

.subscription-auto-renew-toggle--hidden {
	display: none;
}

.subscription-auto-renew-toggle__i {
	background: #ccc;
	border-radius: 0.75em;
	display: block;
	height: 1.5em;
	transition: background 0.15s ease-in-out;
	width: 3em;
}

.subscription-auto-renew-toggle__i::after {
	background: #fff;
	border-radius: 50%;
	content: "";
	height: 1.15em;
	left: 0.18em;
	position: absolute;
	top: 0.18em;
	transition: left 0.15s ease-in-out;
	width: 1.15em;
}

.subscription-auto-renew-toggle--on .subscription-auto-renew-toggle__i {
	background: #4caf50;
}

.subscription-auto-renew-toggle--on .subscription-auto-renew-toggle__i::after {
	left: 1.67em;
}

.subscription-auto-renew-toggle[disabled] {
	cursor: not-allowed;
	opacity: 0.6;
}

.wcs-modal {
	align-items: center;
	background: rgba(0, 0, 0, 0.6);
	bottom: 0;
	display: none;
	justify-content: center;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 10000;
}

.wcs-modal--open {
	display: flex;
}

.wcs-modal .content-wrapper {
	background: #fff;
	border-radius: 3px;
	max-height: 90vh;
	max-width: 32em;
	overflow-y: auto;
	padding: 1.5em;
	width: 90%;
}

.wcs-modal .modal-header {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
}

.wcs-modal .modal-header .close {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.wcs-modal .modal-footer {
	display: flex;
	gap: 0.5em;
	justify-content: flex-end;
	margin-top: 1.5em;
}

.woocommerce-subscriptions-related-orders-pagination-links {
	display: flex;
	justify-content: space-between;
}

.woocommerce-subscriptions-related-orders-pagination-links .button.disabled {
	opacity: 0.5;
	pointer-events: none;
}