/* ═══════════════════════════════════════════
   Zodiac Sign SVG Icons – Astromantika
   Inline SVG backgrounds via CSS for reliable
   cross-platform rendering (no font dependency)
   ═══════════════════════════════════════════ */

/* Base zodiac icon class */
.zicon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: -0.1em;
  flex-shrink: 0;
}
/* Size variants */
.zicon-sm { width: 16px; height: 16px; }
.zicon-md { width: 24px; height: 24px; }
.zicon-lg { width: 32px; height: 32px; }
.zicon-xl { width: 48px; height: 48px; }
.zicon-2xl { width: 64px; height: 64px; }

/* Color can be overridden via filter or by using different SVG fills */
/* Default: currentColor-style white icons */

/* ♈ Aries / Widder */
.zicon-aries {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 90V35 M50 35c0-15-12-25-25-25S0 15 0 35 M50 35c0-15 12-25 25-25s25 10 25 25' fill='none' stroke='%23c084fc' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ♉ Taurus / Stier */
.zicon-taurus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='62' r='28' fill='none' stroke='%23c084fc' stroke-width='7'/%3E%3Cpath d='M15 15c10 18 25 18 35 18s25 0 35-18' fill='none' stroke='%23c084fc' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ♊ Gemini / Zwillinge */
.zicon-gemini {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 10h80 M10 90h80 M35 10v80 M65 10v80' fill='none' stroke='%23c084fc' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ♋ Cancer / Krebs */
.zicon-cancer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='30' cy='42' r='12' fill='%23c084fc'/%3E%3Ccircle cx='70' cy='58' r='12' fill='%23c084fc'/%3E%3Cpath d='M30 30c30-25 60 0 60 12 M70 70c-30 25-60 0-60-12' fill='none' stroke='%23c084fc' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ♌ Leo / Loewe */
.zicon-leo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='30' cy='65' r='18' fill='none' stroke='%23c084fc' stroke-width='6'/%3E%3Cpath d='M48 65c0-35 40-35 40-10 M88 55c0 20-15 35-30 35' fill='none' stroke='%23c084fc' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='25' r='8' fill='%23c084fc'/%3E%3C/svg%3E");
}
/* ♍ Virgo / Jungfrau */
.zicon-virgo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M15 10v60c0 0 0 15 12 15s12-15 12-15V10 M39 10v60c0 0 0 15 12 15s12-15 12-15V10 M63 10v60c0 10 8 20 18 15' fill='none' stroke='%23c084fc' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M70 55l18 10' fill='none' stroke='%23c084fc' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ♎ Libra / Waage */
.zicon-libra {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 85h80 M10 65h80 M50 65V25' fill='none' stroke='%23c084fc' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M25 25c0-14 11-20 25-20s25 6 25 20' fill='none' stroke='%23c084fc' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ♏ Scorpio / Skorpion */
.zicon-scorpio {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M15 10v60c0 0 0 15 12 15s12-15 12-15V10 M39 10v60c0 0 0 15 12 15s12-15 12-15V10 M63 10v60c0 8 5 15 12 15l12-15' fill='none' stroke='%23c084fc' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M80 72l10-5-3 10' fill='%23c084fc'/%3E%3C/svg%3E");
}
/* ♐ Sagittarius / Schuetze */
.zicon-sagittarius {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 80L80 20 M80 20H55 M80 20v25 M25 55l30 0 M40 40l0 30' fill='none' stroke='%23c084fc' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ♑ Capricorn / Steinbock */
.zicon-capricorn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M15 20c15-10 25 5 25 25v30c10 5 20-5 20-15 M60 60c5 20 25 25 30 10' fill='none' stroke='%23c084fc' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='85' cy='75' r='12' fill='none' stroke='%23c084fc' stroke-width='6'/%3E%3C/svg%3E");
}
/* ♒ Aquarius / Wassermann */
.zicon-aquarius {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 38c10-15 20 0 30-15s20 0 30-15 20 0 20-3 M10 68c10-15 20 0 30-15s20 0 30-15 20 0 20-3' fill='none' stroke='%23c084fc' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ♓ Pisces / Fische */
.zicon-pisces {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 10c25 15 25 30 25 40s0 25-25 40 M80 10c-25 15-25 30-25 40s0 25 25 40 M10 50h80' fill='none' stroke='%23c084fc' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Planet symbols */
.zicon-sun {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%23fbbf24' stroke-width='6'/%3E%3Ccircle cx='50' cy='50' r='5' fill='%23fbbf24'/%3E%3C/svg%3E");
}
.zicon-moon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M65 15A35 35 0 1 0 65 85 28 28 0 1 1 65 15z' fill='none' stroke='%23818cf8' stroke-width='6'/%3E%3C/svg%3E");
}
.zicon-mercury {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='42' r='20' fill='none' stroke='%23a0a0b8' stroke-width='5'/%3E%3Cpath d='M50 62v28 M38 78h24' fill='none' stroke='%23a0a0b8' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M30 18c0-8 9-14 20-14s20 6 20 14' fill='none' stroke='%23a0a0b8' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.zicon-venus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='38' r='24' fill='none' stroke='%23f472b6' stroke-width='6'/%3E%3Cpath d='M50 62v28 M38 78h24' fill='none' stroke='%23f472b6' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.zicon-mars {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='40' cy='60' r='26' fill='none' stroke='%23ef4444' stroke-width='6'/%3E%3Cpath d='M58 42L82 18 M82 18H62 M82 18v20' fill='none' stroke='%23ef4444' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.zicon-jupiter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M25 15c20 0 30 10 30 25s-15 25-30 25h50 M60 15v70' fill='none' stroke='%23a78bfa' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.zicon-saturn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 8h25 M42 8v30 M42 38c20-10 35 5 30 22s-20 22-30 22' fill='none' stroke='%23a78bfa' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.zicon-uranus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='75' r='14' fill='none' stroke='%2314b8a6' stroke-width='5'/%3E%3Cpath d='M50 61V20 M30 40h40 M50 20L50 8' fill='none' stroke='%2314b8a6' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='75' r='3' fill='%2314b8a6'/%3E%3C/svg%3E");
}
.zicon-neptune {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 15v75 M30 85h40 M50 15L30 35 M50 15L70 35 M30 45h40' fill='none' stroke='%233b82f6' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.zicon-pluto {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='55' r='22' fill='none' stroke='%23a78bfa' stroke-width='5'/%3E%3Cpath d='M50 33V10 M35 22h30' fill='none' stroke='%23a78bfa' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M30 40c0-12 9-22 20-22s20 10 20 22' fill='none' stroke='%23a78bfa' stroke-width='5'/%3E%3C/svg%3E");
}
.zicon-chiron {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='72' r='18' fill='none' stroke='%23a0a0b8' stroke-width='5'/%3E%3Cpath d='M50 54V10 M50 30L70 15 M50 30L30 15' fill='none' stroke='%23a0a0b8' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.zicon-node {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='30' cy='65' r='18' fill='none' stroke='%23a0a0b8' stroke-width='5'/%3E%3Ccircle cx='70' cy='65' r='18' fill='none' stroke='%23a0a0b8' stroke-width='5'/%3E%3Cpath d='M30 47c0-30 40-30 40 0' fill='none' stroke='%23a0a0b8' stroke-width='5'/%3E%3C/svg%3E");
}
.zicon-lilith {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 15v75 M35 85h30' fill='none' stroke='%23a0a0b8' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='40' r='22' fill='none' stroke='%23a0a0b8' stroke-width='5'/%3E%3Cpath d='M35 25c0-10 7-18 15-18s15 8 15 18' fill='none' stroke='%23a0a0b8' stroke-width='5'/%3E%3C/svg%3E");
}

/* Element colors for sign icons */
.zicon-fire { filter: hue-rotate(-30deg) saturate(1.3); } /* warm red-orange */
.zicon-earth { filter: hue-rotate(60deg) saturate(0.8); } /* green-brown */
.zicon-air { filter: hue-rotate(30deg) saturate(0.6) brightness(1.2); } /* light blue */
.zicon-water { filter: hue-rotate(90deg) saturate(1.1); } /* blue */