/**
 * BOGOF Classic Nudge Companion - styling.
 * Additive only, and fully self-contained under our own class names - does NOT reuse or
 * touch any BOGOF notice/announcement classes, or the Deluxe Nudge companion's classes,
 * to avoid any conflict. The modal shell still reuses .wc-bogo-modal* (from BOGOF's
 * modal.css, already loaded sitewide) purely for the dialog mechanics.
 */

.wc-bogof-classic-nudge-banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75em;
	width: 100%;
	text-align: center;
	background: #fdf3d7;
	border-radius: 4px;
	padding: 1.25em 1.5em;
	margin: 0 0 1.5em;
}

.wc-bogof-classic-nudge-message {
	font-weight: 600;
	color: #5a4a1a;
}

.wc-bogof-classic-nudge-open {
	display: inline-block;
	background: #e2401c;
	color: #fff;
	border-radius: 999px;
	padding: 0.6em 1.75em;
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

.wc-bogof-classic-nudge-open:hover,
.wc-bogof-classic-nudge-open:focus {
	background: #c53315;
	color: #fff;
}

/* Wider than BOGOF's own default 75% dialog on small viewports - 75% of a phone's
   width leaves too little room for a usable product grid. */
.wc-bogof-classic-nudge-modal .wc-bogo-modal-dialog {
	max-width: 1100px;
}

@media (max-width: 900px) {
	.wc-bogof-classic-nudge-modal .wc-bogo-modal-dialog {
		max-width: 95%;
		margin: 12px auto;
	}
}

/* Scrolls internally so the header/close button stay put instead of the whole
   page scrolling away from them on a long product list. */
.wc-bogof-classic-nudge-modal .wc-bogo-modal-body {
	max-height: calc(100vh - 140px);
	max-height: calc(100dvh - 140px);
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

.wc-bogof-classic-nudge-modal .wc-bogo-modal-body ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5em;
	margin: 0;
	list-style: none;
	padding: 0;
}

@media (max-width: 1024px) {
	.wc-bogof-classic-nudge-modal .wc-bogo-modal-body ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.wc-bogof-classic-nudge-modal .wc-bogo-modal-body ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 1em;
	}
}

@media (max-width: 400px) {
	.wc-bogof-classic-nudge-modal .wc-bogo-modal-body ul.products {
		grid-template-columns: 1fr;
	}
}

.wc-bogof-classic-nudge-bundle-cart {
	display: block;
	width: 100%;
}

.wc-bogof-classic-nudge-bundle-slots {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin-bottom: 0.75em;
}

.wc-bogof-classic-nudge-bundle-slot {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	padding: 0.5em 0.75em;
}

.wc-bogof-classic-nudge-bundle-slot__title {
	display: block;
	margin-bottom: 0.35em;
	font-size: 0.9em;
	font-weight: 600;
}

.wc-bogof-classic-nudge-bundle-slot .wc-bogof-gift-variation {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
}

.wc-bogof-classic-nudge-bundle-slot .wc-bogof-gift-variation label {
	margin: 0;
	min-width: 4em;
}

.wc-bogof-classic-nudge-bundle-slot .wc-bogof-gift-variation select {
	max-width: 100%;
}

.wc-bogof-classic-nudge-bundle-submit.loading {
	opacity: 0.6;
	pointer-events: none;
}

.wc-bogof-classic-nudge-bundle-error {
	display: block;
	margin-top: 0.5em;
	color: #a00;
}

.wc-bogof-classic-nudge-loading {
	display: none;
	text-align: center;
	margin: 1em 0;
}

.wc-bogof-classic-nudge-load-more {
	display: block;
	margin: 1em auto 0;
}