/* First Glance Personalize — front-end
   Themed to inherit Ahava tokens (--ahv-*) when present, with brand-safe
   fallbacks so the panel looks right on any store. CSS only; no gradients,
   no glassmorphism; thin gold accents on warm neutrals. */

.fgpz-panel {
	--fgpz-ivory:   var(--ahv-ivory, #F8F4ED);
	--fgpz-pearl:   var(--ahv-pearl, #FBF8F1);
	--fgpz-cream:   var(--ahv-cream, #EFE7D8);
	--fgpz-linen:   var(--ahv-linen, #E6DCC6);
	--fgpz-mist:    var(--ahv-mist, #8A7A66);
	--fgpz-ink:     var(--ahv-ink, #3B2E22);
	--fgpz-espresso:var(--ahv-espresso, #2A1F18);
	--fgpz-accent:  var(--ahv-gold, #C79306);
	--fgpz-accent-deep: var(--ahv-gold-deep, #9A7410);
	--fgpz-wash:    var(--ahv-gold-wash, #F2E9D2);
	--fgpz-radius:  var(--ahv-radius, 2px);
	--fgpz-radius-l: var(--ahv-radius-l, 14px);
	--fgpz-ease:    var(--ahv-ease, cubic-bezier(.16,1,.3,1));

	margin: 1.75rem 0;
	padding: 1.6rem 1.5rem;
	background: var(--fgpz-pearl);
	border: 1px solid var(--fgpz-linen);
	border-radius: var(--fgpz-radius-l);
	box-shadow: var(--ahv-shadow-soft, 0 6px 24px -8px rgba(42,31,24,.14));
	font-family: var(--ahv-font-secondary, 'DM Sans', Helvetica, Arial, sans-serif);
	color: var(--fgpz-ink);
}

/* head ------------------------------------------------------------------ */
.fgpz-eyebrow {
	display: inline-block;
	font-size: .7rem;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--fgpz-accent-deep);
	margin-bottom: .35rem;
}
.fgpz-panel__title {
	font-family: var(--ahv-font-primary, 'Cormorant Garamond', Georgia, serif);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.15;
	margin: 0 0 .25rem;
	color: var(--fgpz-espresso);
}
.fgpz-panel__help {
	font-size: .9rem;
	color: var(--fgpz-mist);
	margin: .25rem 0 0;
}

/* body layout ----------------------------------------------------------- */
.fgpz-panel__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.4rem;
	margin-top: 1.1rem;
}
@media (min-width: 720px) {
	.fgpz-panel__body.has-preview { grid-template-columns: 1.05fr .95fr; }
}

.fgpz-group { margin-bottom: 1.05rem; }
.fgpz-group:last-child { margin-bottom: 0; }

.fgpz-field-label {
	display: block;
	font-size: .78rem;
	letter-spacing: .04em;
	font-weight: 600;
	color: var(--fgpz-espresso);
	margin-bottom: .45rem;
}
.fgpz-req { color: var(--fgpz-accent-deep); }

/* inputs ---------------------------------------------------------------- */
.fgpz-input {
	width: 100%;
	box-sizing: border-box;
	padding: .7rem .85rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--fgpz-ink);
	background: var(--fgpz-ivory);
	border: 1px solid var(--fgpz-linen);
	border-radius: var(--fgpz-radius);
	transition: border-color .25s var(--fgpz-ease), box-shadow .25s var(--fgpz-ease);
	min-height: 48px;
}
.fgpz-input:focus {
	outline: none;
	border-color: var(--fgpz-accent);
	box-shadow: 0 0 0 3px rgba(199,147,6,.12);
}
.fgpz-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A7A66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .85rem center;
	padding-right: 2.4rem;
}
.fgpz-counter {
	display: block;
	margin-top: .3rem;
	font-size: .72rem;
	color: var(--fgpz-mist);
	text-align: right;
}
.fgpz-counter.is-low { color: var(--fgpz-accent-deep); }

/* mode chips ------------------------------------------------------------ */
.fgpz-modes { margin-bottom: 1.1rem; }
.fgpz-modes__grid {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.fgpz-chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .6rem .9rem;
	border: 1px solid var(--fgpz-linen);
	border-radius: 999px;
	background: var(--fgpz-ivory);
	cursor: pointer;
	font-size: .85rem;
	color: var(--fgpz-ink);
	transition: border-color .2s var(--fgpz-ease), background .2s var(--fgpz-ease), color .2s var(--fgpz-ease);
	user-select: none;
}
.fgpz-chip input { position: absolute; opacity: 0; pointer-events: none; }
.fgpz-chip__icon { display: inline-flex; color: var(--fgpz-accent-deep); }
.fgpz-chip:hover { border-color: var(--fgpz-accent); }
.fgpz-chip.is-active {
	border-color: var(--fgpz-accent);
	background: var(--fgpz-wash);
	color: var(--fgpz-espresso);
}

/* font chips ------------------------------------------------------------ */
.fgpz-fonts { display: flex; gap: .5rem; flex-wrap: wrap; }
.fgpz-font-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	height: 48px;
	padding: 0 .9rem;
	font-size: 1.45rem;
	line-height: 1;
	border: 1px solid var(--fgpz-linen);
	border-radius: var(--fgpz-radius);
	background: var(--fgpz-ivory);
	color: var(--fgpz-ink);
	cursor: pointer;
	transition: border-color .2s var(--fgpz-ease), background .2s var(--fgpz-ease);
}
.fgpz-font-chip input { position: absolute; opacity: 0; pointer-events: none; }
.fgpz-font-chip:hover { border-color: var(--fgpz-accent); }
.fgpz-font-chip.is-active { border-color: var(--fgpz-accent); background: var(--fgpz-wash); }

/* surcharge note -------------------------------------------------------- */
.fgpz-surcharge {
	margin: .25rem 0 0;
	font-size: .85rem;
	color: var(--fgpz-accent-deep);
	font-weight: 600;
}
.fgpz-surcharge:empty { display: none; }

/* size slider ----------------------------------------------------------- */
.fgpz-size__val {
	margin-left: .4rem;
	font-weight: 600;
	color: var(--fgpz-accent-deep);
	letter-spacing: .02em;
}
.fgpz-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: var(--fgpz-linen);
	outline: none;
	margin: .2rem 0 .1rem;
}
.fgpz-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--fgpz-accent);
	border: 2px solid var(--fgpz-pearl);
	box-shadow: 0 1px 3px rgba(42,31,24,.25);
	cursor: pointer;
}
.fgpz-range::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--fgpz-accent);
	border: 2px solid var(--fgpz-pearl);
	box-shadow: 0 1px 3px rgba(42,31,24,.25);
	cursor: pointer;
}
.fgpz-range:focus-visible { box-shadow: 0 0 0 3px rgba(199,147,6,.12); }
.fgpz-range__labels {
	display: flex;
	justify-content: space-between;
	font-size: .7rem;
	letter-spacing: .04em;
	color: var(--fgpz-mist);
	margin-top: .25rem;
}
.fgpz-range__help {
	display: block;
	margin-top: .35rem;
	font-size: .72rem;
	color: var(--fgpz-mist);
	font-style: italic;
}

/* live preview ---------------------------------------------------------- */
.fgpz-preview { margin: 0; }
.fgpz-preview__eyebrow { margin-bottom: .5rem; }
.fgpz-preview__stage {
	position: relative;
	border-radius: var(--fgpz-radius-l);
	overflow: hidden;
	background: var(--fgpz-cream);
	border: 1px solid var(--fgpz-linen);
}
.fgpz-preview__img { display: block; width: 100%; height: auto; }

/* Bounded engraving safe-area: text wraps and auto-fits inside this box. */
.fgpz-preview__zone {
	position: absolute;
	left: 50%;
	top: 55%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	pointer-events: none;
}
.fgpz-preview__text {
	display: block;
	width: 100%;
	max-height: 100%;
	text-align: center;
	line-height: 1.18;
	overflow: hidden;
	overflow-wrap: break-word;
	word-break: break-word;
	color: var(--fgpz-ink);
	opacity: 0;
	transition: opacity .25s var(--fgpz-ease);
	/* subtle etched feel via shadow only — not a gradient */
	text-shadow: 0 1px 0 rgba(255,255,255,.4), 0 -1px 1px rgba(0,0,0,.1);
}
.fgpz-preview__guide {
	position: absolute;
	inset: 0;
	border: 1px dashed rgba(138,122,102,.55);
	border-radius: 6px;
	opacity: 0;
	transition: opacity .3s var(--fgpz-ease);
}
.fgpz-preview__guide.is-circle { border-radius: 50%; }
.fgpz-preview.is-active .fgpz-preview__guide { opacity: .4; }
.fgpz-preview__note {
	margin-top: .5rem;
	font-size: .72rem;
	color: var(--fgpz-mist);
	font-style: italic;
}

/* entrance animation (CSS-only, staggered) ------------------------------ */
.fgpz-panel .fgpz-group,
.fgpz-panel .fgpz-modes,
.fgpz-panel .fgpz-preview {
	opacity: 0;
	transform: translateY(8px);
	animation: fgpz-rise .5s var(--fgpz-ease) forwards;
}
.fgpz-panel .fgpz-modes { animation-delay: .04s; }
.fgpz-panel .fgpz-group:nth-of-type(1) { animation-delay: .10s; }
.fgpz-panel .fgpz-group:nth-of-type(2) { animation-delay: .16s; }
.fgpz-panel .fgpz-group:nth-of-type(3) { animation-delay: .22s; }
.fgpz-panel .fgpz-preview { animation-delay: .14s; }

@keyframes fgpz-rise {
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.fgpz-panel .fgpz-group,
	.fgpz-panel .fgpz-modes,
	.fgpz-panel .fgpz-preview {
		animation: none;
		opacity: 1;
		transform: none;
	}
}