/* Coupon Styles — companion to violet-signal/theme.css */
/* theme.css is converter-generated; these structural coupon rules live here
   so they survive a theme regen. Ported from poseidon/theme.css. */

*:has( > .cpn-itm ) {
	container-type: inline-size;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		inset: calc(-1 * var(--cpn-udr-o)) var(--cpn-udr-s);
		background: var(--cpn-udr-clr, #ffce34);
		border-radius: var(--bdr-rds, 1rem);
		z-index: 0;
	}
}

.bg-bx:has(.bg-bx) { --cpn-ntch-bg: var(--inner-theme); }

.cpn-ntch {
	position: absolute;
	top: var(--cpn-ntch-y);
	left: calc(-1 * var(--pd-h) );
	pointer-events: none;
	z-index: 2;
	width: calc(100% + (var(--pd-h) * 2));
	--bdr-stl: dashed;
	--bdr-w: 2px;

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 0;
		translate: 0 -50%;
		width: calc(var(--cpn-ntch-r) * 2);
		height: calc(var(--cpn-ntch-r) * 2);
		border-radius: 50%;
		background-color: var(--cpn-ntch-bg, var(--main-bg));
	}

	&::before {
		left: calc(-1.1 * var(--cpn-ntch-r));
	}

	&::after {
		right: calc(-1.1 * var(--cpn-ntch-r));
	}
}

ul:has(.cpn-itm) {
	padding-top: var(--cpn-v1-lgo-ovlp, 5.5rem);
	padding-bottom: 1.8rem;
}

li:has(.cpn-itm) {
	flex-shrink: 0;
	position: relative;
	overflow: visible;

	&::before {
		content: '';
		position: absolute;
		inset: -1% 8% -2% 3%;
		background-color: var(--buttons);
		border-radius: var(--bdr-rds);
		transform: rotate(-5.5deg);
		z-index: 0;
	}
}

.cpn-itm {
	position: relative;
	z-index: 1;
	padding: var(--cpn-bdr-pd);

	&::after {
		content: '';
		position: absolute;
		inset: var(--cpn-bdr-pd);
		z-index: 1;
		border-width: var(--cpn-bdr-w);
		border-style: var(--cpn-bdr-s);
		border-radius: inherit;
		pointer-events: none;
	}

	.lgo {
		margin-top: calc(var(--cpn-v1-lgo-ovlp, 5.5rem) * -1);
		position: relative;
		z-index: 2;
		display: var(--cpn-lg-dsp);
		max-width: var(--cpn-lg-mx-wd-clc);
		margin-inline: auto;
	}

	&.no-bg:after {
		inset: 0;
	}

	.act .icn {
		font-size: var(--cpn-act-icn-s);
	}

	.icn.ft {
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50%;
		font-size: 2rem;
	}

	&.no-bg {
		padding: var(--cpn-bdr-pd);

		&::after {
			inset: 0;
		}
	}
}

@container (width > 900px) {
	.cpn-itm .pd_v {
		--pd-v: clamp(calc(var(--sp-vp-min) * 0.5), var(--sp-vp), calc(var(--sp-vp-max) * 0.5) );
	}

	.cpn-itm div.cpn-lyt {
		text-align: left;
		display: grid;
		column-gap: var(--flx-gap);
		grid-template-columns: calc(50% - var(--cpn-ttl-w)) 1fr;
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc dsc'
			'act dsc'
			'act dt'
			'act dis';

		&:after {
			content: "";
			position: absolute;
			top: 50%;
			height: 100%;
			width: var(--bdr-w);
			left: calc( 50% - var(--cpn-ttl-w) + ( var(--flx-gap) * 0.5 ) );
			background-color: hsl(from var(--text-color) h s l / 0.5);
			transform: translateY(-50%);
		}

		.prc {
			grid-area: prc;
			text-align: center;
			align-self: center;

			&:nth-last-child(6) {
				align-self: flex-end;
			}
		}

		.ttl {
			grid-area: ttl;
			margin-top: 0;
		}

		.dsc { grid-area: dsc; }
		.dt  { grid-area: dt; }
		.dis { grid-area: dis; }

		.act {
			grid-area: act;
			justify-content: center;
		}
	}

	.cpn-itm > .cpn-lyt .act:nth-child(3) {
		grid-template-areas:
			'prc ttl'
			'prc act';
	}

	.cpn-itm > .cpn-lyt .act:nth-child(4):has( .dsc ) {
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc act';
	}

	.cpn-itm > .cpn-lyt .act:nth-child(4):has( .dt ) {
		grid-template-areas:
			'prc ttl'
			'prc dt'
			'prc act';
	}

	.cpn-itm > .cpn-lyt .act:nth-child(4):has( .dis ) {
		grid-template-areas:
			'prc ttl'
			'prc dis'
			'prc act';
	}

	.cpn-itm > .cpn-lyt .act:nth-child(5):has( .dis ) {
		grid-template-areas:
			'prc ttl'
			'prc dt'
			'prc dis'
			'prc act';
	}

	.cpn-itm > .cpn-lyt .act:nth-child(5):has( .dsc ) {
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc dt'
			'prc act';
	}

	.cpn-itm > .cpn-lyt .act:nth-child(5):not( :has( .dt ) ) {
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc dis'
			'prc act';
	}
}