/*
Theme Name: Celeste
Theme URI: https://seer.appzinplay.com
Author: appzinplay
Description: Funil "Soulmate Oracle" — quiz de 1 tap, resultado, chat com a persona Celeste Rowan. Templates hand-coded, portados do mockup navegável v4.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: celeste
*/

/* ==========================================================================
   Ported from reference/mockup-v4.html.
   The mockup rendered each "screen" inside a phone-frame demo shell; on the
   real site every template IS the whole page (mobile-first, ~480px column
   centered on the starry sky background), so the phone/screen chrome is
   replaced by a single `.shell` column that stretches the full viewport.
   ========================================================================== */

:root{
  --night:#12102a;
  --night-2:#1b1840;
  --card:#f6f3ec;
  --card-ink:#2a2438;
  --gold:#d9b36c;
  --lav:#b9a7e8;
  --mark:#c9503c;
  --ink-dim:#8e87ad;
  --msgr:#7b5cd6;
  --money:#e8c47c;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{background:var(--night)}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#e9e5f5;
  min-height:100vh;
  background:
    radial-gradient(1px 1px at 12% 22%, #fff9 0 1px, transparent 1px),
    radial-gradient(1px 1px at 78% 12%, #fff7 0 1px, transparent 1px),
    radial-gradient(1.5px 1.5px at 55% 38%, #fff6 0 1.5px, transparent 1.5px),
    radial-gradient(1px 1px at 30% 72%, #fff8 0 1px, transparent 1px),
    radial-gradient(1px 1px at 88% 58%, #fff6 0 1px, transparent 1px),
    radial-gradient(1.5px 1.5px at 65% 85%, #fff5 0 1.5px, transparent 1.5px),
    radial-gradient(ellipse 80% 60% at 50% -10%, #2a2260 0%, transparent 60%),
    linear-gradient(180deg,var(--night-2),var(--night) 55%);
  background-attachment:fixed;
}

img{max-width:100%;height:auto}

/* page column — replaces the mockup's .phone/.screen chrome */
.shell{
  max-width:480px;margin:0 auto;min-height:100vh;
  display:flex;flex-direction:column;position:relative;
}

/* ---- brand ---- */
.brand{
  text-align:center;padding:1.6rem 1rem .9rem;
  font-family:Didot,"Bodoni MT","Playfair Display",Georgia,serif;
  font-size:1.25rem;color:var(--gold);letter-spacing:.03em;
}
.brand .spark{color:var(--lav)}

/* ---- quiz card ---- */
.quiz-card{
  background:var(--card);color:var(--card-ink);
  margin:0 1.1rem;border-radius:16px;
  padding:1.5rem 1.25rem 1.3rem;text-align:center;
  box-shadow:0 18px 50px -12px #0009;
}
.rule-label{
  display:flex;align-items:center;gap:.6rem;justify-content:center;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:#7c5cc9;margin-bottom:.9rem;
}
.rule-label::before,.rule-label::after{content:"";height:1px;width:26px;background:#7c5cc955}
.quiz-card h2{
  font-family:Didot,"Bodoni MT","Playfair Display",Georgia,serif;
  font-weight:500;font-size:1.6rem;line-height:1.2;margin-bottom:.5rem;text-wrap:balance;
}
.quiz-card .hint{font-size:.9rem;color:#6d6584;margin-bottom:1.1rem}
.options{display:flex;gap:.65rem;justify-content:center}
.opt{
  flex:1;background:#fff;border:1px solid #d9d2c4;border-radius:10px;
  padding:.55rem .4rem .65rem;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.opt:hover{transform:translateY(-3px);box-shadow:0 10px 22px -8px #0006}
.opt:focus-visible,.btn-fb:focus-visible{outline:3px solid var(--msgr);outline-offset:2px}
.opt .letter{
  font-family:Didot,Georgia,serif;font-size:1.5rem;color:var(--mark);
  font-weight:700;line-height:1;margin-bottom:.3rem;display:block;
}
.opt svg{width:100%;height:auto;display:block}
.trust{font-size:.78rem;color:#8b8299;margin-top:1rem}

/* ---- legal / disclaimer (footer.php) ---- */
.legal{
  margin-top:auto;text-align:center;font-size:.68rem;color:#6f688d;
  padding:1.4rem 1.5rem 1.6rem;line-height:1.7;
}
.legal a{color:#8f86b5;text-decoration:none}

/* ---- accordions do quiz ---- */
.acc-zone{margin:1.2rem 1.1rem 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.acc{
  background:#ffffff0d;border:1px solid #ffffff1c;border-radius:10px;
  overflow:hidden;
}
.acc summary{
  cursor:pointer;list-style:none;
  font-size:.84rem;color:#cfc7ea;padding:.7rem .9rem;
  display:flex;justify-content:space-between;align-items:center;gap:.5rem;
}
.acc summary::after{content:"+";color:var(--gold);font-size:1rem;flex:0 0 auto}
.acc[open] summary::after{content:"\2013"}
.acc summary::-webkit-details-marker{display:none}
.acc p{font-size:.8rem;line-height:1.65;color:var(--ink-dim);padding:0 .9rem .8rem}

/* ---- result / ritual article ---- */
.art{background:#faf8f3;color:#2a2438;flex:1;display:flex;flex-direction:column}
.art-head{
  background:linear-gradient(180deg,#221d4e,#171334);
  text-align:center;padding:1rem 1rem .9rem;
}
.art-head .b{font-family:Didot,Georgia,serif;color:var(--gold);font-size:1.05rem}
.art-body{padding:1.3rem 1.2rem 2rem;flex:1}
.part-label{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#7c5cc9;margin-bottom:.6rem;
}
.art h1,.art h2{
  font-family:Didot,"Bodoni MT",Georgia,serif;font-weight:500;
  font-size:1.6rem;line-height:1.22;margin-bottom:.8rem;text-wrap:balance;
}
.art p{font-size:.92rem;line-height:1.68;color:#43405a;margin-bottom:.9rem}
.art p b{color:#2a2438}

.gam-slot{
  min-height:280px;width:336px;max-width:100%;margin:1.1rem auto;
  display:flex;align-items:center;justify-content:center;
}

.btn-next{
  display:block;width:100%;text-align:center;text-decoration:none;
  background:linear-gradient(135deg,#8a63e8,#5f3fd0);color:#fff;
  border:none;border-radius:10px;font-size:1rem;font-weight:600;
  padding:.9rem 1rem;cursor:pointer;
}
.btn-next:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn-next.gold{background:linear-gradient(135deg,#e2bd77,#b98d3c);color:#241c08}
.next-fine{text-align:center;font-size:.72rem;color:#8b8299;margin-top:.5rem;margin-bottom:1.1rem}

.celeste-strip{
  display:flex;align-items:center;gap:.65rem;background:#fff;border:1px solid #e2ddd0;
  border-radius:12px;padding:.8rem .9rem;margin:1.1rem 0 .8rem;
}
.celeste-strip .avatar-s{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%, #e8d9b8, #a8813f 70%);
  display:grid;place-items:center;font-family:Didot,Georgia,serif;font-size:.9rem;color:#3a2c10;
  position:relative;
}
.celeste-strip .avatar-s::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;
  border-radius:50%;background:#3ecf6e;border:2px solid #fff;
}
.celeste-strip .t{font-size:.8rem;line-height:1.45;color:#43405a}
.celeste-strip .t b{color:#2a2438}

/* ---- floating chat CTA (result / single) ---- */
.float-cta-wrap{
  position:fixed;left:0;right:0;bottom:.8rem;
  display:flex;justify-content:center;padding:0 .8rem;
  pointer-events:none;z-index:40;
}
.float-cta{
  pointer-events:auto;
  width:100%;max-width:454px;
  display:flex;align-items:center;gap:.65rem;
  background:linear-gradient(135deg,#e2bd77,#b98d3c);color:#241c08;
  border:none;border-radius:99px;cursor:pointer;text-decoration:none;
  padding:.6rem .95rem .6rem .55rem;
  box-shadow:0 12px 30px -6px #000b;
  font-size:.9rem;font-weight:600;text-align:left;
  transform:translateY(120%);opacity:0;
  transition:transform .3s ease, opacity .3s ease;
}
.float-cta.showing{transform:none;opacity:1}
@media (prefers-reduced-motion: reduce){.float-cta{transition:none}}
.float-cta .avatar-s{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%, #f4ead2, #8a6526 70%);
  display:grid;place-items:center;font-family:Didot,Georgia,serif;font-size:.9rem;color:#3a2c10;
  position:relative;
}
.float-cta .avatar-s::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;
  border-radius:50%;background:#3ecf6e;border:2px solid #d8b169;
}
.float-cta .sub-t{display:block;font-size:.68rem;font-weight:500;color:#5c4310}
.float-cta:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ---- chat ---- */
.chat-head{
  display:flex;align-items:center;gap:.75rem;
  padding:.9rem 1.1rem;background:#171334;border-bottom:1px solid #ffffff14;
}
.avatar{
  width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e8d9b8, #a8813f 70%);
  display:grid;place-items:center;
  font-family:Didot,Georgia,serif;font-size:1.1rem;color:#3a2c10;
  position:relative;flex:0 0 auto;
}
.avatar::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;
  border-radius:50%;background:#3ecf6e;border:2px solid #171334;
}
.chat-head .name{font-family:Didot,Georgia,serif;font-size:1.05rem;color:#f3eede}
.chat-head .status{font-size:.76rem;color:#3ecf6e}

.msgs{flex:1;overflow-y:auto;padding:1.1rem 1rem;display:flex;flex-direction:column;gap:.6rem}
.sysline{text-align:center;font-size:.7rem;color:#7d75a0;margin:.2rem 0 .4rem}
.bubble{
  max-width:82%;padding:.7rem .9rem;border-radius:14px;
  font-size:.9rem;line-height:1.5;animation:pop .25s ease;
}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.bubble{animation:none}}
.bubble.seer{background:#f6f3ec;color:#2a2438;border-bottom-left-radius:4px;align-self:flex-start}
.bubble.user{background:var(--msgr);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.typing{
  align-self:flex-start;background:#f6f3ec;border-radius:14px;border-bottom-left-radius:4px;
  padding:.75rem .95rem;display:flex;gap:4px;
}
.typing i{width:6px;height:6px;border-radius:50%;background:#a79ec2;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion: reduce){.typing i{animation:none;opacity:.7}}

.cta-card{
  align-self:center;background:#fff;color:#2a2438;border-radius:14px;
  padding:1.1rem;text-align:center;max-width:88%;
  box-shadow:0 14px 34px -10px #0008;animation:pop .3s ease;
}
.cta-card p{font-size:.86rem;line-height:1.5;margin-bottom:.75rem}
.btn-msgr{
  display:inline-block;width:100%;text-decoration:none;
  background:linear-gradient(135deg,#8a63e8,#5f3fd0);
  color:#fff;border:none;border-radius:10px;
  font-size:.95rem;font-weight:600;padding:.75rem 1rem;cursor:pointer;
}
.btn-msgr:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cta-fine{font-size:.68rem;color:#8b8299;margin-top:.55rem}

.composer{
  display:flex;gap:.55rem;padding:.75rem .85rem 1.1rem;background:#171334;border-top:1px solid #ffffff14;
}
.composer input{
  flex:1;background:#221d4e;border:1px solid #ffffff22;border-radius:99px;
  padding:.68rem 1rem;color:#efeafd;
  /* 16px é o mínimo que impede o auto-zoom do iOS Safari no foco do input */
  font-size:16px;
}
.composer input::placeholder{color:#7d75a0}
.composer input:focus-visible{outline:2px solid var(--msgr)}
.composer input:disabled{opacity:.6}
.composer button{
  background:var(--msgr);border:none;border-radius:50%;width:42px;height:42px;
  color:#fff;font-size:1.05rem;cursor:pointer;flex:0 0 auto;
}
.composer button:disabled{opacity:.6;cursor:default}

/* ---- index.php fallback loop ---- */
.site-index{flex:1;padding:0 1.1rem 2rem}
.post-list{display:flex;flex-direction:column;gap:1.2rem}
.post-list-item{
  background:#ffffff0d;border:1px solid #ffffff1c;border-radius:12px;padding:1rem 1.1rem;
}
.post-list-item h2{
  font-family:Didot,"Bodoni MT","Playfair Display",Georgia,serif;
  font-weight:500;font-size:1.15rem;margin-bottom:.4rem;
}
.post-list-item h2 a{color:var(--gold);text-decoration:none}
.post-list-excerpt{font-size:.85rem;line-height:1.6;color:var(--ink-dim)}

/* ---- chat app-like (fix teclado mobile: página travada na viewport,
        só a lista de mensagens rola; teclado não desloca o layout) ---- */
.chat-page .shell{
  height:100vh;
  height:100dvh;
  min-height:0;
  overflow:hidden;
}
.chat-page .msgs{min-height:0}
.chat-fine{
  text-align:center;font-size:.62rem;color:#6f688d;
  background:#171334;padding:0 0 .55rem;margin:0;
}
/* no chat, o disclaimer compacto do composer substitui o footer legal
   (que roubaria ~90px da lista de mensagens no layout travado) */
.chat-page .legal{display:none}