/* ── The gift card email preview ─────────────────────────────────────────────
 *
 * A browser recreation of composeGiftCardEmail_design(). See the header of
 * functions/giftCardEmailPreview.php for why this is a recreation rather than
 * the email itself.
 *
 * ── THE NUMBERS ARE PRE-MULTIPLIED ──────────────────────────────────────────
 *
 * The email is drawn at 800px in Figma and built at 600px: every measurement
 * there goes through wayvo_gce_px(), which is round(figma * 0.75). CSS has no
 * such helper, so each value below is the RESULT, with the Figma literal in the
 * comment beside it. `/​* 80 *​/` means "wayvo_gce_px(80)" — check it against the
 * frame the same way you would check the email.
 *
 * Type uses wayvo_gce_type(), which is the same multiplication with a FLOOR of
 * 14 — the design's 16px body copy would land at 12px, which mobile clients
 * auto-enlarge and reflow around. Where a size looks like it has not been
 * scaled, that is the floor, not an oversight.
 *
 * ── DESIGN DATA COMES FROM THE REGISTRY ─────────────────────────────────────
 *
 * --wgcp-color / --wgcp-on / --wgcp-color-alt / --wgcp-hero / --wgcp-pattern
 * are written onto .wgcp-email by PHP and rewritten by JS on a design change.
 * Nothing in this file hardcodes a design's colour or artwork. Add a design in
 * the admin tab and it lands here with no edit.
 */

/* ── Modal chrome ─────────────────────────────────────────────────────────── */

.wgcp-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(16, 16, 17, 0.6);
}

/* [hidden] loses to the display:flex above, so it has to be restated. */
.wgcp-backdrop[hidden] {
	display: none;
}

/* The product page must not scroll behind the modal. */
body.wgcp-open {
	overflow: hidden;
}

.wgcp-modal {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 640px;
	max-height: 92vh;
	overflow: hidden;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.wgcp-modal-head {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid #e6e6e6;
}

.wgcp-modal-title {
	font-size: 15px;
	font-weight: 600;
	color: #101011;
}

.wgcp-close {
	padding: 0 4px;
	font-size: 26px;
	line-height: 1;
	color: #6b6b6b;
	cursor: pointer;
	background: none;
	border: 0;
}

.wgcp-close:hover {
	color: #101011;
}

/* The scroll container. The email column inside keeps its own fixed width. */
.wgcp-modal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #f0f0f0;
}

/* ── The email column ─────────────────────────────────────────────────────── */

.wgcp-email {
	width: 600px;              /* the email's own width */
	max-width: 100%;
	margin: 0 auto;
	background: #ffffff;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;
	color: #101011;
	text-align: center;
}

.wgcp-email *,
.wgcp-email *::before,
.wgcp-email *::after {
	box-sizing: border-box;
}

/* Sections are the email's <td>s. Everything centres except section 3.
 * gap replaces the email's spacer <div>s — it has none, we do. */
.wgcp-s {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;                 /* 80 — the section rhythm */
	padding: 60px;             /* 80 */
	background-color: #ffffff;
}

.wgcp-left {
	align-items: flex-start;
	text-align: left;
}

/* ── 1: hero ──────────────────────────────────────────────────────────────── */

.wgcp-hero {
	padding: 60px 30px;        /* 80 / 40 — the hero alone uses the narrow side */
	background-color: #ffffff;
	background-image: var(--wgcp-hero, none);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* The fireworks export carries empty margin — 840x940 with ink spanning 794 —
 * so `cover` leaves a dead strip down each edge. The email zooms past cover on
 * desktop only and so does this, for the same reason and by the same amount. */
@media screen and (min-width: 621px) {
	.wgcp-hero {
		background-size: 108% auto;
	}
}

.wgcp-wordmark {
	display: block;
	width: 85px;               /* 113 */
	height: 16px;              /* 21 */
}

.wgcp-hero-title {
	margin: 0;
	font-size: 42px;           /* type 56 */
	font-weight: 500;
	line-height: 100%;
	letter-spacing: -0.03em;
	color: #101011;
}

/* The email rasterises this tilt with GD because Outlook has no transforms.
 * A browser does, so it is simply a transform — and the artwork stays crisp
 * at any zoom instead of being a fixed-width PNG. */
.wgcp-hero-card img {
	display: block;
	width: 276px;              /* 368.57 */
	max-width: 100%;
	height: auto;
	border-radius: 8px;        /* 10.29 */
	transform: rotate(-10deg);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.wgcp-btn {
	display: inline-block;
	padding: 11px 15px;        /* 15 / 20 */
	font-size: 14px;           /* type 16 */
	font-weight: 500;
	line-height: 100%;
	letter-spacing: -0.01em;
	white-space: nowrap;
	border-radius: 9999px;
}

.wgcp-btn-dark {
	color: #ffffff;
	background: #101011;
}

.wgcp-btn-light {
	color: #101011;
	background: #ffffff;
}

/* ── 2 and 6: the tinted sections ─────────────────────────────────────────── */

/* The flat colour is not a fallback for the pattern — it is what a design with
 * no pattern is supposed to look like. Every design has the colour; almost
 * none have the pattern. */
.wgcp-tinted {
	background-color: var(--wgcp-color, #3ec97c);
	background-image: var(--wgcp-pattern, none);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* The boxes sit closer together than the section rhythm — 20 in the design,
 * against the 80 that separates everything else — so the column's own gap is
 * the SMALL one and the button pays the difference. Doing it the other way
 * round, with a negative margin on each box, also pulled the button up: the
 * code box is a .wgcp-box too, and there is no "last one before the button"
 * selector in CSS. */
.wgcp-inner {
	display: flex;
	flex-direction: column;
	gap: 15px;                 /* 20 — between the boxes */
	width: 480px;              /* 640 */
	max-width: 100%;
}

.wgcp-inner > .wgcp-btn {
	align-self: center;
	margin-top: 45px;          /* 15 + 45 = the section's own 60 (80) */
}

.wgcp-split {
	display: flex;
	gap: 18px;                 /* 24 */
}

.wgcp-split > .wgcp-box {
	flex: 1 1 231px;           /* (640 - 24) / 2 */
	min-width: 0;
}

.wgcp-box {
	padding: 30px;             /* 40 */
	text-align: left;
	background: #ffffff;
	border-radius: 12px;       /* 16 */
}

.wgcp-box-value {
	margin-top: 30px;          /* 40 — the gap under the tag */
	font-size: 30px;           /* type 40 */
	font-weight: 500;
	line-height: 120%;
	letter-spacing: -0.02em;
	color: #101011;
	word-break: break-word;
}

/* The message is the design's 32, not the 40 the numeric fields use. */
.wgcp-box-value-sm {
	font-size: 24px;           /* type 32 */
}

/* The buyer's line breaks have to survive. The email runs the message through
 * nl2br() because it is building HTML; this is set by textContent, so the
 * newlines are already there and only need honouring — which also means the
 * message can never inject markup. */
.wgcp-f-message {
	white-space: pre-wrap;
}

.wgcp-tag {
	display: inline-block;
	padding: 2px 8px;          /* 3 / 10 */
	font-size: 12px;           /* type 13.79, floor 12 */
	font-weight: 500;
	line-height: 140%;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: var(--wgcp-on, #ffffff);
	background: var(--wgcp-color, #3ec97c);
	border-radius: 9999px;
}

/* ── 3: the brand logo grid ───────────────────────────────────────────────── */

.wgcp-s.wgcp-left {
	gap: 30px;                 /* 40 — this section's own rhythm */
}

.wgcp-h3 {
	margin: 0;
	font-size: 24px;           /* type 32 */
	font-weight: 500;
	line-height: 110%;
	letter-spacing: -0.03em;
	color: #101011;
}

.wgcp-muted {
	color: #8d8b8b;
}

.wgcp-body {
	margin: -18px 0 0;         /* pull back to the design's 16 under the heading */
	font-size: 14px;           /* type 16, floor */
	font-weight: 400;
	line-height: 130%;
	letter-spacing: -0.02em;
	color: #101011;
}

/* The grid is a generated composite from the plugin, sized for a 600px email.
 * Held to the column so a wider asset cannot push the layout out. */
.wgcp-logogrid,
.wgcp-logogrid img,
.wgcp-logogrid table {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* ── 4: the card, built in markup ─────────────────────────────────────────── */

.wgcp-grey {
	background-color: #f5f5f5;
}

.wgcp-h2 {
	margin: 0;
	font-size: 42px;           /* type 56 */
	font-weight: 500;
	line-height: 100%;
	letter-spacing: -0.03em;
	color: #101011;
}

.wgcp-card {
	width: 375px;              /* 500 */
	max-width: 100%;
	padding: 20px;             /* 27 */
	text-align: left;
	background: var(--wgcp-color, #3ec97c);
	border-radius: 12px;       /* 16 */
	color: var(--wgcp-on, #ffffff);
}

.wgcp-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.wgcp-card-blurb {
	font-size: 18px;           /* type 24.25 */
	font-weight: 500;
	line-height: 110%;
	letter-spacing: -0.02em;
}

.wgcp-fade {
	opacity: 0.6;
}

.wgcp-card-bcorp {
	display: block;
	flex: 0 0 auto;
	width: 33px;               /* 44 */
	height: 56px;              /* 74 */
}

.wgcp-card-expiry {
	margin-top: 23px;          /* 30 */
	font-size: 14px;           /* type 16, floor */
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.02em;
}

.wgcp-card-code {
	font-size: 24px;           /* type 32 */
	font-weight: 700;
	line-height: 110%;
	letter-spacing: -0.02em;
	word-break: break-word;
}

/* currentColor, so the rule follows the design's `on` without naming it. */
.wgcp-card-rule {
	margin: 18px 0;            /* 24 either side */
	border-top: 1px solid currentColor;
	opacity: 0.5;
}

.wgcp-card-bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}

.wgcp-card-mark {
	display: block;
	width: 60px;               /* 80 */
	height: 32px;              /* 43 */
}

.wgcp-card-value {
	font-size: 48px;           /* type 64 */
	font-weight: 700;
	line-height: 90%;
	text-align: right;
}

/* ── 5: what is Wayvo ─────────────────────────────────────────────────────── */

/* The gradient is baked into the JPEG. A CSS gradient over a background-image
 * renders in almost no email client, so the email bakes it — and this shows
 * the same file rather than reproducing the effect a second way. */
.wgcp-panel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 480px;              /* 640 */
	max-width: 100%;
	min-height: 615px;         /* 820 */
	padding: 30px;             /* 40 */
	text-align: left;
	background-color: #6f8fa6;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 6px;        /* 8 */
}

.wgcp-panel-title {
	margin: 0;
	font-size: 30px;           /* type 40 */
	font-weight: 500;
	line-height: 110%;
	letter-spacing: -0.02em;
	color: #ffffff;
}

.wgcp-panel-body {
	margin: 8px 0 0;           /* 10 */
	font-size: 15px;           /* type 20 */
	font-weight: 400;
	line-height: 140%;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.wgcp-panel-bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 15px;                 /* 20 */
}

.wgcp-brandcard {
	display: flex;
	flex: 0 0 auto;            /* never stretched by the column it stacks into */
	gap: 15px;                 /* 20 */
	width: 248px;              /* 330 */
	max-width: 100%;           /* but never wider than a very narrow panel */
	padding: 15px;             /* 20 */
	background: #f5f5f5;
	border-radius: 6px;        /* 8 */
}

.wgcp-brandcard-img {
	display: block;
	flex: 0 0 auto;
	width: 101px;              /* 135 */
	height: 119px;             /* 158 */
	object-fit: cover;
	border-radius: 3px;        /* 4 */
}

.wgcp-brandcard-name {
	font-size: 24px;           /* type 32 */
	font-weight: 500;
	line-height: 120%;
	letter-spacing: -0.02em;
	color: #101011;
}

.wgcp-brandcard-desc {
	margin-bottom: 9px;        /* 12 */
	font-size: 14px;           /* type 16, floor */
	font-weight: 400;
	line-height: 140%;
	letter-spacing: -0.01em;
	color: #101011;
}

/* ── 6: how to use it ─────────────────────────────────────────────────────── */

.wgcp-steps-panel {
	display: flex;
	flex-direction: column;
	gap: 30px;                 /* 40 */
	width: 480px;              /* 640 */
	max-width: 100%;
	padding: 60px 30px;        /* 80 / 40 */
	background: #f5f5f5;
	border-radius: 6px;        /* 8 */
}

.wgcp-center {
	text-align: center;
}

.wgcp-steps {
	display: flex;
	gap: 12px;                 /* 16 */
}

/* A FIXED SQUARE WITH THE LABEL PINNED TO THE BOTTOM.
 * The design draws all three at 176x176. Left to hug their content they come
 * out at three different heights — "Register" is one line, "Shop with your
 * chosen brand" is two — which reads as a layout fault rather than as a
 * difference in wording. */
.wgcp-step {
	display: flex;
	flex: 1 1 132px;           /* (560 - 2 * 16) / 3 */
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	height: 132px;             /* 176 */
	padding: 15px;             /* 20 */
	text-align: left;
	background: #ffffff;
	border-radius: 6px;        /* 8 */
}

.wgcp-step-n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;               /* 32 */
	height: 24px;              /* 32 */
	font-size: 12px;           /* type 14, floor 12 */
	font-weight: 500;
	color: var(--wgcp-on, #ffffff);
	background: var(--wgcp-color, #3ec97c);
	border-radius: 9999px;
}

.wgcp-step-l {
	font-size: 14px;           /* type 16, floor */
	font-weight: 400;
	line-height: 140%;
	letter-spacing: -0.01em;
	color: #101011;
}

.wgcp-fineprint {
	margin: -15px 0 0;         /* the design's 20 above, not the section's 40 */
	font-size: 12px;           /* type 12, floor */
	font-weight: 400;
	line-height: 130%;
	letter-spacing: -0.02em;
	text-align: center;
	color: #101011;
}

.wgcp-steps-panel > .wgcp-btn {
	align-self: center;
}

/* ── 7: footer ────────────────────────────────────────────────────────────── */

.wgcp-foot {
	align-items: stretch;
	gap: 0;
	padding: 30px;             /* 40 */
	text-align: left;
	background-color: #101011;
	color: #ffffff;
}

.wgcp-foot-strap {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;       /* 16 */
	font-size: 14px;           /* type 16, floor */
	font-weight: 400;
	line-height: 130%;
	letter-spacing: -0.02em;
}

.wgcp-foot-logo {
	display: block;
	width: 100%;
	max-width: 540px;          /* 720 */
	height: auto;
	margin-bottom: 90px;       /* 120 */
}

.wgcp-foot-cols {
	display: flex;
	gap: 30px;                 /* 40 */
}

.wgcp-foot-bcorp {
	display: block;
	flex: 0 0 auto;
	width: 43px;               /* 57 */
	height: 68px;              /* 91 */
}

.wgcp-foot-col {
	flex: 1 1 0;
	min-width: 0;
}

.wgcp-foot-link {
	font-size: 18px;           /* type 24 */
	font-weight: 400;
	line-height: 120%;
	color: #ffffff;
}

.wgcp-foot-underline {
	margin-top: 18px;          /* 24 */
	text-decoration: underline;
}

.wgcp-foot-small {
	margin-top: 6px;           /* 8 */
	font-size: 12px;           /* type 12, floor */
	font-weight: 400;
	line-height: 140%;
	color: #ffffff;
}

.wgcp-foot-addr {
	margin-top: 15px;          /* 20 */
}

/* ── The phone tier ───────────────────────────────────────────────────────────
 *
 * Mirrors the email's own max-width: 620px tier. There is no iframe here, so
 * this resolves against the REAL viewport — on a phone the buyer previews the
 * phone layout, which is the one their recipient will see. The parked iframe
 * build got this wrong in a way that was invisible: a 600px frame matched the
 * email's phone tier and rendered the mobile email on a desktop.
 *
 * Where the email has to render an element twice and toggle it, this reorders
 * with flexbox. Email has no flex, no grid and no `order`; a browser has all
 * three, and duplicating markup to work around a limitation we do not have
 * would be copying the workaround instead of the design.
 */
@media screen and (max-width: 620px) {

	.wgcp-backdrop {
		padding: 0;
	}

	.wgcp-modal {
		max-width: 100%;
		max-height: 100vh;
		border-radius: 0;
	}

	/* Section padding is a DESKTOP number: 60 a side leaves 270px of a 390px
	   phone, which the layout cannot fit inside. */
	.wgcp-s {
		gap: 40px;
		padding: 60px 20px;
	}

	.wgcp-hero {
		padding: 60px 20px;
	}

	.wgcp-hero-title {
		font-size: 32px;
	}

	.wgcp-h2 {
		font-size: 32px;
	}

	.wgcp-split {
		flex-direction: column;
		gap: 16px;
	}

	.wgcp-steps {
		flex-direction: column;
	}

	.wgcp-step {
		flex: 1 1 auto;
		height: auto;
		min-height: 88px;
		gap: 12px;
	}

	.wgcp-steps-panel {
		padding: 40px 20px;
	}

	/* The button sits LEFT of the Finisterre card at 600px. Stacked, it belongs
	   underneath — the email achieves that by rendering it twice, we do it with
	   one line.

	   flex-end, NOT stretch: stretch is the default cross-axis behaviour once
	   this becomes a column, and it blew the Finisterre card out to the full
	   width of the panel. The card keeps the width it has at 600px and both
	   items stay flush right, which is where the email puts them. */
	.wgcp-panel-bottom {
		flex-direction: column;
		align-items: flex-end;
	}

	.wgcp-panel-btn {
		order: 2;
	}

	.wgcp-brandcard {
		order: 1;
	}

	.wgcp-foot-strap {
		flex-direction: column;
		gap: 4px;
	}

	.wgcp-foot-logo {
		margin-bottom: 40px;
	}

	.wgcp-foot-cols {
		flex-wrap: wrap;
		gap: 20px;
	}

	.wgcp-foot-col {
		flex: 1 1 100%;
	}
}