/* ===== SUPPORT PAGE ===== */

.support-main {
  padding: var(--spacing-lg, 1.5rem) 0 var(--spacing-xl, 2rem);
  min-height: 50vh;
}

.support-main .container {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md, 1rem);
  padding-right: var(--spacing-md, 1rem);
}

.support-main .breadcrumbs-container {
  margin-bottom: var(--spacing-lg, 1.5rem);
}

.support-hero {
  text-align: center;
  margin-bottom: var(--spacing-xl, 2rem);
  padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
}

.support-hero__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--primary-color, #2a4b7c);
  margin-bottom: var(--spacing-sm, 0.5rem);
}

.support-hero__lead {
  font-size: 1.1rem;
  color: var(--text-secondary, #424242);
  max-width: 560px;
  margin: 0 auto;
}

.support-login-required {
  text-align: center;
  padding: var(--spacing-xl, 2rem);
  background: var(--bg-secondary, #f9f9f9);
  border-radius: var(--radius-lg, 0.75rem);
  color: var(--text-secondary, #424242);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.support-login-required a {
  color: var(--primary-color, #2a4b7c);
  font-weight: 600;
}

/* Блок «Новое обращение» — по центру экрана */
.support-new {
  margin-bottom: var(--spacing-xl, 2rem);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--spacing-lg, 1.5rem);
  background: var(--bg-secondary, #f9f9f9);
  border-radius: var(--radius-lg, 0.75rem);
  border: 1px solid var(--gray-200, #e5e7eb);
}

.support-new h2 {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md, 1rem);
  color: var(--text-primary, #212121);
  text-align: center;
}

.support-form {
  width: 100%;
}

.support-form .form-group {
  margin-bottom: var(--spacing-md, 1rem);
}

.support-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--text-primary, #212121);
}

.support-form select,
.support-form input[type="text"],
.support-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-md, 0.5rem);
  font-size: 1rem;
  box-sizing: border-box;
}

.support-form textarea {
  min-height: 120px;
  resize: vertical;
}

.support-form .btn {
  width: 100%;
  padding: 12px 20px;
  font-size: 1rem;
  margin-top: var(--spacing-sm, 0.5rem);
}

/* Блок «Мои обращения» */
.support-my-tickets {
  margin-bottom: var(--spacing-xl, 2rem);
}

.support-my-tickets h2 {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md, 1rem);
  color: var(--text-primary, #212121);
  text-align: center;
}

.support-ticket-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.support-ticket-item {
  margin-bottom: 8px;
}

.support-ticket-link {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-secondary, #f9f9f9);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-md, 0.5rem);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.support-ticket-link:hover {
  border-color: var(--primary-color, #2a4b7c);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.support-ticket-subject {
  font-weight: 600;
  color: var(--text-primary, #212121);
}

.support-ticket-type {
  font-size: 0.9rem;
  color: var(--text-muted, #757575);
}

.support-ticket-status {
  font-size: 0.85rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.support-ticket-status--new { background: #e3f2fd; color: #1565c0; }
.support-ticket-status--in_progress { background: #fff3e0; color: #e65100; }
.support-ticket-status--waiting_reply { background: #f3e5f5; color: #6a1b9a; }
.support-ticket-status--resolved { background: #e8f5e9; color: #2e7d32; }
.support-ticket-status--closed { background: #eceff1; color: #546e7a; }

.support-ticket-date {
  font-size: 0.9rem;
  color: var(--text-muted, #757575);
}

.support-empty {
  color: var(--text-muted, #757575);
  padding: var(--spacing-md, 1rem);
  text-align: center;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Thread (single ticket) */
.support-thread {
  max-width: 720px;
  margin: 0 auto;
}

.support-back {
  display: inline-block;
  margin-bottom: var(--spacing-md, 1rem);
  color: var(--primary-color, #2a4b7c);
  text-decoration: none;
}

.support-back:hover {
  text-decoration: underline;
}

.support-thread__header h2 {
  font-size: 1.35rem;
  margin-bottom: var(--spacing-sm, 0.5rem);
  color: var(--text-primary, #212121);
}

.support-thread__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--text-muted, #757575);
  margin-bottom: var(--spacing-lg, 1.5rem);
}

.support-thread__status {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.support-thread__status--new { background: #e3f2fd; color: #1565c0; }
.support-thread__status--in_progress { background: #fff3e0; color: #e65100; }
.support-thread__status--waiting_reply { background: #f3e5f5; color: #6a1b9a; }
.support-thread__status--resolved { background: #e8f5e9; color: #2e7d32; }
.support-thread__status--closed { background: #eceff1; color: #546e7a; }

.support-messages {
  margin-bottom: var(--spacing-lg, 1.5rem);
}

.support-msg {
  padding: var(--spacing-md, 1rem);
  margin-bottom: var(--spacing-sm, 0.5rem);
  border-radius: var(--radius-md, 0.5rem);
  border-left: 4px solid var(--gray-300, #ddd);
}

.support-msg--user {
  background: var(--bg-secondary, #f9f9f9);
  border-left-color: var(--primary-color, #2a4b7c);
}

.support-msg--staff {
  background: #e8eaf6;
  border-left-color: #3f51b5;
}

.support-msg__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.support-msg__author {
  font-weight: 600;
  color: var(--text-primary, #212121);
}

.support-msg__time {
  color: var(--text-muted, #757575);
}

.support-msg__body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-primary, #212121);
}

.support-reply-form {
  padding-top: var(--spacing-md, 1rem);
  border-top: 1px solid var(--gray-200, #e5e7eb);
}

.support-reply-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-md, 0.5rem);
  margin-bottom: 10px;
  resize: vertical;
}

/* ===== МОБИЛЬНАЯ ВЕРСТКА ===== */

@media (max-width: 768px) {
  .support-main {
    padding: var(--spacing-md, 1rem) 0 var(--spacing-lg, 1.5rem);
  }

  .support-main .container {
    padding-left: var(--spacing-sm, 0.75rem);
    padding-right: var(--spacing-sm, 0.75rem);
  }

  .support-hero {
    padding: var(--spacing-md, 1rem) var(--spacing-sm, 0.75rem);
    margin-bottom: var(--spacing-lg, 1.5rem);
  }

  .support-hero__lead {
    font-size: 1rem;
  }

  .support-new {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: var(--spacing-md, 1rem);
  }

  .support-form select,
  .support-form input[type="text"],
  .support-form textarea {
    padding: 12px 14px;
    min-height: 44px;
  }

  .support-form textarea {
    min-height: 140px;
  }

  .support-form .btn {
    min-height: 48px;
    padding: 14px 20px;
  }

  .support-ticket-link {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: var(--spacing-md, 1rem);
  }

  .support-ticket-subject {
    font-size: 0.95rem;
  }

  .support-ticket-type,
  .support-ticket-date {
    font-size: 0.85rem;
  }

  .support-thread {
    padding: 0;
  }

  .support-thread__meta {
    flex-direction: column;
    gap: 6px;
  }

  .support-msg {
    padding: var(--spacing-sm, 0.75rem);
  }

  .support-reply-form textarea {
    min-height: 100px;
    padding: 12px;
  }

  .support-reply-form .btn {
    width: 100%;
    min-height: 48px;
  }
}

@media (max-width: 480px) {
  .support-hero__title {
    font-size: 1.5rem;
  }

  .support-new h2,
  .support-my-tickets h2 {
    font-size: 1.1rem;
  }
}

.support-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem; }
        .support-filters select { padding: 6px 10px; border-radius: 6px; border: 1px solid #ddd; }
        .support-table { width: 100%; border-collapse: collapse; }
        .support-table th, .support-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eee; }
        .support-table th { background: #f5f5f5; font-weight: 600; }
        .support-table a { color: #2a4b7c; }
        .support-status { font-size: 0.85rem; padding: 2px 8px; border-radius: 4px; }
        .support-status--new { background: #e3f2fd; color: #1565c0; }
        .support-status--in_progress { background: #fff3e0; color: #e65100; }
        .support-status--waiting_reply { background: #f3e5f5; color: #6a1b9a; }
        .support-status--resolved { background: #e8f5e9; color: #2e7d32; }
        .support-status--closed { background: #eceff1; color: #546e7a; }
        .support-thread { max-width: 800px; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid #e5e7eb; }
        .support-thread > a { display: inline-block; margin-bottom: 1rem; color: #2a4b7c; text-decoration: none; font-weight: 500; }
        .support-thread > a:hover { text-decoration: underline; }
        .support-thread > a i { margin-right: 6px; }
        .support-thread h2 { margin: 0 0 0.5rem 0; font-size: 1.35rem; color: #212121; }
        .support-thread-meta { font-size: 0.9rem; color: #666; margin-bottom: 1rem; line-height: 1.5; }
        .support-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem; padding: 12px 0; border-bottom: 1px solid #eee; }
        .support-actions form { display: inline-flex; align-items: center; gap: 8px; }
        .support-actions select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.9rem; background: #fff; cursor: pointer; }
        .support-actions select:focus { outline: none; border-color: #2a4b7c; }
        .support-actions .btn { margin: 0; }
        .support-messages-list { margin-bottom: 1.5rem; }
        .admin-msg, .user-msg { margin-bottom: 12px; padding: 14px 16px; border-radius: 8px; border-left: 4px solid; }
        .admin-msg { border-left-color: #3f51b5; background: #e8eaf6; }
        .user-msg { border-left-color: #2a4b7c; background: #f5f7fa; }
        .admin-msg .author, .user-msg .author { font-weight: 600; font-size: 0.95rem; color: #212121; margin-bottom: 4px; }
        .admin-msg .time, .user-msg .time { font-size: 0.85rem; color: #666; margin-bottom: 8px; }
        .admin-msg > div:last-child, .user-msg > div:last-child { margin-top: 8px; line-height: 1.5; color: #333; }
        .support-reply-form { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
        .support-reply-form label { display: block; font-weight: 600; color: #212121; margin-bottom: 8px; font-size: 0.95rem; }
        .support-reply-form textarea { width: 100%; min-height: 100px; padding: 12px; margin-bottom: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.95rem; resize: vertical; box-sizing: border-box; }
        .support-reply-form textarea:focus { outline: none; border-color: #2a4b7c; }
        .support-reply-form .btn { margin-top: 4px; }
        .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 1rem; }
        .alert-success { background: #d4edda; color: #155724; }
        .alert-danger { background: #f8d7da; color: #721c24; }