/* =========================================================
   Alpha 20 — قسم "تواصل معنا"
   ========================================================= */

:root {
  --cf-black: #000000;
  --cf-orange: #FC723F;
  --cf-white: #FFFFFF;
  --cf-surface: #161616;
  --cf-line: rgba(255, 255, 255, 0.22);
  --cf-muted: rgba(255, 255, 255, 0.72);
  --cf-sub: rgba(0, 0, 0, 0.72);
  --cf-ink: #000000;
  --cf-error: #D6361A;
  --cf-radius: 14px;
  --cf-font-ar-title: 'Free Palestine', 'Tajawal', sans-serif;
  --cf-font-ar: 'Tajawal', sans-serif;
  --cf-font-en: 'Poppins', 'Tajawal', sans-serif;
}

.cf-contact, .cf-contact *, .cf-contact *::before, .cf-contact *::after,
.cf-footer, .cf-footer *, .cf-footer *::before, .cf-footer *::after,
.cf-fab-wa, .cf-to-top { box-sizing: border-box; }

.cf-wrap {
  width: min(1340px, 100% - 2 * clamp(20px, 5vw, 64px));
  margin-inline: auto;
}

.cf-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- القسم ---------- */
#contact.cf-contact {
  position: relative;
  isolation: isolate;
  background: transparent; /* ياخذ لون تدرّج الموقع (يوصل أبيض هنا) */
  color: var(--cf-ink);
  font-family: var(--cf-font-ar);
  padding-block: clamp(72px, 10vw, 128px) clamp(40px, 6vw, 72px);
}

html[lang^="en"] #contact.cf-contact,
html[dir="ltr"] #contact.cf-contact { font-family: var(--cf-font-en); }

.cf-contact__head { margin-bottom: clamp(36px, 5vw, 56px); }

#contact .cf-contact__title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--cf-font-ar-title);
  font-weight: normal;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.1;
  color: var(--cf-ink);
}
#contact .cf-contact__title::before,
#contact .cf-contact__title::after { content: none; display: none; }
html[lang^="en"] #contact .cf-contact__title,
html[dir="ltr"] #contact .cf-contact__title {
  font-family: var(--cf-font-en);
  font-weight: 700;
  letter-spacing: -0.02em;
}

#contact .cf-contact__sub {
  margin: 14px 0 0;
  max-width: 52ch;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--cf-sub);
}

.cf-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  --cf-gap: clamp(40px, 7vw, 110px);
  gap: var(--cf-gap);
  align-items: end; /* أسفل الفورم على نفس مستوى أسفل الخريطة */
}

/* ---------- الفورم ---------- */
.cf-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.cf-field { display: flex; flex-direction: column; min-width: 0; }
.cf-field--full { grid-column: 1 / -1; }

.cf-input {
  width: 100%;
  height: 58px;
  padding-inline: 20px;
  background: rgba(0, 0, 0, 0.03);
  border: 1.5px solid rgba(0, 0, 0, 0.22);
  border-radius: var(--cf-radius);
  color: var(--cf-ink);
  font: inherit;
  font-size: 1rem;
  text-align: start;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.cf-input::placeholder { color: rgba(0, 0, 0, 0.5); opacity: 1; }
.cf-input:hover { border-color: rgba(0, 0, 0, 0.45); }
.cf-input:focus {
  outline: none;
  border-color: var(--cf-orange);
  background: var(--cf-white);
  box-shadow: 0 0 0 3px rgba(252, 114, 63, 0.25);
}
.cf-input[aria-invalid="true"] { border-color: var(--cf-error); border-width: 2px; }

/* الأرقام والإيميل تبقى يسار حتى بالعربي لما تنكتب */
.cf-input[type="email"]:not(:placeholder-shown),
.cf-input[type="tel"]:not(:placeholder-shown) { direction: ltr; }
html[dir="rtl"] .cf-input[type="email"]:not(:placeholder-shown),
html[dir="rtl"] .cf-input[type="tel"]:not(:placeholder-shown) { text-align: right; }

.cf-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-inline-end: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: left 18px center;
}
html[dir="ltr"] .cf-select { background-position: right 18px center; }
.cf-select:invalid,
.cf-select.is-empty { color: rgba(0, 0, 0, 0.5); }
.cf-select option { background: var(--cf-white); color: var(--cf-ink); }

.cf-textarea {
  height: auto;
  min-height: 150px;
  padding-block: 16px;
  line-height: 1.7;
  resize: vertical;
}

.cf-error {
  margin: 6px 4px 0;
  font-size: .9rem;
  font-weight: 700;
  color: var(--cf-error);
}
.cf-error:empty { display: none; }

.cf-submit {
  width: 100%;
  height: 58px;
  margin-top: 6px;
  border: 0;
  border-radius: var(--cf-radius);
  background: var(--cf-black);
  color: var(--cf-white);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.cf-submit:hover { background: var(--cf-orange); color: var(--cf-white); }
.cf-submit:active { transform: scale(.99); }
.cf-submit:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 3px; }
.cf-submit[disabled] { opacity: .6; cursor: progress; }

.cf-status { margin: 12px 4px 0; font-size: 1rem; font-weight: 700; color: var(--cf-ink); }
.cf-status:empty { display: none; }
.cf-status.is-success { color: var(--cf-ink); }
.cf-status.is-error { color: var(--cf-error); }

/* ---------- الخريطة + دبوس الذيب على جدة ---------- */
.cf-map {
  /* مكان جدة على الخريطة (عدّلها لو الدبوس طلع بعيد) */
  --pin-x: 22.1%;
  --pin-y: 67.4%;
  position: relative;
  display: block;
  width: 100%;
  max-width: 640px;
  margin-top: 120px;          /* مساحة للتلميح فوق الخريطة */
  /* تتوسّط المساحة الفاضية بالضبط: من طرف الفورم لين طرف الشاشة */
  justify-self: center;
  margin-inline-start: calc(-1 * var(--cf-gap));
  margin-inline-end: min(0px, calc((1340px - 100vw) / 2));
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 24px;
}
.cf-map:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 8px; }
.cf-map__img {
  display: block;
  width: 100%;
  height: auto;
  transition: scale .5s cubic-bezier(.2, .7, .2, 1);
}
.cf-map:hover .cf-map__img { scale: 1.02; }

.cf-map__pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  width: 0;
  height: 0;
}

/* النقطة على جدة نفسها + نبضة */
.cf-map__dot,
.cf-map__dot::after {
  position: absolute;
  left: 0; top: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cf-map__dot {
  background: var(--cf-orange);
  box-shadow: 0 0 0 4px var(--cf-white);
}
.cf-map__dot::after {
  content: "";
  border: 3px solid var(--cf-orange);
  opacity: 0;
}
@keyframes cf-map-pulse {
  0%   { width: 18px; height: 18px; opacity: .9; transform: translate(-50%, -50%); }
  100% { width: 80px; height: 80px; opacity: 0;  transform: translate(-50%, -50%); }
}

/* الدبوس: دائرة برتقالية فيها الذيب + سن يأشر على النقطة */
.cf-map__marker {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--cf-orange);
  box-shadow: 0 0 0 4px var(--cf-white), 0 14px 28px rgba(0, 0, 0, 0.3);
  display: grid;
  place-items: center;
  transform: translateX(-50%);
}
.cf-map__marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: -2px;
  border: 12px solid transparent;
  border-top: 15px solid var(--cf-orange);
  border-bottom: 0;
  transform: translateX(-50%);
}
.cf-map__marker img {
  width: 60%;
  height: auto;
  display: block;
}

/* اسم المدينة فوق الدبوس */
.cf-map__label {
  position: absolute;
  bottom: 128px;
  left: 0;
  transform: translateX(-50%);
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--cf-orange);
  color: var(--cf-white);
  box-shadow: 0 0 0 3px var(--cf-white), 0 10px 22px rgba(0, 0, 0, 0.25);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* ---------- التلميح فوق الخريطة: "هنا تلاقينا" + سهم يأشر على جدة ---------- */
.cf-map__hint {
  position: absolute;
  left: var(--pin-x);
  top: -120px;
  bottom: calc(100% - var(--pin-y) + 182px); /* السهم يوقف فوق "جدة" بالضبط */
  width: 300px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.cf-map__hint-title {
  /* خط Tajawal العريض: خط العناوين يمد حرف "لا" تلقائيًا ويطلع الكلام ممدود */
  font-family: var(--cf-font-ar);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.2;
  color: var(--cf-ink);
}
html[lang^="en"] .cf-map__hint-title { font-family: var(--cf-font-en); font-weight: 700; font-size: 1.7rem; }
.cf-map__hint-sub {
  margin-top: 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.75);
}
.cf-map__arrow {
  position: relative;
  flex: 1;
  width: 24px;
  min-height: 24px;
  margin-top: 8px;
}
/* خط السهم (متقطّع) */
.cf-map__arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 3px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: repeating-linear-gradient(to bottom, var(--cf-orange) 0 10px, transparent 10px 17px);
  clip-path: inset(0 0 0 0);
}
/* رأس السهم */
.cf-map__arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-right: 3px solid var(--cf-orange);
  border-bottom: 3px solid var(--cf-orange);
  border-radius: 0 0 3px 0;
  transform: rotate(45deg);
}

/* ---------- الحركة ---------- */
/* الحركة المستمرة (بعد ما تخلص حركة الدخول): نبضة على جدة + الدبوس يتمايل + السهم يتحرك خفيف */
@media (prefers-reduced-motion: no-preference) {
  .cf-map__dot::after { animation: cf-map-pulse 2.4s ease-out infinite; }
  .cf-map__marker { animation: cf-pin-bob 2.4s ease-in-out infinite; }
  .cf-map__arrow { animation: cf-arrow-nudge 1.6s ease-in-out 1.6s infinite; }
}
@keyframes cf-pin-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}
@keyframes cf-arrow-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* حركة الدخول — تنعاد كل ما توصل للقسم (السهم يطلع على طول، والدبوس ينزل خلال ثانية):
   1) الخريطة + "هنا تلاقينا"  2) السهم يمتد لين جدة  3) الدبوس ينزل  4) كلمة جدة */
.cf-map.js-reveal .cf-map__img {
  transition: opacity 1.2s ease, translate 1.4s cubic-bezier(.16, 1, .3, 1), scale .5s cubic-bezier(.2, .7, .2, 1);
}
.cf-map.js-reveal .cf-map__hint-title,
.cf-map.js-reveal .cf-map__hint-sub {
  transition: opacity .6s ease, translate .7s cubic-bezier(.16, 1, .3, 1);
}
.cf-map.js-reveal .cf-map__hint-title { transition-delay: .05s; }
.cf-map.js-reveal .cf-map__hint-sub   { transition-delay: .15s; }
.cf-map.js-reveal .cf-map__arrow::before { transition: clip-path .55s cubic-bezier(.45, 0, .25, 1) .15s; }
.cf-map.js-reveal .cf-map__arrow::after  { transition: opacity .2s ease .65s, translate .25s ease-out .65s; }
.cf-map.js-reveal .cf-map__pin {
  transition: opacity .2s ease .7s, translate .5s cubic-bezier(.34, 1.56, .64, 1) .7s;
}
.cf-map.js-reveal .cf-map__label {
  transition: opacity .2s ease .95s, scale .35s cubic-bezier(.34, 1.56, .64, 1) .95s;
}

/* الحالة قبل الدخول */
.cf-map.js-reveal:not(.is-in) .cf-map__img { opacity: 0; translate: 0 50px; }
.cf-map.js-reveal:not(.is-in) .cf-map__hint-title,
.cf-map.js-reveal:not(.is-in) .cf-map__hint-sub { opacity: 0; translate: 0 -12px; }
.cf-map.js-reveal:not(.is-in) .cf-map__arrow::before { clip-path: inset(0 0 100% 0); }
.cf-map.js-reveal:not(.is-in) .cf-map__arrow::after { opacity: 0; translate: 0 -10px; }
.cf-map.js-reveal:not(.is-in) .cf-map__pin { opacity: 0; translate: 0 -90px; }
.cf-map.js-reveal:not(.is-in) .cf-map__label { opacity: 0; scale: .5; }

/* ترجيع الخريطة للبداية بدون حركة (عشان تنعاد الحركة كل مرة) */
.cf-map.no-anim,
.cf-map.no-anim * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .cf-map.js-reveal * { transition: none !important; }
}

/* ---------- تجاوب ---------- */
@media (max-width: 960px) {
  .cf-contact__grid { grid-template-columns: 1fr; }
  .cf-map { max-width: 440px; justify-self: center; margin-inline: 0; }
}
@media (max-width: 560px) {
  .cf-form { grid-template-columns: 1fr; }
  .cf-map { max-width: 320px; margin-top: 110px; }
  .cf-map__marker { width: 62px; height: 62px; bottom: 16px; }
  .cf-map__label { font-size: 1.05rem; padding: 7px 16px; bottom: 100px; }
  .cf-map__hint { width: 220px; top: -110px; bottom: calc(100% - var(--pin-y) + 146px); transform: translateX(-35%); }
  .cf-map__hint-title { font-size: 1.7rem; }
  .cf-map__hint-sub { font-size: .9rem; }
}

/* العنوان + الفورم في عمود واحد، والعنوان فوق الفورم مباشرة */
.cf-contact__side { display: flex; flex-direction: column; min-width: 0; }
.cf-contact__side .cf-contact__head { margin-bottom: clamp(24px, 3vw, 36px); }

/* =========================================================
   الخريطة: ميلان مع الماوس + طايرة بظل + موجات من جدة
   ========================================================= */

/* القسم ما يطلع منه شي برا الشاشة بالعرض (يمنع الصفحة تنزاح بالجوال) */
#contact.cf-contact { overflow-x: clip; }

/* 1) ميلان ثلاثي الأبعاد مع حركة الماوس (الكمبيوتر بس — القيم تجي من contact-footer.js) */
@media (min-width: 961px) and (hover: hover) {
  .cf-map {
    --rx: 0deg;
    --ry: 0deg;
    transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
  }
  .cf-map.is-tilting { transition: transform .12s linear; }
  /* الدبوس والتلميح يطلعون لقدام أكثر من الخريطة (عمق) */
  .cf-map__pin  { transform: translateZ(60px); }
  .cf-map__hint { transform: translateX(-50%) translateZ(30px); }
}

/* 2) الخريطة طايرة تتمايل لفوق وتحت، وظلها كبير على يسارها (بنفس شكل المملكة) */
@media (prefers-reduced-motion: no-preference) {
  .cf-map__img { animation: cf-map-float 6s ease-in-out infinite; }
}
.cf-map__img {
  /* ✏️ الظل: الرقم الأول = كم يبعد لليسار، الثاني = كم ينزل، الثالث = نعومته، والأخير = غمقه */
  filter: drop-shadow(-60px 34px 26px rgba(0, 0, 0, .30));
}
@keyframes cf-map-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* 6) موجات رادار تطلع من جدة وتنتشر على الخريطة (داخل حدود المملكة بس) */
.cf-map__waves {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask: url("../../assets/images/map/saudi-map-roshan.svg") center / 100% 100% no-repeat;
          mask: url("../../assets/images/map/saudi-map-roshan.svg") center / 100% 100% no-repeat;
  transition: opacity .8s ease 1.2s;
}
.cf-map.js-reveal:not(.is-in) .cf-map__waves { opacity: 0; transition: none; }
.cf-map__waves span {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  width: 0;
  height: 0;
  border-radius: 50%;
  translate: -50% -50%;
  border: 2px solid rgba(252, 114, 63, .9);
  background: radial-gradient(circle, rgba(252, 114, 63, 0) 55%, rgba(252, 114, 63, .18) 100%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .cf-map.is-in .cf-map__waves span { animation: cf-map-wave 5.4s cubic-bezier(.2, .6, .3, 1) infinite; }
  .cf-map.is-in .cf-map__waves span:nth-child(2) { animation-delay: 1.8s; }
  .cf-map.is-in .cf-map__waves span:nth-child(3) { animation-delay: 3.6s; }
}
@keyframes cf-map-wave {
  0%   { width: 0;    height: 0;    opacity: .95; }
  100% { width: 230%; height: 230%; opacity: 0; }
}