/**
 * Виджет диапазона hero (карточка: поля ввода + двойной слайдер + деления)
 */

.hero-range-picker {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.hero-range-modal .modal-dialog {
    max-width: min(420px, calc(100vw - 1.25rem));
}

.hero-range-modal .modal-content {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.hero-range-modal .modal-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding: 0.75rem 1rem;
}

.hero-range-modal .modal-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-600, #64748b);
}

.hero-range-modal .modal-body {
    padding: 1rem 1rem 1.15rem;
    background: #fff;
}

/* Карточка как на референсе: светлый фон, скругления */
.hero-range-widget {
    background: #f0f2f5;
    border-radius: 10px;
    padding: 14px 14px 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.hero-range-widget-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1d24;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

/* Строка чисел: белые поля, дефис, суффикс */
.hero-range-num-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    background: #e8eaef;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 18px;
}

.hero-range-num-input {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    border: 1px solid #d8dce4;
    border-radius: 6px;
    background: #fff;
    padding: 8px 10px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a1d24;
    text-align: center;
    -moz-appearance: textfield;
}

.hero-range-num-input::-webkit-outer-spin-button,
.hero-range-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hero-range-num-input:focus {
    outline: none;
    border-color: #3b6ad9;
    box-shadow: 0 0 0 2px rgba(59, 106, 217, 0.2);
}

.hero-range-num-sep {
    flex-shrink: 0;
    color: #8b92a3;
    font-weight: 500;
    font-size: 0.95rem;
}

.hero-range-num-suffix {
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #5c6370;
    padding-left: 2px;
}

/* Двойной слайдер: один трек, синяя зона между ручками */
.hero-range-dual-wrap {
    position: relative;
    height: 36px;
    margin-bottom: 6px;
}

.hero-range-dual-track-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: #d8dce4;
    border-radius: 2px;
    pointer-events: none;
}

.hero-range-dual-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: #3b6ad9;
    border-radius: 2px;
    pointer-events: none;
    left: 0;
    width: 0;
}

.hero-range-dual-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

.hero-range-dual-input::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
    border: none;
}

.hero-range-dual-input::-moz-range-track {
    height: 4px;
    background: transparent;
    border: none;
}

.hero-range-dual-min {
    z-index: 2;
}

.hero-range-dual-max {
    z-index: 3;
}

.hero-range-dual-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b6ad9;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(59, 106, 217, 0.45);
    cursor: grab;
    pointer-events: auto;
    margin-top: -7px;
}

.hero-range-dual-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b6ad9;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(59, 106, 217, 0.45);
    cursor: grab;
    pointer-events: auto;
}

.hero-range-dual-input:active::-webkit-slider-thumb {
    cursor: grabbing;
}

.hero-range-dual-input:active::-moz-range-thumb {
    cursor: grabbing;
}

/* Подписи делений */
.hero-range-ticks {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 2px;
    margin-top: 2px;
}

.hero-range-tick {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.hero-range-tick-mark {
    width: 1px;
    height: 6px;
    background: #b4bac8;
    margin-bottom: 4px;
}

.hero-range-tick-label {
    font-size: 0.68rem;
    color: #8b92a3;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

.hero-range-modal .modal-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    background: #fafbfc;
}

.hero-range-modal .btn-primary {
    background: #3b6ad9;
    border: none;
}

.hero-range-modal .btn-primary:hover {
    background: #2f5ac4;
}

.hero-range-modal .btn-secondary {
    background: #fff;
    border: 1px solid #d8dce4;
    color: #3a404d;
}

/* Компактная модалка диапазона: один заголовок + закрытие в блоке виджета */
.hero-range-modal-dialog--compact.modal-dialog {
    max-width: min(380px, calc(100vw - 1rem));
}