/* page-contacts.css — стили страницы «Контакты». База — в main.css */

/* ===== ШАПКА СТРАНИЦЫ ===== */
.crumbs{font-size:14px;color:var(--ink-faint);margin:28px 0 0}
.crumbs a{text-decoration:none;transition:color .25s}
.crumbs a:hover{color:var(--accent)}
.crumbs span{color:var(--ink-soft)}

.page-head{padding:22px 0 40px}
.page-head h1{font-size:clamp(32px,4.6vw,48px);margin-bottom:14px}
.page-head p{color:var(--ink-soft);font-size:17px;max-width:620px;line-height:1.6}

/* ===== ОБЩАЯ СЕТКА: ФОРМА + КОНТАКТЫ ===== */
.contact-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:40px;
  padding-bottom:70px;
}

/* ===== КАРТОЧКА ФОРМЫ ===== */
.form-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:36px;
  position:relative;
}
.form-card h2{font-size:26px;margin-bottom:8px}
.form-card .sub{color:var(--ink-faint);font-size:14px;margin-bottom:26px}

.field{margin-bottom:20px}
.field label{
  display:block;
  font-size:14px;
  font-weight:500;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.field .req{color:var(--accent)}

.field input,
.field select,
.field textarea{
  width:100%;
  font-family:'Archivo',sans-serif;
  font-size:15px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 14px;
  transition:border-color .2s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder{color:var(--ink-faint)}
.field input:focus,
.field select:focus,
.field textarea:focus{outline:none;border-color:var(--accent);background:#fff}
.field textarea{resize:vertical;min-height:88px;font-family:inherit}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 15px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}

/* сообщение об ошибке — скрыто по умолчанию, показывается вместе с .invalid */
.field .err{
  display:none;
  font-size:13px;
  color:#B5453B;
  margin-top:6px;
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea{border-color:#B5453B}
.field.invalid .err{display:block}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* согласие на обработку данных */
.consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  margin-bottom:22px;
}
.consent input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:19px;height:19px;flex-shrink:0;margin-top:1px;
  border:1.5px solid var(--line);
  border-radius:5px;
  background:var(--paper);
  cursor:pointer;
  position:relative;
  transition:all .2s var(--ease);
}
.consent input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
.consent input[type="checkbox"]:checked::after{
  content:'';position:absolute;left:6px;top:2px;
  width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.consent span{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.consent a{color:var(--accent);text-decoration:underline}
.consent.invalid input[type="checkbox"]{border-color:#B5453B}

.submit-btn{width:100%;justify-content:center;padding:14px 24px;font-size:16px}

/* ===== SUCCESS-ЭКРАН ===== */
.form-success{
  display:none;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  padding:20px 0 10px;
}
.form-success.show{display:flex}
.form-success .ic{
  width:56px;height:56px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.form-success h2{font-size:26px;margin-bottom:10px}
.form-success p{color:var(--ink-soft);font-size:15px;line-height:1.6;margin-bottom:24px}
.form-success p b{color:var(--ink)}

/* ===== БЛОК КОНТАКТОВ (СПРАВА) ===== */
.contacts-side{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.contact-item{
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px;
}
.contact-item .ci{
  width:44px;height:44px;flex-shrink:0;
  border-radius:10px;
  background:var(--accent-soft);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.contact-item .l{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:600;
  margin-bottom:4px;
}
.contact-item .v{
  display:block;
  font-family:'Newsreader',serif;
  font-size:19px;
  color:var(--ink);
  text-decoration:none;
  line-height:1.3;
}
.contact-item a.v:hover{color:var(--accent)}
.contact-item .note{
  font-size:13px;
  color:var(--ink-faint);
  margin-top:4px;
}

/* ===== КАРТА (ЗАГЛУШКА) ===== */
.map-section{padding-bottom:80px}
.map-wrap{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.map-frame{
  display:block;      /* иначе inline-элемент оставит зазор под собой внутри рамки */
  width:100%;
  aspect-ratio:16/6;
  border:0;
}
/* Заглушка на случай, если карту понадобится временно снять */
.map-placeholder{
  aspect-ratio:16/6;
  background:
    repeating-linear-gradient(0deg, var(--paper-2) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--paper-2) 0 1px, transparent 1px 40px),
    var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
}
.map-pin{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:360px;
  padding:0 20px;
}
.map-pin .pin{color:var(--accent);margin-bottom:10px}
.map-pin .addr{
  font-family:'Newsreader',serif;
  font-size:19px;
  color:var(--ink);
  margin-bottom:6px;
}
.map-pin .hint{font-size:13px;color:var(--ink-faint);line-height:1.5}

/* ===== АДАПТИВ ===== */
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .form-card{padding:28px 24px}
  .row2{grid-template-columns:1fr}
}
@media(max-width:560px){
  .page-head{padding:16px 0 28px}
  .form-card{padding:22px 18px;border-radius:12px}
  .map-frame,
  .map-placeholder{aspect-ratio:4/3}
}