/* Страница «Поддержка» (support.html). Аккордеон вопросов — классы .faq-* из security.css не используются: здесь свой размер. */

.sup-main { padding: 64px 40px 96px; gap: 56px; }

.sup-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 32px; align-items: stretch; }
.sup-hero-text { display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.sup-h1 { margin: 0; font-weight: 800; font-size: clamp(44px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.04em; }
.sup-sub { margin: 0; font-size: 19px; line-height: 1.55; color: #616161; max-width: 44ch; }
.sup-search { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px; border-radius: 999px; background: #F5F5F7; box-shadow: inset 0 0 0 1px #E2E2E6; max-width: 520px; cursor: text; }
.sup-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; color: #1B1B1C; }

.sup-contacts { border-radius: 36px; background: #0500FF; color: #FFFFFF; padding: 36px; display: flex; flex-direction: column; gap: 22px; }
.sup-contacts-t { font-family: 'Manrope', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.sup-mail-card { border-radius: 24px; background: #FFFFFF; color: #1B1B1C; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.sup-mail-row { display: flex; align-items: center; gap: 14px; }
.sup-mail-icon { width: 48px; height: 48px; flex: none; border-radius: 16px; background: #F2F2FF; display: flex; align-items: center; justify-content: center; }
.sup-mail-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sup-mail-l { font-size: 13px; font-weight: 600; color: #616161; }
.sup-mail { font-size: 18px; font-weight: 700; color: #1B1B1C; white-space: nowrap; }
.sup-mail-d { font-size: 14px; line-height: 1.5; color: #616161; }
.sup-mail-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.sup-write { height: 46px; padding: 0 22px; border-radius: 999px; background: #0500FF; color: #FFFFFF; font-size: 15px; font-weight: 700; display: flex; align-items: center; }
.sup-write:hover { background: #2E2BFF; color: #FFFFFF; }
.sup-copy { height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid #E2E2E6; background: #FFFFFF; color: #1B1B1C; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sup-copy:hover { border-color: #0500FF; color: #0500FF; }
.sup-warn { display: flex; gap: 14px; align-items: flex-start; }
.sup-warn-icon { width: 36px; height: 36px; flex: none; border-radius: 50%; background: #48FF91; display: flex; align-items: center; justify-content: center; }
.sup-warn-text { display: flex; flex-direction: column; gap: 4px; }
.sup-warn-t { font-size: 16px; font-weight: 700; color: #FFFFFF; }
.sup-warn-d { font-size: 14px; line-height: 1.5; color: #FFFFFF; }

/* Форма */
.sup-form-sec { border-radius: 40px; background: #F5F5F7; padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; scroll-margin-top: 100px; }
.sup-form-intro { display: flex; flex-direction: column; gap: 14px; }
.sup-form-d { margin: 0; font-size: 17px; line-height: 1.6; color: #616161; }
.sup-form-warn { margin-top: 8px; display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: #FFF4E0; color: #7A4B00; }
.sup-form-warn svg { flex: none; margin-top: 1px; }
.sup-form-warn span { font-size: 14px; line-height: 1.5; font-weight: 500; }
.sup-form { display: flex; flex-direction: column; gap: 18px; }
.sup-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.sup-field { display: flex; flex-direction: column; gap: 8px; }
.sup-label { font-size: 14px; font-weight: 600; color: #1B1B1C; }
.sup-input { width: 100%; box-sizing: border-box; height: 54px; padding: 0 18px; border-radius: 16px; border: 1px solid #E2E2E6; background: #FFFFFF; font: inherit; font-size: 16px; color: #1B1B1C; outline: none; }
.sup-input:focus { border-color: #0500FF; }
.sup-input.is-error { border-color: #D0021B; }
select.sup-input { cursor: pointer; }
textarea.sup-input { height: auto; padding: 16px 18px; line-height: 1.5; resize: vertical; }
.sup-err { font-size: 13px; color: #D0021B; }
.sup-plat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #E2E2E6; }
.sup-plat > button { height: 44px; border-radius: 13px; border: 0; background: transparent; color: #1B1B1C; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sup-plat > button[aria-checked="true"] { background: #0500FF; color: #FFFFFF; }
.sup-send { height: 60px; border-radius: 999px; border: 0; background: #0500FF; color: #FFFFFF; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.sup-send:hover { background: #2E2BFF; }
.sup-send:active { background: #0400CC; }
.sup-sent { border-radius: 28px; background: #FFFFFF; padding: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; justify-content: center; }
.sup-sent-icon { width: 60px; height: 60px; border-radius: 50%; background: #48FF91; display: flex; align-items: center; justify-content: center; }
.sup-sent-t { font-family: 'Manrope', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.sup-sent-d { font-size: 16px; line-height: 1.55; color: #616161; }
.sup-again { margin-top: 6px; height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid #E2E2E6; background: #FFFFFF; color: #1B1B1C; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.sup-again:hover { border-color: #0500FF; color: #0500FF; }

/* Вопросы */
.sup-faq { display: flex; flex-direction: column; gap: 24px; }
.sup-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.sup-cat { height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: #F5F5F7; color: #1B1B1C; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sup-cat:hover { background: #F2F2FF; }
.sup-cat.is-on, .sup-cat.is-on:hover { background: #1B1B1C; color: #FFFFFF; }
.sup-note { padding: 14px 18px; border-radius: 16px; background: #FFF4E0; color: #7A4B00; font-size: 15px; font-weight: 500; }
.sup-groups { display: contents; }
.sup-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px 48px; padding: 32px 0; border-top: 1px solid #EEEEF0; }
.sup-group-h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.sup-group-list { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sup-q { border-radius: 22px; background: #FFFFFF; box-shadow: 0 0 0 1px #EEEEF0; }
.sup-q.is-open { background: #F2F2FF; box-shadow: 0 0 0 1px #F2F2FF; }
.sup-q-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 700; color: #1B1B1C; text-align: left; cursor: pointer; }
.sup-q-btn:hover { color: #0500FF; }
.sup-q-sign { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #F5F5F7; color: #1B1B1C; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; line-height: 1; }
.sup-q.is-open .sup-q-sign { background: #0500FF; color: #FFFFFF; }
.sup-q-a { margin: 0; padding: 0 24px 22px; font-size: 16px; line-height: 1.6; color: #3A3A3E; }
.sup-empty { padding: 48px 24px; border-radius: 28px; background: #F5F5F7; text-align: center; font-size: 17px; color: #616161; }

@media (max-width: 768px) {
  .sup-main { padding: 32px 16px 64px; gap: 48px; }
  .sup-hero { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
  .sup-contacts { padding: 24px; gap: 20px; }
  .sup-form-sec { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
  .sup-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .sup-group { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .sup-group-list { grid-column: auto; }
  .sup-mail { white-space: normal; }
  .sup-plat { display: flex; flex-wrap: wrap; }
  .sup-plat > button { flex: 1 1 auto; padding: 0 8px; font-size: 14px; }
}