/**
 * Panier — champ « code promo » replié (coupon-fold.php), styles de CALA GIOIA.
 */

/* Lien « Vous avez un code promo ? » : petit, gris, sans triangle. */
.calacolori-code-promo > summary {
	cursor: pointer;
	list-style: none;
	width: max-content;
	font-size: 11px;
	letter-spacing: .04em;
	color: #999;
	text-decoration: none;
	margin: 0 0 4px;
}

.calacolori-code-promo > summary::-webkit-details-marker {
	display: none;
}

.calacolori-code-promo > summary::marker {
	content: "";
}

.calacolori-code-promo > summary:hover {
	color: var(--theme-palette-color-1);
}

.calacolori-code-promo[open] > summary {
	margin-bottom: 12px;
}

/* Champ et bouton, volet ouvert : petits, bouton en liseré. */
.calacolori-code-promo .coupon {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.calacolori-code-promo .coupon .input-text#coupon_code {
	flex: 0 0 auto;
	padding: 5px 12px !important;
	height: auto !important;
	min-height: 0 !important;
	font-size: 12px;
}

.calacolori-code-promo .coupon button[name="apply_coupon"] {
	width: auto;
	flex: 0 0 auto;
	padding: 5px 18px !important;
	height: auto !important;
	min-height: 0 !important;
	font-size: 12px;
	background: transparent !important;
	color: var(--theme-palette-color-1) !important;
	border: 1px solid var(--theme-palette-color-1) !important;
	transition: color .25s ease, border-color .25s ease;
}

.calacolori-code-promo .coupon button[name="apply_coupon"]:hover {
	background: transparent !important;
	color: var(--theme-palette-color-2) !important;
	border-color: var(--theme-palette-color-2) !important;
}

/* Message d'erreur sous le champ. */
.calacolori-code-promo .coupon .coupon-error-notice {
	flex: 1 0 100%;
	margin: 12px 0 0;
	padding: 9px 16px;
	font-size: 12px;
	line-height: 1.5;
	text-align: left;
	color: #6b6359;
	background: #faf6f2;
	border: none;
	border-left: 2px solid var(--theme-palette-color-1);
	border-radius: 0;
}

/* Mobile : champ et bouton en pleine largeur, empilés. */
@media (max-width: 768px) {
	.calacolori-code-promo .coupon .input-text#coupon_code,
	.calacolori-code-promo .coupon button[name="apply_coupon"] {
		width: 100% !important;
	}
}