/* =========================================
   PRICE SECTION STYLES
   ========================================= */

.mp-price-section {
    padding: 60px 0;
    background-color: var(--bg-light);
}

.mp-price-content {
    max-width: 1200px; /* Ограничиваем ширину текста для читаемости */
    margin-bottom: 50px;
}

.mp-price-content p {
    font-size: 20px;
    line-height: 1.6;
    color: #333; /* Чуть темнее чем text-gray для основного текста */
    margin-bottom: 24px;
}

/* Список с этапами */
.mp-price-list {
    margin: 30px 0;
    padding-left: 24px;
    list-style-type: disc;
}

.mp-price-list li {
    font-size: 20px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 16px;
    padding-left: 10px;
}

.mp-price-list li::marker {
    color: #000000; 
    font-size: 1.2em;
}

/* Акцентная строка с ценой */
.mp-price-highlight {
    font-weight: 600;
    font-size: 20px !important;
    color: var(--primary-blue) !important;
    margin-top: 30px;
}

/* --- CTA Block --- */
.mp-price-cta {
    margin-top: 60px;
}

.mp-cta-title {
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.3;
    color: var(--text-dark);
    margin-bottom: 30px;
    max-width: 1400px;
}

.mp-cta-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1000px;
}

.mp-cta-buttons-grid .mp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px; /* Фиксируем высоту кнопок, чтобы были одинаковыми */
    font-size: 18px;
    white-space: nowrap;
}


/* =========================================
   SOLUTIONS TAGS SECTION STYLES
   ========================================= */

.mp-solutions-cloud-section {
    padding: 30px 0 80px 0;
}

.mp-tags-cloud-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
}

/* Переопределяем или дополняем стиль тега для этого блока, 
   если нужно, чтобы он выглядел как на скрине (белый фон, синяя обводка).
   В main.css у .mp-tag уже есть нужные стили, но на всякий случай уточним
   поведение в облаке. */
.mp-tags-cloud-wrapper .mp-tag {
    margin: 0; /* Убираем margin-bottom, так как используем gap у родителя */
    background-color: var(--bg-light);
    width: auto; /* На всякий случай */
}

.mp-tags-cloud-wrapper .mp-tag:hover {
    background-color: var(--primary-blue);
    color: #fff;
    /* Стрелочка внутри тега побелеет благодаря transition в main.css */
}


/* =========================================
   ADAPTIVE / RESPONSIVE
   ========================================= */

/* Tablet (max 992px) */
@media (max-width: 992px) {
    .mp-price-content p, 
    .mp-price-list li {
        font-size: 16px;
    }
    
    .mp-cta-title {
        font-size: 20px;
    }

    /* Кнопки в 2 ряда или одна под другой */
    .mp-cta-buttons-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 16px;
    }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
    .mp-price-section {
        padding: 40px 0;
    }

    .mp-price-list {
        padding-left: 20px;
    }

    .mp-price-highlight {
        font-size: 18px !important;
    }

    .mp-cta-title {
        font-size: 18px;
        margin-bottom: 24px;
        text-align: left;
    }

    /* На мобильных теги лучше оставить скроллом, 
       если хотите поведение как в main.css (.mp-mobile-only), 
       или перенести в облако. Здесь сделано облаком. 
       Если нужно скроллом - добавьте класс mp-mobile-only к обертке в HTML. */
    .mp-tags-cloud-wrapper {
        gap: 10px;
    }
    
    .mp-tags-cloud-wrapper .mp-tag {
        font-size: 14px;
        padding: 10px 16px 10px 16px; 
        /* Если убирать стрелочку на мобильных, можно переопределить padding */
    }
}