/* ── figma-theme-converter output ───────────────────────────────────────────── */
/* Theme:  Tango Signature Service Group */
/* Source: tango-signature-service-group.json */
/* Do not edit manually — re-run converter to regenerate */

:root {

	/* ── Border Radius ──────────────────────────────────────────────────────── */

	--bdr-rds: 1.667rem;
	--bdr-tl-rds: 1;
	--bdr-tr-rds: 0;
	--bdr-br-rds: 1;
	--bdr-bl-rds: 0;

	/* ── Card Border Radius ─────────────────────────────────────────────────── */

	--bdr-rds-crd: 1.667rem;
	--bdr-tl-rds-crd: 1;
	--bdr-tr-rds-crd: 0;
	--bdr-br-rds-crd: 1;
	--bdr-bl-rds-crd: 0;

	/* ── Card Box Shadow ────────────────────────────────────────────────────── */

	--bx-sdw-crd-x:   0rem;
	--bx-sdw-crd-y:   0rem;
	--bx-sdw-crd-blr: 0rem;
	--bx-sdw-crd-o:   0;

	/* ── Button V1 Padding ──────────────────────────────────────────────────── */

	--btn-v1-pd-t: 1.125rem;
	--btn-v1-pd-b: 1.125rem;
	--btn-v1-pd-l: 1.667rem;
	--btn-v1-pd-r: 1.667rem;
	--btn-v1-pd: var(--btn-v1-pd-t) var(--btn-v1-pd-r) var(--btn-v1-pd-b) var(--btn-v1-pd-l);

	/* ── Button V1 Border Radius ────────────────────────────────────────────── */

	--btn-v1-bdr-rds-tl: 1.667rem;
	--btn-v1-bdr-rds-tr: 0rem;
	--btn-v1-bdr-rds-br: 1.667rem;
	--btn-v1-bdr-rds-bl: 0rem;
	--btn-v1-bdr-rds: var(--btn-v1-bdr-rds-tl) var(--btn-v1-bdr-rds-tr) var(--btn-v1-bdr-rds-br) var(--btn-v1-bdr-rds-bl);

	/* ── Button V1 Box Shadow ───────────────────────────────────────────────── */

	--btn-v1-bx-sdw-x:   0rem;
	--btn-v1-bx-sdw-y:   0rem;
	--btn-v1-bx-sdw-blr: 0rem;
	--btn-v1-bx-sdw-o:   0;

	/* ── Button V1 Border (Alt Variant) ─────────────────────────────────────── */

	--btn-v1-bdr-w:   2px;
	--btn-v1-bdr-stl: solid;

	/* ── Button V2 Padding ──────────────────────────────────────────────────── */

	--btn-v2-pd-t: 0.889rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Top'  } */
	--btn-v2-pd-b: 0.889rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Bottom'  } */
	--btn-v2-pd-l: 1.667rem; /* { min: 0.5, max: 4, step: 0.1, friendly: 'Button V2 Padding Left'  } */
	--btn-v2-pd-r: 1.667rem; /* { min: 0.5, max: 4, step: 0.1, friendly: 'Button V2 Padding Right'  } */
	--btn-v2-pd: var(--btn-v2-pd-t) var(--btn-v2-pd-r) var(--btn-v2-pd-b) var(--btn-v2-pd-l); /* { readonly: true  } */

	/* ── Button V2 Border Radius ────────────────────────────────────────────── */

	--btn-v2-bdr-rds-tl: 1.667rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Top Left'  } */
	--btn-v2-bdr-rds-tr: 0; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Top Right'  } */
	--btn-v2-bdr-rds-br: 1.667rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Bottom Right'  } */
	--btn-v2-bdr-rds-bl: 0; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Bottom Left'  } */
	--btn-v2-bdr-rds: var(--btn-v2-bdr-rds-tl) var(--btn-v2-bdr-rds-tr) var(--btn-v2-bdr-rds-br) var(--btn-v2-bdr-rds-bl); /* { readonly: true  } */

	/* ── Button V2 Box Shadow ───────────────────────────────────────────────── */

	--btn-v2-bx-sdw-x: 0rem; /* { min: 0,  max: 2, step: 0.1, friendly: 'Button V2 Box Shadow \'X\' Position' } */
	--btn-v2-bx-sdw-y: 0.25rem; /* { min: 0,  max: 2, step: 0.05, friendly: 'Button V2 Box Shadow \'Y\' Position' } */
	--btn-v2-bx-sdw-blr: 0.875rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Button V2 Box Shadow Blur' } */
	--btn-v2-bx-sdw-o: 0; /* { min: 0, max: 1, step: 0.05, friendly: 'Button V2 Box Shadow Opacity' } */

	--btn-v2-bdr-w: 2px; /* { min: 1, max: 3, step: 0.1, friendly: 'Button V2 Border Width'  } */
	--btn-v2-bdr-stl: solid; /* { friendly: 'Button V2 Border Style'  } */

	/* ── Flair (Shapes & Decorative) ────────────────────────────────────────── */

	--flr-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'><path fill='black' d='M44.0924 23.6676C44.1098 23.6501 29.0131 8.47159 29.0131 8.47159C28.6484 8.10692 28.7648 7.51143 29.2109 7.29611C32.2078 5.82389 35.8972 6.25253 38.4302 8.66942C40.1023 10.2755 40.946 12.4441 40.9305 14.5776C40.9305 14.9752 41.0954 15.3554 41.3767 15.6367L45.3163 19.5763C45.6964 19.9564 46.3598 19.8071 46.5247 19.3105C48.2957 14.2127 47.1532 8.31996 43.0817 4.24859C37.7843 -1.0488 29.36 -1.37852 23.6649 3.23798C23.6474 3.22052 8.4689 18.3173 8.4689 18.3173C8.10423 18.6819 7.50874 18.5656 7.29342 18.1194C5.8212 15.1225 6.24984 11.4331 8.66673 8.90013C10.2728 7.22808 12.4414 6.38432 14.5749 6.39981C14.9725 6.39981 15.3527 6.23493 15.634 5.95367L19.5736 2.0141C19.9537 1.63391 19.8044 0.970508 19.3078 0.805647C14.214 -0.963378 8.32124 0.179127 4.24988 4.25059C-1.04752 9.54798 -1.37724 17.9723 3.23926 23.6674C3.2218 23.6849 18.3186 38.8634 18.3186 38.8634C18.6832 39.2281 18.5668 39.8236 18.1207 40.0389C15.1238 41.5111 11.4344 41.0825 8.90141 38.6656C7.22937 37.0595 6.3856 34.8908 6.40109 32.7574C6.40109 32.3597 6.23621 31.9796 5.95495 31.6983L2.01538 27.7587C1.6352 27.3786 0.971791 27.5279 0.80693 28.0245C-0.964032 33.1222 0.178473 39.015 4.24994 43.0864C9.54733 48.3838 17.9716 48.7135 23.6668 44.097C23.6842 44.1145 38.8627 29.0177 38.8627 29.0177C39.2274 28.653 39.8229 28.7694 40.0382 29.2156C41.5104 32.2125 41.0818 35.9019 38.6649 38.4349C37.0588 40.1069 34.8902 40.9507 32.7567 40.9352C32.3591 40.9352 31.9789 41.1001 31.6977 41.3813L27.7581 45.3209C27.3779 45.7011 27.5273 46.3645 28.0238 46.5293C33.1216 48.3003 39.0144 47.1578 43.0857 43.0863C48.3792 37.787 48.7088 29.3602 44.0924 23.6676ZM37.2546 26.5481C35.0376 25.8032 32.4538 26.3172 30.683 28.0882L21.3471 37.4242C21.1492 37.6221 20.8 37.4242 20.8835 37.1429C21.5449 34.9414 21.0154 32.476 19.2948 30.7382C19.2948 30.7382 12.5251 23.9685 9.77663 21.2046C9.57878 21.0067 9.79409 20.6576 10.0579 20.741C12.275 21.4859 14.8587 20.9718 16.6295 19.2008C16.6295 19.2008 23.3158 12.5146 26.2137 9.63396C26.4116 9.4361 26.7763 9.65141 26.6773 9.91522C25.8491 12.1827 26.3456 14.815 28.1845 16.6517C28.1845 16.6517 34.8375 23.3047 37.5687 26.0537C37.751 26.3 37.5359 26.647 37.2546 26.5481Z'/></svg>"); /* { friendly: 'Flair Mask Image (Data URI)', group: 'Shapes & Decorative' } */

}

.flr-pattern {
	display: none;
}

/* ── Bottom Decoration (wave divider) ──────────────────────────────────── */

.btm-deco {
	position: absolute;
	bottom: -1px;
	z-index: 0;
	width: 100%;

	svg {
		width: 100%;
		height: 18.722rem;
		display: block;
	}

	@media screen and (max-width: 1279px) {
		margin-top: 2rem;
	}
}

section:has(> .btm-deco) {
	&:has(+ section[data-colors="primary-light"])   { --shape-clr-1-dyn: var(--lt-bg); }
	&:has(+ section[data-colors="alternate-light"]) { --shape-clr-1-dyn: var(--lt-alt-bg); }
	&:has(+ section[data-colors="primary-dark"])    { --shape-clr-1-dyn: var(--dk-bg); }
	&:has(+ section[data-colors="alternate-dark"])  { --shape-clr-1-dyn: var(--dk-alt-bg); }
}

/* When the btm-deco panel is the last thing in <main>, its visual neighbor is
   the first section of <footer>. Must set the var directly on the section
   (the @scope rule in color-structure.css sets --shape-clr-1-dyn on the
   section element itself, so a value set on a parent like <form> would be
   shadowed). Two paired selectors handle "section is direct last-child of
   main" and "section is wrapped (e.g. in <form>) as main's last-child". */
main:has(+ footer section[data-colors="primary-light"]:first-of-type)   > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="primary-light"]:first-of-type)   > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--lt-bg); }
main:has(+ footer section[data-colors="alternate-light"]:first-of-type) > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="alternate-light"]:first-of-type) > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--lt-alt-bg); }
main:has(+ footer section[data-colors="primary-dark"]:first-of-type)    > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="primary-dark"]:first-of-type)    > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--dk-bg); }
main:has(+ footer section[data-colors="alternate-dark"]:first-of-type)  > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="alternate-dark"]:first-of-type)  > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--dk-alt-bg); }

/* * ── Wave Banner Decoration (banner wave divider) ──────────────────────── */

.wv-bnr {
	pointer-events: none;

	svg {
		width: 100%;
		height: 100%;
		display: block;
	}

	.wv-bnr-stop-start {
		stop-color: var(--wv-bnr-grad-start);
	}

	.wv-bnr-stop-end {
		stop-color: var(--wv-bnr-grad-end);
	}
}

section.bnr.v1 {
	--bnr-v1-deco-h: 0 !important;
	--bnr-v1-wave-h: 36% !important;
	padding-bottom: var(--bnr-tls-pd-v-bt-clc) !important;

	.wv-bnr {
		bottom: -1% !important;
	}
}

.bnr-v1-deco {
	display: none !important;
}

.bnr.v1 {
    .bnr-v1-cnt {
        position: relative;
        z-index: 1;
        margin-bottom: 12rem !important;
		margin-top: 0 !important;
        padding-bottom: calc(var(--bnr-v1-deco-h) + 1.5rem);
    }
}

/* Coupon Styles */

.cpn.v2 {
    li:has(.cpn-itm)::before {
        inset: 0.75rem -1.2rem !important;
        transform: rotate(0deg) !important;
    }
}

.cpn.v2 {
	li:has(.cpn-itm) {
		&::before {
			clip-path: polygon(calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 50%, 1.5rem 0) !important;
		}
	}
}

*: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;
	}
}

.cpn-ntch {
	position: absolute;
	top: var(--cpn-ntch-y);
	left: 50%;
	translate: -50% 0;
	pointer-events: none;
	z-index: 2;
	width: 100%;
	--bdr-stl: dashed;
	--bdr-w: 2px;

	&::before, &::after {
        display: none;
    }

}

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

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

	&::before {
		content: '';
		position: absolute;
		inset: -2.4rem 2.667rem;
		background-color: var(--buttons);
		border-radius: 0% !important;
		z-index: 0;
		clip-path: polygon(50% 0, 100% 2.5rem, 100% calc(100% - 2.5rem), 50% 100%, 0 calc(100% - 2.5rem), 0 2.5rem);
	}

	
}

.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;
    }
		
	&.no-bg:after {
		inset: 0;
	}
	
	.act .icn {
		font-size: var(--cpn-act-icn-s);
	}
	
	.lgo {
		display: var(--cpn-lg-dsp);
		max-width: var(--cpn-lg-mx-wd-clc);
		margin-inline: auto;
	}
	
	.icn.ft {
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50%;
		font-size: 2rem;
	}
	
	&.no-bg {
		padding: var(--cpn-bdr-pd);
		
		&::after {
			inset: 0;
		}
	}
	
}

@media print {
	header,
	footer {
		display: none;
		visibility: hidden;
	}
}

@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';
	}
}