/* ===========================================================================
 * Jazeel — contact.php "علبة الشوكولاتة" layer
 * نفس طابع باقي الصفحات: خط جزيل، إطار ذهبي بارز، شوكولاتة وورق ذهب.
 * يُحمَّل بعد page-contact.css، ويصلح أيضًا: شارة الهيرو الممتدة بعرض الكرت،
 * وحالة النموذج التي كانت بلون واحد للنجاح والخطأ.
 * =========================================================================== */

@font-face{font-family:"TheSans Arabic";src:url("../../fonts/ArbFONTS-TheSansArabic-Light.woff2") format("woff2");font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:"TheSans Arabic";src:url("../../fonts/The-Sans-Plain.woff2") format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"TheSans Arabic";src:url("../../fonts/THESANSARABIC-BOLD.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --foil-hi:#fbf0d2;--foil:#dcb563;--foil-mid:#b98b36;--foil-lo:#7d5a1c;
  --choc-1:#4a2d17;--choc-2:#2e1a0c;--choc-3:#1b0e05;--choc-edge:#120902;
  --ivory:#fffaf1;
  --foil-grad:linear-gradient(160deg,var(--foil-hi) 0%,var(--foil) 30%,var(--foil-mid) 55%,var(--foil-hi) 78%,var(--foil) 100%);
  --brand-font:'TheSans Arabic','Tajawal',system-ui,sans-serif;
}
body,input,select,textarea,.btn{font-family:var(--brand-font)}
html[dir="ltr"] body,html[dir="ltr"] input,html[dir="ltr"] select,html[dir="ltr"] textarea,html[dir="ltr"] .btn{font-family:'Tajawal',system-ui,sans-serif}

/* ---------- الشارات ---------- */
.eyebrow{
  align-self:flex-start; /* كانت تمتد بعرض كرت الهيرو كله */
  width:fit-content;
  color:var(--foil-hi);
  background:linear-gradient(165deg,var(--choc-1),var(--choc-3));
  border:1px solid rgba(220,181,99,.45);
  box-shadow:0 3px 0 var(--choc-edge),inset 0 1px 0 rgba(255,230,190,.2);
}
.eyebrow i{color:var(--foil)}

/* ---------- الكروت: إطار ذهبي بارز ---------- */
.hero-copy,.card{
  border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--foil-grad) border-box;
  box-shadow:0 5px 0 #d4b270,0 6px 0 var(--foil-lo),0 26px 44px -24px rgba(60,30,10,.45);
}
.hero-copy{background:linear-gradient(160deg,#fff 0%,var(--ivory) 100%) padding-box,var(--foil-grad) border-box}
.hero-copy h1,.card-head h2{color:var(--choc-2)}
.hero-copy h1{font-weight:900}

/* صورة الهيرو داخل إطار علبة هدية */
.hero-media{
  border:0;
  box-shadow:
    0 0 0 2px rgba(255,250,241,.9),0 0 0 5px var(--foil),
    -1px 2px 0 5px var(--foil-mid),-2px 4px 0 5px #a67a2c,-3px 6px 0 5px #93691f,-4px 8px 0 5px var(--foil-lo),
    -12px 32px 50px -14px rgba(60,30,10,.42);
  margin:5px 5px 13px 13px;
}
html[dir="ltr"] .hero-media{
  box-shadow:
    0 0 0 2px rgba(255,250,241,.9),0 0 0 5px var(--foil),
    1px 2px 0 5px var(--foil-mid),2px 4px 0 5px #a67a2c,3px 6px 0 5px #93691f,4px 8px 0 5px var(--foil-lo),
    12px 32px 50px -14px rgba(60,30,10,.42);
  margin:5px 13px 13px 5px;
}
.hero-media picture{display:contents}
.hero-media::after{background:linear-gradient(180deg,rgba(27,14,5,0) 50%,rgba(27,14,5,.35))}

/* قنوات التواصل السريعة */
.chip{
  background:linear-gradient(180deg,#fff,var(--ivory));
  border:1px solid rgba(185,139,54,.35);
  box-shadow:0 3px 0 rgba(185,139,54,.4);
  transition:transform .15s ease,box-shadow .15s ease,border-color .2s;
}
.chip:hover{border-color:var(--foil-mid);box-shadow:0 5px 0 rgba(185,139,54,.45),0 14px 22px -14px rgba(60,30,10,.4)}
.chip:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(185,139,54,.4)}
.chip i{background:var(--foil-grad);color:var(--choc-3);box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 2px 0 var(--foil-lo)}
.chip .fa-whatsapp{background:linear-gradient(145deg,#3fe07f,#179a4a);color:#fff;box-shadow:0 2px 0 #0d6b32}
.chip-txt strong{color:var(--choc-2)}

/* ---------- النموذج ---------- */
label{color:var(--choc-1)}
input,select,textarea{
  background:#fbf6ee;border-color:rgba(185,139,54,.28);
  box-shadow:inset 0 2px 4px rgba(60,30,10,.07),inset 0 -1px 0 rgba(255,255,255,.9);
}
input:focus,select:focus,textarea:focus{
  background:#fff;border-color:var(--foil-mid);
  box-shadow:inset 0 2px 4px rgba(60,30,10,.05),0 0 0 3px rgba(220,181,99,.28);
}
[aria-invalid="true"]{border-color:#c0392b!important;box-shadow:0 0 0 3px rgba(192,57,43,.14)!important}

.btn-primary{
  color:var(--foil-hi);
  background:radial-gradient(120% 160% at 85% 0%,rgba(220,181,99,.22),transparent 55%),linear-gradient(165deg,var(--choc-1),var(--choc-3));
  box-shadow:0 5px 0 var(--choc-edge),0 18px 28px -14px rgba(29,16,7,.7),inset 0 1px 0 rgba(255,230,190,.2);
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn-primary i{color:var(--foil)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--choc-edge),0 22px 32px -14px rgba(29,16,7,.72),inset 0 1px 0 rgba(255,230,190,.2)}
.btn-primary:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--choc-edge)}
.btn-soft{
  background:linear-gradient(180deg,#fff,var(--ivory));color:var(--choc-1);
  border:1px solid rgba(185,139,54,.4);box-shadow:0 3px 0 rgba(185,139,54,.4);
}
.btn-soft i{color:var(--foil-mid)}
.btn-soft:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(185,139,54,.4)}

/* حالة الإرسال: لون لكل حالة بدل لون واحد */
.form-status{padding:0;border-radius:12px;transition:background .2s,padding .2s}
.form-status:empty{margin-top:0}
.form-status[data-status]{padding:10px 14px}
.form-status[data-status="error"]{background:rgba(192,57,43,.08);color:#9b2c21;border:1px solid rgba(192,57,43,.22)}
.form-status[data-status="success"]{background:rgba(22,163,74,.08);color:#166534;border:1px solid rgba(22,163,74,.25)}
.form-status[data-status="loading"]{background:rgba(185,139,54,.08);color:var(--foil-lo);border:1px solid rgba(185,139,54,.25)}

/* حقل الفخ للبوتات: خارج الشاشة وليس display:none حتى لا تتجاهله البوتات */
.hp-field{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- الفروع والخريطة ---------- */
.branch{
  background:linear-gradient(180deg,#fff,var(--ivory));
  border:1px solid rgba(185,139,54,.3);
  box-shadow:0 3px 0 rgba(185,139,54,.35);
}
.branch:hover{border-color:var(--foil-mid);box-shadow:0 4px 0 rgba(185,139,54,.45),0 14px 22px -16px rgba(60,30,10,.4)}
.branch:has(.js-preview.active){border-color:var(--foil-mid);background:linear-gradient(135deg,#fff,#f7eede)}
.branch:has(.js-preview.active)::before{background:var(--foil-grad);width:4px}
.branch-name{color:var(--choc-2)}
.branch-name > i{background:var(--foil-grad);color:var(--choc-3);box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 2px 0 var(--foil-lo)}
.icon-btn{
  background:linear-gradient(180deg,#fff,var(--ivory));border:1px solid rgba(185,139,54,.35);color:var(--choc-1);
  box-shadow:0 3px 0 rgba(185,139,54,.4);
  transition:transform .15s ease,box-shadow .15s ease,background .2s,color .2s;
}
.icon-btn:hover{background:#f7eede;border-color:var(--foil-mid);transform:translateY(-1px)}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(185,139,54,.4)}
.icon-btn.active{
  color:var(--foil-hi);border-color:rgba(220,181,99,.5);
  background:linear-gradient(165deg,var(--choc-1),var(--choc-3));
  box-shadow:0 3px 0 var(--choc-edge),inset 0 1px 0 rgba(255,230,190,.2);
}
.map-card{padding:0}
.map-footer{background:linear-gradient(180deg,var(--ivory),#f7eede);border-top:1px solid rgba(185,139,54,.35)}
.map-footer .map-label i{color:var(--foil-mid)}

/* ---------- تركيز واضح ---------- */
.chip:focus-visible,.btn:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--foil-mid);outline-offset:3px;box-shadow:none}

/* ---------- الجوال ---------- */
@media (max-width:900px){
  .hero-media,html[dir="ltr"] .hero-media{
    margin:4px 4px 10px;
    box-shadow:0 0 0 2px rgba(255,250,241,.9),0 0 0 4px var(--foil),0 6px 0 4px var(--foil-lo),0 24px 36px -14px rgba(60,30,10,.42);
  }
  .hero-media{min-height:260px}
}
@media (prefers-reduced-motion:reduce){
  .chip,.btn-primary,.icon-btn{transition:none}
}

/* الجوال: حقول النموذج 16px حتى لا يكبّر iOS الصفحة تلقائيًا عند لمس الحقل */
@media (max-width:768px){
  .contact-form input,.contact-form select,.contact-form textarea,
  form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),form select,form textarea{font-size:16px}
}