/* Золотые медальоны знаков зодиака (сайт + админка) */

@font-face {
    font-family: "Dana Zodiac Symbols";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/zodiac-symbols.woff2") format("woff2");
}

.horoscope-zodiac-icon {
    --zodiac-medal-size: 3.35rem;
    --zodiac-symbol-size: 1.6rem;
    --zodiac-accent: #c4a574;
    flex-shrink: 0;
    width: var(--zodiac-medal-size);
    height: var(--zodiac-medal-size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    background:
        radial-gradient(ellipse 90% 75% at 50% 18%, rgba(245, 236, 212, 0.22), transparent 55%),
        radial-gradient(circle at 50% 115%, rgba(0, 0, 0, 0.45), transparent 58%),
        linear-gradient(155deg, rgba(42, 38, 32, 0.95) 0%, rgba(22, 24, 28, 0.98) 48%, rgba(30, 28, 24, 1) 100%);
    border: 1px solid rgba(212, 184, 122, 0.55);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35) inset,
        0 0 22px rgba(196, 165, 116, 0.2),
        0 6px 18px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.horoscope-zodiac-icon::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1px solid rgba(245, 236, 212, 0.14);
    pointer-events: none;
}

.horoscope-zodiac-icon__symbol {
    position: relative;
    z-index: 1;
    display: block;
    font-family: "Dana Zodiac Symbols", "Noto Sans Symbols 2", sans-serif;
    font-size: var(--zodiac-symbol-size);
    line-height: 1;
    color: var(--zodiac-accent, #c4a574);
    font-variant-emoji: text;
    text-shadow: 0 0 10px rgba(196, 165, 116, 0.45);
}

/* ♋ «69 на боку» — как в типографическом символе */
.horoscope-zodiac-icon--cancer .horoscope-zodiac-icon__symbol {
    display: inline-block;
    transform: rotate(-90deg);
}

.horoscope-zodiac-icon--sm {
    --zodiac-medal-size: 2.75rem;
    --zodiac-symbol-size: 1.35rem;
}

.horoscope-zodiac-icon.is-highlight {
    border-color: rgba(232, 212, 168, 0.75);
    box-shadow:
        0 0 0 1px rgba(196, 165, 116, 0.25) inset,
        0 0 28px rgba(196, 165, 116, 0.35),
        0 8px 22px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: scale(1.04);
    background:
        radial-gradient(ellipse 90% 75% at 50% 15%, rgba(245, 236, 212, 0.32), transparent 52%),
        radial-gradient(circle at 50% 115%, rgba(0, 0, 0, 0.4), transparent 58%),
        linear-gradient(155deg, rgba(52, 46, 36, 0.98) 0%, rgba(28, 26, 22, 1) 100%);
}

@media (max-width: 520px) {
    .horoscope-zodiac-icon {
        --zodiac-medal-size: 2.85rem;
        --zodiac-symbol-size: 1.4rem;
    }
}