/* ===== Contact — compact card style ===== */

/* wrapper центрирует карточку, без лишнего скролла */
.contact-wrap{
  display:flex; justify-content:center; align-items:center;
  min-height:calc(100vh - 180px); /* учитываем шапку+футер */
  padding:16px 0;
}

/* сама карточка */
.contact-card{
  --bs-form-invalid-color: #6c757d;
  --bs-form-invalid-border-color: #6c757d;
  width:100%; max-width:720px; margin:0 auto;
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff 0%, #f7f8ff 100%);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:22px 24px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.contact-card:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.14); }

/* плотнее на широких десктопах */
@media (min-width:1200px){
  .contact-card{ max-width:760px; padding:24px 26px; }
}

/* хиро-блок */
.contact-hero{ text-align:center; margin-bottom:12px; }
.contact-hero__icon{
  width:56px; height:56px; border-radius:12px; overflow:hidden;
  margin:0 auto 8px; box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.contact-hero__icon img{ width:100%; height:100%; object-fit:cover; }
/* ===== Contact title: animated gradient text ===== */
.contact-title{
  font-size: clamp(1.2rem, 1.6vw, 1.35rem);
  font-weight: 900;
  letter-spacing: .2px;
  margin: 0 0 6px;
  line-height: 1.2;

  /* градиент по тексту */
  background: linear-gradient(90deg, #0000CD, #C1205A, #00B0FF, #8A2BE2);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* анимация мягкого “перетекания” */
  animation: contactTitleGradient 8s ease-in-out infinite;
  will-change: background-position;
}

@keyframes contactTitleGradient{
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* доступность: если пользователь просит меньше анимации */
@media (prefers-reduced-motion: reduce){
  .contact-title{
    animation: none;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #1F252E; /* твой базовый цвет заголовков */
  }
}
.contact-subtitle{ margin:0; color:#6c757d; font-size:.95rem; }

/* ——— форма ——— */
/* саму форму делаем «прозрачной», тень/фон у карточки */
#contact-form{
  background:transparent; box-shadow:none; padding:0; margin:0; max-width:unset;
}

.form-label{ font-weight:700; color:#111827; }

.form-select,
.form-control{
  border-radius:10px; padding:.75rem;
  border:1px solid #ced4da;
  transition:border-color .2s, box-shadow .2s;
}
.form-control:focus,
.form-select:focus{
  border-color:#0000CD;
  box-shadow:0 0 0 .2rem rgba(0,0,205,.15);
}

textarea.form-control{ resize:vertical; min-height:140px; }
input[type="file"].form-control{ padding:.5rem; }

.form-text{ color:#6c757d; font-size:.875rem; }
#char-count{ color:#0000CD; font-weight:600; }
#file-info{ font-size:.85rem; }

/* спиннер: в ряд с текстом */
.contact-loading{
  display:flex; align-items:center; gap:.5rem;
}

/* кнопка отправки — как в приложении */
.btn-primary[data-name="submit-button"]{
  background-color:#0000CD;
  border:1px solid #F0F8FF;
  color:#fff; border-radius:10px;
  padding:.75rem 1.25rem; font-weight:700;
  transition:transform .15s ease, box-shadow .15s ease, background-color .2s ease, border-color .2s ease;
}
.btn-primary[data-name="submit-button"]:hover{
  background-color:#C1205A; border-color:#C1205A;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.btn-primary[data-name="submit-button"]:active{
  transform:translateY(0);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}

/* валидация (если используешь) */
.is-invalid{ border-color: #6c757d !important; }

/* немного плотности на высоких экранах */
@media (min-height:900px){
  .contact-wrap{ min-height:calc(100vh - 200px); }
}

/* планшеты */
@media (max-width: 992px){
  .contact-card{ max-width:680px; }
}

/* убрать лишний нижний отступ у последнего элемента в карточке */
.contact-card > *:last-child{ margin-bottom:0; }

/* 992–1199px: компактнее на “обычных” ноутбуках */
@media (min-width: 992px) and (max-width: 1199.98px){
  .contact-card{ max-width:720px; padding:22px 22px; }
}

/* ≤768px: если захочешь легкий тюнинг под планшеты */
@media (max-width: 768px){
  .contact-card{ max-width:640px; padding:20px 18px; }
  .contact-title{ font-size: clamp(1.1rem, 2.2vw, 1.3rem); }
  .contact-subtitle{ font-size: clamp(.9rem, 1.8vw, .95rem); }
  textarea.form-control{ min-height: clamp(120px, 22vh, 160px); }
  .contact-loading{ flex-wrap: wrap; }
}

/* Чуть адаптивнее и на больших: */
.contact-title{
  font-size: clamp(1.2rem, 1.6vw, 1.35rem);
}
.contact-subtitle{
  font-size: clamp(.9rem, 1.1vw, .95rem);
}
textarea.form-control{
  min-height: clamp(140px, 20vh, 220px);
}