/* =====================================================
   Astral do Amor – Frontend CSS
   Prefixo: ane-
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Nunito:wght@400;500;600;700&display=swap');

:root {
  --ane-primary:     #e91e8c;
  --ane-secondary:   #ff6b35;
  --ane-accent:      #9b59b6;
  --ane-bg:          #fff5fb;
  --ane-card-bg:     #ffffff;
  --ane-text:        #2d1a2e;
  --ane-text-light:  #7b5e7b;
  --ane-border:      #f0d6ea;
  --ane-shadow:      0 20px 60px rgba(233,30,140,.15);
  --ane-radius:      20px;
  --ane-radius-sm:   12px;
  --ane-font-title:  'Playfair Display', serif;
  --ane-font-body:   'Nunito', sans-serif;
  --ane-transition:  .3s cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper ──────────────────────────────────────── */
.ane-astral-wrap {
  font-family: var(--ane-font-body);
  max-width: 680px;
  margin: 2rem auto;
  padding: 0 1rem;
  position: relative;
  color: var(--ane-text);
}

/* ── Corações flutuantes ──────────────────────────── */
.ane-hearts-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.ane-heart {
  position: absolute;
  font-size: 1.4rem;
  opacity: 0;
  animation: aneFloatHeart 8s ease-in infinite;
  bottom: -10%;
}

.ane-heart:nth-child(1)  { left:  5%; animation-delay: 0s;   animation-duration: 7s;  font-size: 1rem; }
.ane-heart:nth-child(2)  { left: 12%; animation-delay: 1.2s; animation-duration: 9s; }
.ane-heart:nth-child(3)  { left: 20%; animation-delay: 0.5s; animation-duration: 6s;  font-size: 1.8rem; }
.ane-heart:nth-child(4)  { left: 35%; animation-delay: 2.1s; animation-duration: 8s;  font-size: .9rem; }
.ane-heart:nth-child(5)  { left: 50%; animation-delay: 0.8s; animation-duration: 7.5s; }
.ane-heart:nth-child(6)  { left: 62%; animation-delay: 3s;   animation-duration: 9s;  font-size: 1.6rem; }
.ane-heart:nth-child(7)  { left: 72%; animation-delay: 1.5s; animation-duration: 6.5s; font-size: .8rem; }
.ane-heart:nth-child(8)  { left: 80%; animation-delay: 0.3s; animation-duration: 8.5s; }
.ane-heart:nth-child(9)  { left: 88%; animation-delay: 2.4s; animation-duration: 7s;  font-size: 2rem; }
.ane-heart:nth-child(10) { left: 94%; animation-delay: 1.1s; animation-duration: 9.5s; font-size: .7rem; }
.ane-heart:nth-child(11) { left: 45%; animation-delay: 4s;   animation-duration: 6s; }
.ane-heart:nth-child(12) { left: 28%; animation-delay: 3.5s; animation-duration: 8s;  font-size: 1.2rem; }

@keyframes aneFloatHeart {
  0%   { transform: translateY(0) rotate(-10deg); opacity: 0; }
  10%  { opacity: .8; }
  90%  { opacity: .3; }
  100% { transform: translateY(-110vh) rotate(15deg); opacity: 0; }
}

/* ── Card ─────────────────────────────────────────── */
.ane-card {
  position: relative;
  z-index: 1;
  background: var(--ane-card-bg);
  border-radius: var(--ane-radius);
  box-shadow: var(--ane-shadow);
  overflow: hidden;
  border: 1px solid var(--ane-border);
}

/* ── Header do card ───────────────────────────────── */
.ane-card-header {
  background: linear-gradient(135deg, var(--ane-primary) 0%, var(--ane-secondary) 100%);
  padding: 2rem 2rem 1.6rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.ane-card-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='160' cy='30' r='80' fill='rgba(255,255,255,.06)'/%3E%3Ccircle cx='30' cy='150' r='60' fill='rgba(255,255,255,.04)'/%3E%3C/svg%3E") no-repeat center/cover;
}

.ane-titulo {
  font-family: var(--ane-font-title);
  font-size: 1.9rem;
  margin: 0 0 .3rem;
  position: relative;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.ane-subtitulo {
  font-size: .95rem;
  opacity: .9;
  margin: 0 0 .8rem;
  position: relative;
}

.ane-contador {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(6px);
  border-radius: 50px;
  padding: .35rem 1rem;
  font-size: .85rem;
  position: relative;
}

.ane-contador-num {
  font-weight: 700;
  font-size: 1rem;
}

/* ── Formulário ───────────────────────────────────── */
.ane-form {
  padding: 1.8rem 2rem 2rem;
}

.ane-field {
  margin-bottom: 1.6rem;
}

.ane-label {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  color: var(--ane-text);
  margin-bottom: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .78rem;
}

/* ── Grid de signos ───────────────────────────────── */
.ane-signo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .5rem;
}

@media (max-width: 480px) {
  .ane-signo-grid { grid-template-columns: repeat(4, 1fr); }
}

.ane-signo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .6rem .3rem;
  border: 2px solid var(--ane-border);
  border-radius: var(--ane-radius-sm);
  background: #fff;
  cursor: pointer;
  transition: var(--ane-transition);
  font-family: var(--ane-font-body);
}

.ane-signo-btn:hover {
  border-color: var(--ane-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(233,30,140,.15);
}

.ane-signo-btn.ane-selecionado {
  border-color: var(--ane-primary);
  background: linear-gradient(135deg, #ffe0f5 0%, #fff0e6 100%);
  box-shadow: 0 4px 16px rgba(233,30,140,.2);
  transform: translateY(-3px);
}

.ane-signo-emoji { font-size: 1.4rem; line-height: 1; }
.ane-signo-nome  { font-size: .62rem; color: var(--ane-text-light); font-weight: 600; }

/* ── Grid de cores ────────────────────────────────── */
.ane-cor-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ane-cor-btn {
  padding: .45rem .9rem;
  border: 2px solid var(--ane-border);
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
  font-size: .82rem;
  font-family: var(--ane-font-body);
  font-weight: 600;
  transition: var(--ane-transition);
  color: var(--ane-text);
}

.ane-cor-btn:hover,
.ane-cor-btn.ane-selecionado {
  border-color: var(--ane-primary);
  background: linear-gradient(135deg, #ffe0f5, #fff0e6);
  color: var(--ane-primary);
  transform: translateY(-1px);
}

/* ── Botões de seleção genéricos ──────────────────── */
.ane-select-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ane-select-btn {
  padding: .5rem 1rem;
  border: 2px solid var(--ane-border);
  border-radius: var(--ane-radius-sm);
  background: #fff;
  cursor: pointer;
  font-size: .84rem;
  font-family: var(--ane-font-body);
  font-weight: 600;
  transition: var(--ane-transition);
  color: var(--ane-text);
}

.ane-select-btn:hover,
.ane-select-btn.ane-selecionado {
  border-color: var(--ane-primary);
  background: linear-gradient(135deg, #ffe0f5, #fff0e6);
  color: var(--ane-primary);
}

/* ── Range slider ─────────────────────────────────── */
.ane-range-wrap { padding: .4rem 0; }

.ane-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ane-primary) var(--ane-range-pct, 40%), var(--ane-border) 0);
  outline: none;
  cursor: pointer;
}

.ane-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ane-primary);
  box-shadow: 0 2px 8px rgba(233,30,140,.4);
  cursor: pointer;
  transition: transform .2s;
}

.ane-range::-webkit-slider-thumb:hover { transform: scale(1.2); }

.ane-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--ane-text-light);
  margin-top: .4rem;
}

.ane-intens-valor {
  font-weight: 700;
  color: var(--ane-primary);
  font-size: 1.1rem;
  margin-left: .4rem;
}

/* ── Botão principal ──────────────────────────────── */
.ane-btn-principal {
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: var(--ane-radius-sm);
  background: linear-gradient(135deg, var(--ane-primary), var(--ane-secondary));
  color: #fff;
  font-family: var(--ane-font-body);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--ane-transition);
  box-shadow: 0 6px 20px rgba(233,30,140,.35);
  letter-spacing: .03em;
  margin-top: .5rem;
}

.ane-btn-principal:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(233,30,140,.45);
}

.ane-btn-principal:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Resultado ────────────────────────────────────── */
.ane-resultado {
  padding: 2rem;
  animation: aneFadeUp .5s ease;
}

@keyframes aneFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ane-resultado-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.ane-signo-display {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: linear-gradient(135deg, #ffe0f5, #fff0e6);
  border-radius: 50px;
  padding: .5rem 1.2rem;
  font-weight: 700;
  color: var(--ane-primary);
  font-size: 1rem;
}

.ane-signo-emoji-big { font-size: 1.6rem; }

/* ── Termômetro ───────────────────────────────────── */
.ane-termometro-wrap {
  text-align: center;
  margin: 1.5rem 0;
}

.ane-temp-numero {
  font-family: var(--ane-font-title);
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--ane-primary);
  line-height: 1;
  margin-bottom: .5rem;
}

.ane-grau {
  font-size: 2.5rem;
  vertical-align: super;
}

.ane-termometro {
  width: 100%;
  height: 18px;
  background: var(--ane-border);
  border-radius: 9px;
  overflow: hidden;
  margin: .8rem 0;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.08);
}

.ane-termometro-fill {
  height: 100%;
  width: 0%;
  border-radius: 9px;
  transition: width 1.5s cubic-bezier(.4,0,.2,1);
  background: linear-gradient(90deg, #74b9ff, #fd79a8, #e17055, #d63031);
}

.ane-categoria {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ane-text);
  margin-top: .3rem;
}

.ane-cat-desc {
  text-align: center;
  color: var(--ane-text-light);
  font-size: .92rem;
  margin: .5rem 0 1.5rem;
}

/* ── Frase motivacional ───────────────────────────── */
.ane-frase-box {
  background: linear-gradient(135deg, #ffe0f5 0%, #fff0e6 100%);
  border-left: 4px solid var(--ane-primary);
  border-radius: 0 var(--ane-radius-sm) var(--ane-radius-sm) 0;
  padding: 1.2rem 1.5rem;
  margin: 1rem 0;
  position: relative;
}

.ane-aspas {
  font-family: var(--ane-font-title);
  font-size: 2.5rem;
  color: var(--ane-primary);
  opacity: .4;
  line-height: 1;
  display: block;
  height: 1rem;
}

.ane-aspas:first-child { margin-bottom: -.5rem; }
.ane-aspas:last-child  { text-align: right; margin-top: -.5rem; }

.ane-frase {
  font-family: var(--ane-font-title);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ane-text);
  margin: .4rem 0;
  line-height: 1.6;
}

/* ── Conselho e compatibilidade ───────────────────── */
.ane-conselho-box,
.ane-compat-box {
  background: #fafafa;
  border: 1px solid var(--ane-border);
  border-radius: var(--ane-radius-sm);
  padding: 1.2rem 1.5rem;
  margin: 1rem 0;
}

.ane-conselho-box h4,
.ane-compat-box h4,
.ane-share-box h4,
.ane-ranking-box h4 {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ane-text-light);
  margin: 0 0 .7rem;
}

.ane-conselho-box p { margin: 0; color: var(--ane-text); line-height: 1.6; }

.ane-compat-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.ane-compat-tag {
  background: linear-gradient(135deg, var(--ane-primary), var(--ane-secondary));
  color: #fff;
  border-radius: 50px;
  padding: .3rem .9rem;
  font-size: .82rem;
  font-weight: 700;
}

/* ── Compartilhamento ─────────────────────────────── */
.ane-share-box {
  margin: 1rem 0;
}

.ane-share-btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}

@media (max-width: 420px) {
  .ane-share-btns { grid-template-columns: 1fr; }
}

.ane-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem .8rem;
  border: none;
  border-radius: var(--ane-radius-sm);
  font-family: var(--ane-font-body);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--ane-transition);
  color: #fff;
}

.ane-share-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.ane-share-whatsapp { background: #25d366; }
.ane-share-whatsapp:hover { background: #1da851; transform: translateY(-2px); }

.ane-share-facebook { background: #1877f2; }
.ane-share-facebook:hover { background: #0c5fcb; transform: translateY(-2px); }

.ane-share-copy {
  background: var(--ane-accent);
}
.ane-share-copy:hover { background: #7d3c98; transform: translateY(-2px); }

.ane-share-desafio {
  background: linear-gradient(135deg, var(--ane-primary), var(--ane-secondary));
}
.ane-share-desafio:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(233,30,140,.3); }

/* ── Ranking ──────────────────────────────────────── */
.ane-ranking-box {
  background: #fafafa;
  border: 1px solid var(--ane-border);
  border-radius: var(--ane-radius-sm);
  padding: 1.2rem 1.5rem;
  margin: 1rem 0;
}

.ane-rank-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--ane-border);
  font-size: .9rem;
}

.ane-rank-item:last-child { border-bottom: none; }
.ane-rank-pos  { font-weight: 700; color: var(--ane-primary); min-width: 1.5rem; }
.ane-rank-emoji { font-size: 1.1rem; }
.ane-rank-nome  { flex: 1; font-weight: 600; }
.ane-rank-total { font-size: .8rem; color: var(--ane-text-light); }

/* ── Botão refazer ────────────────────────────────── */
.ane-btn-refazer {
  display: block;
  width: 100%;
  padding: .85rem;
  margin-top: 1.5rem;
  border: 2px solid var(--ane-primary);
  border-radius: var(--ane-radius-sm);
  background: transparent;
  color: var(--ane-primary);
  font-family: var(--ane-font-body);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--ane-transition);
}

.ane-btn-refazer:hover {
  background: var(--ane-primary);
  color: #fff;
  transform: translateY(-2px);
}

/* ── Toast de cópia ───────────────────────────────── */
.ane-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #2d1a2e;
  color: #fff;
  padding: .7rem 1.5rem;
  border-radius: 50px;
  font-family: var(--ane-font-body);
  font-size: .9rem;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transition: all .3s;
  pointer-events: none;
}

.ane-toast.ane-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Modo escuro ──────────────────────────────────── */
.ane-dark-mode .ane-card        { background: #1a0a1e; border-color: #3a1a3e; }
.ane-dark-mode .ane-signo-btn   { background: #2a1a2e; border-color: #3a1a3e; color: #f0d0f0; }
.ane-dark-mode .ane-cor-btn,
.ane-dark-mode .ane-select-btn  { background: #2a1a2e; border-color: #3a1a3e; color: #f0d0f0; }
.ane-dark-mode .ane-conselho-box,
.ane-dark-mode .ane-compat-box,
.ane-dark-mode .ane-ranking-box { background: #2a1a2e; border-color: #3a1a3e; }
.ane-dark-mode .ane-frase-box   { background: linear-gradient(135deg, #3a0a2e, #2a1a0e); }
.ane-dark-mode                  { color: #f0d0f0; }