/* Modo quiosque — tela de boas-vindas da cabine (kiosk.js, 13/10/2026) */
.wk { position: fixed; inset: 0; align-items: center; justify-content: center; overflow: hidden; background: #050506; cursor: pointer; }
.wk-wall { position: absolute; inset: -6% -10%; display: flex; flex-direction: column; justify-content: center; gap: 14px; transform: rotate(-6deg); opacity: .55; }
.wk-row { display: flex; gap: 14px; width: max-content; animation: wk-slide 90s linear infinite; }
.wk-row.wk-rev { animation-direction: reverse; animation-duration: 110s; }
.wk-row img { width: clamp(150px, 17vw, 260px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; flex: none; }
@keyframes wk-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wk-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(5,5,6,.55) 0%, rgba(5,5,6,.88) 62%, #050506 100%); }
.wk-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 24px 16px; max-width: 900px; }
.wk-logo { max-width: min(220px, 45vw); max-height: 120px; object-fit: contain; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
.wk h1 { font-family: "Instrument Serif", serif; font-weight: 400; font-style: italic; color: var(--ink, #f4f1ea); font-size: clamp(48px, 9vw, 128px); line-height: 1; overflow-wrap: anywhere; }
.wk-sub { color: #cfcac0; font-size: clamp(18px, 2.4vw, 28px); max-width: 32ch; }
.wk-go { margin-top: 10px; min-height: 56px; padding: 13px 34px; border-radius: 14px; border: 0; cursor: pointer;
  color: var(--wk-ink, #2a1d08); font: 800 clamp(18px, 2.1vw, 23px) "DM Sans", system-ui, sans-serif; letter-spacing: .01em;
  background: linear-gradient(150deg, color-mix(in srgb, var(--wk-color, #e8c26a) 62%, #fff), color-mix(in srgb, var(--wk-color, #e8c26a) 82%, #000));
  box-shadow: inset 2px 2px 1px rgb(255 255 255 / .6), inset -3px -4px 8px rgb(0 0 0 / .3), 8px 12px 22px rgb(0 0 0 / .6);
  transition: transform .15s, box-shadow .15s; }
.wk-go:hover { transform: translateY(-2px); }
.wk-go:active { transform: translateY(1px); box-shadow: inset 2px 3px 8px rgb(0 0 0 / .35), 2px 3px 8px rgb(0 0 0 / .45); }
.wk-go:focus-visible { outline: 2px solid var(--gold-a, #f6dc95); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .wk-row { animation: none; } .wk-go, .wk-more-btn { transition: none; } }


/* Settings → Event */
.ev-kiosk { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.ev-kiosk #wk-fields { display: flex; flex-direction: column; gap: 10px; }
.ev-kiosk #wk-fields[hidden], .ev-kiosk #wk-style-row[hidden] { display: none; }
.wk-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wk-colors button { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #2a2a30; cursor: pointer; }
.wk-colors button.on { outline: 3px solid #f4f1ea; outline-offset: 2px; }
.wk-colors input[type=color] { width: 44px; height: 36px; padding: 0; border: 1px solid #2a2a30; border-radius: 10px; background: transparent; cursor: pointer; }
.wk-select { max-width: 60%; }

/* Botões de baixo: QR do convidado, grupo, recados, galeria — argila escura do site, ícone dourado (13/10/2026) */
.wk-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; width: min(860px, 94vw); }
.wk-more[hidden] { display: none; }
.wk-more-btn { flex: 1 1 150px; max-width: 196px; display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; text-align: start;
  border: 0; border-radius: 14px; color: var(--ivory, #f4f1ea); cursor: pointer;
  background: radial-gradient(120% 120% at 22% 18%, rgb(255 255 255 / .06), transparent 60%), linear-gradient(150deg, var(--clay-top, #2b2930), var(--clay-bot, #141317));
  box-shadow: inset 2px 2px 1px var(--clay-hi, rgb(255 255 255 / .14)), inset -3px -4px 9px var(--clay-lo, rgb(0 0 0 / .5)), 8px 12px 22px rgb(0 0 0 / .6);
  transition: transform .15s, box-shadow .15s; }
.wk-more-btn:hover { transform: translateY(-2px); box-shadow: inset 2px 2px 1px rgb(255 255 255 / .18), inset -3px -4px 9px var(--clay-lo, rgb(0 0 0 / .5)), 10px 16px 28px rgb(0 0 0 / .65); }
.wk-more-btn:active { transform: translateY(2px); box-shadow: inset 2px 3px 8px rgb(0 0 0 / .55), 3px 4px 10px rgb(0 0 0 / .5); }
.wk-more-btn:focus-visible { outline: 2px solid var(--gold-a, #f6dc95); outline-offset: 3px; }
.wk-more-btn i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(150deg, rgb(255 255 255 / .05), rgb(255 255 255 / .01));
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / .10), inset -2px -3px 6px rgb(0 0 0 / .4); }
.wk-more-btn svg { width: 21px; height: 21px; fill: none; stroke: url(#pb-clay-gold); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 1.5px rgb(0 0 0 / .65)); }
.wk-more-btn b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.wk-more-btn small { display: block; margin-top: 1px; font-size: 11.5px; color: #9a978f; line-height: 1.3; }
.wk-qr { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgb(5 5 6 / .92); padding: 16px; }
.wk-qr[hidden] { display: none; }
.wk-qr-card { display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 100%; overflow: auto; text-align: center; max-width: 580px; padding: 24px; border-radius: 24px;
  background: #0f0f11; border: 1px solid #222227; box-shadow: 12px 18px 40px rgb(0 0 0 / .6); }
.wk-qr-card h2 { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; font-size: clamp(34px, 5.5vw, 60px); color: var(--ivory, #f4f1ea); line-height: 1.05; }
.wk-qr-card p { color: #9a978f; font-size: clamp(16px, 2vw, 20px); overflow-wrap: anywhere; }
.wk-qr-card canvas { width: min(400px, 76vw, 50vh) !important; height: auto !important; aspect-ratio: 1; box-sizing: border-box; background: #fff; border-radius: 16px; padding: 14px; flex: none; }
@media (max-height: 700px) { .wk-box { gap: 10px; } .wk-more { margin-top: 12px; } .wk-more-btn small { display: none; } }
.wk-checks { display: flex; flex-direction: column; gap: 6px; }