/* --- SCOPED BRAND IDENTIFIERS & CUSTOM OVERRIDES --- */
:root {
	--su-overlay: rgba(0, 0, 0, 0.9);
	--su-gm-link: #8ccafd;
	--su-gm-link-hover: #4b99dd;
	--su-bg-dark: #111111;
	--su-brand-dark: #1a2533;
	--su-brand-red: #cc2929;
	--su-brand-red-hover: #e63939;
	--su-blue-bg: #162d4afc;
	--su-radius-toast: 16px;
	--su-radius-input: 8px;
	--su-shadow-toast: 0 15px 50px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(255, 255, 255, 0.1);
	--su-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- COMPACT UNIQUE ARCHITECTURE --- */
.su-container {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px; /* Explicit font baseline for internal em scaling */
	position: fixed;
	bottom: 32px;
	left: 50%;
	transform: translate(-50%, 120%); /* Start hidden off-screen */
	opacity: 0;
	z-index: 99999;
	width: calc(100% - 40px);
	max-width: 960px; 
	box-sizing: border-box;
}

/* Triggered on Page Load / Visual Injection */
.su-container.su-active {
	-webkit-animation: suToastUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;
	animation: suToastUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;
}

/* Triggered via JS on Close Click */
.su-container.su-exit {
	-webkit-animation: suToastDown 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
	animation: suToastDown 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

.su-inner {
	position: relative;
	background-color: #162d4a;
	background-color: var(--su-blue-bg);
	padding: 24px 32px;
	border-radius: 16px;
	border-radius: var(--su-radius-toast);
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
	box-shadow: var(--su-shadow-toast);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-sizing: border-box;
}

/* Close Wrapper & Button */
.su-close-wrap {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
}

.su-close {
	background: rgba(255, 255, 255, 0.08);
	border: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.7);
	transition: all 0.4s ease;
	padding: 0;
}

.su-close:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.su-close:focus {
	/* Overriding standard properties */
	padding: 0;
	border: none;
	border-radius: 50%;
	box-shadow: none;
	transition: all 0.4s ease;
	background-color: rgba(255, 255, 255, 0.2);

	/* Overriding global !important properties */
	font-weight: 400 !important;
	color: #fff !important;
	text-decoration: none !important;
}

.su-close svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* Message Header */
.su-msg {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #fff;
	font-size: 1.25em;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 18px 0;
	padding-right: 32px;
	text-align: center;
}

/* Form Grid System */
.su-form {
	display: grid;
	grid-gap: 16px; 
	gap: 16px; 
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	align-items: flex-end;
	width: 100%;
}

.su-field-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.su-field-group label {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: rgba(255, 255, 255, 0.85); 
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Input Controls */
.su-form input[type="text"],
.su-form input[type="email"],
.su-form select {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	background-color: #fff; 
	border: 2px solid #fff;
	border-radius: 8px;
	border-radius: var(--su-radius-input);
	font-size: 0.95em;
	color: #111111; 
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
	outline: none;
}

.su-form input::placeholder {
	color: #5A6A85; 
}

/* Focus Interactive States */
.su-form input:focus,
.su-form select:focus {
	border-color: #8ccafd;
	border-color: var(--su-gm-link);
}

/* Dropdown Fixes */
.su-form select {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none; 
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231a2533' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 36px;
}

.su-form select option {
	background-color: #fff;
	color: #111111;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Action Button */
.su-submit-btn {
	height: 44px;
	padding: 0 32px;
	border-radius: 8px;
	border-radius: var(--su-radius-input);
	
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.85em;
	font-weight: 800; 
	text-transform: uppercase;
	letter-spacing: 0.06em;
	
	color: #fff;                
	background-color: #cc2929; 
	background-color: var(--su-brand-red); 
	border: 2px solid #cc2929;
	border-color: var(--su-brand-red);
	cursor: pointer;
	
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	-webkit-transition: var(--su-transition);
	transition: var(--su-transition);
	white-space: nowrap;
	width: 100%; 
}

.su-submit-btn:hover {
	background-color: #e63939;
	background-color: var(--su-brand-red-hover); 
	border-color: var(--su-brand-red-hover);
}

.su-submit-btn:focus {
	/* Overriding standard global properties */
	height: 44px;
	padding: 0 32px !important;
	border: 2px solid var(--su-brand-red);
	border-radius: var(--su-radius-input);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	background-color: var(--su-brand-red);

	/* Overriding global !important properties */
	font-weight: 800 !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* --- DESKTOP ANIMATION ENGINE --- */
@-webkit-keyframes suToastUp { 
	0% { -webkit-transform: translate(-50%, 120%); opacity: 0; }
	100% { -webkit-transform: translate(-50%, 0); opacity: 1; }
}
@keyframes suToastUp {
	0% { transform: translate(-50%, 120%); opacity: 0; }
	100% { transform: translate(-50%, 0); opacity: 1; }
}

@-webkit-keyframes suToastDown { 
	0% { -webkit-transform: translate(-50%, 0); opacity: 1; }
	100% { -webkit-transform: translate(-50%, 140%); opacity: 0; }
}
@keyframes suToastDown {
	0% { transform: translate(-50%, 0); opacity: 1; }
	100% { transform: translate(-50%, 140%); opacity: 0; }
}

/* --- BREAKPOINTS & MOBILE ANIMATION ENGINE --- */
@media (max-width: 540px) {
	.su-form {
		grid-template-columns: 1fr; 
		grid-gap: 14px;
		gap: 14px;
	}
	.su-submit-btn {
		margin-top: 4px;
	}
}

@media (max-width: 480px) {
	.su-container {
		bottom: 0;
		left: 0;
		transform: translateY(100%); 
		width: 100%;
	}
	.su-container.su-active {
		-webkit-animation: suToastUpMobile 0.5s ease forwards;
		animation: suToastUpMobile 0.5s ease forwards;
	}
	.su-container.su-exit {
		-webkit-animation: suToastDownMobile 0.5s ease forwards;
		animation: suToastDownMobile 0.5s ease forwards;
	}
	.su-inner {
		border-radius: 16px 16px 0 0; 
		padding: 24px 20px;
		border-bottom: none;
	}
}

@-webkit-keyframes suToastUpMobile {
	0% { -webkit-transform: translateY(100%); opacity: 0; }
	100% { -webkit-transform: translateY(0); opacity: 1; }
}
@keyframes suToastUpMobile {
	0% { transform: translateY(100%); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

@-webkit-keyframes suToastDownMobile {
	0% { -webkit-transform: translateY(0); opacity: 1; }
	100% { -webkit-transform: translateY(100%); opacity: 0; }
}
@keyframes suToastDownMobile {
	0% { transform: translateY(0); opacity: 1; }
	100% { transform: translateY(100%); opacity: 0; }
}