/* Основной контейнер калькулятора */
#Calcolatore-del-Fototipo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 20px 0 !important;
    padding: 20px !important;
    background: #f9f9f9 !important;
    border-radius: 10px !important;
    clear: both !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Заголовок калькулятора */
#Calcolatore-del-Fototipo .calculator-header {
    margin: 0 0 40px 40px !important;
}

#Calcolatore-del-Fototipo .calculator-header h2 {
    font-size: 2.2em !important;
    margin-bottom: 10px !important;
    font-weight: 300 !important;
}

#Calcolatore-del-Fototipo .calculator-header p {
    opacity: 0.9 !important;
    font-size: 1.1em !important;
}

/* Контейнер аккордеона */
.calculator-accordion {
    display: block !important;
    padding: 20px !important;
    visibility: visible !important;
    margin-top: 20px !important;
}

/* Элементы аккордеона */
.calculator-accordion-item {
    display: block !important;
    margin-bottom: 20px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
}

.calculator-accordion-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
}

/* Заголовки аккордеона */
.calculator-accordion-header {
    background: #88bab9 !important;
    color: white !important;
    padding: 20px 25px !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-weight: 500 !important;
    font-size: 1.1em !important;
    transition: all 0.3s ease !important;
}

.calculator-accordion-header:hover {
    background: #9fc7c6 !important;
}

/* Иконка аккордеона */
.calculator-accordion-icon {
    font-size: 1.2em !important;
    transition: transform 0.3s ease !important;
}

.calculator-accordion-item.active .calculator-accordion-icon {
    transform: rotate(180deg) !important;
}

/* Контент аккордеона */
.calculator-accordion-content {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease !important;
    background: white !important;
}

.calculator-accordion-item.active .calculator-accordion-content {
    max-height: 600px !important;
}

/* Контент вопроса */
.question-content {
    padding: 25px !important;
    border-left: 4px solid #88bab9 !important;
}

/* Опции */
.calculator-options {
    display: grid !important;
    gap: 12px !important;
}

.calculator-option {
    display: flex !important;
    align-items: center !important;
    padding: 15px !important;
    background: #e9e2d7 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
}

.calculator-option:hover {
    background: #cec9c5 !important;
    transform: translateX(5px) !important;
}

.calculator-option.selected {
    background: linear-gradient(135deg, #9fc7c6 0%, #88bab9 100%) !important;
    color: white !important;
    border-color: #667eea !important;
}

.calculator-option input[type="radio"] {
    margin-right: 15px !important;
    transform: scale(1.2) !important;
    accent-color: #667eea !important;
}

/* Блок результатов */
#result,
.calculator-result {
    margin-top: 30px !important;
    padding: 25px !important;
    background: linear-gradient(135deg, #88bab9 0%, #9fc7c6 100%) !important;
    color: white !important;
    border-radius: 15px !important;
    text-align: center !important;
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: all 0.5s ease !important;
    display: block !important;
    visibility: visible !important;
}

#result.show,
.calculator-result.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

#result h3,
.calculator-result h3 {
    font-size: 1.8em !important;
    margin-bottom: 15px !important;
    font-weight: 300 !important;
}

.result-description {
    font-size: 1.1em !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

.recommendations {
    background: rgba(255, 255, 255, 0.2) !important;
    padding: 20px !important;
    border-radius: 10px !important;
    margin-top: 20px !important;
}

.recommendations h4 {
    margin-bottom: 10px !important;
    font-size: 1.2em !important;
}

/* Кнопки */
.phototype-link-btn {
    background: #e9e2d7 !important;
    color: #333 !important;
    text-decoration: none !important;
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 25px !important;
    cursor: pointer !important;
    font-size: 0.95em !important;
    font-weight: 500 !important;
    margin: 15px 10px 5px 0 !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.phototype-link-btn:hover {
    background: #d4cfc7 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

.reset-btn {
    background: #e9e2d7 !important;
    color: #000 !important;
    border: none !important;
    padding: 15px 30px !important;
    border-radius: 25px !important;
    cursor: pointer !important;
    font-size: 1em !important;
    font-weight: 500 !important;
    margin-top: 20px !important;
    transition: all 0.3s ease !important;
}

.reset-btn:hover {
    background: #d4cfc7 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Убеждаемся, что элементы результата видны */
#phototype-title,
#phototype-description,
#recommendations-text,
#phototype-links {
    display: block !important;
    visibility: visible !important;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    #Calcolatore-del-Fototipo {
        margin: 10px !important;
        padding: 15px !important;
        border-radius: 15px !important;
    }
    
    #Calcolatore-del-Fototipo .calculator-header {
        margin: 0 0 30px 20px !important;
    }
    
    #Calcolatore-del-Fototipo .calculator-header h2 {
        font-size: 1.8em !important;
    }
    
    #Calcolatore-del-Fototipo .calculator-header p {
        font-size: 1em !important;
    }
    
    .calculator-accordion {
        padding: 15px !important;
    }

    .phototype-link-btn {
        margin: 10px 5px 5px 0 !important;
        padding: 10px 20px !important;
        font-size: 0.9em !important;
    }

    .calculator-accordion-header {
        padding: 15px 20px !important;
        font-size: 1em !important;
    }

    .question-content {
        padding: 20px !important;
    }

    .calculator-option {
        padding: 12px !important;
        font-size: 0.95em !important;
    }
}