/**
 * TitanCart SMS Notifications — checkout opt-in styles.
 *
 * Consumes the storefront's mode-aware --tct-* design tokens with literal
 * fallbacks (Pattern #105), so it inherits the active theme/mode without
 * hardcoding brand colors. Scoped under #tcsms-optin-wrap to avoid bleed.
 */

#tcsms-optin-wrap.tcsms-optin {
	margin: 16px 0;
	padding: 14px 16px;
	border: 1px solid var( --tct-border, #e5e5e5 );
	border-radius: var( --tct-radius, 10px );
	background: var( --tct-surface-2, #f7f7f8 );
}

#tcsms-optin-wrap .tcsms-optin__label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.5;
	color: var( --tct-text, #0a0a0a );
}

#tcsms-optin-wrap .tcsms-optin__checkbox {
	margin-top: 2px;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	accent-color: var( --tct-accent, #2563eb );
	cursor: pointer;
}

#tcsms-optin-wrap .tcsms-optin__text {
	flex: 1 1 auto;
}

#tcsms-optin-wrap .tcsms-optin__phone-row {
	margin-top: 10px;
	padding-left: 26px;
}

#tcsms-optin-wrap .tcsms-optin__phone {
	width: 100%;
	max-width: 320px;
	padding: 9px 12px;
	font-size: 14px;
	border: 1px solid var( --tct-border, #e5e5e5 );
	border-radius: var( --tct-radius-sm, 8px );
	background: var( --tct-surface, #ffffff );
	color: var( --tct-text, #0a0a0a );
}

#tcsms-optin-wrap .tcsms-optin__phone:focus {
	outline: none;
	border-color: var( --tct-accent, #2563eb );
	box-shadow: 0 0 0 3px var( --tct-accent-ring, rgba( 37, 99, 235, 0.15 ) );
}

@media ( prefers-reduced-motion: reduce ) {
	#tcsms-optin-wrap * {
		transition: none !important;
	}
}

/* ── Dark mode (S246) ──────────────────────────────────────────────────────
 * The opt-in box reads --tct-surface-2 / --tct-surface for its backgrounds,
 * but the core theme never defines those tokens (only --tct-bg/-text/-border),
 * and the marketplace skin keys its dark tokens on --tcm-* and never flips
 * --tct-* at all — so the box rendered white-on-dark on the checkout page in
 * both skins. Override the surface/text/border directly, keyed on both the
 * core theme's [data-theme="dark"] and the marketplace skin's
 * [data-tcm-theme="dark"]. Higher specificity than the base id+class rules,
 * so no !important needed. */
[data-theme="dark"] #tcsms-optin-wrap.tcsms-optin,
[data-tcm-theme="dark"] #tcsms-optin-wrap.tcsms-optin {
	background: #161A23;
	border-color: #262626;
}
[data-theme="dark"] #tcsms-optin-wrap .tcsms-optin__label,
[data-tcm-theme="dark"] #tcsms-optin-wrap .tcsms-optin__label {
	color: #FAFAFA;
}
[data-theme="dark"] #tcsms-optin-wrap .tcsms-optin__phone,
[data-tcm-theme="dark"] #tcsms-optin-wrap .tcsms-optin__phone {
	background: #1A1A1A;
	border-color: #404040;
	color: #FAFAFA;
}