/* ══════════════════════════════════════════════════════════════════
   صفحة «اتصال بنا» — كسوة خاصة بالصفحة وحدها (site/pages/contact)
   ─ البنية مستوحاة من قسم التواصل في رئيسية cmp: لوحة داكنة بالقنوات
     بجوار بطاقة بيضاء للنموذج.
   ─ كل القيم من توكنات site-home-sixth.css — لا لون خارج المنظومة
     الا الاخضر الصلب لزر واتساب، فهو لون قناة لا لون واجهة.
   ─ قاعدة النظام: الوان صلبة، لا تدرجات.
   ─ كل الاصناف بادئتها h6c- فلا تسرب لاي صفحة اخرى.
   ─ الخصائص منطقية (inline/block) لان الصفحة RTL.
   ══════════════════════════════════════════════════════════════════ */

/* ══════ اطار القسم والترويسة ══════ */
/* ايقاع الترويسة هو ايقاع الصفحات النظامية نفسه (h6-lgl-head): العنوان بالمدى
   نفسه والوصف بالقياس نفسه والفراغ تحتهما 34px — فيقرا /contact-us موقعا واحدا
   مع /page/privacy-policy. الفرق وحده التوسيط، لان هذه الصفحة بلا عمود جانبي. */
.h6c-sec{background:var(--surface);}
.h6c-head{max-width:680px;margin-inline:auto;margin-block-end:34px;text-align:center;}
.h6c-head h1{font-size:clamp(29px,4vw,44px);margin-block:16px 12px;}
/* العنوان وحده بلا شارة ولا وصف: لا هامش يتيم فوقه ولا تحته */
.h6c-head h1:only-child{margin-block:0;}
.h6c-head p{color:var(--ink-2);font-size:17.5px;}

/* ══════ الشبكة: لوحة القنوات + بطاقة النموذج ══════ */
.h6c-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:20px;align-items:start;}
@media(max-width:900px){.h6c-grid{grid-template-columns:1fr;}}

/* ══════ لوحة القنوات الداكنة ══════ */
.h6c-panel{
  position:relative;overflow:hidden;
  background:var(--night-surface);color:#fff;
  border:1px solid rgba(255,255,255,.10);border-radius:var(--r-xl);
  padding:clamp(22px,3vw,32px);box-shadow:var(--sh-2);
}
/* هالة صلبة خافتة بدل التدرجات — زخرفة لا تحمل معنى */
.h6c-glow{
  position:absolute;inset-block-start:-120px;inset-inline-end:-90px;
  width:320px;height:320px;border-radius:50%;
  background:var(--tq-accent);opacity:.13;filter:blur(70px);
  pointer-events:none;z-index:0;
}
.h6c-panel-head{display:flex;align-items:center;gap:12px;margin-block-end:14px;position:relative;z-index:1;}
.h6c-mark{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--tq-accent);color:var(--night);font-size:22px;
}
.h6c-panel-title{font-weight:800;font-size:19px;line-height:1.4;}
.h6c-panel-tag{font-size:12.5px;color:rgba(255,255,255,.72);}
/* ⚠️ فخ التصفير العام: «.h6 p» و«.h6 ul,.h6 ol» في site-home-sixth.css تخصيصهما
   (0,1,1) فيغلبان اي صنف مفرد (0,1,0) مهما تاخر ملفه في الترتيب. فكل هامش على
   <p> او <ul> في هذه الصفحة يكتب مقرونا بحاضنه ليصير (0,2,0) — والا سقط الهامش
   صامتا والتصق العنصر بجاره. يسري على الاربعة: lead وlist وfoot وtips. */
.h6c-panel .h6c-panel-lead{
  position:relative;z-index:1;max-width:40ch;
  color:rgba(255,255,255,.88);font-size:14.5px;line-height:1.7;
  margin-block-end:16px;
}

/* بطاقات القنوات — ايقاع مضغوط: الصف بطاقة تواصل لا كتلة. الارتفاع الناتج
   نحو 56px، فوق حد اللمس 44px، واللوحة كلها تظهر بلا تمرير في الشاشة الضيقة. */
.h6c-panel .h6c-list{display:grid;gap:8px;margin-block-end:16px;position:relative;z-index:1;}
.h6c-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  color:#fff;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
/* لا ينزل هدف اللمس عن 44px، كما في .h6-btn سواء بسواء */
@media (hover:none){.h6c-item{min-height:44px;}}
a.h6c-item:hover{background:rgba(255,255,255,.12);border-color:rgba(45,212,191,.42);transform:translateY(-2px);}
.h6c-ico{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:grid;place-items:center;
  background:rgba(45,212,191,.16);border:1px solid rgba(45,212,191,.26);
  color:var(--tq-accent);font-size:16px;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
a.h6c-item:hover .h6c-ico{background:var(--tq-accent);border-color:var(--tq-accent);color:var(--night);}
.h6c-item-body{flex:1;min-width:0;font-size:14.5px;font-weight:700;line-height:1.45;overflow-wrap:anywhere;}
.h6c-item-body b{display:block;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.66);line-height:1.5;}
.h6c-val{display:block;}
/* الرقم يقرا رقما: خانات متساوية العرض وفرجة خفيفة بينها */
.h6c-num{font-variant-numeric:tabular-nums;letter-spacing:.04em;}

/* حين تنهار الشبكة الى عمود واحد تصير اللوحة عريضة والصف يحتل سطرا كاملا بلا
   حاجة. فيصطف صفان معا فتقصر اللوحة الى نصف ارتفاعها وتظهر كاملة في الشاشة.
   الصف الفرد الاخير يمد على العرض كله فلا يترك فجوة الى جانبه. */
@media(min-width:601px) and (max-width:900px){
  .h6c-list{grid-template-columns:1fr 1fr;}
  .h6c-list > li:last-child:nth-child(odd){grid-column:1 / -1;}
}

/* ازرار القنوات */
.h6c-actions{display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:1;}
/* الاخضر الصلب لون واتساب نفسه — القناة تعرف بلونها، ولا يدخل المنظومة */
.h6c-wa{background:#1FA855;color:#fff;border-color:#1FA855;}
.h6c-wa:hover{background:#188844;color:#fff;border-color:#188844;transform:translateY(-2px);box-shadow:0 12px 24px rgba(31,168,85,.34);}
.h6c-panel .h6c-panel-foot{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:7px;
  margin-block-start:14px;padding-block-start:13px;
  border-block-start:1px solid rgba(255,255,255,.12);
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.82);font-weight:600;
}
.h6c-panel-foot i{font-size:16px;color:var(--tq-accent);}

/* الاطار الفيروزي الغامق يضيع على اللوحة الداكنة — النغمة الفاتحة تظهر عليها.
   ترتيب الملفات يحسم التعادل مع «.h6 :focus-visible»: هذا الملف يحمل بعده. */
.h6c-panel :focus-visible{outline-color:var(--tq-accent);}
/* «.h6 :focus-visible» العامة تفرض زاوية 8px على العنصر نفسه وقت التركيز، فتنكمش
   زوايا الصف والزر امام المفتاح. تعاد هنا كل زاوية الى قياسها — في كل ازرار
   الصفحة لا في اللوحة وحدها، فلا يختلف زران على شاشة واحدة. */
.h6c-item:focus-visible{border-radius:var(--r-sm);}
.h6c-sec .h6-btn:focus-visible{border-radius:12px;}

/* ══════ بطاقة النموذج ══════ */
.h6c-card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:clamp(22px,3vw,34px);
}
.h6c-card-head{margin-block-end:18px;}
.h6c-card-head h2{font-size:21px;margin-block-end:6px;}
.h6c-card-head p{color:var(--ink-3);font-size:14.5px;}

.h6c-form{display:flex;flex-direction:column;gap:14px;}
.h6c-row{display:grid;gap:14px;}
.h6c-row-2{grid-template-columns:1fr 1fr;}
@media(max-width:560px){.h6c-row-2{grid-template-columns:1fr;}}

.h6c-field{display:flex;flex-direction:column;gap:6px;}
.h6c-field > span{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink-2);}
.h6c-field > span > i{font-size:14px;color:var(--tq-dark);}
.h6c-field > span em{font-style:normal;font-weight:800;color:#C62828;}
/* «(خياري)» بجانب تسمية الحقل: خبر هادئ لا تحذير — اخف وزنا واصغر من
   التسمية، فلا يزاحم النجمة الحمراء في الحقول المطلوبة. */
.h6c-field > span small{font-size:11.5px;font-weight:600;color:var(--ink-3);}

.h6c-field input,
.h6c-field textarea{
  width:100%;font-family:inherit;
  /* لا ينزل عن 16px: اقل من ذلك يكبر iOS الصفحة عند التركيز على الحقل */
  font-size:16px;line-height:1.7;color:var(--ink);
  background:var(--surface-2);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:11px 14px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.h6c-field textarea{min-height:132px;resize:vertical;}
.h6c-field input::placeholder,
.h6c-field textarea::placeholder{color:#9BB2AF;}
.h6c-field input:focus,
.h6c-field textarea:focus{outline:0;background:var(--paper);border-color:var(--tq);box-shadow:0 0 0 3px rgba(28,163,144,.16);}
/* ‎outline:0‎ اعلاه يغلب «.h6 :focus-visible» العامة (تخصيصه اعلى)، فيبقى قادم
   المفتاح بلا اطار حقيقي — حلقة الظل وحدها. يعاد الاطار هنا لقادم المفتاح
   وحده، بزاوية الحقل نفسها لا بزاوية 8px، وتسقط الحلقة فلا تتضاعف الحدود. */
.h6c-field input:focus-visible,
.h6c-field textarea:focus-visible{
  outline:2.5px solid var(--tq);outline-offset:2px;
  border-radius:var(--r-sm);box-shadow:none;
}
.h6c-field input.is-bad,
.h6c-field textarea.is-bad{border-color:#C62828;box-shadow:0 0 0 3px rgba(198,40,40,.11);}
.h6c-err{font-size:12.5px;font-weight:700;color:#C62828;line-height:1.6;}

/* مصيدة الغافلين: مخفية بصريا بلا display:none حتى يملاها الالي */
.h6c-hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ══════ سطر الارسال ══════ */
.h6c-send-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-block-start:4px;}
.h6c-send{min-width:168px;}
.h6c-send[disabled]{opacity:.62;cursor:progress;transform:none;box-shadow:none;}
.h6c-spin{display:inline-block;animation:h6cSpin .8s linear infinite;}
@keyframes h6cSpin{to{transform:rotate(360deg);}}

/* ══════ بطاقات التنبيه ══════ */
.h6c-alert{
  display:flex;align-items:flex-start;gap:9px;
  padding:12px 14px;margin-block-end:16px;
  border:1px solid transparent;border-radius:var(--r-sm);
  font-size:14px;font-weight:700;line-height:1.75;
}
/* بلا هذا السطر يفوز display:flex على [hidden] الافتراضي فتظهر البطاقة دائما */
.h6c-alert[hidden]{display:none;}
.h6c-alert i{font-size:18px;flex-shrink:0;margin-block-start:2px;}
.h6c-alert ul{margin-block-start:6px;display:grid;gap:3px;font-size:13px;font-weight:600;}
.h6c-alert li{position:relative;padding-inline-start:14px;}
.h6c-alert li::before{content:'';position:absolute;inset-inline-start:0;inset-block-start:.62em;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;}
.h6c-alert-ok{background:var(--tq-tint);border-color:rgba(28,163,144,.3);color:var(--tq-ink);}
.h6c-alert-bad{background:#FDECEC;border-color:rgba(198,40,40,.24);color:#96211E;}

/* ══════ الجوال ══════ */
@media(max-width:560px){
  .h6c-send-row{flex-direction:column;align-items:stretch;}
  .h6c-send{width:100%;}
}

/* ══════ الطباعة ══════ */
@media print{
  .h6c-panel,.h6c-send-row{display:none !important;}
  .h6c-card{border:0;box-shadow:none;padding:0;}
}