/* Страницы приглашения: invite.qrush.delivery/?team= (сотрудник платформы, pages/invite_team.php)
   и ?utm= (сотрудник отеля, pages/invite.php). Один вид на обе, по макету владельца 13.10.2026 и фирстилю
   (DESIGN-SYSTEM.md, «Применено на страницах»). Фото фона задаёт страница: style="--ti-photo:url(...)" на .ti-bg */
html { height: 100%; }
/* блоки по центру экрана по высоте: тело - колонка, .ti тянется на всю высоту и центрует содержимое */
body.ti-body { margin: 0; min-height: 100%; display: flex; flex-direction: column; background: var(--qr-bg); color: var(--qr-ink); font-family: var(--qr-font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.ti { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; width: 100%; box-sizing: border-box; max-width: 520px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom)); }
/* знак QRush бледно в правом верхнем углу, частью за краем экрана. Фиксированный слой не
   растягивает страницу вбок (абсолютный за краем давал горизонтальную прокрутку) */
/* фото офиса фоном на весь экран; фиксированный слой, потому что background-attachment: fixed в iOS не работает.
   Сверху тёплая вуаль, чтобы заголовок читался поверх снимка */
.ti-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(245,243,240,.86) 0%, rgba(245,243,240,.62) 40%, rgba(245,243,240,.5) 70%, rgba(245,243,240,.7) 100%), var(--ti-photo, none) center top / cover no-repeat; }
.ti-mark { position: fixed; top: -60px; right: -150px; width: 380px; height: 348px; background: url(/img/qrush.svg) center/contain no-repeat; opacity: .025; filter: brightness(0); pointer-events: none; z-index: 0; }   /* знак в файле белый: красим в тёмный */
.ti > * { position: relative; z-index: 1; }
.ti__title { position: relative; margin: 0 0 12px; font-size: 32px; line-height: 1.08; font-weight: 800; letter-spacing: -.025em; }
.ti__lead { position: relative; margin: 0 0 48px; font-size: 16px; line-height: 1.45; color: var(--qr-muted); }
.ti-card { position: relative; background: var(--qr-surface); border: 0; border-radius: var(--qr-r-md); box-shadow: var(--qr-sh-card); padding: 18px 16px 16px; }
.ti-card__name { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ti-card__pos { margin: 2px 0 0; font-size: 15px; color: var(--qr-muted); overflow-wrap: anywhere; }
.ti-card__line { height: 1px; background: var(--qr-line); margin: 14px 0 16px; }
.ti-grid { display: grid; grid-template-columns: 39% minmax(0, 1fr); gap: 14px; align-items: stretch; }
/* фото: кнопка загрузки; пока фото нет - мягкая заглушка с камерой */
/* по макету фото на всю высоту колонки полей: от первой подписи до низа последнего поля */
.ti-photo { position: relative; width: 100%; height: 100%; min-height: 0; border: 0; padding: 0; border-radius: var(--qr-r-sm); background: var(--qr-gold-soft) center/cover no-repeat; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: inherit; }
.ti-photo.has-img .ti-photo__empty { display: none; }
.ti-photo__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--qr-gold-2); font-size: 13px; line-height: 1.3; text-align: center; padding: 0 8px; }
.ti-photo__empty i { font-size: 24px; color: var(--qr-gold); }
.ti-photo__cam { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; background: var(--qr-gold); color: #fff; display: none; align-items: center; justify-content: center; font-size: 13px; }
.ti-photo.has-img .ti-photo__cam { display: flex; }
.ti-fields { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ti-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ti-field label { font-size: 13px; font-weight: 600; color: var(--qr-muted); }
.ti-input { position: relative; display: flex; align-items: center; background: var(--qr-surface-2); border: 1px solid var(--qr-line); border-radius: var(--qr-r-sm); min-height: 48px; }
.ti-input:focus-within { border-color: var(--qr-gold); }   /* без обводки: при фокусе только золотая рамка поля */
.ti .auth__eye:focus, .ti .auth__eye:focus-visible, .ti-photo:focus, .ti-photo:focus-visible { outline: none; }
.ti-input input { flex: 1; min-width: 0; border: 0; outline: 0; box-shadow: none; background: transparent; font: inherit; font-size: 16px; color: var(--qr-ink); padding: 12px 0 12px 14px; }
.ti-input input { text-overflow: ellipsis; }   /* страховка: длинная подсказка на чужом языке не режется посреди буквы */
.ti-input input::placeholder { color: var(--qr-faint); }
.ti-input input:focus, .ti-input input:focus-visible { outline: none; box-shadow: none; }
.ti-input__ico { flex: 0 0 auto; width: 42px; text-align: center; color: var(--qr-faint); font-size: 17px; }
.ti .auth__eye { position: static; transform: none; flex: 0 0 auto; width: 42px; height: 46px; padding: 0; border: 0; background: none; color: var(--qr-faint); font-size: 17px; cursor: pointer; }
.ti-err { margin: 14px 0 0; color: var(--qr-danger); font-size: 14px; line-height: 1.4; }
.ti-err[hidden] { display: none; }
.ti-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-top: 18px; border: 0; border-radius: 16px; background: var(--qr-gold); color: #fff; box-shadow: 0 8px 22px rgba(172,114,36,.28); font: inherit; font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer; padding: 0 52px; text-align: center; }
.ti-btn i { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 18px; }
.ti-btn:disabled { opacity: .6; cursor: default; }
.ti-btn--light { background: var(--qr-surface); color: var(--qr-ink); border: 1px solid var(--qr-line); box-shadow: none; }
.ti-btn[hidden] { display: none; }
.ti-done { text-align: left; }
.ti-done .ti-done__ico { margin-left: auto; margin-right: auto; }
.ti-done .ti__title { text-align: center; }
.ti-done__ico { width: 56px; height: 56px; border-radius: 50%; background: var(--qr-green-soft); color: var(--qr-green); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 16px; }
.ti-web { display: block; text-align: center; margin-top: 14px; color: var(--qr-muted); font-size: 14px; }
/* «готово» и «не найдено» на белой карточке, как форма: поверх фото без подложки текст не читается */
.ti-done, .ti-bad { background: var(--qr-surface); border-radius: var(--qr-r-md); box-shadow: var(--qr-sh-card); padding: 24px 20px 22px; }
.ti-done .ti__title, .ti-bad .ti__title { font-size: 28px; padding-left: 0; padding-right: 0; }
.ti-done .ti__lead, .ti-bad .ti__lead { margin-bottom: 22px; padding-left: 0; padding-right: 0; }
.ti-bad .ti__lead { margin-bottom: 0; }
.ti-bad { text-align: center; }
/* кнопки магазинов - фирменные чёрные значки, те же файлы, что на главной сайта */
.ti-stores { display: flex; justify-content: center; gap: 10px; }
.ti-store:active { transform: scale(.98); }
/* кнопка магазина во всю ширину: чёрная, как фирменные значки, логотип и две строки подписи */
.ti-stores--app { flex-direction: column; gap: 10px; }
.ti-store { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 58px; box-sizing: border-box; padding: 8px 18px; border-radius: 14px; background: #000; color: #fff; text-decoration: none; }
.ti-store i { font-size: 30px; line-height: 1; }
.ti-store img { display: block; width: 26px; height: auto; }
.ti-store span { display: flex; flex-direction: column; align-items: flex-start; font-size: 20px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
.ti-store small { font-size: 11.5px; font-weight: 500; letter-spacing: 0; opacity: .9; }
.ti-done__mail { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; padding: 12px 14px; border-radius: var(--qr-r-sm); background: var(--qr-gold-soft); color: var(--qr-gold-2); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.ti-done__mail i { margin-top: 2px; }
.ti-bad i { font-size: 44px; color: var(--qr-faint); margin-bottom: 18px; }
[hidden] { display: none !important; }
/* телефон: поля шире, иначе подсказка в email обрезается */
/* поля как на макете (770 точек = 480): карточка почти во всю ширину, заголовок отступает сильнее */
@media (min-width: 421px) {
    .ti { padding-left: 12px; padding-right: 12px; padding-top: calc(40px + env(safe-area-inset-top)); }
    .ti__title, .ti__lead { padding-left: 13px; padding-right: 13px; }
    .ti-card { padding: 20px 15px 15px; }
    .ti-grid { grid-template-columns: 39.6% 1fr; gap: 19px; }
    .ti-input { min-height: 46px; }
}
@media (max-width: 420px) {
    .ti { padding-left: 16px; padding-right: 16px; }
    .ti-card { padding: 16px 14px 14px; }
    .ti-grid { grid-template-columns: 39% minmax(0, 1fr); gap: 12px; }
    /* поля плотнее, чтобы фото 39% по высоте полей держало пропорции макета */
    .ti-fields { gap: 4px; }
    .ti-field { gap: 4px; }
    .ti-field label { line-height: 18px; }
    .ti-input { min-height: 44px; }
    .ti-input input { padding: 10px 0 10px 10px; line-height: 20px; }
    .ti-input input::placeholder { font-size: 15px; }
    .ti-input__ico, .ti .auth__eye { width: 32px; }
    .ti .auth__eye { height: 42px; }
    .ti-btn { min-height: 50px; margin-top: 14px; }
    .ti-photo__empty { font-size: 12px; padding: 0 4px; }
}
.ti-btn { white-space: nowrap; }
@media (max-width: 380px) { .ti-btn { padding: 0 44px; font-size: 16px; } .ti-btn i { right: 18px; } }
@media (max-width: 340px) { .ti-btn { padding: 0 34px; font-size: 15px; } .ti-btn i { right: 12px; font-size: 16px; } }
@media (max-width: 340px) {
    .ti__title { font-size: 28px; }
    .ti-grid { grid-template-columns: 1fr; }
    .ti-photo { width: 120px; height: 150px; }
}
/* фирменное появление (раздел «Появление списков» в DESIGN-SYSTEM.md, кадры qapCard/qapPhoto из app.css):
   блоки выезжают снизу по очереди, фото фона идёт навстречу и доезжает до места */
@media (prefers-reduced-motion: no-preference) {
    .ti__title, .ti__lead, .ti-card { animation: qapCard var(--qap-dur) var(--qap-ease) both; }
    .ti__lead { animation-delay: var(--qap-step); }
    .ti-card { animation-delay: calc(var(--qap-step) * 2); }
    .ti-bg { animation: qapPhoto var(--qap-dur) var(--qap-ease) both; }
    /* у «готово» и «не найдено» выезжает карточка целиком, текст внутри не двигается отдельно */
    .ti-done, .ti-bad { animation: qapCard var(--qap-dur) var(--qap-ease) both; }
    .ti-done .ti__title, .ti-done .ti__lead, .ti-bad .ti__title, .ti-bad .ti__lead { animation: none; }
}

/* приглашение отеля: ссылка «уже есть аккаунт» под кнопкой и попап «уже сотрудник другого отеля» */
.ti-alt { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--qr-muted); }
.ti-alt a { color: var(--qr-gold); font-weight: 600; text-decoration: none; }
/* общее правило .ti > * делает блоки относительными; попап должен остаться поверх всего экрана */
.ti > .inv-pop { position: fixed; z-index: 1200; }
.inv-pop[hidden] { display: none; }
.inv-pop .inv-pop__box { border-radius: var(--qr-r-md); box-shadow: var(--qr-sh-pop); font-family: var(--qr-font); }
.inv-pop .inv-pop__ico i { color: var(--qr-danger); }
.inv-pop .ti-btn { margin-top: 0; }