/* ===== تخطيط صفحة التواصل ===== */
.contact-wrap{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
  padding:24px 0 40px;
}

/* بطاقات */
.contact-card, .info-card{
  background:#fff;
  border:1px solid rgba(45,106,79,.12);
  border-radius:14px;
  padding:18px;
  box-shadow:0 3px 12px rgba(0,0,0,.05);
}
.contact-card h2, .info-card h3{
  color:#2d6a4f;
  margin-bottom:8px;
}
.contact-intro{ color:#345; margin-bottom:12px; }

/* الحقول */
.form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.form-row .label, .form-row label{ font-weight:700; color:#233; }
.req{ color:#c62828; margin-inline:4px; font-weight:800; }
.hint{ color:#667; font-size:.88rem; }

input[type="text"], input[type="email"], input[type="tel"], textarea{
  width:100%;
  padding:12px;
  border:1px solid #cfd8dc;
  border-radius:10px;
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus{
  outline:none;
  border-color:#2d6a4f;
  box-shadow:0 0 0 3px rgba(45,106,79,.12);
}

.choice-row{ display:flex; gap:14px; flex-wrap:wrap; }
.choice{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #e0e6e9; border-radius:999px; }
.choice input{ accent-color:#2d6a4f; }

.agree-row .agree{ display:flex; align-items:flex-start; gap:10px; }
.agree-row input{ margin-top:4px; accent-color:#2d6a4f; }

/* تنبيهات */
.alerts{ margin-top:4px; }
.alert{
  border-radius:10px; padding:10px 12px; margin-top:8px; font-weight:700;
  border:1px solid transparent;
}
.alert-error{ background:#fff3f3; color:#b00020; border-color:#ffcdd2; }
.alert-success{ background:#f0fff5; color:#1b5e20; border-color:#c8e6c9; }

/* أزرار النموذج */
.actions{ display:flex; gap:10px; margin-top:10px; }

/* معلومات الشركة */
.info-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.info-label{ display:block; font-weight:800; color:#223; margin-bottom:2px; }
.info-value{ color:#345; }
.info-value a{ color:#2d6a4f; font-weight:800; }

.mini-cta{ display:flex; gap:10px; margin-top:14px; }

.map-placeholder{
  margin-top:14px;
  border:1px dashed rgba(45,106,79,.25);
  border-radius:12px;
  height:180px;
  display:flex; align-items:center; justify-content:center;
  color:#456; background:#f7faf8;
}

/* استجابة */
@media (max-width: 960px){
  .contact-wrap{ grid-template-columns:1fr; }
}

/* إزالة أي أثر للخريطة إن وُجدت سابقاً */
.map-placeholder{ display:none !important; }

/* ضبط المسافات داخل بطاقة المعلومات */
.info-card > *:last-child { margin-bottom: 0; }
.info-list { margin-bottom: 10px; }
.info-value a { word-break: break-word; }
.info-list li { padding-bottom: 4px; border-bottom: 0; }

/* تمديد العمودين بنفس الارتفاع */
.contact-wrap{ align-items: stretch; }
.contact-card, .info-card{ display:flex; flex-direction:column; height:100%; }
.info-card .grow{ flex:1; display:flex; flex-direction:column; gap:12px; }

/* نقاط الخدمة عمودياً */
.service-points{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed rgba(45,106,79,.18);
}
.service-points .point{
  background:#f7faf8;
  border:1px solid rgba(45,106,79,.12);
  border-radius:8px;
  padding:10px 12px;
  font-weight:600;
  font-size:0.92rem;
  color:#2a3a35;
  text-align:center;
}

@media (max-width: 960px){
  .service-points{ grid-template-columns:1fr; }
}

/* كبسات أسفل بطاقة المعلومات */
.quick-actions.vertical{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:24px;
}

/* =========================================
   نظام الأزرار — مخصص لصفحة التواصل فقط
   (لا يلمس الهيدر ولا .btn-nav إطلاقًا)
   ========================================= */

:root{
  --green:#2d6a4f;
  --white:#ffffff;
  --btnRadius:12px;
}

/* أزرار نموذج التواصل */
.contact-card .actions .btn{
  border-radius:var(--btnRadius);
  font-weight:800;
  padding:12px 16px;
  line-height:1.1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--green);
  background:var(--green);
  color:var(--white);
  box-shadow:0 2px 8px rgba(45,106,79,.18);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}

/* زر مسح */
.contact-card .actions .btn.btn-ghost{
  background:#fff;
  color:var(--green);
  border-color:rgba(45,106,79,.35);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}

/* تعطيل تغيّر اللون عند التحويم — أزرار النموذج */
.contact-card .actions .btn:hover,
.contact-card .actions .btn.btn-ghost:hover{
  background:inherit !important;
  color:inherit !important;
  border-color:inherit !important;
  transform:translateY(-1px);
  box-shadow:0 3px 12px rgba(0,0,0,.08);
}

/* فوكس واضح */
.contact-card .actions .btn:focus-visible,
.contact-card .actions .btn.btn-ghost:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(45,106,79,.18);
}

/* أزرار الاتصال السريع (داخل بطاقة المعلومات) */
.info-card .quick-actions .qa-solid,
.info-card .quick-actions .qa-wa{
  border-radius:var(--btnRadius);
  font-weight:800;
  padding:14px;
  line-height:1.1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}

/* ألوانهم */
.info-card .quick-actions .qa-solid{
  background:var(--green);
  color:#fff;
  border-color:var(--green);
  box-shadow:0 2px 8px rgba(45,106,79,.18);
}
.info-card .quick-actions .qa-wa{
  background:#25D366;
  color:#0b3c20;
  border-color:#1fb558;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

/* تعطيل تغيّر اللون عند التحويم — أزرار الاتصال السريع */
.info-card .quick-actions .qa-solid:hover,
.info-card .quick-actions .qa-wa:hover{
  background:inherit !important;
  color:inherit !important;
  border-color:inherit !important;
  transform:translateY(-1px);
  box-shadow:0 3px 12px rgba(0,0,0,.08);
}

/* فوكس واضح */
.info-card .quick-actions .qa-solid:focus-visible,
.info-card .quick-actions .qa-wa:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(45,106,79,.18);
}

/* ملاحظة مهمة:
   لا يوجد أي قواعد هنا لـ .btn-nav أو [class*="btn-"] عام،
   لذلك يبقى الهيدر كما هو بالضبط دون تغيير الشكل البيضاوي. */


/* === AUTO-FIX: contact-form-direct-styles === */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 600px;
  margin: 50px auto;
}
.contact-form input,
.contact-form textarea {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.contact-form .btn {
  align-self: flex-start;
}
/* ========= Quick Actions (واتساب/اتصال) ========= */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;      /* نفس عرض بوكسات النقاط */
  gap: 10px;
  margin-top: 12px;
}

.quick-actions .btn {
  width: 100%;
  min-height: 56px;                    /* ارتفاع مريح مثل البوكسات */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: 800;
  border: 1px solid var(--line);
  box-shadow: 0 4px 10px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* واتساب */
.quick-actions .qa-wa {
  background: rgba(37, 211, 102, 0.12);      /* أخضر واتساب خفيف */
  color: #1b8f4d;
  border-color: rgba(27, 143, 77, .25);
}
.quick-actions .qa-wa:hover {
  background: rgba(37, 211, 102, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* اتصال الآن (أخضر أساسي للموقع) */
.quick-actions .qa-solid {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.quick-actions .qa-solid:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(45,106,79,.25);
}

/* موبايل: رصّهم تحت بعض */
@media (max-width: 580px) {
  .quick-actions { grid-template-columns: 1fr; }
}