/**
 * Стили для компонента "Провайдеры"
 * ВЕРСИЯ 4: Полный код + Мини-карточка в одну строку
 */

/* --- Общие стили --- */
.icon-svg {
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
    vertical-align: text-bottom;
    margin-right: 8px;
    flex-shrink: 0;
}

.provider-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    overflow: hidden;
}

/* --- Шапка карточки (Основная) --- */
.provider-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    /* Если фон есть, путь должен быть правильным относительно CSS файла */
    background-image: url(../images/providers_fon.png); 
}
.card-logo img {
    width: 80px; height: 80px; border-radius: 8px; object-fit: cover;
}
.card-title-block { flex-grow: 1; }
.card-title-block h2 { margin: 0 0 5px 0; font-size: 24px; }
.card-speed { font-size: 14px; color: #777; }

/* --- НОВЫЙ БЛОК АКЦИЙ (Над вкладками) --- */
.provider-promos-block {
    background-color: #f9f9f9;
    border-bottom: 1px solid #e2e8f0;
    padding: 15px 20px;
}
.cost-connect-item {
    font-size: 1.1em;
    margin-bottom: 10px;
    display: flex; align-items: center;
}
.cost-connect-item .icon-gift { color: #e74c3c; }
.cost-value { font-weight: bold; color: #27ae60; margin-left: 5px; }
.promo-list { list-style: none; padding: 0; margin: 0; }
.promo-list li {
    background: #fdfdfa;
    border: 1px solid #eee;
    border-left: 3px solid #f0ad4e;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 15px;
    display: flex;
    align-items: center;
}
.promo-list .icon-lightning { color: #f1c40f; }


/* --- Вкладки (Сжимаются в одну строку) --- */
.provider-tabs {
    display: flex; 
    background: #f0f2f5; 
    border-bottom: 1px solid #e0e0e0;
    
    /* Запрещаем перенос на новую строку */
    flex-wrap: nowrap; 
    /* Запрещаем скролл */
    overflow: hidden;
}

.provider-tabs .tab-link {
    padding: 12px 10px; /* Уменьшили боковые отступы */
    font-size: 15px; 
    font-weight: 600; 
    color: #555;
    text-decoration: none; 
    border-bottom: 3px solid transparent; 
    margin-bottom: -1px;
    background: #f0f2f5; 
    margin-right: 0;
    transition: all 0.2s ease;
    
    /* ГЛАВНОЕ: */
    flex: 1; /* Заставляет все вкладки занимать равное пространство */
    text-align: center; /* Текст по центру */
    white-space: nowrap; /* Текст в одну строку (если хотите перенос слов внутри кнопки, поставьте normal) */
    overflow: hidden; /* Если текст не влезает — обрезаем (или убираем, если white-space: normal) */
    text-overflow: ellipsis; /* Троеточие, если не влезает */
    
    /* Хак для Flexbox, позволяющий сжиматься меньше размера контента */
    min-width: 0; 
}

.provider-tabs .tab-link:hover { color: #333; background: #fafafa; }

.provider-tabs .tab-link.active {
    color: #2d3436; 
    border-bottom-color: #ca9102; 
    background: #ffffff;
}

/* На мобильных телефонах уменьшаем шрифт и отступы, чтобы все влезло */
@media (max-width: 576px) {
    .provider-tabs .tab-link {
        font-size: 12px; /* Уменьшаем шрифт */
        padding: 10px 2px; /* Минимальные отступы */
        white-space: normal; /* Разрешаем перенос слов на 2 строки, если совсем тесно */
        line-height: 1.2; /* Межстрочный интервал поменьше */
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto; /* Высота подстроится под контент */
    }
}

/* --- Контент вкладок --- */
.provider-content { padding: 15px; background: #ffffff; }
.provider-tab-pane { display: none; }
.provider-tab-pane.active { display: block; }
.provider-tab-pane h3 {
    color: #535353; border-bottom: 2px solid #f0f0f0; padding-bottom: 8px;
    margin: 0 0 15px 0; font-size: 20px; font-weight: 600;
}
.card-description { line-height: 1.6; }


/* --- Рейтинг (Звезды и блок) --- */
.rating-stars .star, .review-rating-stars .star {
    display: inline-block; width: 20px; height: 20px; margin: 0 1px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ccc"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></svg>') center no-repeat; background-size: contain;
}
.card-rating-overall {
    flex-shrink: 0; text-align: center; padding: 10px;
    background: #f9f9f9; border-radius: 10px; min-width: 100px;
}
.card-rating-overall .rating-value { font-size: 28px; font-weight: 700; }
.card-rating-overall .rating-votes { font-size: 12px; color: #888; margin-top: 5px; }
.card-rating-overall .rating-stars { position: relative; display: inline-block; }
.card-rating-overall .rating-stars::before {
    content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fbc02d"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></svg>') left repeat-x; background-size: 22px 20px; z-index: 1;
}

/* Градация рейтинга по цветам */
.card-rating-overall.r0 .rating-stars::before { width: 0%; } .r0 .rating-value { color: #d9534f; }
.card-rating-overall.r1 .rating-stars::before { width: 10%; } .r1 .rating-value { color: #d9534f; }
.card-rating-overall.r2 .rating-stars::before { width: 20%; } .r2 .rating-value { color: #d9534f; }
.card-rating-overall.r3 .rating-stars::before { width: 30%; } .r3 .rating-value { color: #d9534f; }
.card-rating-overall.r4 .rating-stars::before { width: 40%; } .r4 .rating-value { color: #d9534f; }
.card-rating-overall.r5 .rating-stars::before { width: 50%; } .r5 .rating-value { color: #f0ad4e; }
.card-rating-overall.r6 .rating-stars::before { width: 60%; } .r6 .rating-value { color: #f0ad4e; }
.card-rating-overall.r7 .rating-stars::before { width: 70%; } .r7 .rating-value { color: #f0ad4e; }
.card-rating-overall.r8 .rating-stars::before { width: 80%; } .r8 .rating-value { color: #5cb85c; }
.card-rating-overall.r9 .rating-stars::before { width: 90%; } .r9 .rating-value { color: #5cb85c; }
.card-rating-overall.r10 .rating-stars::before { width: 100%; } .r10 .rating-value { color: #5cb85c; }

.card-avg-ratings { display: flex; justify-content: space-around; gap: 15px; margin-top: 15px; }
.avg-rating-item { text-align: center; background: #f9f9f9; padding: 10px; border-radius: 8px; flex: 1; }
.avg-rating-item .avg-title { font-size: 14px; color: #555; margin-bottom: 5px; font-weight: bold; }
.avg-rating-item .avg-value { font-size: 18px; font-weight: 600; color: #333; }

/* --- Форма отзыва (Сворачиваемая) --- */
.card-review-form { margin-top: 15px; }
.review-form-toggle {
    cursor: pointer; font-weight: bold; padding: 10px 15px; border: 1px solid #ddd;
    border-radius: 5px; background: #f9f9f9; margin-bottom: 0; display: block; color: #333;
}
.review-form-toggle:hover { background: #f1f1f1; }
.review-form-toggle .toggle-icon { float: right; font-family: monospace; font-weight: bold; }
.review-form-toggle.active { background: #eee; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.review-form-collapsible {
    padding: 15px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 5px 5px; background: #fff;
}
.review-form-group { margin-bottom: 15px; }
.review-form-group label { display: block; font-weight: 600; margin-bottom: 5px; }
.review-form-ratings { display: flex; gap: 30px; }
.review-rating-stars { line-height: 1; }
.review-rating-stars .star { cursor: pointer; }
.review-rating-stars .star.hover, .review-rating-stars .star.active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fbc02d"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></svg>');
}
.review-form-bottom { display: flex; align-items: center; gap: 15px; }
.review-form-response.loading { color: #888; }
.review-form-response.success { color: #5cb85c; font-weight: 600; }
.review-form-response.error { color: #d9534f; font-weight: 600; }
.card-all-reviews { text-align: right; margin-top: 15px; }
.card-all-reviews a {background: #fbc02da1; padding: 10px; border-radius: 8px; color: #535353; font-weight: bold;}

/* --- Списки Тарифов и Контактов --- */
.card-tariffs-list, .card-contacts-list { list-style: none; padding: 0; margin: 0; }
.card-tariffs-list li {
    background: #fdfdfa; border: 1px solid #eee; border-left: 3px solid #f0ad4e;
    padding: 10px 15px; margin-bottom: 8px; border-radius: 4px; font-size: 15px; display: flex; align-items: center;
}
.card-tariffs-list li .icon-collection { color: #f0ad4e; }
.card-contacts-list li {
    font-size: 15px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; display: flex; align-items: center;
}
.card-contacts-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.card-contacts-list li .icon-svg { color: #3498db; }
.card-contacts-list li strong { min-width: 130px; color: #555; }
.promo-code-item { background: #fff8f8; padding: 10px !important; border-radius: 5px; border: 1px dashed #d9534f !important; }
.promo-code-item span { font-weight: 700; font-size: 18px; color: #d9534f; }

/* ---------------------------------
 * Страница "Все отзывы" 
 * --------------------------------- */
.provider-card.mini .provider-content {
    background: #fff;
    padding: 0; /* Убираем внутренние отступы, чтобы шапка была к краям */
}
.provider-reviews-list {
    margin-top: 20px;
}
.review-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}
.review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.review-author {
    font-weight: 700;
    font-size: 16px;
}
.review-date {
    font-size: 14px;
    color: #888;
}
.review-ratings {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.review-rating-item span {
    font-size: 14px;
}
.review-rating-item .rating-value {
    font-weight: 600;
    padding-left: 5px;
}
.review-comment {
    line-height: 1.6;
    color: #333;
}
.back-to-providers {
    margin-top: 20px;
}
.back-to-providers a{ background: #fbc02da1;
    padding: 10px;
    border-radius: 8px;
    color: #535353;
    font-weight: bold;
}
/* ---------------------------------
 * Адаптивность (Общая)
 * --------------------------------- */
@media (max-width: 768px) {
    .provider-card-header { flex-direction: column; align-items: flex-start; }
    .card-logo img { width: 64px; height: 64px; }
    .card-rating-overall { width: 100%; margin-top: 10px; }
    .card-avg-ratings, .review-form-ratings { flex-direction: column; gap: 10px; }
    .review-form-bottom { flex-direction: column; align-items: flex-start; }
    .card-contacts-list li { flex-wrap: wrap; }
    .card-contacts-list li strong { width: 100%; margin-bottom: 5px; }
}

/* =============================================
   СТИЛИ ДЛЯ МИНИ-КАРТОЧКИ (В ОДНУ СТРОКУ) [Cite: 1]
   ============================================= */

.provider-card.mini .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: #f9f9f9;
    border-bottom: 1px solid #eee;
    gap: 15px;
    /* Сбрасываем стили из обычной шапки */
    background-image: none;
}

/* Логотип в мини-карточке */
.provider-card.mini .card-logo {
    flex-shrink: 0;
    margin-right: 10px;
}

.provider-card.mini .card-logo img {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    object-fit: cover;
}

/* Заголовок в мини-карточке */
.provider-card.mini .card-title {
    flex-grow: 1;
    margin: 0;
    padding: 0;
}

.provider-card.mini .card-title h2 {
    font-size: 18px;
    margin: 0;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
}

/* Рейтинг в мини-карточке */
.provider-card.mini .card-rating-overall {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: transparent;
    box-shadow: none;
    border: 1px solid #eee;
    border-radius: 20px;
    min-width: auto;
    margin-top: 0;
}

.provider-card.mini .rating-value {
    font-size: 16px;
    margin-right: 8px;
    line-height: 1;
}

.provider-card.mini .rating-stars {
    display: flex;
}

.provider-card.mini .rating-stars .star {
    width: 20px;
    height: 18px;
    margin: 0 1px;
}

/* Скрываем блок "Всего голосов" */
.provider-card.mini .rating-votes {
    display: none; 
}

/* Адаптивность для мини-карточки */
@media (max-width: 576px) {
    .provider-card.mini .card-header {
        flex-wrap: wrap;
    }
    
    .provider-card.mini .card-rating-overall {
        margin-left: auto;
    }
}