/* coupon-tools.css */
/* Coupon Tools */
main {
	--cpn-ttl-w: 3rem; /* { min: 0, max: 10, step: 1, friendly: 'Coupon Title Width' } */

	--cpn-bdr-pd: 0rem; /* { min: 0.25, max: 2, step: 0.001, friendly: 'Coupon Border Padding' } */
	--cpn-bdr-w: 2px; /* { min: 1, max: 5, step: 1, friendly: 'Coupon Border Width' } */
	--cpn-bdr-s: none; /* { friendly: 'Coupon Border Style' } */

	--cpn-act-icn-s: .89rem; /* { min: .8, max: 3, step: 0.001, friendly: 'Action Icon Size' } */

	--cpn-lg-mx-wd: 265; /* { min: 50, max: 500, step: 10, friendly: 'Coupon Logo Max Width Desktop' } */
	--cpn-lg-mx-wd-mbl: 170; /* { min: 10, max: 300, step: 1, friendly: 'Coupon Logo Max Width Mobile' } */
	--cpn-lg-mx-wd-clc: calc((var(--cpn-lg-mx-wd-mbl) * 1px) + (var(--cpn-lg-mx-wd) - var(--cpn-lg-mx-wd-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */

	--cpn-lg-dsp: flex;  /* {friendly: 'Coupon Logo Display'} */

	--cpn-ntch-r: 1.667rem;  /* { min: 10, max: 40, step: 1, friendly: 'Coupon Notch Radius' } */
	--cpn-ntch-y: 78%;   /* { min: 50, max: 95, step: 1, friendly: 'Coupon Notch Position' } */

	--cpn-udr-clr: #ffce34;  /* { friendly: 'Coupon Underlay Color' } */
	--cpn-udr-s: 12px;   /* { min: 0, max: 50, step: 1, friendly: 'Coupon Underlay Side Inset' } */
	--cpn-udr-o: 14px;   /* { min: 0, max: 30, step: 1, friendly: 'Coupon Underlay Overflow' } */
}

/* forms.css */

/* Form Styles */
fieldset {		
	min-inline-size: auto;
	border: none;
	padding: 0;
	margin: 0;
	
	legend {
		padding: 0;
	}
	
	ul {
	    flex-wrap: wrap;
	}
}

label {
	display: block;
	text-align: left;
	transition: color var(--g-trn-sp) var(--g-trn-tf) 0s;
}


/* Form Input Styles */
input, textarea, select {
	border: 0;
	width: 100%;
	outline: none;
	color: inherit;
	font-size: inherit;
	font-weight: normal;
	font-family: inherit;
	line-height: inherit;
	text-transform: none;
	background-color: transparent;
	line-height: var(--fnt-frm-lh);
}

select,
input[type='search'] {
	appearance: none;
}

textarea {
	resize: none;
	overflow: auto;
	min-height: 4.5rem;
}

:invalid {
	box-shadow: none;
}

.inp-mrk,
.input-text {
	position: relative;
}

.input-text #Consent + small {
    text-wrap: balance;
}

[class*="ta_"] {
	.input-text #Consent + small {
		text-align: center;
	}

	@media screen and (min-width:1280px) {
		&[class*="l-1280"] {
			.input-text #Consent + small {
				text-align: left;
			}
		}

		&[class*="r-1280"] {
			.input-text #Consent + small {
				text-align: right;
			}
		}
	}
	
}

.input-text  {
	text-align: left;
	font-size: 1rem;
	background-clip: padding-box !important;
	
	:is(input, select, textarea) {
		border-width: var(--frm-bdr-w);
		border-style: var(--frm-bdr-stl);
		border-radius: var(--frm-bdr-rds);
		transition: border-color var(--g-trn-sp) var(--g-trn-tf) 0s;
		padding: 1em;
	}
	
	&:has( > svg ) :is(input, select, textarea) {
		padding-right: 3em;
	}

	select {
		 option {
			background-color: var(--main-bg);
			color: var(--text);
		}
	}

	:is(input, select, textarea)::placeholder,
	select:has(option[value=""]:checked) {
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: 0.175rem;
		text-transform: uppercase;
		opacity: 1;
	}

	label {

		&.abs {
			top: 1em;
			left: 1em;
			opacity: 0;
			pointer-events: none;
			transform: scale(1);
			transform-origin: 0 50%;
			transition: transform var(--g-trn-sp) var(--g-trn-tf) 0s, top var(--g-trn-sp) var(--g-trn-tf) 0s, opacity var(--g-trn-sp) var(--g-trn-tf) 0s;
		}

	}
	
	> svg {
		bottom: calc(50% - .5em);
		right: 1em;
		position: absolute;
		pointer-events: none;
		color: var(--link-color);
	}
}

/* Form Checkbox Styles */

.inp-mrk {
	
	.input-text {
		border: 0;
		padding: 0;
	}
	
	input {
		position: absolute;
		opacity: 0;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		cursor: pointer;
		-webkit-appearance: none;
		z-index: 3;
		
		&:checked + label.replace:before {
			opacity: 1;
			transform: none;
		}
		
		&[type=radio] + label.replace {
			border-radius: 50%;
		}
		
	}
	
	label {
		user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		
		&.toggle,
		&.replace {
			flex: 0 0 auto;
			cursor: pointer;
			
			+ label {
				margin: 0;
				line-height: 1.55;
				position: relative;
				padding-left: .625em;	
			}
		}
		
		&.replace {
			margin: 0;
			width: 1.5em;
			height: 1.5em;
			border-width: 1px;
			position: relative;
			border-style: solid;
			transition: border-color var(--g-trn-sp) var(--g-trn-tf) 0s;
			
			&::before {
				content: '';
				top: 4px;
				left: 4px;
				right: 4px;
				bottom: 4px;
				opacity: 0;
				position: absolute;
				transform: scale(.7);
				border-radius: inherit;
				transition: background-color var(--g-trn-sp) var(--g-trn-tf) 0s, transform var(--g-trn-sp) var(--g-trn-tf) 0s, opacity var(--g-trn-sp) var(--g-trn-tf) 0s;
			}
		}
	}
}

/* Ui-Condidional */
html:not(.cms-content) .ui-conditional-panel:not(.active) {
	display: none;
	visibility: hidden;
}


/* Form Colors */
@scope (form) to (.inp-mrk) {
	
	.input-text {
		--text-color: var(--text);
		--background: var(--white);

		:is(input, select, textarea) {
			color: var(--text-color);
			border-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o));
			background: var(--background);
		}
		
		label.abs {
			color: var(--text-color);
		}
		
	}

	.focused .input-text :is(input, select, textarea) {
		border-color: var(--highlight-color) !important;
	}
	
	.invalid .input-text :is(input, select, textarea) {
		border-color: var(--invalid-color) !important;
	}
	
	.valid .input-text :is(input, select, textarea) {
		border-color: var(--valid-color);
	}
	
}

.inp-mrk label.replace {
	border-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o));
}

.inp-mrk input:checked + label.replace {
	border-color: var(--link-color);
}

.inp-mrk label.replace.disabled,
.inp-mrk input:disabled + label.replace {
	background-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o));
}

.inp-mrk label.replace.disabled::before,
.inp-mrk input:disabled + label.replace::before {
	background-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o));
}

.inp-mrk label.replace::before {
	background-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o));
}

.inp-mrk input:checked + label.replace::before {
	background-color: var(--link-color);
}

.inp-mrk label.replace + label,
.inp-mrk label.toggle + label {
	color: var(--text-color);
}

.inp-mrk label.replace.disabled + label,
.inp-mrk input:disabled + label.replace + label {
	color: hsl(from var(--text-color) h s l / var(--bdr-clr-o));
}

/* content-v2.css */
.cnt.v2 {
    aside > * + * {
        margin-top: var(--sp-vm-clc);
    }
}

/* side-nav.css */
.sdnv {
    --sdnv-lnk-pd: 1.125rem;
    --sdnv-lnk-rds: 0.625rem;
    --sdnv-hvr-bg: rgba(255, 255, 255, 0.12);
    --sdnv-hvr-bdr: rgba(237, 237, 237, 0.08);
    --sdnv-cpn-gap: 8rem;


    .sdnv-link {
        padding: var(--sdnv-lnk-pd);
        border: 1.5px solid transparent;
        border-radius: var(--sdnv-lnk-rds);
        color: hsl(from var(--text-color) h s l / 0.8);
        text-decoration: none;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s;

        .sdnv-arr {
            color: var(--accent);
            width: 1em;
            height: 1em;
            opacity: 0;
            transition: opacity 0.2s;
        }

        &.active,
        &:hover,
        &:focus-visible {
            background-color: var(--sdnv-hvr-bg);
            border-color: var(--sdnv-hvr-bdr);
            color: var(--text-color);

            .sdnv-arr {
                opacity: 1;
            }
        }
    }

    .sdnv-cpn {
        margin-top: var(--sdnv-cpn-gap);
    }
}

/* photos-v1.css */
/* Photos V1 — Single photo scroller with peek */

.pht.v1 {
	--pht-v1-img-w: 36.111rem; /* 480px — side (non-active) image size per Figma */
	--pht-v1-active-scl: 0.7; /* 650 / 480 — active pops up to center size */

	.pht-v1-list {
		/* Track stays within .mn_wd gutters — previous/next peek is constrained
		   to the same horizontal space that bounds the rest of the module. */
		--grd-sp-dyn: 0.1rem;

		align-items: center;
		padding-block: 2rem;
		padding-inline: max(calc(50% - (var(--pht-v1-img-w) / 2)), 1rem);
		scroll-padding-inline: max(calc(50% - (var(--pht-v1-img-w) / 2)), 1rem);


		> li {
			scroll-snap-align: center;
			opacity: 0.5;
			position: relative;
			transform: scale(var(--pht-v1-active-scl));
			transition: opacity 0.4s ease, transform 0.4s ease;

			&.s-active {
				--itm-val: 119;
				opacity: 1;
				transform: none;
				z-index: 1;
			}
		}
	}

	@container (max-width: 767px) {
		.pht-v1-list {
			gap: 0.75rem;
			padding-inline: max(calc(50% - 10rem), 1rem);
			scroll-padding-inline: max(calc(50% - 10rem), 1rem);

			> li {
				width: min(20rem, 70vw);
			}
		}
	}
}

/* contact-v5.css */
/* Contact V5 — Form (right) + Values stack (left) */
.ctc.v5 {
    --fnt-t-6-s: 1.11rem;
    --flx-gap: 2.78rem;

    /* Section gradient — cream → mint (Figma) */
    background: linear-gradient(to bottom, var(--background), var(--inner-theme) 82.258%);

    /* Frosted card chrome (mirror V4) */
    .frst-bg {
        --frst-blur: 4px;
        background-color: hsl(from var(--frst-bg-clr) h s l / .9);
        border: none;

        @media screen and (min-width: 1280px) {
            box-shadow: 0 14px 24px 0 rgba(0, 0, 0, 0.20);
            padding: 3.89rem;
        }
    }

    .frm {
        padding: 1.78rem;
    }

    .ctc-v5-vls li {
        svg {
            font-size: 1.22rem;
            color: var(--buttons);
        }
    }

    /* Bottom emergency CTA card */
    .ctc-v5-cta {
        --bdr-rds-crd: 1.11rem;

        .fnt_t-k.cstm {
            --fnt-t-k-s: 1.11rem;
            --fnt-t-k-ls: 0.12em;
        }

         @media screen and (min-width:1280px) {
           & > .pd_h.pd_v {
                padding: 1.78rem 11rem 1.78rem 1.78rem;
            }
        }

        .iso {
            position: absolute;
            bottom: 0;
            right: 0;
            max-width: 42%;
        }
    }

    .ctc-v5-cta-dsc {
        font-weight: 500;
        line-height: 1.6;
        margin: 0;
    }

    &[data-colors$="-light"] {
        .ulk-bg {
            --inner-theme: var(--dk-bg);
        }
    }
}