/* ==========================================================================
   Naboso Bundle Banner — cart upsell notice
   Inherits WooCommerce's .woocommerce-info base; these rules layer on top.
   ========================================================================== */

#naboso-bundle-banner.naboso-bundle-banner {
	/* Layout */
	display: flex;
	align-items: center;
	gap: 0.625em; /* 10px at 16px base */

	/* Spacing */
	padding: 1em 1.25em;
	margin: 0 0 1.5em;

	/* Palette — warm highlight that reads as "notice / upsell", not error */
	background-color: #fff8e7;
	border: 1px solid #f5c842;
	border-left: 4px solid #f5c842; /* WooCommerce-style left accent */
	border-radius: 4px;

	/* Typography */
	font-size: 1rem;
	line-height: 1.5;
	color: inherit; /* inherit theme body colour */

	/* Override any box-shadow the theme applies to .woocommerce-info */
	box-shadow: none;
}

/* Icon ------------------------------------------------------------------ */
.naboso-bundle-banner__icon {
	flex-shrink: 0;
	font-size: 1.25em;
	line-height: 1;
	/* Removes the ::before pseudo-element WooCommerce injects on .woocommerce-info */
}

/* Remove WooCommerce's default info icon so our emoji icon shows cleanly */
#naboso-bundle-banner.naboso-bundle-banner::before {
	display: none;
}

/* Message --------------------------------------------------------------- */
.naboso-bundle-banner__message {
	flex: 1;
	margin: 0;
	padding: 0;
}

.naboso-bundle-banner__message strong {
	font-weight: 600;
}

/* Close button ---------------------------------------------------------- */
.naboso-bundle-banner__close {
	flex-shrink: 0;
	margin-left: auto;
	padding: 0;
	width: 1.5em;
	height: 1.5em;

	background: transparent;
	border: none;
	border-radius: 50%;

	font-size: 0.9em;
	line-height: 1;
	color: #777;
	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: color 0.15s ease, background-color 0.15s ease;
}

.naboso-bundle-banner__close:hover,
.naboso-bundle-banner__close:focus-visible {
	color: #333;
	background-color: rgba(0, 0, 0, 0.07);
	outline: none;
}

/* Hide animation -------------------------------------------------------- */
#naboso-bundle-banner.naboso-bundle-banner.is-hiding {
	opacity: 0;
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 0;
	overflow: hidden;
	transition: opacity 0.2s ease, max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}

/* Responsive ------------------------------------------------------------ */
@media (max-width: 480px) {
	#naboso-bundle-banner.naboso-bundle-banner {
		flex-wrap: wrap;
	}

	.naboso-bundle-banner__close {
		/* Keep the × accessible on narrow screens */
		align-self: flex-start;
		margin-top: -0.1em;
	}
}