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

/* select had no chevron styling of its own — it was inheriting the exact
   same rules as text inputs, so the browser's own NATIVE arrow rendered
   instead, which ignores this field's padding and sits flush against the
   very edge of the box (varies by browser, but always looks cramped/
   touching the border). Hiding the native one and drawing a custom SVG
   chevron at a fixed, deliberate inset fixes that everywhere at once. */
.ui-sub-card .fld select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234C574F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	cursor: pointer;
}

.ui-sub-card .fld input:focus,
.ui-sub-card .fld select:focus {
	border-color: var(--color-primary);
	background-color: 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;
	}
}