/* -----------------------------------------------------------------------------
File:    03-products-payment-settings.css
Path:    /woocommerce/product-archives/03-products-payment-settings.css
Version: V1.1
Purpose: Single product – Secure Payments box (fieldset/legend + centered icons)
Rules:   Use palette vars only
----------------------------------------------------------------------------- */

.single-product .rg-payments-box{
	margin-top: clamp(12px, 1.2vw, 18px);
	border: 2px solid var(--contrast-2);
	border-radius: 4px;
	padding: 8px 12px 10px;                 /* ✅ reduce blank space */
	background: var(--base);
}

.single-product .rg-payments-box__legend{
	padding: 0 10px;
	font-weight: 900;
	color: var(--contrast-2);
}

/* ✅ Center the icon group and reduce gap above it */
.single-product .rg-payments-box__row{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;                      /* ✅ vertical center */
	justify-content: center;                  /* ✅ horizontal center */
	gap: clamp(10px, 1.4vw, 18px);
	margin-top: 4px;                          /* ✅ reduce blank area */
}

/* ✅ Force equal “slots” so all logos feel same size */
.single-product .rg-payments-box__item{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 78px;                             /* gives a centered lane */
	min-width: 90px;                          /* keeps spacing consistent */
}

@media (max-width: 720px){
	.single-product .rg-payments-box__row{
		flex-wrap: wrap;
	}
	.single-product .rg-payments-box__item{
		min-width: 72px;
		height: 76px;
	}
}

/* ✅ All icons same height (at least 75px) */
.single-product .rg-payments-box__icon{
	height: 75px;
	width: auto;
	max-height: 75px;
	object-fit: contain;
	display: block;
}