/**
 * BFCM 2026 promo notes: side-cart note, checkout coupon notice, mega-menu banner fix and footer title size
 *
 * Loaded by ic-nov-promo-scripts.php only while a promo phase is running. The info icon is a
 * mask, so it takes the text colour.
 */


/**
 * Note (shared)
 */

.ic-nov-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 auto;
	padding: 8px 16px;
	border-radius: 16px;
	line-height: 1.5;
}

.ic-nov-note::before {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	content: "";
	-webkit-mask: url(../../../img/bfcm-info-icon-v2.svg) center / contain no-repeat;
	mask: url(../../../img/bfcm-info-icon-v2.svg) center / contain no-repeat;
}

.ic-nov-note__text {
	text-align: start;
}


/**
 * Side-cart note
 */

.ic-nov-side-cart-note {
	width: calc(100% - 32px);
	margin-bottom: 16px;
}

/* The #cfw-side-cart ID keeps CheckoutWC / theme side-cart rules from overriding the box. */
#cfw-side-cart .ic-nov-side-cart-note {
	justify-content: flex-start;
	padding: 12px 16px;
	border: 1px solid #d26b6b !important;
	background: #fee7e7;
	color: var(--nd-theme-black);
	font-family: var(--nd-primary-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.48px;
}


/**
 * Mega-menu banner
 *
 * The theme hard-codes "Use code INDA10" under the banner button; hidden while the promo copy
 * is shown so the banner never advertises a second code (one code per order).
 */

.ic-nov-promo-active .mega-promo-code,
.mega-banner.ic-nov-promo-active .promo-link {
	display: none;
}

/*
 * Same box, heading and button values as the promo banner (ic-nov-promo-banner-promo.css).
 * .ic-nov-promo-active (added by ic-nov-promo.js) outranks every .mega-banner rule in
 * mega-menu.min.css, so no !important is needed. The banner only shows at 992px and below;
 * its mobile image swaps in at 576px (setupBannerBg in mega-menu.min.js).
 */
.mega-banner.ic-nov-promo-active {
	min-height: 240px;
	padding: 40px;
	background-position: bottom;
}

/* Drops the theme's white 20% overlay (mega-menu.min.css .mega-banner::after) during the promo. */
.mega-banner.ic-nov-promo-active::after {
	display: none;
}

.mega-banner.ic-nov-promo-active h5 {
	padding-right: 0;
	color: var(--nd-theme-white);
	font-size: clamp(20px, 1.8vw + 14.25px, 36px); /* 20px at 320px, 36px at 1200px. */
	line-height: normal;
}

/* !important only on max-width: mega-menu.min.css sets max-width: 200px !important. */
.mega-banner.ic-nov-promo-active .mega-first {
	max-width: none !important;
	margin-bottom: 16px;
	color: var(--nd-theme-white);
	line-height: 27px; /* 5px more than the theme's 22px. */
}

/* Matches the promo banner's "Shop All Products" button instead of the theme's red one. */
.mega-banner.ic-nov-promo-active .deals-button {
	padding: 10px 22px;
	border: none;
	border-radius: 100px;
	background: #f9ad32;
	color: var(--nd-theme-dark);
	font-family: var(--nd-secondary-font);
	font-size: clamp(14px, 0.23vw + 13.27px, 16px); /* 14px at 320px, 16px at 1200px. */
	font-weight: 600;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	transition: 0.2s;
}

.mega-banner.ic-nov-promo-active .deals-button:hover {
	opacity: 0.8;
}


/**
 * Footer title
 *
 * 24px at a 320px screen, 25px at 1200px. The theme files set no size for it (it comes from
 * Elementor / Customizer CSS), so three classes and !important make sure the promo size wins.
 */

.main_footer .footer-info-column .footer-title {
	font-size: clamp(24px, 0.11vw + 23.64px, 25px) !important;
}

/*
 * B2G1, Black Friday Early and Black Friday only: 22px at a 320px screen, 23px at 1200px. The
 * phase class (added by ic-nov-promo.js) makes this one class stronger than the shared rule above.
 */
.main_footer .footer-info-column .footer-title.ic-nov-footer-title--b2g1-early-bf,
.main_footer .footer-info-column .footer-title.ic-nov-footer-title--early-bf,
.main_footer .footer-info-column .footer-title.ic-nov-footer-title--black-friday {
	font-size: clamp(22px, 0.11vw + 21.64px, 23px) !important;
}


/**
 * Coupon notice
 */

.ic-nov-coupon-notice {
	margin-top: 16px;
	margin-bottom: 16px;
	border: 1px solid #d2c26b;
	background: #fefbe7;
	color: var(--nd-theme-dark);
	font-family: var(--nd-secondary-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.154px;
}


@media only screen and (max-width: 991px) {
	.ic-nov-coupon-notice {
		margin-top: 0;
		margin-bottom: 0;
	}
}

@media only screen and (max-width: 576px) {
	.mega-banner.ic-nov-promo-active {
		padding: 40px 16px;
	}
}

/*
 * Price Drop only: the text breaks at the newline ic-nov-promo-scripts.php adds after each <br>.
 * The newline survives js/promotions-build.js, which rewrites the text without its <br>; the <br>
 * itself is hidden so the line never breaks twice when that script does not run.
 */
.mega-banner.ic-nov-mega-banner--price-drop .mega-first {
	white-space: pre-line;
}

.mega-banner.ic-nov-mega-banner--price-drop .mega-first br {
	display: none;
}

/*
 * Veterans Day only, 400px and below, matching the promo banner: the text runs as one paragraph,
 * and the overlay comes back as a 30% black layer (the promo hides the theme's white one). The
 * banner's content sits at z-index 1 in mega-menu.min.css, so it stays above the overlay.
 */
@media only screen and (max-width: 400px) {
	.ic-nov-mega-banner--veterans-stock-up .mega-first br {
		display: none;
	}

	.mega-banner.ic-nov-mega-banner--veterans-stock-up::after {
		display: block;
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: var(--nd-theme-black);
		opacity: 0.3;
	}
}


/**
 * Mega-menu banner, Soda Stock-Up only
 *
 * Mirrors the Soda promo banner (ic-nov-promo-banner-promo.css) on the mobile mega-menu banner,
 * which only shows at 992px and below. .ic-nov-mega-banner--soda-stock-up (added by
 * ic-nov-promo.js) plus .mega-banner outranks the shared .ic-nov-promo-active rules above, and
 * later in the file wins where both use !important.
 */

.mega-banner.ic-nov-mega-banner--soda-stock-up {
	background-position: center;
}

.mega-banner.ic-nov-mega-banner--soda-stock-up h5,
.mega-banner.ic-nov-mega-banner--soda-stock-up .mega-first {
	color: var(--nd-theme-black);
}

/* 14px at a 320px screen, growing to 16px at 1200px. */
.mega-banner.ic-nov-mega-banner--soda-stock-up .mega-first {
	font-size: clamp(14px, 0.23vw + 13.27px, 16px);
}

@media only screen and (max-width: 576px) {
	.mega-banner.ic-nov-mega-banner--soda-stock-up h5 {
		margin-top: -20px;
	}
}

@media only screen and (max-width: 460px) {
	.mega-banner.ic-nov-mega-banner--soda-stock-up {
		background-position: top;
	}

	.mega-banner.ic-nov-mega-banner--soda-stock-up .mega-first {
		max-width: 236px !important;
		margin-bottom: 40px;
	}

	.mega-banner.ic-nov-mega-banner--soda-stock-up .mega-first br {
		display: none;
	}
}

@media only screen and (max-width: 430px) {
	.mega-banner.ic-nov-mega-banner--soda-stock-up .mega-first {
		margin-bottom: 32px;
	}
}

@media only screen and (max-width: 390px) {
	.mega-banner.ic-nov-mega-banner--soda-stock-up h5 {
		margin-bottom: 6px;
		line-height: 28px;
	}
}

/* The heading's line break after "100mg" is dropped at 370px and below, as in the promo banner. */
@media only screen and (max-width: 370px) {
	.mega-banner.ic-nov-mega-banner--soda-stock-up h5 br {
		display: none;
	}
}

/*
 * Mega-menu banner, B2G1 and Black Friday Early only, 576px and below: 20% black overlay,
 * matching their promo banner. Brings back the ::after the promo hides above; same strength and
 * later in the file. The banner's content sits at z-index 1 in mega-menu.min.css, so it stays
 * above the overlay.
 */
@media only screen and (max-width: 576px) {
	.mega-banner.ic-nov-mega-banner--b2g1-early-bf::after,
	.mega-banner.ic-nov-mega-banner--early-bf::after {
		display: block;
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: var(--nd-theme-black);
		opacity: 0.2;
	}
}

/*
 * Mega-menu banner, Black Friday only: no overlay at any width, on either pseudo-element.
 * !important so neither the theme's mega-menu.min.css overlay nor any Elementor / Customizer CSS
 * can bring one back.
 */
.mega-banner.ic-nov-promo-active.ic-nov-mega-banner--black-friday::before,
.mega-banner.ic-nov-promo-active.ic-nov-mega-banner--black-friday::after {
	display: none !important;
}

/*
 * Mega-menu banner, Cyber Week only: black heading and text, matching its promo banner. Phase
 * class + .mega-banner outranks the shared white .ic-nov-promo-active rules above.
 */
.mega-banner.ic-nov-mega-banner--cyber-week h5,
.mega-banner.ic-nov-mega-banner--cyber-week .mega-first {
	color: var(--nd-theme-black);
}

/*
 * Cyber Week: the description is at most 300px wide instead of the shared max-width: none
 * !important (same strength, later in the file). The narrower mobile widths below still win.
 */
.mega-banner.ic-nov-mega-banner--cyber-week .mega-first {
	max-width: 300px !important;
}

/*
 * Mega-menu banner, Cyber Week only: the same mobile layout as its promo banner. 430px to 576px:
 * description in a 200px column. 429px and below: heading pulled up 22px with 8px below it, and
 * the description in a 240px column. !important on max-width matches the shared rule's.
 */
@media only screen and (min-width: 430px) and (max-width: 576px) {
	.mega-banner.ic-nov-mega-banner--cyber-week .mega-first {
		max-width: 200px !important;
	}
}

@media only screen and (max-width: 429px) {
	.mega-banner.ic-nov-mega-banner--cyber-week h5 {
		margin-top: -22px;
		margin-bottom: 8px;
	}

	.mega-banner.ic-nov-mega-banner--cyber-week .mega-first {
		max-width: 240px !important;
	}
}