/* =============================================================
   ASTROLOGIA ONOMANTICA - Tema Astrologico
   Palette: blu notte, oro, viola mistico
   Font: Cinzel (titoli), Cormorant Garamond (corpo)
   ============================================================= */

/* --- Variabili --- */
:root {
    --blu-notte: #0a0e27;
    --blu-card: #1a1f3a;
    --blu-card-chiaro: #232848;
    --oro: #c9a84c;
    --oro-chiaro: #d4af37;
    --oro-scuro: #a08030;
    --avorio: #f0e6d3;
    --grigio-oro: #b8a88a;
    --viola: #6a4c93;
    --viola-scuro: #4a3366;
    --verde-smeraldo: #2d6a4f;
    --rosso-rubino: #8b1a1a;
    --font-titoli: 'Cinzel', serif;
    --font-corpo: 'Cormorant Garamond', serif;
}

/* --- Reset e base --- */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--blu-notte);
    color: var(--avorio);
    font-family: var(--font-corpo);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.7;
    min-height: 100vh;
}

/* --- Sfondo stelle --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background:
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1.5px 1.5px at 40% 10%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,0.35), transparent),
        radial-gradient(1.5px 1.5px at 85% 55%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 15% 65%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 35% 80%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1.5px 1.5px at 50% 70%, rgba(255,255,255,0.35), transparent),
        radial-gradient(1px 1px at 65% 85%, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 80% 40%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 90% 75%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1.5px 1.5px at 5% 90%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 45% 55%, rgba(255,255,255,0.15), transparent),
        radial-gradient(1px 1px at 75% 5%, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 20% 50%, rgba(201,168,76,0.3), transparent),
        radial-gradient(2px 2px at 60% 30%, rgba(201,168,76,0.2), transparent),
        radial-gradient(2px 2px at 95% 60%, rgba(201,168,76,0.25), transparent);
    pointer-events: none;
}

/* --- Tipografia --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titoli);
    font-weight: 600;
}

/* --- Titoli oro --- */
.titolo-oro {
    color: var(--oro);
    font-family: var(--font-titoli);
    font-weight: 700;
    letter-spacing: 1px;
}

.titolo-oro-grande {
    color: var(--oro);
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(201,168,76,0.3), 0 0 40px rgba(201,168,76,0.1);
}

.titolo-sezione {
    color: var(--oro);
    font-family: var(--font-titoli);
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: 1px;
}

/* --- Testi --- */
.testo-chiaro {
    color: var(--avorio);
}

.testo-secondario {
    color: var(--grigio-oro);
    font-style: italic;
}

.etichetta-oro {
    color: var(--oro);
    font-family: var(--font-titoli);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* --- Simboli zodiacali --- */
.simbolo-zodiaco {
    font-size: 3.5rem;
    color: var(--oro);
    text-shadow: 0 0 15px rgba(201,168,76,0.4);
    line-height: 1;
}

.simbolo-zodiaco-header {
    font-size: 2.5rem;
    color: var(--oro);
    text-shadow: 0 0 15px rgba(201,168,76,0.4);
    line-height: 1;
    margin-bottom: 0.3rem;
}

/* --- Divisore oro --- */
.divisore-oro {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--oro), transparent);
    border: none;
}

/* --- Card mistica --- */
.card-mistica {
    background: linear-gradient(145deg, var(--blu-card), var(--blu-card-chiaro));
    border: 1px solid var(--oro-scuro);
    border-radius: 12px;
    box-shadow:
        0 4px 20px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(201,168,76,0.1);
    position: relative;
}

.card-mistica::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(201,168,76,0.2), transparent 30%, transparent 70%, rgba(201,168,76,0.15));
    z-index: -1;
    pointer-events: none;
}

/* --- Input mistici --- */
.input-mistico {
    background-color: rgba(10, 14, 39, 0.7);
    border: 1px solid var(--oro-scuro);
    color: var(--avorio);
    font-family: var(--font-corpo);
    font-size: 1.05rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.input-mistico:focus {
    background-color: rgba(10, 14, 39, 0.9);
    border-color: var(--oro);
    color: var(--avorio);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
    outline: none;
}

.input-mistico::placeholder {
    color: rgba(184, 168, 138, 0.5);
}

/* Date input fix per tema scuro */
input[type="date"].input-mistico::-webkit-calendar-picker-indicator {
    filter: invert(0.8) sepia(0.5) hue-rotate(10deg);
}

/* --- Radio button mistico --- */
.radio-mistico {
    background-color: rgba(10, 14, 39, 0.7);
    border-color: var(--oro-scuro);
}

.radio-mistico:checked {
    background-color: var(--oro);
    border-color: var(--oro);
}

.radio-mistico:focus {
    box-shadow: 0 0 0 3px rgba(201,168,76,0.2);
}

/* --- Bottone oro --- */
.btn-oro {
    background: linear-gradient(145deg, var(--oro), var(--oro-scuro));
    color: var(--blu-notte);
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    border: none;
    border-radius: 8px;
    padding: 0.7rem 2rem;
    transition: all 0.3s;
    text-transform: uppercase;
}

.btn-oro:hover {
    background: linear-gradient(145deg, var(--oro-chiaro), var(--oro));
    color: var(--blu-notte);
    box-shadow: 0 0 20px rgba(201,168,76,0.3);
    transform: translateY(-1px);
}

.btn-oro:active {
    transform: translateY(0);
}

.btn-outline-oro {
    background: transparent;
    color: var(--oro);
    font-family: var(--font-titoli);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1px;
    border: 1px solid var(--oro-scuro);
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s;
}

.btn-outline-oro:hover {
    background: rgba(201,168,76,0.1);
    color: var(--oro-chiaro);
    border-color: var(--oro);
}

/* --- Accordion mistico --- */
.item-mistico {
    background: transparent;
    border: 1px solid var(--oro-scuro);
    border-radius: 10px !important;
    margin-bottom: 0.8rem;
    overflow: hidden;
}

.btn-accordion {
    background: linear-gradient(145deg, var(--blu-card), var(--blu-card-chiaro));
    color: var(--oro);
    font-family: var(--font-titoli);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    padding: 1rem 1.3rem;
    border: none;
    box-shadow: none;
}

.btn-accordion:not(.collapsed) {
    background: linear-gradient(145deg, var(--blu-card-chiaro), var(--viola-scuro));
    color: var(--oro-chiaro);
    box-shadow: none;
}

.btn-accordion:focus {
    box-shadow: none;
    border-color: transparent;
}

.btn-accordion::after {
    filter: invert(0.7) sepia(1) hue-rotate(10deg) brightness(1.2);
}

.corpo-mistico {
    background-color: rgba(26, 31, 58, 0.8);
    color: var(--avorio);
    border-top: 1px solid rgba(201,168,76,0.2);
    padding: 1.5rem;
}

/* --- Tabelle nei risultati --- */
.corpo-mistico table {
    color: var(--avorio);
    width: 100%;
}

.corpo-mistico table th {
    color: var(--oro);
    font-family: var(--font-titoli);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--oro-scuro);
    padding: 0.6rem;
}

.corpo-mistico table td {
    border-bottom: 1px solid rgba(201,168,76,0.1);
    padding: 0.5rem 0.6rem;
    font-size: 1rem;
}

/* --- Badge pianeti --- */
.badge-pianeta {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    font-family: var(--font-titoli);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.badge-sole { background: rgba(212,175,55,0.2); color: #d4af37; border: 1px solid rgba(212,175,55,0.4); }
.badge-luna { background: rgba(192,192,210,0.15); color: #c0c0d2; border: 1px solid rgba(192,192,210,0.3); }
.badge-mercurio { background: rgba(106,76,147,0.2); color: #b08cd6; border: 1px solid rgba(106,76,147,0.4); }
.badge-venere { background: rgba(45,106,79,0.2); color: #6fbf8a; border: 1px solid rgba(45,106,79,0.4); }
.badge-marte { background: rgba(139,26,26,0.2); color: #d46a6a; border: 1px solid rgba(139,26,26,0.4); }
.badge-giove { background: rgba(65,105,225,0.2); color: #7da1e8; border: 1px solid rgba(65,105,225,0.4); }
.badge-saturno { background: rgba(128,128,128,0.2); color: #a8a8a8; border: 1px solid rgba(128,128,128,0.4); }

/* --- Aspetti positivi/negativi --- */
.aspetto-positivo {
    color: var(--verde-smeraldo);
}

.aspetto-negativo {
    color: var(--rosso-rubino);
}

.aspetto-neutro {
    color: var(--grigio-oro);
}

/* --- Info segno card interna --- */
.info-segno-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.info-segno-item {
    background: rgba(10, 14, 39, 0.4);
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 8px;
    padding: 0.8rem;
}

.info-segno-item .etichetta {
    color: var(--oro);
    font-family: var(--font-titoli);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}

.info-segno-item .valore {
    color: var(--avorio);
    font-size: 1rem;
}

/* --- Header --- */
header {
    border-bottom: 1px solid rgba(201,168,76,0.15);
}

/* --- Footer --- */
footer {
    border-top: 1px solid rgba(201,168,76,0.1);
}

footer small {
    font-size: 0.85rem;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .titolo-oro-grande {
        font-size: 1.6rem;
        letter-spacing: 1px;
    }

    .titolo-sezione {
        font-size: 1.1rem;
    }

    .btn-accordion {
        font-size: 0.95rem;
        padding: 0.8rem 1rem;
    }

    .simbolo-zodiaco {
        font-size: 2.5rem;
    }

    .info-segno-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .titolo-oro-grande {
        font-size: 1.3rem;
    }

    body {
        font-size: 1rem;
    }
}

/* =============================================================
   CARTA DEL CIELO GRAFICA (SVG)
   ============================================================= */

.cg-wrap {
    background: #f5ecd2;
    border: 2px solid var(--oro);
    border-radius: 8px;
    padding: 12px;
    max-width: 720px;
    margin: 0 auto;
}

.cg-intestazione {
    text-align: center;
    color: #1a1a1a;
    font-family: 'Cinzel', serif;
    margin-bottom: 8px;
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--oro-scuro);
}
.cg-titolo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--oro-scuro);
    margin: 0;
    letter-spacing: 1px;
}
.cg-sottotitolo {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 4px 0 2px;
    font-family: 'Cormorant Garamond', serif;
}
.cg-dati {
    font-size: 0.85rem;
    color: #555;
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
}

.cerchio-grafico {
    width: 100%;
    height: auto;
    display: block;
    font-family: 'Cinzel', serif;
}

/* Bordi e linee del cerchio */
.cg-bordo {
    fill: none;
    stroke: #1a1a1a;
    stroke-width: 2;
}
.cg-linea {
    fill: none;
    stroke: #1a1a1a;
    stroke-width: 1;
}
.cg-raggio {
    stroke: #1a1a1a;
    stroke-width: 1;
}

/* Nome del segno (banda esterna, centrato) */
.cg-nome-segno {
    font-size: 15px;
    fill: #1a1a1a;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.cg-num-casa {
    font-size: 22px;
    font-weight: 700;
    fill: var(--blu-notte);
    font-family: 'Cinzel', serif;
}

/* Arcani negli anelli */
.cg-arcano {
    font-size: 13px;
    fill: #1a1a1a;
    font-family: 'Cinzel', serif;
    font-weight: 600;
}

/* Simboli planetari */
.cg-pianeta {
    font-size: 22px;
    fill: var(--rosso-rubino);
    font-family: 'Noto Sans Symbols 2', 'DejaVu Sans', 'Symbola', sans-serif;
    font-variant-emoji: text;
    font-weight: 700;
}
.cg-pianeta-carenza {
    fill: #888;
    font-style: italic;
}

/* Linee degli aspetti */
.cg-aspetto {
    stroke-width: 1.2;
    fill: none;
    opacity: 0.7;
}
.cg-aspetto-pos { stroke: #2d6a4f; }
.cg-aspetto-neg { stroke: #8b1a1a; }
.cg-aspetto-neu { stroke: #6a4c93; }

/* Toolbar (pulsante stampa) */
.cg-toolbar {
    margin-bottom: 12px;
}

/* Stampa: nasconde tutto il resto e mostra solo la carta */
@media print {
    body.stampa-solo-cerchio * {
        visibility: hidden;
    }
    body.stampa-solo-cerchio #cg-wrap,
    body.stampa-solo-cerchio #cg-wrap * {
        visibility: visible;
    }
    body.stampa-solo-cerchio #cg-wrap {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: white;
        border: none;
        max-width: none;
        padding: 20mm;
    }
    body.stampa-solo-cerchio::before {
        display: none;
    }
}