/* ============================================================================
 * Global shared styles (cross-locale, not tied to any one component's
 * markup file). This file is the starting point for a future global_src-
 * style shared stylesheet - for now it just holds footer-legal.asp's CSS.
 * ==========================================================================*/

/* .div-title (comparison tables/campaign/bundles/popups) forces
   `text-transform: uppercase !important` sitewide (css/products/styles.css)
   - rendering the "TrendLife" brand label above product/bundle names as
   "TRENDLIFE" instead of its actual mixed case. .widget-tm (hero heading
   brand label) doesn't set its own text-transform, but inherits
   `uppercase` from its parent .widget-m (the <h1>), same visible bug.
   ja_jp already had this fixed locally in styles-jp.css; en-us/en-au/
   zh_tw did not (en_au has no locale-specific stylesheet at all, and
   duplicating this into styles-na-us.css + styles-tw.css + a new
   styles-au.css would be three copies of the same fix) - since this file
   already loads on every products/renewal/resources page across all 4
   locales, fixing it once here covers en-us/en-au/zh_tw (redundant but
   harmless for ja_jp, which already has its own equivalent override). */
.div-title {
	text-transform: none !important;
}
.widget-tm {
	text-transform: none;
}

/* Shared legal footer bar (global/products/includes/footer-legal.asp) -
   copyright + Privacy/Terms links, sits below nav-footer.asp on every
   products/renewal/resources page across en_us, en_au, zh_tw, ja_jp. */
.legal-footer-bar {
	display: flex;
	justify-content: center;
	padding: 32px 24px;
	background: #FBF5ED;
	border-top: 4px solid;
	border-image: linear-gradient(90deg, #FF3C42 50%, #9B8FFF 100%) 1;
}
.legal-footer-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
	width: 100%;
	max-width: 1280px;
}
.legal-footer-copy {
	font-size: 14px;
	line-height: 1.4;
	color: #2A1D15;
}
.legal-footer-copy-desktop { display: none; }
.legal-footer-links {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.legal-footer-links a {
	font-size: 14px;
	line-height: 1.4;
	color: #2A1D15;
	text-decoration: underline;
	transition: opacity .2s;
}
.legal-footer-links a:hover { opacity: .7; }
@media (min-width: 992px) {
	.legal-footer-bar { padding: 48px; border-top-width: 6px; }
	.legal-footer-inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 64px;
	}
	.legal-footer-copy-desktop { display: block; }
	.legal-footer-copy-mobile { display: none; }
	.legal-footer-links { flex-direction: row; gap: 32px; }
}

/* strip-region-locator.asp - "you appear to be in a different region" banner */
.marquee-loc {
	box-shadow: 0 0 10px rgba(0, 0, 0, .50) !important;
	background-color: #ffffff;
	color: #333;
	height: 50px;
	width: 100%;
	overflow: hidden;
	position: relative;
}
.marquee-loc div {
	padding: 5px 0;
	display: block;
	width: 200%;
	height: 80px;
	position: absolute;
	overflow: hidden;
}
.marquee-loc span {
	float: left;
	width: 50%;
	padding: 0px 10px;
	letter-spacing: 1px;
	font-family: "Interstate Light";
	font-size: 12px;
	font-weight: 600;
}
.marquee-loc td {
	font-size: 12px;
	text-transform: none;
	text-align: center;
	font-family: interstate light;
	border: 0px;
	color: #333;
	margin-left: 30px;
}
@keyframes marquee-loc {
	0% { left: 0; }
	100% { left: -100%; }
}
@media (max-width: 480px) and (min-width: 320px) {
	.marquee-loc { height: 65px; }
	.marquee-loc-2 { height: 50px; }
	.marquee-loc td { text-align: center !important; font-size: 9px !important; }
}
@media (max-width: 320px) and (min-width: 280px) {
	.marquee-loc { height: 65px; }
	.marquee-loc-2 { height: 50px; }
	.marquee-loc td { text-align: center !important; font-size: 9px !important; }
}
#closeRegionLocate {
	float: right;
	display: inline-block;
	cursor: pointer;
	margin: -6px 0 0 2px;
	width: 19px;
	height: 20px;
	text-align: center;
	font-size: 11px;
	line-height: 0.20;
	font-weight: 700;
	text-decoration: none !important;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
	z-index: 1050;
	padding: 6px 5px;
	border-radius: 50%;
	border: 2px solid #333;
	-webkit-box-sizing: border-box;
}
@media (max-width: 480px) and (min-width: 320px) {
	#closeRegionLocate { margin: -10px 0 0 0; width: 14px; height: 15px; padding: 3px 2.5px; }
}
@media (max-width: 320px) and (min-width: 280px) {
	#closeRegionLocate { margin: -15px 0 0 0; width: 14px; height: 15px; padding: 3px 2px; }
}
/* Hidden by default; shown only when visitor is on the wrong locale */
#regionLocate { display: none; }