/* Локальные стили страницы «Контакты» — подключается только в contacts.html */

.contacts-page{
  --contacts-surface:#fff;
  --contacts-border:color-mix(in srgb,#000 10%,transparent);
  background:var(--surface-2,#faf7f1);
}

/* контейнеры */

.contacts-page .section{
  padding:clamp(20px,4vw,40px) 0;
}

.contacts-page .container{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

.contacts-page .title{
  font-size:clamp(22px,3.6vw,32px);
  margin:0 0 6px;
}

.contacts-page .sub{
  opacity:.85;
  margin:0;
}

/* сетка */

.contacts-page .grid{
  display:grid;
  gap:18px;
}

.contacts-page .grid--2{
  grid-template-columns:1fr;
}

@media (min-width:960px){
  .contacts-page .grid--2{
    grid-template-columns:1fr 1.2fr;
  }
}

/* карточки */

.contacts-page .card{
  background:var(--contacts-surface);
  border:1px solid var(--contacts-border);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:16px;
}

/* список контактов */

.contacts-page .contacts-list{
  margin:8px 0 0;
  display:grid;
  gap:8px;
}

.contacts-page .contacts-list dt{
  font-weight:600;
  color:var(--muted,#555);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.contacts-page .contacts-list dd{
  margin:2px 0 0;
}

/* кнопки / чипы */

.contacts-page .actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

.contacts-page .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--contacts-border);
  background:var(--contacts-surface);
  cursor:pointer;
  text-decoration:none;
}

.contacts-page .btn.primary{
  background:var(--emerald,#0c7a43);
  color:#fff;
  border-color:transparent;
}

.contacts-page .chip{
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--contacts-border) 80%, transparent);
  background:color-mix(in srgb, var(--contacts-surface) 94%, transparent);
  font-size:13px;
  opacity:.96;
}

/* более мягкие чипы в тёмной теме */
html[data-theme="dark"] .contacts-page .chip{
  background:color-mix(in srgb, var(--surface,#05070a) 70%, transparent);
  border-color:color-mix(in srgb,#ffffff 8%, transparent);
}


/* карта */

.contacts-page .map{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.contacts-page .map__inner{
  min-height:360px;
  border-radius:12px;
  overflow:hidden;
}

.contacts-page .map__inner iframe{
  width:100%;
  height:360px;
  border:0;
}

.contacts-page .map__hint{
  font-size:12px;
  color:var(--muted,#666);
  margin:0;
}

/* блок "Как добраться" */

.contacts-page .howto-section{
  padding-top:18px;
  padding-bottom:0;
}

.contacts-page .howto{
  margin:8px 0 0 18px;
  line-height:1.6;
}

/* форма */

.contacts-page .form{
  display:block;
}

.contacts-page .form-grid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}

@media (min-width:960px){
  .contacts-page .form-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .contacts-page .form-grid .f--2{
    grid-column:1 / -1;
  }
}

.contacts-page .f{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.contacts-page .f > span{
  font-size:13px;
  color:var(--muted,#666);
}

.contacts-page input,
.contacts-page select,
.contacts-page textarea{
  width:100%;
  background:#fff;
  border:1px solid var(--contacts-border);
  border-radius:12px;
  height:44px;
  padding:10px 12px;
  font:inherit;
}

.contacts-page textarea{
  height:auto;
  resize:vertical;
  min-height:96px;
}

.contacts-page input[aria-invalid="true"],
.contacts-page select[aria-invalid="true"]{
  border-color:#d33;
  box-shadow:0 0 0 3px color-mix(in srgb,#d33 18%,transparent);
}

.contacts-page .agree{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  font-size:13px;
  color:var(--muted,#666);
}
/* компактный чекбокс только на странице контактов */
.contacts-page .agree input[type="checkbox"]{
  width:16px;
  height:16px;
  flex-shrink:0;
  border-radius:4px;
  accent-color:var(--emerald,#0c7a43); /* зелёная галочка */
  transform:scale(.85);                /* визуально чуть меньше */
}


.contacts-page .form-actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:10px;
}

.contacts-page .status{
  font-size:13px;
  color:var(--muted,#555);
}

/* Скрыть ссылку текущей страницы в хедере (актуальная вкладка) */

header nav a[aria-current="page"]{
  display:none;
}