.wpam-container {
	line-height: 0;
	/* Centers whatever ad markup lands inside (image, HTML/network code,
	   AdSense unit) whenever that markup is narrower than the container —
	   e.g. a fixed-size 300x250 banner inside a wider content column.
	   Relying on the ad's own inner element to "block-ify" and center
	   itself (the old approach) depends on undefined/implementation-
	   specific block-in-inline behavior and can silently break under a
	   theme's own link/image CSS resets. text-align here, paired with
	   inline-block on the ad elements below, is the reliable version. */
	text-align: center;
}

/* Covers the clickable image ad (<a class="wpam-ad-image">) and the
   no-link/display-only variant (<span class="wpam-ad-image wpam-ad-nolink">) —
   the renderer applies wpam-ad-image to both. inline-block lets the
   container's text-align: center actually center the element itself,
   rather than relying on the anchor being auto-promoted to a block box
   by the browser only because it happens to contain one. */
.wpam-ad-image {
	display: inline-block;
	max-width: 100%;
}
.wpam-ad-image img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Raw third-party ad-network HTML (the "html" ad type) had no centering
   rule at all previously — it would sit flush left inside the container
   whenever its rendered width was narrower than the column. text-align
   is reset to left inside it so the network's own markup isn't forced
   into centered text as a side effect of the container's text-align. */
.wpam-ad-html {
	display: inline-block;
	max-width: 100%;
	text-align: left;
}

.wpam-ad-adsense {
	max-width: 100%;
	overflow: hidden;
	margin: 0 auto;
}
.wpam-ad-adsense ins.adsbygoogle {
	max-width: 100%;
}

.wpam-sticky {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 99999;
	background: #fff;
	box-shadow: 0 0 12px rgba(0,0,0,.15);
	text-align: center;
	padding: 6px;
}
/* env(safe-area-inset-*) is 0 on an ordinary browser tab, so this is a
   no-op there — it only does anything in a standalone/fullscreen PWA
   (iOS "Add to Home Screen", Android TWA) on a device with a notch/home
   indicator, where a plain bottom:0/top:0 sticky bar sits flush against
   — or partly under — that system UI instead of just above it. */
.wpam-sticky-bottom { bottom: env(safe-area-inset-bottom, 0px); }
.wpam-sticky-top { top: env(safe-area-inset-top, 0px); }

/* The dismiss (x) button sits absolutely positioned in the top-right
   corner, outside normal flow — it needs the bar to reserve a gutter for
   it. Reserving that gutter on the right only (padding-right: 40px with
   nothing to match on the left) shifts text-align: center's centered
   content about 17px left of true center, since centering happens
   within the padded content box, not the bar's actual width. Matching
   gutters on both sides keeps the ad itself visually centered; this
   class is only added (in class-wpam-renderer.php) when a close button
   is actually shown, so placements without one keep the tighter 6px
   padding above. */
.wpam-sticky-has-close {
	padding: 6px 40px;
}

.wpam-sticky-nobg {
	background: transparent !important;
	box-shadow: none;
}

.wpam-ad-wrap {
	position: relative;
	display: inline-block;
}
.wpam-ad-label {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #9ca3af;
	text-align: center;
	margin-bottom: 4px;
}

.wpam-dismiss {
	position: absolute;
	/* max() keeps the usual 4px/8px on an ordinary tab, but grows to
	   clear a device's notch/status-bar inset in a standalone PWA. */
	top: max(4px, env(safe-area-inset-top, 0px));
	right: max(8px, env(safe-area-inset-right, 0px));
	background: transparent;
	border: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: #555;
}

/* ---------------- Product ad ---------------- */

.wpam-ad-product {
	--wpam-accent: #111827;
	position: relative;
	display: inline-flex;
	flex-direction: column;
	text-align: left;
	line-height: 1.4;
	width: 300px;
	max-width: 100%;
	background: var(--wpam-card-bg, #fff);
	border: 1px solid var(--wpam-card-border, #e5e7eb);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
	color: var(--wpam-card-text, #111827) !important;
	text-decoration: none !important;
	transition: box-shadow .15s ease, transform .15s ease;
}
a.wpam-ad-product:hover {
	box-shadow: 0 6px 18px rgba(0,0,0,.12);
	transform: translateY(-1px);
}
.wpam-ad-product-horizontal {
	flex-direction: row;
	align-items: stretch;
	width: 480px;
}
.wpam-product-media {
	display: block;
	background: #f3f4f6;
}
.wpam-product-media img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}
.wpam-ad-product-horizontal .wpam-product-media {
	flex: 0 0 38%;
}
.wpam-ad-product-horizontal .wpam-product-media img {
	height: 100%;
	min-height: 150px;
}
.wpam-product-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 16px;
	flex: 1;
	min-width: 0;
	/* Name, description, price and button all sit on the card's center line. */
	align-items: center;
	text-align: center;
}
.wpam-product-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--wpam-card-text, #111827);
}
.wpam-product-desc {
	font-size: 13px;
	color: var(--wpam-card-muted, #6b7280);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wpam-product-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
}
.wpam-product-price-now {
	font-size: 20px;
	font-weight: 800;
	color: var(--wpam-card-text, #111827);
}
.wpam-product-price-was {
	font-size: 13px;
	color: #9ca3af;
}
.wpam-product-btn {
	margin-top: 6px;
	align-self: center;
	background: var(--wpam-accent);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 8px;
}
.wpam-product-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	background: var(--wpam-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* ---------------- Event ad ---------------- */

.wpam-ad-event {
	--wpam-accent: #7c3aed;
	position: relative;
	display: inline-flex;
	flex-direction: column;
	text-align: center;
	line-height: 1.4;
	width: 300px;
	max-width: 100%;
	background: var(--wpam-card-bg, #fff);
	border: 1px solid var(--wpam-card-border, #e5e7eb);
	border-top: 4px solid var(--wpam-accent);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
	color: var(--wpam-card-text, #111827) !important;
	text-decoration: none !important;
	transition: box-shadow .15s ease, transform .15s ease;
}
a.wpam-ad-event:hover {
	box-shadow: 0 6px 18px rgba(0,0,0,.12);
	transform: translateY(-1px);
}
.wpam-ad-event-horizontal {
	flex-direction: row;
	align-items: stretch;
	width: 480px;
}
.wpam-event-media {
	display: block;
	background: #f3f4f6;
}
.wpam-event-media img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}
.wpam-ad-event-horizontal .wpam-event-media {
	flex: 0 0 36%;
}
.wpam-ad-event-horizontal .wpam-event-media img {
	height: 100%;
	min-height: 150px;
}
.wpam-event-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 14px 16px 16px;
	flex: 1;
	min-width: 0;
}
.wpam-event-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 54px;
	border: 1px solid var(--wpam-card-border, #e5e7eb);
	border-radius: 8px;
	overflow: hidden;
	background: var(--wpam-card-bg, #fff);
}
.wpam-event-month {
	width: 100%;
	background: var(--wpam-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 2px 8px;
}
.wpam-event-day {
	font-size: 22px;
	font-weight: 800;
	color: var(--wpam-card-text, #111827);
	padding: 2px 8px 4px;
}
.wpam-event-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--wpam-card-text, #111827);
}
.wpam-event-when {
	font-size: 13px;
	font-weight: 600;
	color: var(--wpam-accent);
}
.wpam-event-where {
	font-size: 13px;
	color: var(--wpam-card-muted, #6b7280);
}
.wpam-event-desc {
	font-size: 13px;
	color: var(--wpam-card-muted, #6b7280);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wpam-event-price {
	font-size: 15px;
	font-weight: 800;
	color: var(--wpam-card-text, #111827);
}
.wpam-event-btn {
	margin-top: 6px;
	align-self: center;
	background: var(--wpam-accent);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 8px;
}
.wpam-event-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	background: var(--wpam-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* ---------------- Visit Card ---------------- */

.wpam-card {
	--wpam-brand: #2563eb;
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1px solid #e5e7eb;
	border-left: 4px solid var(--wpam-brand);
	border-radius: 12px;
	padding: 16px 18px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
	max-width: 640px;
	margin: 1.5em auto;
	font-family: inherit;
	line-height: 1.4;
}

.wpam-card-vertical {
	flex-direction: column;
	text-align: center;
	/* A left-edge accent stripe reads fine on a horizontal (row) card, but
	   on a vertical (column) card it just runs down one side of a
	   centered stack and looks like a stray line. A bottom stripe reads
	   as an underline for the whole card instead. */
	border-left: none;
	border-bottom: 4px solid var(--wpam-brand);
}

.wpam-card-compact {
	padding: 10px 14px;
	gap: 10px;
}

.wpam-card-media img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.wpam-card-icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	background: color-mix(in srgb, var(--wpam-brand) 12%, white);
	border-radius: 10px;
}

.wpam-card-body {
	flex: 1;
	min-width: 0;
}

.wpam-card-kicker {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--wpam-brand);
	margin-bottom: 2px;
}

.wpam-card-title {
	margin: 0 0 2px;
	font-size: 17px;
	font-weight: 700;
	color: #111827;
}

.wpam-card-desc {
	margin: 0;
	font-size: 13.5px;
	color: #6b7280;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.wpam-card-btn {
	display: inline-block;
	white-space: nowrap;
	background: var(--wpam-brand);
	color: #fff !important;
	font-weight: 600;
	font-size: 13.5px;
	padding: 9px 18px;
	border-radius: 8px;
	text-decoration: none !important;
	transition: filter .15s ease, transform .15s ease;
}
.wpam-card-btn:hover {
	filter: brightness(0.92);
	transform: translateY(-1px);
}

.wpam-card-badge {
	position: absolute;
	top: -10px;
	right: 16px;
	background: var(--wpam-brand);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* ---- Minimal: borderless, understated ---- */
.wpam-card-minimal {
	border: none;
	border-left: none;
	box-shadow: none;
	background: transparent;
	padding: 10px 0;
}
.wpam-card-minimal .wpam-card-media img,
.wpam-card-minimal .wpam-card-icon {
	width: 36px;
	height: 36px;
	font-size: 18px;
}
.wpam-card-minimal .wpam-card-btn {
	background: transparent;
	color: var(--wpam-brand) !important;
	text-decoration: underline !important;
	padding: 0;
	font-weight: 700;
}

/* ---- Bordered: outline card, outline button ---- */
.wpam-card-bordered {
	border: 2px solid var(--wpam-brand);
	border-left: 2px solid var(--wpam-brand);
	box-shadow: none;
	background: #fff;
}
.wpam-card-bordered .wpam-card-btn {
	background: transparent;
	color: var(--wpam-brand) !important;
	border: 2px solid var(--wpam-brand);
}
.wpam-card-bordered .wpam-card-btn:hover {
	background: var(--wpam-brand);
	color: #fff !important;
}

/* ---- Gradient Header: colored gradient strip behind media ---- */
.wpam-card-gradient {
	border-left: none;
	overflow: hidden;
	padding: 0;
	flex-direction: column;
	align-items: stretch;
}
.wpam-card-gradient .wpam-card-media {
	background: linear-gradient(135deg, var(--wpam-brand), color-mix(in srgb, var(--wpam-brand) 40%, #111827));
	padding: 20px;
	width: auto;
	display: flex;
	justify-content: center;
}
.wpam-card-gradient .wpam-card-media img,
.wpam-card-gradient .wpam-card-icon {
	width: 48px;
	height: 48px;
	background: rgba(255,255,255,.9);
}
.wpam-card-gradient .wpam-card-body,
.wpam-card-gradient .wpam-card-cta {
	padding: 14px 18px;
}

/* ---- Media Right: mirrored horizontal ---- */
.wpam-card-media-right {
	flex-direction: row-reverse;
}

/* ---- Stacked: centered icon, full-width bottom button ---- */
.wpam-card-stacked {
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	gap: 10px;
}
.wpam-card-stacked .wpam-card-media {
	align-self: center;
}
.wpam-card-stacked .wpam-card-cta {
	width: 100%;
}
.wpam-card-stacked .wpam-card-btn {
	display: block;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

/* ---- Overlay: full cover image, text over a darkened gradient ---- */
.wpam-card-overlay {
	position: relative;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	min-height: 220px;
	background-size: cover;
	background-position: center;
	border: none;
	color: #fff;
	padding: 20px;
}
.wpam-card-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.05));
	border-radius: inherit;
}
.wpam-card-overlay .wpam-card-media { display: none; }
.wpam-card-overlay .wpam-card-body,
.wpam-card-overlay .wpam-card-cta {
	position: relative;
	z-index: 1;
}
.wpam-card-overlay .wpam-card-title,
.wpam-card-overlay .wpam-card-kicker {
	color: #fff;
}
.wpam-card-overlay .wpam-card-desc {
	color: rgba(255,255,255,.85);
	-webkit-line-clamp: 3;
}