.custom-name-display {
    cursor: pointer;
    padding: 2px 0px; /* Добавляем отступы, чтобы текст не касался рамки */
    border-bottom: 1px dotted #a9a9a9; /* Легкое подчеркивание в виде точек */
}

/* Обводка при наведении */
.custom-name-display:hover {
    color: #007bff; /* Цвет текста при наведении */
    border: 2px solid #007bff; /* Синяя обводка вокруг текста при наведении */
    border-radius: 4px; /* Скругленные углы рамки */
    border-bottom: none; /* Убираем подчеркивание, когда появляется обводка */
}

/* Стилизуем плейсхолдер */
.custom-name-display .placeholder {
    color: #a9a9a9; /* Светло-серый цвет */
    font-style: italic; /* Курсив для различия с обычным текстом */
}

/* Плейсхолдер в текстовом поле */
.custom-name-input::placeholder {
    color: #a9a9a9; /* Цвет плейсхолдера */
    font-style: italic; /* Курсив для плейсхолдера */
}

/* Текстовое поле, чтобы выглядело как текст */
.custom-name-input {
    border: none;
    border-bottom: 1px dashed #a9a9a9; /* Легкая серо-пунктирная линия под текстом */
    background: none;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    width: auto;
    display: inline-block;
}