﻿/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page { padding-top: 16px; padding-bottom: 40px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1.4fr; } }

.contact-info-list { list-style: none; padding: 0; margin: 0; }
.contact-info-list li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid #f0f0f1;
  font-size: 1.3rem;
}
.contact-info-list li:last-child { border-bottom: none; }
.contact-info-icon {
  width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--blue-xlight); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; flex-shrink: 0;
}
.contact-info-list strong { display: block; font-size: 1.2rem; color: var(--gray-text); margin-bottom: 2px; }
.contact-info-list p { margin: 0; color: var(--dark); font-size: 1.3rem; line-height: 1.6; }
.contact-info-list a { color: var(--blue); font-weight: 600; }

.contact-socials { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.contact-social-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--radius);
  font-size: 1.3rem; font-weight: 700; color: var(--white);
  transition: opacity .2s;
}
.contact-social-btn:hover { opacity: .85; color: var(--white); }
.contact-social-btn.instagram { background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); }
.contact-social-btn.telegram  { background: #29b6f6; }
.contact-social-btn.whatsapp  { background: #25d366; }

.contact-form .contact-field { margin-bottom: 16px; }
.contact-form label { display: block; font-size: 1.3rem; font-weight: 600; color: var(--dark); margin-bottom: 6px; }
.contact-form textarea {
  width: 100%; background: #f0f0f1; border: 1px solid #f0f0f1;
  border-radius: var(--radius); padding: 12px 14px;
  font-family: 'Vazirmatn', Tahoma, Arial, sans-serif; font-size: 1.4rem;
  resize: vertical; outline: none; transition: border-color .2s; direction: rtl;
}
.contact-form textarea:focus { background: var(--white); border-color: var(--blue); }

.contact-map { margin-top: 0; }
.contact-map-placeholder {
  height: 200px; background: #f0f0f1; border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--gray-text); gap: 8px;
}
.contact-map-placeholder i { font-size: 3.2rem; color: var(--blue); }
.contact-map-placeholder p { margin: 0; font-size: 1.3rem; font-weight: 600; }
.contact-map-placeholder span { font-size: 1.2rem; }
@media (min-width: 768px) { .contact-map-placeholder { height: 280px; } }



