/* Emotional insight cards, deliberately screenshot-worthy. Dark premium
   card with bold quote + strong action buttons. Works on both dark and
   light page backgrounds. */
.insight-card{
  background: linear-gradient(135deg, #1a0e52 0%, #2a1a5c 50%, #1a0e52 100%);
  border: 1px solid rgba(245,208,96,.4);
  border-radius: 16px;
  padding: 1.7rem 1.7rem 1.4rem;
  margin: 1rem 0;
  color: #f0ece0;
  box-shadow: 0 8px 28px rgba(15,9,40,.25);
  position: relative;
  overflow: hidden;
}
.insight-card::before{
  /* Top accent line, ties to brand gold. */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(245,196,81,.85), transparent);
}
.insight-card::after{
  /* Large decorative quote glyph behind text. */
  content: '\201C';
  position: absolute;
  top: -1.4rem; right: 1.2rem;
  font-family: Georgia, 'Playfair Display', serif;
  font-size: 110px;
  color: rgba(245,208,96,.13);
  pointer-events: none;
  line-height: 1;
  font-weight: 700;
}
.insight-quote{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(18px, 2.8vw, 23px);
  line-height: 1.45;
  margin: 0 0 1.1rem;
  color: #ffffff;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.insight-actions{
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.insight-btn{
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1.5px solid rgba(245,208,96,.55);
  background: rgba(245,208,96,.15);
  color: #ffd76a;
  cursor: pointer;
  transition: all .15s ease;
  letter-spacing: .01em;
}
.insight-btn:hover{
  background: rgba(245,208,96,.28);
  color: #fff;
  transform: translateY(-1px);
}
.insight-btn-wa{
  background: #25d366;
  border-color: #25d366;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(37,211,102,.35);
}
.insight-btn-wa:hover{
  background: #1ebd5a;
  border-color: #1ebd5a;
  color: #fff;
  box-shadow: 0 6px 16px rgba(37,211,102,.5);
}

/* Compact strip used on personality / archetype pages */
.emotional-insights-strip{
  display: grid;
  gap: .9rem;
  margin: 1.5rem 0 2rem;
}
@media (min-width: 720px){
  .emotional-insights-strip{
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* "Continue exploring emotionally" navigation block */
.emotion-paths{
  background: rgba(157,127,255,.06);
  border: 1px solid rgba(157,127,255,.2);
  border-radius: 14px;
  padding: 1.3rem 1.5rem;
  margin: 2rem 0;
}
.emotion-paths h2{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
  color: #f5d060;
  margin: 0 0 .75rem;
}
.emotion-paths p{
  font-size: 14px;
  color: #cbb8e8;
  margin: 0 0 1rem;
  line-height: 1.6;
}
.emotion-paths-grid{
  display: grid;
  gap: .6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .emotion-paths-grid{
    grid-template-columns: 1fr 1fr;
  }
}
.emotion-path-link{
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(245,208,96,.2);
  border-radius: 10px;
  padding: .9rem 1rem;
  text-decoration: none;
  color: #f0ece0;
  transition: all .15s ease;
}
.emotion-path-link:hover{
  background: rgba(245,208,96,.1);
  border-color: rgba(245,208,96,.5);
  transform: translateY(-2px);
}
.emotion-path-link .ep-eyebrow{
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f5d060;
  font-weight: 700;
  margin-bottom: .25rem;
}
.emotion-path-link .ep-title{
  font-family: Georgia, serif;
  font-size: 14.5px;
  line-height: 1.35;
}

/* Share strip on result pages, premium dark-card style so it stands out on
   both light and dark page backgrounds. */
.share-strip{
  background: linear-gradient(135deg, #1a0e52 0%, #2a1a5c 60%, #1a0e52 100%);
  border: 1px solid rgba(245,196,81,.5);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.4rem;
  margin: 2rem 0;
  text-align: center;
  box-shadow: 0 10px 30px rgba(26,14,82,.18);
  position: relative;
  overflow: hidden;
}
.share-strip::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(245,196,81,.85), transparent);
}
.share-strip h3{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(17px, 2.6vw, 21px);
  margin: 0 0 .5rem;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.3;
}
.share-strip p{
  font-size: 14px;
  color: #cbb8e8;
  margin: 0 0 1.1rem;
  line-height: 1.55;
}
.share-strip .share-buttons{
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
}
.share-strip a, .share-strip button{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 11px 20px;
  border-radius: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all .15s ease;
  letter-spacing: .01em;
}
.share-strip a.wa, .share-strip button.wa{
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37,211,102,.4);
}
.share-strip a.wa:hover, .share-strip button.wa:hover{
  background: #1ebd5a;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37,211,102,.55);
}
.share-strip a.wa::before{
  /* WhatsApp glyph rendered as a CSS mask so we don't need to load an icon font.
     Falls back to nothing if mask-image isn't supported (older browsers). */
  content: '';
  display: inline-block;
  width: 17px;
  height: 17px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.52 3.48A11.85 11.85 0 0012.04 0C5.49 0 .17 5.32.17 11.87a11.78 11.78 0 001.59 5.93L0 24l6.36-1.66a11.86 11.86 0 005.68 1.45h.01c6.55 0 11.87-5.32 11.87-11.87a11.8 11.8 0 00-3.4-8.44zm-8.48 18.27h-.01a9.85 9.85 0 01-5.02-1.38l-.36-.21-3.77.99 1.01-3.67-.24-.38a9.83 9.83 0 01-1.51-5.23c0-5.45 4.43-9.87 9.88-9.87a9.83 9.83 0 016.99 2.9 9.81 9.81 0 012.89 6.98c0 5.45-4.43 9.87-9.86 9.87zm5.4-7.39c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.66.15-.2.3-.76.97-.93 1.17-.17.2-.34.22-.64.07a8.13 8.13 0 01-2.39-1.48 9 9 0 01-1.66-2.06c-.17-.3-.02-.46.13-.61.13-.13.3-.34.45-.51.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.66-1.6-.91-2.18-.24-.58-.49-.5-.66-.51l-.56-.01a1.08 1.08 0 00-.78.37 3.3 3.3 0 00-1.03 2.45c0 1.45 1.05 2.85 1.2 3.05.15.2 2.07 3.15 5 4.42a16.95 16.95 0 001.67.61c.7.22 1.34.19 1.85.12.56-.08 1.76-.72 2-1.41.25-.7.25-1.29.17-1.41-.07-.12-.27-.2-.57-.34z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.52 3.48A11.85 11.85 0 0012.04 0C5.49 0 .17 5.32.17 11.87a11.78 11.78 0 001.59 5.93L0 24l6.36-1.66a11.86 11.86 0 005.68 1.45h.01c6.55 0 11.87-5.32 11.87-11.87a11.8 11.8 0 00-3.4-8.44zm-8.48 18.27h-.01a9.85 9.85 0 01-5.02-1.38l-.36-.21-3.77.99 1.01-3.67-.24-.38a9.83 9.83 0 01-1.51-5.23c0-5.45 4.43-9.87 9.88-9.87a9.83 9.83 0 016.99 2.9 9.81 9.81 0 012.89 6.98c0 5.45-4.43 9.87-9.86 9.87zm5.4-7.39c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.66.15-.2.3-.76.97-.93 1.17-.17.2-.34.22-.64.07a8.13 8.13 0 01-2.39-1.48 9 9 0 01-1.66-2.06c-.17-.3-.02-.46.13-.61.13-.13.3-.34.45-.51.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.66-1.6-.91-2.18-.24-.58-.49-.5-.66-.51l-.56-.01a1.08 1.08 0 00-.78.37 3.3 3.3 0 00-1.03 2.45c0 1.45 1.05 2.85 1.2 3.05.15.2 2.07 3.15 5 4.42a16.95 16.95 0 001.67.61c.7.22 1.34.19 1.85.12.56-.08 1.76-.72 2-1.41.25-.7.25-1.29.17-1.41-.07-.12-.27-.2-.57-.34z'/></svg>") no-repeat center / contain;
  flex-shrink: 0;
}
.share-strip a.copy, .share-strip button.copy{
  background: rgba(245,208,96,.18);
  color: #ffd76a;
  border: 1.5px solid rgba(245,208,96,.55);
}
.share-strip a.copy:hover, .share-strip button.copy:hover{
  background: rgba(245,208,96,.32);
  color: #fff;
  transform: translateY(-1px);
}