/**
 * Glansco Map & Directions styles.
 *
 * The "map" is a decorative grid-pattern placeholder (no Maps API key is
 * configured), not a live embed — this keeps the page free of third-party
 * scripts and network requests.
 */

.glansco-map-directions {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
}

.glansco-map-directions__placeholder {
	height: 180px;
	background-image:
		linear-gradient( 0deg, transparent 24%, rgba( 0, 0, 0, 0.04 ) 25%, rgba( 0, 0, 0, 0.04 ) 26%, transparent 27%, transparent 74%, rgba( 0, 0, 0, 0.04 ) 75%, rgba( 0, 0, 0, 0.04 ) 76%, transparent 77%, transparent ),
		linear-gradient( 90deg, transparent 24%, rgba( 0, 0, 0, 0.04 ) 25%, rgba( 0, 0, 0, 0.04 ) 26%, transparent 27%, transparent 74%, rgba( 0, 0, 0, 0.04 ) 75%, rgba( 0, 0, 0, 0.04 ) 76%, transparent 77%, transparent );
	background-size: 40px 40px;
	background-color: color-mix( in srgb, var( --glansco-color-primary, #0a5f4a ) 8%, #eef5f3 );
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --glansco-color-primary, #0a5f4a );
}

.glansco-map-directions__footer {
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	background: #fff;
}

.glansco-map-directions__address {
	font-style: normal;
	font-size: 0.875rem;
	color: #334;
}

.glansco-map-directions__link {
	color: var( --glansco-color-primary, #0a5f4a );
	font-weight: 600;
	text-decoration: none;
	font-size: 0.875rem;
	white-space: nowrap;
}

.glansco-map-directions__link:hover {
	text-decoration: underline;
}