/* Visual do Photoboo (site separado, MODE = "app"). Carregado só no Photoboo,
   por cima do app.css da demonstração SHOWBOOTH — nunca editar o app.css para
   o Photoboo. Pedido do dono: com a cabine rodando, cartões em PRETO. */

.mode-app { --bg: #050506; --panel: #0e0e10; --line: #232327; }

/* ---------- cabeçalho escuro com o ícone do Photoboo ---------- */
.mode-app .top { background: #000; border-bottom: 1px solid #1f1f23; color: var(--ink); }
.mode-app .brand img.pb-logo { position: static; width: 60px; height: 60px; border-radius: 15px; object-fit: cover; filter: none; max-width: none; }
.mode-app .brand-mark { width: 60px; height: 60px; border-radius: 15px; overflow: hidden; }
.mode-app .brand .pb-name,
.mode-app .brand-copy strong { font-family: "Instrument Serif", serif; font-weight: 400; font-size: 31px; line-height: 1; letter-spacing: -.025em; color: #fff; }
.mode-app .brand-signature,
.mode-app .brand-copy span { color: var(--accent); }
.mode-app .brand-promise { color: #b9b3a6; }
.mode-app #search { background: #111113; color: var(--ink); border-color: #2a2a30; }
.mode-app #search::placeholder { color: #77736b; }
.mode-app .icon-btn { background: #111113; color: var(--ink); border-color: #2a2a30; }
.mode-app .credits { background: #1c1810; border-color: #4a3d1f; color: var(--accent); }
.mode-app .account-chip { background: #151518; border-color: #2a2a30; color: var(--ink); }
.mode-app .account-out { background: #242016; color: var(--accent); }

/* ---------- cartões dos efeitos em preto ---------- */
.mode-app .card { background: #000; border-color: #1c1c20; color: #fff; }
.mode-app .card:hover,
.mode-app .card:focus-visible { border-color: var(--accent); box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.mode-app .card-photo { background: #000; }
.mode-app .card-photo::after {
  content: ""; position: absolute; inset: 55% 0 0 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,0));
}
.mode-app .card .cap { z-index: 1; }
.mode-app .card .name { background: rgba(0,0,0,.72); color: #fff; border: 1px solid rgba(255,255,255,.08); }
.mode-app .card .badge { background: rgba(0,0,0,.72); color: #f4f1ea; border: 1px solid rgba(255,255,255,.1); }

/* Typography revision 2026-09-30 — Photoboo product only.
   Major-third scale from 15px: 19, 24, 30, 38, 48, 60.
   Instrument Serif supplies editorial contrast; DM Sans carries tasks.
   12px metadata and 16px inputs are intentional legibility exceptions. */
.mode-app {
  --muted: #b5b0a6;
  --type-meta: 12px;
  --type-body: 15px;
  --type-label: 19px;
  --type-section: 24px;
  --type-title: 30px;
  --type-display: 38px;
}
.mode-app .headline {
  font-size: clamp(38px, 5.2vw, 60px);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-block: 32px 24px;
  text-wrap: balance;
}
.mode-app .headline em, .mode-app .auth-show-copy h2 em {
  font-weight: 400;
  font-style: italic;
}
.mode-app .chip {
  font-size: var(--type-body);
  font-weight: 500;
  line-height: 1.4;
  padding-block: 10px;
}
.mode-app .card .name {
  font-size: var(--type-label);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.01em;
  padding: 6px 10px;
  text-shadow: none;
  -webkit-text-stroke: 0;
  overflow-wrap: break-word;
}
.mode-app .card .badge, .mode-app .card .flag {
  font-size: var(--type-meta);
  line-height: 1.3;
  font-weight: 650;
}
.mode-app .card .flag { letter-spacing: .08em; }
.mode-app #search { font-size: 16px; line-height: 1.5; }
.mode-app #search::placeholder { color: #b5b0a6; }
.mode-app .auth-logo strong { font-size: 48px; line-height: 1.05; }
.mode-app .auth-logo span, .mode-app .auth-kicker {
  font-size: var(--type-meta);
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: .12em;
}
.mode-app .auth-show-copy h2 {
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1.12;
  letter-spacing: -.02em;
  max-width: 19ch;
  text-wrap: balance;
}
.mode-app .auth-show-copy li { font-size: var(--type-body); line-height: 1.5; }
.mode-app .auth-card h1 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--type-title);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.mode-app .auth-sub {
  font-size: var(--type-body);
  line-height: 1.5;
  max-width: 46ch;
  margin-block: 12px 24px;
}
.mode-app #auth-form { gap: 18px; }
.mode-app #auth-form label { font-size: var(--type-body); line-height: 1.4; color: #ddd8ce; }
.mode-app #auth-form input { font-size: 16px; line-height: 1.5; }
.mode-app .auth-links, .mode-app .auth-error { font-size: var(--type-body); line-height: 1.5; }
.mode-app .auth-submit { font-size: var(--type-body); font-weight: 700; line-height: 1.5; min-height: 48px; }
.mode-app .credits, .mode-app .account-chip,
.mode-app .people-seg, .mode-app #countdown { font-variant-numeric: tabular-nums lining-nums; }
.mode-app .q-note, .mode-app .small { line-height: 1.5; }
@media (max-width: 860px) {
  .mode-app .auth-logo strong { font-size: var(--type-display); }
  .mode-app .auth-show-copy h2 { font-size: clamp(30px, 6vw, 38px); }
}
@media (max-width: 640px) {
  .mode-app .headline { margin-block: 24px 18px; }
  .mode-app .card .name { font-size: var(--type-body); padding: 5px 7px; }
  .mode-app .auth-card { padding-inline: 24px; }
  .mode-app .auth-kicker { max-width: 32ch; }
}

/* Calligraphic wordmark: simple rounded handwriting. */
@font-face {
  font-family: "Photoboo Handwritten";
  src: url("/fonts/caveat-semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
.mode-app .auth-logo { gap: 18px; align-items: center; }
.mode-app .auth-logo strong {
  font-family: "Photoboo Handwritten", "Instrument Serif", serif;
  font-weight: 600;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: 0;
  font-kerning: normal;
  white-space: nowrap;
}
.mode-app .auth-logo span {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.5;
  margin-block-start: 0;
  padding-inline-start: 5px;
}
@media (max-width: 640px) {
  .mode-app .auth-logo { gap: 14px; }
  .mode-app .auth-logo strong { font-size: 52px; }
}

/* Black login with a gently drifting ambient gradient. */
.mode-app .auth-gate {
  background: #050506;
  color-scheme: dark;
  isolation: isolate;
  overflow-x: hidden;
}
.mode-app .auth-gate::before {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 75% 28%, rgba(105, 68, 114, .20), transparent 42%),
    radial-gradient(ellipse at 88% 64%, rgba(56, 113, 128, .17), transparent 40%),
    radial-gradient(ellipse at 58% 88%, rgba(145, 110, 50, .12), transparent 38%);
  animation: photobooAmbientDrift 32s ease-in-out infinite alternate;
}
@keyframes photobooAmbientDrift {
  0% { transform: translate3d(-3%, -2%, 0) scale(1); }
  50% { transform: translate3d(3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 5%, 0) scale(1.02); }
}
.mode-app .auth-side {
  position: relative;
  width: min(440px, calc(100% - 48px));
  margin-block: 48px;
  gap: 28px;
}
.mode-app .auth-logo strong { color: #f4f1ea; }
.mode-app .auth-logo span { color: var(--accent); }
.mode-app .auth-logo img { box-shadow: 0 8px 24px #e8c26a18; }
.mode-app .auth-card {
  background: rgba(19, 19, 23, .88);
  color: #f4f1ea;
  border-color: #ffffff14;
  box-shadow: 0 24px 65px #0005;
  padding: 36px 32px 28px;
}
.mode-app .auth-sub, .mode-app .auth-links { color: #b5b0a6; }
.mode-app #auth-form label { color: #ddd8ce; }
.mode-app #auth-form input {
  background: #0f0f12;
  color: #f4f1ea;
  border-color: #343439;
}
.mode-app #auth-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #e8c26a12;
}
.mode-app .auth-submit { background: var(--accent); color: #1a1408; }
.mode-app .auth-submit:hover { background: #f0d28b; }
.mode-app .auth-links a { color: var(--accent); }
.mode-app .auth-error { color: #ff9b8a; }
@media (min-width: 861px) {
  .mode-app .auth-show::after {
    background: linear-gradient(to top, #000c 0%, #0002 45%, transparent 70%),
      linear-gradient(to right, transparent 80%, #050506 100%);
  }
}
@media (max-width: 860px) {
  .mode-app .auth-show::after {
    background: linear-gradient(to top, #050506 0%, #0007 28%, transparent 75%);
  }
  .mode-app .auth-side { margin-block: 12px 36px; }
}
@media (max-width: 640px) {
  .mode-app .auth-side { width: min(440px, calc(100% - 32px)); }
  .mode-app .auth-card { padding: 28px 24px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .mode-app .auth-gate::before { animation: none; }
}

/* ===================== Botões 2027 (pedido do dono, 01/10/2026) =====================
   Nada de pílula. Retângulo de cantos suaves, superfície com luz sutil em cima,
   o principal em dourado com brilho, toque que "afunda" e anel de foco no teclado.
   Só no Photoboo (MODE = "app"); a demonstração SHOWBOOTH não muda. */
.mode-app { --r-btn: 10px; --r-inner: 7px; --r-chip: 8px; }

/* Botões */
.mode-app .pill,
.mode-app .cta,
.mode-app .g-btn {
  border-radius: var(--r-btn);
  min-height: 44px;
  letter-spacing: -.01em;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, filter .2s ease;
}
.mode-app .pill {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)), #141417;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.5);
  backdrop-filter: none;
}
.mode-app .pill:hover { border-color: rgba(255,255,255,.24); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 6px 14px -8px rgba(0,0,0,.8); }
.mode-app .pill.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.mode-app .cta {
  background: linear-gradient(180deg, #f2d690 0%, #e2bd5f 100%);
  color: #17130a;
  font-weight: 700;
  border: 1px solid #c9a24a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.45), 0 8px 20px -8px rgba(226,189,95,.55);
}
.mode-app .cta:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 3px rgba(0,0,0,.45), 0 12px 26px -10px rgba(226,189,95,.7); }
/* Botões claros (comprar, começar evento novo) */
.mode-app .bill-start,
.mode-app .pbs-foot .ev-new {
  background: linear-gradient(180deg, #ffffff 0%, #ebe6db 100%);
  color: #121212;
  border: 1px solid #d8d1c3;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.45), 0 8px 18px -10px rgba(255,255,255,.35);
}
.mode-app .bill-start:hover,
.mode-app .pbs-foot .ev-new:hover { background: #fff; transform: translateY(-1px); }
/* Toque: afunda um pouco */
.mode-app .pill:active, .mode-app .cta:active, .mode-app .g-btn:active,
.mode-app .bill-start:active, .mode-app .pbs-foot .ev-new:active { transform: translateY(1px) scale(.985); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
/* Foco pelo teclado */
.mode-app .pill:focus-visible, .mode-app .cta:focus-visible, .mode-app .g-btn:focus-visible,
.mode-app .ps-seg button:focus-visible, .mode-app .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode-app .pill:disabled, .mode-app .cta:disabled { opacity: .45; transform: none; box-shadow: none; cursor: default; }

/* Seletores em grupo (segmentados) e contadores: cantos suaves, botão escolhido em relevo */
.mode-app .ps-seg, .mode-app .people-seg, .mode-app .g-seg, .mode-app .pb-switch, .mode-app .gl-tabs,
.mode-app .print-copies, .mode-app .ps-stepper, .mode-app .g-stepper, .mode-app .bt-copies, .mode-app .bt-allcopies { border-radius: var(--r-btn); }
.mode-app .ps-seg button, .mode-app .people-seg .seg, .mode-app .g-seg button, .mode-app .pb-switch button, .mode-app .gl-tabs button { border-radius: var(--r-inner); }
.mode-app .ps-seg button.on, .mode-app .g-seg button.on, .mode-app .pb-switch button.on, .mode-app .gl-tabs button.on {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.4);
}

/* Etiquetas e campos */
.mode-app .print-chip, .mode-app .chip, .mode-app .g-chip, .mode-app .credits, .mode-app .cam-style,
.mode-app .result-info, .mode-app .g-left, .mode-app .account-chip, .mode-app .auth-tag { border-radius: var(--r-chip); }
.mode-app #search, .mode-app .bt-side input { border-radius: var(--r-btn); }