/**
 * Western Horoscope Page Styles
 * Extends horoscope.css (shared zodiac-card grid); adds the Vedic/Western
 * toggle pill, the Moon/retrograde day banner and the lucky row.
 */

/* Vedic <-> Western toggle (also included on the Vedic horoscope page) */
.horoscope-toggle {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.horoscope-toggle a {
    padding: 7px 18px;
    border-radius: 20px;
    background: var(--chip-bg);
    color: var(--text-subheading);
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    transition: filter 0.15s;
}

.horoscope-toggle a:hover {
    filter: brightness(0.96);
}

.horoscope-toggle a.active {
    background: var(--accent-gradient);
    color: #ffffff; /* white on saturated brand gradient: allowed exception */
}

/* Day banner chips */
.western-banner .moon-chip {
    background: var(--info-bg);
    color: var(--info-text);
    font-weight: 600;
}

.western-banner .retro-chip {
    background: var(--warn-bg);
    color: var(--warn-text);
    font-weight: 600;
}

/* Lucky color / number row inside each card */
.lucky-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 0 18px 4px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.lucky-row [data-i18n] {
    font-weight: 600;
}

@media (max-width: 600px) {
    .lucky-row {
        padding: 0 14px 4px;
    }
}