/**
 * Стили для оптимизации мобильной версии калькулятора
 * Версия 1.0 - Апрель 2025
 */

/* Общие стили для всех размеров экрана */
.result-section-header {
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--bs-primary);
    text-align: center;
}

/* Дополнительные стили для мобильных устройств */
@media (max-width: 767.98px) {
    /* Стили для блока результатов */
    #results-section {
        padding: 1rem;
    }
    
    /* Разделитель между секциями */
    .section-divider {
        height: 1px;
        background-color: rgba(0, 0, 0, 0.1);
        margin: 1.5rem 0;
    }
    
    /* Стили для строк результатов */
    .result-row {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0.2rem;
        padding: 0.2rem 0.4rem;
        background-color: rgba(0, 0, 0, 0.02);
        border-radius: 4px;
    }
    
    .result-row:nth-child(odd) {
        background-color: rgba(0, 0, 0, 0.04);
    }
    
    .result-label {
        font-weight: 500;
        flex: 1 0 50%;
        font-size: 1.05rem;
        line-height: 1.1;
    }
    
    .result-value {
        flex: 1 0 50%;
        text-align: right;
        font-size: 1.05rem;
        line-height: 1.1;
        font-weight: 600;
        color: #025b8c;
    }
    
    /* Специальные стили для секции "Стоимость перголы" */
    .pricing-details .result-row {
        margin-bottom: 0.1rem;
        padding: 0.1rem 0.3rem;
    }
    
    /* Уменьшенный заголовок для секции "Стоимость перголы" */
    .result-section-header {
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
    }
    
    /* Стили для итоговой цены */
    .total-price {
        font-weight: bold;
        background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
        padding: 0.5rem 0.4rem !important;
        margin-top: 0.8rem !important;
        border-radius: 6px !important;
    }
    
    /* Скрываем первый блок итоговой стоимости в мобильной версии */
    .mobile-section .total-price {
        display: none !important;
    }
    
    /* Специальные стили для финальной итоговой стоимости */
    .final-total-price {
        display: block !important;
        background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
        padding: 0.7rem 0.5rem !important;
        margin-top: 1.5rem !important;
        border-radius: 6px !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid rgba(var(--bs-primary-rgb), 0.2) !important;
    }
    
    /* Уменьшаем размер итоговой цены в мобильной версии */
    .pricing-details .total-price .result-label,
    .pricing-details .total-price .result-value {
        font-size: 1.1rem;
        line-height: 1.1;
    }
    
    /* Увеличиваем размер шрифта для финальной итоговой стоимости */
    .final-total-price .result-label,
    .final-total-price .result-value {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }
    
    /* Стили для изображения перголы */
    .result-image-container {
        margin: 1.5rem 0;
        text-align: center;
    }
    
    .result-image-container img {
        max-width: 100%;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* Стили для списка опций */
    .option-list {
        margin: 1rem 0;
    }
    
    .option-title {
        font-weight: 600;
        margin-bottom: 0.5rem;
        font-size: 1.2rem;
    }
    
    .result-options-list {
        padding-left: 1.5rem;
        margin-bottom: 0;
    }
    
    .result-options-list li {
        margin-bottom: 0.25rem;
        font-size: 1.05rem;
        line-height: 1.3;
    }
    
    /* Улучшенные стили для детализации опций */
    #options-details-title {
        margin-top: 2.5rem !important;
        margin-bottom: 0.8rem !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .details-title {
        font-size: 1.15rem !important;
        text-align: center !important;
        display: inline-block !important;
        width: 100% !important;
    }
    
    .options-details {
        margin-top: 0.3rem;
        margin-bottom: 0.8rem;
        padding: 0.5rem 0.8rem;
        text-align: center;
        width: 100%;
    }
    
    .options-details-table .section-header {
        font-size: 1.1rem;
        margin: 0.3rem 0;
    }
    
    .options-details-table .option-item {
        font-size: 1rem;
        margin-bottom: 0.2rem;
        line-height: 1.2;
    }
    
    .options-details-table .option-block {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .options-details-table .option-block-title {
        font-size: 1.05rem;
        margin-bottom: 0.2rem;
    }
    
    .options-details-table .option-details {
        font-size: 0.95rem;
        line-height: 1.3;
    }
}