/* Preview card, plaque render, configurator card, buttons, notices. */

/* PREVIEW */
.preview-card {
  border: var(--border);
  background: var(--bg);
  box-shadow: var(--shadow);
  position: sticky;
  top: 90px;
}
.preview-stage {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #f7f4ee 0%, #ebe6d9 100%);
  border-bottom: var(--border);
  padding: 20px;
}

/* The plaque itself: layered gradients + an SVG turbulence filter for wood grain. */
.plaque {
  position: relative;
  height: 38%;
  min-height: 90px;
  max-width: 95%;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 28px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    inset 0 -8px 22px rgba(80, 45, 18, .12),
    inset 0 6px 14px rgba(255, 232, 195, .14),
    0 12px 28px rgba(20, 12, 6, .22);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 100% at 0% 50%, rgba(255, 240, 210, .25), transparent 70%),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 220' preserveAspectRatio='none'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.008 0.07' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.26 0 0 0 0 0.12 0 0 0 0.32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #f0d5a4 0%, #e7c68d 55%, #ddb878 100%);
  background-size: cover;
  transition: height .35s ease;
}
.plaque-text {
  position: relative;
  /* line-height 1 makes the box exactly font-size tall, which is what the
     optical-centring maths in preview.js assumes. Don't change without it. */
  line-height: 1;
  padding: 0;
  user-select: none;
  color: #5a3318;
  text-shadow:
    0 1px 0 rgba(255, 240, 210, .4),
    0 -1px 1px rgba(0, 0, 0, .35);
  white-space: nowrap;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  /* Deliberately not transitioned: preview.js resets the transform and reads
     the baseline back in the same frame, and a transition would make it
     measure a mid-animation position. Sizing is recomputed per keystroke
     anyway, so an animation would always be chasing the last value. */
}

/* Zero-sized inline-block: its bottom margin edge sits exactly on the text
   baseline, which is how preview.js locates the baseline without having to
   guess at the font's internal metrics. */
#plaqueBaseline {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
}

.preview-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  font-family: var(--font-ui);
}
.preview-meta .meta-left { font-size: 13px; line-height: 1.45; }
.preview-meta .meta-size { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; }
.preview-meta .meta-mat { color: var(--ink-soft); font-size: 12px; margin-top: 2px; }
.preview-meta .price { font-family: var(--font-ui); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.preview-meta .price .euro { font-size: 22px; vertical-align: top; margin-right: 2px; }

.story-card {
  border: var(--border);
  background: #faf5e9;
  padding: 20px 22px;
  margin: 24px 28px 28px;
  font-size: 13px;
  line-height: 1.55;
}
.story-card strong { color: var(--terracotta); }
.story-card .story-title {
  font-family: var(--font-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  margin-bottom: 8px;
}

/* CONFIGURATOR */
.form-card {
  border: var(--border);
  background: var(--bg);
  box-shadow: var(--shadow);
  padding: 28px;
}
.form-card h2 { font-family: var(--font-ui); font-weight: 700; font-size: 22px; margin: 0 0 6px; letter-spacing: -0.01em; }
.form-card .lede { color: var(--ink-soft); font-size: 14px; margin: 0 0 26px; }

.field { margin-bottom: 24px; }
.field-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}
.text-input {
  width: 100%;
  padding: 14px 16px;
  border: var(--border);
  background: var(--bg);
  border-radius: var(--radius);
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  transition: box-shadow .15s, transform .15s;
}
.text-input:focus { outline: none; box-shadow: 4px 4px 0 #000; transform: translate(-2px, -2px); }
.help { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }

/* Shown only when the typed name has accents AND the chosen font lacks them. */
.help.notice {
  color: var(--terracotta);
  font-weight: 500;
  display: none;
  border-left: 3px solid var(--terracotta);
  padding-left: 10px;
  margin-top: 10px;
  line-height: 1.5;
}
.help.notice.show { display: block; }

/* FONT PICKER */
.options { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.opt { position: relative; cursor: pointer; display: block; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .opt-card {
  border: var(--border);
  padding: 14px 12px 10px;
  text-align: center;
  background: var(--bg);
  transition: box-shadow .15s, transform .15s;
  line-height: 1.35;
}
.opt:hover .opt-card { box-shadow: 4px 4px 0 #000; transform: translate(-2px,-2px); }
.opt input:checked + .opt-card {
  background: var(--terracotta);
  color: #fff;
  border-color: #000;
  box-shadow: 4px 4px 0 #000;
  transform: translate(-2px,-2px);
}
.opt input:checked + .opt-card .font-name { color: rgba(255, 240, 230, .9); }
.opt input:checked + .opt-card .font-sample { color: #fff; }
.opt input:focus-visible + .opt-card { outline: 3px solid var(--terracotta); outline-offset: 3px; }

.font-opt .opt-card .font-sample {
  font-size: 30px;
  margin-bottom: 8px;
  line-height: 1.3;
  padding: 0.1em 0;
  min-height: 1.3em;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.font-opt .opt-card .font-name {
  font-family: var(--font-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--ink);
}
/* Marks a font that can't render the accents currently typed. */
.font-opt .opt-card .font-flag {
  display: none;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: .75;
}
.font-opt.no-accents .opt-card .font-flag { display: block; }

/* ORDER BUTTON */
.submit-btn {
  width: 100%; padding: 20px;
  background: #c45f2a;
  color: #fff;
  border: var(--border); border-radius: var(--radius);
  font-size: 16px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer;
  box-shadow: var(--shadow);
  font-family: var(--font-ui);
  transition: transform .12s, box-shadow .12s, background .12s;
  position: relative;
}
.submit-btn:hover:not(:disabled) { background: #d96d34; transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.submit-btn:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: var(--shadow-press); }
.submit-btn:disabled { background: #ccc; color: #888; cursor: not-allowed; transform: none; box-shadow: var(--shadow); }
.submit-btn .arrow { display: inline-block; margin-left: 8px; transition: transform .15s; }
.submit-btn:hover:not(:disabled) .arrow { transform: translateX(4px); }

.note { font-size: 12px; color: var(--ink-soft); text-align: center; margin-top: 16px; font-family: var(--font-ui); }
.note .lock { margin-right: 5px; }

.msg { margin-top: 18px; padding: 14px 16px; border: var(--border); background: #f4f1ec; font-size: 14px; display: none; }
.msg.show { display: block; }
.msg.error { background: #fff0ee; }
.msg a { color: var(--ink); }

/* SUCCESS PAGE */
.thanks {
  max-width: 640px;
  margin: 0 auto;
  padding: 72px 24px 96px;
  text-align: center;
}
.thanks .check {
  width: 64px; height: 64px;
  border: var(--border);
  background: var(--terracotta);
  color: #fff;
  font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  box-shadow: var(--shadow);
}
.thanks h1 { font-family: var(--font-ui); font-weight: 700; font-size: clamp(30px, 5vw, 44px); margin: 0 0 14px; letter-spacing: -0.02em; }
.thanks p { color: var(--ink-soft); font-size: 15px; margin: 0 0 18px; }
.thanks .back {
  display: inline-block;
  margin-top: 20px;
  border: var(--border);
  padding: 14px 24px;
  background: #fff;
  box-shadow: var(--shadow);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.thanks .back:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 #000; }