/* ==========================================================================
   FONTS & DASHBOARD UI
   ========================================================================== */
@import url(https://fonts.bunny.net/css?family=bebas-neue:400);

@font-face {
	font-family: 'Bicubik Regular';
	src: url('../fonts/Bicubik.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Suisse Intl';
	src: url('../fonts/SuisseIntl-Regular.woff2') format('woff2'),
		 url('../fonts/SuisseIntl-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Suisse Intl';
	src: url('../font/SuisseIntl-SemiBold.woff2') format('woff2'),
		 url('../fonts/SuisseIntl-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Suisse Intl';
	src: url('../fonts/SuisseIntl-Black.woff2') format('woff2'),
		 url('../fonts/SuisseIntl-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

.font-bebasNeue { font-family: 'Bebas Neue', display; }
.font-bicubik { font-family: 'Bicubik Regular', display; }
.font-suisseIntl { font-family: 'Suisse Intl', display; }

.category-icon { font-family: 'Noto Color Emoji', sans-serif; font-size: 26px; line-height: 1; }
#badge-icon { font-family: 'Noto Color Emoji', sans-serif; }
.subtle-link { color: #9ca3af; text-decoration: underline; font-size: 12px; cursor: pointer; }
.subtle-link:hover { color: #6b7280; }

.preview-presentation-area {
	background: linear-gradient(90deg, #e2e8f0 0%, #ffffff 35%, #ffffff 65%, #e2e8f0 100%);
	border: 1px solid #cbd5e1;
	border-radius: 16px;
	padding: 40px 20px;
	margin: 0 0 30px 0;
	display: flex;
	justify-content: center;
	box-shadow: inset 0 2px 10px rgba(0,0,0,0.02);
	position: relative;
	overflow: hidden;
}

#coupon-preview-wrapper {
	container-type: inline-size; 
	width: 100%;
	max-width: 275px; 
	margin: 0 auto;
}

/* ==========================================================================
   DASHBOARD RECTANGULAR ACTIONS
   ========================================================================== */
.sticky-actions-bar {
	position: sticky;
	bottom: 20px;
	background: #fff;
	padding: 20px 24px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
	z-index: 100;
	margin: 0 0 20px 0;
	border-radius: 16px; 
}
.action-buttons { 
	display: flex; gap: 15px; align-items: stretch; flex-wrap: nowrap; 
}
.btn-outline, .btn-reroll, .btn-publish {
	padding: 14px 20px;
	border-radius: 8px; font-weight: 600; text-align: center; cursor: pointer; transition: all 0.2s; 
	font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
}
.btn-outline { background: #fff; border: 1px solid #d1d5db; color: #374151; }
.btn-outline:hover { background: #f9fafb; }
.btn-reroll { background: #1e3a8a; border: none; color: #fff; }
.btn-reroll:hover { background: #1e40af; }
.btn-publish { background: #1f2937; border: none; color: #fff; }
.btn-publish:hover { background: #374151; }

.loader-spinner {
	border: 6px solid #f3f3f3; border-top: 6px solid #2e5c31; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ==========================================================================
   GENERAL STRUCTURE & MODULES
   ========================================================================== */
.btn {
	display: inline-flex; align-items: center; gap: 0.5em; padding: 0.75em 1.5em;
	background-color: #00b9ed; border-radius: 100em; font-weight: 400; color: #fff; transition: 0.2s ease background-color;
}
.btn:hover, .btn:focus { background-color: #009ac5; text-decoration: none; }
.btn .icon { width: 1.5em; flex: 0 0 auto; }
.btn span { padding-top: 0.25em; }

.flex { display: flex; align-items: center; gap: 2rem; }
.even-items > * { flex: 1 1 0; }

.wrapper { width: 70rem; max-width: 100%; padding-inline: 2rem; margin: 0 auto; }
@media (max-width: 37.5em) { .wrapper { padding-inline: 1.5rem; } }

#banner {
	width: 100%; padding: 6rem 3rem 8rem; margin: 0.75rem 0;
	background: #003957 url("/images/offer-templates/banner.jpg") center / cover no-repeat #5bb1c5; border-radius: 1.5rem; color: #fff;
}
#banner .content { width: 545px; max-width: 100%; }
#banner .ribbon {
	display: inline-block; padding: 0.25em 0.5em; margin-bottom: 0.25em;
	background: url("/images/offer-templates/banner_ribbon.png") center / 100% 100% no-repeat; font-weight: 600; color: #000;
}
#banner .title { font-size: clamp(2em, 8vw, 3em); font-weight: 900; line-height: 1; }
#banner .features { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25em 0.55em; margin: 1em 0; font-size: 0.625em; }
#banner .features span {
	display: block; padding: 0.75em 1.5em 0.5em 2em; margin-left: -1.75em;
	background-color: #05496d; clip-path: polygon(0 0, 100% 0, calc(100% - 0.75em) 50%, 100% 100%, 0 100%);
}
#banner .features > div { display: flex; align-items: center; }
#banner .features > div::before {
	content: ""; width: 3.5em; height: 3.5em; display: block; flex: 0 0 auto; position: relative; z-index: 1;
	background-color: #05496d; background-repeat: no-repeat; background-position: center; background-size: 75%; border-radius: 50%;
}
#banner .features > div:nth-of-type(1)::before { background-image: url("/images/offer-templates/icon_discount.png"); }
#banner .features > div:nth-of-type(2)::before { background-image: url("/images/offer-templates/icon_warranty.png"); }
#banner .features > div:nth-of-type(3)::before { background-image: url("/images/offer-templates/icon_locationMarker.png"); }
#banner .tagline { font-size: 1.2em; }
#banner .tagline span { display: inline-block; padding-bottom: 0.5em; background: url("/images/offer-templates/banner_underline.svg") bottom / 100% 1em no-repeat; }
@media (max-width: 37.5em) { #banner { padding: 4rem 2rem; } }

#welcome-box {
	width: 100%; position: relative; padding: 2rem 3rem; background: #073f5f; border-radius: 1.5rem; color: #fff; font-size: 0.8em;
}
#welcome-box .image { width: 430px; max-width: 50%; position: absolute; right: 3%; bottom: 0; z-index: 0; }
#welcome-box .image img { width: 100%; }
#welcome-box .content { position: relative; z-index: 1; }
#welcome-box .title { margin-bottom: 0.3em; font-size: 2em; line-height: 1.2; text-transform: uppercase; }
#welcome-box .title span { display: block; font-weight: 900; }
@media (max-width: 37.5em) {
	#welcome-box { padding: 2rem 2rem 0; }
	#welcome-box .image { width: 100%; max-width: 100%; position: static; margin-top: 1rem; }
}

#marketplace-categories hgroup { font-size: 1.25em; text-align: center; }
#marketplace-categories hgroup p { margin-top: 0.5em; color: #00baed; }
#marketplace-categories .list {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2em 1em;
	padding: 1.5rem 3rem 4rem; margin: 0; list-style: none; font-size: 0.75em; text-align: center;
}
#marketplace-categories .card {
	width: 100%; height: 100%; position: relative; bottom: 0; z-index: 0; background: #fff;
	border-radius: 0.75em; box-shadow: 0 7px 20px rgb(0, 0, 0, 0.16); color: #000; overflow: hidden; transition: 0.3s ease all;
}
#marketplace-categories .card:hover { bottom: 0.5em; z-index: 1; }
#marketplace-categories .card figure { width: 100%; padding: 0; margin: 0; border-radius: 0 0 0.75em 0.75em; overflow: hidden; }
#marketplace-categories .card figure img { width: 100%; }
#marketplace-categories .card .content { padding: 1em; }
#marketplace-categories .card .title { margin-bottom: 0.25em; font-size: 1.5em; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
#marketplace-categories .card .btn {
	min-width: 12em; justify-content: space-between; gap: 1em; padding: 0.45em 0.45em 0.45em 1em; border-radius: 1em;
}
#marketplace-categories .card .btn::before { content: ""; position: absolute; inset: 0; z-index: 1; transition: 0.3s ease background-color; }
#marketplace-categories .card .btn::after {
	content: ""; width: 2.1em; height: 2.1em; background: url("/images/offer-templates/icon_arrow_blue.svg") center / 40% no-repeat #fff; border-radius: 100%;
}
#marketplace-categories .card .btn span { padding-top: 0.3em; }
@media (max-width: 37.5em) { #marketplace-categories .list { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); padding: 1.5rem 0 4rem; } }

/* ==========================================================================
   COUPONS BASE STYLES
   ========================================================================== */
#category-coupons .list { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 2em 1em; padding: 2rem 0 4rem; margin: 0; list-style: none; }
/*#category-coupons .list > li { container-type: inline-size; }*/
#category-coupons .list > li { 
	container-type: inline-size; 
	width: 100%;
	max-width: 285px; /* Caps the size (admin preview uses 275px) */
	margin: 0 auto; /* Keeps the coupon centered in its column */
}

#category-coupons .coupon {
	--color-accent: #fec14d; width: 100%; height: 100%; min-height: 190cqw; position: relative; bottom: 0;
	display: flex; flex-direction: column; background-position: center; background-repeat: no-repeat;
	background-size: cover; border-radius: 7cqw; overflow: hidden; font-size: 0.85em; font-weight: 500;
	color: #000; transition: 0.3s ease bottom, 0.3s ease box-shadow;
}
@supports (font-size: 1cqw) { #category-coupons .coupon { font-size: 4.2cqw; } }
#category-coupons .coupon:hover { bottom: 0.5em; z-index: 1; }

#category-coupons .coupon::before, #category-coupons .coupon::after {
	content: ""; width: 3.2em; height: 3.2em; position: absolute; left: 50%; z-index: 2; background-color: #fff; border-radius: 100%;
}
#category-coupons .coupon::before { top: 0; transform: translate(-50%, -50%); }
#category-coupons .coupon::after { bottom: 0; transform: translate(-50%, 50%); }

#category-coupons .color-accent { color: var(--color-accent); fill: var(--color-accent); }

#category-coupons .icon {
	width: 1.1em; height: 1.1em; display: block; flex: 0 0 auto;
	-webkit-mask-image: var(--icon); mask-image: var(--icon);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: contain; mask-size: contain; background-color: currentColor;
}

#category-coupons .icon-star { --icon: url("/images/offer-templates/icon_star.svg"); }
#category-coupons .icon-trophy { --icon: url("/images/offer-templates/icon_trophy.svg"); }
#category-coupons .icon-flame { --icon: url("/images/offer-templates/icon_flame.svg"); }
#category-coupons .icon-bolt { --icon: url("/images/offer-templates/icon_bolt.svg"); }
#category-coupons .icon-heart { --icon: url("/images/offer-templates/icon_heart.svg"); }
#category-coupons .icon-sun { --icon: url("/images/offer-templates/icon_sun.svg"); }
#category-coupons .icon-gift { --icon: url("/images/offer-templates/icon_gift.svg"); }
#category-coupons .icon-tag { --icon: url("/images/offer-templates/icon_tag.svg"); }

/* Info Box Layout Alignment */
#category-coupons .info { --pad-inline: 2.5em; flex-grow: 1; padding: 2.5em 0; }
#category-coupons .info > div { padding: 0 var(--pad-inline); }

#category-coupons .coupon .offer,
#category-coupons .coupon .info,
#category-coupons .coupon .info .relative {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
	position: relative !important;
}

#category-coupons .info .logo { width: auto; max-width: 60%; max-height: 5em; margin-bottom: 1em; }
#category-coupons .info .name { font-size: 2.25em; font-weight: 900; line-height: 1; }
#category-coupons .info p { opacity: 0.6; }

#category-coupons .info .cta {
	min-width: 80%; max-width: 100%; display: inline-flex; align-items: center; justify-content: space-between;
	gap: 1.5em; padding: 0.45em 0.3em 0.3em 1.2em; margin-top: 1em; background-color: #000; border-radius: 100em; color: #fff;
}
#category-coupons .info .cta::before { content: ""; position: absolute; inset: 0; z-index: 3; }

/* FIXED BUTTON ARROW PATH */
/* FIXED BUTTON ARROW PATH */
#category-coupons .info .cta::after {
	content: ""; width: 2.1em; height: 2.1em; margin-top: -0.15em; flex-shrink: 0;
	background: url("/images/offer-templates/icon_arrow.svg") center / 40% no-repeat #fff !important; 
	border-radius: 100%;
}
#category-coupons .info .cta.color-white { background-color: #fff; color: #000; }
#category-coupons .info .cta.color-white::after { 
	background: url("/images/offer-templates/icon_arrow_white.svg") center / 40% no-repeat #000 !important; 
}
#category-coupons .info .cta:hover { text-decoration: none; }

/* Badges Base Layout definitions */
#category-coupons .badge { display: flex; align-items: center; gap: 0.25em; position: absolute; top: 0; right: 0; z-index: 2; font-size: 0.7em; }
#category-coupons .badge .icon { width: 1.5em; height: 1.5em; }

#category-coupons .badge.type-burst { display: none !important; }

#category-coupons .badge.type-tab { padding: 0; top: 0.7em; right: 1em; color: #fff; }
#category-coupons .badge.type-tab::before {
	content: ""; width: 1em; height: 100%; position: absolute; top: 0; left: 100%; background-color: #1d1d1d; transform: skewY(45deg); transform-origin: top left;
}
#category-coupons .badge.type-tab.style-2 { right: 3em; }
#category-coupons .badge.type-tab.style-2::after { content: ""; width: 2em; height: 100%; position: absolute; top: 1em; left: calc(100% + 1em); background-color: #333; }
#category-coupons .badge.type-tab > div {
	display: flex; align-items: center; gap: 0.35em; padding: 0.75em 1.5em 0.5em 1.25em; background-color: #333; clip-path: polygon(0.75em 0, 100% 0, 100% 100%, 0.75em 100%, 0 50%);
}
#category-coupons .badge.type-tab .icon { margin-top: -2px; background-color: #fec14d; }

/* FIXED NON-TRUNCATING 3D RIBBON TAG */
#category-coupons .badge.type-ribbon {
	display: inline-flex !important;
	position: relative !important;
	inset: auto !important;
	order: -1 !important;
	align-self: flex-end !important;
	
	/* Pulls ribbon layout cleanly inside card content view to prevent edge clipping */
	margin: 0 -0.85em 1.25em auto !important; 
	padding: 0.5em 1.85em 0.5em 1.5em !important;
	
	/* Authentic 3D return ribbon polygon lines */
	clip-path: polygon(0.75em 0%, 100% 0%, calc(100% - 0.75em) 50%, 100% 100%, 0.75em 100%, 0% 50%) !important;
	
	font-size: 0.725em !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	width: auto !important;
	white-space: nowrap !important;
	z-index: 5 !important;
}
#category-coupons .badge.type-ribbon .icon { background-color: transparent !important; color: inherit !important; }

/* Offer Layout Structure */
#category-coupons .offer {
	position: relative; z-index: 0; padding: 2.5em; background-color: #bd2739; border-bottom: 4px solid #fff; font-size: 1.1em; color: #fff;
}
#category-coupons .offer .line-1 { position: relative; z-index: 1; gap: 0.25em; font-size: 0.9em; }
#category-coupons .offer .line-1 .icon { width: 1.2em; height: 1.2em; }
#category-coupons .offer .line-2 { position: relative; z-index: 1; margin: 0.1em 0 0.05em; font-family: 'Bebas Neue', display; font-size: 5.25em; line-height: 0.9; }
#category-coupons .offer .line-3 { relative; z-index: 1; font-size: 1.1em; }

#category-coupons .offer.style-2 {
	padding: 2.25em 2.25em 3.5em; margin: 0 1.5em; background: #ed213f; border: 0; border-radius: 7cqw 7cqw 0 0; text-align: center;
}
#category-coupons .offer.style-2 .line-1 { display: inline-flex; }
#category-coupons .offer.style-2 .line-2 { margin: 0.5em 0 1em; font-size: 1em; line-height: 0; }
#category-coupons .offer.style-2 .line-2 .dot { overflow: hidden; }
#category-coupons .offer.style-2 .line-2 .dot span { width: 0.4em; height: 0.4em; display: inline-block; position: relative; background-color: var(--color-accent); border-radius: 50%; }
#category-coupons .offer.style-2 .line-2 .dot span::before, #category-coupons .offer.style-2 .line-2 .dot span::after {
	content: ""; width: 1000em; height: 1px; position: absolute; top: 50%; background-color: #fff;
}
#category-coupons .offer.style-2 .line-2 .dot span::before { left: -0.75em; transform: translateX(-100%); }
#category-coupons .offer.style-2 .line-2 .dot span::after { right: -0.75em; transform: translateX(100%); }
#category-coupons .offer.style-2 .line-2 svg { margin: 1em 0 0.25em; fill: #fff; }

/* ==========================================================================
   COUPON CORE STYLES WITH CORRECT PATH CONFIGURATIONS
   ========================================================================== */

/* Coupon 1 */
#category-coupons .coupon-1 { background: url("/images/offer-templates/coupon_1_bg.jpg") bottom / 100% auto no-repeat #f4e7ca !important; }
#category-coupons .coupon-1 .offer { background: url("/images/offer-templates/coupon_1_offer_bg.jpg") center / cover no-repeat #bd2739 !important; }

/* Coupon 2 */
#category-coupons .coupon-2 { background: url("/images/offer-templates/coupon_2_bg.jpg") bottom / 100% auto no-repeat #1f1f1f !important; color: #fff; }
#category-coupons .coupon-2 .offer { padding: calc(2.5em - 8px); margin: 6px 6px 10px; background: rgb(253, 193, 77, 0.12); border: 2px dashed var(--color-accent); border-radius: 6cqw; }

/* Coupon 3 */
#category-coupons .coupon-3 { background: url("/images/offer-templates/coupon_3_bg.jpg") bottom / 100% auto no-repeat #820b19 !important; color: #fff; }
#category-coupons .coupon-3 .badge > div { background-color: #ed213f; }
#category-coupons .coupon-3 .badge::before { background-color: #ae1429; }

/* Coupon 4 */
#category-coupons .coupon-4 { --color-accent: #adef51; background: #adef51; }
#category-coupons .coupon-4 .offer { padding-top: 3.5em; padding-bottom: 3.5em; background-color: transparent; border: 0; }
#category-coupons .coupon-4 .offer::before { content: ""; position: absolute; inset: 0 -10%; z-index: -1; background-color: #000; border-radius: 0 0 30% 30% / 0 0 90% 90%; }
#category-coupons .coupon-4 .offer .icon { background-color: var(--color-accent); }

/* Coupon 5 */
#category-coupons .coupon-5 { background: #2f28bd; color: #fff; }
#category-coupons .coupon-5 .offer { padding-left: 1.75em; padding-bottom: 2em; margin-left: 2.5em; background-color: #fbbd41; border: 0; border-radius: 0 0 0 1.5em; color: #000; }
#category-coupons .coupon-5 .offer .line-2 { font-family: 'Bicubik Regular', display; font-size: 4.8em; }

/* Coupon 5 Text Wrap Fix */
#category-coupons .coupon-5 .offer .line-2 { 
	font-family: 'Bicubik Regular', display; 
	font-size: 3.2em !important;        /* Scaled down from 4.8em so wide text fits */
	white-space: normal !important;     /* Forces the text to break onto line 2 at a space */
	line-height: 1.0 !important;        /* Pulls line 2 up close so it doesn't bleed out of the gold box */
	word-break: break-word !important;  /* Safety net for exceptionally long text strings */
}

/* Coupon 6 */
#category-coupons .coupon-6 { background: url("/images/offer-templates/coupon_6_bg-v2.jpg") bottom / 100% auto no-repeat #dedce8 !important; }
#category-coupons .coupon-6 .info { padding-top: 1em; }
#category-coupons .coupon-6 .offer { padding-bottom: 5.85em; background: url("/images/offer-templates/coupon_6_offer_bg.png") bottom / cover no-repeat !important; border: 0; }

/* Coupon 7 */
//#category-coupons .coupon-7 { background: url("/images/offer-templates/coupon_7_bg.jpg") bottom / 100% auto no-repeat #fff !important; }
//#category-coupons .coupon-7 .offer { background: url("/images/offer-templates/coupon_7_offer_bg.jpg") center / cover no-repeat #3f73eb !important; }
/* Coupon 7 - Updated Background */
#category-coupons .coupon-7 { 
	background: url("/images/offer-templates/coupon_7_bg-v2.jpg") bottom / 100% auto no-repeat #c0d0fa !important; 
}
#category-coupons .coupon-7 .offer { 
	background: url("/images/offer-templates/coupon_7_offer_bg.jpg") center / cover no-repeat #3f73eb !important; 
}

/* Coupon 8 */
/*#category-coupons .coupon-8 { background: #fbbd41; }
#category-coupons .coupon-8 .offer { padding: calc(2.5em - 6px); margin: 6px 6px 10px; background: #fff; border: 0; border-radius: 6cqw; color: #000; }
*/
/* Coupon 8 - Updated */
#category-coupons .coupon-8 { 
	background: #fbbd41; 
}
#category-coupons .coupon-8 .offer { 
	padding: calc(2.5em - 6px); 
	margin: 6px 6px 10px; 
	background: #fef0c7; /* Changed from #fff */
	border: 0; 
	border-radius: 6cqw; 
	color: #000; 
}

#category-coupons .coupon-8 .offer span { display: inline-block; position: relative; z-index: 1; color: #fff; }
#category-coupons .coupon-8 .offer span::before { content: ""; position: absolute; top: -0.05em; right: -0.05em; bottom: 0.05em; left: -0.05em; z-index: -1; background-color: #813feb; }

#category-coupons .coupon-8 .badge {
	top: -2.5em; 
}

/* Coupon 9 */
#category-coupons .coupon-9 { background: url("/images/offer-templates/coupon_9_bg.jpg") bottom / 100% auto no-repeat #510fb9 !important; color: #fff; }
#category-coupons .coupon-9 .info { padding-top: 1.5em; }
#category-coupons .coupon-9 .info p { opacity: 1; }
#category-coupons .coupon-9 .offer { padding: 2.5em 2.5em 1.5em; margin: 0; background-color: #813feb; border-bottom: 4px solid #fff; }

/* Coupon 9 Header Realignment Fix */
#category-coupons .coupon-9 .offer {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	padding-top: 3.5em !important; /* Leaves clear breathing room for the top ribbon */
}

/* Let the ribbon float alone at the top right edge out of the way */
#category-coupons .coupon-9 .badge.type-ribbon {
	position: absolute !important;
	top: 1em !important;
	right: 0 !important;
	margin: 0 -0.85em 0 0 !important; /* Retains your crisp 3D fold wrapping right around the card edge */
	order: unset !important;
}

/* Slide Member Perk down below the lines so it centers beautifully */
#category-coupons .coupon-9 .offer .line-1 {
	display: block !important;
	order: 3 !important; /* Forces it below line-2 (10% OFF) and line-3 */
	margin-top: 1em !important;
	font-size: 0.85em !important;
	opacity: 0.8 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
}

/* Coupon 10 */
#category-coupons .coupon-10 { background: #fffbe1; }
#category-coupons .coupon-10 .offer { background-color: #9fb303; border: 4px dotted #fff; border-bottom: 0; border-radius: 50% 50% 0 0; outline: 4px solid #9fb303; }
#category-coupons .coupon-10 .offer .line-2 .dot span { background-color: #fff; }
#category-coupons .coupon-10 .badge > div { background-color: #b5cb05; color: #000; }
#category-coupons .coupon-10 .badge::before { background-color: #9fb303; }
#category-coupons .coupon-10 .badge .icon { background-color: #000; }

/* Coupon 11 */
#category-coupons .coupon-11 { background: url("/images/offer-templates/coupon_11_bg.jpg") bottom / 100% auto no-repeat #457753 !important; color: #fff; }
#category-coupons .coupon-11 .offer { padding-right: 3.75em; padding-left: 3.75em; margin: 0; background-color: transparent; border: 0; }
#category-coupons .coupon-11 .offer::before {
	content: ""; position: absolute; inset: 0 -10%; background-color: #ff9600; background: radial-gradient(circle at center bottom, #f9b042, #ff9600); border-radius: 50% 50% 0 0 / 65% 65% 0 0;
}
#category-coupons .coupon-11 .offer .line-2 .dot span { background-color: #fff; }
#category-coupons .coupon-11 .badge > div { background-color: #84b290; color: #000; }
#category-coupons .coupon-11 .badge::before { background-color: #366a43; }
#category-coupons .coupon-11 .badge .icon { background-color: #000; }

/* Coupon 12 */
#category-coupons .coupon-12 { background: url("/images/offer-templates/coupon_12_bg.jpg") bottom / 100% auto no-repeat #0d0b6b !important; color: #fff; }
#category-coupons .coupon-12 .offer { padding-top: 1.75em; padding-bottom: 1.75em; margin: 2em 0.75em 0 0; background: #0fafcb; border: 0; clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%); }

/* Coupon 13 */
#category-coupons .coupon-13 { background: #bf0551; color: #fff; }
#category-coupons .coupon-13 .offer { padding: 1.75em 1.25em 2.5em; margin: 2.5em 1.25em 0; background: #832147; border-color: #dc588b; }
#category-coupons .coupon-13 .offer .line-3 span {
	display: inline-block; padding: 0.1em 1em; background-color: #fbb1d3; clip-path: polygon(0 0, 100% 0, calc(100% - 0.35em) 50%, 100% 100%, 0 100__, 0.35em 50%); color: #842248;
}
#category-coupons .coupon-13 .badge { right: 0; }
#category-coupons .coupon-13 .badge > div { padding-right: 2em; background-color: #cd3c77; }
#category-coupons .coupon-13 .badge::before { display: none; }

/* Coupon 14 */
#category-coupons .coupon-14 { background: url("/images/offer-templates/coupon_14_bg.jpg") bottom / 100% auto no-repeat #59237b !important; color: #fff; }
#category-coupons .coupon-14 .offer { padding: calc(2.5em - 8px); margin: 6px 6px 10px; background: rgb(253, 193, 77, 0.12); border: 2px dashed var(--color-accent); border-radius: 6cqw; }

/* Coupon 15 */
#category-coupons .coupon-15 { background: #4d4183; color: #fff; }
#category-coupons .coupon-15 .offer { background: transparent; border: 0; }
#category-coupons .coupon-15 .offer::before { content: ""; width: 127%; aspect-ratio: 1; position: absolute; bottom: -2em; left: -20%; background-color: #351d77; border-radius: 50%; }

/* Coupon 16 */
#category-coupons .coupon-16 { background: #bbeb77; }
#category-coupons .coupon-16 .offer { padding-top: 2.75em; padding-right: 3.75em; padding-left: 3.75em; margin: 0; background-color: #383838; border: 0; border-radius: 0; clip-path: polygon(0 1em, 30% 1em, 50% 0, 70% 1em, 100% 1em, 100% 100%, 0 100%); }
#category-coupons .coupon-16 .badge::before { opacity: 0.4; }

/* Coupon 17 */
/* #category-coupons .coupon-17 { padding: 0.75em; background: #fff; outline: 2px dashed #000; outline-offset: -2px; }*/
#category-coupons .coupon-17 { padding: 0.75em; background: #fdf6e3; outline: 2px dashed #000; outline-offset: -2px; }
#category-coupons .coupon-17::before, #category-coupons .coupon-17::after { border: 2px dashed #000; }
#category-coupons .coupon-17 .info > div { padding: 0 1.75em; }
#category-coupons .coupon-17 .offer { padding: 1.75em; background-color: #adef51; border: 0; border-radius: 6cqw 6cqw 0 0; color: #000; }

/* Coupon 18 */
#category-coupons .coupon-18 { background: url("/images/offer-templates/coupon_18_bg.jpg") bottom / 100% auto no-repeat #de3232 !important; color: #fff; }
#category-coupons .coupon-18 .offer { background-color: #dd5759; }
#category-coupons .coupon-18 .badge > div { background-color: #ed213f; }
#category-coupons .coupon-18 .badge::before { background-color: #ae1429; }

/* Coupon 19 */
#category-coupons .coupon-19 { background: url("/images/offer-templates/coupon_19_bg.jpg") bottom / 100% auto no-repeat #000 !important; color: #fff; }
#category-coupons .coupon-19 .offer { background-color: #1a1a1a; }
#category-coupons .coupon-19 .badge > div { background-color: #ed213f; }
#category-coupons .coupon-19 .badge::before { background-color: #ae1429; }

/* Coupon 20 */
#category-coupons .coupon-20 { background: url("/images/offer-templates/coupon_20_bg.jpg") bottom / 100% auto no-repeat #fff8e7 !important; }
#category-coupons .coupon-20 .offer { background: #f7c339; color: #000; }

/* ==========================================================================
   VERTICAL SPACING SPRING OVERRIDES
   ========================================================================== */
#category-coupons .coupon .info {
	justify-content: space-around !important;
	height: 100% !important;
	box-sizing: border-box !important;
	padding-top: 1.5em !important;
	padding-bottom: 1.5em !important;
}
#category-coupons .coupon .name { margin-top: auto !important; margin-bottom: 0.5em !important; }
#category-coupons .coupon p.text-overflow { margin-bottom: auto !important; }
#category-coupons .coupon .line-2 { padding-left: 4px !important; padding-right: 4px !important; box-sizing: border-box !important; }

/* ==========================================================================
   GLOBAL SPLIT-STYLE BOTTOM CONTAINER CENTERING
   ========================================================================== */
#category-coupons .coupon .offer.style-2 { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; }
#category-coupons .coupon .offer.style-2 .line-1.flex { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 auto 0.5em auto !important; }
#category-coupons .coupon .offer.style-2 .line-1.flex .icon { margin-right: 0.35em !important; }
#category-coupons .coupon-3 .offer.style-2 { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; }
#category-coupons .coupon-3 .offer.style-2 .line-1.flex { justify-content: center !important; width: 100% !important; margin: 0 auto 0.5em auto !important; }


/* 1. Add the shadow to the PARENT wrapper so the mask doesn't chop it off! */
#category-coupons,
#coupon-preview-wrapper {
	filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.15));
}

/* 2. Apply the transparent cutouts to the coupon */
#coupon-preview-wrapper .coupon,
#category-coupons .coupon {
	-webkit-mask-image: 
		radial-gradient(circle at 50% 0%, transparent 1.55em, black 1.58em), 
		radial-gradient(circle at 50% 100%, transparent 1.55em, black 1.58em);
	-webkit-mask-size: 100% 51%, 100% 51%;
	-webkit-mask-position: top, bottom;
	-webkit-mask-repeat: no-repeat;
	
	mask-image: 
		radial-gradient(circle at 50% 0%, transparent 1.55em, black 1.58em), 
		radial-gradient(circle at 50% 100%, transparent 1.55em, black 1.58em);
	mask-size: 100% 51%, 100% 51%;
	mask-position: top, bottom;
	mask-repeat: no-repeat;
	
	box-shadow: none !important;
	
	/* Stop the transition animation */
	transition: none !important;
}

/* Kill the upward movement on hover */
#coupon-preview-wrapper .coupon:hover,
#category-coupons .coupon:hover {
	bottom: 0 !important;
}

/* Remove the fake white circles */
#coupon-preview-wrapper .coupon::before, 
#coupon-preview-wrapper .coupon::after,
#category-coupons .coupon::before,
#category-coupons .coupon::after {
	background-color: transparent !important;
	box-shadow: none !important; 
	box-sizing: content-box !important;
}

/* Fix Template 8 Border */
#coupon-preview-wrapper .coupon-8::before,
#category-coupons .coupon-8::before {
	border: 3px solid #fbbd41 !important;
}