/* ============================================================
   Montserrat — самохостинг вместо Google Fonts.
   Шрифты переменные (wght 100-900), поэтому один файл на алфавит
   покрывает все начертания: 400, 600 и 700 из одного источника.
   unicode-range: браузер качает только нужный алфавит —
   польская страница не тянет кириллицу и наоборот.
   ============================================================ */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/montserrat-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/montserrat-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                   U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                   U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================
   GINEKOLOG-MED.PL - Main Stylesheet
   Version: 2.0
   Font: Montserrat
   Framework: Bootstrap 5.3
   ============================================ */

/* ==================== 
   1. CSS VARIABLES 
   ==================== */
:root {
    /* Colors */
    --color-primary: #49C0D0;
    --color-primary-dark: #3BA8B7;
    --color-primary-light: #7DD4E0;
    --color-secondary: #FF85B3;
    --color-secondary-dark: #E06A96;
    
    /* Gradient */
    --gradient-primary: linear-gradient(135deg, #49C0D0 0%, #7DD4E0 50%, #FF85B3 100%);
    --gradient-button: linear-gradient(135deg, #5AA9FF 0%, #7C8CFF 50%, #FF85B3 100%);
    --gradient-hero: linear-gradient(135deg, #F4FCFC 0%, #E8F8F8 50%, #FFF5F8 100%);
    
    /* Text Colors */
    --color-text-primary: #272727;
    --color-text-secondary: #5A5A5A;
    --color-text-muted: #8A8A8A;
    --color-text-light: #FFFFFF;
    
    /* Background Colors */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F4FCFC;
    --color-bg-tertiary: #F8F9FA;
    --color-bg-dark: #1A2B3C;
    
    /* Border Colors */
    --color-border: #E6EBF1;
    --color-border-light: #F0F4F8;
    
    /* Shadow */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
    --shadow-primary: 0 8px 24px rgba(73, 192, 208, 0.3);
    
    /* Typography */
    --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3rem;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
    
    /* Z-Index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1050;
    --z-tooltip: 1080;
}

/* Тёмный вариант фирменного цвета для текста: контраст 5.28 против 2.16.
   Светлый #49C0D0 остаётся для фонов, иконок, рамок и градиентов. */
:root {
    --color-primary-text: #217682;
    --color-text-muted: #6E6E6E;
}


/* ==================== 
   2. RESET & BASE 
   ==================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary-text);
    color: #fff;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    z-index: var(--z-tooltip);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--spacing-md);
}

/* ==================== 
   3. TYPOGRAPHY 
   ==================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
}

a {
    /* был --color-primary: контраст 2.16 на белом при норме 4.5 */
    color: var(--color-primary-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

/* ==================== 
   4. BUTTONS 
   ==================== */
.btn {
    font-family: var(--font-family);
    font-weight: 600;
    border-radius: var(--radius-lg);
    padding: 0.625rem 1.25rem;
    transition: all var(--transition-normal);
}

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: var(--shadow-primary);
    transform: translateY(-2px);
}

.btn-gradient {
    background: var(--gradient-button);
    border: none;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(124, 140, 255, 0.28);
}

.btn-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.7s ease;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    color: white;
}

.btn-gradient:hover::before {
    transform: translateX(100%);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-bg-secondary);
    color: var(--color-primary);
    border: none;
    font-size: 1.25rem;
    transition: all var(--transition-normal);
}

.btn-icon:hover {
    background: var(--color-primary);
    color: white;
    transform: scale(1.1);
}

.btn-phone {
    font-weight: 600;
}

/* ==================== 
   5. HEADER 
   ==================== */
.header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    z-index: var(--z-sticky);
}

.header.scrolled {
    box-shadow: var(--shadow-md);
}

.navbar {
    padding: var(--spacing-md) 0;
}

.navbar-brand {
    padding: 0;
}

.logo-img {
    height: 50px;
    width: auto;
}

.nav-link {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    /* был --color-primary: контраст 2.16 на белом при норме 4.5 */
    color: var(--color-primary-text) !important;
}

.dropdown-menu {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-sm) 0;
}

.dropdown-item {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    transition: all var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--color-primary);
    color: white;
}

.lang-dropdown .dropdown-toggle {
    font-size: var(--font-size-sm);
}

.navbar-toggler {
    border: none;
    padding: var(--spacing-sm);
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* ==================== 
   6. HERO SECTION 
   ==================== */
.hero-section {
    background: var(--gradient-hero);
    position: relative;
    overflow: hidden;
    padding: var(--spacing-3xl) 0;
}

.hero-bg-gradient {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(ellipse at top right, rgba(73, 192, 208, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.min-vh-hero {
    min-height: calc(100vh - 200px);
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: rgba(73, 192, 208, 0.12);
    color: var(--color-primary-text);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
    line-height: 1.1;
}

.hero-subtitle {
    color: var(--color-primary);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-top: var(--spacing-sm);
}

.hero-description {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
    max-width: 540px;
}

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.trust-badge i {
    color: var(--color-primary);
    font-size: 1.25rem;
}

.hero-cta {
    margin-top: var(--spacing-xl);
}

.hero-image-wrapper {
    position: relative;
}

.hero-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
}

.quick-appointment-card {
    position: absolute;
    bottom: var(--spacing-xl);
    left: var(--spacing-xl);
    right: var(--spacing-xl);
    background: white;
    padding: var(--spacing-lg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.quick-appointment-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.quick-appointment-card h3 i {
    color: var(--color-primary);
}

.form-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.form-note i {
    color: var(--color-primary);
}

/* ==================== 
   7. STATS SECTION 
   ==================== */
.stats-section {
    background: white;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

.stat-card {
    padding: var(--spacing-lg);
}

.stat-icon {
    width: 64px;
    height: 64px;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.stat-icon i {
    font-size: 1.75rem;
    color: white;
}

.stat-number {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: 500;
}

/* ==================== 
   8. SECTION COMPONENTS 
   ==================== */
.section-header {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.section-badge {
    display: inline-block;
    background: rgba(73, 192, 208, 0.1);
    color: var(--color-primary-dark);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-badge-light {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-bottom: var(--spacing-md);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
}

/* ==================== 
   9. DOCTORS SECTION 
   ==================== */
.doctors-section {
    background: var(--color-bg-secondary);
}

/* Doctor cards in doctors section grid should have equal height */
.doctors-section .doctor-card {
    height: 100%;
}

.doctor-card {
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    position: relative;
    border: 1px solid var(--color-border-light);
}

.doctor-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--gradient-primary);
}

.doctor-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.doctor-card.featured {
    border: 2px solid var(--color-primary);
}

.doctor-card.featured::before {
    width: 8px;
}

.featured-badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: var(--color-primary);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.doctor-card-body {
    padding: var(--spacing-lg);
}

.doctor-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.doctor-avatar {
    width: 84px;
    height: 84px;
    border-radius: var(--radius-full);
    object-fit: cover;
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

.doctor-info {
    flex: 1;
}

.doctor-name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.doctor-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.doctor-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--color-bg-secondary);
    color: var(--color-primary-dark);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.admin-card::before {
    background: linear-gradient(180deg, #CBD5E0 0%, #A0AEC0 100%);
}

/* ==================== 
   10. ABOUT SECTION 
   ==================== */
.about-section {
    background: white;
}

.about-image-wrapper {
    position: relative;
}

.about-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

.about-experience-badge {
    position: absolute;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    background: var(--color-primary-text);
    color: #fff;
    padding: var(--spacing-lg);
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.about-experience-badge .years {
    display: block;
    font-size: var(--font-size-4xl);
    font-weight: 800;
    line-height: 1;
}

.about-experience-badge .text {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.about-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 500;
}

.feature-item i {
    color: var(--color-primary);
    font-size: 1.25rem;
}

/* ==================== 
   11. SERVICES SECTION 
   ==================== */
.services-section {
    background: var(--color-bg-secondary);
}

.service-card {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    height: 100%;
    transition: all var(--transition-normal);
    border: 1px solid var(--color-border-light);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.service-icon {
    width: 72px;
    height: 72px;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    transition: transform var(--transition-normal);
}

.service-card:hover .service-icon {
    transform: scale(1.1);
}

.service-icon i {
    font-size: 2rem;
    color: white;
}

.service-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.service-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
}

.service-link i {
    transition: transform var(--transition-fast);
}

.service-link:hover i {
    transform: translateX(4px);
}

/* ==================== 
   12. ADVANTAGES SECTION 
   ==================== */
.advantages-section {
    background: white;
}

.advantage-card {
    text-align: center;
    padding: var(--spacing-xl);
}

.advantage-icon {
    width: 80px;
    height: 80px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    transition: all var(--transition-normal);
}

.advantage-icon i {
    font-size: 2rem;
    color: var(--color-primary);
    transition: all var(--transition-normal);
}

.advantage-card:hover .advantage-icon {
    background: var(--color-primary);
}

.advantage-card:hover .advantage-icon i {
    color: white;
}

.advantage-card h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
}

.advantage-card p {
    font-size: var(--font-size-sm);
    margin-bottom: 0;
}

/* ==================== 
   13. REVIEWS SECTION 
   ==================== */
.reviews-section {
    background: var(--color-bg-secondary);
}

.review-card {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.review-card:hover {
    box-shadow: var(--shadow-md);
}

.review-rating {
    margin-bottom: var(--spacing-md);
}

.review-rating i {
    color: #FFB800;
    font-size: 1rem;
}

.review-text {
    font-size: var(--font-size-base);
    font-style: italic;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.7;
}

.review-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
}

.author-name {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary);
}

.author-status {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ==================== 
   14. FAQ SECTION 
   ==================== */
.faq-section {
    background: white;
}

.accordion-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg) !important;
    margin-bottom: var(--spacing-md);
    overflow: hidden;
}

.accordion-button {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: var(--font-size-base);
    padding: var(--spacing-lg);
    background: white;
}

.accordion-button:not(.collapsed) {
    background: var(--color-bg-secondary);
    color: var(--color-primary);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: var(--color-border);
}

.accordion-button::after {
    background-size: 1rem;
}

.accordion-body {
    padding: var(--spacing-lg);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

/* ==================== 
   15. APPOINTMENT SECTION 
   ==================== */
.appointment-section {
    background: linear-gradient(135deg, #1A2B3C 0%, #2D4356 100%);
    color: white;
}

.appointment-section .section-title {
    color: white;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    color: rgba(255, 255, 255, 0.9);
}

.contact-item i {
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-top: 2px;
}

.contact-item a {
    color: white;
}

.contact-item a:hover {
    color: var(--color-primary);
}

.social-buttons .btn-light {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.social-buttons .btn-light:hover {
    background: white;
    color: var(--color-text-primary);
}

.appointment-form-card {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.appointment-form-card h3 {
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
}

.form-control,
.form-select {
    font-family: var(--font-family);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(73, 192, 208, 0.2);
}

.form-label {
    font-weight: 500;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.form-disclaimer {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* ==================== 
   16. MAP SECTION 
   ==================== */
.map-wrapper {
    position: relative;
}

.map-wrapper iframe {
    display: block;
    width: 100%;
}

/* Оговорка про язык приёма на английской главной. Сайт переведён
   на английский, а приём по-английски не ведётся — сказать это надо
   на первом экране, а не в кабинете. */
.hero-note {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    max-width: 44em;
    margin: 1rem 0 0;
    padding: .75rem 1rem;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-radius: 12px;
}

.hero-note > i {
    flex: none;
    margin-top: .15rem;
    color: var(--color-primary);
}

/* Кнопка «смотреть документы» под списком квалификации. */
.cred-more {
    margin: 1rem 0 0;
}

/* ====================
   Дипломы и сертификаты
   ==================== */
.cert-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2.25rem;
    margin-top: 1.75rem;
}

.cert-stats span {
    display: flex;
    flex-direction: column;
    font-size: .875rem;
    color: var(--color-text-secondary);
}

.cert-stats b {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-primary-dark);
}

.cert-section {
    padding: 3rem 0 1rem;
}

.cert-section + .cert-section {
    padding-top: 1.5rem;
}

.cert-section h2 {
    margin: 0 0 .5rem;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

.cert-section__note {
    max-width: 46em;
    margin: 0 0 1.5rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1.25rem;
}

/* У каждой карточки свой якорь: страницы услуг ссылаются не на список
   документов, а на конкретный документ, и hasCredential в разметке —
   тоже. Отступ сверху нужен, чтобы карточка не уезжала под липкую
   шапку, когда на неё переходят по ссылке. */
.cert-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    scroll-margin-top: 90px;
}

/* Подсветка карточки, на которую только что перешли по ссылке:
   иначе в сетке из сорока семи документов непонятно, какой из них
   тот самый. Гаснет сама, ничего не нажимая. */
.cert-card:target {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(73, 192, 208, .18);
}

/* Скан показываем целиком, не обрезая: у документа важен каждый край.
   Поэтому contain и светлая подложка под разные пропорции листа. */
.cert-card__shot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    padding: .75rem;
    background: var(--color-bg-secondary);
}

/* Флекс-элементом здесь оказывается <picture>, а не <img>, и max-height
   у картинки внутри упирается в высоту picture, то есть ни во что.
   Убираем picture из раскладки и задаём картинке высоту явным числом. */
.cert-card__shot picture {
    display: contents;
}

.cert-card__shot img {
    max-width: 100%;
    max-height: 206px;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: var(--shadow-sm);
}

a.cert-card__shot:hover img {
    box-shadow: var(--shadow-md);
}

.cert-card__shot--none > i {
    font-size: 2.5rem;
    color: var(--color-text-muted);
    opacity: .45;
}

.cert-card figcaption {
    display: flex;
    flex-direction: column;
    gap: .3125rem;
    padding: 1rem 1.125rem 1.25rem;
}

.cert-card__name {
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text-primary);
}

.cert-card__org {
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.cert-card__meta {
    font-size: .8125rem;
    color: var(--color-primary-dark);
}

.cert-card__what {
    margin-top: .25rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.cert-card__nodoc {
    font-size: .75rem;
    font-style: italic;
    color: var(--color-text-muted);
}

.cert-note {
    max-width: 46em;
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

@media (max-width: 575.98px) {
    .cert-grid {
        grid-template-columns: 1fr;
    }

    .cert-card__shot {
        min-height: 280px;
    }

    .cert-card__shot img {
        max-height: 256px;
    }
}

/* Заглушка карты. Встроенная карта Google грузилась вместе со страницей,
   то есть отдавала Google адрес посетителя до согласия на cookie.
   Теперь на её месте кнопка, а карта встаёт по нажатию. */
.map-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 420px;
    padding: 2rem 1.5rem;
    background:
        repeating-linear-gradient(45deg, transparent 0 22px,
                                  rgba(73, 192, 208, .06) 22px 23px),
        var(--color-bg-secondary);
    cursor: pointer;
}

.map-wrapper .map-gate {
    min-height: 380px;
}

.map-gate__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    padding: 1.25rem 1.75rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    line-height: 1.4;
    cursor: pointer;
}

.map-gate:hover .map-gate__btn {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
}

.map-gate__btn > i {
    font-size: 1.75rem;
    color: var(--color-primary);
}

.map-gate__where {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.map-gate__do {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-primary-dark);
}

.map-gate__note {
    max-width: 34em;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.5;
    text-align: center;
    color: var(--color-text-muted);
}

@media (max-width: 991.98px) {
    .map-gate,
    .map-wrapper .map-gate {
        min-height: 320px;
    }
}

/* ==================== 
   17. FOOTER 
   ==================== */
.footer {
    background: var(--color-bg-dark);
    color: rgba(255, 255, 255, 0.7);
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-sm);
}

.footer-social {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.footer-social a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    transition: all var(--transition-normal);
}

.footer-social a:hover {
    background: var(--color-primary);
    transform: translateY(-3px);
}

.footer-title {
    color: white;
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: var(--spacing-sm);
}

.footer-links a {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-contacts {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contacts li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
}

.footer-contacts i {
    color: var(--color-primary);
    margin-top: 3px;
}

.footer-contacts a {
    color: rgba(255, 255, 255, 0.6);
}

.footer-contacts a:hover {
    color: var(--color-primary);
}

.footer-divider {
    border-color: rgba(255, 255, 255, 0.1);
    margin: var(--spacing-xl) 0;
}

.footer-bottom {
    padding-top: var(--spacing-md);
}

.copyright {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0;
}

.footer-link {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--font-size-sm);
}

.footer-link:hover {
    color: var(--color-primary);
}

/* ==================== 
   18. COOKIE CONSENT 
   ==================== */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: var(--z-fixed);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
}

.cookie-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.cookie-content p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.cookie-content p i {
    font-size: 1.25rem;
    color: var(--color-primary);
}

.cookie-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

/* ==================== 
   19. FIXED TELEGRAM BUTTON 
   ==================== */
.fixed-telegram {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0088CC 0%, #00A3E0 100%);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.75rem;
    box-shadow: 0 8px 24px rgba(0, 136, 204, 0.4);
    z-index: var(--z-fixed);
    transition: all var(--transition-normal);
    animation: pulse-telegram 2s infinite;
}

.fixed-telegram:hover {
    transform: scale(1.1);
    color: white;
}

@keyframes pulse-telegram {
    0%, 100% {
        box-shadow: 0 8px 24px rgba(0, 136, 204, 0.4);
    }
    50% {
        box-shadow: 0 8px 32px rgba(0, 136, 204, 0.6);
    }
}

/* ==================== 
   20. RESPONSIVE STYLES 
   ==================== */
@media (max-width: 991.98px) {
    .hero-section {
        padding: var(--spacing-2xl) 0;
    }
    
    .min-vh-hero {
        min-height: auto;
    }
    
    .hero-title {
        font-size: var(--font-size-3xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-2xl);
    }
    
    .quick-appointment-card {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        margin-top: var(--spacing-xl);
    }
    
    .about-experience-badge {
        bottom: var(--spacing-md);
        right: var(--spacing-md);
        padding: var(--spacing-md);
    }
    
    .about-experience-badge .years {
        font-size: var(--font-size-2xl);
    }
    
    .about-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .hero-title {
        font-size: var(--font-size-2xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-xl);
    }
    
    .trust-badges {
        flex-direction: column;
    }
    
    .hero-cta .btn {
        width: 100%;
        margin-bottom: var(--spacing-sm);
    }
    
    .stat-number {
        font-size: var(--font-size-3xl);
    }
    
    .section-title {
        font-size: var(--font-size-2xl);
    }
    
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-content p {
        justify-content: center;
    }
    
    .fixed-telegram {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        bottom: var(--spacing-lg);
        right: var(--spacing-lg);
    }
}

@media (max-width: 575.98px) {
    .hero-section {
        padding: var(--spacing-xl) 0;
    }
    
    .doctor-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .doctor-tags {
        justify-content: center;
    }
    
    .contact-info-list {
        text-align: center;
    }
    
    .contact-item {
        flex-direction: column;
        align-items: center;
    }
    
    .social-buttons {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .social-buttons .btn {
        width: 100%;
    }
}

/* ==================== 
   21. ANIMATIONS 
   ==================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Icon Pulse Animation */
.stat-icon,
.service-icon,
.advantage-icon {
    animation: iconPulse 4s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ==================== 
   22. UTILITY CLASSES 
   ==================== */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-primary {
    background: var(--gradient-primary);
}

.shadow-primary {
    box-shadow: var(--shadow-primary);
}

/* Focus visible for accessibility */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .header,
    .footer,
    .fixed-telegram,
    .cookie-consent {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        color: black;
    }
}


/* ================================================================
   ДОСТУПНОСТЬ И ЧИТАЕМОСТЬ
   Добавлено после замера на живом сайте: 56 элементов не проходили
   по контрасту, 26 целей нажатия были меньше 44px. При том что
   90% трафика — мобильный.

   Фирменный #49C0D0 остаётся для фонов, иконок, рамок и градиентов.
   Для ТЕКСТА на светлом введён тёмный вариант того же тона:
   контраст 5.28 на белом против прежних 2.16 при норме 4.5.
   ================================================================ */


/* --- текстовые роли фирменного цвета --- */
.section-badge,
.service-link,
.hero-subtitle,
.hero-badge,
.nav-link,
.nav-link.active,
.accordion-button:not(.collapsed),
.proof-card .pc-name,
.cred-note a,
.local-band a,
.privacy-content a {
    color: var(--color-primary-text);
}

.service-link:hover,
.nav-link:hover,
.cred-note a:hover {
    color: #16545E;
}

/* Иконки внутри карточек остаются светлыми: они на цветной подложке
   или крупные, к ним требование по контрасту мягче. */
.proof-card i,
.local-facts i,
.advantage-icon i,
.pricing-icon i {
    color: #49C0D0;
}

/* --- цели нажатия не меньше 44px: правило Apple и Google --- */
@media (max-width: 991.98px) {
    .service-link,
    .footer-links a,
    .proof-card,
    .related-service {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .footer-links a {
        padding-block: .35rem;
    }

    .footer-social a,
    .header-contacts .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    /* Чекбокс согласия: 16px слишком мелко для пальца */
    .form-check-input {
        width: 1.35rem;
        height: 1.35rem;
        margin-top: .1rem;
    }

    .form-check-label {
        padding-left: .25rem;
        line-height: 1.5;
    }
}

/* --- видимый фокус с клавиатуры --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.accordion-button:focus-visible {
    outline: 3px solid var(--color-primary-text);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- мелкие правки читаемости --- */
.form-note,
.form-disclaimer,
.stat-label,
.section-subtitle {
    color: var(--color-text-muted);
}

.pc-desc,
.local-facts span:not(b) {
    color: #5F6B6E;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ---- Довесок: то, что не победило по специфичности ---- */

/* Главная кнопка была белым по #49C0D0 — контраст 2.02 при норме 4.5.
   Градиент из тёмных оттенков того же тона: оба конца проходят. */
.btn-primary,
.btn-gradient {
    background: linear-gradient(135deg, #1F6F7A 0%, #25818E 100%);
    border-color: #1F6F7A;
    color: #fff;
}
.btn-primary:hover,
.btn-gradient:hover,
.btn-primary:focus,
.btn-gradient:focus {
    background: linear-gradient(135deg, #1A5C65 0%, #1F6F7A 100%);
    border-color: #1A5C65;
    color: #fff;
}

/* Составные селекторы: у исходных правил стоял !important,
   поэтому .nav-link исправлен по месту выше, а здесь остальное */
.hero-badge.mb-3 {
    color: var(--color-primary-text);
}

/* На тёмной секции записи бейдж должен оставаться светлым:
   общая перекраска сделала его тёмным по тёмному. */
.section-badge-light,
.appointment-section .section-badge,
.cta-section .section-badge {
    color: #9FE3EC;
    background: rgba(255, 255, 255, .12);
}

/* У бейджа «с 2015» фон теперь тёмный, значит текст обязан быть белым.
   Раньше он попал в общую перекраску и стал тёмным по тёмному. */
.about-experience-badge,
.about-experience-badge .years,
.about-experience-badge .text {
    color: #fff;
}

/* Телефон в шапке — это кнопка, а не ссылка: белым по тёмному */
.btn-phone,
.btn-phone:hover {
    color: #fff;
}

/* Оставшиеся мелкие цели нажатия */
@media (max-width: 991.98px) {
    .footer-link,
    .footer-links a,
    .contact-item a,
    .proof-rating .count a,
    .doctor-proof a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}


/* Последние цели нажатия меньше 44px, найденные замером на мобильном */
@media (max-width: 991.98px) {
    .proof-rating .count a,
    .form-check-label a,
    .about-text a,
    .contact-item a,
    .hero-description a {
        display: inline-block;
        padding-block: .6rem;
    }

    .cookie-consent .btn {
        min-height: 44px;
        padding-inline: 1.25rem;
    }
}


/* ================================================================
   ШАПКА И МЕНЮ — версия от 20 августа 2026

   Что чинилось. На 1280px старая шапка занимала 150px и разъезжалась
   в две строки: логотип RS-MED шириной 238px плюс семь пунктов меню
   плюс переключатель языка плюс телефон не помещались в контейнер.
   Логотип клиники заменён на собственный знак врача, меню сжато,
   точка перелома поднята с 992 до 1200px (navbar-expand-xl) —
   между этими значениями теперь выезжает панель, а не ломается строка.
   ================================================================ */

/* --- фирменный блок: знак + подпись в две строки --- */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 0;
    text-decoration: none;
    line-height: 1.15;
}

.brand-mark {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    transition: width var(--transition-normal), height var(--transition-normal);
}

.brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.brand-name {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--color-text-primary);
    letter-spacing: -.01em;
    white-space: nowrap;
}

.brand-role {
    font-size: .75rem;
    font-weight: 500;
    color: var(--color-primary-text);
    white-space: nowrap;
}

.navbar-brand:hover .brand-name {
    color: var(--color-primary-text);
}

/* --- сама шапка: ниже и с усадкой при прокрутке --- */
.navbar {
    padding: .6rem 0;
    transition: padding var(--transition-normal);
}

.header.scrolled .navbar {
    padding: .3rem 0;
}

.header.scrolled .brand-mark {
    width: 38px;
    height: 38px;
}

/* --- пункты меню --- */
@media (min-width: 1200px) {
    .navbar-nav {
        gap: .1rem;
    }

    .nav-link {
        position: relative;
        padding: .5rem .7rem !important;
        font-size: .875rem;
        border-radius: var(--radius-md);
        white-space: nowrap;
    }

    /* польские подписи длиннее русских: до 1400px режем отступы,
       иначе «Strona główna» и телефон переносятся на вторую строку */
    .btn-phone {
        white-space: nowrap;
    }

    /* Подчёркивание — на ::before: ::after у Bootstrap занят стрелкой
       выпадающего меню, и попытка нарисовать там линию гасила стрелки. */
    .nav-link::before {
        content: "";
        position: absolute;
        left: .7rem;
        right: .7rem;
        bottom: .25rem;
        height: 2px;
        border-radius: 2px;
        background: var(--color-primary);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform var(--transition-fast);
    }

    .nav-link:hover::before,
    .nav-link.active::before,
    .nav-link.show::before {
        transform: scaleX(1);
    }

    /* Bootstrap 5 вешает .show на сам переключатель, а не на <li> */
    .nav-link:hover,
    .nav-link.show {
        background: rgba(73, 192, 208, .08);
    }

    /* стрелка у выпадающих пунктов: у Bootstrap она крупная и съедает место */
    .navbar-nav .dropdown-toggle::after {
        margin-left: .3rem;
        border-top-width: .28em;
        border-right-width: .28em;
        border-left-width: .28em;
        opacity: .55;
    }
}

/* --- выпадающие списки --- */
.dropdown-menu {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: .4rem;
    margin-top: .35rem;
}

.dropdown-item {
    border-radius: var(--radius-md);
    padding: .55rem .85rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(73, 192, 208, .12);
    color: var(--color-primary-text);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--color-primary-text);
    color: #fff;
}

/* --- переключатель языка --- */
.lang-dropdown .dropdown-toggle {
    font-size: .8125rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    padding: .4rem .8rem;
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.lang-dropdown .dropdown-toggle:hover,
.lang-dropdown .dropdown-toggle:focus {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
    background: rgba(73, 192, 208, .08);
}

/* --- кнопка-гамбургер: своя, вместо картинки Bootstrap --- */
.navbar-toggler {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.navbar-toggler-icon {
    background-image: none;
    width: 22px;
    height: 2px;
    background: var(--color-text-primary);
    border-radius: 2px;
    position: relative;
    transition: background var(--transition-fast);
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--color-text-primary);
    border-radius: 2px;
    transition: transform var(--transition-fast);
}

.navbar-toggler-icon::before {
    top: -7px;
}

.navbar-toggler-icon::after {
    top: 7px;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: translateY(7px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- выезжающая панель до 1200px --- */
@media (max-width: 1199.98px) {
    .navbar-collapse {
        margin-top: .75rem;
        padding: .5rem 0 1rem;
        border-top: 1px solid var(--color-border-light);
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .navbar-nav {
        margin: 0 !important;
    }

    .navbar-nav > .nav-item + .nav-item {
        border-top: 1px solid var(--color-border-light);
    }

    /* цель нажатия не меньше 48px — трафик почти весь мобильный */
    .navbar-nav .nav-link {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: .6rem .25rem !important;
        font-size: 1rem;
    }

    .navbar-nav .dropdown-toggle::after {
        margin-left: auto;
    }

    .navbar-nav .dropdown-menu {
        border: none;
        box-shadow: none;
        background: var(--color-bg-secondary);
        border-radius: var(--radius-md);
        margin: 0 0 .5rem;
        padding: .25rem;
    }

    .navbar-nav .dropdown-item {
        display: flex;
        align-items: center;
        min-height: 44px;
        white-space: normal;
    }

    /* язык и телефон — внутри панели, а не спрятаны */
    .lang-dropdown {
        margin: .75rem 0 0 !important;
    }

    .lang-dropdown .dropdown-toggle {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .header-contacts {
        display: flex !important;
        gap: .5rem;
        margin-top: .75rem;
    }

    .header-contacts .btn-phone {
        flex: 1 1 auto;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-contacts .btn-icon {
        width: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .brand-name {
        font-size: .9375rem;
    }

    .brand-role {
        font-size: .6875rem;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .nav-link {
        padding: .5rem .5rem !important;
        font-size: .8125rem;
    }

    .nav-link::before {
        left: .5rem;
        right: .5rem;
    }

    .brand-name {
        font-size: 1rem;
    }

    .header-contacts .btn-phone {
        padding-inline: .85rem;
        font-size: .875rem;
    }
}


/* ================================================================
   ВИЗУАЛ И ДЕЙСТВИЯ — 20 августа 2026

   Три вещи, которых на сайте не было: нижняя панель действий на
   телефоне, модальное окно записи и единая система кнопок.
   Плюс правки того, что видно глазом: иконки, слипшиеся с
   заголовками, карточки без реакции на курсор, цифры, которые
   без JS показывают ноль.
   ================================================================ */

/* ---------------------------------------------------------------
   1. КНОПКИ
   Базовый .btn был на 0.625rem по вертикали — 38px высоты, меньше
   пальца. Ниже единая система: размеры, отклик, кольцо фокуса.
   Цвета не трогаю, они выверены по контрасту 20 августа.
   --------------------------------------------------------------- */
.btn {
    --btn-lift: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding: .7rem 1.4rem;
    border-radius: var(--radius-lg);
    letter-spacing: -.01em;
    transition: transform var(--transition-fast),
                box-shadow var(--transition-normal),
                background var(--transition-normal),
                border-color var(--transition-normal);
}

/* иконки внутри кнопок отбиваются gap-ом, ручные отступы больше не нужны */
.btn > i.me-2,
.btn > i.me-1 {
    margin-right: 0 !important;
}

.btn-lg {
    min-height: 54px;
    padding: .85rem 1.75rem;
    font-size: 1rem;
    border-radius: var(--radius-xl);
}

.btn-sm {
    min-height: 38px;
    padding: .4rem 1rem;
}

.btn:active {
    transform: translateY(0) scale(.985);
}

.btn:focus-visible {
    outline: 3px solid var(--color-primary-text);
    outline-offset: 3px;
}

.btn-primary {
    box-shadow: 0 6px 18px rgba(31, 111, 122, .25);
}

.btn-primary:hover {
    transform: translateY(var(--btn-lift));
    box-shadow: 0 12px 28px rgba(31, 111, 122, .32);
}

.btn-outline-primary {
    border-width: 2px;
    border-color: var(--color-primary-text);
    color: var(--color-primary-text);
}

.btn-outline-primary:hover {
    background: var(--color-primary-text);
    border-color: var(--color-primary-text);
    color: #fff;
    transform: translateY(var(--btn-lift));
}

.btn-outline-dark {
    border-width: 2px;
}

.btn-light {
    background: #fff;
    border-color: #fff;
    color: var(--color-primary-text);
    box-shadow: var(--shadow-sm);
}

.btn-light:hover {
    background: #fff;
    color: #16545E;
    transform: translateY(var(--btn-lift));
    box-shadow: var(--shadow-md);
}

@media (max-width: 991.98px) {
    .btn {
        min-height: 48px;
    }

    .btn-lg {
        min-height: 56px;
        width: 100%;
    }

    /* две кнопки подряд на узком экране идут столбиком, а не в притык */
    .hero-cta .btn + .btn,
    .cta-buttons .btn + .btn {
        margin-top: .6rem;
    }
}

/* ---------------------------------------------------------------
   2. НИЖНЯЯ ПАНЕЛЬ ДЕЙСТВИЙ
   Телефон и запись на телефоне лежали внутри свёрнутого меню:
   чтобы позвонить, надо было сначала открыть гамбургер. Панель
   держит четыре действия на экране всегда.
   --------------------------------------------------------------- */
.action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-fixed);
    display: none;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-border-light);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .07);
    padding-bottom: env(safe-area-inset-bottom);
}

.action-bar__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .25rem;
    padding: .35rem .5rem;
}

.action-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    min-height: 56px;
    padding: .35rem .25rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.action-bar__item i {
    font-size: 1.25rem;
    color: var(--color-primary-text);
}

.action-bar__item:active {
    background: rgba(73, 192, 208, .12);
}

.action-bar__item--accent {
    background: linear-gradient(135deg, #1F6F7A 0%, #25818E 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(31, 111, 122, .3);
}

.action-bar__item--accent i {
    color: #fff;
}

.action-bar__item--accent:active {
    background: linear-gradient(135deg, #1A5C65 0%, #1F6F7A 100%);
    color: #fff;
}

@media (max-width: 991.98px) {
    .action-bar {
        display: block;
    }

    /* подвал не должен уезжать под панель */
    body {
        padding-bottom: 74px;
    }

    /* пузырь телеграма дублировал бы кнопку в панели */
    .fixed-telegram {
        display: none !important;
    }

    /* баннер cookie поднимается над панелью, иначе перекрывает кнопки */
    .cookie-consent {
        bottom: 74px;
    }
}

@media print {
    .action-bar {
        display: none !important;
    }
}

/* ---------------------------------------------------------------
   3. МОДАЛЬНОЕ ОКНО ЗАПИСИ
   Кнопки «Записаться» вели якорем в самый низ страницы — человек
   терял место, где читал. Форма приходит к нему.
   --------------------------------------------------------------- */
.book-modal .modal-dialog {
    max-width: 460px;
}

.book-modal .modal-content {
    border: none;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.book-modal__head {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.5rem 1.5rem 1rem;
    background: var(--gradient-hero);
}

.book-modal__head img {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
}

.book-modal__head h2 {
    font-size: 1.25rem;
    margin: 0 0 .15rem;
}

.book-modal__head p {
    margin: 0;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

.book-modal .modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.book-modal .btn-close {
    position: absolute;
    top: .85rem;
    right: .85rem;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, .7);
    opacity: .85;
}

.book-modal .btn-close:hover {
    opacity: 1;
}

.book-modal .form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: .3rem;
}

.book-modal .form-control {
    min-height: 50px;
    border-radius: var(--radius-md);
    border-color: var(--color-border);
}

.book-modal .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(73, 192, 208, .2);
}

.book-modal__alt {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-light);
    text-align: center;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

.book-modal__alt a {
    color: var(--color-primary-text);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .5rem;
}

.book-modal__alt a:hover {
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    /* На телефоне окно выезжает снизу — так его закрывают большим пальцем.
       position:fixed, а не absolute: не зависит от того, что там у
       .modal-dialog-centered с min-height и от родителя вообще. */
    .book-modal .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        max-width: 100%;
        min-height: 0;
        align-items: flex-end;
    }

    .book-modal .modal-content {
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    }
}

/* Пока окно открыто, нижняя панель не нужна: она дублирует его кнопки
   и на узких экранах наезжает на «Записаться». */
body.modal-open .action-bar {
    display: none;
}

/* ---------------------------------------------------------------
   4. ЗАГОЛОВКИ С ИКОНКАМИ
   В разделах «Что будет на приёме» и «Если вы недавно в Польше»
   иконка стояла вплотную к первой букве и налезала на неё.
   --------------------------------------------------------------- */
h2 > i:first-child,
h3 > i:first-child,
h4 > i:first-child {
    margin-right: .55rem;
    color: var(--color-primary);
    vertical-align: -.05em;
}

/* ---------------------------------------------------------------
   5. КАРТОЧКИ
   Отклик на курсор: до этого карточки услуг и преимуществ были
   статичными, и по ним не читалось, что они кликабельны.
   --------------------------------------------------------------- */
.service-card,
.advantage-card,
.stat-card,
.proof-card {
    transition: transform var(--transition-normal),
                box-shadow var(--transition-normal),
                border-color var(--transition-normal);
}

.service-card:hover,
.advantage-card:hover,
.proof-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-card {
    padding: 1.25rem .75rem;
    border-radius: var(--radius-xl);
    background: #fff;
    border: 1px solid var(--color-border-light);
    height: 100%;
}

.stat-card:hover {
    border-color: rgba(73, 192, 208, .4);
    box-shadow: var(--shadow-md);
}

.stat-number {
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .btn:hover,
    .service-card:hover,
    .advantage-card:hover,
    .proof-card:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------
   6. ПОДПИСЬ В ПОДВАЛЕ
   Стоял тот же логотип RS-MED, и стоял он с width="582" без
   max-width: на телефоне картинка растягивала страницу до 594px
   при экране 390 — переполнение прятал overflow-x:hidden, но
   вёрстка от этого ехала.
   --------------------------------------------------------------- */
.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    line-height: 1.15;
}

.footer-logo img {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
}

.footer-logo__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.footer-logo__name {
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}

.footer-logo__role {
    font-size: .75rem;
    color: rgba(255, 255, 255, .6);
}

.footer-logo:hover .footer-logo__name {
    color: var(--color-primary-light);
}

/* любая картинка в подвале и в тексте не должна быть шире колонки */
.footer img,
.about-text img,
.privacy-content img {
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------
   7. СОГЛАСИЕ НА ОБРАБОТКУ ДАННЫХ
   У .form-disclaimer стоял display:flex — из-за этого ссылка
   «политикой конфиденциальности» становилась отдельным элементом
   строки и уезжала вправо, разрывая фразу пополам. Видно было
   во всех формах сайта.
   --------------------------------------------------------------- */
.form-disclaimer {
    display: block;
}

.form-disclaimer > i:first-child {
    margin-right: .3rem;
    color: var(--color-primary);
}

.form-check-label a,
.form-disclaimer a {
    text-decoration: underline;
    text-underline-offset: .15em;
}

/* ---------------------------------------------------------------
   8. ПАНЕЛЬ УСЛУГ В МЕНЮ
   Было три отдельных выпадающих списка — «Услуги», «УЗИ» и
   «Беременность». Человек, искавший УЗИ малого таза, должен был
   угадать, в каком из трёх оно лежит. Теперь одна панель,
   три колонки, всё видно разом.
   --------------------------------------------------------------- */
@media (min-width: 1200px) {
    .mega-menu {
        width: min(760px, calc(100vw - 3rem));
        padding: 1.25rem 1.25rem .75rem;
    }

    .mega-menu__grid {
        display: grid;
        grid-template-columns: 1.15fr 1fr .85fr;
        gap: .5rem 1.25rem;
    }

    /* колонки разделены линиями, а не пустотой: границы разделов читаются */
    .mega-col + .mega-col {
        border-left: 1px solid var(--color-border-light);
        padding-left: 1.25rem;
    }
}

.mega-col {
    display: flex;
    flex-direction: column;
}

.mega-col__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .35rem;
    padding: 0 .85rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.mega-col__title i {
    font-size: .95rem;
    color: var(--color-primary);
}

.mega-menu__foot {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--color-border-light);
}

.mega-menu__foot a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .5rem .9rem;
    border-radius: var(--radius-md);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-primary-text);
    background: rgba(73, 192, 208, .1);
}

.mega-menu__foot a:hover {
    background: rgba(73, 192, 208, .2);
}

.mega-menu__foot a:last-child {
    margin-left: auto;
    background: linear-gradient(135deg, #1F6F7A 0%, #25818E 100%);
    color: #fff;
}

.mega-menu__foot a:last-child:hover {
    background: linear-gradient(135deg, #1A5C65 0%, #1F6F7A 100%);
    color: #fff;
}

/* до 1200px панель живёт внутри выезжающего меню и идёт столбиком */
@media (max-width: 1199.98px) {
    .mega-menu {
        width: auto;
        padding: .25rem;
    }

    .mega-col + .mega-col {
        margin-top: .5rem;
        padding-top: .5rem;
        border-top: 1px solid var(--color-border);
    }

    .mega-col__title {
        padding: .35rem .5rem;
    }

    .mega-menu__foot {
        margin-top: .5rem;
    }

    .mega-menu__foot a {
        flex: 1 1 auto;
        justify-content: center;
    }

    .mega-menu__foot a:last-child {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------
   9. «ЧТО БУДЕТ НА ПРИЁМЕ» И «ЕСЛИ ВЫ НЕДАВНО В ПОЛЬШЕ»
   У этих двух разделов разметка была, а стилей не было совсем:
   .visit-step, .visit-prep, .newcomer-item — голые div-ы, и на
   экране они выглядели простыней текста. Тексты сильные, а
   выглядели как сноска.
   --------------------------------------------------------------- */
.visit-steps {
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.visit-step {
    counter-increment: step;
    position: relative;
    padding: 1.5rem 1.25rem 1.25rem;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.visit-step::before {
    content: counter(step);
    position: absolute;
    top: -18px;
    left: 1.25rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #1F6F7A 0%, #25818E 100%);
    color: #fff;
    font-weight: 700;
    font-size: .9375rem;
    box-shadow: 0 4px 12px rgba(31, 111, 122, .3);
}

.visit-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.visit-step h3 {
    font-size: 1.0625rem;
    margin-bottom: .5rem;
}

.visit-step p {
    font-size: .9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.visit-prep {
    padding: 1.75rem;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(73, 192, 208, .25);
}

.visit-prep h3 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.visit-prep ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.visit-prep li {
    position: relative;
    padding-left: 1.75rem;
    font-size: .9375rem;
    color: var(--color-text-secondary);
}

/* галочка вместо маркера: список читается как чек-лист, чем и является */
.visit-prep li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .3em;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: var(--radius-full);
    background: var(--color-primary-text)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M13.5 4.5 6.4 11.6 2.5 7.7l1.1-1.1 2.8 2.8 6-6z'/%3E%3C/svg%3E")
        center / 70% no-repeat;
}

.newcomer-lead {
    max-width: 60ch;
    margin: 0 auto 2rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.newcomer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.newcomer-item {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.newcomer-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.newcomer-item h3 {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.0625rem;
    margin-bottom: .65rem;
}

/* иконка стояла вплотную к первой букве заголовка — теперь это плитка */
.newcomer-item h3 > i:first-child {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: var(--radius-md);
    background: var(--gradient-hero);
    color: var(--color-primary-text);
    font-size: 1.25rem;
}

.newcomer-item p {
    font-size: .9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

@media (max-width: 991.98px) {
    .visit-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .visit-prep ul,
    .newcomer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .visit-steps {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .visit-prep {
        padding: 1.25rem;
    }
}

/* ---------------------------------------------------------------
   10. ВИТРИНА ЦЕН НА ГЛАВНОЙ
   Цена — самый частый вопрос, а на главной её не было: за ней
   надо было уходить на отдельную страницу.
   --------------------------------------------------------------- */
.prices-teaser {
    background: var(--color-bg-secondary);
}

.price-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.25rem 1.25rem;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal),
                border-color var(--transition-normal);
}

.price-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(73, 192, 208, .45);
}

.price-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .9rem;
    border-radius: var(--radius-md);
    background: var(--gradient-hero);
    color: var(--color-primary-text);
    font-size: 1.35rem;
}

.price-card h3 {
    font-size: 1rem;
    margin-bottom: .35rem;
}

.price-card p {
    font-size: .875rem;
    color: var(--color-text-muted);
    margin: 0 0 1.25rem;
}

/* цена прижата к низу: у карточек разной высоты суммы стоят в одну линию */
.price-card__value {
    margin-top: auto;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary-text);
    font-variant-numeric: tabular-nums;
}

.price-card__value span {
    margin-left: .25rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.price-card--popular {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(73, 192, 208, .18);
}

.price-card__tag {
    position: absolute;
    top: -11px;
    left: 1.25rem;
    padding: .2rem .6rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #1F6F7A 0%, #25818E 100%);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.price-cards__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 1.75rem;
}

.price-cards__note {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-right: auto;
    font-size: .875rem;
    color: var(--color-text-muted);
}

.price-cards__note i {
    color: var(--color-primary);
}

@media (max-width: 991.98px) {
    .price-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 1rem;
    }

    .price-cards__foot .btn {
        flex: 1 1 100%;
    }

    .price-cards__note {
        flex: 1 1 100%;
        margin-right: 0;
    }
}

@media (max-width: 575.98px) {
    .price-cards {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------
   11. ПАНЕЛЬ НА ЭКРАНЕ УСЛУГИ
   На месте этой панели стояла фотография с логотипом RS-MED во весь
   квадрат — чужой бренд на каждом из 46 экранов услуг. Своих снимков
   кабинета нет, поэтому пока фирменная панель: знак врача, крупная
   иконка услуги, мягкий градиент. Появятся снимки — вернём фото.
   --------------------------------------------------------------- */
.service-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background: var(--gradient-hero);
    box-shadow: var(--shadow-lg);
}

/* два мягких пятна: без них квадрат выглядит плоской заливкой */
.service-visual::before,
.service-visual::after {
    content: "";
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(2px);
}

.service-visual::before {
    width: 62%;
    height: 62%;
    top: -12%;
    right: -14%;
    background: radial-gradient(circle at 30% 30%, rgba(73, 192, 208, .35), rgba(73, 192, 208, 0) 70%);
}

.service-visual::after {
    width: 55%;
    height: 55%;
    bottom: -10%;
    left: -12%;
    background: radial-gradient(circle at 70% 70%, rgba(255, 133, 179, .28), rgba(255, 133, 179, 0) 70%);
}

.service-visual > i {
    position: relative;
    z-index: 1;
    font-size: clamp(5rem, 12vw, 8.5rem);
    line-height: 1;
    color: rgba(33, 118, 130, .55);
}

.service-visual > img {
    position: absolute;
    z-index: 2;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 56px;
    height: 56px;
    opacity: .9;
}

/* ---------------------------------------------------------------
   12. ШАГИ ПРОЦЕДУРЫ НА ЭКРАНЕ УСЛУГИ
   Четыре карточки стояли в ряд внутри колонки шириной 740px — на
   каждую приходилось по 170px, и текст рвался по одному слову в
   строку. Плюс номера шагов были залиты градиентом «бирюза — розовый»
   с контрастом 2.0 на белом тексте.

   Правила заданы через #process: у экранов услуг свой <style> в <head>,
   он идёт после main-1.css и по классам выигрывает. Селектор с id
   выигрывает у него, ничего не переписывая в 46 страницах.
   --------------------------------------------------------------- */
@media (min-width: 576px) {
    #process .row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

#process .process-card {
    text-align: left;
    padding: 1.5rem;
}

#process .process-number {
    background: linear-gradient(135deg, #1F6F7A 0%, #25818E 100%);
    box-shadow: 0 4px 12px rgba(31, 111, 122, .28);
    /* в исходных стилях кружок центрировался через margin:auto — при
       выключке текста влево он оставался посередине карточки */
    margin: 0 0 .85rem;
}

#process .process-card h4 {
    font-size: 1.0625rem;
}

#process .process-card p {
    font-size: .9375rem;
    line-height: 1.6;
}

/* ---------------------------------------------------------------
   13. ОТЗЫВЫ
   Разметка была, стилей не было: .proof-rating и .proof-grid шли
   сплошной строкой, три площадки слипались в один абзац. Это блок
   доверия — самый важный на сайте врача — и выглядел он как
   недоделанный текст.
   --------------------------------------------------------------- */
.proof-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem .75rem;
    max-width: 640px;
    margin: 0 auto 1.75rem;
    padding: 1.1rem 1.5rem;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

/* звёзды тёплого цвета: бирюзовые звёзды не читаются как оценка,
   а янтарный — общепринятый знак рейтинга */
.proof-rating .stars {
    font-size: 1.5rem;
    line-height: 1;
    color: #F0A800;
    letter-spacing: .1em;
}

.proof-rating .score {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.proof-rating .count {
    font-size: .9375rem;
    color: var(--color-text-secondary);
}

.proof-rating .count a {
    font-weight: 600;
    color: var(--color-primary-text);
    text-decoration: underline;
    text-underline-offset: .15em;
}

.proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.proof-card {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1.15rem 1.25rem;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    text-decoration: none;
}

.proof-card > i {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--gradient-hero);
    font-size: 1.2rem;
}

.proof-card > span {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.proof-card .pc-name {
    font-weight: 700;
    font-size: .9375rem;
}

.proof-card .pc-desc {
    font-size: .8125rem;
    line-height: 1.45;
}

@media (max-width: 991.98px) {
    .proof-grid {
        grid-template-columns: 1fr;
    }

    /* правило доступности растягивало карточку в одну строку по центру —
       здесь содержимое в две строки, выравнивание по верху */
    .proof-card {
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .proof-rating {
        padding: 1rem;
    }

    .proof-rating .stars {
        font-size: 1.25rem;
    }

    .proof-rating .score {
        font-size: 1.5rem;
    }
}

/* ---------------------------------------------------------------
   14. КАРТОЧКИ УСЛУГ
   У .service-link стоял inline-flex: при длинной подписи текст
   занимал всю строку, а стрелка уезжала отдельным элементом к
   правому краю следующей. Стрелка должна идти сразу за последним
   словом, поэтому ссылка снова обычный текст.
   --------------------------------------------------------------- */
@media (min-width: 992px) {
    .service-link {
        display: inline;
    }

    .service-link i {
        display: inline-block;
        margin-left: .3rem;
        vertical-align: -.05em;
    }
}

/* карточка — колонка, ссылка прижата к низу: у карточек с описанием
   разной длины ссылки стоят на одной линии */
.service-card {
    display: flex;
    flex-direction: column;
}

.service-card .service-link {
    margin-top: auto;
    padding-top: .5rem;
}

/* ---------------------------------------------------------------
   15. БЛОК ФАКТОВ
   Раньше здесь крутились счётчики с непроверяемыми числами. Теперь
   проверяемые факты, и две первые карточки — ссылки на площадку,
   где эти цифры можно увидеть.
   --------------------------------------------------------------- */
.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-primary);
    margin-bottom: .25rem;
}

/* ссылка по умолчанию строчная: без display:block padding и height
   от .stat-card применяются к обрывкам строки, и карточка разъезжается */
a.stat-card {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
}

a.stat-card:hover .stat-value {
    color: var(--color-primary-text);
}

a.stat-card::after {
    content: "\F138";
    font-family: bootstrap-icons;
    position: absolute;
    top: .6rem;
    right: .75rem;
    font-size: .8rem;
    color: var(--color-text-muted);
    opacity: .5;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

a.stat-card:hover::after {
    opacity: 1;
    transform: translateX(2px);
}

@media (max-width: 575.98px) {
    .stat-value {
        font-size: 1.375rem;
    }

    .stat-label {
        font-size: .8125rem;
    }
}

/* ---------------------------------------------------------------
   16. «КАК ДОБРАТЬСЯ»
   Третий раздел с разметкой без единого правила: .where-grid и
   .where-card шли сплошным текстом. Для человека, который ищет
   кабинет в чужом городе, это самый нужный блок на странице.
   --------------------------------------------------------------- */
.where-lead {
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
}

.where-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.where-card {
    padding: 1.5rem 1.25rem;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.where-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.where-card > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: .85rem;
    border-radius: var(--radius-md);
    background: var(--gradient-hero);
    color: var(--color-primary-text);
    font-size: 1.25rem;
}

.where-card h3 {
    font-size: 1rem;
    margin-bottom: .4rem;
}

.where-card p {
    margin: 0;
    font-size: .9375rem;
    color: var(--color-text-secondary);
}

.newcomer-note {
    max-width: 62ch;
    margin: 1.75rem auto 0;
    padding: 1rem 1.25rem;
    text-align: center;
    font-size: .9375rem;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
}

.newcomer-note a {
    font-weight: 700;
    color: var(--color-primary-text);
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .where-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .where-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------
   17. СТРАНИЦА КОНТАКТОВ
   До этого контакты жили только якорем на главной. Отдельный адрес
   нужен под карты, профили и запросы вида «ginekolog-med адрес».
   Стили здесь, а не в <style> страницы: файл один и кэшируется.
   --------------------------------------------------------------- */
.page-hero {
    background: var(--gradient-hero);
}

.page-hero h1 {
    margin: .5rem 0 .75rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.page-hero-lead {
    max-width: 62ch;
    margin-bottom: 1.5rem;
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
}

.page-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.contact-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.contact-item-card {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.15rem 1.25rem;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
}

.contact-item-card > i {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--gradient-hero);
    color: var(--color-primary-text);
    font-size: 1.2rem;
}

.contact-item-card > div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.ci-name {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.ci-value {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ci-value a {
    color: var(--color-primary-text);
    text-decoration: none;
}

.ci-value a:hover {
    text-decoration: underline;
}

.ci-note {
    font-size: .875rem;
    color: var(--color-text-secondary);
}

.contact-map {
    overflow: hidden;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    line-height: 0;
}

.contact-map iframe {
    width: 100%;
    height: 420px;
    border: 0;
}

/* .cta-card описан в <style> страниц услуг; здесь такого файла нет */
.cta-card {
    max-width: 680px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
}

.cta-card h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: .5rem;
}

.cta-card p {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}

.cta-card .cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

@media (max-width: 991.98px) {
    .contact-map iframe {
        height: 320px;
    }

    .page-hero-actions .btn {
        flex: 1 1 100%;
    }
}

/* ---------------------------------------------------------------
   18. ПЕРВЫЙ ЭКРАН НА ТЕЛЕФОНЕ
   Замер на 390×844: кнопки «Записаться» и «Позвонить» стояли на
   отметке 671px, то есть ниже сгиба — до них надо было доскроллить.
   Выше них лежали три бейджа столбиком на 176px.

   Бейджи теперь идут строкой в два ряда, а кнопки подняты над ними
   порядком flex. Разметка не тронута: на десктопе порядок прежний,
   там места хватает.
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .hero-section {
        padding: 1.75rem 0 2.5rem;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
    }

    .hero-badge {
        order: 1;
    }

    .hero-title {
        order: 2;
    }

    .hero-description {
        order: 3;
        margin-bottom: 1.25rem;
    }

    .hero-cta {
        order: 4;
        margin-bottom: 1.25rem;
    }

    .trust-badges {
        order: 5;
        display: flex;
        /* выше по файлу стоит flex-direction: column — из-за неё бейджи
           растягивались на всю ширину и занимали три строки */
        flex-direction: row;
        flex-wrap: wrap;
        gap: .5rem;
        margin-bottom: 0 !important;
    }

    .trust-badge {
        flex: 0 1 auto;
        gap: .35rem;
        padding: .45rem .8rem;
        font-size: .8125rem;
    }

    .trust-badge a {
        padding-block: 0;
    }
}

/* ---------------------------------------------------------------
   19. ОБРАЗОВАНИЕ И КВАЛИФИКАЦИЯ
   Четвёртый блок с разметкой без стилей: .cred-list, .cred-year и
   .cred-text шли обычным списком, и год слипался с текстом —
   «2015Диплом врача». Это блок, которым врач подтверждает право
   работать, читаться он должен безупречно.
   --------------------------------------------------------------- */
.cred-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.cred-list li {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 0 0 1.25rem 0;
}

/* линия времени: соединяет годы, у последнего пункта обрывается */
.cred-list li::before {
    content: "";
    position: absolute;
    left: 33px;
    top: 2rem;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}

.cred-list li:last-child {
    padding-bottom: 0;
}

.cred-list li:last-child::before {
    display: none;
}

.cred-year {
    position: relative;
    z-index: 1;
    flex: 0 0 68px;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--gradient-hero);
    border: 1px solid rgba(73, 192, 208, .35);
    color: var(--color-primary-text);
    font-size: .8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cred-text {
    padding-top: .2rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.cred-note {
    display: block;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    font-size: .875rem;
}

.cred-note > i:first-child {
    margin-right: .4rem;
    color: var(--color-primary);
}

@media (max-width: 575.98px) {
    .cred-list li {
        gap: .75rem;
    }

    .cred-list li::before {
        left: 29px;
    }

    .cred-year {
        flex-basis: 60px;
    }
}

/* ---------------------------------------------------------------
   20. ГУТТЕР g-5 НА ЭКРАНАХ УСЛУГ
   У .row.g-5 отрицательные поля по 24px, а у .container отступы
   по 12px — строка вылезала за экран на 9px. Прятал overflow-x
   у html, но на узких экранах это лишний горизонтальный сдвиг.
   Добавляем контейнеру недостающие отступы, расстояние между
   колонками при этом не меняется.
   --------------------------------------------------------------- */
.service-content > .container {
    padding-inline: 1.5rem;
}

/* ---------------------------------------------------------------
   21. СТРАНИЦА ЗАПИСИ
   Три способа записи рядом. Первый — онлайн-календарь, он шире
   и выделен: это единственный способ, где человек не ждёт ответа.
   Ниже мессенджеры и ZnanyLekarz — для тех, кому привычнее там.
   --------------------------------------------------------------- */
/* Было три способа записи, стало два: от онлайн-календаря отказались,
   свободных слотов в нём не публиковалось. */
.book-ways {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

.book-way {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 1.75rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}

.book-way:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.book-way > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 1.125rem;
    font-size: 1.5rem;
    color: var(--color-primary);
    background: var(--color-bg-secondary);
    border-radius: 16px;
}

.book-way h2 {
    margin-bottom: .625rem;
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.25;
}

.book-way p {
    margin-bottom: 1.5rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* Кнопка прижата к низу карточки: у карточек разный текст,
   а кнопки должны стоять на одной линии. */
.book-way .btn {
    margin-top: auto;
    width: 100%;
    justify-content: center;
}

.book-way--main {
    background: var(--gradient-hero);
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-primary);
}

.book-way--main > i {
    color: var(--color-text-light);
    background: var(--gradient-primary);
}

.book-way__note {
    margin-top: .625rem;
    align-self: center;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

/* --- Мессенджеры и ZnanyLekarz --- */
.book-alt {
    margin-top: 3rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--color-border);
}

.book-alt > h2 {
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.book-alt__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.book-alt__item {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.375rem;
    background: var(--color-bg-tertiary);
    border-radius: 16px;
}

.book-alt__item > i {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--color-primary);
}

/* .ci-name на контактах — мелкая подпись над значением. Здесь это
   заголовок карточки, поэтому размер и регистр возвращаем обратно. */
.book-alt__item .ci-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-primary);
}

.book-alt__item .ci-note {
    display: block;
    margin-top: .1875rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.book-alt__links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .875rem;
    margin-top: .625rem;
}

.book-alt__links a {
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.book-alt__links a:hover {
    border-bottom-color: currentColor;
}

@media (max-width: 991.98px) {
    .book-ways {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .book-way {
        padding: 1.75rem 1.5rem;
    }

    .book-alt__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------
   22. БЛОГ
   Список статей и сама статья. Ширина текста ограничена: это
   медицинский текст, его читают внимательно, и длинная строка
   на такой странице утомляет быстрее, чем экономит место.
   --------------------------------------------------------------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.blog-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-lg);
    color: inherit;
}

.blog-card__topic {
    align-self: flex-start;
    margin-bottom: .875rem;
    padding: .25rem .75rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    background: var(--color-bg-secondary);
    border-radius: 999px;
}

.blog-card h2 {
    margin-bottom: .625rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.blog-card p {
    margin-bottom: 1.25rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.blog-card__more {
    margin-top: auto;
    font-weight: 600;
    color: var(--color-primary-dark);
}

.blog-card__more > i {
    margin-left: .375rem;
    transition: transform .25s ease;
}

.blog-card:hover .blog-card__more > i {
    transform: translateX(4px);
}

.blog-card__when {
    margin-top: .75rem;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

/* --- Статья --- */
.post-hero {
    padding: 3rem 0 2.5rem;
    background: var(--gradient-hero);
}

.post-hero h1 {
    max-width: 20em;
    margin-bottom: 1rem;
}

.post-lead {
    max-width: 40em;
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
}

.post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .875rem;
    margin-top: 1.75rem;
}

.post-meta img {
    border-radius: 50%;
    background: var(--color-bg-primary);
}

.post-meta__who {
    display: flex;
    flex-direction: column;
    font-size: .875rem;
    color: var(--color-text-secondary);
}

.post-meta__who b {
    color: var(--color-text-primary);
}

.post-meta__when {
    margin-left: auto;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

.post-body {
    max-width: 46rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.post-body h2 {
    margin-top: 2.5rem;
    margin-bottom: .875rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    scroll-margin-top: 90px;
}

.post-body h3 {
    margin-top: 1.75rem;
    margin-bottom: .625rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.post-body p {
    margin-bottom: 1.125rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
}

.post-body ul,
.post-body ol {
    margin-bottom: 1.5rem;
    padding-left: 1.25rem;
}

.post-body li {
    margin-bottom: .625rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.post-body li::marker {
    color: var(--color-primary);
}

.post-body b {
    color: var(--color-text-primary);
}

/* --- Оглавление --- */
.post-toc {
    padding: 1.5rem 1.75rem;
    background: var(--color-bg-tertiary);
    border-radius: 18px;
}

.post-toc h2 {
    margin: 0 0 .875rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.post-toc ol {
    margin: 0;
    padding-left: 1.125rem;
}

.post-toc li {
    margin-bottom: .4375rem;
    font-size: .9375rem;
    line-height: 1.5;
}

.post-toc a {
    color: var(--color-text-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.post-toc a:hover {
    color: var(--color-primary-dark);
    border-bottom-color: currentColor;
}

/* --- Таблица сроков --- */
.post-table {
    margin: 1.5rem 0;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 14px;
}

.post-table table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: .9375rem;
}

.post-table th,
.post-table td {
    padding: .875rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border-light);
}

.post-table thead th {
    font-weight: 700;
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    border-bottom-color: var(--color-border);
}

.post-table td {
    color: var(--color-text-secondary);
}

.post-table td:first-child {
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-text-primary);
}

.post-table tbody tr:last-child td {
    border-bottom: none;
}

/* Две колонки помещаются в экран телефона и без прокрутки: вбок уезжал
   ответ — вторая колонка. Минимальная ширина остаётся у таблиц из трёх
   колонок и больше, им она нужна. */
.post-table table:not(:has(th:nth-child(3))) {
    min-width: 0;
}

@media (max-width: 575.98px) {
    .post-table table:not(:has(th:nth-child(3))) td:first-child {
        width: 38%;
        white-space: normal;
    }
}

/* --- Врезка «когда не ждать» --- */
.post-note {
    margin: 1.75rem 0;
    padding: 1.5rem 1.625rem;
    background: #FFF5F8;
    border: 1px solid rgba(224, 106, 150, .3);
    border-radius: 18px;
}

.post-note h3 {
    margin: 0 0 .5rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.post-note h3 > i {
    margin-right: .5rem;
    color: var(--color-secondary-dark);
}

.post-note p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
}

/* --- Короткие ответы --- */
.post-faq__item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-border-light);
}

.post-faq__item:last-child {
    border-bottom: none;
}

.post-faq__item h3 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-size: 1.0625rem;
}

.post-faq__item p {
    margin: 0;
    font-size: 1rem;
}

/* Оговорка: тише основного текста, но не настолько, чтобы её не прочли. */
.post-disclaimer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    font-size: .875rem !important;
    line-height: 1.6 !important;
    color: var(--color-text-muted) !important;
}

/* Кто это написал. Стоит под текстом статьи: имя, чем подтверждается
   право её писать, и ссылка на страницу врача. В подписи сверху для
   этого нет места, а читателю и поисковику ответ нужен обоим. */
.post-author {
    display: flex;
    gap: 1.25rem;
    margin-top: 2.25rem;
    padding: 1.75rem;
    background: var(--color-bg-secondary);
    border-radius: 18px;
}

.post-author img {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}

.post-author__label {
    display: block;
    margin-bottom: .25rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.post-author h2 {
    margin: 0 0 .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.post-author h2 a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.post-author h2 a:hover {
    color: var(--color-primary-dark);
}

.post-author p {
    margin: 0;
    font-size: .9375rem !important;
    line-height: 1.6 !important;
    color: var(--color-text-secondary);
}

.post-author__links {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
    margin-top: .75rem !important;
}

.post-author__links a {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    text-decoration: none;
}

.post-author__links a:hover {
    text-decoration: underline;
}

/* Имя в подписи над статьёй — ссылка на страницу врача. */
.post-meta__who b a {
    color: inherit;
    text-decoration: none;
}

.post-meta__who b a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .post-author {
        gap: 1rem;
        padding: 1.375rem;
    }

    .post-author img {
        width: 56px;
        height: 56px;
    }

    .post-hero {
        padding: 2rem 0 1.75rem;
    }

    .post-meta__when {
        margin-left: 0;
        flex-basis: 100%;
    }

    .post-body h2 {
        font-size: 1.3125rem;
    }

    .post-body p,
    .post-body li {
        font-size: 1rem;
    }

    .post-toc {
        padding: 1.25rem 1.375rem;
    }
}

/* Ссылки на услуги в конце статьи. */
.post-related {
    margin-top: 2.25rem;
    padding: 1.5rem 1.75rem;
    background: var(--color-bg-secondary);
    border-radius: 18px;
}

.post-related h2 {
    margin: 0 0 .75rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.post-related ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.post-related li {
    margin: 0;
}

.post-related a {
    display: inline-block;
    padding: .4375rem .875rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    text-decoration: none;
}

.post-related a:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
}

/* Фирменный блок на страницах ошибок и благодарности. Раньше там стоял
   логотип клиники — чужой бренд на её собственном сайте. */
.err-logo {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    line-height: 1.15;
}

.err-logo__text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.err-logo__name {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--color-text-primary);
}

.err-logo__role {
    font-size: .8125rem;
    color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------
   23. ОТЗЫВЫ-ЦИТАТЫ
   Тексты приведены дословно и на языке оригинала, поэтому карточки
   разной высоты и разной длины строк. Кладка в колонки, а не сетка:
   так короткий отзыв не тянет за собой пустоту соседнего.
   --------------------------------------------------------------- */
.reviews-note {
    max-width: 46rem;
    margin: 2rem auto 2.25rem;
    text-align: center;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
}

.reviews-quotes {
    columns: 3 300px;
    column-gap: 1.5rem;
}

.review {
    break-inside: avoid;
    margin: 0 0 1.5rem;
    padding: 1.5rem 1.625rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}

.review blockquote {
    margin: 0 0 1rem;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--color-text-primary);
}

/* Кавычка-засечка вместо иконки: цитата и так очевидна, а знак
   привязывает её к фирменному цвету. */
.review blockquote::before {
    content: "“";
    display: block;
    margin-bottom: -.5rem;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-primary);
}

.review figcaption {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding-top: .875rem;
    border-top: 1px solid var(--color-border-light);
}

.review__who {
    font-weight: 700;
    font-size: .9375rem;
}

.review__what,
.review time {
    font-size: .8125rem;
    color: var(--color-text-muted);
}

@media (max-width: 575.98px) {
    .reviews-quotes {
        columns: 1;
    }

    .review {
        padding: 1.25rem 1.375rem;
    }
}

/* Ссылки со страницы услуги на статьи блога. Селектор с id не нужен:
   у страниц услуг свой <style> в <head>, но классов .reading там нет. */
.service-reading {
    background: var(--color-bg-primary);
}

.reading {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.75rem 2rem;
    background: var(--color-bg-secondary);
    border-radius: 20px;
}

.reading h2 {
    margin: 0 0 1rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.reading ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.reading li + li {
    margin-top: .75rem;
}

.reading a {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-text-primary);
    text-decoration: none;
}

.reading a::before {
    content: "→";
    flex-shrink: 0;
    color: var(--color-primary);
}

.reading a:hover {
    color: var(--color-primary-dark);
}

/* Подсказка, что таблица прокручивается вбок. Тень у края видна, только
   пока есть куда листать: два градиента прокручиваются вместе с
   содержимым (local) и закрывают собой два неподвижных (scroll). */
.post-table {
    background:
        linear-gradient(to right, var(--color-bg-primary) 40%, rgba(255, 255, 255, 0)) left / 44px 100% no-repeat local,
        linear-gradient(to left, var(--color-bg-primary) 40%, rgba(255, 255, 255, 0)) right / 44px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(26, 43, 59, .14), rgba(26, 43, 59, 0)) left / 16px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(26, 43, 59, .14), rgba(26, 43, 59, 0)) right / 16px 100% no-repeat scroll,
        var(--color-bg-primary);
}

/* ---------------------------------------------------------------
   24. НОМЕР PWZ
   Значок в блоке квалификации: подпись видна всегда, номер — после
   нажатия. Текст лежит в разметке обычным образом, поэтому поисковик
   и Ctrl+F находят его и в свёрнутом виде.
   --------------------------------------------------------------- */
.pwz {
    margin-top: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-bg-primary);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.pwz[open] {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
}

.pwz summary {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .875rem 1.125rem;
    cursor: pointer;
    font-size: .9375rem;
    line-height: 1.4;
    /* убираем стандартный треугольник в обоих движках */
    list-style: none;
}

.pwz summary::-webkit-details-marker {
    display: none;
}

.pwz summary > i {
    flex-shrink: 0;
    font-size: 1.125rem;
    color: var(--color-primary);
}

.pwz__title {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Подсказка «показать номер» — она же и есть стрелка: после раскрытия
   меняться нечему, поэтому просто убираем её. */
.pwz__hint {
    margin-left: auto;
    flex-shrink: 0;
    padding-left: .75rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    border-bottom: 1px dashed currentColor;
}

.pwz[open] .pwz__hint {
    display: none;
}

.pwz summary:hover .pwz__hint {
    border-bottom-style: solid;
}

.pwz__body {
    margin: 0;
    padding: 0 1.125rem 1.125rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.pwz__body b {
    font-size: 1.0625rem;
    letter-spacing: .04em;
    color: var(--color-text-primary);
}

@media (max-width: 479.98px) {
    .pwz summary {
        flex-wrap: wrap;
    }

    .pwz__hint {
        margin-left: 1.75rem;
        padding-left: 0;
    }
}


/* ==========================================================================
   Подпись врача на странице услуги
   --------------------------------------------------------------------------
   Кто отвечает за текст и когда он последний раз пересматривался. Стоит
   в первом экране, сразу под вводным абзацем: у 60 страниц услуг такой
   строки не было ни на экране, ни в разметке.

   Нарочно тихая: приглушённый цвет, мелкий кегль, тонкая линия слева.
   Строка должна читаться как выходные данные, а не как ещё один призыв.

   Класса .service-byline нет ни в одном постраничном <style>, поэтому
   правила отсюда работают: у страниц услуг свой <style> идёт после этого
   файла и по совпадающим классам всегда выигрывает.
   ========================================================================== */

.service-byline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .25rem .875rem;
    max-width: 46rem;
    margin: 1.25rem 0 0;
    padding-left: .875rem;
    border-left: 2px solid var(--color-border);
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.service-byline__who {
    flex: 1 1 22rem;
}

.service-byline__who b {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.service-byline a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
}

.service-byline a:hover,
.service-byline a:focus-visible {
    color: var(--color-primary-text);
    text-decoration-color: currentColor;
}

.service-byline__when {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .service-byline {
        font-size: .78125rem;
    }
}

/* ==========================================================================
   Источники под статьёй блога
   --------------------------------------------------------------------------
   Для медицинского текста это не украшение: читатель должен видеть, на чём
   написанное держится, и уметь дойти до первоисточника сам. До этого ни
   в одной из 84 статей не было ни одной внешней ссылки.

   Все ссылки уходят с rel="nofollow": ссылаемся на первоисточник ради
   читателя, а вес страницы остаётся на сайте.
   ========================================================================== */

.post-sources {
    margin: 2.5rem 0 0;
    padding: 1.25rem 1.375rem;
    background: var(--color-bg-tertiary);
    border-radius: .75rem;
}

.post-sources h2 {
    margin: 0 0 .75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

/* Пояснение под заголовком — служебная строка, а не абзац текста.
   Селектор с двумя классами намеренно: правило `.post-body p` выше
   в этом же файле весит больше одиночного класса и без второго класса
   выигрывало — строка набиралась кеглем основного текста, 17 пикселей,
   и спорила с самим списком. */
.post-body .post-sources__note {
    margin: -.375rem 0 .875rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.post-sources ol {
    margin: 0;
    padding-left: 1.25rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.post-sources li + li {
    margin-top: .5rem;
}

.post-sources li span {
    display: block;
    color: var(--color-text-muted);
    font-size: .8125rem;
}

.post-sources a {
    color: var(--color-primary-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 06.10: длинные слова в узких карточках (две в ряд на телефоне) не вылезают за край */
main [class*="-card"] :is(h3, h4, p) { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 575.98px) {
  main .row > .col-6 > [class*="-card"] { padding-left: 14px !important; padding-right: 14px !important; }
}
main h1 { overflow-wrap: anywhere; }
@media (max-width: 420px) { .post-hero h1 { font-size: 2.1rem; } }