/*!
 * Font Awesome 4.5.0 - Оптимизированная версия для сайта Олеси Звягиной
 * Улучшена производительность, добавлена поддержка бирюзовой цветовой схемы
 */

/* ============================================================================
   ОПТИМИЗАЦИЯ ШРИФТОВ
============================================================================ */

@font-face {
    font-family: 'FontAwesome';
    src: url('/fonts/fontawesome-webfont.eot?v=4.5.0');
    src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'),
         url('/fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'),
         url('/fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'),
         url('/fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'),
         url('/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Улучшение производительности загрузки */
}

/* ============================================================================
   БАЗОВЫЕ СТИЛИ (оптимизированные)
============================================================================ */

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: none; /* Улучшение доступности */
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

/* ============================================================================
   РАЗМЕРЫ (оптимизированные с CSS Custom Properties)
============================================================================ */

:root {
    --fa-size-sm: 0.875em;
    --fa-size-md: 1em;
    --fa-size-lg: 1.33333333em;
    --fa-size-xl: 1.5em;
    --fa-size-2x: 2em;
    --fa-size-3x: 3em;
    --fa-size-4x: 4em;
    --fa-size-5x: 5em;
}

.fa-sm { font-size: var(--fa-size-sm); }
.fa-md { font-size: var(--fa-size-md); }
.fa-lg { font-size: var(--fa-size-lg); line-height: .75em; vertical-align: -.15em; }
.fa-xl { font-size: var(--fa-size-xl); }
.fa-2x { font-size: var(--fa-size-2x); }
.fa-3x { font-size: var(--fa-size-3x); }
.fa-4x { font-size: var(--fa-size-4x); }
.fa-5x { font-size: var(--fa-size-5x); }

/* ============================================================================
   ВЫРАВНИВАНИЕ И ПОЗИЦИОНИРОВАНИЕ (оптимизировано)
============================================================================ */

.fa-fw {
    width: 1.28571429em;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fa-pull-left { 
    float: left; 
    margin-right: .3em;
}

.fa-pull-right { 
    float: right; 
    margin-left: .3em;
}

.fa-center {
    display: block;
    text-align: center;
    margin: 0 auto;
}

/* ============================================================================
   СПИСКИ (упрощено)
============================================================================ */

.fa-ul {
    padding-left: 0;
    margin-left: 2.14285714em;
    list-style-type: none;
}

.fa-ul > li {
    position: relative;
    margin-bottom: 0.5em;
}

.fa-li {
    position: absolute;
    left: -2.14285714em;
    width: 2.14285714em;
    top: .14285714em;
    text-align: center;
}

.fa-li.fa-lg { left: -1.85714286em; }

/* ============================================================================
   АНИМАЦИИ (оптимизированные с hardware acceleration)
============================================================================ */

.fa-spin {
    animation: fa-spin 2s infinite linear;
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform;
}

.fa-pulse {
    animation: fa-spin 1s infinite steps(8);
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}

/* Упрощенные версии анимаций */
.fa-spin-slow { animation-duration: 3s; }
.fa-spin-fast { animation-duration: 1s; }

/* ============================================================================
   ТРАНСФОРМАЦИИ (оптимизированные)
============================================================================ */

.fa-rotate-90 { 
    transform: rotate(90deg); 
    transition: transform 0.3s ease;
}

.fa-rotate-180 { 
    transform: rotate(180deg); 
    transition: transform 0.3s ease;
}

.fa-rotate-270 { 
    transform: rotate(270deg); 
    transition: transform 0.3s ease;
}

.fa-flip-horizontal { 
    transform: scaleX(-1); 
}

.fa-flip-vertical { 
    transform: scaleY(-1); 
}

/* Убираем старые фильтры IE */
.fa-rotate-90,
.fa-rotate-180,
.fa-rotate-270,
.fa-flip-horizontal,
.fa-flip-vertical {
    filter: none !important;
}

/* ============================================================================
   СТЕКИРОВАНИЕ (оптимизированное)
============================================================================ */

.fa-stack {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle;
}

.fa-stack-1x,
.fa-stack-2x {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fa-stack-1x { 
    line-height: inherit; 
    font-size: 1em;
}

.fa-stack-2x { 
    font-size: 2em; 
}

.fa-inverse { 
    color: #fff; 
}

/* ============================================================================
   СПЕЦИАЛЬНЫЕ СТИЛИ ДЛЯ САЙТА ОЛЕСИ ЗВЯГИНОЙ
============================================================================ */

/* Бирюзовые иконки для сайта */
.fa.turquoise {
    color: #268e91;
    transition: color 0.3s ease, transform 0.3s ease;
}

.fa.turquoise:hover {
    color: #4fb3b6;
    transform: scale(1.1);
}

/* Белые иконки на бирюзовом фоне */
.fa.white-on-turquoise {
    color: #ffffff;
    background-color: #268e91;
    padding: 0.5em;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.fa.white-on-turquoise:hover {
    background-color: #4fb3b6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(38, 142, 145, 0.3);
}

/* Анимация для иконок меню */
.fa.menu-icon {
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.fa.menu-icon:hover {
    transform: rotate(90deg);
}

/* Иконки в формах */
.fa.form-icon {
    color: #268e91;
    vertical-align: middle;
    margin-right: 0.5em;
}

/* Социальные иконки с бирюзовым акцентом */
.fa.social-turquoise {
    color: #268e91;
    transition: all 0.3s ease;
    padding: 0.5em;
    border-radius: 4px;
    background: rgba(38, 142, 145, 0.1);
}

.fa.social-turquoise:hover {
    color: #ffffff;
    background-color: #268e91;
    transform: translateY(-3px);
}

/* ============================================================================
   УТИЛИТАРНЫЕ КЛАССЫ
============================================================================ */

/* Границы */
.fa-border {
    padding: .2em .25em .15em;
    border: 2px solid #eee;
    border-radius: .3em;
    transition: border-color 0.3s ease;
}

.fa-border.turquoise-border {
    border-color: #268e91;
}

.fa-border.turquoise-border:hover {
    border-color: #4fb3b6;
}

/* Тени */
.fa-shadow {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.fa-shadow-lg {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

/* Пульсация для важных элементов */
@keyframes fa-pulse-turquoise {
    0% { box-shadow: 0 0 0 0 rgba(38, 142, 145, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(38, 142, 145, 0); }
    100% { box-shadow: 0 0 0 0 rgba(38, 142, 145, 0); }
}

.fa-pulse-glow {
    animation: fa-pulse-turquoise 2s infinite;
    border-radius: 50%;
}

/* ============================================================================
   АДАПТИВНОСТЬ
============================================================================ */

@media (max-width: 768px) {
    .fa-lg { font-size: 1.2em; }
    .fa-2x { font-size: 1.5em; }
    .fa-3x { font-size: 2em; }
    .fa-4x { font-size: 2.5em; }
    
    .fa-spin,
    .fa-pulse {
        animation-duration: 1.5s;
    }
}

@media (max-width: 480px) {
    .fa-2x { font-size: 1.3em; }
    .fa-3x { font-size: 1.6em; }
    .fa-4x { font-size: 2em; }
    
    /* Отключаем сложные анимации на мобильных */
    .fa-pulse-glow {
        animation: none;
    }
}

/* Доступность - уважаем настройки пользователя */
@media (prefers-reduced-motion: reduce) {
    .fa-spin,
    .fa-pulse,
    .fa-pulse-glow,
    .fa-rotate-90,
    .fa-rotate-180,
    .fa-rotate-270,
    .fa.menu-icon:hover,
    .fa.turquoise:hover,
    .fa.white-on-turquoise:hover,
    .fa.social-turquoise:hover {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================================
   ГРУППЫ ИКОНОК
============================================================================ */

/* Группа иконок в ряд */
.fa-group {
    display: inline-flex;
    gap: 0.75em;
    align-items: center;
}

.fa-group.vertical {
    flex-direction: column;
    gap: 0.5em;
}

/* Иконки с текстом */
.fa-with-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.fa-with-text .fa {
    flex-shrink: 0;
}

/* ============================================================================
   СПЕЦИАЛЬНЫЕ ЭФФЕКТЫ
============================================================================ */

/* Эффект волны при клике */
@keyframes fa-ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.fa-ripple {
    position: relative;
    overflow: hidden;
}

.fa-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(38, 142, 145, 0.3);
    transform: translate(-50%, -50%);
    animation: fa-ripple 0.6s ease-out;
}

/* Эффект подъема */
.fa-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fa-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* ============================================================================
   ИКОНКИ (оптимизированный список - только часто используемые на сайте)
============================================================================ */

/* Основные иконки сайта */
.fa-bars:before { content: "\f0c9"; } /* Меню */
.fa-search:before { content: "\f002"; } /* Поиск */
.fa-angle-right:before { content: "\f105"; } /* Стрелка вправо (хлебные крошки) */
.fa-angle-left:before { content: "\f104"; } /* Стрелка влево */
.fa-angle-up:before { content: "\f106"; } /* Стрелка вверх */
.fa-angle-down:before { content: "\f107"; } /* Стрелка вниз */
.fa-phone:before { content: "\f095"; } /* Телефон */
.fa-envelope:before { content: "\f0e0"; } /* Почта */
.fa-map-marker:before { content: "\f041"; } /* Метка на карте */
.fa-clock-o:before { content: "\f017"; } /* Часы */
.fa-user:before { content: "\f007"; } /* Пользователь */
.fa-calendar:before { content: "\f073"; } /* Календарь */
.fa-check:before { content: "\f00c"; } /* Галочка */
.fa-times:before { content: "\f00d"; } /* Крестик */
.fa-home:before { content: "\f015"; } /* Домой */
.fa-info-circle:before { content: "\f05a"; } /* Информация */
.fa-question-circle:before { content: "\f059"; } /* Вопрос */
.fa-exclamation-circle:before { content: "\f06a"; } /* Восклицание */
.fa-star:before { content: "\f005"; } /* Звезда */
.fa-heart:before { content: "\f004"; } /* Сердце */
.fa-share:before { content: "\f064"; } /* Поделиться */

/* Социальные сети */
.fa-facebook:before { content: "\f09a"; }
.fa-instagram:before { content: "\f16d"; }
.fa-vk:before { content: "\f189"; }
.fa-telegram:before { content: "\f2c6"; }
.fa-whatsapp:before { content: "\f232"; }
.fa-youtube:before { content: "\f167"; }

/* Дополнительные иконки для контента */
.fa-file-text:before { content: "\f15c"; }
.fa-picture-o:before { content: "\f03e"; }
.fa-video-camera:before { content: "\f03d"; }
.fa-music:before { content: "\f001"; }
.fa-book:before { content: "\f02d"; }
.fa-graduation-cap:before { content: "\f19d"; }
.fa-comments:before { content: "\f086"; }
.fa-thumbs-up:before { content: "\f164"; }
.fa-download:before { content: "\f019"; }
.fa-upload:before { content: "\f093"; }
.fa-print:before { content: "\f02f"; }
.fa-save:before { content: "\f0c7"; }
.fa-edit:before { content: "\f044"; }
.fa-trash:before { content: "\f1f8"; }
.fa-lock:before { content: "\f023"; }
.fa-unlock:before { content: "\f09c"; }
.fa-eye:before { content: "\f06e"; }
.fa-eye-slash:before { content: "\f070"; }
.fa-cog:before { content: "\f013"; }
.fa-wrench:before { content: "\f0ad"; }
.fa-filter:before { content: "\f0b0"; }
.fa-sort:before { content: "\f0dc"; }
.fa-arrows-v:before { content: "\f07d"; }
.fa-expand:before { content: "\f065"; }
.fa-compress:before { content: "\f066"; }
.fa-refresh:before { content: "\f021"; }
.fa-spinner:before { content: "\f110"; }

/* Стрелки для навигации */
.fa-chevron-right:before { content: "\f054"; }
.fa-chevron-left:before { content: "\f053"; }
.fa-chevron-up:before { content: "\f077"; }
.fa-chevron-down:before { content: "\f078"; }
.fa-arrow-right:before { content: "\f061"; }
.fa-arrow-left:before { content: "\f060"; }
.fa-arrow-up:before { content: "\f062"; }
.fa-arrow-down:before { content: "\f063"; }

/* ============================================================================
   ОПТИМИЗАЦИЯ ДЛЯ ПЕЧАТИ
============================================================================ */

@media print {
    .fa-spin,
    .fa-pulse,
    .fa-pulse-glow {
        animation: none !important;
    }
    
    .fa.turquoise,
    .fa.white-on-turquoise,
    .fa.social-turquoise {
        color: #000 !important;
        background: none !important;
        transform: none !important;
    }
}

/* ============================================================================
   СОВМЕСТИМОСТЬ С СУЩЕСТВУЮЩИМ КОДОМ
============================================================================ */

/* Совместимость со старыми классами */
.fa-stack .fa-circle { color: #268e91; }
.fa-stack .fa-inverse { color: white; }

/* Фикс для старых браузеров */
.fa:before {
    display: inline-block;
}

/* Убираем лишние отступы в некоторых случаях */
.fa.no-margin {
    margin: 0;
}

/* ============================================================================
   КОНЕЦ ОПТИМИЗИРОВАННОГО КОДА FONT AWESOME
============================================================================ */