:root{
  --brand:#0ea5e9;
  --brand2:#0284c7;
  --ink:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,.10);
  --shadow:0 14px 30px rgba(2,6,23,.10);
  --radius:18px;
}

.contact-modern{ padding: 42px 0; }

.contact-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: 0 12px 26px rgba(2,6,23,.07);
  overflow:hidden;
}

.contact-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 14px;
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, rgba(14,165,233,.06), transparent);
  font-weight:950;
  color: var(--ink);
}
.contact-card-head i{ color: var(--brand2); }

.contact-info-list{
  padding: 12px;
  display:grid;
  gap:10px;
}

.cinfo{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background:#fff;
}
.cinfo-ico{
  width:46px;height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background: rgba(14,165,233,.10);
  border:1px solid rgba(14,165,233,.18);
  color: var(--brand2);
  font-size: 1.2rem;
  flex: 0 0 auto;
}
.cinfo-body{ min-width:0; }
.cinfo-title{ font-weight:950; margin-bottom:2px; }
.cinfo-text{ color: var(--muted); font-weight:700; font-size:.95rem; }

.cinfo-link{
  color: var(--ink);
  transition: .15s ease;
}
.cinfo-link:hover{
  transform: translateY(-1px);
  border-color: rgba(14,165,233,.35);
  background: rgba(14,165,233,.05);
}
.cinfo-arrow{
  margin-right:auto;
  color: var(--brand2);
  font-size: 1.2rem;
}

.contact-note{
  display:flex;
  gap:8px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(2,6,23,.03);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 700;
}

.contact-form-modern{
  padding: 12px;
}

.contact-form-modern .form-label{
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 6px;
}

.contact-form-modern .form-control{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 1px 0 rgba(2,6,23,.04);
  padding: 10px 12px;
}
.contact-form-modern .form-control:focus{
  border-color: rgba(14,165,233,.55);
  box-shadow: 0 0 0 .2rem rgba(14,165,233,.12);
}

.btn-send{
  border-radius: 14px;
  padding: 10px 16px;
  font-weight: 900;
}

/* status messages (نفس فكرة القديم لكن شكل أحدث) */
.form-status .loading,
.form-status .error-message,
.form-status .sent-message{
  display:none;
  border-radius: 14px;
  padding: 12px 12px;
  font-weight: 800;
}

.form-status .loading{
  background:#fff;
  border:1px solid var(--border);
  color: var(--muted);
}
.form-status .error-message{
  background:#fee2e2;
  border:1px solid #fecaca;
  color:#991b1b;
}
.form-status .sent-message{
  background:#dcfce7;
  border:1px solid #bbf7d0;
  color:#166534;
}