* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; font-family: Arial, Helvetica, sans-serif; background: #000; }
button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.app { position: fixed; inset: 0; overflow: hidden; background: #000; }
.viewer { position: fixed; inset: 0; width: 100%; height: 100%; background: #000; z-index: 1; }
.hidden { display: none !important; }
.modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.72); padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); }
.card { width: min(86vw, 340px); max-height: min(88vh, 620px); overflow: hidden; border-radius: 16px; background: #f3f3f3; text-align: center; box-shadow: 0 16px 36px rgba(0,0,0,.42); }
.card-header { height: 74px; display: flex; align-items: center; justify-content: center; background: #ffe000; padding: 10px 18px; }
.logo { max-width: 160px; max-height: 50px; object-fit: contain; }
.card-body { padding: 22px 20px 20px; }
.icon-circle { width: 42px; height: 42px; margin: -8px auto 14px; border-radius: 50%; background: #ffe000; color: #111; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; }
.instruction-icon { margin: 0 auto 14px; color: #333; font-size: 36px; }
.card h1 { margin: 0 0 22px; font-size: 18px; color: #111; }
.card p { margin: 0 0 28px; color: #686868; font-size: 15px; line-height: 1.25; }
.main-btn { width: 100%; min-height: 54px; border: 0; border-radius: 9px; background: #a9bdf0; color: #3267c8; font-size: 22px; font-weight: 700; cursor: pointer; }
.main-btn:active, .category-item:active, .product-item:active, .back-btn:active { transform: scale(.97); }
.floating-btn { position: fixed; z-index: 100; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #ffe000; color: #111; font-size: 18px; font-weight: 700; cursor: pointer; display: grid; place-items: center; }
.home-btn { top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; }
.info-btn { top: calc(env(safe-area-inset-top, 0px) + 12px); right: 56px; background: rgba(0,0,0,.24); color: #fff; border: 1px solid rgba(255,255,255,.9); font-size: 16px; }
.bottom-slider { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; min-height: calc(90px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 16px; overflow-x: auto; overflow-y: hidden; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(70,70,70,.94); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.bottom-slider::-webkit-scrollbar { display: none; }
.category-item, .product-item { flex: 0 0 72px; width: 72px; border: 0; background: transparent; color: #fff; text-align: center; cursor: pointer; padding: 0; }
.category-item img, .product-item img { width: 58px; height: 58px; object-fit: cover; border-radius: 50%; border: 2px dashed #ffe000; background: #fff; display: block; margin: 0 auto; }
.category-item span, .product-item span { display: block; margin-top: 4px; font-size: 10px; line-height: 1.08; white-space: normal; }
.back-btn { flex: 0 0 44px; width: 44px; height: 58px; border: 0; border-radius: 10px; background: #ffe000; color: #111; font-size: 36px; cursor: pointer; }
.product-list { display: flex; align-items: center; gap: 16px; }
.ar-native-btn { position: fixed; left: calc(50% - 74px); bottom: calc(110px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 95; border: 0; border-radius: 999px; background: #ffe000; color: #111; padding: 13px 16px; min-width: 136px; font-weight: 900; font-size: 14px; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.progress { position: fixed; left: 20px; right: 20px; top: calc(env(safe-area-inset-top, 0px) + 16px); height: 4px; z-index: 17; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.25); opacity: 0; transition: opacity .2s ease; }
.progress.visible { opacity: 1; }
.progress-bar { width: 0%; height: 100%; background: #ffe000; transition: width .15s ease; }
.unsupported { position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 54px); z-index: 22; padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,.72); color: #fff; font-size: 13px; line-height: 1.25; }
@media (max-width: 380px) { .card { width: 90vw; } .card-body { padding: 18px 16px; } .bottom-slider { gap: 12px; padding-left: 10px; padding-right: 10px; } .category-item, .product-item { flex-basis: 66px; width: 66px; } .category-item img, .product-item img { width: 54px; height: 54px; } }
@media (orientation: landscape) and (max-height: 520px) { .card { max-height: 92vh; } .card-header { height: 56px; } .card-body { padding: 14px 18px; } .card h1 { margin-bottom: 10px; } .card p { margin-bottom: 14px; } .bottom-slider { min-height: calc(76px + env(safe-area-inset-bottom, 0px)); } .category-item img, .product-item img { width: 48px; height: 48px; } .ar-native-btn { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }

.immersion-btn {
  position: fixed;
  left: calc(50% + 74px);
  bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 95;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #ffe000;
  padding: 13px 16px;
  min-width: 136px;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  border: 1px solid rgba(255,224,0,.75);
}

.trash-btn {
  position: fixed;
  right: 14px;
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  z-index: 10000;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #ffe600;
  color: #fff;
  font-size: 22px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

.confirm-card { width: min(86vw, 330px); }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions .main-btn { font-size: 18px; min-height: 48px; }
.confirm-no { background: #ddd; color: #222; }
.confirm-yes { background: #ffe600; color: #fff; }
.xr-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

@media (orientation: landscape) and (max-height: 520px) {
  .ar-native-btn, .immersion-btn { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

.ar-inline-status {
  margin: -2px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff3b0;
  color: #111;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
}

/* Botao/icone 3D estatico no informativo inicial */
.ar-3d-icon-btn {
  width: 100%;
  min-height: 94px;
  margin: -10px 0 12px;
  border: 0;
  border-radius: 14px;
  background: #111;
  color: #ffe000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,224,0,.55), 0 8px 20px rgba(0,0,0,.18);
}
.ar-3d-icon-btn strong { font-size: 16px; line-height: 1.1; }
.ar-3d-icon-btn small { color: #fff; font-size: 11px; opacity: .88; }
.secondary-start { min-height: 42px; font-size: 16px; background: #e7e7e7; color: #222; }
.cube-3d {
  position: relative;
  width: 34px;
  height: 34px;
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(34deg);
  margin-bottom: 4px;
}
.cube-3d, .cube-3d::before, .cube-3d::after, .cube-3d span {
  display: block;
}
.cube-3d span,
.cube-3d::before,
.cube-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffe000;
  border: 2px solid #fff;
  opacity: .96;
}
.cube-3d::before { transform: rotateY(90deg) translateZ(17px); filter: brightness(.85); }
.cube-3d::after { transform: rotateX(90deg) translateZ(17px); filter: brightness(1.15); }
.cube-3d span { transform: translateZ(17px); }

/* Durante WebXR: HTML fica sobre a camera, sem chamar Scene Viewer/Google AR. */
body.xr-active .bottom-slider,
body.xr-active .floating-btn,
body.xr-active .ar-native-btn,
body.xr-active .trash-btn,
body.xr-active .unsupported,
body.xr-active .modal {
  z-index: 2147483647;
}


body.xr-active .ar-native-btn {
  bottom: calc(110px + env(safe-area-inset-bottom, 0px));
}


.exit-ar-btn {
  position: fixed;
  right: 14px;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  z-index: 2147483647;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #ffe000;
  color: #111;
  padding: 0;
  font-weight: 900;
  font-size: 24px;
  line-height: 32px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

body.xr-active .exit-ar-btn,
body.xr-active .bottom-slider,
body.xr-active .product-list,
body.xr-active .category-item,
body.xr-active .product-item {
  pointer-events: auto;
}

body.xr-active .bottom-slider {
  display: flex;
}


/* v7: barra de categorias sempre acima do canvas WebXR quando a câmera estiver ativa */
body.xr-active #categorySlider:not(.hidden),
body.xr-active #productSlider:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}
body.xr-active .xr-canvas { z-index: 2 !important; }
body.xr-active #exitArBtn { display: block; z-index: 2147483647 !important; }

/* v8: sliders visiveis tambem no modo normal apos fechar os modais */
#categorySlider:not(.hidden),
#productSlider:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body:not(.xr-active) #categorySlider:not(.hidden),
body:not(.xr-active) #productSlider:not(.hidden) {
  z-index: 18 !important;
}
body.xr-active #categorySlider,
body.xr-active #productSlider {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}


/* v9: no modo normal, o slide fica acima do model-viewer assim que o modal fecha */
body:not(.xr-active) .bottom-slider:not(.hidden) {
  display: flex !important;
  z-index: 120 !important;
  pointer-events: auto !important;
}
body:not(.xr-active) .immersion-btn:not(.hidden),
body:not(.xr-active) .ar-native-btn:not(.hidden),
body:not(.xr-active) .floating-btn:not(.hidden) {
  z-index: 130 !important;
}
.product-item.is-active img {
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(255,224,0,.35);
}


/* v11: controles do objeto selecionado no modo imersivo */
.object-controls {
  position: fixed;
  left: 50%;
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2147483647;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.78);
  color: #ffe000;
  box-shadow: 0 8px 24px rgba(0,0,0,.38);
  pointer-events: auto;
}
.object-controls button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,224,0,.65);
  border-radius: 50%;
  background: #ffe000;
  color: #111;
  font-weight: 900;
  font-size: 20px;
}
.object-controls span {
  max-width: 120px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
}
body.xr-active .object-controls:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body:not(.xr-active) .object-controls { display: none !important; }
body.xr-active .xr-canvas { pointer-events: auto; }

/* v13: canvas WebXR nao bloqueia cliques ao sair; sliders e botoes ficam clicaveis */
body:not(.xr-active) .xr-canvas { display: none !important; pointer-events: none !important; }
body.xr-active .xr-canvas { display: block !important; pointer-events: none !important; }
.product-item.is-active img { border-style: solid; box-shadow: 0 0 0 3px rgba(255,224,0,.35); }


/* v14: botoes lado a lado e manipulacao mais responsiva */
body:not(.xr-active) .ar-native-btn:not(.hidden),
body:not(.xr-active) .immersion-btn:not(.hidden) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  pointer-events: auto !important;
}
body.xr-active .ar-native-btn,
body.xr-active .immersion-btn { display: none !important; }
body.xr-active { touch-action: none; }
@media (max-width: 380px) {
  .ar-native-btn { left: calc(50% - 67px); min-width: 124px; padding-left: 12px; padding-right: 12px; font-size: 13px; }
  .immersion-btn { left: calc(50% + 67px); min-width: 124px; padding-left: 12px; padding-right: 12px; font-size: 13px; }
}
body.xr-active .unsupported {
  top: calc(env(safe-area-inset-top, 0px) + 110px) !important;
}