:root {
	--wcd-primary: #2563eb;
	--wcd-button: #16a34a;
	--wcd-radius: 12px;
	--wcd-columns: 3;
}

.wcd-grid {
	display: grid;
	grid-template-columns: repeat(var(--wcd-columns), 1fr);
	gap: 20px;
	margin: 20px 0;
}
@media (max-width: 900px) { .wcd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .wcd-grid { grid-template-columns: 1fr; } }

.wcd-card {
	position: relative;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: var(--wcd-radius);
	padding: 18px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
}
.wcd-card.wcd-expired { opacity: .6; }

/* No-op everywhere except Template 4, where it becomes a real flex column -
   lets every template share one markup structure instead of a template file
   per layout. display:contents removes the wrapper from the box model while
   keeping its children laid out as if they were direct children of .wcd-card. */
.wcd-card-body { display: contents; }

/* Caps how wide a single card can grow - mainly matters with 1-2 columns,
   where a grid column would otherwise stretch the card edge-to-edge of its
   container. "none" (the default) leaves the old fill-the-column behavior
   unchanged. Row-style templates (3 and 6) are exempt - they're meant to
   run the full row width, not be capped like a vertical card. */
.wcd-card:not(.template-3):not(.template-6) {
	max-width: var(--wcd-card-max-width, none);
	margin-left: auto;
	margin-right: auto;
}

.wcd-card-header { display: flex; align-items: center; gap: 10px; }
.wcd-header-text { min-width: 0; }
.wcd-logo {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
	border: 1px solid #e5e7eb;
	background: #fff;
	box-sizing: border-box;
}
.wcd-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; box-sizing: border-box; }
.wcd-logo-text { background: var(--wcd-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; border-color: transparent; }

.wcd-title { margin: 0; font-size: 16px; line-height: 1.3; }
.wcd-brand { font-size: 12px; color: #6b7280; }
.wcd-desc { margin: 0; font-size: 14px; color: #4b5563; }

/* Badge row: coupon type, verified/expiry status, discount, brand rating */
.wcd-badge-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wcd-type-pill {
	font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
	text-transform: uppercase; letter-spacing: .3px;
}
.wcd-type-code { background: #eef2ff; color: #4338ca; }
.wcd-type-deal { background: #ecfdf5; color: #047857; }
.wcd-status-pill {
	font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
	display: inline-flex; align-items: center; gap: 3px;
}
.wcd-status-verified { background: #ecfdf5; color: #15803d; }
.wcd-status-urgent { background: #fef2f2; color: #dc2626; }
.wcd-status-soon { background: #fffbeb; color: #b45309; }
.wcd-badge { background: var(--wcd-primary); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.wcd-expired-text { color: #dc2626; font-weight: 600; }

/* CTA button - solid pill, no split notch (see .wcd-corner-badge below for
   the discount-digit hint instead). */
.wcd-cta-wrap { position: relative; margin: 2px 0; }
.wcd-reveal-btn, .wcd-deal-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 20px;
	border-radius: 999px;
	border: none;
	background: var(--wcd-button);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	box-sizing: border-box;
	transition: opacity .15s ease;
}
.wcd-reveal-btn:hover, .wcd-deal-btn:hover { opacity: .92; }
.wcd-reveal-btn.revealed { cursor: default; }

/* The code stays hidden (not even as masked dots) until it's actually
   revealed - pre-click the button just reads its label cleanly, matching
   how coupon sites usually present this rather than cluttering it with a
   row of bullet characters. */
.wcd-reveal-btn .wcd-code-masked { display: none; }
.wcd-reveal-btn.revealed .wcd-code-masked { display: inline; letter-spacing: 1px; }
.wcd-expired-label { display: block; text-align: center; color: #9ca3af; font-weight: 600; }

/* [coupon_reveal] - a single reveal/deal button sized to sit inline inside
   a sentence rather than the full-width card CTA. Higher specificity than
   the base .wcd-reveal-btn/.wcd-deal-btn rule above so it wins without
   needing !important. */
.wcd-reveal-btn.wcd-inline, .wcd-deal-btn.wcd-inline {
	display: inline-flex;
	width: auto;
	padding: 4px 14px;
	font-size: 0.85em;
	gap: 6px;
	vertical-align: middle;
	margin: 0 2px;
	white-space: nowrap;
}
.wcd-reveal-btn.wcd-inline .wcd-code-masked { letter-spacing: 0.5px; }

/* style="text" variant - a dashed-underline link rather than a pill, for
   dropping into copy like "use code SAVE20 at checkout" without it looking
   like a button interrupting the sentence. */
.wcd-reveal-btn.wcd-inline.wcd-inline-text, .wcd-deal-btn.wcd-inline.wcd-inline-text {
	display: inline;
	padding: 0;
	background: none;
	color: var(--wcd-button);
	font-weight: 700;
	border-bottom: 1px dashed var(--wcd-button);
	border-radius: 0;
}
.wcd-reveal-btn.wcd-inline.wcd-inline-text:hover, .wcd-deal-btn.wcd-inline.wcd-inline-text:hover { opacity: .75; }

span.wcd-inline-expired { opacity: .6; font-style: italic; }

/* The full publicly-displayed discount text (e.g. "10% OFF"), pinned to the
   card's top-right corner, protruding slightly past the edge - never the
   hidden coupon code itself. border-radius:999px (a pill, not a fixed 50%
   circle) so it stays circular for short text like "10%" but grows into a
   rounded pill instead of distorting when the text is longer. */
.wcd-corner-badge {
	position: absolute;
	top: -10px;
	right: -10px;
	min-width: 46px;
	min-height: 46px;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--wcd-button);
	color: #fff;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.18);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: normal;
	line-height: 1.05;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .2px;
	text-transform: uppercase;
	z-index: 2;
	box-sizing: border-box;
}

.wcd-view-all { align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--wcd-primary); text-decoration: none; }
.wcd-view-all:hover { text-decoration: underline; }

/* Footer row (usage counter + details toggle) and the restructured
   Need-to-know / Terms accordion it opens. */
.wcd-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #6b7280; border-top: 1px solid #f3f4f6; padding-top: 8px; }
.wcd-used-today { color: #059669; font-weight: 600; }
.wcd-details-toggle {
	background: none; border: none; color: var(--wcd-primary); font-size: 12px; font-weight: 600;
	cursor: pointer; padding: 0; display: flex; align-items: center; gap: 3px; margin-left: auto;
}
.wcd-chevron { display: inline-block; transition: transform .2s ease; }
.wcd-details-toggle.open .wcd-chevron { transform: rotate(180deg); }

.wcd-details-panel { max-height: 0; overflow: hidden; transition: max-height .25s ease; font-size: 13px; color: #4b5563; }
.wcd-details-panel.open { max-height: 500px; margin-top: 6px; }
.wcd-need-to-know, .wcd-terms { padding-top: 10px; }
.wcd-need-to-know:first-child { padding-top: 0; }
.wcd-need-to-know h4, .wcd-terms h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #9ca3af; }
.wcd-need-to-know ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.wcd-terms ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.wcd-icon { margin-right: 2px; }

.wcd-verify { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6b7280; flex-wrap: wrap; }
.wcd-verify button { border: 1px solid #d1d5db; background: #fff; border-radius: 6px; padding: 2px 10px; cursor: pointer; font-size: 12px; }
.wcd-verify button:hover { background: #f3f4f6; }
.wcd-verify.voted button { opacity: .5; pointer-events: none; }
.wcd-verify .wcd-rate { margin-left: auto; font-size: 11px; }

.wcd-social { display: flex; gap: 8px; }
.wcd-share-btn { width: 28px; height: 28px; border-radius: 50%; background: #f3f4f6; color: #4b5563; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.wcd-share-btn:hover { background: var(--wcd-primary); color: #fff; }

/* Templates 1 & 2 - the CTA sits as its own right-hand panel spanning the
   card's full height, separated by a dashed divider - the layout most
   coupon sites use ("content on the left, Get Code button on the right")
   instead of a full-width button under the content. This works via CSS
   Grid on .wcd-card: since .wcd-card-body is display:contents (see above),
   its children - header, badges, desc, cta-wrap, view-all, footer-row,
   details-panel, verify, social, notes - are direct grid items of
   .wcd-card, so they can be placed into a left content column while
   .wcd-cta-wrap alone is pinned to a fixed-width right column spanning
   every row. */
.wcd-card.template-1, .wcd-card.template-2 {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 14px;
	align-items: start;
}
.wcd-card.template-1 .wcd-card-body > *, .wcd-card.template-2 .wcd-card-body > * {
	grid-column: 1;
}
.wcd-card.template-1 .wcd-image, .wcd-card.template-2 .wcd-image {
	grid-column: 1;
}
.wcd-card.template-1 .wcd-cta-wrap, .wcd-card.template-2 .wcd-cta-wrap {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 112px;
	margin: 0;
	padding-left: 14px;
	border-left: 1px dashed #e2e8f0;
	box-sizing: content-box;
}
.wcd-card.template-1 .wcd-reveal-btn, .wcd-card.template-1 .wcd-deal-btn,
.wcd-card.template-2 .wcd-reveal-btn, .wcd-card.template-2 .wcd-deal-btn {
	padding: 12px 10px;
	font-size: 13px;
}
/* The discount already shows as the .wcd-badge pill in the badge row on
   these two templates, so the corner badge is a redundant second copy of
   the same text - and now that it can show the full "10% OFF" (not just
   "10"), it's big enough to overlap the CTA column that sits right beneath
   it in this layout. Drop it here; the other templates that DON'T already
   show the discount pill inline still keep it. */
.wcd-card.template-1 .wcd-corner-badge, .wcd-card.template-2 .wcd-corner-badge { display: none; }
/* Below a certain card width there isn't room for a side panel - fall back
   to the original full-width stacked button. */
@media (max-width: 480px) {
	.wcd-card.template-1, .wcd-card.template-2 {
		display: flex;
		flex-direction: column;
	}
	.wcd-card.template-1 .wcd-cta-wrap, .wcd-card.template-2 .wcd-cta-wrap {
		width: 100%;
		border-left: none;
		border-top: 1px dashed #e2e8f0;
		padding-left: 0;
		padding-top: 12px;
		margin-top: 4px;
	}
}

/* Template 2 - classic ticket look. No top image (see Template 1 for the
   photo-forward option) - the small logo box shows the coupon's own image
   as a fallback instead (see the PHP $logo_src logic), so nothing is lost,
   it's just presented smaller instead of duplicated as a big banner too. */
.wcd-card.template-2 .wcd-image { display: none; }
.wcd-card.template-2 { border-style: dashed; border-color: var(--wcd-primary); border-width: 2px; }
.wcd-card.template-2::before, .wcd-card.template-2::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	background: var(--wcd-page-bg, #f6f7fb);
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%);
}
.wcd-card.template-2::before { left: -10px; }
.wcd-card.template-2::after { right: -10px; }

/* Template 3 - minimal list row. Same CSS Grid approach as Templates 1 & 2
   (card-body's children are promoted to direct grid items via
   display:contents), just with a third column for the row thumbnail:
   thumb | content | CTA, with the CTA reliably pinned to the right edge -
   a plain flex row with wrapping couldn't guarantee that once the row ran
   out of width, the button would just drop to its own line and center.
   Every item gets an EXPLICIT row number (rather than leaning on implicit/
   auto-placed rows with a "-1" end line) so the thumbnail and CTA can't
   end up overlapping row 1's badge row. */
.wcd-card.template-3 {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto auto;
	column-gap: 12px;
	row-gap: 2px;
	align-items: center;
	border-radius: 8px;
	padding: 12px 16px;
}
/* Fallback for anything else card-body might render for this template
   (verify/social/notes, if enabled) - falls into column 2 below row 3,
   stacking automatically. The specific rules below override badge-row,
   header, desc, image, and cta-wrap with explicit rows. */
.wcd-card.template-3 .wcd-card-body > * { grid-column: 2; }
.wcd-card.template-3 .wcd-badge-row { grid-column: 1 / -1; grid-row: 1; }
.wcd-card.template-3 .wcd-card-header { grid-column: 2; grid-row: 2; min-width: 160px; }
.wcd-card.template-3 .wcd-desc { grid-column: 2; grid-row: 3; }
.wcd-card.template-3 .wcd-image { grid-column: 1; grid-row: 2 / 4; align-self: center; }
.wcd-card.template-3 .wcd-cta-wrap { grid-column: 3; grid-row: 2 / 4; align-self: center; width: auto; margin: 0; }
.wcd-card.template-3 .wcd-reveal-btn, .wcd-card.template-3 .wcd-deal-btn { width: auto; padding: 8px 16px; }
.wcd-card.template-3 .wcd-view-all, .wcd-card.template-3 .wcd-footer-row, .wcd-card.template-3 .wcd-details-panel { display: none; } /* keep the list row compact */
.wcd-card.template-3 .wcd-corner-badge { display: none; } /* no natural "top corner" on a row layout */

/* Template 4 - horizontal split: a square photo in the upper-left, with the
   verify ("Did this work?") widget and social share buttons stacked below
   it in that same left column - everything else (header, badges,
   description, CTA, view-all, footer, details, shopping tips) in the right
   column. Uses the same CSS Grid promotion trick as Templates 1-3: since
   .wcd-card-body is back to display:contents here, its children are direct
   grid items of .wcd-card, so image/verify/social can be pinned to column 1
   while everything else independently stacks in column 2 - each column
   fills top-to-bottom in DOM order regardless of how tall the other one is. */
.wcd-card.template-4 {
	display: grid;
	grid-template-columns: 130px 1fr;
	column-gap: 16px;
	align-items: start;
	padding: 16px;
}
.wcd-card.template-4 .wcd-card-body > * { grid-column: 2; }
.wcd-card.template-4 .wcd-image,
.wcd-card.template-4 .wcd-verify {
	grid-column: 1;
}
.wcd-card.template-4 .wcd-image {
	width: 130px;
	height: 130px;
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
}
.wcd-card.template-4 .wcd-image img { width: 100%; height: 100%; object-fit: cover; }
/* Verify ("Did this work?") stays under the square photo in the narrow
   left column, so it needs to stack vertically instead of the usual
   horizontal row. Social share moved back to the right column with
   everything else (inherits the default horizontal row of icons). */
.wcd-card.template-4 .wcd-verify {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
/* No coupon image set - use an enlarged logo at the top of the left column
   instead of leaving it empty. */
.wcd-card.template-4:not(:has(.wcd-image)) .wcd-logo {
	grid-column: 1;
	width: 64px;
	height: 64px;
}

/* Template 5 - compact grid tile: no image, small logo, tight padding, and
   everything but the essentials hidden - built for dense grids (5-6+
   columns) where you want to show a lot of coupons in a small footprint. */
.wcd-card.template-5 { padding: 14px; gap: 8px; }
.wcd-card.template-5 .wcd-image { display: none; }
.wcd-card.template-5 .wcd-logo { width: 32px; height: 32px; border-radius: 8px; }
.wcd-card.template-5 .wcd-title { font-size: 13px; }
.wcd-card.template-5 .wcd-brand,
.wcd-card.template-5 .wcd-view-all,
.wcd-card.template-5 .wcd-footer-row,
.wcd-card.template-5 .wcd-details-panel,
.wcd-card.template-5 .wcd-verify,
.wcd-card.template-5 .wcd-social,
.wcd-card.template-5 .wcd-notes,
.wcd-card.template-5 .wcd-brand-teaser { display: none; }
/* Description now shows, right after the title/Code row. */
.wcd-card.template-5 .wcd-desc { font-size: 12px; margin: 0; }
/* The discount already shows as the red corner badge - drop this second
   copy of the same text from the badge row to avoid repeating it. */
.wcd-card.template-5 .wcd-badge { display: none; }
.wcd-card.template-5 .wcd-badge-row { gap: 4px; }
.wcd-card.template-5 .wcd-type-pill, .wcd-card.template-5 .wcd-status-pill, .wcd-card.template-5 .wcd-badge { font-size: 10px; padding: 2px 7px; }
.wcd-card.template-5 .wcd-cta-wrap { margin: 0; }
.wcd-card.template-5 .wcd-reveal-btn, .wcd-card.template-5 .wcd-deal-btn { padding: 8px 14px; font-size: 12px; }
.wcd-card.template-5 .wcd-corner-badge { min-width: 34px; min-height: 34px; padding: 2px 5px; font-size: 8px; top: -8px; right: -8px; }

/* Template 6 - wide deal row: logo left, bold title with the discount as a
   colored subtitle underneath (not a separate pill), an outlined CTA button
   on the right, and an urgency label overlapping the top-left corner as a
   small rectangular tag instead of an inline pill - modeled on the cashback
   deal rows common on Best Buy/Rakuten-style sites. Short and wide rather
   than the taller vertical-card templates. */
.wcd-card.template-6 {
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding: 16px 22px;
	border-radius: 14px;
}
.wcd-card.template-6 .wcd-card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; flex: 1; min-width: 0; }
.wcd-card.template-6 .wcd-card-header { flex: 1; min-width: 0; }
.wcd-card.template-6 .wcd-logo { width: 56px; height: 56px; }
.wcd-card.template-6 .wcd-title { font-size: 15px; }
.wcd-card.template-6 .wcd-badge-row { order: 1; flex-shrink: 0; }
/* The discount reads as colored text under the title, like "Up to 7% Cash
   Back", rather than a pill background. */
.wcd-card.template-6 .wcd-badge { background: none; color: var(--wcd-primary); font-weight: 700; font-size: 13px; padding: 0; border-radius: 0; }
/* Keep the top line lean - type pill, brand-name line, "View all" link and
   the brand star teaser stay off. Everything else ("most of the data")
   still shows: the description inline, and Need-to-know/Terms/verify/
   social/shopping-tips behind the Additional Info toggle below. */
.wcd-card.template-6 .wcd-type-pill,
.wcd-card.template-6 .wcd-brand,
.wcd-card.template-6 .wcd-view-all,
.wcd-card.template-6 .wcd-brand-teaser,
.wcd-card.template-6 .wcd-image,
.wcd-card.template-6 .wcd-corner-badge { display: none; }
.wcd-card.template-6 .wcd-cta-wrap { order: 2; flex: 0 0 auto; width: auto; margin: 0; }

/* Description always shows, wrapped onto its own full-width line below the
   title/discount/CTA row. */
.wcd-card.template-6 .wcd-desc {
	order: 3;
	flex: 1 1 100%;
	font-size: 12px;
	color: #6b7280;
	margin: 0;
}

/* The footer row (used-today + the Additional Info toggle) always shows -
   it's the control that reveals everything else - on its own full-width
   line under the description. */
.wcd-card.template-6 .wcd-footer-row {
	order: 4;
	flex: 1 1 100%;
	border-top: none;
	padding-top: 2px;
	font-size: 11px;
}

/* Need-to-know/Terms, the verify widget, social share, and shopping tips
   are hidden until "Additional Info" is clicked, then appear stacked full
   width below the row - this is the "everything else" the toggle reveals.
   Keyed off :has() on the always-present .wcd-footer-row (rather than the
   details panel, which may not exist in the DOM at all if there's no
   expiration/terms/featured flag but verify/social/notes ARE enabled). */
.wcd-card.template-6 .wcd-verify,
.wcd-card.template-6 .wcd-social,
.wcd-card.template-6 .wcd-notes {
	display: none;
	order: 6;
	flex: 1 1 100%;
}
.wcd-card.template-6 .wcd-details-panel { order: 5; flex: 1 1 100%; }
.wcd-card.template-6 .wcd-footer-row:has(.wcd-details-toggle.open) ~ .wcd-verify { display: flex; }
.wcd-card.template-6 .wcd-footer-row:has(.wcd-details-toggle.open) ~ .wcd-social { display: flex; }
.wcd-card.template-6 .wcd-footer-row:has(.wcd-details-toggle.open) ~ .wcd-notes { display: block; }
.wcd-card.template-6 .wcd-reveal-btn, .wcd-card.template-6 .wcd-deal-btn {
	width: auto;
	padding: 10px 26px;
	background: #fff;
	color: var(--wcd-button);
	border: 2px solid var(--wcd-button);
}
/* Reuses the existing status-pill markup/logic (Verified / Expires soon /
   Expired) but as a small rectangular tag overlapping the card's top-left
   corner, rather than an inline pill in the badge row. */
.wcd-card.template-6 .wcd-status-pill {
	position: absolute;
	top: -10px;
	left: 14px;
	border-radius: 4px;
	padding: 4px 9px;
	box-shadow: 0 2px 5px rgba(0,0,0,.15);
}
.wcd-card.template-6 .wcd-status-verified,
.wcd-card.template-6 .wcd-status-urgent,
.wcd-card.template-6 .wcd-status-soon { color: #fff; }
.wcd-card.template-6 .wcd-status-verified { background: #16a34a; }
.wcd-card.template-6 .wcd-status-urgent { background: #dc2626; }
.wcd-card.template-6 .wcd-status-soon { background: #d97706; }

.wcd-empty { padding: 20px; text-align: center; color: #6b7280; }

/* Brand rating teaser on coupon cards */
.wcd-brand-teaser { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 12px; color: #6b7280; text-decoration: none; }
.wcd-brand-teaser .wcd-stars { color: #f59e0b; }
.wcd-brand-teaser:hover { text-decoration: underline; }

/* Honeypot field - hidden from real users */
.wcd-hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Per-coupon Notes */
.wcd-notes { border-top: 1px solid #e5e7eb; padding-top: 8px; }
.wcd-notes-toggle { background: none; border: none; color: var(--wcd-primary); font-size: 13px; cursor: pointer; padding: 0; text-align: left; }
.wcd-notes-panel { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.wcd-notes.open .wcd-notes-panel { max-height: 600px; margin-top: 10px; }
.wcd-notes-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; margin-bottom: 10px; }
.wcd-note { font-size: 13px; background: #f9fafb; border-radius: 6px; padding: 8px 10px; }
.wcd-note-author { font-size: 13px; }
.wcd-note-date { font-size: 11px; color: #9ca3af; margin-left: 6px; }
.wcd-note-body { margin: 4px 0 0; color: #4b5563; }
.wcd-note-form, .wcd-review-form { display: flex; flex-direction: column; gap: 6px; }
.wcd-note-form input[type="text"], .wcd-note-form textarea,
.wcd-review-form input[type="text"], .wcd-review-form textarea {
	width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; font-size: 13px;
}
.wcd-note-submit, .wcd-review-submit {
	align-self: flex-start; background: var(--wcd-button); color: #fff; border: none; border-radius: 6px; padding: 6px 14px; cursor: pointer; font-weight: 600; font-size: 13px;
}
.wcd-note-msg, .wcd-review-msg { font-size: 12px; color: #16a34a; margin: 0; }
.wcd-msg-error { color: #dc2626; }
.wcd-notes-preview-hint { font-size: 12px; color: #9ca3af; font-style: italic; margin: 0; }

/* Star rating input (pure CSS, radio-driven) */
.wcd-star-input { display: inline-flex; flex-direction: row-reverse; font-size: 22px; }
.wcd-star-input input { position: absolute; opacity: 0; pointer-events: none; }
.wcd-star-input label { color: #d1d5db; cursor: pointer; padding: 0 2px; }
.wcd-star-input input:checked ~ label,
.wcd-star-input label:hover,
.wcd-star-input label:hover ~ label { color: #f59e0b; }

/* Brand reviews block ([coupon_brand_reviews]) */
.wcd-brand-reviews { display: flex; flex-direction: column; gap: 14px; }
.wcd-brand-reviews-summary { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wcd-brand-reviews-summary .wcd-stars { color: #f59e0b; font-size: 20px; }
.wcd-brand-reviews-title { margin: 0; font-size: 16px; }
.wcd-brand-reviews-list { display: flex; flex-direction: column; gap: 12px; }
.wcd-review { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; }
.wcd-review-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.wcd-review-head .wcd-stars { color: #f59e0b; }
.wcd-review-date { color: #9ca3af; font-size: 11px; }
.wcd-review-body { margin: 6px 0 0; font-size: 14px; color: #4b5563; }
.wcd-review-form { border-top: 1px solid #e5e7eb; padding-top: 12px; max-width: 420px; }
.wcd-review-form h4 { margin: 0 0 4px; }

/* Coupon image (banner at the top of the card) - kept shorter than a full
   hero image so it accents the card instead of dominating it. */
.wcd-image { margin: -18px -18px 0 -18px; overflow: hidden; border-radius: var(--wcd-radius) var(--wcd-radius) 0 0; }
.wcd-image img { width: 100%; height: 96px; object-fit: cover; display: block; }
.wcd-card.template-2 .wcd-image { margin-top: -18px; }

/* Template 1 is the "photo-forward" card - a proper full-size banner (using
   the shared full-bleed treatment above, just taller) rather than a small
   contained image. Template 2 drops the top image entirely (see the hide
   rule in its own section below) so the two templates read as genuinely
   different options instead of two copies of the same layout. */
.wcd-card.template-1 .wcd-image img {
	height: 140px;
}

/* Template 3 has no room for a full banner, but should still show the
   coupon's image - as a small square thumbnail leading the row, the same
   treatment as the brand logo box, rather than dropping the image entirely. */
.wcd-card.template-3 .wcd-image {
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 8px;
	flex-shrink: 0;
}
.wcd-card.template-3 .wcd-image img { width: 100%; height: 100%; object-fit: cover; }

/* Interstitial popup shown after Get Code / Get Deal */
.wcd-modal-overlay {
	position: fixed; inset: 0; background: rgba(17, 24, 39, .55);
	display: flex; align-items: center; justify-content: center;
	z-index: 100000; padding: 20px; box-sizing: border-box;
}
.wcd-modal-overlay[hidden] { display: none; }
.wcd-modal {
	background: #fff; border-radius: 14px; max-width: 420px; width: 100%;
	max-height: 90vh; overflow-y: auto; padding: 24px; position: relative;
	box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.wcd-modal-close {
	position: absolute; top: 10px; right: 12px; background: none; border: none;
	font-size: 22px; line-height: 1; cursor: pointer; color: #6b7280; padding: 4px;
}
.wcd-modal-close:hover { color: #111827; }
.wcd-modal-brand { font-size: 12px; color: #6b7280; margin-bottom: 2px; }
.wcd-modal-title { margin: 0 0 10px; font-size: 18px; padding-right: 20px; }
.wcd-modal-code-box {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: var(--wcd-button); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.wcd-modal-code { font-size: 20px; font-weight: 700; letter-spacing: 2px; color: #fff; }
.wcd-modal-copy {
	background: #fff; color: var(--wcd-button); border: none; border-radius: 6px;
	padding: 6px 12px; cursor: pointer; font-weight: 600; font-size: 13px; flex-shrink: 0;
}
.wcd-modal-hint { font-size: 13px; color: #6b7280; margin: 0 0 12px; }
.wcd-modal-continue {
	display: block; text-align: center; background: var(--wcd-primary); color: #fff;
	text-decoration: none; padding: 12px; border-radius: 10px; font-weight: 700; margin-bottom: 16px;
}
.wcd-modal-continue:hover { opacity: .92; }
.wcd-modal .wcd-verify { border-top: 1px solid #e5e7eb; padding-top: 12px; margin-bottom: 12px; }
.wcd-modal .wcd-social { padding-top: 4px; }
body.wcd-modal-open { overflow: hidden; }