/* Блок реквизитов */
.requisites-section {
    padding: 0 0 60px 0;
    background-color: #fff;
}

.requisites-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 0px;
}

/* Заголовок НАД блоками (для ПК) */
.requisites-title {
    color: #303030;
    text-align: left;
    font-family: 'Bebas Neue Cyrillic', 'Bebas Neue', sans-serif;
    font-size: 48px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0 0 30px 0;
    line-height: 1;
}

/* Мобильный заголовок (скрыт по умолчанию) */
.requisites-title-mobile {
    display: none;
}

/* Обёртка колонок */
.requisites-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Левая часть с градиентом */
.requisites-left {
    padding: 56px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    box-sizing: border-box;
}

.requisites-gradient {
    background: linear-gradient(
        180deg,
        rgba(110, 189, 255, 1) 0%,
        rgba(20, 129, 219, 0) 54.326921701431274%,
        rgba(55, 81, 253, 0.88) 100%
    );
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    backdrop-filter: blur(3px);
}

.requisites-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    position: relative;
    z-index: 1;
    flex: 1;
}

/* Правая часть */
.requisites-right {
    background: #f2f3f5;
    padding: 56px;
    display: flex;
    flex-direction: column;
    gap: 70px;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    box-sizing: border-box;
}

.requisites-right-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    position: relative;
    flex: 1;
}

/* Общие стили для строк реквизитов */
.requisites-row {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: flex-end;
    justify-content: flex-start;
    align-self: stretch;
    position: relative;
    height: 22px;
}

.requisites-label {
    text-align: left;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}

.requisites-dash {
    border-bottom: 1px dashed;
    flex: 1;
    height: 0;
    margin-bottom: 4px;
}

.requisites-value {
    text-align: left;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}

/* Цвета для левой части */
.requisites-left .requisites-label,
.requisites-left .requisites-value {
    color: #ffffff;
}

.requisites-left .requisites-dash {
    border-color: #ffffff;
}

/* Цвета для правой части */
.requisites-right .requisites-label,
.requisites-right .requisites-value {
    color: #818084;
}

.requisites-right .requisites-dash {
    border-color: #e1e1e1;
}

/* ==========================================
   МЕДИА-ЗАПРОСЫ
   ========================================== */

/* Планшеты (1024px) */
@media (max-width: 1024px) {
    .requisites-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .requisites-left,
    .requisites-right {
        padding: 40px;
        height: auto;
        min-height: 378px;
    }
    
    .requisites-title {
        height: auto;
    }
    
    .requisites-row {
        height: auto;
        min-height: 22px;
    }
}

/* Мобильные устройства (768px) - по макету Figma */
@media (max-width: 768px) {
    .requisites-section {
        padding: 0;
    }
    
    .requisites-container {
        padding: 0;
        max-width: 100%;
    }

    /* Прячем десктопный заголовок */
    .requisites-title {
        display: none;
    }

    /* Колонки в одну строку, без отступов между собой */
    .requisites-columns {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Левая (синяя) часть */
    .requisites-left {
        padding: 40px 36px; /* По макету Фигмы */
        min-height: 334px; /* Минимальная высота как в Фигме */
        height: auto;
    }

    /* Показываем мобильный заголовок внутри синего блока */
    .requisites-title-mobile {
        display: block !important;
        color: #ffffff;
        font-family: 'Bebas Neue Cyrillic', 'Bebas Neue', sans-serif;
        font-size: 24px;
        font-weight: 400;
        text-transform: uppercase;
        margin: 0 0 24px 0;
        line-height: 1;
    }

    /* Отступы между строками реквизитов */
    .requisites-content,
    .requisites-right-content {
        gap: 24px; /* По Фигме */
    }

    /* Строки реквизитов: выравнивание по нижней линии (базовой) */
    .requisites-row {
        height: auto;
        min-height: auto;
        flex-wrap: nowrap;
        align-items: baseline; /* Выравнивание текста по нижней линии */
        gap: 4px;
    }

    /* Лейблы и значения: шрифт 13px, разрешаем перенос */
    .requisites-label,
    .requisites-value {
        font-size: 12.6px;
        white-space: normal; /* Разрешаем перенос длинных слов */
        word-break: break-word;
        flex-shrink: 1;
    }

    /* Пунктир занимает оставшееся место, но не позволяем ему сжиматься в 0 */
    .requisites-dash {
        flex: 1;
        margin-bottom: 3px;
        min-width: 10px;
    }

    /* Значение прижимаем вправо */
    .requisites-value {
        text-align: right;
    }

    /* Особый случай для длинного названия банка (делаем его на всю ширину под лейблом) */
    .requisites-left .requisites-row:last-child .requisites-value {
        flex-basis: 100%;
       max-width:190px;
        margin-top: 4px;
    }


/* Скрываем лейбл и точки для первого элемента (Название компании) */
.requisites-left .requisites-row:first-of-type .requisites-label,
.requisites-left .requisites-row:first-of-type .requisites-dash {
    display: none !important;
}

/* Растягиваем значение на всю ширину, так как лейбла больше нет */
.requisites-left .requisites-row:first-of-type .requisites-value {
    flex: 1 !important;
    width: 100% !important;
    text-align: left !important;
}

        /* Правая (серая) часть */
    .requisites-right {
        padding: 40px 36px; /* По макету Фигмы */
        gap: 24px;
        min-height: auto !important; /* Убираем фиксированную высоту с планшетной версии */
        height: auto !important;
    }
}

/* Для очень маленьких экранов (480px) */
@media (max-width: 480px) {
    .requisites-left,
    .requisites-right {
        padding: 20px 12px; /* Чуть меньше отступы на очень узких экранах */
    }


}