/* OC Cardcom Cards — checkout toggle: our own callout bubble with an up-arrow,
   visually separate from Cardcom's payment box (rendered as spans inside their <p>). */
.occc-save-card {
	display: block;
	position: relative;
	margin: 4px 0 4px;
	padding: 14px 16px;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
/* Title removed by request — the toggle label is the heading instead. */
.occc-save-card__title {
	display: none !important;
}
/* Up-pointing caret, like Cardcom's own payment_box, but for our frame. */
.occc-save-card::before {
	content: "";
	position: absolute;
	top: -8px;
	inset-inline-start: 22px;
	width: 14px;
	height: 14px;
	background: #fff;
	border-top: 1px solid #e2e2e2;
	border-left: 1px solid #e2e2e2;
	transform: rotate(45deg);
}
.occc-save-card__desc {
	display: block;
	font-size: 0.85em;
	opacity: 0.75;
	margin-top: 8px;
	line-height: 1.4;
}

/* The toggle itself (checkbox restyled as a switch) */
.occc-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
}
.occc-toggle__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.occc-toggle__track {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 24px;
	border-radius: 999px;
	background: #c4c4c4;
	transition: background 0.2s ease;
}
.occc-toggle__thumb {
	position: absolute;
	top: 2px;
	inset-inline-start: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: inset-inline-start 0.2s ease;
}
.occc-toggle__input:checked + .occc-toggle__track {
	background: #1aa251;
}
.occc-toggle__input:checked + .occc-toggle__track .occc-toggle__thumb {
	inset-inline-start: 22px;
}
.occc-toggle__input:focus-visible + .occc-toggle__track {
	outline: 2px solid #1aa251;
	outline-offset: 2px;
}
.occc-toggle__label {
	line-height: 1.3;
	font-weight: 600;
}

/* Hide Cardcom's own native "save payment method" checkbox — our toggle replaces it. */
.occc-hide-native-save {
	display: none !important;
}

/* Strip Cardcom's own payment-box background/border/caret so only our bubble is framed,
   and tighten its spacing so our bubble sits close to the payment-method selection. */
.woocommerce-checkout .payment_box.payment_method_cardcom,
li.payment_method_cardcom .payment_box {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	margin-top: 4px !important;
	padding: 4px 8px !important;
}
.payment_box.payment_method_cardcom p {
	margin-top: 4px !important;
	margin-bottom: 4px !important;
}
.woocommerce-checkout .payment_box.payment_method_cardcom::before,
li.payment_method_cardcom .payment_box::before {
	display: none !important;
}

/* Hide Cardcom's native "save to account" checkbox row — our toggle replaces it. */
.payment_box.payment_method_cardcom .woocommerce-SavedPaymentMethods-saveNew {
	display: none !important;
}
/* Hide the lone "use a new payment method" option when there are no saved cards yet
   (keeps the "card ending in XXXX / new card" selector once real cards exist). */
.payment_box.payment_method_cardcom .woocommerce-SavedPaymentMethods li.woocommerce-SavedPaymentMethods-new:only-child {
	display: none !important;
}

/* When saved cards are promoted to top-level payment methods, hide Cardcom's own
   nested saved-cards list so there is no duplication (and no orange sub-buttons).
   The "New credit card" box still shows our clean save toggle (add another card). */
.occc-promote-cards .payment_box.payment_method_cardcom .woocommerce-SavedPaymentMethods {
	display: none !important;
}

/* Remove the broken "Add payment method" button from My Account → Payment methods. */
.woocommerce-account .woocommerce-MyAccount-content a.button[href*="add-payment-method"],
.woocommerce-account .woocommerce-MyAccount-content a[href$="/add-payment-method/"] {
	display: none !important;
}