/* ── Buying a gift card ──────────────────────────────────────────── */

.aurelle-gc { max-width: 940px; margin: 0 auto; font-size: 15px; color: #453A40; }

.aurelle-gc-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: 28px;
	align-items: start;
}

/*
 * Matches WordPress's own breakpoint rather than inventing one, so the
 * page does not disagree with the admin around it mid-resize.
 */
@media (max-width: 782px) {
	.aurelle-gc-cols { grid-template-columns: minmax(0, 1fr); }
	.aurelle-gc-side { position: static; }
}

.aurelle-gc-side { position: sticky; top: 24px; }

.aurelle-gc-h {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 17px;
	margin: 26px 0 8px;
}
.aurelle-gc-h:first-child { margin-top: 0; }

.aurelle-gc-note { font-size: 12.5px; color: #8E9399; line-height: 1.55; margin: 0 0 12px; }
.aurelle-gc-centered { text-align: center; }

/* Sized by what a card needs to stay legible, not by a column count -
   four fixed columns give a 52px thumbnail on a small phone. */
.aurelle-gc-designs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
	gap: 10px;
	margin-bottom: 6px;
}
.aurelle-gc-design {
	border: 2px solid transparent;
	border-radius: 13px;
	padding: 0;
	background: none;
	cursor: pointer;
	font: inherit;
}
.aurelle-gc-design.is-sel { border-color: #C4818E; }

/*
 * Scaled, not cropped.
 *
 * The renderer emits a card at a fixed pixel width AND height, because
 * the same markup goes in an email where nothing may depend on CSS. So
 * max-width alone narrowed the box and left the height at 125px, which
 * cut the card off rather than shrinking it.
 *
 * The scale is set by script, because CSS cannot turn a container's
 * width into the unitless number transform needs. Until it runs the
 * card is simply hidden: a thumbnail that appears at the wrong size and
 * then jumps is worse than one that appears a moment later.
 */
.aurelle-gc-design > div {
	transform-origin: top left;
	max-width: none;
	visibility: hidden;
}
.aurelle-gc-design.is-scaled > div { visibility: visible; }

/* The button holds the space, so scaling the card cannot leave a gap
   under it - transform does not affect layout. */
.aurelle-gc-design {
	aspect-ratio: 1.6 / 1;
	overflow: hidden;
}

/*
 * The circles under a thumbnail, when a design holds several looks.
 *
 * Under the card and never on it. A band across the corner covered the
 * artwork and had to be read at forty-five degrees at 112px; a row of
 * circles is what a shopper already reads as "this comes in other
 * colours", and it shows what those colours are.
 */
.aurelle-gc-designwrap { display: flex; flex-direction: column; }

.aurelle-gc-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 7px 2px 0;
}

.aurelle-gc-dot {
	width: 17px;
	height: 17px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 50%;
	cursor: pointer;
	background-size: cover;
	background-position: center;
	box-shadow: 0 0 0 1px rgba(46, 38, 43, .18) inset;
}
.aurelle-gc-dot.is-sel { border-color: #2E262B; }
.aurelle-gc-dot:focus-visible { outline: 2px solid #AC717D; outline-offset: 2px; }

/* ── The looks a buyer picks between ──────────────────────────────── */

.aurelle-gc-looks {
	margin: 14px 0 4px;
	padding: 14px 15px 4px;
	border: 1px solid rgba(46, 38, 43, .12);
	border-radius: 12px;
	background: #FCFAF9;
}

.aurelle-gc-lookrow { margin-bottom: 12px; }

.aurelle-gc-lookhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}
.aurelle-gc-lookhead b {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6E6167;
}
.aurelle-gc-lookhead span { font-size: 12px; color: #9A8C92; }

.aurelle-gc-swatches { display: flex; flex-wrap: wrap; gap: 8px; }

.aurelle-gc-swatch {
	width: 76px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	text-align: center;
}
.aurelle-gc-swatch i {
	display: block;
	height: 46px;
	border-radius: 9px;
	border: 2px solid transparent;
	box-shadow: 0 0 0 1px rgba(46, 38, 43, .12) inset;
	background-size: cover;
	background-position: center;
}
.aurelle-gc-swatch.is-sel i { border-color: #2E262B; }
.aurelle-gc-swatch b {
	display: block;
	margin-top: 5px;
	font-size: 11.5px;
	font-weight: 400;
	color: #6E6167;
	/* A long name is the design's business, not the row's. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aurelle-gc-swatch.is-sel b { color: #2E262B; font-weight: 600; }
.aurelle-gc-swatch:focus-visible i { outline: 2px solid #AC717D; outline-offset: 2px; }

.aurelle-gc-inks {
	display: inline-flex;
	padding: 3px;
	border: 1px solid rgba(46, 38, 43, .12);
	border-radius: 999px;
	background: #fff;
}
.aurelle-gc-ink {
	padding: 7px 15px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: #6E6167;
	font: 500 13.5px/1 inherit;
	cursor: pointer;
}
.aurelle-gc-ink.is-sel { background: #2E262B; color: #fff; }

.aurelle-gc-amounts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
	gap: 9px;
}
.aurelle-gc-amount {
	border: 1px solid rgba(196, 129, 142, .32);
	border-radius: 999px;
	padding: 13px 6px;
	background: #fff;
	font: inherit;
	font-size: 15px;
	cursor: pointer;
	color: #453A40;
}
.aurelle-gc-amount:hover { border-color: #C4818E; }
.aurelle-gc-amount.is-sel { background: #C4818E; border-color: #C4818E; color: #fff; }

/* One control with three options, because a phrase and a written line
   compete for the same space on the card. */
.aurelle-gc-choice {
	border: 1px solid rgba(196, 129, 142, .24);
	border-radius: 12px;
	overflow: hidden;
}
.aurelle-gc-opt { padding: 12px 14px; border-bottom: 1px solid rgba(196, 129, 142, .24); }
.aurelle-gc-opt:last-child { border-bottom: 0; }
.aurelle-gc-opt.is-on { background: #F7EFF1; }
.aurelle-gc-opt[aria-disabled="true"] { opacity: .45; }
.aurelle-gc-opt label { display: flex; gap: 9px; align-items: center; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.aurelle-gc-opt-body { margin: 10px 0 0 25px; }
.aurelle-gc-opt-body input,
.aurelle-gc-opt-body select {
	width: 100%;
	border: 1px solid rgba(196, 129, 142, .35);
	border-radius: 9px;
	padding: 9px 11px;
	font: inherit;
	font-size: 14px;
	background: #fff;
}

.aurelle-gc-field { display: block; margin-bottom: 12px; }
.aurelle-gc-field > span { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.aurelle-gc-field input,
.aurelle-gc-field textarea {
	width: 100%;
	border: 1px solid rgba(196, 129, 142, .35);
	border-radius: 10px;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
}

/* iOS zooms the page when a field under 16px takes focus and does not
   zoom back out. Cheaper to size up than to fight it. */
@media (max-width: 560px) {
	.aurelle-gc-field input,
	.aurelle-gc-field textarea,
	.aurelle-gc-opt-body input,
	.aurelle-gc-opt-body select { font-size: 16px; }
}

.aurelle-gc-count { display: block; font-size: 11px; color: #8E9399; text-align: right; margin-top: 4px; }
.aurelle-gc-count.is-over { color: #A32D2D; font-weight: 600; }

.aurelle-gc-preview { margin-bottom: 12px; }
.aurelle-gc-preview > div { max-width: 100%; }

/*
 * A hairline edge on every card shown on the page.
 *
 * Inset rather than a border, because the card's size is written into
 * its own markup - a real border would add two pixels to a box whose
 * width the script measures, and the thumbnail would scale to the wrong
 * number.
 *
 * It follows the card's own corner radius because it is drawn inside
 * the same box, so nothing has to be kept in step with it.
 *
 * Only on the page. The emailed card gets none: an inset shadow is not
 * reliable in mail clients, and a pale card in a white email is the one
 * place this matters least, since the email has its own frame.
 */
.aurelle-gc-design > div,
.aurelle-gc-preview > div {
	box-shadow: inset 0 0 0 var(--gc-edge, 1px) rgba(0, 0, 0, .85);
}
.aurelle-gc-previewlink { text-align: center; margin: 0 0 16px; }

.aurelle-gc-linky {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 12.5px;
	color: #AC717D;
	text-decoration: underline;
	cursor: pointer;
}

.aurelle-gc-btn {
	display: block;
	text-align: center;
	border-radius: 999px;
	padding: 12px 22px;
	font-size: 14.5px;
	font-weight: 600;
	border: 1px solid #C4818E;
	background: #C4818E;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}
.aurelle-gc-btn:hover { background: #AC717D; border-color: #AC717D; color: #fff; }

/*
 * The sign-in buttons are <button>s, which the theme's reset styles
 * ([type="button"] - as specific as one class, and loaded later). Two
 * classes win on weight, without !important.
 */
.aurelle-gc-btn.aurelle-login-trigger {
	width: 100%;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	border: 1px solid #C4818E;
	background: #C4818E;
	color: #fff;
}
.aurelle-gc-btn.aurelle-login-trigger:hover,
.aurelle-gc-btn.aurelle-login-trigger:focus { background: #AC717D; border-color: #AC717D; color: #fff; }

.aurelle-gc-error {
	background: rgba(163, 45, 45, .10);
	color: #A32D2D;
	border-radius: 9px;
	padding: 10px 12px;
	font-size: 12.5px;
	margin: 0 0 12px;
}

.aurelle-gc-env {
	background: rgba(186, 117, 23, .12);
	color: #7A480A;
	border-radius: 9px;
	padding: 9px 12px;
	font-size: 12px;
	margin: 12px 0 0;
}

.aurelle-gc-pay { min-height: 50px; }

/* The rule between the one-press wallets and the card form.

   Its own copy rather than the one in wallets.css: that file is
   enqueued for the PayPal row, and a Stripe page that borrowed a
   rule from it would lose its divider the day that row goes. */
.aurelle-gc-or {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0;
	font-size: 11.5px;
	color: #8E9399;
}
.aurelle-gc-or[hidden] { display: none; }
.aurelle-gc-or::before,
.aurelle-gc-or::after { content: ''; flex: 1; height: 1px; background: rgba(196, 129, 142, .24); }

/* The widest commitment on the page was the narrowest control on
   it. Full width at the wallets' height closes the column. */
.aurelle-gc-stripe-pay {
	width: 100%;
	height: 44px;
	padding: 0;
}

/* Monospace, selectable and large. Somebody reads this aloud or copies
   it, and it is the one thing on the page that has to be exact. */
.aurelle-gc-code {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 22px;
	letter-spacing: .1em;
	background: #F7EFF1;
	border-radius: 10px;
	padding: 14px;
	text-align: center;
	margin: 0 0 12px;
	user-select: all;
}

.aurelle-gc-unavailable { color: #8E9399; font-size: 14px; }

/* ── The email preview ───────────────────────────────────────────── */

.aurelle-gc-modal {
	position: fixed;
	inset: 0;
	background: rgba(69, 58, 64, .5);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 36px 16px;
	z-index: 9999;
	overflow: auto;
}
.aurelle-gc-modal[hidden] { display: none; }

.aurelle-gc-modal-box {
	background: #f4f4f4;
	border-radius: 14px;
	width: 100%;
	max-width: 640px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.aurelle-gc-modal-top {
	background: #fff;
	padding: 12px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #e2e0e2;
}
.aurelle-gc-modal-body { padding: 22px 16px; }

/* A floating box on a phone is a small box inside a small screen. */
@media (max-width: 560px) {
	.aurelle-gc-modal { padding: 0; align-items: stretch; }
	.aurelle-gc-modal-box { max-width: none; border-radius: 0; min-height: 100%; }
	.aurelle-gc-modal-top { position: sticky; top: 0; }
}

/* ── After paying ────────────────────────────────────────────────── */

.aurelle-gc-done { max-width: 620px; }

.aurelle-gc-confirm {
	background: #fff;
	border: 1px solid rgba(196, 129, 142, .24);
	border-radius: 16px;
	padding: 24px 26px;
}

.aurelle-gc-tick {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(99, 153, 34, .13);
	color: #3B6D11;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin: 0 auto 14px;
}

.aurelle-gc-lead {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 23px;
	text-align: center;
	margin: 0 0 6px;
}
.aurelle-gc-sub { font-size: 13.5px; color: #8E9399; text-align: center; margin: 0 0 20px; line-height: 1.6; }

.aurelle-gc-cardbox { max-width: 420px; margin: 0 auto 18px; }
.aurelle-gc-cardbox > div { max-width: 100%; }

.aurelle-gc-rows {
	border: 1px solid rgba(196, 129, 142, .24);
	border-radius: 12px;
	overflow: hidden;
	margin: 20px 0;
}
.aurelle-gc-row {
	display: flex;
	gap: 12px;
	padding: 11px 14px;
	border-bottom: 1px solid rgba(196, 129, 142, .24);
	font-size: 13.5px;
}
.aurelle-gc-row:last-child { border-bottom: 0; }
.aurelle-gc-row > span:first-child { width: 118px; color: #8E9399; flex-shrink: 0; }
.aurelle-gc-row em { font-style: normal; color: #8E9399; }

.aurelle-gc-warn {
	background: rgba(186, 117, 23, .12);
	color: #7A480A;
	border-radius: 11px;
	padding: 12px 14px;
	font-size: 12.5px;
	line-height: 1.6;
	margin: 0 0 18px;
}

.aurelle-gc-actions { margin: 0; }
.aurelle-gc-actions .aurelle-gc-btn { width: 100%; border: 0; }

.aurelle-gc-next {
	background: #FBF7F8;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 12.5px;
	line-height: 1.6;
	color: #5c5158;
	margin-top: 18px;
}
.aurelle-gc-next strong { color: #453A40; }

/*
 * The printable sheet lives on the same page and is only ever seen on
 * paper. One page means no second request and nothing to keep in step
 * with the confirmation.
 */
.aurelle-gc-sheet { display: none; }

.aurelle-gc-sheet-top { text-align: center; font-family: Georgia, serif; letter-spacing: .14em; font-size: 15px; margin-bottom: 26px; }
.aurelle-gc-sheet-to { font-family: Georgia, serif; font-size: 19px; text-align: center; margin: 0 0 4px; }
.aurelle-gc-sheet-from { font-size: 12.5px; color: #8E9399; text-align: center; margin: 0 0 22px; }
.aurelle-gc-sheet-note {
	font-family: Georgia, serif;
	font-size: 15px;
	line-height: 1.7;
	text-align: center;
	max-width: 400px;
	margin: 0 auto 24px;
}
.aurelle-gc-sheet-code { font-family: ui-monospace, Menlo, monospace; font-size: 17px; letter-spacing: .1em; text-align: center; margin: 0 0 4px; }
.aurelle-gc-sheet-terms { font-size: 11px; color: #8E9399; text-align: center; line-height: 1.6; margin: 20px 0 0; }
.aurelle-gc-sheet-cut {
	border-top: 1px dashed rgba(69, 58, 64, .25);
	margin: 26px 0 0;
	padding-top: 10px;
	font-size: 10.5px;
	color: #8E9399;
	text-align: center;
}

@media print {
	/* The gift, not the confirmation, and never the buyer's receipt. */
	.aurelle-gc-confirm,
	.aurelle-gc-receipt { display: none; }
	.aurelle-gc-sheet { display: block; break-inside: avoid; }
	.aurelle-gc-done { max-width: none; }

	/*
	 * The sheet and nothing else on the page.
	 *
	 * Hiding the confirmation was never enough: the theme's header and
	 * menu, the footer, the information tabs and whatever Elementor put
	 * around the shortcode all printed with it. Naming those would mean
	 * knowing every theme's markup, so this names none of them. Anything
	 * that is neither the sheet nor contains it is hidden - at every level,
	 * because each element that contains the sheet has its other children
	 * matched here in turn.
	 *
	 * !important because Elementor sets display on its containers through
	 * selectors of four or more classes, which would otherwise win. It only
	 * ever matches on a page carrying a sheet, which is the card's own page.
	 */
	*:has(.aurelle-gc-sheet) > *:not(:has(.aurelle-gc-sheet)):not(.aurelle-gc-sheet) {
		display: none !important;
	}

	/*
	 * What contains the sheet stays, but only as a wrapper. A section
	 * built to fill the screen, or padded for a hero, would otherwise push
	 * the card down the page or onto a second one.
	 */
	*:has(.aurelle-gc-sheet) {
		display: block !important;
		position: static !important;
		width: auto !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		transform: none !important;
	}

	/* Backgrounds are dropped by default when printing, which would
	   leave a gift card as an empty outline. */
	.aurelle-gc-sheet * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* ── The information tabs ────────────────────────────────────────── */

.aurelle-gc-tabs { max-width: 940px; margin: 34px auto 0; }

.aurelle-gc-tablist {
	border-bottom: 1px solid rgba(196, 129, 142, .24);
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}
.aurelle-gc-tablist button {
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	padding: 11px 18px;
	cursor: pointer;
	color: #8E9399;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.aurelle-gc-tablist button[aria-selected="true"] {
	color: #AC717D;
	border-bottom-color: #C4818E;
	font-weight: 600;
}
.aurelle-gc-tablist button:hover { color: #453A40; }

.aurelle-gc-panel { padding: 24px 2px 0; max-width: 680px; line-height: 1.72; }
.aurelle-gc-panel[hidden] { display: none; }
.aurelle-gc-panel h3 {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 18px;
	margin: 26px 0 8px;
}
.aurelle-gc-panel > h3:first-child { margin-top: 0; }
.aurelle-gc-panel p { margin: 0 0 14px; }
.aurelle-gc-panel ol,
.aurelle-gc-panel ul { margin: 0 0 14px; padding-left: 22px; }
.aurelle-gc-panel li { margin-bottom: 8px; }

/*
 * Without script every panel would be visible at once, which is a long
 * page but a readable one - better than three headings and nothing
 * under them.
 */
.no-js .aurelle-gc-panel[hidden] { display: block; }

/*
 * The bare section takes the page's styling, not this plugin's.
 *
 * It exists to be dropped into a tab somebody built themselves, so
 * imposing type sizes and margins here would be fighting the layout it
 * was put into - which is what made the tabs look wrong beside an
 * Elementor design in the first place. Only the spacing between blocks
 * is set, because two paragraphs with no gap is not a style choice.
 */
.aurelle-gc-info > *:first-child { margin-top: 0; }
.aurelle-gc-info > *:last-child { margin-bottom: 0; }

/* ── A card link that did not work ─────────────────────────────────────
   One narrow column: the message, the balance check and the way to buy,
   all the same width and evenly spaced. The page's own 940px is for the
   buying form's two columns, and left this page a wide, half-empty box
   above a narrower block that did not line up with it. */
.aurelle-gc-linkissue { max-width: 620px; }
.aurelle-gc-linkissue .aurelle-gc-confirm { padding: 22px 24px; }
.aurelle-gc-linkissue .aurelle-gc-lead { font-size: 21px; }
/* Nothing follows the text inside the box, so its trailing gap is the
   box's own padding rather than padding plus margin. */
.aurelle-gc-linkissue .aurelle-gc-sub:last-child { margin-bottom: 0; }
.aurelle-gc-linkissue .aurelle-account.aurelle-gcb { max-width: none; margin-top: 20px; }
.aurelle-gc-linkissue .aurelle-gc-note { margin: 20px 0 0; }

/*
 * What a payment says about itself once PayPal's window closes.
 *
 * One panel in the buttons' place: confirming, received, pending, or
 * taken with no card. Pending is amber rather than red because nothing
 * has gone wrong, and "taken with no card" is a notice rather than an
 * error because the buyer did nothing wrong either.
 */
.aurelle-gc-locked { opacity: .5; pointer-events: none; }

.aurelle-gc-status { border-radius: 16px; padding: 22px 20px; margin: 0 0 12px; }
.aurelle-gc-status[hidden] { display: none; }
.aurelle-gc-status.is-wait,
.aurelle-gc-status.is-ok { background: #fff; border: 1px solid rgba(196, 129, 142, .24); text-align: center; }
.aurelle-gc-status.is-ok .aurelle-gc-tick { margin: 0 auto 12px; }
.aurelle-gc-status.is-pending { background: rgba(186, 117, 23, .12); color: #7A480A; }
.aurelle-gc-status.is-stuck { background: #fff; border: 1px solid rgba(186, 117, 23, .45); }
.aurelle-gc-status-top { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.aurelle-gc-status-top .aurelle-gc-status-h { margin: 0; }
.aurelle-gc-status-icon { flex-shrink: 0; }
.aurelle-gc-status-h { font-family: Georgia, 'Times New Roman', serif; font-size: 19px; line-height: 1.3; margin: 0 0 8px; }
.aurelle-gc-status.is-pending .aurelle-gc-status-h { color: #5E3706; }
.aurelle-gc-status-p { font-size: 13.5px; line-height: 1.6; margin: 0 0 8px; }
.aurelle-gc-status.is-wait .aurelle-gc-status-p,
.aurelle-gc-status.is-ok .aurelle-gc-status-p { color: #6E6469; margin: 0; }
.aurelle-gc-status-ref { font-size: 12.5px; margin: 4px 0 0; }
.aurelle-gc-status-box { background: #FBF7F8; border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.7; color: #5c5158; margin-top: 4px; }
.aurelle-gc-status-box a { color: #AC717D; }
.aurelle-gc-status .aurelle-gc-actions { margin: 12px 0 8px; }

.aurelle-gc-spin {
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto 14px;
	border-radius: 50%;
	border: 4px solid rgba(196, 129, 142, .2);
	border-top-color: #C4818E;
	animation: aurelle-gc-spin .9s linear infinite;
}
@keyframes aurelle-gc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.aurelle-gc-spin { animation: none; border-color: #C4818E; }
}

/* A PayPal reference is read and copied, never scanned, so it wraps
   rather than running off a narrow screen. */
.aurelle-gc-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; word-break: break-all; }

/* The buyer's receipt on the card page: its own box beneath the card's,
   the record underneath the gift. Green, as a payment that went through. */
.aurelle-gc-receipt { margin-top: 16px; }
.aurelle-gc-receipt .aurelle-gc-paid { background: #fff; }
.aurelle-gc-receipt .aurelle-gc-paid + .aurelle-gc-note { margin: 8px 0 0; }

.aurelle-gc-paid {
	border: 1px solid rgba(99, 153, 34, .35);
	background: rgba(99, 153, 34, .06);
	border-radius: 12px;
	overflow: hidden;
	margin: 0 0 8px;
}
.aurelle-gc-paid-h {
	margin: 0;
	padding: 10px 14px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #3B6D11;
	border-bottom: 1px solid rgba(99, 153, 34, .25);
}
.aurelle-gc-paid .aurelle-gc-row { border-bottom-color: rgba(99, 153, 34, .18); }
.aurelle-gc-paid .aurelle-gc-row > span:first-child { color: #6E6469; }

/* ── Two steps: the card, then who it goes to ───────────────────────
 *
 * Scoped to .aurelle-gc-v2 so the confirmation page, which shares the
 * .aurelle-gc wrapper, is untouched.
 *
 * Restyling the page
 * ------------------
 * Everything on the page around the cards reads its colours, sizes and
 * spacing from the custom properties below, so the look can be changed
 * from Elementor's Custom CSS (or the theme's) without touching this
 * file or out-weighing any selector. For example:
 *
 *     .aurelle-gc-v2 {
 *         --gc-band-bg: #F3EEE9;
 *         --gc-accent: #8F5763;
 *         --gc-title-size: 32px;
 *     }
 *
 * The card pictures, the email and the Wallet pass are drawn by the
 * server with their own inline styles, because they also have to look
 * right inside an email. They are deliberately not controlled from here.
 *
 * 2.60.0 changed three defaults: corners are square with rounded
 * edges (--gc-radius, 8px) instead of pills, and the order box is
 * 14px. Set --gc-radius: 999px to bring the pills back.
 *
 * They are read, not declared: each use carries its own default, so a
 * property can be set on .aurelle-gc-v2, on the section Elementor puts
 * around it, or on :root for the whole site, and no selector in this
 * file ever out-weighs it. Every default is the value the page shipped
 * with at the time, so a site that sets none of them sees no change.
 *
 * The properties, with their defaults:
 *
 *   Page
 *     --gc-max-width           1120px
 *     --gc-text                #453A40
 *     --gc-muted               #6E6167
 *     --gc-accent              #AC717D
 *     --gc-line                rgba(196, 129, 142, .24)
 *     --gc-heading-font        Georgia, 'Times New Roman', serif
 *
 *   The two steps
 *     --gc-band-bg             #F8F3EF
 *     --gc-band-pad            48px
 *     --gc-band-pad-mobile     32px
 *     --gc-send-pad            48px
 *     --gc-send-pad-mobile     32px
 *     --gc-col-gap             56px
 *     --gc-col-gap-mobile      28px
 *     --gc-card-col            420px
 *     --gc-preview-top         24px   (how far from the top the preview sticks)
 *     --gc-order-col           380px
 *
 *   Headings and text
 *     --gc-kicker-color        #8F5763
 *     --gc-kicker-size         12px
 *     --gc-kicker-spacing      .14em
 *     --gc-title-size          28px
 *     --gc-title-size-mobile   24px
 *     --gc-sub-size            15px
 *     --gc-note-size           13.5px
 *     --gc-label-size          13px
 *     --gc-link-size           14px
 *
 *   Controls
 *     --gc-radius              8px    (every button, field and box below)
 *     --gc-button-radius       var(--gc-radius)
 *     --gc-control-height      44px
 *     --gc-amount-bg           #fff
 *     --gc-amount-border       rgba(196, 129, 142, .32)
 *     --gc-amount-on-bg        #C4818E
 *     --gc-amount-on-text      #fff
 *     --gc-amount-radius       var(--gc-radius)
 *     --gc-design-on           #C4818E
 *     --gc-field-border        rgba(196, 129, 142, .35)
 *     --gc-field-radius        var(--gc-radius)
 *     --gc-toggle-border       #D9CCD0
 *     --gc-toggle-radius       var(--gc-radius)
 *     --gc-toggle-on-bg        #F7EFF1
 *     --gc-toggle-on-edge      rgba(172, 113, 125, .45)
 *     --gc-button-bg           #C4818E
 *     --gc-button-bg-hover     #AC717D
 *     --gc-button-text         #fff
 *
 *   Your order
 *     --gc-order-bg            #fff
 *     --gc-order-border        rgba(196, 129, 142, .3)
 *     --gc-order-radius        14px
 *     --gc-order-pad           24px
 *     --gc-total-size          21px
 *
 *   Wallet pass dialog
 *     --gc-dialog-bg           #fff
 *     --gc-dialog-max          720px
 *
 */

.aurelle-gc.aurelle-gc-v2 {
	max-width: var(--gc-max-width, 1120px);
	color: var(--gc-text, #453A40);
}



/*
 * The card step sits on a band that runs the width of the window.
 *
 * Drawn with a spread shadow clipped to the band's own height rather
 * than by stretching the element to 100vw, which adds a horizontal
 * scrollbar wherever the page has a vertical one.
 */
.aurelle-gc-v2 .aurelle-gc-band {
	background: var(--gc-band-bg, #F8F3EF);
	box-shadow: 0 0 0 100vmax var(--gc-band-bg, #F8F3EF);
	clip-path: inset(0 -100vmax);
	padding: var(--gc-band-pad, 48px) 0;
}
.aurelle-gc-v2 .aurelle-gc-send { padding: var(--gc-send-pad, 48px) 0 8px; }

.aurelle-gc-v2 .aurelle-gc-cols-card {
	grid-template-columns: minmax(0, var(--gc-card-col, 420px)) minmax(0, 1fr);
	gap: var(--gc-col-gap, 56px);
	/*
	 * Top, not centre. Centred, the preview moved down every time a
	 * design with more than one look opened "Choose a look" (and again
	 * for the card-message box), because the column beside it grew.
	 */
	align-items: start;
}
.aurelle-gc-v2 .aurelle-gc-cols-send {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--gc-order-col, 380px));
	gap: var(--gc-col-gap, 56px);
}

.aurelle-gc-v2 .aurelle-gc-show {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Stays in view while the longer choices beside it scroll past. */
	position: sticky;
	top: var(--gc-preview-top, 24px);
}
.aurelle-gc-v2 .aurelle-gc-preview { display: flex; justify-content: center; margin-bottom: 14px; }
.aurelle-gc-v2 .aurelle-gc-previewlink {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 22px;
	margin: 0;
}
.aurelle-gc-v2 .aurelle-gc-linky { font-size: var(--gc-link-size, 14px); min-height: 32px; color: var(--gc-accent, #AC717D); }

.aurelle-gc-kicker {
	font-size: var(--gc-kicker-size, 12px);
	font-weight: 600;
	letter-spacing: var(--gc-kicker-spacing, .14em);
	text-transform: uppercase;
	color: var(--gc-kicker-color, #8F5763);
	margin: 0 0 6px;
}
.aurelle-gc-v2 .aurelle-gc-h { font-family: var(--gc-heading-font, Georgia, 'Times New Roman', serif); }
.aurelle-gc-v2 .aurelle-gc-h.aurelle-gc-title { font-size: var(--gc-title-size, 28px); line-height: 1.2; margin: 0 0 18px; }
.aurelle-gc-sub-h { font-size: var(--gc-sub-size, 15px); font-weight: 600; margin: 22px 0 10px; }

/* Larger than the old side-column sizes: this is now the main column. */
.aurelle-gc-v2 .aurelle-gc-note { font-size: var(--gc-note-size, 13.5px); color: var(--gc-muted, #6E6167); }
.aurelle-gc-v2 .aurelle-gc-field > span { font-size: var(--gc-label-size, 13px); }
.aurelle-gc-v2 .aurelle-gc-field input,
.aurelle-gc-v2 .aurelle-gc-field textarea {
	border-color: var(--gc-field-border, rgba(196, 129, 142, .35));
	border-radius: var(--gc-field-radius, var(--gc-radius, 8px));
}

/* Amounts and designs: the same controls as before, their colours now
   read from the properties above. */
.aurelle-gc-v2 .aurelle-gc-amount {
	min-height: var(--gc-control-height, 44px);
	background: var(--gc-amount-bg, #fff);
	border-color: var(--gc-amount-border, rgba(196, 129, 142, .32));
	border-radius: var(--gc-amount-radius, var(--gc-radius, 8px));
	color: var(--gc-text, #453A40);
}
.aurelle-gc-v2 .aurelle-gc-amount:hover { border-color: var(--gc-amount-on-bg, #C4818E); }
.aurelle-gc-v2 .aurelle-gc-amount.is-sel {
	background: var(--gc-amount-on-bg, #C4818E);
	border-color: var(--gc-amount-on-bg, #C4818E);
	color: var(--gc-amount-on-text, #fff);
}
.aurelle-gc-v2 .aurelle-gc-design.is-sel { border-color: var(--gc-design-on, #C4818E); }

.aurelle-gc-v2 .aurelle-gc-btn {
	background: var(--gc-button-bg, #C4818E);
	border-color: var(--gc-button-bg, #C4818E);
	color: var(--gc-button-text, #fff);
}
.aurelle-gc-v2 .aurelle-gc-btn:hover,
.aurelle-gc-v2 .aurelle-gc-btn.aurelle-login-trigger:hover,
.aurelle-gc-v2 .aurelle-gc-btn.aurelle-login-trigger:focus {
	background: var(--gc-button-bg-hover, #AC717D);
	border-color: var(--gc-button-bg-hover, #AC717D);
	color: var(--gc-button-text, #fff);
}
.aurelle-gc-v2 .aurelle-gc-btn.aurelle-login-trigger {
	background: var(--gc-button-bg, #C4818E);
	border-color: var(--gc-button-bg, #C4818E);
	color: var(--gc-button-text, #fff);
}

/* Email it to them / Send it to me to give */
.aurelle-gc-sendto {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--gc-toggle-border, #D9CCD0);
	border-radius: var(--gc-toggle-radius, var(--gc-radius, 8px));
	margin: 0 0 16px;
}
/* The radio is invisible but still the control: it covers its label,
   so a click, a tap and the arrow keys all behave as a radio group. */
.aurelle-gc-sendopt { position: relative; display: block; cursor: pointer; }
.aurelle-gc-sendopt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.aurelle-gc-sendopt span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--gc-control-height, 44px);
	padding: 0 8px;
	border-radius: calc(var(--gc-toggle-radius, var(--gc-radius, 8px)) - 3px);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}
.aurelle-gc-sendopt input:checked + span {
	background: var(--gc-toggle-on-bg, #F7EFF1);
	box-shadow: inset 0 0 0 1px var(--gc-toggle-on-edge, rgba(172, 113, 125, .45));
}
.aurelle-gc-sendopt input:focus-visible + span { outline: 2px solid var(--gc-accent, #AC717D); outline-offset: 2px; }

.aurelle-gc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.aurelle-gc-v2.is-send-me .aurelle-gc-them { display: none; }

/* Your order */
.aurelle-gc-order {
	background: var(--gc-order-bg, #fff);
	border: 1px solid var(--gc-order-border, rgba(196, 129, 142, .3));
	border-radius: var(--gc-order-radius, 14px);
	padding: var(--gc-order-pad, 24px);
}
.aurelle-gc-summary { margin: 0 0 18px; }
.aurelle-gc-summary > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid var(--gc-line, rgba(196, 129, 142, .24));
	font-size: 14px;
}
.aurelle-gc-summary dt { color: var(--gc-muted, #6E6167); }
.aurelle-gc-summary dd { margin: 0; font-weight: 500; text-align: right; }
.aurelle-gc-summary .aurelle-gc-total { align-items: baseline; padding-top: 12px; }
.aurelle-gc-summary .aurelle-gc-total dt { color: var(--gc-text, #453A40); font-weight: 600; font-size: 16px; }
.aurelle-gc-summary .aurelle-gc-total dd {
	font-family: var(--gc-heading-font, Georgia, 'Times New Roman', serif);
	font-weight: 400;
	font-size: var(--gc-total-size, 21px);
}

/*
 * The Wallet pass preview, in the middle of the screen.
 *
 * margin: auto inside the dialog's flex backdrop centres the box both
 * ways, and unlike align-items: center it still scrolls from the top
 * when the box is taller than the window, instead of cutting it off.
 */
.aurelle-gc-walletmodal .aurelle-gc-modal-box {
	background: var(--gc-dialog-bg, #fff);
	max-width: var(--gc-dialog-max, 720px);
	margin: auto;
}
.aurelle-gc-walletbody {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	padding: 28px;
}
.aurelle-gc-walletcopy p { margin: 0 0 12px; line-height: 1.6; color: var(--gc-muted, #6E6167); }
.aurelle-gc-walletcopy .aurelle-gc-btn { display: inline-block; margin-top: 6px; font: inherit; font-weight: 600; }

/* 782px is WordPress's own breakpoint; custom properties cannot be used
   inside a media query, so this one number stays here. */
@media (max-width: 782px) {
	.aurelle-gc-v2 .aurelle-gc-band { padding: var(--gc-band-pad-mobile, 32px) 0; }
	.aurelle-gc-v2 .aurelle-gc-send { padding: var(--gc-send-pad-mobile, 32px) 0 8px; }
	.aurelle-gc-v2 .aurelle-gc-cols-card,
	.aurelle-gc-v2 .aurelle-gc-cols-send { grid-template-columns: minmax(0, 1fr); gap: var(--gc-col-gap-mobile, 28px); }
	.aurelle-gc-v2 .aurelle-gc-h.aurelle-gc-title { font-size: var(--gc-title-size-mobile, 24px); }
	.aurelle-gc-fields { grid-template-columns: minmax(0, 1fr); }
	.aurelle-gc-walletbody { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 22px 16px; }
	.aurelle-gc-v2 .aurelle-gc-show { position: static; }
}

/* On a phone the email dialog fills the screen; the pass is small
   enough to stay a box in the middle of it. */
@media (max-width: 560px) {
	.aurelle-gc-modal.aurelle-gc-walletmodal { padding: 16px; }
	.aurelle-gc-walletmodal .aurelle-gc-modal-box { min-height: 0; border-radius: 14px; }
}

/* ── Previews, closing, corners (2.60.0) ────────────────────────────
 *
 * Three previews under the card: the email, the printed card and the
 * Wallet pass. Each dialog closes with an X.
 *
 * The preview links and the X are <button>s, and the site's theme gives
 * every button a coloured background on hover. That is what turned the
 * whole link pink. These rules state the hover themselves, at a weight
 * a theme's "button:hover" rule does not reach, so a link stays a link.
 */

.aurelle-gc-v2 .aurelle-gc-previews {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.aurelle-gc-previews-h {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gc-muted, #6E6167);
}
.aurelle-gc-v2 .aurelle-gc-previewlink { gap: 0 24px; }

.aurelle-gc.aurelle-gc-v2 .aurelle-gc-prev,
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-prev:hover,
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-prev:focus,
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-prev:active {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	font-size: var(--gc-link-size, 14px);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	color: var(--gc-accent, #AC717D);
}
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-prev:hover,
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-prev:focus-visible {
	color: var(--gc-text, #453A40);
	text-decoration-thickness: 2px;
}
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-prev:focus-visible { outline: 2px solid var(--gc-accent, #AC717D); outline-offset: 3px; }
.aurelle-gc-ico { flex-shrink: 0; }

/* The dialogs: a title and an X */
.aurelle-gc-v2 .aurelle-gc-modal-top { padding: 10px 10px 10px 22px; gap: 16px; }
.aurelle-gc-v2 .aurelle-gc-modal-top strong {
	font-family: var(--gc-heading-font, Georgia, 'Times New Roman', serif);
	font-weight: 400;
	font-size: 20px;
}
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-x,
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-x:hover,
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-x:focus,
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-x:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--gc-field-border, rgba(196, 129, 142, .35));
	border-radius: var(--gc-button-radius, var(--gc-radius, 8px));
	box-shadow: none;
	color: var(--gc-text, #453A40);
	cursor: pointer;
}
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-x:hover,
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-x:focus-visible {
	border-color: var(--gc-accent, #AC717D);
	color: var(--gc-accent, #AC717D);
}
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-x:focus-visible { outline: 2px solid var(--gc-accent, #AC717D); outline-offset: 2px; }

/* The printed card, on a sheet of paper */
.aurelle-gc-printmodal .aurelle-gc-modal-body { padding: 24px; }
.aurelle-gc-printsheet {
	max-width: 520px;
	margin: 0 auto 14px;
	padding: 34px 40px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
/*
 * The card is drawn at a fixed size and scaled to fit by giftcard.js
 * (fitPrintedCard). Here it is only kept whole: not squeezed by the
 * shared ".aurelle-gc-cardbox > div { max-width: 100% }", which narrowed
 * the card without shortening it, and centred over the lines below it.
 */
.aurelle-gc-printsheet .aurelle-gc-cardbox {
	width: 100%;
	max-width: 420px;
	margin: 0 auto 18px;
	overflow: hidden;
}
.aurelle-gc-printsheet .aurelle-gc-cardbox > div {
	max-width: none;
	transform-origin: 0 0;
}
.aurelle-gc-printsheet img { max-width: 100%; height: auto; }

/* In the middle of the screen, like the Wallet pass. margin: auto still
   scrolls from the top when the sheet is taller than the window. */
.aurelle-gc-printmodal .aurelle-gc-modal-box { margin: auto; }

/* Square with rounded corners, instead of pills */
.aurelle-gc-v2 .aurelle-gc-btn,
.aurelle-gc-v2 .aurelle-gc-btn.aurelle-login-trigger {
	border-radius: var(--gc-button-radius, var(--gc-radius, 8px));
}

@media (max-width: 560px) {
	.aurelle-gc-modal.aurelle-gc-printmodal { padding: 16px; }
	.aurelle-gc-printmodal .aurelle-gc-modal-box { min-height: 0; border-radius: 14px; }
	.aurelle-gc-printmodal .aurelle-gc-modal-body { padding: 16px; }
	.aurelle-gc-printsheet { padding: 24px 18px; }
	.aurelle-gc-v2 .aurelle-gc-previewlink { gap: 0 18px; }
}

/* The email preview is a frame of its own (giftcard.js, showEmail()),
   sized by script to the email's height. */
.aurelle-gc-emailframe {
	display: block;
	width: 100%;
	min-height: 240px;
	border: 0;
	background: #f4f4f4;
}
.aurelle-gc-emailmodal .aurelle-gc-modal-body { padding: 0; }

/* ── Stripe checkout, 2.70.0: the PayPal column's shape ─────────────
 *
 * Apple Pay, Google Pay and Link one per row (Stripe draws them);
 * "Pay over time" with Klarna (Stripe's) and Affirm (ours) side by side;
 * "or"; then "Debit or credit card", which opens the card form in a
 * dialog. Every row is hidden until Stripe says the buyer can use it.
 */
.aurelle-gc-swallet { margin: 0 0 10px; }
.aurelle-gc-swallet[hidden] { display: none; }

.aurelle-gc-later { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0; }
.aurelle-gc-later[hidden] { display: none; }
.aurelle-gc-later-h {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6E6167;
}
.aurelle-gc-later-row { display: flex; gap: 10px; }
.aurelle-gc-later-row > * { flex: 1 1 0; min-width: 0; }
.aurelle-gc-later-row > [hidden] { display: none; }
.aurelle-gc-later-note { margin: 0; text-align: center; font-size: 12px; color: #6E6167; }

/* Affirm's button is ours (Stripe has no Affirm wallet button), drawn
   in Affirm's colors at the height of the rest. */
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-affirm,
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-affirm:hover,
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-affirm:focus {
	height: 44px;
	border: 0;
	border-radius: var(--gc-radius, 8px);
	background: #4A4AF4;
	color: #ffffff;
	font: 700 16px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	letter-spacing: -.01em;
	cursor: pointer;
	padding: 0 12px;
}
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-affirm:hover { background: #3434D9; }
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-affirm:focus-visible { outline: 3px solid rgba(74, 74, 244, .35); outline-offset: 2px; }
.aurelle-gc-affirm[hidden] { display: none; }
.aurelle-gc-klarna { min-height: 44px; }

/* The card button: dark, full width, the card icon before the words. */
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-cardbtn,
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-cardbtn:hover,
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-cardbtn:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 44px;
	border: 0;
	border-radius: var(--gc-radius, 8px);
	background: #2F2A2D;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-cardbtn:hover { background: #453A40; }
.aurelle-gc.aurelle-gc-v2 .aurelle-gc-cardbtn[disabled] { opacity: .55; cursor: default; }

/* The small lock before "Payments are processed securely by…". */
.aurelle-gc-secure { display: flex; align-items: center; justify-content: center; gap: 6px; }
.aurelle-gc-secure svg { flex-shrink: 0; }

/* The card dialog: centred on a desktop, a sheet from the bottom on a
   phone. The Pay button carries the lock and the amount. */
.aurelle-gc-cardmodal .aurelle-gc-modal-box { margin: auto; max-width: 480px; }
.aurelle-gc-cardhead { display: flex; flex-direction: column; gap: 2px; }
.aurelle-gc-cardhead strong { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 20px; color: #453A40; }
.aurelle-gc-cardsum { font-size: 13px; color: #6E6167; }
.aurelle-gc-cardform { min-height: 180px; margin: 0 0 16px; }
.aurelle-gc-carderr { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: rgba(163, 45, 45, .08); color: #791F1F; font-size: 13.5px; }
.aurelle-gc-carderr[hidden] { display: none; }
.aurelle-gc-cardmodal .aurelle-gc-stripe-pay { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; margin: 0 0 10px; }
@media (max-width: 560px) {
	.aurelle-gc-modal.aurelle-gc-cardmodal { padding: 0; align-items: flex-end; }
	.aurelle-gc-cardmodal .aurelle-gc-modal-box { margin: auto 0 0; min-height: 0; border-radius: 16px 16px 0 0; max-width: none; width: 100%; }
}