/*
 * Deal-specific storefront styling — the "Redeem at" location card and the
 * Redemption Terms tab body. Layered on top of the general page skin in
 * product-redesign.css (declared as a dependency in
 * RVM_Order_Hooks::enqueue_storefront_deal_assets(), so this always loads
 * after it and can rely on its --rvm-accent / --rvm-border / --rvm-ink /
 * etc custom properties already being set) — this file only ever adds
 * what's specific to a deal, not the general page styling.
 */

.rvm-redemption-terms-body {
	color: var(--rvm-muted, #4a4f55);
	font-size: 14px;
	line-height: 1.6;
}

.rvm-redemption-terms-body p:last-child {
	margin-bottom: 0;
}

.rvm-redemption-location {
	margin: 20px 0 4px;
}

/* Tinted --rvm-surface-soft rather than plain white: this card sits
 * nested inside the white .summary.entry-summary card from
 * product-redesign.css, and matching that card's own white background
 * left the two indistinguishable except for a 1px border — easy to read
 * as "part of the same block" rather than its own distinct card. */
.rvm-location-card {
	border: 1px solid var(--rvm-border, #e5e7eb);
	border-radius: 12px;
	overflow: hidden;
	background: var(--rvm-surface-soft, #f8f9fa);
}

.rvm-location-card-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	font-size: 15px;
	color: var(--rvm-ink, #1a1d21);
	transition: background .15s ease;
}

.rvm-location-card-heading:hover {
	background: rgba(0, 0, 0, 0.03);
}

/* Hide the browser's own default <details> marker/triangle in both
 * WebKit/Blink (::-webkit-details-marker) and Firefox (list-style: none
 * on the <summary> itself) — replaced with the custom chevron below,
 * which flips on open, so the collapse affordance looks the same in
 * every browser rather than whatever each one defaults to. */
.rvm-location-card-heading::-webkit-details-marker {
	display: none;
}

.rvm-location-card-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--rvm-accent, #1E8E3E);
}

.rvm-location-card-icon svg {
	width: 100%;
	height: 100%;
}

.rvm-location-card-title {
	flex: 1;
}

.rvm-location-card-toggle {
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--rvm-muted, #9aa0a6);
	border-bottom: 2px solid var(--rvm-muted, #9aa0a6);
	transform: rotate(45deg);
	transition: transform .15s ease;
	flex-shrink: 0;
}

.rvm-location-card[open] .rvm-location-card-toggle {
	transform: rotate(-135deg);
	margin-top: 6px;
}

.rvm-location-card-body {
	padding: 0 16px 16px;
	border-top: 1px solid var(--rvm-border, #e5e7eb);
}

.rvm-location-card-address {
	margin: 14px 0;
	font-size: 14px;
	color: var(--rvm-ink, #1a1d21);
}

/* A flat height rather than an aspect-ratio percentage trick — a
 * percentage here is relative to the CARD's own width, and since the
 * card sits in a narrow single summary column (not a full-width page
 * section), a proportional height reads as unnecessarily tall. A fixed
 * height keeps the map compact and consistent regardless of how wide
 * that column ends up being on a given theme. */
.rvm-location-card-map {
	position: relative;
	width: 100%;
	height: 180px;
	border-radius: 8px;
	overflow: hidden;
	/* Plain white, not --rvm-surface-soft — the card around this element
	 * is itself tinted --rvm-surface-soft now (see .rvm-location-card
	 * above), so using the same tint here would make the map's own
	 * loading-state placeholder invisible against its own card. */
	background: var(--rvm-surface, #fff);
	border: 1px solid var(--rvm-border, #e5e7eb);
}

.rvm-location-card-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.rvm-location-card-directions {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-weight: 700;
	font-size: 13px;
	color: var(--rvm-accent, #1a56db);
	text-decoration: none;
}

.rvm-location-card-directions:hover {
	text-decoration: underline;
}

/* No Maps key configured, or nothing's been geocoded yet — the fallback
 * is a plain address line linking straight out to a Google Maps search
 * (see RVM_Order_Hooks::render_deal_location_on_product_page()),
 * deliberately left unstyled/minimal here rather than dressed up to look
 * like the card above, so it reads as "simpler", not "broken". */
.rvm-redeem-address-link {
	color: var(--rvm-accent, #1a56db);
	text-decoration: underline;
	font-size: 14px;
}