/* The two-pane builder around the card. Card styling lives in card.css. */

.me-gc {
	--gc-deep: #7A1020;
	--gc-cta: #6B1020;
	--gc-line: #DED5CF;
	--gc-muted: #8C807A;
	--gc-help: #A79C96;
	--gc-field-bg: #FCFAF9;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	color: #241C19;
	background: #F4EFEB;
}

.me-gc__notice {
	margin: 0;
	padding: 10px 16px;
	background: #FFF8E1;
	border-bottom: 1px solid #F0D98A;
	font-size: 13px;
	color: #7A5B00;
	text-align: center;
}

.me-gc__layout {
	display: grid;
	grid-template-columns: 1fr 420px;
	min-height: 100vh;
}

/*
 * The builder is dropped into someone else's page, and a child that is wider than the screen
 * does not just look wrong — it drags the whole document sideways, header and all. Nothing in
 * here is allowed to do that.
 */
.me-gc,
.me-gc__layout {
	max-width: 100%;
	overflow-x: clip;
}

/* --- Stage ---------------------------------------------------------------------------- */

.me-gc__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 48px 40px 64px;

	/*
	 * How wide the preview gets.
	 *
	 * It used to be a flat pixel cap, which was wrong in both directions: a landscape card left
	 * half a wide screen empty, and a portrait one would have run off the bottom if the cap had
	 * been raised. What has to stay in view is the card's *height*, so that is what is limited
	 * here; the width follows from the design's own proportions.
	 *
	 * --gc-ar (width ÷ height) is set on the element by PHP and updated by the JS when the
	 * customer switches design, because only the server knows how big each design's page is.
	 */
	--gc-stage-h: 78vh;
	/*
	 * max(656px, …) keeps the size this used to be as a floor, so a portrait card never comes out
	 * smaller than it was; the height rule only ever lets a card grow. 1100px is where growing
	 * stops being useful — past that the text is larger on screen than it will ever print.
	 */
	--gc-stage-w: min(100%, 1100px, max(656px, calc(var(--gc-stage-h) * var(--gc-ar, 0.6667))));
}

.me-gc__stage-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	width: var(--gc-stage-w);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gc-muted);
}

.me-gc__rule {
	flex: 1;
	height: 1px;
	background: var(--gc-line);
}

.me-gc__hint {
	width: var(--gc-stage-w);
	margin: 0;
	font-size: 12px;
	color: var(--gc-muted);
}

/* --- Panel ---------------------------------------------------------------------------- */

.me-gc__panel {
	background: #FFFFFF;
	border-left: 1px solid #E6DDD7;
	padding: 40px 36px 56px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.me-gc__panel-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.me-gc__brand {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #B08B3E;
}

.me-gc__title {
	font-family: 'Playfair Display', serif !important;
	font-size: 30px;
	line-height: 1.1;
}

/* --- The introduction ------------------------------------------------------------------- */

/*
 * The first screen: what buying a gift card involves, before any of it is asked for.
 *
 * It gets more room than a step does, because it is the one screen nobody arrived intending to
 * read — it has to be worth the two seconds before the customer presses Alusta.
 */
.me-gc__pane--intro {
	gap: 22px;
}

.me-gc__intro-lead {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #4E453F;
}

.me-gc__intro {
	list-style: none;
	margin: 0;
	padding: 0;
}

.me-gc__intro-step {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 2px;
	font-size: 15px;
	line-height: 1.4;
	color: #241C19;
}

/*
 * The rule goes above each step rather than below, so a step this design has not got takes its
 * own line away with it: hidden or not it still counts as the sibling, so the step after it
 * keeps its rule and the first visible one never has one.
 */
.me-gc__intro-step + .me-gc__intro-step {
	border-top: 1px solid var(--gc-line);
}

.me-gc__intro-n {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--gc-deep);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.me-gc__intro-what {
	font-weight: 500;
}

/* A step some designs ask for and others do not — said, rather than quietly left out. */
.me-gc__intro-opt {
	margin-left: 6px;
	font-size: 12px;
	font-weight: 400;
	font-style: italic;
	color: var(--gc-muted);
	white-space: nowrap;
}

.me-gc__intro-step.is-hidden,
.me-gc__intro.is-hidden {
	display: none;
}

/* No tabs while the customer is still being introduced — see showStep(). */
.me-gc__steps.is-hidden {
	display: none;
}

.me-gc__steps {
	display: flex;
	align-items: center;
	gap: 10px;
}

/*
 * A design with nothing for the customer to type has one step, and one step is not a sequence.
 * Numbered tabs with nowhere to go read as a step that failed to load.
 */
.me-gc.is-single-step .me-gc__steps {
	display: none;
}

.me-gc__step {
	border: none;
	background: none;
	padding: 0 0 3px;
	cursor: pointer;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #B3A9A2;
	border-bottom: 1px solid transparent;
}

.me-gc__step.is-active {
	color: var(--gc-deep);
	border-bottom-color: var(--gc-deep);
}

.me-gc__pane {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.me-gc__pane.is-hidden {
	display: none;
}

.me-gc__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.me-gc__label {
	font-size: 12px;
	color: #6B605B;
}

.me-gc__help {
	font-size: 11px;
	color: var(--gc-help);
	line-height: 1.5;
}

.me-gc input[type="text"],
.me-gc input[type="email"],
.me-gc input[type="date"],
.me-gc textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--gc-line);
	border-radius: 3px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit !important;
	color: #241C19;
	background: var(--gc-field-bg);
}

.me-gc input:focus,
.me-gc textarea:focus {
	outline: none;
	border-color: var(--gc-deep);
}

/* A message box. Resizable vertically only — sideways would break the panel's column. */
.me-gc__textarea {
	min-height: 84px;
	resize: vertical;
	line-height: 1.45;
}

.me-gc__input--display {
	font-family: 'Playfair Display', serif !important;
	font-size: 20px !important;
}

.me-gc__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.me-gc__chip {
	border: 1px solid var(--gc-line);
	background: var(--gc-field-bg);
	color: #241C19;
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 12px;
	cursor: pointer;
}

.me-gc__chip.is-on {
	border-color: var(--gc-deep);
	background: #FBF3F2;
	color: var(--gc-deep);
	font-weight: 600;
}

.me-gc__amount {
	border: 1px solid var(--gc-line);
	background: var(--gc-field-bg);
	color: #241C19;
	border-radius: 3px;
	padding: 12px 18px;
	font-size: 15px;
	font-weight: 500;
	min-width: 72px;
	cursor: pointer;
}

.me-gc__amount.is-on {
	border-color: var(--gc-deep);
	background: var(--gc-deep);
	color: #FDF8F5;
}

/*
 * A value of their own, sitting under the offered ones. Narrow on purpose: it holds a number of
 * three or four digits, and a full-width box invites a sentence.
 */
.me-gc__amount-own {
	display: flex;
	flex-direction: column;
	gap: 3px;
	max-width: 160px;
}

.me-gc .me-gc__amount-own input[type="number"] {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--gc-line);
	border-radius: 3px;
	padding: 10px 12px;
	font-size: 15px;
	font-family: inherit !important;
	color: #241C19;
	background: var(--gc-field-bg);
}

/* Out of range, or half-typed. The card keeps the last value that was real. */
.me-gc .me-gc__amount-own input.is-bad {
	border-color: #D63638;
	background: #FCF0F1;
}

.me-gc__toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 1px solid #EDE5E0;
	border-radius: 3px;
	padding: 12px 14px;
	background: var(--gc-field-bg);
	font-size: 13px;
}

.me-gc__toggle {
	width: 38px;
	height: 22px;
	border: none;
	border-radius: 999px;
	padding: 3px;
	display: flex;
	justify-content: flex-start;
	background: var(--gc-line);
	cursor: pointer;
}

.me-gc__toggle.is-on {
	justify-content: flex-end;
	background: var(--gc-deep);
}

.me-gc__toggle-knob {
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: #FFFFFF;
	display: block;
}

.me-gc__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.me-gc__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-top: 1px solid #E6DDD7;
	padding-top: 20px;
}

.me-gc__total-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 13px;
	color: #6B605B;
}

.me-gc__total-row strong {
	font-size: 24px;
	font-weight: 500;
	color: #241C19;
}

.me-gc__cta {
	border: none;
	border-radius: 3px;
	background: var(--gc-cta);
	color: #FDF8F5;
	padding: 15px 20px;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.me-gc__cta:hover {
	background: #85162A;
}

.me-gc__cta.is-disabled,
.me-gc__cta[disabled] {
	background: #D8CFC9;
	color: var(--gc-muted);
	cursor: not-allowed;
}

@media (max-width: 900px) {
	.me-gc__layout {
		grid-template-columns: 1fr;
	}

	/*
	 * A grid item is `min-width: auto` by default, which means it refuses to be narrower than its
	 * own content. The stage's children are sized from --gc-stage-w, and that carries a 656px
	 * floor, so on a phone the column stood its ground at 656px and the card hung off the side of
	 * the screen. Letting the items shrink is half the fix; dropping the floor below is the rest.
	 */
	.me-gc__layout > * {
		min-width: 0;
	}

	.me-gc__panel {
		border-left: none;
		border-top: 1px solid #E6DDD7;
	}

	/*
	 * The floor exists so a card on a desktop never comes out smaller than it used to be. On a
	 * phone there is no room to be generous with: the card is as wide as the screen allows and
	 * not one pixel more, or it takes the whole page sideways with it.
	 */
	.me-gc__stage {
		--gc-stage-w: 100%;
		padding: 28px 16px 36px;
	}
}

/*
 * A note inside the form, not a banner across the top: it belongs to the fields under it, so it
 * sits in the panel's own rhythm rather than shouting above the whole builder.
 */
.me-gc__note.is-hidden {
	display: none;
}

.me-gc__note {
	margin: 0;
	padding: 10px 12px;
	border-left: 2px solid var(--gc-line);
	background: var(--gc-field-bg);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gc-muted);
}

.me-gc__notice--warn {
	background: #FCF0F1;
	border-bottom-color: #D63638;
	color: #8A2224;
}

/*
 * The theme puts a 20px margin on form controls. This layout spaces things with flex `gap`, so
 * the theme margin is added on top of it and every gap comes out roughly double. Zero it and let
 * the gap do the spacing on its own.
 */
.me-gc input,
.me-gc textarea,
.me-gc select,
.me-gc button,
.me-gc label,
.me-gc p {
	margin: 0 !important;
}

/* --- Design picker ------------------------------------------------------------------------
 *
 * A vertical strip of artwork thumbnails beside the card. It scrolls on its own rather than
 * growing the page, so the card stays put while you browse designs — the whole point is
 * comparing them against the preview.
 */

.me-gc__stage-row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: var(--gc-stage-w);
}

.me-gc__stage-row .me-gc-card {
	flex: 1;
	min-width: 0;
}

/* The server is drawing the new design. Dim rather than blank: the old card is still the honest
   answer until the new one arrives, and a hole in the page is more alarming than a pause. */
.me-gc-card.is-loading {
	opacity: 0.55;
	transition: opacity 0.12s ease;
}

/*
 * The design picker, a step of the form now rather than a strip beside the card.
 *
 * auto-fill with a minimum keeps it one row in a wide panel and reflows to two or three in a
 * narrow one, without a breakpoint deciding how many designs the salon is allowed to have.
 */
.me-gc__designs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
	gap: 10px;
	padding: 2px;
}

/*
 * Every tile is the same box, whatever shape the design is.
 *
 * The tiles used to take their own design's proportions, which is right beside a card and wrong
 * in a grid: one portrait design among five landscape ones made its whole row twice as tall, and
 * the landscape card next to it floated in the empty half with no idea why. 3:2 is the shape five
 * of the six already are, so they fill their tile exactly and the portrait one is centred in it.
 */
.me-gc__design {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 3 / 2;
	padding: 4px;
	border: 1px solid var(--gc-line);
	border-radius: 3px;
	background: #FFFFFF;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.me-gc__design:hover {
	border-color: #B08B3E;
}

.me-gc__design.is-on {
	border-color: var(--gc-deep);
	box-shadow: 0 0 0 2px rgba(122, 16, 32, 0.25);
}

/*
 * `contain`, never `cover`: this is a picker, and a cropped gift card is a gift card whose
 * wording has been cut off — which is the one thing it must not show.
 */
.me-gc__design-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (max-width: 700px) {
	/* 36px of padding each side is a sixth of a phone screen. */
	.me-gc__panel {
		padding: 28px 16px 40px;
		gap: 24px;
	}

	/*
	 * Two columns for "Saaja" and "Kellelt" leaves each about 140px, which is narrower than the
	 * names that go in them. They stack.
	 */
	.me-gc__grid {
		grid-template-columns: 1fr;
	}
}

/* Occasions this design does not offer. Rendered but hidden, so switching design is instant. */
.me-gc__chip.is-hidden {
	display: none;
}

/* A step this design does not have — a design with no wording has nothing to write. */
.me-gc__step.is-hidden {
	display: none;
}

/*
 * The step's number, counted from the steps actually on screen rather than written into the
 * label. The separator belongs to it: a hidden step takes its own dot away with it.
 */
.me-gc__step-n::after {
	content: "·";
	margin: 0 0.35em;
}

/* Secondary action — the PDF test sits under the disabled pay button, so it must not compete. */
.me-gc__cta--ghost {
	background: transparent;
	color: var(--gc-deep);
	border: 1px solid var(--gc-line);
}

.me-gc__cta--ghost:hover {
	background: #FBF3F2;
	border-color: var(--gc-deep);
	color: var(--gc-deep);
}

/* A field the chosen design does not use. */
.me-gc__field.is-hidden {
	display: none;
}

/* --- Paying, without leaving the card ------------------------------------------------------ */

.me-gc__trouble {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-left: 3px solid #b21017;
	background: rgba(178, 16, 23, 0.06);
	font-size: 13px;
	color: #7a1020;
}

.me-gc__pay {
	margin: 0 0 16px;
}

.me-gc__method {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	margin-bottom: 10px;
	cursor: pointer;
}

/* A choice has to look like one: the theme strips accent-color off inputs. */
.me-gc__method input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: #b21017;
	cursor: pointer;
}

.me-gc__method.is-on span {
	font-weight: 600;
}

/* With one way to pay there is no choice to present, only a heading. */
.me-gc__method.is-only input {
	display: none;
}

.me-gc__method-fields {
	font-size: 13px;
}

/* The unchosen gateway's fields stay in the page so its own script can wire them up. */
.me-gc__method-fields.is-hidden {
	display: none;
}

.me-gc__method-fields p {
	margin: 0 0 8px;
}