/**
 * Корпоративные цвета CARGO CONSULTING
 * Цветовая схема основана на логотипе компании
 */

:root {
    /* === ОСНОВНЫЕ ЦВЕТА БРЕНДА === */
    --cargo-red: #E31E24;
    --cargo-red-dark: #C41A20;
    --cargo-red-light: #FF4D52;
    --cargo-red-alpha-10: rgba(227, 30, 36, 0.1);
    --cargo-red-alpha-20: rgba(227, 30, 36, 0.2);
    
    --cargo-black: #1D1D1F;
    --cargo-gray-dark: #48484A;
    --cargo-gray: #86868B;
    --cargo-gray-light: #C7C7CC;
    --cargo-gray-bg: #F5F5F7;
    --cargo-white: #FFFFFF;
    
    /* === ЦВЕТА ТЕКСТА === */
    --text-primary: var(--cargo-black);
    --text-secondary: var(--cargo-gray);
    --text-on-primary: var(--cargo-white);
    --text-hint: var(--cargo-gray-light);
    
    /* === ЦВЕТА ФОНОВ === */
    --bg-primary: var(--cargo-white);
    --bg-secondary: var(--cargo-gray-bg);
    --bg-input: #FAFAFA;
    --bg-disabled: #F0F0F0;
    
    /* === ЦВЕТА ГРАНИЦ === */
    --border-color: #E5E5E7;
    --border-active: var(--cargo-red);
    --border-focus: var(--cargo-red);
    
    /* === ЦВЕТА СОСТОЯНИЙ === */
    --success-color: #34C759;
    --warning-color: #FF9500;
    --error-color: #FF3B30;
    --info-color: #007AFF;
    
    /* === ТЕНИ === */
    --shadow-sm: 0 2px 8px var(--cargo-red-alpha-10);
    --shadow-md: 0 4px 16px var(--cargo-red-alpha-20);
    --shadow-lg: 0 8px 32px rgba(227, 30, 36, 0.25);
    
    /* === ГРАДИЕНТЫ === */
    --gradient-primary: linear-gradient(135deg, var(--cargo-red) 0%, var(--cargo-red-dark) 100%);
    --gradient-light: linear-gradient(135deg, var(--cargo-gray-bg) 0%, var(--cargo-white) 100%);
}

/* ================================================
   ПРИМЕНЕНИЕ ЦВЕТОВ К ЭЛЕМЕНТАМ
   ================================================ */

/* === HEADER === */
.header {
    background: var(--gradient-primary) !important;
    color: var(--text-on-primary) !important;
}

/* === КНОПКИ === */
.calculate-button,
.nav-btn.next-btn,
.nav-btn.calc-btn {
    background: var(--gradient-primary) !important;
    color: var(--text-on-primary) !important;
    box-shadow: var(--shadow-md) !important;
}

.calculate-button:hover,
.nav-btn.next-btn:hover,
.nav-btn.calc-btn:hover {
    background: var(--cargo-red-dark) !important;
    box-shadow: var(--shadow-lg) !important;
}

.nav-btn.back-btn {
    color: var(--cargo-red) !important;
    border-color: var(--cargo-red) !important;
}

.nav-btn.back-btn:hover {
    background: var(--cargo-red-alpha-10) !important;
}

/* === ВЫБРАННЫЕ ЭЛЕМЕНТЫ === */
.vehicle-type.selected {
    background: var(--cargo-red-alpha-10) !important;
    border-color: var(--cargo-red) !important;
}

.vehicle-type.selected svg rect,
.vehicle-type.selected svg path {
    fill: var(--cargo-red) !important;
}

.calculation-type-option.selected {
    background: var(--cargo-red-alpha-10) !important;
    border-color: var(--cargo-red) !important;
}

.calculation-type-option.selected svg path,
.calculation-type-option.selected svg rect {
    stroke: var(--cargo-red) !important;
    fill: var(--cargo-red) !important;
}

/* === ИНДИКАТОР ШАГОВ === */
.steps-indicator .step.active {
    background: var(--cargo-red) !important;
    color: var(--text-on-primary) !important;
}

.steps-indicator .step.completed {
    background: var(--success-color) !important;
    color: var(--text-on-primary) !important;
}

.step-line {
    background: var(--border-color) !important;
}

/* === ПОЛЯ ВВОДА === */
.input-field:focus {
    border-color: var(--cargo-red) !important;
    box-shadow: 0 0 0 4px var(--cargo-red-alpha-10) !important;
}

/* === КАРТОЧКА РЕЗУЛЬТАТА === */
.result-card {
    border: 2px solid var(--cargo-red-alpha-20) !important;
}

.result-amount {
    color: var(--cargo-red) !important;
}

/* === НИЖНЯЯ НАВИГАЦИЯ === */
.nav-icon-item.active svg {
    stroke: var(--cargo-red) !important;
}

.nav-icon-item.active span {
    color: var(--cargo-red) !important;
}

/* === ЧЕКБОКСЫ И РАДИО === */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--cargo-red) !important;
}

/* === ИНФОРМАЦИОННЫЕ ПОДСКАЗКИ === */
.info-tooltip {
    background: var(--cargo-gray-light) !important;
}

.tooltip-content {
    background: var(--cargo-black) !important;
}

/* === КАРТА === */
.route-polyline {
    stroke: var(--cargo-red) !important;
}

/* === ССЫЛКИ === */
a {
    color: var(--cargo-red) !important;
}

a:hover {
    color: var(--cargo-red-dark) !important;
}

/* === АКЦЕНТЫ === */
.hint {
    color: var(--cargo-red) !important;
}

.warning-message strong {
    color: var(--cargo-red) !important;
}

/* === ВЫДЕЛЕННЫЙ ТЕКСТ === */
::selection {
    background: var(--cargo-red-alpha-20) !important;
    color: var(--cargo-black) !important;
}

/* === ПОЛОСА ПРОКРУТКИ (WEBKIT) === */
::-webkit-scrollbar-thumb {
    background: var(--cargo-red) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cargo-red-dark) !important;
}

/* === WHATSAPP КНОПКА === */
.whatsapp-button {
    background: #25D366 !important;
}

.whatsapp-button:hover {
    background: #22C55E !important;
}

/* === СТАТУС ОНЛАЙН === */
.offline-badge.online {
    background: var(--success-color) !important;
}

/* === ГРУППЫ ОСЕЙ === */
.axle-group-card {
    border-left: 3px solid var(--cargo-red) !important;
}

/* === ПРЕДУПРЕЖДЕНИЯ === */
.error-message {
    background: rgba(255, 59, 48, 0.1) !important;
    border-left: 4px solid var(--error-color) !important;
}

/* === ИСТОРИЯ === */
.history-item:hover {
    background: var(--cargo-red-alpha-10) !important;
    border-left: 4px solid var(--cargo-red) !important;
}

.history-item-amount {
    color: var(--cargo-red) !important;
    font-weight: 600 !important;
}

/* ================================================
   ДОПОЛНИТЕЛЬНЫЕ УТИЛИТЫ
   ================================================ */

.text-primary-color {
    color: var(--cargo-red) !important;
}

.bg-primary-color {
    background: var(--cargo-red) !important;
}

.border-primary-color {
    border-color: var(--cargo-red) !important;
}
.nav-icon-item.active svg {
    fill: #ffffff;
}