/* Gift certificate buyer configurator. Scoped under .me-gc-config so it does not
   leak into the Themeco theme's own form styles. Brand tokens (pink / greys /
   tint, Quicksand + Open Sans) mirror me-shared.css so the configurator matches
   the rest of the Malka Ella plugin UI; fallbacks keep it styled even if the
   shared sheet is not present. Input/label rules carry .x-col / .x-row variants
   so they out-specify the X/Pro theme's own form-control styles. */

.me-gc-config {
	--me-gc-pink: var(--me-pink, #BE5B8F);
	--me-gc-pink-accessible: var(--me-pink-accessible, #8E2F63);
	--me-gc-grey: var(--me-grey, #706F6F);
	--me-gc-grey-light: var(--me-grey-light, #9D9D9C);
	--me-gc-tint: var(--me-pink-tint, #f7ecf3);
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: flex-start;
	margin: 1.25rem 0;
}

.me-gc-fields {
	flex: 1 1 360px;
	min-width: 0;
}

.me-gc-config .me-gc-field {
	margin: 0 0 1.25rem;
}

.me-gc-config label {
	display: block;
}

/* --- Field labels (brand: Quicksand caps in accessible pink) ------------- */
.me-gc-config .me-gc-field > label > strong,
.me-gc-config .me-gc-amount-label > strong,
.me-gc-config .me-gc-preview-title,
.x-col .me-gc-config .me-gc-field > label > strong,
.x-col .me-gc-config .me-gc-amount-label > strong,
.x-col .me-gc-config .me-gc-preview-title {
	display: block;
	margin-bottom: 8px;
	font-family: "Quicksand", "Poppins", Arial, sans-serif;
	color: var(--me-ink, #000000);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
}

/* --- Inputs (brand: underline field, Open Sans, grey) ------------------- */
.me-gc-config .me-gc-input,
.x-col .me-gc-config .me-gc-input,
.x-row .me-gc-config .me-gc-input {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 10px 4px 8px;
	border: 0;
	border-bottom: 2px solid var(--me-gc-grey-light);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: "Open Sans", "Poppins", Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: var(--me-gc-grey);
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}

.me-gc-config textarea.me-gc-input,
.x-col .me-gc-config textarea.me-gc-input {
	resize: vertical;
	min-height: 4.5rem;
}

.me-gc-config .me-gc-input:focus,
.x-col .me-gc-config .me-gc-input:focus,
.x-row .me-gc-config .me-gc-input:focus {
	border-bottom-color: var(--me-ink, #000000);
	outline: none;
}

.me-gc-config .me-gc-input:focus-visible,
.x-col .me-gc-config .me-gc-input:focus-visible {
	outline: 2px solid var(--me-auction-blue, #38519b);
	outline-offset: 2px;
}

/* A11Y-6: --me-grey-light on white is 2.71:1 and fails 1.4.3. The repeater's
   placeholders were the only identification those fields had. */
.me-gc-config .me-gc-input::placeholder {
	color: var(--me-gc-grey);
}

/* A11Y-6: the repeater's per-control labels. Visible to assistive tech, not on
   screen — the row grid stays as designed. */
.me-gc-config .me-gc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Selects use the same neutral form chrome as the rest of the site. */
.me-gc-config select.me-gc-input,
.x-col .me-gc-config select.me-gc-input {
	cursor: pointer;
	padding-right: 28px;
	background-image: linear-gradient(45deg, transparent 50%, var(--me-gc-grey) 50%), linear-gradient(135deg, var(--me-gc-grey) 50%, transparent 50%);
	background-position: calc(100% - 16px) calc(50% + 2px), calc(100% - 11px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* --- Design choice ------------------------------------------------------- */
.me-gc-styles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 0.75rem;
	margin: 0 0 1.5rem;
}

.me-gc-config .me-gc-style {
	position: relative;
	border: 2px solid var(--me-gc-grey-light);
	border-radius: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.me-gc-config .me-gc-style.is-selected {
	border-color: var(--me-gc-grey);
	box-shadow: 0 0 0 1px var(--me-gc-grey);
}

.me-gc-config .me-gc-style-pick {
	display: block;
	margin: 0;
	padding: 0.5rem;
	cursor: pointer;
	text-align: center;
}

.me-gc-config .me-gc-style-pick input {
	position: absolute;
	top: 0.4rem;
	left: 0.4rem;
	margin: 0;
	accent-color: var(--me-ink, #000000);
}

.me-gc-style-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.me-gc-style-name {
	display: block;
	margin-top: 0.35rem;
	font-family: "Quicksand", "Poppins", Arial, sans-serif;
	font-weight: 600;
	font-size: 0.9em;
	line-height: 1.2;
	color: var(--me-gc-grey);
}

.me-gc-zoom {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--me-ink, #000000);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.me-gc-zoom:hover {
	background: #fff;
	color: var(--me-ink-hover, #6C6C6C);
}

/* A11Y-15: the zoom button sits on a photograph, so the UA's own focus ring is
   unreliable. Double it up with a light halo. */
.me-gc-config .me-gc-zoom:focus-visible {
	outline: 3px solid var(--me-auction-blue, #38519b);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

/* --- Mode switch --------------------------------------------------------- */
/* USE-21: hidden until the configurator JS unhides it — bulk mode is entirely
   JS-driven, and .me-gc-mode-switch's own display would otherwise beat [hidden]. */
.me-gc-mode-switch[hidden] {
	display: none;
}

.me-gc-mode-switch {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--me-gc-grey-light);
	border-radius: 10px;
	background: var(--me-grey-tint, #F2F2F2);
}

.me-gc-switch-text {
	font-family: "Quicksand", "Poppins", Arial, sans-serif;
	font-weight: 700;
	color: var(--me-ink, #000000);
}

.me-gc-switch {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 46px;
	height: 26px;
	margin-left: auto;
}

.me-gc-switch input {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	z-index: 2;
}

.me-gc-switch-track {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--me-gc-grey-light);
	border-radius: 26px;
	transition: background 0.2s ease;
}

.me-gc-switch-track::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s ease;
}

.me-gc-switch input:checked + .me-gc-switch-track {
	background: var(--me-ink, #000000);
}

.me-gc-switch input:checked + .me-gc-switch-track::before {
	transform: translateX(20px);
}

.me-gc-switch input:focus-visible + .me-gc-switch-track {
	box-shadow: 0 0 0 3px rgba(56, 81, 155, 0.35);
}

/* --- Amount ------------------------------------------------------------- */
/* USE-21: the server-rendered tier <select> is the working no-JS control; the
   slider block replaces it once the configurator initialises. */
.me-gc-amount {
	margin: 0 0 1.5rem;
}

.me-gc-amount-fallback[hidden],
.me-gc-amount-enhanced[hidden] {
	display: none;
}

.me-gc-config .me-gc-amount-select {
	max-width: 22rem;
}

.me-gc-amount-label {
	display: block;
	margin-bottom: 0.5rem;
}

.me-gc-slider {
	width: 100%;
	max-width: none;
	-webkit-appearance: none;
	appearance: none;
	height: 6px;
	border-radius: 3px;
	background: var(--me-grey-tint, #F2F2F2);
	outline: none;
}

.me-gc-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--me-ink, #000000);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.me-gc-slider::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--me-ink, #000000);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.me-gc-amount-display {
	margin-top: 0.6rem;
	font-family: "Quicksand", "Poppins", Arial, sans-serif;
	font-size: 1.15em;
	color: var(--me-gc-grey);
}

.me-gc-amount-display strong {
	color: var(--me-ink, #000000);
}

.me-gc-config .me-gc-price-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.85rem;
	font-family: "Open Sans", "Poppins", Arial, sans-serif;
	font-size: 0.95em;
	color: var(--me-gc-grey);
	cursor: pointer;
}

.me-gc-config .me-gc-price-toggle input {
	width: auto;
	margin: 0;
	accent-color: var(--me-ink, #000000);
}

.me-gc-per-cert {
	font-style: italic;
	font-size: 0.85em;
	color: var(--me-gc-grey);
}

.me-gc-multiple-total {
	margin-top: 1rem;
	font-family: "Quicksand", "Poppins", Arial, sans-serif;
	color: var(--me-gc-grey);
}

.me-gc-multiple-total:empty {
	margin-top: 0;
}

.me-gc-multiple-total strong {
	color: var(--me-ink, #000000);
	font-size: 1.1em;
}

/* --- Repeater (full-width row on desktop) -------------------------------- */
.me-gc-multiple {
	flex: 1 1 100%;
	width: 100%;
	margin: 0;
	padding: 1.25rem;
	border: 1px solid var(--me-gc-grey-light);
	border-radius: 10px;
	background: var(--me-grey-tint, #F2F2F2);
}

.me-gc-multiple .description {
	margin: 0 0 1rem;
	font-family: "Open Sans", "Poppins", Arial, sans-serif;
	color: var(--me-gc-grey);
}

.me-gc-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr auto auto;
	gap: 0.75rem;
	align-items: center;
	margin: 0 0 0.75rem;
}

/* A11Y-6: each control is wrapped with its visually-hidden label, so the cell —
   not the control — is the grid item. */
.me-gc-row-cell {
	min-width: 0;
}

.me-gc-row .me-gc-input {
	width: 100%;
	max-width: none;
	background: #fff;
	padding: 8px 10px;
	border: 1px solid var(--me-gc-grey-light);
	border-radius: 6px;
}

.me-gc-row .me-gc-input:focus {
	border-color: var(--me-auction-blue, #38519b);
}

.me-gc-remove-row {
	color: var(--me-ink, #000000);
	white-space: nowrap;
	font-family: "Quicksand", "Poppins", Arial, sans-serif;
	font-weight: 600;
}

.me-gc-remove-row:hover {
	color: var(--me-ink-hover, #6C6C6C);
}

.me-gc-config .me-gc-add-row {
	margin-top: 0.25rem;
	font-family: "Quicksand", "Poppins", Arial, sans-serif;
	font-weight: 700;
}

/* A11Y-15: neither repeater control had an author focus style, and both sit on
   the pink tint where the UA default is hard to see. */
.me-gc-config .me-gc-add-row:focus-visible,
.me-gc-config .me-gc-remove-row:focus-visible {
	outline: 3px solid var(--me-auction-blue, #38519b);
	outline-offset: 2px;
}

/* --- Submit -------------------------------------------------------------- */
/* Scoped to the configurator so the neutral button treatment does not leak
   into unrelated WooCommerce or Cornerstone controls. */
.me-gc-config .button,
.me-gc-config button[type="submit"],
.me-gc-submit,
.me-gc-add-row {
	border-color: var(--me-ink, #000000);
	background: var(--me-ink, #000000);
	color: #fff;
	text-shadow: none;
	box-shadow: none;
}

.me-gc-config .button:hover,
.me-gc-config button[type="submit"]:hover,
.me-gc-submit:hover,
.me-gc-add-row:hover {
	border-color: var(--me-ink-hover, #6C6C6C);
	background: var(--me-ink-hover, #6C6C6C);
	color: #fff;
}

.me-gc-submit {
	margin-top: 0.5rem;
	font-family: "Quicksand", "Poppins", Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* --- Live preview -------------------------------------------------------- */
/* USE-21: drawn entirely by JS — without it, an empty white A4 rectangle. */
.me-gc-preview[hidden] {
	display: none;
}

.me-gc-preview {
	flex: 1 1 280px;
	min-width: 0;
	margin: 0;
	position: sticky;
	top: 1rem;
}

.me-gc-preview-title {
	display: block;
	margin-bottom: 0.5rem;
	text-align: center;
}

.me-gc-preview-stage {
	position: relative;
	width: 100%;
	max-width: 340px;
	margin: 0 auto;
	aspect-ratio: 210 / 297;
	background: #fff;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

.me-gc-preview-stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.me-gc-preview-zone {
	position: absolute;
	overflow-wrap: break-word;
	pointer-events: none;
}

/* --- Zoom modal ---------------------------------------------------------- */
.me-gc-modal[hidden] {
	display: none;
}

.me-gc-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(0, 0, 0, 0.8);
}

.me-gc-modal img {
	max-width: 100%;
	max-height: 100%;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.me-gc-modal-close {
	position: absolute;
	top: 1rem;
	right: 1.5rem;
	padding: 0;
	font-size: 2.25rem;
	line-height: 1;
	color: #fff;
	background: none;
	border: none;
	cursor: pointer;
}

/* A11Y-15: white, because the modal backdrop is rgba(0,0,0,0.8) and the UA ring
   is a dark outline there in Firefox/Safari. */
.me-gc-modal .me-gc-modal-close:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	border-radius: 4px;
}

body.me-gc-modal-open {
	overflow: hidden;
}

/* --- AJAX add-to-cart notices + button state ----------------------------- */
/* A11Y-19: the region is permanent and is never `hidden` — a role="alert"
   populated while hidden is not announced. Collapse it while it is empty
   instead, which leaves it in the accessibility tree. */
.me-gc-ajax-notices:empty {
	display: none;
}

.me-gc-ajax-notices {
	margin: 0 0 1rem;
}

/* A11Y-19: showErrors() moves focus here (tabindex="-1"), so it needs a ring. */
.me-gc-ajax-notices:focus-visible {
	outline: 3px solid #b3261e;
	outline-offset: 2px;
}

.me-gc-ajax-action {
	margin: 0 0 0.5rem;
}

.me-gc-basket-link {
	font-family: "Open Sans", "Poppins", Arial, sans-serif;
	font-weight: 600;
	color: var(--me-ink, #000000);
}

.me-gc-basket-link:hover {
	color: var(--me-ink-hover, #6C6C6C);
}

.me-gc-ajax-error {
	margin: 0 0 0.5rem;
	padding: 0.6rem 0.85rem;
	border-left: 3px solid #b3261e;
	border-radius: 4px;
	background: #fdecea;
	color: #8a1c14;
	font-family: "Open Sans", "Poppins", Arial, sans-serif;
	font-size: 0.95em;
}

.me-gc-form .me-gc-submit.is-loading {
	opacity: 0.65;
	cursor: progress;
}

.me-gc-unavailable {
	padding: 0.75rem 1rem;
	background: var(--me-pink-tint, #f7ecf3);
	border-radius: 8px;
	font-family: "Open Sans", "Poppins", Arial, sans-serif;
	color: var(--me-grey, #706F6F);
}

/* USE-24: editor-only misconfiguration hint (never rendered for visitors). */
.me-gc-editor-hint {
	margin: 0.75rem 0;
	padding: 0.75rem 1rem;
	border-left: 4px solid #8E2F63;
	background: #fdf6fa;
	font-family: "Open Sans", "Poppins", Arial, sans-serif;
	font-size: 0.95em;
	color: var(--me-grey, #706F6F);
}

/* USE-21: the no-JS explanation. */
.me-gc-noscript {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--me-grey, #706F6F);
	background: #f4f4f4;
	font-family: "Open Sans", "Poppins", Arial, sans-serif;
	font-size: 0.95em;
	color: var(--me-grey, #706F6F);
}

@media (max-width: 782px) {
	.me-gc-preview {
		position: static;
	}
}

@media (max-width: 600px) {
	.me-gc-row {
		grid-template-columns: 1fr;
	}
}

/* A11Y-13: the design-card border, the switch track and the 20px knob translate
   are all decorative. Honour the OS setting, as faq.css and product-gallery.css
   already do. */
@media (prefers-reduced-motion: reduce) {
	.me-gc-config .me-gc-style,
	.me-gc-switch-track,
	.me-gc-switch-track::before,
	.me-gc-config .me-gc-input {
		transition: none;
	}
}