{# Alpine 3: директивы (x-show, $store) работают только внутри компонента — нужен x-data на корне модалки #}
<div class="modal-overlay" id="modal-appointment" x-data="{}" role="dialog" aria-modal="true" aria-labelledby="appt-title" :aria-hidden="(!$store.modals.isOpen('modal-appointment')).toString()" x-show="$store.modals.isOpen('modal-appointment')" x-transition.opacity.duration.300ms x-cloak @click.self="$store.modals.close()" @keydown.escape.window="$store.modals.close()">
  {# Только overlay с x-show — иначе два слоя Alpine + transition дают «двойную» модалку #}
  <div class="modal modal--appointment" tabindex="-1">
    <div class="modal__head">
      <h2 class="modal__title" id="appt-title">Запишитесь на приём в клинику Доктор&nbsp;Смайл</h2>
      <button type="button" class="modal__close" aria-label="Закрыть" data-modal-close @click="$store.modals.close()">
        {# Figma node 129:19594 — два штриха-крестика, не заливка #}
        <svg class="modal__close-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 3l18 18M21 3L3 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
      </button>
    </div>

    {# БИТРИКС: заменить <form>...</form> на:
       $APPLICATION->IncludeComponent("bitrix:form.result.new","modal_form",[
           "WEB_FORM_ID" => "1",
           "AJAX_MODE"   => "Y",
           "CACHE_TYPE"  => "N",
       ]);
       Шаблон: components/bitrix/form.result.new/modal_form/template.php
       IMask для маски телефона — подключить в component_epilog.php через BX.ready() #}

    <form class="modal__form modal__form--appointment" novalidate>
      {# Honeypot: скрыт визуально, недоступен с клавиатуры; заполненное поле = бот → форма отклоняется #}
      <input class="visually-hidden" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">
      <div class="modal__fields">
        <div class="modal__group">
          <label for="appt-name">Имя</label>
          <input type="text" id="appt-name" name="name" autocomplete="name" placeholder="Иванов Иван" required>
        </div>
        <div class="modal__group">
          <label for="appt-phone">Телефон</label>
          <input type="tel" id="appt-phone" name="phone" autocomplete="tel" placeholder="+7 (900) 000-00-00" required>
        </div>
        <div class="modal__group">
          <label for="appt-specialty">Специализация стоматолога</label>
          <div class="modal__select-wrap">
            <select id="appt-specialty" name="specialty">
              <option value="">Не выбрано</option>
              <option value="therapist">Терапевт</option>
              <option value="orthodontist">Ортодонт</option>
              <option value="surgeon">Хирург</option>
              <option value="implantologist">Имплантолог</option>
              <option value="pediatric">Детский стоматолог</option>
            </select>
          </div>
        </div>
      </div>
      <label class="modal__checkbox modal__checkbox--appointment">
        <input type="checkbox" name="consent" required>
        <span>Я даю согласие на обработку персональных данных в соответствии с <a href="/politika-obrabotki-personalnykh-dannykh/">Политикой обработки персональных данных</a>.</span>
      </label>
      <button type="submit" class="btn btn--blue">Записаться на прием</button>
    </form>
  </div>
</div>