:root {
    --bs-primary: #2E8B57;
    --bs-primary-rgb: 46, 139, 87;
    --bs-primary-dark: #1e6b4e;
    --bs-secondary: #70AD47;
    --bs-secondary-rgb: 112, 173, 71;
}

/* Переопределяем Bootstrap цвета */
.text-primary { color: var(--bs-primary) !important; }
.bg-primary { background-color: var(--bs-primary) !important; }
.btn-primary { 
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-dark);
    --bs-btn-hover-border-color: var(--bs-primary-dark);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    padding-top: 76px; /* Для фиксированной навигации */
}

/* Навигация */
.navbar {
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.navbar-scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Секции */
.section-padding {
    padding: 40px 0;
}

.masthead .container.py-5.mt-5 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.75rem !important;
    margin-top: 0.75rem !important;
}

.masthead .header-content.py-5,
.masthead .header-content.py-4 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.section-padding.pt-5 {
    padding-top: 40px !important;
}

.main-content.pt-5.mt-5 {
    padding-top: 1rem !important;
    margin-top: 1rem !important;
}

.masthead {
    margin-bottom: 0 !important;
}

.masthead p.mb-5,
.section-padding .mb-5 {
    margin-bottom: 1.5rem !important;
}

.footer.py-4 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

.footer .mb-3 {
    margin-bottom: 0.75rem !important;
}

.footer .mb-2 {
    margin-bottom: 0.5rem !important;
}

.section-title {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 3rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--bs-primary);
}

.text-center .section-title::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Карточки */
.contact-item, .advantage-card, .program-card, .country-card {
    transition: transform 0.3s ease;
    height: 100%;
}

.contact-item:hover, .advantage-card:hover, .country-card:hover {
    transform: translateY(-5px);
}

/* Иконки */
.contact-icon, .advantage-icon, .country-icon, .feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.advantage-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
}

.country-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
}

img[src$="pic1.png"].rounded-circle,
img[src$="pic2.png"].rounded-circle,
img[src$="pic5.png"].rounded-circle {
    width: min(100%, 430px);
    aspect-ratio: 5 / 3;
    object-fit: cover;
    object-position: center;
    border-radius: 999px !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 576px) {
    img[src$="pic1.png"].rounded-circle,
    img[src$="pic2.png"].rounded-circle,
    img[src$="pic5.png"].rounded-circle {
        width: min(100%, 320px);
    }
}

/* Программные карточки */
.program-card {
    border-left: 4px solid var(--bs-primary) !important;
}

.coming-soon {
    opacity: 0.7;
}

.coming-soon-row .program-card .card-body {
    display: flex;
    flex-direction: column;
}

.coming-soon-row .coming-soon-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 150px;
}

.coming-soon-row .coming-soon-header .card-title {
    margin-bottom: 0;
}

.coming-soon-row .coming-soon-header .badge {
    margin-top: auto;
}

/* Международный опыт */
.international-experience {
    position: relative;
    min-height: 100vh;
}

.international-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
    z-index: 1;
}

.international-content {
    position: relative;
    z-index: 2;
}

/* Модальное окно */
.policy-modal .modal-header {
    border-bottom: none;
    border-radius: 15px 15px 0 0;
}

.policy-modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

/* Кнопка загрузки */
.download-btn {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.file-info {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

/* Анимации */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Для очень маленьких экранов */
@media (max-width: 576px) {
    .download-btn {
        min-height: 90px;
        font-size: 0.875rem;
    }
}
/* =========================================
   Оставляем ТОЛЬКО кнопки категорий вагонов
   ========================================= */

/* Скрыть подбор вагона под груз */
#railcarPicker {
  display: none !important;
}

/* Скрыть кнопки фильтрации по грузам */
#cargoFilterWrap {
  display: none !important;
}

/* Скрыть обычный текстовый поиск */
#searchBox,
#clearSearch {
  display: none !important;
}

/* Скрыть иконку лупы слева от поля поиска */
#searchBox ~ .input-group-text,
.input-group-text:has(+ #searchBox) {
  display: none !important;
}
/* Анимация иконки в активной кнопке */
.filter-chip .btn.active i {
    transition: transform 0.3s ease;
    display: inline-block;
}

.filter-chip .btn.active:hover i {
    transform: rotate(90deg) scale(1.2);
}

/* Меняем внешний вид кнопки при наведении */
.filter-chip .btn.active:hover {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
    box-shadow: 0 4px 12px rgba(46, 139, 87, 0.2);
}

/* Для неактивных кнопок - стандартный ховер */
.filter-chip .btn:not(.active):hover {
    background-color: rgba(46, 139, 87, 0.1);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.nav-link-coin {
    perspective: 900px;
}

.nav-coin-morph {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.4em;
    color: transparent;
    transform-style: preserve-3d;
}

.nav-coin-morph::before,
.nav-coin-morph::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    pointer-events: none;
}

.nav-coin-morph::before {
    content: attr(data-text);
    color: #212529;
    white-space: nowrap;
    transform: translate(-50%, -50%) scale(1) rotateY(0deg);
    opacity: 1;
}

.nav-coin-morph::after {
    content: "";
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 252, 224, 0.98) 0%, rgba(255, 252, 224, 0.55) 12%, rgba(255, 252, 224, 0) 28%),
        radial-gradient(circle at 50% 45%, rgba(255, 227, 129, 0.95) 0%, rgba(232, 177, 62, 0.95) 44%, rgba(170, 111, 21, 0.98) 70%, rgba(102, 58, 6, 1) 100%),
        radial-gradient(circle at 50% 50%, transparent 58%, rgba(106, 66, 10, 0.9) 63%, rgba(251, 214, 104, 0.82) 69%, rgba(115, 72, 12, 0.92) 76%, transparent 82%),
        conic-gradient(from 210deg, rgba(122, 76, 12, 0.95), rgba(255, 224, 132, 0.95), rgba(168, 108, 18, 0.98), rgba(255, 239, 176, 0.92), rgba(122, 76, 12, 0.95));
    border: 0.08em solid rgba(255, 236, 164, 0.62);
    box-shadow:
        inset 0 0 0 0.035em rgba(255, 243, 186, 0.72),
        inset 0 0 0 0.12em rgba(143, 88, 13, 0.72),
        inset 0 0.08em 0.16em rgba(255, 247, 202, 0.32),
        inset 0 -0.1em 0.16em rgba(104, 60, 7, 0.42),
        0 0 0 0.045em rgba(125, 77, 12, 0.5),
        0 0.06em 0.18em rgba(96, 60, 8, 0.34),
        0 0 0.35em rgba(181, 129, 22, 0.3);
    transform: translate(-50%, -50%) scale(0.15) rotateY(0deg);
    opacity: 0;
}

.nav-coin-morph.is-animating::before {
    animation: word-to-coin 2.8s ease-in-out 1 both;
}

.nav-coin-morph.is-animating::after {
    animation: coin-spin-cycle 2.8s ease-in-out 1 both;
}

.brand-service-line {
    color: var(--bs-primary);
    font-weight: 600;
    line-height: 1.2;
}

.brand-service-track {
    position: relative;
    display: inline-block;
    color: inherit;
    white-space: nowrap;
    letter-spacing: 0.01em;
    line-height: 1.15;
}

.brand-service-state {
    display: inline-block;
    transform-origin: left center;
    will-change: opacity, transform, filter;
}

.brand-service-state-compact {
    position: relative;
}

.brand-service-state-expanded {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.brand-service-track.is-animating .brand-service-state-compact {
    animation: brand-service-compact-cycle 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1 both;
}

.brand-service-track.is-animating .brand-service-state-expanded {
    animation: brand-service-expanded-cycle 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1 both;
}

@keyframes brand-service-compact-cycle {
    0%,
    22% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
    34% {
        opacity: 0;
        transform: translateX(-0.12em) scale(0.98);
        filter: blur(0.08em);
    }
    84% {
        opacity: 0;
        transform: translateX(0.12em) scale(1.02);
        filter: blur(0.08em);
    }
    94%,
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes brand-service-expanded-cycle {
    0%,
    26% {
        opacity: 0;
        transform: translateX(0.2em) scale(0.985);
        filter: blur(0.08em);
    }
    34%,
    78% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
    92%,
    100% {
        opacity: 0;
        transform: translateX(-0.18em) scale(0.99);
        filter: blur(0.08em);
    }
}

@keyframes word-to-coin {
    0%,
    14% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotateY(0deg);
        filter: blur(0);
    }
    28% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) rotateY(90deg);
        filter: blur(0.08em);
    }
    72% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) rotateY(270deg);
        filter: blur(0.08em);
    }
    86% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.03) rotateY(360deg);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotateY(360deg);
        filter: blur(0);
    }
}

@keyframes coin-spin-cycle {
    0%,
    14% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.15) rotateY(0deg);
    }
    28% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotateY(0deg);
    }
    72% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotateY(1080deg);
    }
    86% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.18) rotateY(1170deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.15) rotateY(1170deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-service-state {
        transform: none;
        filter: none;
    }

    .brand-service-state-compact {
        opacity: 0;
    }

    .brand-service-state-expanded {
        opacity: 1;
    }

    .nav-coin-morph {
        color: inherit;
    }

    .nav-coin-morph::before,
    .nav-coin-morph::after {
        animation: none;
    }

    .nav-coin-morph::before,
    .nav-coin-morph::after {
        display: none;
    }
}