/* ==========================================================================
   MUNDO DOS SONHOS — COMPONENTE: ZODIAC CALCULATOR DESIGN SYSTEM
   Agente: 02 (UI/UX)
   Conformidade: WCAG 2.1 AA | Mobile-first | Onírico Editorial
   ========================================================================== */

.zodiac-calc-component {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.zodiac-calc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zodiac-calc-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.zodiac-label-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-purple-deep);
}

.zodiac-label-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Wrapper do Input com Ícone Onírico */
.zodiac-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.zodiac-input-icon {
  position: absolute;
  left: 14px;
  color: var(--color-purple-secondary);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zodiac-date-input {
  width: 100%;
  height: 48px;
  padding: 10px 14px 10px 42px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-main);
  background-color: #FAF8FD;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.zodiac-date-input:focus {
  outline: none;
  border-color: var(--color-purple-primary);
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(108, 63, 165, 0.12);
}

/* Card do Signo Calculado */
.zodiac-result-card {
  margin-top: var(--space-2);
  padding: var(--space-4);
  background: linear-gradient(135deg, rgba(237, 228, 247, 0.75) 0%, rgba(255, 255, 255, 0.95) 100%);
  border: 1.5px solid rgba(108, 63, 165, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(50, 27, 82, 0.06);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: zodiacSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

@keyframes zodiacSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.zodiac-result-primary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Glifo Astrológico em Círculo Nobre */
.zodiac-glyph-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-purple-primary), var(--color-purple-deep));
  color: #FFFFFF;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(108, 63, 165, 0.25);
  animation: glyphPulse 0.4s ease-out;
}

@keyframes glyphPulse {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.zodiac-info-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.zodiac-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.zodiac-badge-pill {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-purple-primary);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(108, 63, 165, 0.2);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.zodiac-sign-name {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-purple-deep);
  line-height: 1.2;
}

.zodiac-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Badges dos 4 Elementos */
.zodiac-element-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.zodiac-element-tag.element-fogo {
  background: #FFEDD5;
  color: #C2410C;
  border: 1px solid #FDBA74;
}

.zodiac-element-tag.element-terra {
  background: #DCFCE7;
  color: #15803D;
  border: 1px solid #86EFAC;
}

.zodiac-element-tag.element-ar {
  background: #E0F2FE;
  color: #0369A1;
  border: 1px solid #7DD3FC;
}

.zodiac-element-tag.element-água,
.zodiac-element-tag.element-agua {
  background: #E0E7FF;
  color: #4338CA;
  border: 1px solid #A5B4FC;
}

.zodiac-ruler-tag strong {
  color: var(--color-purple-deep);
}

.zodiac-dates-tag {
  color: var(--color-text-muted);
}

/* Dica / Insight Onírico do Signo */
.zodiac-dream-insight {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  border: 1px dashed rgba(108, 63, 165, 0.2);
  font-size: 12px;
  color: var(--color-purple-deep);
  line-height: 1.45;
}

.insight-star-icon {
  flex-shrink: 0;
  color: var(--color-purple-primary);
  margin-top: 2px;
}

/* Variação Compacta (para formulários densos de cadastro) */
.zodiac-calc-compact .zodiac-result-card {
  padding: var(--space-3);
  gap: 0;
}

.zodiac-calc-compact .zodiac-glyph-circle {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

.zodiac-calc-compact .zodiac-sign-name {
  font-size: var(--text-sm);
}

.zodiac-calc-compact .zodiac-dream-insight {
  display: none;
}