/* ########################################################## */
/* CARD DISCOUNTS
/* ########################################################## */
/* #region */

/* CARD DISCOUNTS FRONT
/* -----------------------------------------------------------*/
.mco-credit-card-box-container {
	width: 100%;
	padding-top: 15px;
}

.mco-credit-card-title {
	font-size: 16px;
	font-weight: 600;
	color: #00529B;
	line-height: 14px;
	padding-bottom: 10.5px;
	margin: 0;
}

.mco-credit-card-subtitle {
	width: 330px;
	height: 57px;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	margin-bottom: 20px;
}

.mco-credit-card-subtitle>a {
	font-size: 12px;
	text-decoration: none;
	font-weight: 400;
	line-height: 20px;
	color: #0071D1;
}

.mco-credit-card-box {
	display: flex;
	width: 330px;
	gap: 12px 10px;
	flex-wrap: wrap;
}

.card-discount__toggle-button {
	justify-content: center;
	background-color: #E3E3E3;
	height: 48px;
	border: none;
	flex: 1 1 50%;
	/* Cada botón ocupa 50% del ancho, es decir, dos botones por fila */
	max-width: calc(50% - 5px);
	/* Evita que los botones se superpongan */
}

.mco-credit-card-box.single-button .card-discount__toggle-button {
	flex-basis: 100%;
	/* Si hay solo un botón, ocupa todo el ancho */
	max-width: calc(100% - 5px);
	/* Evita que el botón se superponga */
}

.card-discount__toggle-button-disabled {
	background-color: #E3E3E3;
	border: none;
	cursor: not-allowed;
	display: flex;
	width: 160px;
	height: 48px;

}


.card-discount__toggle-button:focus {
	outline: none;
	background-color: #f3f3f3;
	box-shadow: 0 0 0 0.2rem rgb(0 154 194 / 25%)
}


.mco_inputs_in_row {
	display: flex;
}

.mco-discount__toggle-button-opaque {
	opacity: 0.5;
	background-color: #E3E3E3;
	filter: grayscale(100%) opacity(0.5);
}



.mco_input_dto_card {
	width: 205px !important;
	border-radius: 7px !important;
	border-color: #CCCCCC !important;
	padding: 8px !important;
	font-size: 14px !important;
	color: #444 !important;
	margin-right: 10px !important;
}

.card-discount__logo-container {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}

.card-discount__img-icon {
	scale: 1;
}


.btn-coupon-apply-custom {
	width: 113px !important;
	height: 36px !important;
	padding: 15px, 0px, 15px, 0px;
	gap: 10px;
	border-radius: 25px;
	background-color: #01539B;
	font-size: 14px;
}

.cards-content-promotions {
	margin-top: 8px !important;
}

.form-row-first {
	margin-bottom: 0px !important;
}

.form-row-last {
	margin-bottom: 0px !important;
}

.mco-credit-card-validation-box {
	display: none;
	width: 100% !important;
	height: 100% !important;
	margin-top: 20px !important;
}

.mco-active {
	display: block;
}

/* #endregion */

/* Medias Querys */
@media screen and (max-width: 330px) {
	.mco-credit-card-box {
		width: 100%;
		flex-wrap: wrap;
	}

	.mco-credit-card-subtitle {
		width: 100%;
		height: auto;
	}

	.card-discount__toggle-button {
		width: 100%;
		max-width: 100%;
		flex: 1 1 100%;
	}

	.mco_input_dto_card {
		width: 100% !important;
		margin-right: 0px !important;
	}
}

@media screen and (max-width: 380px) {
	.mco_input_dto_card {
		width: 100% !important;
		margin-right: 0px !important;
		margin-bottom: 10px !important;
	}

	.mco_input_dto_card::placeholder {
		text-align: center;
	}

	.mco_inputs_in_row {
		width: 100%;
		flex-wrap: wrap;
	}

	.form-row-first-input-dto {
		width: 100% !important;
	}

	.form-row-last-btn-validate-dto {
		width: 100% !important;
		justify-content: end;
	}
}



@media screen and (max-width: 768px) {
	.mco-credit-card-box {
		width: 100%;
	}

	.mco-credit-card-subtitle {
		width: 100%;
		height: auto;
	}
}

@media screen and (max-width: 1220px) {
	.mco-credit-card-box {
		width: 100%;
	}

	.mco-credit-card-subtitle {
		width: 100%;
	}
}

/* ########################################################## */
/* MODULE: Message info quantity */
/* ########################################################## */

.mco-woocommerce-info-quantity_discount-info {
	display: flex;
	align-items: center;
	background-color: rgba(255, 177, 49, 0.05);
	border: 1px solid #FFB131;
	padding: 10px;
	margin: 10px 0;
	width: 100%;

}

.mco-woocommerce-info-quantity_discount-info .info-icon {
	font-size: 22px;
	color: #D7AA0C;
	margin-right: 10px;
}

.mco-woocommerce-info-quantity_discount-info .info-text {
	font-size: 14px;
	color: #D7AA0C;
}

.mco-hide-fields {
	display: none;
}