Потому что у Вас высота в input задана 34px, при этом box-sizing: border-box и padding: 31px 0 30px 20px; Т.е. только внутренний отступ на 61px, на высоту место не осталось.
Задайте height: 63px; и уменьшите padding

Проблема в том что не срабатывает .overlay_det:target+.popup_det{} - этот стиль подразумевает что .popup_det будет идти непосредственно после .overlay_det, а у Вас же в коде, они разделены тегом p:

<p>В залах гимнастического клуба Balance проходят групповые и индивидуальные занятия под руководством мастеров спорта России по художественной гимнастике.<br>
Для посещения Клуба гимнастики Balance необходимо оформить справку об отсутствие противопоказаний для занятий спортом. 
<a href="#win1">Подробнее</a><br>
        <!-- Модальное окно справки --><br>
        <a href="#x" class="overlay_det" id="win1"></a>
</p>

<div class="popup_det">контент окна<div>

Просто перенесите .overlay_det к .popup_det :

<p>В залах гимнастического клуба Balance проходят групповые и индивидуальные занятия под руководством мастеров спорта России по художественной гимнастике.<br>
Для посещения Клуба гимнастики Balance необходимо оформить справку об отсутствие противопоказаний для занятий спортом. 
<a href="#win1">Подробнее</a><br><br>
</p>

<!-- Модальное окно справки -->
<a href="#x" class="overlay_det" id="win1"></a>
<div class="popup_det">контент окна<div>

Вам сюда caniuse.com/#search=flex