/* ================================================================
   Surname Story — Partner stall / tablet kiosk
   Restyled to match the main site design system (heritage palette):
   parchment + ivory surfaces, antique gold accents, warm ink,
   Cormorant Garamond (serif) + Hanken Grotesk (sans).
   Class names kept identical to partner-stall.js — only the skin changed.
   ================================================================ */
:root {
  /* surfaces */
  --paper:      #FFFFFF;
  --ivory:      #FAF5EA;
  --ivory-deep: #F3EAD6;
  --parchment:  #F6EEDD;
  --line:       #E9E1D0;
  --line-soft:  #F0EADC;

  /* ink */
  --ink:        #1B1813;
  --muted:      #6A6256;
  --muted-2:    #908775;

  /* gold */
  --gold:       #B08A46;
  --gold-deep:  #8A6A30;
  --gold-soft:  #CBAE73;
  --gold-light: #E7D4A6;
  --gold-wash:  #F5ECD8;

  /* status (kept warm, no clinical blue/green) */
  --success:    #5C7A3F;   /* muted olive-green for confirmations */
  --success-wash:#EEF1E4;
  --danger:     #A84B3A;   /* warm terracotta error */
  --danger-wash:#F8EDE9;

  /* legacy aliases used across the file */
  --bg:         #FAF5EA;
  --text:       #1B1813;
  --primary:    #8A6A30;
  --primary-hover:#6F5526;
  --border:     #E9E1D0;
  --selected:   #B08A46;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease:  cubic-bezier(.22,.61,.36,1);
  --shadow-sm: 0 1px 2px rgba(27,24,19,.05), 0 2px 8px rgba(27,24,19,.04);
  --shadow-md: 0 4px 14px rgba(27,24,19,.07), 0 14px 28px rgba(27,24,19,.06);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  color: var(--ink);
  font-family: var(--sans);
  background:
    radial-gradient(80% 55% at 82% 0%, #FBF3E1 0%, transparent 60%),
    radial-gradient(70% 60% at 0% 100%, #F3EAD6 0%, transparent 55%),
    var(--ivory);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body { overflow-x: hidden; }
::selection { background: var(--gold-light); color: var(--ink); }

.screen {
  max-width: 900px;
  margin: 0 auto;
  padding: 36px 28px 90px;
  min-height: 100vh;
}

h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 12px 0 6px;
  line-height: 1.02;
  color: var(--ink);
}

.subtitle {
  text-align: center;
  font-size: clamp(15px, 2vw, 21px);
  color: var(--muted);
  margin: 0 0 30px;
  font-weight: 400;
}
/* small gold kicker rule under the heading */
.subtitle::before {
  content: "✦";
  display: block;
  color: var(--gold-soft);
  font-size: 0.7em;
  margin: 4px 0 12px;
  letter-spacing: 0.4em;
}

.brand-footer {
  text-align: center;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: clamp(13px, 1.8vw, 18px);
  letter-spacing: 0.02em;
  color: var(--muted);
}
.brand-footer .bf-name { font-family: var(--serif); font-weight: 600; font-size: 1.25em; color: var(--ink); }
.brand-footer .bf-dot  { margin: 0 12px; color: var(--gold); }
.brand-footer .bf-site { font-weight: 600; color: var(--gold-deep); text-decoration: none; }
.brand-footer .bf-site:hover { color: var(--gold); }

.field { display: block; margin-bottom: 26px; }

.field .label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-deep);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

input[type=text] {
  display: block;
  width: 100%;
  font-family: var(--serif);
  font-size: clamp(28px, 4.5vw, 42px);
  font-weight: 500;
  padding: 18px 22px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  -webkit-appearance: none;
  appearance: none;
}
input[type=text]::placeholder { color: var(--muted-2); font-style: italic; }
input[type=text]:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-wash);
}

/* Surname input + "+" button to add a second surname (linaje) */
.cognome-row { display: flex; align-items: stretch; gap: 10px; }
.cognome-row input[type=text] { flex: 1 1 auto; min-width: 0; }
.add-surname-btn {
  flex: 0 0 auto;
  width: 62px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--gold-deep);
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  -webkit-appearance: none;
  appearance: none;
}
.add-surname-btn:active { background: var(--gold-wash); }
.add-surname-btn.active {
  background: linear-gradient(180deg, #C19A53, var(--gold));
  border-color: var(--gold);
  color: #2a2110;
}
.cognome-second { margin-top: 10px; }

.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  font-weight: 600;
  padding: 16px 10px;
  color: var(--ink);
  cursor: pointer;
  transition: transform .08s var(--ease), background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
  line-height: 1.1;
  min-height: 110px;
}
.lang-btn .flag {
  font-size: clamp(44px, 6vw, 56px);
  line-height: 1;
}
.lang-btn .name {
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.lang-btn:hover { box-shadow: var(--shadow-md); border-color: var(--gold-soft); }
.lang-btn:active { transform: scale(0.97); }
.lang-btn.selected {
  background: linear-gradient(180deg, #C19A53, var(--gold));
  border-color: var(--gold);
  color: #2a2110;
  box-shadow: 0 1px 0 #e9d4a0 inset, var(--shadow-md);
}

/* "Where are you from?" — main CTA that opens the full country picker */
.btn-where-from {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 24px 24px;
  background: var(--paper);
  border: 2px solid var(--gold-soft);
  border-radius: 16px;
  color: var(--gold-deep);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 700;
  cursor: pointer;
  transition: background .15s var(--ease), transform .08s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn-where-from:hover {
  background: linear-gradient(180deg, #C19A53, var(--gold));
  border-color: var(--gold);
  color: #2a2110;
  box-shadow: var(--shadow-md);
}
.btn-where-from:active { transform: scale(0.98); }
.btn-where-from .more-emoji {
  font-size: clamp(34px, 4.5vw, 44px);
  line-height: 1;
}
.btn-where-from.selected {
  background: var(--gold-wash);
  border-color: var(--gold-soft);
  color: var(--gold-deep);
  box-shadow: var(--shadow-sm);
}
.btn-where-from.selected:hover {
  background: linear-gradient(180deg, #C19A53, var(--gold));
  border-color: var(--gold);
  color: #2a2110;
}
.btn-where-from.selected .more-label { font-weight: 700; }

/* ===== Nome / Cognome toggle ===== */
.name-type-row { display: flex; gap: 16px; }
.name-type-btn {
  flex: 1;
  padding: 20px 10px;
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.name-type-btn.selected {
  background: linear-gradient(180deg, #C19A53, var(--gold));
  border-color: var(--gold);
  color: #2a2110;
}
.name-type-btn:not(.selected):hover {
  border-color: var(--gold-soft);
  color: var(--gold-deep);
}

/* ===== Step reveal (name first, then style) ===== */
.reveal-step[hidden] { display: none !important; }
.reveal-step { animation: stepReveal .45s var(--ease) both; }
@keyframes stepReveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step-prompt {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 600;
  color: var(--gold-deep);
  margin: 8px 0 18px;
  letter-spacing: 0.01em;
}
.step-prompt::before, .step-prompt::after {
  content: "✦";
  color: var(--gold-soft);
  font-size: 0.6em;
  vertical-align: 0.18em;
  margin: 0 0.5em;
}

.name-audience-row { display: flex; gap: 16px; margin-top: -10px; }
.name-audience-btn {
  flex: 1;
  padding: 18px 10px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 600;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.name-audience-btn.selected {
  background: var(--ink);
  border-color: var(--ink);
  color: #F6EFE0;
}
.name-audience-btn:not(.selected):hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ===== Multilingual sub-language picker (Belgium / Switzerland) ===== */
.sub-lang-row { display: flex; flex-direction: column; gap: 12px; }
.sub-lang-label {
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.02em;
}
.sub-lang-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.sub-lang-btn {
  flex: 1 1 120px;
  padding: 18px 12px;
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 600;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.sub-lang-btn.selected {
  background: linear-gradient(180deg, #C19A53, var(--gold));
  border-color: var(--gold);
  color: #2a2110;
}
.sub-lang-btn:not(.selected):hover {
  border-color: var(--gold-soft);
  color: var(--gold-deep);
}

/* ===== Inspiration grid ===== */
.inspiration-row { display: flex; flex-direction: column; gap: 12px; margin-top: -6px; }
.inspiration-label {
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.03em;
}
.inspiration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.inspiration-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.inspiration-btn:active { transform: scale(0.95); }
.inspiration-btn.selected {
  background: var(--gold-wash);
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-light);
}
.inspiration-btn:not(.selected):hover { border-color: var(--gold-soft); }
.insp-emoji { font-size: clamp(28px, 4vw, 40px); line-height: 1; }
.insp-label {
  font-size: clamp(11px, 1.6vw, 15px);
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
}
.inspiration-btn.selected .insp-label { color: var(--gold-deep); }
.inspiration-custom-wrap { margin-top: 4px; }
.inspiration-custom-input {
  width: 100%;
  padding: 14px 16px;
  font-size: clamp(16px, 2.2vw, 20px);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s var(--ease);
}
.inspiration-custom-input:focus { border-color: var(--gold); }
.inspiration-custom-input.has-value { border-color: var(--gold); background: var(--gold-wash); }

/* ===== Modal ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27, 24, 19, 0.55);
  animation: modalFadeIn 0.2s ease-out;
}
.modal-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  width: 100%;
  max-width: 860px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 26px 26px 30px;
  box-shadow: 0 20px 60px rgba(27,24,19,0.30);
  animation: modalSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalSlideIn {
  from { transform: translateY(20px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.modal-header h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 600;
  color: var(--ink);
}
.modal-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--ivory);
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

.lang-grid-modal { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

.modal-hint {
  margin: 18px 0 4px;
  text-align: center;
  color: var(--muted);
  font-size: clamp(14px, 1.7vw, 17px);
  font-style: italic;
  font-family: var(--serif);
}

.modal-divider {
  position: relative;
  text-align: center;
  margin: 22px 0 14px;
  color: var(--muted);
  font-size: clamp(14px, 1.7vw, 17px);
  font-style: italic;
  font-family: var(--serif);
}
.modal-divider span { background: var(--paper); padding: 0 14px; position: relative; z-index: 1; }
.modal-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: var(--line);
}

.custom-lang-label {
  display: block;
  font-size: clamp(14px, 1.8vw, 18px);
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 8px;
}

#customLang {
  width: 100%;
  padding: 14px 16px;
  font-size: clamp(16px, 2vw, 20px);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
  margin-bottom: 12px;
}
#customLang:focus { outline: none; border-color: var(--gold); }

.btn-use-custom {
  width: 100%;
  padding: 16px;
  background: var(--ink);
  color: #F6EFE0;
  border: none;
  border-radius: 12px;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s var(--ease), opacity .15s var(--ease);
}
.btn-use-custom:hover:not(:disabled) { background: #2c271e; }
.btn-use-custom:disabled { background: var(--muted-2); cursor: not-allowed; }

.field-custom { margin-top: 6px; margin-bottom: 14px; }
.field-custom .label.small {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-weight: 500;
}
.field-custom input[type=text] {
  font-size: clamp(20px, 2.8vw, 26px);
  padding: 14px 18px;
  border-style: dashed;
  background: var(--ivory);
}
.field-custom input[type=text]:focus { border-style: solid; background: var(--paper); }

.invio {
  display: block;
  width: 100%;
  margin-top: 26px;
  padding: 28px;
  background: linear-gradient(180deg, #C19A53, var(--gold));
  color: #2a2110;
  border: none;
  border-radius: 18px;
  font-family: var(--sans);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 1px 0 #e9d4a0 inset, var(--shadow-md);
  transition: opacity .15s var(--ease), transform .08s var(--ease), box-shadow .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.invio:not(:disabled):hover { box-shadow: 0 1px 0 #e9d4a0 inset, var(--shadow-md), 0 0 0 3px var(--gold-wash); }
.invio:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.invio:not(:disabled):active { transform: scale(0.98); }

/* ---- Digital delivery opt-in (small row under SEND) ---- */
.digital-row { margin-top: 14px; }
.digital-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  color: var(--muted);
  font-size: clamp(15px, 2vw, 19px);
  user-select: none;
}
.digital-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--gold);
  cursor: pointer;
}
.digital-form {
  margin-top: 12px;
  padding: 16px;
  background: var(--ivory);
  border: 1.5px solid var(--line);
  border-radius: 14px;
}
.digital-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.digital-tab {
  flex: 1;
  padding: 12px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.digital-tab.selected {
  background: var(--gold-wash);
  border-color: var(--gold);
  color: var(--gold-deep);
}
.digital-form input {
  width: 100%;
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: clamp(18px, 2.4vw, 22px);
}
.digital-form input:focus { outline: none; border-color: var(--gold); }
.digital-hint {
  margin-top: 8px;
  color: var(--muted);
  font-size: clamp(13px, 1.8vw, 16px);
  text-align: center;
}

.flash {
  margin-top: 28px;
  padding: 24px;
  background: var(--success-wash);
  color: var(--success);
  border: 1.5px solid #C7D3B2;
  border-radius: 14px;
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 600;
  text-align: center;
}

.error {
  margin-top: 28px;
  padding: 24px;
  background: var(--danger-wash);
  color: var(--danger);
  border: 1.5px solid #E6C3BA;
  border-radius: 14px;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 500;
  text-align: center;
}

/* Discreet queue strip on the right (tablet landscape).
   Becomes a bottom horizontal strip on narrow/portrait screens. */
.queue-strip {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 200px;
  max-height: calc(100vh - 28px);
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  z-index: 5;
  overflow-y: auto;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s var(--ease);
}
.queue-strip:hover { border-color: var(--gold-soft); }

.queue-strip.expanded {
  top: 0; right: 0; bottom: 0; left: 0;
  width: auto;
  max-height: 100vh;
  border-radius: 0;
  padding: 40px 48px;
  font-size: 18px;
  background: rgba(250,245,234,0.98);
  z-index: 50;
}
.queue-strip.expanded .queue-strip-title { font-size: 14px; margin-bottom: 24px; }
.queue-strip.expanded .queue-list { gap: 10px; }
.queue-strip.expanded .queue-list li {
  padding: 16px 22px;
  font-size: clamp(22px, 3.5vw, 32px);
  border-radius: 10px;
}
.queue-strip.expanded .queue-list li .name { max-width: none; font-size: 1em; }
.queue-strip.expanded .queue-list li .timer { font-size: 0.85em; }
.queue-strip.expanded .queue-strip-hint {
  position: absolute;
  top: 16px;
  right: 22px;
  font-size: 13px;
  color: var(--muted);
}
.queue-strip-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
  margin-bottom: 8px;
}
.queue-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.queue-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--ivory);
  font-size: 12px;
}
.queue-list li.done { background: var(--success-wash); color: var(--success); }
.queue-list li.in_progress { background: var(--gold-wash); color: var(--gold-deep); }
.queue-list li .name { font-weight: 600; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-list li .timer { font-variant-numeric: tabular-nums; font-size: 11px; opacity: 0.8; }

.queue-list-empty {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  padding: 4px;
}

@media (max-width: 760px) {
  .queue-strip {
    top: auto;
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    max-height: 110px;
  }
  .queue-list { flex-direction: row; flex-wrap: wrap; }
  .queue-list li { flex: 0 0 auto; }
}

/* Done items are tappable to reveal full image to customer */
.queue-list li.done { cursor: pointer; position: relative; }
.queue-list li.done::after {
  content: "👁";
  margin-left: 6px;
  font-size: 14px;
  opacity: 0.6;
}
.queue-strip.expanded .queue-list li.done { border: 2px solid var(--gold); }
.queue-strip.expanded .queue-list li.done::after {
  content: "  TAP TO SEE";
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Fullscreen viewer for customer */
.customer-view {
  position: fixed;
  inset: 0;
  background: rgba(27, 24, 19, 0.96);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 16px;
}
.customer-view img {
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
  background: #fff;
}
.customer-view-hint {
  position: fixed;
  top: 18px;
  right: 22px;
  color: rgba(246, 239, 224, 0.7);
  font-size: 13px;
  letter-spacing: 0.05em;
  pointer-events: none;
}

/* ===== partner kiosk supplement (v11) ===== */
#langGrid.lang-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px;
}
@media (max-width:560px){ #langGrid.lang-grid{ grid-template-columns:repeat(2,1fr); } }
#styleRow.name-audience-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.invio.is-sending{ opacity:.75; }
/* mini "in preparation" queue items */
.queue-list li{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px;
  background:var(--ivory); margin-bottom:8px; font-size:1.05rem; }
.queue-list li.done{ background:var(--success-wash); }
.queue-list li .q-ico{ font-size:1.2rem; width:1.4em; text-align:center; }
.queue-list li.pending .q-ico{ animation:qspin 1.4s linear infinite; display:inline-block; }
.queue-list li .q-name{ font-weight:600; letter-spacing:.01em; }
@keyframes qspin{ to{ transform:rotate(360deg); } }