/**
 * Newsletter subscribe modal. Global (every page). Values verified
 * against the exact literal CSS in Design Refrance's TSI About.html
 * (grepped directly) after a user spot-check caught the first version
 * was approximated rather than exact (wrong overlay tint, card width,
 * border-radius, and several literal font-sizes/colors that don't map
 * cleanly onto the token scale — kept as literals here to match source
 * exactly, per explicit pixel-fidelity request).
 */

.ui-sub-ov {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	background: rgba(22, 33, 27, 0.6);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ui-sub-ov.open {
	display: flex;
	opacity: 1;
}

.ui-sub-card {
	width: 480px;
	max-width: 100%;
	background: var(--color-white);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	position: relative;
	font-family: var(--font-primary);
}

.ui-sub-card .head {
	background: var(--color-white);
	padding: 34px 40px 6px;
	position: relative;
}

.ui-sub-card .head .kk {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #8a938b;
}

.ui-sub-card .head .tt {
	font-family: var(--font-secondary);
	font-weight: 800;
	font-size: 28px;
	color: var(--color-ink);
	margin-top: 8px;
	line-height: 1.1;
}

.ui-sub-card .head .ds {
	font-size: 12.5px;
	color: #8a938b;
	margin-top: 8px;
	line-height: 1.5;
}

.ui-sub-card .x {
	position: absolute;
	top: 16px;
	right: 18px;
	font-size: 20px;
	color: #8a938b;
	background: none;
	border: 0;
	cursor: pointer;
}

.ui-sub-card .x:hover,
.ui-sub-card .x:focus-visible {
	color: var(--color-ink);
}

.ui-sub-card .body {
	padding: 22px 40px 34px;
}

.ui-sub-card .fld {
	margin-bottom: 16px;
}

.ui-sub-card .fld label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #4c574f;
	margin-bottom: 6px;
}

.ui-sub-card .fld input,
.ui-sub-card .fld select {
	width: 100%;
	font-family: var(--font-primary);
	font-size: 14px;
	color: var(--color-ink);
	background: #f6f8f5;
	border: 1.5px solid #e4e6e1;
	border-radius: 6px;
	padding: 11px 14px;
	outline: none;
}

.ui-sub-card .fld input:focus,
.ui-sub-card .fld select:focus {
	border-color: var(--color-primary);
	background: var(--color-white);
}

.ui-sub-card .fld input.is-invalid,
.ui-sub-card .fld select.is-invalid {
	border-color: var(--color-error);
}

.ui-sub-card .fld input.is-invalid:focus,
.ui-sub-card .fld select.is-invalid:focus {
	box-shadow: 0 0 0 3px rgba(198, 40, 40, .12);
}

/* Same pattern as the Contact form's .cf-error (contact-page.css) — an
   inline message directly under the invalid field, not a shared banner. */
.fld-error {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: var(--color-error);
	margin-top: 6px;
}

.ui-sub-card .go {
	width: 100%;
	background: var(--color-accent);
	color: var(--color-ink);
	border: 0;
	border-radius: 6px;
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 14px;
	cursor: pointer;
	margin-top: 6px;
}

.ui-sub-card .go:hover,
.ui-sub-card .go:focus-visible {
	background: #ffd43b;
}

.ui-sub-card .go:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Same "visibly busy" pulse as the Contact form's .ct-submit.is-loading
   (contact-page.css) — duplicated here (not shared) since this modal is
   global chrome loaded on every page, while contact-page.css only loads
   on the Contact page itself. */
.ui-sub-card .go.is-loading {
	animation: malasiya-submit-pulse 1.1s ease-in-out infinite;
}

@keyframes malasiya-submit-pulse {
	0%, 100% { opacity: .6; }
	50% { opacity: .85; }
}

@media (max-width: 768px) {
	.ui-sub-card .head {
		padding: 28px 24px 6px;
	}

	.ui-sub-card .body {
		padding: 20px 24px 28px;
	}
}