/**
 * @file
 * Вікно вибору способу звʼязку.
 */

.sr-contact {
  position: fixed;
  inset: 0;
  /*
   * Вище за все на сайті, і це не запас «про всяк випадок».
   *
   * Мобільні смуги (`.sr-m__bar`, `.sr-m__tabs`) мають z-index 60, але
   * лежать **усередині `.site-header`**, у якого 101. Через це вікно з
   * будь-яким значенням до 101 програвало не самій панелі, а її предку:
   * нижня панель малювалась поверх кнопки надсилання, і натиснути її було
   * неможливо — `elementFromPoint` повертав іконку вкладки.
   */
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sr-space-4);
}

/* Обовʼязкове правило: `hidden` це браузерне display:none, і будь-який
   авторський display на тому ж елементі перебиває його назавжди — вікно
   стає невидимо-незакривним. */
.sr-contact[hidden] {
  display: none;
}

.sr-contact__scrim {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.55);
}

.sr-contact__box {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--sr-space-4);
  border-radius: var(--sr-radius-card);
  background: var(--sr-surface);
  box-shadow: var(--sr-shadow-card-hover);
}

.sr-contact__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-3);
  margin-bottom: var(--sr-space-3);
}

.sr-contact__title {
  margin: 0;
  font-size: var(--sr-text-xl);
  font-weight: 700;
  color: var(--sr-ink);
}

.sr-contact__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sr-field);
  color: var(--sr-grey-1);
  cursor: pointer;
}

.sr-contact__x:hover {
  background: var(--sr-red);
  color: var(--sr-surface);
}

/* Спосіб звʼязку — рядок-картка. Однакові для обох, бо жоден із них не
   «правильніший»: людина обирає за своєю зручністю, а не за нашою. */
.sr-contact__way {
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
  margin-bottom: var(--sr-space-2);
  padding: var(--sr-space-3);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  color: var(--sr-ink);
  text-decoration: none;
}

.sr-contact__way:hover {
  border-color: var(--sr-black);
}

.sr-contact__way--tg:hover {
  border-color: var(--sr-blue);
}

.sr-contact__ico {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sr-field);
  color: var(--sr-red);
}

.sr-contact__way--tg .sr-contact__ico {
  color: var(--sr-blue);
}

.sr-contact__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sr-contact__text strong {
  font-size: var(--sr-text-base);
  font-weight: 600;
}

.sr-contact__text span {
  font-size: var(--sr-text-sm);
  color: var(--sr-grey-2);
}

.sr-contact__or {
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
  margin: var(--sr-space-4) 0 var(--sr-space-3);
  color: var(--sr-grey-2);
  font-size: var(--sr-text-sm);
}

.sr-contact__or::before,
.sr-contact__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sr-line);
}

.sr-contact__lead {
  margin: 0 0 var(--sr-space-3);
  font-size: var(--sr-text-sm);
  color: var(--sr-grey-1);
}

.sr-contact-form .form-item {
  margin: 0 0 var(--sr-space-2);
}

.sr-contact-form input[type="text"],
.sr-contact-form input[type="tel"],
.sr-contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--sr-space-3);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-surface);
  font-family: var(--sr-font);
  /* 16px обовʼязково: на менший розмір Safari сам наближає сторінку. */
  font-size: 16px;
}

.sr-contact-form input[type="text"],
.sr-contact-form input[type="tel"] {
  height: var(--sr-control-h);
}

.sr-contact-form textarea {
  padding-block: var(--sr-space-2);
  line-height: 1.5;
}

.sr-contact-form input[type="submit"] {
  width: 100%;
}

/*
 * На телефоні — нижня шухляда, а не вікно посередині.
 *
 * Причини дві. Перша: центроване вікно 707px заввишки на екрані 812
 * притискалось до обох країв — заголовок ховався під верхньою смугою, а
 * кнопка надсилання опинялась під нижньою панеллю. Друга: шухляда — це
 * мова, якою на цьому сайті вже говорять фільтр каталогу й вибір номера,
 * і третій різновид оверлея тут нічого не додав би.
 */
@media (max-width: 760px) {
  .sr-contact {
    align-items: flex-end;
    padding: 0;
  }

  .sr-contact__box {
    max-width: none;
    /* Лишаємо видимою смужку тла згори: так видно, що це шар над сторінкою,
       а не нова сторінка, і зрозуміло, куди тицяти, щоб закрити. */
    max-height: calc(100dvh - 72px);
    padding-bottom: var(--sr-space-6);
    border-radius: var(--sr-radius-card) var(--sr-radius-card) 0 0;
  }

  /* Смужка-держак: звичний знак, що панель тягнеться донизу. */
  .sr-contact__head {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 calc(-1 * var(--sr-space-4)) var(--sr-space-3);
    padding: var(--sr-space-3) var(--sr-space-4);
    background: var(--sr-surface);
    border-bottom: 1px solid var(--sr-line);
  }

  .sr-contact__title {
    font-size: var(--sr-text-lg);
  }

  /* Ціль дотику 44px — інакше по способу звʼязку промахуються. */
  .sr-contact__way {
    min-height: 44px;
  }

  .sr-contact-form input[type="submit"] {
    height: 48px;
  }
}