/* Astronz/Astral Daily — Shared CSS with theme variable support */

/* ── Theme variables (overridden per theme via data-theme) ──── */
:root {
    --input-bg:        #0e0e1a;
    --input-border:    #252540;
    --input-focus:     #7c6ff7;
    --input-focus-glow:rgba(124, 111, 247, 0.15);
    --btn-grad-start:  #7c6ff7;
    --btn-grad-end:    #5b5bd6;
    --score-track:     #1e1e35;
    --score-high:      linear-gradient(90deg, #7c6ff7, #a89ef5);
    --score-mid:       linear-gradient(90deg, #5b7cf5, #7c6ff7);
    --score-low:       linear-gradient(90deg, #8888a8, #5b6070);
    --reading-h2:      #8888a8;
    --reading-p:       #c8c8e0;
    --premium-overlay: rgba(8, 8, 15, 0.3);
}

[data-theme="astronz"] {
    --input-bg:         #141032;
    --input-border:     #2A1F5C;
    --input-focus:      #5B2EFF;
    --input-focus-glow: rgba(91, 46, 255, 0.25);
    --btn-grad-start:   #FF4FD8;
    --btn-grad-end:     #5B2EFF;
    --score-track:      #1B1540;
    --score-high:       linear-gradient(90deg, #FF4FD8, #7C4DFF, #2EF2C6);
    --score-mid:        linear-gradient(90deg, #7C4DFF, #2EF2C6);
    --score-low:        linear-gradient(90deg, #5B2EFF, #7C4DFF);
    --reading-h2:       #B9B4E3;
    --reading-p:        #f0eeff;
    --premium-overlay:  rgba(11, 6, 32, 0.35);
    --brand-gradient:   linear-gradient(90deg, #FF4FD8, #7C4DFF, #2EF2C6);
}

/* ── Tipografia ──────────────────────────────────────────────── */
body {
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
}

/* ── Score bars ──────────────────────────────────────────────── */
.score-bar-track {
    background:    var(--score-track);
    border-radius: 100px;
    overflow:      hidden;
    height:        8px;
}

.score-bar-fill {
    height:        100%;
    border-radius: 100px;
    width:         0%;
    transition:    width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.score-high     { background: var(--score-high); }
.score-mid      { background: var(--score-mid); }
.score-low      { background: var(--score-low); }
.score-peak     { background: linear-gradient(90deg, #06b6d4, #22d3ee, #67e8f9); } /* ≥85: cyan vivace */
.score-critical { background: linear-gradient(90deg, #c026d3, #e879f9, #f0abfc); } /* <45: fucsia */

/* ── Card premium (teaser) ───────────────────────────────────── */
.premium-card {
    position:       relative;
    opacity:        0.6;
    pointer-events: none;
    user-select:    none;
}
.premium-card::after {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: inherit;
    background:    var(--premium-overlay);
}

/* ── Sezioni testo AI ────────────────────────────────────────── */
.reading-section h2 {
    font-size:      0.75rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--reading-h2);
    margin-bottom:  0.75rem;
}

.reading-section p {
    line-height: 1.75;
    color:       var(--reading-p);
}

/* Grassetto lettura/chat: stesso colore del tema di `text-ad-accent2` (--ad-accent2 da header.php).
   Fallback per letture salvate senza classi Tailwind sul <strong>. */
.reading-section strong:not([class]),
.chat-markdown strong:not([class]) {
    font-weight: 600;
    color:       var(--ad-accent2) !important;
}

.reading-section ul {
    margin:  0.5rem 0 0;
    padding: 0 0 0 1.15rem;
    color:   var(--reading-p);
    line-height: 1.75;
}

.reading-section li { margin: 0.35rem 0; }

.reading-section code {
    font-size:     0.9em;
    padding:       0.1em 0.35em;
    border-radius: 4px;
    background:    rgba(255, 255, 255, 0.06);
}

/* ── Overlay elaborazione lettura AI (index) — glass / vetro smerigliato ─── */
.reading-ai-overlay {
    position:       fixed;
    inset:          0;
    z-index:        200;
    padding:        1.25rem;
    /* Sfondo leggero: il “vetro” è blur + saturate sulla pagina sotto */
    background:     radial-gradient(ellipse 90% 70% at 50% 40%, rgba(124, 111, 247, 0.18) 0%, transparent 58%),
                    radial-gradient(ellipse 120% 90% at 50% 110%, rgba(184, 172, 255, 0.1) 0%, transparent 50%),
                    rgba(6, 6, 14, 0.42);
    backdrop-filter: blur(26px) saturate(175%) brightness(1.04);
    -webkit-backdrop-filter: blur(26px) saturate(175%) brightness(1.04);
    border-top:     1px solid rgba(255, 255, 255, 0.09);
    box-shadow:     inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="astronz"] .reading-ai-overlay {
    background: radial-gradient(ellipse 90% 70% at 50% 40%, rgba(255, 79, 216, 0.16) 0%, transparent 58%),
                radial-gradient(ellipse 120% 90% at 50% 110%, rgba(124, 77, 255, 0.12) 0%, transparent 50%),
                rgba(8, 4, 22, 0.45);
    backdrop-filter: blur(28px) saturate(185%) brightness(1.05);
    -webkit-backdrop-filter: blur(28px) saturate(185%) brightness(1.05);
}

/* Comparsa: dissolvenza + blur che “si fissa” */
.reading-ai-overlay:not(.hidden) {
    animation: reading-ai-glass-reveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes reading-ai-glass-reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.reading-ai-overlay::before {
    content:    '';
    position:   absolute;
    inset:      0;
    opacity:    0.35;
    background-image:
        radial-gradient(1.5px 1.5px at 8% 12%, rgba(255, 255, 255, 0.55) 50%, transparent 50%),
        radial-gradient(1px 1px at 22% 78%, rgba(255, 255, 255, 0.4) 50%, transparent 50%),
        radial-gradient(1px 1px at 41% 23%, rgba(255, 255, 255, 0.35) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 63% 61%, rgba(255, 255, 255, 0.5) 50%, transparent 50%),
        radial-gradient(1px 1px at 77% 14%, rgba(255, 255, 255, 0.3) 50%, transparent 50%),
        radial-gradient(1px 1px at 88% 44%, rgba(255, 255, 255, 0.45) 50%, transparent 50%),
        radial-gradient(1px 1px at 15% 55%, rgba(255, 255, 255, 0.28) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 52% 88%, rgba(255, 255, 255, 0.42) 50%, transparent 50%),
        radial-gradient(1px 1px at 91% 82%, rgba(255, 255, 255, 0.33) 50%, transparent 50%);
    animation: reading-ai-twinkle 5s ease-in-out infinite;
    pointer-events: none;
}

.reading-ai-overlay-inner {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    max-width:      24rem;
    padding:        2rem 2.25rem;
    border-radius:  1.5rem;
    /* Secondo strato vetro: card sopra il blur full-screen */
    background:     rgba(18, 18, 36, 0.38);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border:         1px solid rgba(255, 255, 255, 0.14);
    box-shadow:     0 12px 48px rgba(0, 0, 0, 0.45),
                    0 2px 0 rgba(255, 255, 255, 0.06) inset,
                    0 -1px 0 rgba(0, 0, 0, 0.2) inset;
}

.reading-ai-overlay:not(.hidden) .reading-ai-overlay-inner {
    animation: reading-ai-card-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

@keyframes reading-ai-card-rise {
    from {
        opacity:   0;
        transform: translateY(18px) scale(0.96);
    }
    to {
        opacity:   1;
        transform: translateY(0) scale(1);
    }
}

[data-theme="astronz"] .reading-ai-overlay-inner {
    background: rgba(20, 12, 48, 0.42);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(124, 77, 255, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.reading-ai-orbit-stage {
    position:   relative;
    width:      9rem;
    height:     9rem;
    margin:     0 auto 1.75rem;
}

.reading-ai-orbit {
    position:      absolute;
    left:          50%;
    top:           50%;
    border-radius: 50%;
    border:        1px solid rgba(184, 172, 255, 0.22);
    transform:     translate(-50%, -50%);
    animation:     reading-ai-orbit-spin linear infinite;
}

.reading-ai-orbit--a {
    width:              100%;
    height:             100%;
    animation-duration: 16s;
    border-color:       rgba(184, 172, 255, 0.28);
}

.reading-ai-orbit--b {
    width:              72%;
    height:             72%;
    animation-duration: 10.5s;
    animation-direction: reverse;
    border-color:       rgba(124, 111, 247, 0.35);
}

.reading-ai-orbit--c {
    width:              44%;
    height:             44%;
    animation-duration: 6.8s;
    border-color:       rgba(184, 172, 255, 0.18);
}

.reading-ai-orbit-planet {
    position:      absolute;
    left:          50%;
    top:           0;
    width:         7px;
    height:        7px;
    margin-left:   -3.5px;
    margin-top:    -3.5px;
    border-radius: 50%;
    background:    var(--ad-accent2);
    box-shadow:    0 0 12px color-mix(in srgb, var(--ad-accent2) 70%, transparent),
                   0 0 24px color-mix(in srgb, var(--ad-accent) 35%, transparent);
}

.reading-ai-orbit-core {
    position:      absolute;
    left:          50%;
    top:           50%;
    width:         1.125rem;
    height:        1.125rem;
    margin-left:   -0.5625rem;
    margin-top:    -0.5625rem;
    border-radius: 50%;
    background:    radial-gradient(circle at 32% 28%, var(--ad-accent2), var(--ad-accent));
    box-shadow:    0 0 20px color-mix(in srgb, var(--ad-accent2) 55%, transparent),
                   0 0 48px color-mix(in srgb, var(--ad-accent) 25%, transparent);
    animation:     reading-ai-core-pulse 2.4s ease-in-out infinite;
}

.reading-ai-title {
    font-size:       0.7rem;
    font-weight:     600;
    letter-spacing:  0.35em;
    text-transform:  uppercase;
    color:           var(--ad-accent2);
    margin-bottom:   0.5rem;
    text-shadow:     0 0 24px color-mix(in srgb, var(--ad-accent2) 40%, transparent);
}

.reading-ai-sub {
    font-size:   0.875rem;
    line-height: 1.5;
    color:       var(--reading-p, #c8c8e0);
    min-height:  1.5em;
    transition:  opacity 0.22s ease;
}

[data-theme="astronz"] .reading-ai-sub {
    color: #e8e4ff;
}

.reading-ai-shoot {
    position:      absolute;
    width:         42%;
    height:        1px;
    top:           18%;
    left:          -5%;
    background:    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform:     rotate(-28deg);
    opacity:       0;
    animation:     reading-ai-shoot 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes reading-ai-orbit-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes reading-ai-core-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.08); opacity: 0.92; }
}

@keyframes reading-ai-twinkle {
    0%, 100% { opacity: 0.28; }
    50%      { opacity: 0.5; }
}

@keyframes reading-ai-shoot {
    0%   { opacity: 0; transform: translateX(-20%) rotate(-28deg); }
    15%  { opacity: 0.7; }
    45%  { opacity: 0; transform: translateX(120%) rotate(-28deg); }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .reading-ai-overlay:not(.hidden),
    .reading-ai-overlay:not(.hidden) .reading-ai-overlay-inner {
        animation: none !important;
    }
    .reading-ai-overlay::before,
    .reading-ai-orbit,
    .reading-ai-orbit-core,
    .reading-ai-shoot {
        animation: none !important;
    }
    .reading-ai-orbit-planet {
        box-shadow: none;
    }
}

/* ── Animazioni ──────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-up { animation: fadeUp 0.5s ease both; }
.fade-up-delay-1 { animation-delay: 0.1s; }
.fade-up-delay-2 { animation-delay: 0.2s; }
.fade-up-delay-3 { animation-delay: 0.3s; }
.fade-up-delay-4 { animation-delay: 0.4s; }

/* ── Form elements ───────────────────────────────────────────── */
.ad-input {
    background:    var(--input-bg);
    border:        1px solid var(--input-border);
    border-radius: 10px;
    color:         #f0ecff;
    padding:       0.75rem 1rem;
    width:         100%;
    font-size:     1rem;
    outline:       none;
    transition:    border-color 0.2s, box-shadow 0.2s;
}

.ad-input:focus {
    border-color: var(--input-focus);
    box-shadow:   0 0 0 3px var(--input-focus-glow);
}

.ad-input::placeholder { color: #555570; }

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.5);
    cursor: pointer;
}

/* ── Bottone primario ────────────────────────────────────────── */
.btn-primary {
    background:    linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
    color:         #fff;
    border:        none;
    border-radius: 10px;
    padding:       0.875rem 2rem;
    font-size:     1rem;
    font-weight:   600;
    cursor:        pointer;
    width:         100%;
    transition:    opacity 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn-primary:hover {
    opacity:    0.92;
    transform:  translateY(-1px);
    box-shadow: 0 4px 20px var(--input-focus-glow);
}
.btn-primary:active  { transform: translateY(0); opacity: 1; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Checkbox custom ─────────────────────────────────────────── */
.ad-checkbox {
    appearance:    none;
    width:         18px;
    height:        18px;
    border:        2px solid var(--input-border);
    border-radius: 5px;
    background:    var(--input-bg);
    cursor:        pointer;
    flex-shrink:   0;
    position:      relative;
    transition:    border-color 0.2s, background 0.2s;
}

.ad-checkbox:checked {
    background:   var(--input-focus);
    border-color: var(--input-focus);
}

.ad-checkbox:checked::after {
    content:      '';
    position:     absolute;
    left: 4px; top: 1px;
    width: 6px; height: 10px;
    border:       2px solid white;
    border-top:   none;
    border-left:  none;
    transform:    rotate(45deg);
}

/* ── Loading spinner ─────────────────────────────────────────── */
.spinner {
    width:        20px;
    height:       20px;
    border:       2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation:    spin 0.7s linear infinite;
    display:      inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Astronz: Roast toggle ───────────────────────────────────── */
.roast-toggle {
    display:         flex;
    background:      var(--input-bg);
    border:          1px solid var(--input-border);
    border-radius:   12px;
    padding:         3px;
    gap:             2px;
}

.roast-toggle-btn {
    flex:            1;
    text-align:      center;
    padding:         0.5rem 0.75rem;
    border-radius:   9px;
    font-size:       0.8rem;
    font-weight:     500;
    cursor:          pointer;
    transition:      background 0.2s, color 0.2s;
    color:           var(--reading-h2);
    border:          none;
    background:      transparent;
}

.roast-toggle-btn.active {
    background:  linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
    color:       #fff;
    box-shadow:  0 2px 8px var(--input-focus-glow);
}

/* ── Astronz: Glow border effect ─────────────────────────────── */
[data-theme="astronz"] .glow-border {
    box-shadow: 0 0 0 1px rgba(124, 77, 255, 0.3),
                0 0 20px rgba(124, 77, 255, 0.08);
}

[data-theme="astronz"] .glow-border:hover {
    box-shadow: 0 0 0 1px rgba(255, 79, 216, 0.4),
                0 0 30px rgba(255, 79, 216, 0.12);
    transition: box-shadow 0.3s ease;
}

/* ── Astronz: Gradient text ──────────────────────────────────── */
[data-theme="astronz"] .gradient-text {
    background:              linear-gradient(90deg, #FF4FD8, #7C4DFF, #2EF2C6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

/* ── Astronz: Brand gradient button ──────────────────────────── */
[data-theme="astronz"] .btn-primary {
    background: linear-gradient(90deg, #FF4FD8, #7C4DFF, #2EF2C6);
    background-size: 200% auto;
    transition: background-position 0.4s ease, opacity 0.2s, transform 0.15s, box-shadow 0.2s;
}

[data-theme="astronz"] .btn-primary:hover {
    background-position: right center;
    opacity: 1;
    box-shadow: 0 4px 24px rgba(124, 77, 255, 0.4);
}

/* ── Astronz: Promo banner ───────────────────────────────────── */
.astronz-promo-banner {
    position:      relative;
    overflow:      hidden;
    border-radius: 16px;
    padding:       1.5rem 2rem;
    background:    linear-gradient(135deg, rgba(255,79,216,0.12), rgba(124,77,255,0.18), rgba(46,242,198,0.08));
    border:        1px solid rgba(124, 77, 255, 0.35);
}

.astronz-promo-banner::before {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    linear-gradient(90deg, #FF4FD8, #7C4DFF, #2EF2C6);
    opacity:       0.05;
    border-radius: inherit;
}

/* ── Roast mode badge ────────────────────────────────────────── */
.roast-badge {
    display:         inline-flex;
    align-items:     center;
    gap:             0.375rem;
    font-size:       0.7rem;
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  0.08em;
    padding:         0.25rem 0.75rem;
    border-radius:   100px;
    background:      linear-gradient(135deg, rgba(255,79,216,0.15), rgba(124,77,255,0.15));
    border:          1px solid rgba(255, 79, 216, 0.4);
    color:           #FF4FD8;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .btn-primary { padding: 1rem; }
}