:root {
  --purple-main: #8B59FF;
  --purple-soft: #D7C7FC;
  --blue-soft: #EAF4FF;
  --pink-soft: #FFE3F6;
  --purple-dark: #3b1d63;
  --yellow: #fff1cc;
  --blue-dark: #031242;
  --dirty-green: #206131;
  --dark-green: #0b3d18;
}


.nav-link-style {
  text-decoration: none;
  transition: all 0.3s ease;
}

.nav-link-style:hover {
  text-decoration: underline;
  text-decoration-color: var(--purple-main);
  text-underline-offset: 0.5em;
  text-decoration-thickness: 3px;
  color: var(--purple-dark);
}

.daily-horoscope-nav {
  text-decoration: none;
  transition: all 0.3s ease;
}

.daily-horoscope-underline {
    text-decoration: underline;
    text-underline-offset: 0.5em;
    text-decoration-color: var(--purple-main);
    text-decoration-thickness: 2px;
}

.daily-horoscope-nav:hover{
  color: var(--purple-main);
}

.dropdown-bg-soft {
  background-color: var(--purple-soft);
}


.bg-yellow {
  background-color: var(--yellow);
}
.text-yellow {
    color: var(--yellow);
}

.text-green {
    color: var(--dirty-green);
}

.text-purple {
    color: var(--purple-dark);
}
.horoscope-card {
    transition: all 0.3s ease;
    transform: scale(1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.horoscope-card:hover {
    transform: scale(1.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.purple-gradient-card {
    background: #f6f5f7;
    background: linear-gradient(0deg,rgba(246, 245, 247, 1) 0%, rgba(232, 220, 245, 1) 100%);
    box-shadow: 3px 5px 8px rgba(0, 0.1, 0.1, 0.1);

}

.glow-gradient-border {
  position: relative;
  z-index: 1;
  border-top: 2px solid transparent;
  border-bottom: 2ppx solid transparent;
}

.glow-gradient-border::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, #9d4edd, #7b2cbf);
  filter: blur(10px);
  z-index: -1;
  border-radius: 2px;
}

.glow-gradient-border::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, #9d4edd, #7b2cbf);
  filter: blur(10px);
  z-index: -1;
  border-radius: 2px;
}


.yellow-card {
   box-shadow: 3px 5px 8px rgba(0, 0.1, 0.1, 0.1);
   background: #FFF9E8;
}

.gradient-btn {
    background-color: var(--purple-dark); /* soft pink to soft blue */
}

.gradient-btn:hover {
    background-color: var(--purple-soft); /* slightly deeper hover effect */
    color: var(--purple-dark);
}

.dark-blue-cards {
     background: #313947;
}

.divine-numbers-section {
    background: #fff9e6;
    background: linear-gradient(0deg, rgba(255, 249, 230, 1) 0%, rgba(232, 220, 245, 1) 100%);
    border: 2px solid #c6a0e8;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 20px rgba(80, 60, 120, 0.1);
    max-width: 700px;
    margin: 2rem auto;
    width: 85%;
    aspect-ratio: 5 / 6;
}

.card-fan {
    width: 7rem; /* same as Tailwind w-28 */
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
}

.card-fan:hover {
    transform: translateY(-1rem);
    box-shadow: 0 0 16px 6px rgba(88, 28, 135, 0.85); /* deep mystical purple */
}

.gradient-summary {
   background: #faf8f2;
   background: linear-gradient(0deg,rgba(250, 248, 242, 1) 0%, rgba(232, 220, 245, 1) 100%);;
}
.dark-purple-bg {
    background: #5a768c;
    background: linear-gradient(0deg, rgba(90, 118, 140, 1) 0%, rgba(57, 27, 99, 1) 100%);
    border-radius: 0.5rem;
}

.purple-button {
   background: #8B59FF;
   background: linear-gradient(68deg, rgba(139, 89, 255, 1) 23%, rgba(106, 55, 237, 1) 73%, rgba(187, 169, 245, 1) 100%);
}

.purple-button:hover {
   background: var(--purple-dark);
}

.green-button {
   background: var(--dirty-green);
}

.green-button:hover {
   background: var(--dark-green);
}