@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* ==================================================================
   ВЕТЕРИНАРНАЯ КЛИНИКА - ДИНАМИЧЕСКИЕ CSS ПЕРЕМЕННЫЕ
   Версия: 3.0
================================================================== */

/* ===== 1. ROOT ПЕРЕМЕННЫЕ ===== */
:root {
    --primary: #2d8b49;
    --primary-dark: #388e3c;
    --primary-light: #4ba967;
    --secondary: #1e2f3e;
    --gray-light: #F9FAFB;
    --gray-border: #eef2f0;
    --text-dark: #1e2f3e;
    --text-gray: #5a6e7a;
    --danger: #dc3545;
    --warning: #ffcc00;
    --border-radius: 12px;
    --button-radius: 16px;
    --card-radius: 12px;
    --font-family: Segoe UI, Roboto, Helvetica Neue, sans-serif;
    --body-font-size: 16px;
    --heading-font-size: 32px;
    --body-bg-color: #f7f9f8;
}

/* ===== 2. БАЗОВЫЕ СТИЛИ ===== */
body {
    background-color: #f7f9f8 !important;
    color: #1e2f3e !important;
}

a, .link { color: #1e2f3e !important; }
a:hover, .link:hover { color: #000000 !important; }

/* ===== 3. ИСКЛЮЧЕНИЯ ===== */
.hero-emergency-modern .emergency-phone-modern,
.hero-emergency-modern .emergency-phone-modern:hover { color: white !important; }

/* ===== 4. РАЗМЕРЫ КОНТЕЙНЕРА И СЕКЦИЙ ===== */
.container { max-width: 1200px !important; }
section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

/* ===== 5. РАЗМЕРЫ ЗАГОЛОВКОВ ===== */
h1, .hero-title { font-size: 38px !important; }
h2, section h2 { font-size: 28px !important; }
h3 { font-size: 20px !important; }

/* ===== 6. ГРАДИЕНТ HERO-СЕКЦИИ ===== */
.hero-modern {
    background: linear-gradient(135deg, #f8faf9, #ffffff) !important;
}

/* ===== 7. ЦВЕТ РАМОК ===== */
.service-card, .review-card, .doctor-card, .contact-info, .map,
.price-table, .feature-card, .hero-image-item {
    border-color: #eef2f0 !important;
}

/* ===== 8. ШРИФТЫ ===== */
*,
*::before, *::after, html, body, div, span, h1, h2, h3, h4, h5, h6,
p, a, button, input, select, textarea,
.btn, .btn-primary, .btn-outline, .btn-emergency, .btn-load-more,
.floating-btn, .header-buttons a, .logo h1, .logo p,
.hero-title, .hero-subtitle, .stat-number, .stat-label,
.service-card h3, .service-card p, .price, .doctor-card h3, .doctor-spec,
.doctor-experience, .doctor-bio, .review-author h4, .review-text,
.contact-info p, .contact-info h3, .work-hours p,
.modal-content h2, .modal-content p, .badge-round {
    font-family: Segoe UI, Roboto, Helvetica Neue, sans-serif !important;
}

/* ===== 9. СКРУГЛЕНИЯ ===== */
.btn, .btn-primary, .btn-outline, .btn-emergency, .btn-load-more,
button[type="submit"], .floating-btn {
    border-radius: 16px !important;
}
.service-card, .review-card, .doctor-card, .contact-info, .map,
.modal-content, .form-card {
    border-radius: 12px !important;
}
input, select, textarea, .badge-round, .work-hours {
    border-radius: 12px !important;
}

/* ===== 10. РАЗМЕРЫ ТЕКСТА ===== */
body, p, .service-card p, .review-text, .doctor-bio, .contact-info p,
.hero-subtitle, .work-hours p, .modal-content p,
.contact-header p, .logo p, .stat-label, .doctor-spec, .doctor-experience,
.review-date, .emergency-24h, .badge-round {
    font-size: 16px !important;
}

/* ===== 11. ТЕНИ (опционально) ===== */
.feature-card, .contact-info, .map, .modal-content,
.price-table, .hero-image-item {
    box-shadow: none !important;
}

/* ===== 12. АНИМАЦИИ (опционально) ===== */

/* ===== 13. ЛОГОТИП ===== */
.logo h1, .logo p { display: none !important; }
.logo-image { display: block !important; }
.logo-subtitle { display: block !important; }

/* ===== 14. ДИНАМИЧЕСКИЕ СЕТКИ ===== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

/* ===== 14.1. СЕТКА ВРАЧЕЙ (КАРУСЕЛЬ) ===== */
.doctors-grid-scroll {
    --doctors-gap: 8px;
}

/* ===== 15. РАЗМЕР ФОТО ВРАЧА И ПОЗИЦИЯ ===== */
.doctor-card img,
.modal-photo {
    width: 180px !important;
    height: 180px !important;
    object-fit: cover !important;
    object-position: center 25% !important;
    border-radius: 50% !important;
    margin-bottom: 15px !important;
}

/* ===== 16. АДАПТИВ ДЛЯ МОБИЛЬНЫХ ===== */
@media (max-width: 768px) {
    .services-grid, .reviews-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .doctor-card img,
    .modal-photo {
        width: 140px !important;
        height: 140px !important;
    }
    .doctors-grid-scroll {
        gap: 15px !important;
    }
}

/* Планшеты - 2 колонки */
@media (min-width: 769px) and (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* ===== 17. ЕДИНЫЙ ПРИНЦИП ДЛЯ ВСЕХ КАРТОЧЕК ===== */
.service-card, .doctor-card, .review-card { height: auto !important; min-height: auto !important; }
.service-card .service-content p {
    display: -webkit-box !important;
    -webkit-line-clamp: 5 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
}
.doctor-card .doctor-bio {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.review-card .review-text-clamped {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

/* ===== 18. ТЕНИ ===== */
.service-card,
.review-card,
.doctor-card {
    box-shadow: none !important;
}
.service-card:hover,
.review-card:hover,
.doctor-card:hover {
    box-shadow: none !important;
}

/* ===== 19. АНИМАЦИИ ===== */

/* ===== 20. ВЫРАВНИВАНИЕ ТЕКСТА ===== */

.service-card .service-content {
    text-align: left !important;
}

.doctor-card .doctor-bio {
    text-align: left !important;
}

.review-card .review-text-clamped {
    text-align: left !important;
}

/* ===== 21. ФОН ===== */
.doctors-grid-scroll {
    background-color: var(--body-bg-color) !important;
}

.bg-light,
#services,
#doctors,
#reviews,
#contacts {
    background-color: var(--body-bg-color) !important;
}