/* Página de instalação. Os painéis aparecem conforme os atributos que o gate.js põe no <html>:
   data-os (android|ios|desktop), data-browser, data-inapp, data-ipad, data-ios-legacy, data-contingency. */

body {
  background:
    linear-gradient(180deg, rgba(3, 6, 14, 0.7) 0, rgba(3, 6, 14, 0.9) 420px, var(--ink) 640px),
    url(/assets/hero-900.webp) center top / 100% auto no-repeat,
    var(--ink);
}
@media (min-width: 900px) {
  body { background-size: auto, cover, auto; }
}

.topbar { position: sticky; top: 0; z-index: 5; padding-top: calc(12px + env(safe-area-inset-top)); }

.install {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px var(--pad-x) calc(110px + env(safe-area-inset-bottom));
  display: grid;
  gap: 24px;
}

.install-hero { display: grid; gap: 18px; }
.install-hero .logo-full { width: min(300px, 80%); height: auto; }
.install-hero h1 { font-size: clamp(28px, 8vw, 40px); }
.pitch { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.pitch img { width: 96px; height: 96px; object-fit: contain; }
.pitch p { font-size: 17px; }

.sub { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.note { font-size: 14px; }
.note b, .panel p b, .steps b { color: #fff; font-weight: 600; }

/* Visibilidade dos painéis */
.panel, .contingency, .only-samsung, .ios-legacy-only, .ios-other-only, .ios-only, .android-only, .share-arrow { display: none; }
.panel { gap: 16px; }

html[data-inapp="false"][data-os="android"] .panel-android,
html[data-inapp="false"][data-os="ios"] .panel-ios,
html[data-inapp="false"][data-os="desktop"] .panel-desktop,
html[data-inapp="true"] .panel-inapp,
html:not([data-os]) .panel-android,
html:not([data-os]) .panel-ios { display: grid; }

.steps li.only-samsung { display: none; }
html[data-browser="samsung"] .steps li.only-samsung { display: grid; }
html[data-browser="samsung"] .steps li.not-samsung { display: none; }
html[data-ios-legacy="true"] .ios-legacy-only { display: grid; gap: 12px; }
html[data-os="ios"]:not([data-browser="safari"]) .ios-other-only { display: inline; }
html[data-os="ios"] .ios-only, html[data-os="android"] .android-only { display: inline; }
html[data-os="android"] a.android-only { display: inline-flex; }
html[data-os="desktop"] .panel-inapp .ios-only { display: inline; }

html[data-contingency="true"]:not([data-os="desktop"]) .contingency { display: grid; gap: 10px; }
.contingency { padding-top: 8px; border-top: 1px solid var(--line); }

/* Passos numerados */
.steps { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; counter-reset: passo; }
.steps li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}
.steps li::before {
  content: counter(passo, decimal-leading-zero);
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 13px var(--mono);
  color: var(--blue-light);
  box-shadow: inset 0 0 0 1px rgba(74, 167, 252, 0.5);
}
.share-icon {
  display: inline-block; width: 22px; height: 24px; padding: 3px 4px; margin: 0 2px;
  vertical-align: middle; border-radius: 6px; background: rgba(255, 255, 255, 0.1);
  fill: none; stroke: var(--blue-light); stroke-width: 1.6;
}

.manual { display: grid; gap: 14px; }
.warn { border-color: rgba(245, 199, 3, 0.45); background: rgba(245, 199, 3, 0.08); }

/* QR do desktop */
.qr {
  justify-self: start;
  display: grid; gap: 10px; justify-items: center;
  padding: 18px; border-radius: 16px; background: #fff; color: var(--navy-text);
}
.qr img { width: 220px; height: 220px; }
.qr-url { font: 600 14px var(--mono); }

.install-footer { display: grid; gap: 12px; padding-top: 16px; }
.install-footer img { width: 240px; height: auto; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-glass); border: 1px solid var(--line-strong); }
.links { display: flex; gap: 20px; font-size: 14px; }

.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 13px; }
html[data-os="desktop"] .js-bottom-cta { display: none; }

/* Seta animada apontando para o botão Compartilhar do iOS */
html[data-os="ios"][data-inapp="false"]:not([data-ios-legacy="true"]) .share-arrow {
  display: grid;
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(6px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  justify-items: center;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(3, 6, 14, 0.9);
  pointer-events: none;
  animation: seta-baixo 1.1s ease-in-out infinite;
}
.share-arrow span { font: 600 11px var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--yellow); }
.share-arrow svg { width: 26px; height: 32px; fill: none; stroke: var(--yellow); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes seta-baixo { 50% { transform: translate(-50%, 8px); } }

/* iPad (Safari) e Chrome/Edge/Firefox no iOS: compartilhar fica no topo, à direita */
html[data-os="ios"][data-ipad="true"] .share-arrow,
html[data-os="ios"]:not([data-browser="safari"]) .share-arrow {
  top: calc(64px + env(safe-area-inset-top));
  bottom: auto;
  left: auto;
  right: 12px;
  transform: none;
  animation-name: seta-cima;
}
html[data-os="ios"][data-ipad="true"] .share-arrow svg,
html[data-os="ios"]:not([data-browser="safari"]) .share-arrow svg { transform: rotate(180deg); order: -1; }
@keyframes seta-cima { 50% { transform: translateY(-8px); } }

/* Com a seta embaixo, a faixa inferior sai do caminho no iPhone */
html[data-os="ios"][data-browser="safari"][data-ipad="false"][data-inapp="false"] .bottombar { display: none; }