/* ═════════ تواصل معنا V3 — لوحة معلومات + نموذج مراسلة ═════════ */

.h2-body .hv3-contact{
    padding:64px 0 44px;
    background:var(--surface);
}
.h2-body .hv3-contact .sec-head{
    margin-bottom:34px; text-align:center;
}
.h2-body .hv3-contact .sec-head .eyebrow .ti{
    font-size:14px; margin-inline-end:4px;
}

.hv3c-grid{
    display:grid; gap:20px;
    grid-template-columns:5fr 7fr;
    max-width:1120px; margin-inline:auto;
    align-items:stretch;
}
@media (max-width: 900px){
    .hv3c-grid{ grid-template-columns:1fr; }
}

/* ═════ لوحة الهوية (يمين) ═════ */
.hv3c-panel{
    position:relative; overflow:hidden;
    padding:32px 28px;
    border-radius:22px;
    background:linear-gradient(135deg,#0F2B29 0%,#1F4340 55%,#2D5C57 100%);
    color:#fff;
    box-shadow:0 20px 50px rgba(15,43,41,.28);
}
.hv3c-panel-head{
    display:flex; align-items:center; gap:12px;
    margin-bottom:16px; position:relative; z-index:2;
}
.hv3c-panel-mark{
    width:48px; height:48px; border-radius:14px;
    display:grid; place-items:center; flex-shrink:0;
    background:linear-gradient(135deg,#D46E2A,#F59E0B);
    color:#fff; font-size:22px;
    box-shadow:0 8px 22px rgba(212,110,42,.35);
}
.hv3c-panel-brand{ font-weight:800; font-size:1.02rem; }
.hv3c-panel-tag{ font-size:.78rem; opacity:.72; margin-top:2px; }

.hv3c-panel-lead{
    font-size:.9rem; line-height:1.75; opacity:.85;
    margin:0 0 22px; position:relative; z-index:2;
}

.hv3c-list{
    list-style:none; padding:0; margin:0 0 22px;
    display:grid; gap:10px; position:relative; z-index:2;
}
.hv3c-list li,
.hv3c-list a{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; border-radius:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:#fff; text-decoration:none;
    font-size:.88rem; font-weight:500;
    transition:background .15s, border-color .15s, transform .15s;
}
.hv3c-list a:hover{
    background:rgba(255,255,255,.10);
    border-color:rgba(245,158,11,.35);
    transform:translateY(-1px);
}
.hv3c-list-ico{
    width:32px; height:32px; border-radius:10px;
    display:grid; place-items:center; flex-shrink:0;
    background:rgba(245,158,11,.18);
    color:#F59E0B;
    font-size:16px;
}

.hv3c-actions{
    display:flex; gap:10px; flex-wrap:wrap;
    position:relative; z-index:2;
}
.hv3c-btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 20px; border-radius:999px;
    font-weight:700; font-size:.88rem;
    border:0; cursor:pointer;
    transition:transform .15s, box-shadow .15s, background .15s;
}
.hv3c-btn:hover{ transform:translateY(-1px); }

/* ⚠️ نتجاوز color من Vuexy/.btn عبر !important — وإلا يعود لون النصّ
   لخيّار الواجهة (بنفسجيّ خافت) على الخلفيّة الداكنة. */
.hv3c-btn--wa{
    background:linear-gradient(135deg,#25D366,#128C7E) !important;
    color:#fff !important;
    box-shadow:0 10px 24px rgba(37,211,102,.30);
}
.hv3c-btn--wa:hover,
.hv3c-btn--wa:focus{
    color:#fff !important;
    box-shadow:0 14px 30px rgba(37,211,102,.42);
}
.hv3c-btn--tel{
    background:transparent !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.28) !important;
}
.hv3c-btn--tel:hover,
.hv3c-btn--tel:focus{
    background:rgba(255,255,255,.10) !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.38) !important;
}
/* الأيقونات كذلك ترث اللون الصحيح */
.hv3c-btn--wa .ti,
.hv3c-btn--tel .ti{ color:#fff !important; }

/* زخارف زجاجيّة */
.hv3c-decor{ position:absolute; border-radius:50%; pointer-events:none; z-index:1; }
.hv3c-decor--a{
    width:180px; height:180px; top:-40px; inset-inline-end:-60px;
    background:radial-gradient(circle,rgba(245,158,11,.32),transparent 65%);
}
.hv3c-decor--b{
    width:220px; height:220px; bottom:-70px; inset-inline-start:-70px;
    background:radial-gradient(circle,rgba(212,110,42,.22),transparent 65%);
}

/* ═════ نموذج المراسلة (يسار) ═════ */
.hv3c-form{
    padding:32px 28px;
    border-radius:22px;
    background:#fff;
    border:1px solid rgba(15,23,42,.06);
    box-shadow:0 20px 50px rgba(15,23,42,.06);
}
html.dark-style .hv3c-form{
    background:#0F172A; border-color:rgba(255,255,255,.06);
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.hv3c-form-head{ margin-bottom:22px; }
.hv3c-form-head h3{
    margin:0 0 6px; font-size:1.15rem; font-weight:800; color:#0F172A;
}
.hv3c-form-head p{
    margin:0; font-size:.85rem; color:#64748B;
}
html.dark-style .hv3c-form-head h3{ color:#F1F5F9; }
html.dark-style .hv3c-form-head p{ color:#94A3B8; }

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

.hv3c-field{ display:flex; flex-direction:column; gap:6px; }
.hv3c-field > span{
    display:inline-flex; align-items:center; gap:6px;
    font-size:.82rem; font-weight:600; color:#334155;
}
.hv3c-field > span em{ color:#DC2626; font-style:normal; font-weight:700; margin-inline-start:2px; }
.hv3c-field > span .ti{ font-size:14px; color:#94A3B8; }
html.dark-style .hv3c-field > span{ color:#CBD5E1; }
html.dark-style .hv3c-field > span .ti{ color:#64748B; }

.hv3c-field input,
.hv3c-field textarea{
    width:100%; padding:11px 14px;
    background:#F8FAFC; color:#0F172A;
    border:1px solid #E2E8F0; border-radius:12px;
    font-size:.9rem; line-height:1.55;
    transition:border-color .15s, box-shadow .15s;
}
.hv3c-field textarea{ resize:vertical; min-height:120px; }
.hv3c-field input:focus,
.hv3c-field textarea:focus{
    outline:0; border-color:#D46E2A;
    box-shadow:0 0 0 3px rgba(212,110,42,.15);
}
.hv3c-field input.is-invalid,
.hv3c-field textarea.is-invalid{
    border-color:#DC2626;
    box-shadow:0 0 0 3px rgba(220,38,38,.12);
}
html.dark-style .hv3c-field input,
html.dark-style .hv3c-field textarea{
    background:rgba(255,255,255,.04); color:#F1F5F9; border-color:rgba(255,255,255,.08);
}

.hv3c-submit-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; flex-wrap:wrap; margin-top:4px;
}
/* ⚠️ نفس تجاوز color من Vuexy/.btn الذي طُبِّق على أزرار الواتساب/الاتصال */
.hv3c-btn--send{
    background:linear-gradient(135deg,#D46E2A,#F59E0B) !important;
    color:#fff !important;
    box-shadow:0 10px 24px rgba(212,110,42,.32);
}
.hv3c-btn--send:hover,
.hv3c-btn--send:focus{
    color:#fff !important;
    box-shadow:0 14px 30px rgba(212,110,42,.42);
}
.hv3c-btn--send:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.hv3c-btn--send .ti,
.hv3c-btn--send span{ color:#fff !important; }

.hv3c-note{
    display:inline-flex; align-items:center; gap:6px;
    font-size:.78rem; color:#64748B;
}
.hv3c-note .ti{ color:#16A34A; }
html.dark-style .hv3c-note{ color:#94A3B8; }

.hv3c-alert{
    display:flex; align-items:center; gap:8px;
    padding:11px 14px; border-radius:12px;
    font-size:.85rem; font-weight:600;
}
.hv3c-alert.is-success{ background:#E7F6EC; color:#16A34A; }
.hv3c-alert.is-error  { background:#FEE2E2; color:#DC2626; }
html.dark-style .hv3c-alert.is-success{ background:rgba(22,163,74,.18); }
html.dark-style .hv3c-alert.is-error  { background:rgba(220,38,38,.18); }

/* دوّار انتظار داخل زر الإرسال */
.hv3c-btn--send .ti-loader-2.spin{ animation:hv3cSpin .8s linear infinite; }
@keyframes hv3cSpin{ to{ transform:rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════
   §تقريب إلى الأصل — قيم قسم «تواصل معنا» في النموذج المحفوظ
   ------------------------------------------------------------------
   القيم منقولة حرفيًّا من كتلة «تواصل معنا» في
   الصفحة الأصليّة: نسب الشبكة، تدرّج اللوحة الداكنة، الشفق الدوّار،
   شبكة النقاط، مقاسات بطاقات القنوات، ولوح النموذج وحقوله.

   البنية لم تُبدَّل — الأصناف ‎hv3c-*‎ كما هي والنموذج ما يزال يرسل إلى
   ‎contact.store.home‎ بحقوله نفسها. هذه طبقة كسوة فوق ما هو قائم،
   لذلك ما لا يوجد في الأصل (زرّا واتساب/اتصال) يبقى كما هو.

   التوكنات (‎--pine-700‎ ‎--r-xl‎ ‎--brand-300‎ ‎--surface-2‎ …) متاحة
   لأن ‎home-v2.css‎ يُحمَّل على الرئيسية ويعرّفها في ‎:root‎.
   ══════════════════════════════════════════════════════════════════ */

/* نسبة الشبكة والفجوة كما في ‎.contact-grid‎ */
.hv3c-grid{
    grid-template-columns:.85fr 1.15fr;
    gap:24px;
}
@media (max-width: 900px){
    .hv3c-grid{ grid-template-columns:1fr; }
}

/* ═ اللوحة الداكنة — تدرّج ‎.contact-info‎ وحوافّه ═ */
.hv3c-panel{
    background:linear-gradient(164deg,#1A2725,var(--pine-700,#263A38) 48%,#2C403D);
    border-radius:var(--r-xl,36px);
    padding:30px 26px;
    isolation:isolate;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),
               0 40px 80px -34px rgba(20,34,32,.55);
}
/* الشفق الدوّار وشبكة النقاط — في الأصل ‎::before/::after‎، وهنا نستعمل
   عنصرَي ‎.hv3c-decor‎ الموجودين أصلًا في الترميز بدل إضافة عناصر. */
.hv3c-panel .hv3c-decor{
    border-radius:0; inset:0; width:auto; height:auto;
    background:none; filter:none; opacity:1;
}
.hv3c-panel .hv3c-decor--a{
    position:absolute; inset:-45%; z-index:-2; pointer-events:none;
    background:conic-gradient(from 0deg,
        rgba(201,121,36,.32),rgba(78,109,106,.28),rgba(201,121,36,.12),
        rgba(34,50,47,0) 62%,rgba(227,178,126,.24) 84%,rgba(201,121,36,.32));
    filter:blur(64px);
    animation:hv3cAurora 30s linear infinite;
}
.hv3c-panel .hv3c-decor--b{
    position:absolute; inset:0; z-index:-1; pointer-events:none;
    background-image:radial-gradient(circle,rgba(255,255,255,.085) 1px,transparent 1px);
    background-size:22px 22px;
    -webkit-mask-image:radial-gradient(80% 65% at 85% 0%,#000,transparent);
            mask-image:radial-gradient(80% 65% at 85% 0%,#000,transparent);
}
@keyframes hv3cAurora{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
    .hv3c-panel .hv3c-decor--a{ animation:none; }
}

/* عنوان اللوحة ومقدّمتها — مقاسات ‎.contact-info h3/p‎ */
.hv3c-panel-brand{ font-size:24px; line-height:1.35; }
.hv3c-panel-tag{ font-size:13px; opacity:.6; }
.hv3c-panel-lead{
    color:rgba(255,255,255,.72); font-size:15px;
    margin-block-end:22px; max-width:38ch;
}

/* ═ بطاقات القنوات — ‎.ci-list‎ ═ */
.hv3c-list{ gap:12px; margin-block-end:22px; }
.hv3c-list li{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.09);
    border-radius:15px;
    padding:12px 14px;
    gap:12px;
    transition:background .3s var(--ease,ease),border-color .3s var(--ease,ease),transform .3s var(--ease,ease);
}
.hv3c-list li:hover{
    background:rgba(255,255,255,.1);
    border-color:rgba(227,178,126,.3);
    transform:translateX(-4px);
}
.hv3c-list-ico{
    width:40px; height:40px; border-radius:13px;
    background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.1);
    color:var(--brand-300,#E3B27E);
    transition:.3s var(--ease,ease);
}
.hv3c-list li:hover .hv3c-list-ico{
    background:var(--brand,#C97924); border-color:transparent; color:#fff;
}
.hv3c-list-ico .ti{ font-size:19px; }
/* التسمية فوق القيمة — ‎.ci-list b‎ */
/* المحدّد مضاعَف (‎.hv3c-list .hv3c-list-body‎) ليعادل ‎.hv3c-list a‎ الذي
   يفرض على الرابط ‎display:flex‎ وخلفيةً وحدودًا وحشوًا — فينشأ صندوق داخل
   البطاقة وتجلس التسمية بجوار القيمة بدل أن تعلوها. التعادل يحسمه الورود. */
.hv3c-list .hv3c-list-body{
    flex:1; min-width:0; font-size:15px;
    display:block; color:#fff; text-decoration:none;
    background:none; border:0; padding:0; border-radius:0;
}
.hv3c-list .hv3c-list-body b{
    display:block; font-family:var(--f-display,inherit);
    font-size:12px; opacity:.6; font-weight:600; line-height:1.5;
}
.hv3c-list a.hv3c-list-body:hover{
    background:none; transform:none; border-color:transparent;
}

/* ═ لوح النموذج وحقوله — ‎.contact-form‎ و‎.field‎ ═ */
.hv3c-form{
    background:var(--paper,#fff);
    border:1px solid var(--line,#E8EAF0);
    border-radius:var(--r-lg,26px);
    padding:38px 32px;
    box-shadow:var(--sh-1,0 2px 10px rgba(56,81,79,.05));
}
.hv3c-field > span{
    font-family:var(--f-display,inherit); font-weight:700; font-size:14.5px;
    margin-block-end:7px; color:var(--ink-2,#454B58);
}
.hv3c-field input,
.hv3c-field textarea,
.hv3c-field select{
    padding:13px 16px; border-radius:13px;
    border:1.5px solid var(--line,#E8EAF0);
    background:var(--surface-2,#FBFBFE);
    font-family:var(--f-body,inherit); font-size:16px;
    color:var(--ink,#15181F);
    transition:.28s var(--ease,ease);
}
.hv3c-field textarea{ min-height:130px; resize:vertical; }
.hv3c-row--2{ gap:16px; }

@media (max-width: 560px){
    .hv3c-panel{ padding:24px 19px; }
    .hv3c-panel-brand{ font-size:21px; }
    .hv3c-list li{ padding:11px 12px; gap:10px; }
    .hv3c-list-ico{ width:36px; height:36px; border-radius:11px; }
    .hv3c-list-body{ font-size:14px; }
    .hv3c-form{ padding:26px 18px; }
}

/* ══════════════════════════════════════════════════════════════════
   §تصغير — كسوة مقاسات مضغوطة لعناصر القسم
   ------------------------------------------------------------------
   القسم كان يتجاوز ١٠٠٠px ارتفاعاً على سطح المكتب لأن مقاساته منقولة
   من الصفحة الأصليّة حيث كان يشغل شاشةً كاملة. هنا نُنقص الحشوات
   وأحجام الخطّ ونصف الأقطار بنسبة ~٢٥٪ بلا مسّ البنية أو الألوان.

   ⚠️ حجم خطّ الحقول يبقى 16px على الجوّال (≤560px) — أي أقلّ من ذلك
   يجعل iOS يُكبّر الصفحة تلقائياً عند التركيز على الحقل.
   ══════════════════════════════════════════════════════════════════ */

/* ═ إطار القسم وترويسته ═ */
.h2-body .hv3-contact{ padding:44px 0 32px; }
.h2-body .hv3-contact .sec-head{ margin-bottom:22px; }
.h2-body .hv3-contact .sec-head h2{ font-size:34px; margin-bottom:10px; }
.h2-body .hv3-contact .sec-head p{ font-size:15.5px; }

.hv3c-grid{ gap:18px; max-width:1040px; }

/* ═ اللوحة الداكنة ═ */
.hv3c-panel{ padding:24px 21px; border-radius:26px; }
.hv3c-panel-head{ gap:10px; margin-bottom:13px; }
.hv3c-panel-mark{ width:40px; height:40px; border-radius:12px; font-size:18px; }
.hv3c-panel-brand{ font-size:19px; }
.hv3c-panel-tag{ font-size:12px; }
.hv3c-panel-lead{ font-size:13.5px; line-height:1.65; margin-block-end:16px; }

/* ═ بطاقات القنوات ═ */
.hv3c-list{ gap:8px; margin-block-end:16px; }
.hv3c-list li{ padding:9px 11px; gap:10px; border-radius:12px; }
.hv3c-list-ico{ width:33px; height:33px; border-radius:10px; }
.hv3c-list-ico .ti{ font-size:16px; }
.hv3c-list .hv3c-list-body{ font-size:13.5px; }
.hv3c-list .hv3c-list-body b{ font-size:11px; }

/* ═ الأزرار (واتساب/اتصال/إرسال) ═
   المحدّد مُثقَّل بـ‎.h2-body‎ لأن ‎home-v2.css‎ يفرض ‎.h2-body .btn‎
   بحشوة 16/32 وخطّ 17px — وهي تتفوّق على ‎.hv3c-btn‎ المفردة. */
.hv3c-actions{ gap:8px; }
.h2-body .hv3c-btn{ padding:9px 16px; font-size:.84rem; gap:6px; }
.h2-body .hv3c-btn .ti{ font-size:16px; }

/* ═ لوح النموذج وحقوله ═ */
.hv3c-form{ padding:26px 24px; border-radius:20px; }
.hv3c-form-head{ margin-bottom:15px; }
.hv3c-form-head h3{ font-size:16px; margin-bottom:4px; }
.hv3c-form-head p{ font-size:13px; }
.hv3c-form-body{ gap:10px; }
.hv3c-row{ gap:10px; }
.hv3c-row--2{ gap:12px; }
.hv3c-field{ gap:4px; }
.hv3c-field > span{ font-size:13px; margin-block-end:4px; }
.hv3c-field > span .ti{ font-size:13px; }
.hv3c-field input,
.hv3c-field textarea,
.hv3c-field select{ padding:10px 13px; font-size:15px; border-radius:11px; }
.hv3c-field textarea{ min-height:96px; }
.hv3c-submit-row{ gap:10px; margin-top:2px; }
.hv3c-note{ font-size:.74rem; }
.hv3c-alert{ padding:9px 12px; font-size:.8rem; }

@media (max-width: 560px){
    .h2-body .hv3-contact{ padding:32px 0 24px; }
    .h2-body .hv3-contact .sec-head h2{ font-size:26px; }
    .hv3c-panel{ padding:20px 16px; }
    .hv3c-panel-brand{ font-size:18px; }
    .hv3c-form{ padding:20px 16px; }
    /* لا نُنقص عن 16px هنا — وإلا كبّر iOS الصفحة عند التركيز */
    .hv3c-field input,
    .hv3c-field textarea,
    .hv3c-field select{ font-size:16px; }
}