/* TagPet · camada de embelezamento
   Só visual: não altera estrutura, textos nem funções.
   Carregar DEPOIS de style.css, update.css e editor.css.
   As cores vêm das variáveis abaixo; cada tema (tagpet-temas.css) só troca os valores. */

:root{
  /* Layout 1 · Clássico TagPet */
  --tp-primary:#102060;      /* botões de contato */
  --tp-primary-2:#1d3a9e;
  --tp-on-primary:#ffffff;
  --tp-accent:#f88030;       /* pílulas, anel da foto, coração */
  --tp-on-accent:#ffffff;
  --tp-accent-soft:#ffe9d6;
  --tp-accent-ink:#b4531a;
  --tp-heading:#102060;
  --tp-text:#14213d;
  --tp-body-text:#46506a;
  --tp-muted:#6a7590;
  --tp-paper:#fbf8f4;
  --tp-glow:#ffe3cb;
  --tp-glow-2:#fff1e4;
  --tp-card:#ffffff;
  --tp-line:#ece6de;
  --tp-chip:rgba(255,255,255,.75);
  --tp-reward-a:#fff6e8;
  --tp-reward-b:#ffe2c2;
  --tp-reward-line:#ffcf9e;
  --tp-reward-ink:#a2510f;
  --tp-reward-amount:#e0691c;
  --tp-alert-a:#f0465a;
  --tp-alert-b:#c8263b;
  --tp-alert-rgb:240,70,90;
  --tp-shadow-rgb:16,32,96;
  --tp-logo:#102060;
  --tp-logo-accent:#f88030;
  --tp-nav-text:#ffb27d;
  --tp-fx:0 0 0 0 transparent;          /* brilho extra (coleções) */
  --tp-heading-glow:none;
  --tp-display:"Fredoka","Nunito",ui-rounded,system-ui,sans-serif;
  --tp-body:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  --tp-shadow:0 10px 30px -12px rgba(var(--tp-shadow-rgb),.28);
  --tp-shadow-sm:0 4px 14px -6px rgba(var(--tp-shadow-rgb),.22);
}

/* ---------- fundo da página ---------- */
body.visitor-mode{
  background:
    radial-gradient(120% 420px at 50% -60px,var(--tp-glow) 0%,var(--tp-glow-2) 38%,rgba(0,0,0,0) 72%),
    var(--tp-paper)!important;
  color:var(--tp-text);
  font-family:var(--tp-body);
  min-height:100vh;
  transition:background-color .35s ease;
}
.visitor-mode .profile-surface.iphone{background:transparent!important}
.visitor-mode #phone-screen,
.visitor-mode #phone-screen .phone-inner,
.visitor-mode .phone-bottom-nav{background:transparent!important;box-shadow:none!important}
.visitor-mode #phone-screen{font-family:var(--tp-body);color:var(--tp-text)}
.visitor-mode #phone-screen button{font-family:var(--tp-body)}

/* ---------- marca ---------- */
.visitor-mode .profile-home-brand{padding:14px 0 4px!important}
.visitor-mode .profile-home-brand .profile-brand{font-size:24px!important}
.visitor-mode #phone-screen .profile-brand.logo{color:var(--tp-logo)!important}
.visitor-mode #phone-screen .profile-brand.logo>span{color:var(--tp-logo-accent)!important}

/* ---------- foto principal ---------- */
.visitor-mode #phone-screen .phone-portrait{
  width:184px!important;height:184px!important;border-radius:50%!important;
  overflow:hidden;position:relative;
  border:6px solid var(--tp-card);
  box-shadow:0 0 0 3px var(--tp-accent),var(--tp-fx),0 18px 40px -14px rgba(var(--tp-shadow-rgb),.45)!important;
  animation:tp-rise .7s cubic-bezier(.2,.8,.2,1) both;
}

/* ---------- identidade ---------- */
.visitor-mode #phone-screen .phone-example{
  display:inline-block;margin:6px auto 8px!important;
  padding:5px 12px;border-radius:999px;
  background:var(--tp-accent-soft);color:var(--tp-accent-ink)!important;
  font-size:11px!important;font-weight:800;letter-spacing:.14em!important;
}
.visitor-mode #phone-screen .identity-top>div{display:flex;flex-direction:column;align-items:center}
.visitor-mode #phone-screen .identity h3{
  font-family:var(--tp-display);font-weight:700;
  font-size:44px!important;letter-spacing:-.01em;line-height:1.05;
  color:var(--tp-heading)!important;margin:0 0 10px!important;
  text-shadow:var(--tp-heading-glow);
}
.visitor-mode #phone-screen .identity h3>span{
  display:inline-block;margin-left:6px;font-size:22px!important;color:var(--tp-accent);
  animation:tp-beat 1.8s ease-in-out infinite;transform-origin:center;
}
.visitor-mode #phone-screen .pet-specs{
  display:inline-block!important;max-width:100%;
  padding:8px 14px;border-radius:14px;
  background:var(--tp-chip);border:1px solid var(--tp-line);
  color:var(--tp-muted)!important;font-size:12.5px!important;font-weight:600;line-height:1.55;
  text-align:center;
}
.visitor-mode #phone-screen .pet-intro{
  margin:20px 0 14px!important;font-size:15px!important;color:var(--tp-muted)!important;
}
.visitor-mode #phone-screen .pet-intro strong{
  display:inline-block;margin-top:2px;
  font-family:var(--tp-display);font-weight:600;font-size:20px;color:var(--tp-heading);
}

/* ---------- espaçamento dos botões ---------- */
.visitor-mode #phone-screen .content-row{margin:11px 0!important}

/* ---------- contatos ---------- */
.visitor-mode #phone-screen .phone-contact,
.visitor-mode #phone-screen .phone-contact.secondary{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:58px!important;padding:14px 16px 14px 18px!important;
  border-radius:18px!important;border:0;
  background:linear-gradient(135deg,var(--tp-primary-2) 0%,var(--tp-primary) 100%)!important;
  color:var(--tp-on-primary)!important;font-size:16px!important;font-weight:800!important;
  box-shadow:var(--tp-fx),var(--tp-shadow)!important;
  transition:transform .18s ease,box-shadow .18s ease;
}
.visitor-mode #phone-screen .phone-contact span{
  font-size:12px!important;font-weight:800!important;opacity:1!important;
  padding:6px 12px;border-radius:999px;
  background:var(--tp-accent);color:var(--tp-on-accent);
}
/* reflexo suave no lugar do risco de luz */
.visitor-mode #phone-screen .phone-contact::before{
  content:''!important;position:absolute!important;inset:0!important;z-index:-1!important;
  border-radius:inherit;padding:0!important;-webkit-mask:none!important;mask:none!important;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.16) 48%,transparent 66%)!important;
  background-size:250% 100%!important;opacity:1!important;
  animation:tp-shine 4.5s ease-in-out infinite!important;
}
.visitor-mode #phone-screen .phone-contact::after{display:none!important;content:none!important;animation:none!important}
.visitor-mode #phone-screen .phone-contact:hover{transform:translateY(-2px)}
.visitor-mode #phone-screen .phone-contact:active{transform:translateY(0) scale(.99)}

/* ---------- recompensa ---------- */
.visitor-mode #phone-screen .phone-reward{
  min-height:66px!important;padding:14px 18px!important;border-radius:18px!important;
  background:linear-gradient(135deg,var(--tp-reward-a) 0%,var(--tp-reward-b) 100%)!important;
  border:1.5px solid var(--tp-reward-line)!important;
  color:var(--tp-reward-ink)!important;font-size:14px!important;font-weight:800!important;
  letter-spacing:.02em;
  box-shadow:0 10px 24px -14px rgba(var(--tp-shadow-rgb),.5)!important;
}
.visitor-mode #phone-screen .phone-reward strong{
  font-family:var(--tp-display);font-weight:700;
  font-size:28px!important;color:var(--tp-reward-amount)!important;letter-spacing:-.01em;
}

/* ---------- emergência: pulso no lugar do balanço ---------- */
.visitor-mode #phone-screen .phone-emergency{
  min-height:56px!important;padding:14px 18px!important;border-radius:18px!important;
  text-align:center!important;
  background:linear-gradient(135deg,var(--tp-alert-a) 0%,var(--tp-alert-b) 100%)!important;color:#fff!important;
  font-size:15px!important;font-weight:800!important;letter-spacing:.01em;
  transform-origin:center;
  /* 08/11: balanço (pedido do Felipe), igual ao da Central; a vitrine do site de vendas continua com o pulso */
  animation:tagpet-share-rock 2.4s ease-in-out infinite!important;
}
.visitor-mode #phone-screen .phone-emergency:hover{filter:brightness(1.05)}

/* ---------- galeria ---------- */
.visitor-mode #phone-screen .home-left{margin-bottom:30px!important}
.visitor-mode #phone-screen .phone-section-heading{
  font-family:var(--tp-display);font-weight:600;
  font-size:22px!important;color:var(--tp-heading)!important;
  display:flex;align-items:center;gap:10px;text-shadow:var(--tp-heading-glow);
}
.visitor-mode #phone-screen .phone-section-heading::after{
  content:''!important;display:block!important;flex:0 0 32px;height:4px!important;
  margin:0!important;border-radius:4px;background:var(--tp-accent)!important;
}
.visitor-mode #phone-screen .pet-photo-grid{gap:10px!important;margin:14px 0 24px!important}
.visitor-mode #phone-screen .photo-content{border-radius:18px;transition:transform .2s ease}
.visitor-mode #phone-screen .photo-content .picture{
  border-radius:18px!important;overflow:hidden;
  border:3px solid var(--tp-card);
  box-shadow:var(--tp-shadow-sm);
}
.visitor-mode #phone-screen .photo-content:hover{transform:translateY(-3px) rotate(-1deg)}
.visitor-mode #phone-screen .photo-tile:nth-child(even) .photo-content:hover{transform:translateY(-3px) rotate(1deg)}

/* ---------- menus de baixo ---------- */
.visitor-mode #phone-screen .phone-menu{
  position:relative;
  min-height:60px!important;padding:14px 44px 14px 18px!important;border-radius:18px!important;
  background:var(--tp-card)!important;border:1px solid var(--tp-line)!important;
  color:var(--tp-heading)!important;font-size:16px!important;font-weight:800!important;
  box-shadow:var(--tp-shadow-sm)!important;
}
.visitor-mode #phone-screen .phone-menu span{
  font-size:12px!important;font-weight:700;color:var(--tp-accent-ink)!important;
  background:var(--tp-accent-soft);padding:5px 10px;border-radius:999px;
}
.visitor-mode #phone-screen .phone-menu::after{
  content:'';position:absolute;right:18px;top:50%;
  width:8px;height:8px;margin-top:-5px;
  border-right:2.5px solid var(--tp-heading);border-top:2.5px solid var(--tp-heading);
  transform:rotate(45deg);opacity:.55;transition:transform .18s ease,opacity .18s ease;
}
.visitor-mode #phone-screen .phone-menu:hover::after{transform:translateX(3px) rotate(45deg);opacity:1}

/* ---------- rodapé ---------- */
.visitor-mode #phone-screen .phone-end{
  justify-content:center!important;padding:26px 0 8px!important;
  color:var(--tp-muted)!important;font-size:12px!important;font-weight:600;
}

/* ---------- páginas internas ---------- */
.visitor-mode #phone-screen .phone-nav{
  background:var(--tp-paper)!important;
  border-bottom:1px solid var(--tp-line)!important;
}
.visitor-mode #phone-screen .phone-nav button,
.visitor-mode #phone-screen .phone-bottom-nav button[data-view="home"]{
  background:linear-gradient(135deg,var(--tp-primary-2),var(--tp-primary))!important;
  color:var(--tp-nav-text)!important;border:0!important;border-radius:999px!important;
  font-weight:800!important;letter-spacing:.06em;box-shadow:var(--tp-fx);
}
.visitor-mode #phone-screen .phone-nav button{padding:8px 14px!important;font-size:11px!important}
.visitor-mode #phone-screen .phone-nav>span{font-family:var(--tp-display);font-weight:600;color:var(--tp-heading)}
.visitor-mode #phone-screen .phone-page h4,
.visitor-mode #phone-screen .phone-poster h4{
  font-family:var(--tp-display);font-weight:700;color:var(--tp-heading)!important;
  line-height:1.15;text-wrap:balance;text-shadow:var(--tp-heading-glow);
}
.visitor-mode #phone-screen .phone-page h4{font-size:26px!important}
.visitor-mode #phone-screen .phone-page p,
.visitor-mode #phone-screen .phone-poster p{color:var(--tp-body-text)!important}
.visitor-mode #phone-screen .phone-photo-large{
  border-radius:24px!important;overflow:hidden;border:5px solid var(--tp-card);
  box-shadow:var(--tp-fx),var(--tp-shadow)!important;
}
.visitor-mode #phone-screen .phone-info{gap:10px!important}
.visitor-mode #phone-screen .phone-info div{
  background:var(--tp-card)!important;border:1px solid var(--tp-line);border-radius:16px!important;
  color:var(--tp-muted)!important;font-weight:600;box-shadow:var(--tp-shadow-sm);
}
.visitor-mode #phone-screen .phone-info b{color:var(--tp-heading)!important;font-weight:800}
.visitor-mode #phone-screen .editable-card{
  background:var(--tp-card);border:1px solid var(--tp-line)!important;border-radius:18px!important;
  padding:16px 18px!important;box-shadow:var(--tp-shadow-sm);
}
.visitor-mode #phone-screen .editable-card strong{
  font-family:var(--tp-display);font-weight:600;font-size:17px!important;color:var(--tp-heading);
}
.visitor-mode #phone-screen .editable-card p{color:var(--tp-body-text);line-height:1.6}
.visitor-mode #phone-screen .map-actions a,
.visitor-mode #phone-screen .map-actions a:hover{
  border-radius:999px!important;padding:8px 14px!important;font-size:12px!important;
  background:var(--tp-primary)!important;border-color:var(--tp-primary)!important;color:var(--tp-on-primary)!important;
}
.visitor-mode #phone-screen .button{border-radius:16px!important;font-weight:800!important}
.visitor-mode #phone-screen .button.blue{
  background:linear-gradient(135deg,var(--tp-primary-2),var(--tp-primary))!important;color:var(--tp-on-primary)!important;
  box-shadow:var(--tp-fx);
}
.visitor-mode #phone-screen .button.orange{background:var(--tp-accent)!important;color:var(--tp-on-accent)!important}
.visitor-mode #phone-screen .share-buttons button,
.visitor-mode #phone-screen .share-choice button,
.visitor-mode #phone-screen .download-choice button{
  border-radius:14px!important;background:var(--tp-card)!important;border:1px solid var(--tp-line)!important;
  color:var(--tp-heading)!important;font-weight:800!important;box-shadow:var(--tp-shadow-sm);
}
.visitor-mode #phone-screen .share-text{
  background:var(--tp-card)!important;border:1px solid var(--tp-line)!important;border-radius:16px!important;
  color:var(--tp-body-text)!important;
}
.visitor-mode #phone-screen .phone-feedback{color:var(--tp-muted)!important}
.visitor-mode #phone-screen .phone-poster{
  background:var(--tp-card)!important;border:1px solid var(--tp-line);border-radius:22px!important;box-shadow:var(--tp-shadow);
}
.visitor-mode #phone-screen .phone-poster .picture{border-radius:18px!important;overflow:hidden}
.visitor-mode #phone-screen .phone-poster .reward-inline{
  border-radius:12px!important;background:linear-gradient(135deg,var(--tp-alert-a),var(--tp-alert-b))!important;color:#fff!important;
}
.visitor-mode #phone-screen .photo-pagination{color:var(--tp-muted)}
.visitor-mode #phone-screen .photo-pagination button{
  border-radius:14px!important;background:var(--tp-card)!important;border:1px solid var(--tp-line)!important;
  color:var(--tp-heading)!important;font-weight:800!important;
}
.visitor-mode .phone-bottom-nav{border-top-color:var(--tp-line)!important}

/* ---------- foco visível ---------- */
.visitor-mode #phone-screen button:focus-visible,
.visitor-mode #phone-screen a:focus-visible{outline:3px solid var(--tp-accent);outline-offset:3px}

/* ---------- animações ---------- */
@keyframes tp-rise{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tp-beat{0%,100%{transform:scale(1)}12%{transform:scale(1.25)}24%{transform:scale(1)}36%{transform:scale(1.18)}48%{transform:scale(1)}}
@keyframes tp-shine{0%{background-position:150% 0}55%,100%{background-position:-60% 0}}
@keyframes tp-alert{
  0%{box-shadow:0 10px 24px -12px rgba(var(--tp-alert-rgb),.7),0 0 0 0 rgba(var(--tp-alert-rgb),.45)}
  70%{box-shadow:0 10px 24px -12px rgba(var(--tp-alert-rgb),.7),0 0 0 12px rgba(var(--tp-alert-rgb),0)}
  100%{box-shadow:0 10px 24px -12px rgba(var(--tp-alert-rgb),.7),0 0 0 0 rgba(var(--tp-alert-rgb),0)}
}
@media (prefers-reduced-motion:reduce){
  .visitor-mode #phone-screen *,
  .visitor-mode #phone-screen *::before,
  .visitor-mode #phone-screen *::after{animation:none!important;transition:none!important}
}