/*! Oroscopo Page Styles - Pure CSS */

/* CSS Variables */
:root {
    /* Spacing */
    --spacing: 0.25rem;
    
    /* Colors */
    --color-white: #fff;
    --color-gray-50: #f9fafb;
    --color-gray-200: #e5e7eb;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-red-500: #ef4444;
    --color-red-800: #991b1b;
    --color-orange-500: #f97316;
    --color-yellow-500: #eab308;
    --color-green-500: #10b981;
    --color-green-600: #16a34a;
    --color-green-800: #166534;
    --color-teal-500: #14b8a6;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-indigo-100: #e0e7ff;
    --color-purple-100: #f3e8ff;
    --color-purple-600: #9333ea;
    --color-pink-400: #f472b6;
    --color-pink-500: #ec4899;
    
    /* Brand Colors */
    --brand-blue: #4A5A94;
    --brand-dark: #333333;
    --brand-accent: #6C7B95;
    
    /* Typography */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-lg: 1.125rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-6xl: 3.75rem;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --leading-relaxed: 1.625;
    
    /* Layout */
    --container-7xl: 80rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    
    /* Transitions */
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Reset */
*, ::after, ::before {
    box-sizing: border-box;
}

/* Hide scrollbar */
::-webkit-scrollbar {
    display: none;
}

/* Font Family */
body {
    font-family: 'Poppins', sans-serif;
}

/* Hide breadcrumb */
#breadcrumb {
    display: none;
}

/* ==============================================
   LAYOUT PRINCIPALE
   ============================================== */

.oroscopo-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.container {
    width: 100%;
}



#main-content {
    padding-top: calc(var(--spacing) * 12);
    padding-bottom: calc(var(--spacing) * 12);
}

.oroscopo-content {
    width: 100%;
}

/* ==============================================
   HOROSCOPE SECTION - ID INVARIATO PER JS
   ============================================== */

#horoscope-section {
    width: 100%;
}

/* Header con periodo selector */
.horoscope-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--spacing) * 8);
}

.horoscope-header h2 {
    font-size: var(--text-4xl);
    line-height: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--brand-dark);
}

/* Period Selector */
#horoscope-period-selector {
    display: flex;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

#horoscope-period-selector button {
    padding-left: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 3);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-gray-600);
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    background-color: transparent;
}

#horoscope-period-selector button:hover {
    background-color: var(--color-gray-50);
}

#horoscope-period-selector button.active {
    background-color: var(--brand-blue);
    color: var(--color-white);
}

/* ==============================================
   HOROSCOPE CARD - ID INVARIATO PER JS
   ============================================== */

#horoscope-card {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    padding: calc(var(--spacing) * 8);
    margin-bottom: calc(var(--spacing) * 12);
}

/* Flex container del card */
#horoscope-card > .flex {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hiddenfull {
    display: none;
}


/* Zodiac Image Container nel card principale */
.zodiac-image-container {
    background: linear-gradient(135deg, var(--color-indigo-100), var(--color-purple-100));
    border: 3px solid var(--color-white);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    width: calc(var(--spacing) * 32);
    height: calc(var(--spacing) * 32);
    flex-shrink: 0;
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: calc(var(--spacing) * 6);
}

.zodiac-image-container img {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

/* Testo del card */
#horoscope-card h3 {
    font-size: var(--text-3xl);
    line-height: 2.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--brand-blue);
}

#horoscope-card > .flex > div > p:first-of-type {
    color: var(--color-gray-500);
    margin-bottom: calc(var(--spacing) * 4);
}

#horoscope-card > .flex > div > p:last-of-type {
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
}

/* Sezioni Amore, Lavoro, Benessere - ID INVARIATI PER JS */
#horoscope-card > div:last-child {
    margin-top: calc(var(--spacing) * 8);
    border-top: 1px solid var(--color-gray-200);
    padding-top: calc(var(--spacing) * 6);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    text-align: center;
}

#love-section,
#work-section,
#health-section {
    width: 100%;
}

#love-section h4 {
    font-size: var(--text-lg);
    line-height: 1.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-pink-500);
    margin-bottom: calc(var(--spacing) * 2);
}

#work-section h4 {
    font-size: var(--text-lg);
    line-height: 1.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-500);
    margin-bottom: calc(var(--spacing) * 2);
}

#health-section h4 {
    font-size: var(--text-lg);
    line-height: 1.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-500);
    margin-bottom: calc(var(--spacing) * 2);
}

#love-section p,
#work-section p,
#health-section p {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    line-height: 1.25rem;
}

/* Titolo "Scegli il tuo segno" */
#horoscope-section > h3 {
    font-size: var(--text-3xl);
    line-height: 2.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--brand-dark);
    margin-bottom: calc(var(--spacing) * 6);
}

/* ==============================================
   ZODIAC GRID
   ============================================== */

#zodiac-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
}

/* ==============================================
   ZODIAC CARDS - CLASSE INVARIATA PER JS
   ============================================== */

.zodiac-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding: calc(var(--spacing) * 4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all var(--default-transition-duration) var(--default-transition-timing-function);
}

.zodiac-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transform: translateY(-0.25rem);
}

/* Zodiac card selezionata */
.zodiac-card.border-2 {
    border: 2px solid var(--brand-blue);
}

/* Zodiac Image Wrapper nelle cards */
.zodiac-image-wrapper {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 0.75rem;
    margin-bottom: calc(var(--spacing) * 2);
}

.zodiac-image-wrapper img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* Testo nelle zodiac cards */
.zodiac-card > span:first-of-type {
    font-weight: var(--font-weight-semibold);
    color: var(--brand-dark);
}

.zodiac-card > span:last-of-type {
    font-size: var(--text-xs);
    line-height: 1rem;
    color: var(--color-gray-500);
}

/* ==============================================
   ZODIAC SIGN COLORS
   ============================================== */

.zodiac-ariete { 
    background-color: #E63946 !important;
}

.zodiac-toro { 
    background-color: #2A9D8F !important;
}

.zodiac-gemelli { 
    background-color: #F4A261 !important;
}

.zodiac-cancro { 
    background-color: #A8DADC !important;
}

.zodiac-leone { 
    background-color: #F77F00 !important;
}

.zodiac-vergine { 
    background-color: #6A994E !important;
}

.zodiac-bilancia { 
    background-color: #F4ACB7 !important;
}

.zodiac-scorpione { 
    background-color: #8B0000 !important;
}

.zodiac-sagittario { 
    background-color: #9D4EDD !important;
}

.zodiac-capricorno { 
    background-color: #6C584C !important;
}

.zodiac-acquario { 
    background-color: #4CC9F0 !important;
}

.zodiac-pesci { 
    background-color: #06A77D !important;
}

/* ==============================================
   CLASSI UTILIZZATE DAL JAVASCRIPT
   ============================================== */

/* Classi per i bottoni del periodo (aggiunte/rimosse dal JS) */
.bg-brand-blue {
    background-color: var(--brand-blue);
}

.text-white {
    color: var(--color-white);
}

/* Classe per il bordo delle zodiac card selezionate (aggiunta dal JS) */
.border-brand-blue {
    border-color: var(--brand-blue);
}

/* Classe font-semibold usata dal JS per trovare il nome del segno */
.font-semibold {
    font-weight: var(--font-weight-semibold);
}

/* Classi per i colori dei testi */
.text-gray-500 {
    color: var(--color-gray-500);
}

/* Classe text-gray-600 per i testi */
.text-gray-600 {
    color: var(--color-gray-600);
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

/* Tablet e Desktop - SM breakpoint (640px+) */
@media (min-width: 640px) {
    /* Horoscope card flex row */
    #horoscope-card > .flex {
        flex-direction: row;
    }
    
    .zodiac-image-container {
        margin-bottom: 0;
        margin-right: calc(var(--spacing) * 8);
    }
    
    /* Zodiac grid 3 colonne */
    #zodiac-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Tablet - MD breakpoint (768px+) */
@media (min-width: 768px) {
    /* Sezioni card in 3 colonne */
    #horoscope-card > div:last-child {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    /* Zodiac grid 4 colonne */
    #zodiac-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .horoscope-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .horoscope-header h2 {
        font-size: 1.875rem;
        margin-bottom: calc(var(--spacing) * 4);
    }
    
    #horoscope-period-selector {
        width: 100%;
    }
    
    #horoscope-period-selector button {
        flex: 1;
        padding-left: calc(var(--spacing) * 3);
        padding-right: calc(var(--spacing) * 3);
    }
}

@media (max-width: 640px) {
    #horoscope-card {
        padding: 1.5rem;
    }
}