/**
 * Cupón Checkout DASALO
 */


/* =========================================================
   CONTENEDOR GENERAL
========================================================= */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	margin: 18px 8px 24px !important;
	padding: 0 !important;

	border: 1px solid #d8d8d8 !important;
	border-radius: 6px !important;

	background: #f8f8f8 !important;

	overflow: hidden !important;
}


/* =========================================================
   CONTENEDOR INTERNO
========================================================= */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block
.wc-block-components-totals-coupon {
	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   BOTÓN PRINCIPAL
========================================================= */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block
.wc-block-components-panel__button {
	position: relative !important;

	display: block !important;

	width: 100% !important;
	min-height: 82px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;

	background: transparent !important;

	color: transparent !important;

	font-size: 0 !important;
	line-height: 0 !important;

	text-align: left !important;

	cursor: pointer !important;

	box-sizing: border-box !important;

	overflow: hidden !important;

	transform: none !important;
	translate: none !important;

	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;

	text-indent: 0 !important;

	transition: background-color .2s ease !important;
}


/* =========================================================
   ELIMINAR CONTENIDO ORIGINAL
========================================================= */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block
.wc-block-components-panel__button > svg {
	display: none !important;
}


.wp-block-woocommerce-checkout-order-summary-coupon-form-block
.wc-block-components-panel__button {
	color: transparent !important;

	font-size: 0 !important;

	text-shadow: none !important;
}


/* =========================================================
   TÍTULO PERSONALIZADO
========================================================= */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block
.wc-block-components-panel__button::before {
	content: "¿Tienes un cupón de descuento?";

	position: absolute !important;

	left: 24px !important;
	right: 24px !important;
	top: 20px !important;

	display: block !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #000 !important;

	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;

	text-align: left !important;

	white-space: normal !important;

	transform: none !important;
	translate: none !important;

	transition: none !important;
	animation: none !important;
}


/* =========================================================
   SUBTÍTULO PERSONALIZADO
========================================================= */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block
.wc-block-components-panel__button::after {
	content: "Aplícalo aquí y ahorra en tu compra";

	position: absolute !important;

	left: 24px !important;
	right: 24px !important;
	top: 47px !important;

	display: block !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #666 !important;

	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;

	text-align: left !important;

	white-space: normal !important;

	transform: none !important;
	translate: none !important;

	transition: none !important;
	animation: none !important;
}


/* =========================================================
   HOVER
========================================================= */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block
.wc-block-components-panel__button:hover {
	background: #f1f1f1 !important;

	transform: none !important;
	translate: none !important;

	margin: 0 !important;

	left: auto !important;
	right: auto !important;

	box-shadow: none !important;

	text-indent: 0 !important;
}


/* =========================================================
   FOCUS / ACTIVE
========================================================= */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block
.wc-block-components-panel__button:focus,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block
.wc-block-components-panel__button:focus-visible,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block
.wc-block-components-panel__button:active {
	outline: none !important;

	background: #f1f1f1 !important;

	transform: none !important;
	translate: none !important;

	margin: 0 !important;

	box-shadow: none !important;

	text-indent: 0 !important;
}


/* =========================================================
   FORMULARIO ABIERTO
========================================================= */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block
.wc-block-components-panel__content {
	padding: 0 18px 18px !important;

	background: #f8f8f8 !important;
}


/* =========================================================
   CONTENEDOR DEL FORMULARIO
========================================================= */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block
.wc-block-components-totals-coupon__content {
	padding-top: 0 !important;
}


/* =========================================================
   INPUT
========================================================= */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block
input {
	min-height: 48px !important;

	padding-left: 14px !important;
	padding-right: 14px !important;

	border: 1px solid #111 !important;
	border-radius: 3px !important;

	background: #fff !important;

	color: #111 !important;

	font-size: 14px !important;

	box-shadow: none !important;
}


/* =========================================================
   INPUT FOCUS
========================================================= */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block
input:focus {
	border-color: #000 !important;

	outline: none !important;

	box-shadow: 0 0 0 1px #000 !important;
}


/* =========================================================
   BOTÓN APLICAR
========================================================= */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block
button {
	min-height: 48px !important;

	background: #000 !important;

	color: #fff !important;

	border: 1px solid #000 !important;
	border-radius: 3px !important;

	font-size: 12px !important;
	font-weight: 600 !important;

	text-transform: uppercase !important;

	cursor: pointer !important;

	transform: none !important;
	translate: none !important;

	transition:
		background-color .2s ease,
		color .2s ease !important;
}


/* =========================================================
   BOTÓN APLICAR HOVER
========================================================= */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block
button:hover {
	background: #222 !important;

	color: #fff !important;

	transform: none !important;
	translate: none !important;
}


/* =========================================================
   BOTÓN DESHABILITADO
========================================================= */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block
button:disabled {
	background: #444 !important;

	color: #ccc !important;

	border-color: #444 !important;

	cursor: not-allowed !important;

	opacity: 1 !important;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 768px) {

	.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
		margin: 16px 0 20px !important;

		border-radius: 5px !important;
	}


	.wp-block-woocommerce-checkout-order-summary-coupon-form-block
	.wc-block-components-panel__button {
		min-height: 76px !important;
	}


	.wp-block-woocommerce-checkout-order-summary-coupon-form-block
	.wc-block-components-panel__button::before {
		left: 16px !important;
		right: 16px !important;
		top: 17px !important;

		font-size: 14px !important;
	}


	.wp-block-woocommerce-checkout-order-summary-coupon-form-block
	.wc-block-components-panel__button::after {
		left: 16px !important;
		right: 16px !important;
		top: 42px !important;

		font-size: 11px !important;
	}


	.wp-block-woocommerce-checkout-order-summary-coupon-form-block
	.wc-block-components-panel__content {
		padding: 0 14px 16px !important;
	}


	.wp-block-woocommerce-checkout-order-summary-coupon-form-block
	input {
		min-height: 46px !important;

		font-size: 14px !important;
	}


	.wp-block-woocommerce-checkout-order-summary-coupon-form-block
	button {
		min-height: 46px !important;

		font-size: 11px !important;
	}

}