/* ============================================================
   صفحة تواصل معنا (contact.php) — توحيد مع باقي الصفحات
   • الهيرو داكن دائماً بالشبكة (كل الثيمات) — يطابق pl-hero.
   • كل ما تحت الهيرو فاتح في كل الثيمات (بطاقات/نموذج/حقول).
   • يُحمَّل آخر ملف بعد pages.css/themes.css ليطغى بثقة.
   ============================================================ */

/* ============================================================
   ستايل أساسي نظيف لفورم التواصل (كان مخبّصاً: حقول بلا ستايل)
   ============================================================ */
.contact-form-box .field{margin-bottom:18px}
.contact-form-box .field label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:9px}
.contact-form-box .field input,
.contact-form-box .field textarea{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--paper,#fff);
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  border-radius:12px;padding:14px 16px;
  transition:border-color .25s,box-shadow .25s,background .25s}
.contact-form-box .field textarea{resize:vertical;min-height:120px;line-height:1.7}
.contact-form-box .field input::placeholder,
.contact-form-box .field textarea::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.contact-form-box .field input:focus,
.contact-form-box .field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.contact-form-box .btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--accent);color:#fff;font-family:inherit;font-weight:700;font-size:15.5px;
  padding:15px 28px;border:0;border-radius:12px;cursor:pointer;margin-top:6px;
  box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 28%,transparent);
  transition:transform .25s,box-shadow .25s,filter .25s}
.contact-form-box .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px color-mix(in srgb,var(--accent) 40%,transparent);filter:brightness(1.05)}
.contact-form-box .btn-primary .arr{display:inline-flex;align-items:center}
.contact-form-box .btn-primary .arr svg{width:17px!important;height:17px!important;max-width:17px;flex:none;color:#fff;stroke:currentColor}
html[dir="rtl"] .contact-form-box .btn-primary .arr svg{transform:scaleX(-1)}

/* ===== الهيرو الداكن الموحّد (يطغى على تخصيص الثيمات في themes.css) ===== */
.page-hero.contact-page-custom{
  position:relative;overflow:hidden;
  padding:120px 0 80px!important;
  text-align:center;
  background:var(--ink)!important;
}
/* إلغاء طبقات الثيمات القديمة (صورة v2 / تدرّجات) */
.theme-v1 .page-hero.contact-page-custom,
.theme-v2 .page-hero.contact-page-custom,
.theme-v3 .page-hero.contact-page-custom{background:var(--ink)!important}
.page-hero.contact-page-custom::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px);
  background-size:74px 74px;opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000,transparent);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000,transparent);
  background-color:transparent!important;
}
.page-hero.contact-page-custom::after{
  content:"";position:absolute;width:540px;height:540px;border-radius:50%;
  top:-200px;left:50%;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%)!important;
  background-image:none!important;opacity:1!important;inset:auto auto auto 50%!important;
}
.page-hero.contact-page-custom .container{position:relative;z-index:2;text-align:center}
.page-hero.contact-page-custom .page-hero-eyebrow{color:var(--accent)!important;border:0!important;background:transparent!important}
.page-hero.contact-page-custom .page-hero-title{color:#fff!important;text-align:center;margin-inline:auto}
.page-hero.contact-page-custom .page-hero-lead{color:rgba(255,255,255,.78)!important;margin-inline:auto;text-align:center}

/* ===== الصفحة فاتحة في كل الثيمات (ترث أبيض body) ===== */
.theme-v2 .contact-page,.theme-v3 .contact-page{background:transparent}

/* بطاقات التواصل — فاتحة */
.theme-v2 .contact-method,.theme-v3 .contact-method{
  background:var(--paper,#fff);
  border-color:color-mix(in srgb,var(--ink) 10%,transparent)}
.theme-v2 .contact-method:not(.static):hover,.theme-v3 .contact-method:not(.static):hover{border-color:var(--accent)}
.theme-v2 .contact-method .ico,.theme-v3 .contact-method .ico{background:var(--cream,#f6f3ec);color:var(--accent)}
.theme-v2 .contact-method.wa .ico,.theme-v3 .contact-method.wa .ico{background:rgba(37,211,102,.12);color:#25d366}
.theme-v2 .contact-method .txt strong,.theme-v3 .contact-method .txt strong{color:var(--ink)}
.theme-v2 .contact-method .txt span,.theme-v3 .contact-method .txt span{color:var(--muted)}

/* النموذج — فاتح */
.theme-v2 .contact-form-box,.theme-v3 .contact-form-box{
  background:var(--cream,#f6f3ec);
  border-color:color-mix(in srgb,var(--ink) 10%,transparent)}
.theme-v2 .contact-form-box h3,.theme-v3 .contact-form-box h3{color:var(--ink)}
.theme-v2 .contact-page .field input,.theme-v3 .contact-page .field input,
.theme-v2 .contact-page .field textarea,.theme-v3 .contact-page .field textarea{
  background:var(--paper,#fff);
  border-color:color-mix(in srgb,var(--ink) 12%,transparent);
  color:var(--ink)}
.theme-v2 .contact-page .field label,.theme-v3 .contact-page .field label{color:var(--ink)}

/* الأزرار — لون الباقة */
.theme-v2 .contact-page .btn-primary,.theme-v3 .contact-page .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.theme-v2 .contact-map-btn,.theme-v3 .contact-map-btn{background:var(--accent);color:#fff}
.theme-v2 .contact-map-btn:hover,.theme-v3 .contact-map-btn:hover{filter:brightness(1.06)}

/* ===== موبايل ===== */
@media(max-width:860px){
  .page-hero.contact-page-custom{padding:90px 0 56px!important}
}