/* =========================
   Contact Page - Full CSS (Fixed Header Safe)
   ========================= */

/* 1) Define header height once */
:root{
  --header-h: 110px;  /* ✅ عدلها حسب ارتفاع الهيدر الحقيقي */
}

/* 2) Make sure header stays above overlays */
header, .header, .navbar, .main-header{
  position: relative;
  z-index: 9999;
}
.contact-hero__bg--gray{
  background: #e5e7eb !important; /* رمادي فاتح */
}
/* Fullscreen hero */
.contact-hero{
  position: relative;
  overflow: hidden;

  /* ✅ prevents being under the fixed header */
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 60px;

  /* ✅ full screen but respecting header */
  min-height: calc(100vh - var(--header-h));
}

/* Background image layer */
.contact-hero__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);

  /* ✅ keep it behind everything */
  z-index: 0;
  pointer-events: none;
}

/* Green overlay like the design */
.contact-hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(11,110,79,.88);

  /* ✅ under content, above bg */
  z-index: 1;
  pointer-events: none;
}

/* Content layer */
.contact-hero__content{
  position: relative;
  z-index: 2;
}

/* Title */
.contact-hero__title{
  color:#fff;
  font-size: 48px;
  font-weight: 900;
  margin: 0 0 18px 0;
  letter-spacing: .3px;
}

/* Inputs */
.contact-form-modern .contact-input,
.contact-form-modern .contact-textarea{
  width:100%;
  background: rgba(255,255,255,.92);
  border: 0;
  outline: none;
  border-radius: 10px;

  padding: 14px 16px;
  margin-bottom: 14px;

  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  transition: box-shadow .18s ease, transform .18s ease;
}

.contact-form-modern .contact-input:focus,
.contact-form-modern .contact-textarea:focus{
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

.contact-form-modern .contact-textarea{
  min-height: 190px;
  resize: none;
}

/* Submit button small with arrow */
.contact-actions{
  display:flex;
  justify-content:flex-start;
  margin: 10px 0 16px;
}

.contact-submit{
  background:#0ea36d;
  color:#fff;
  border:0;
  border-radius:10px;
  padding:12px 18px;
  font-weight:800;

  display:inline-flex;
  align-items:center;
  gap:10px;

  box-shadow: 0 12px 24px rgba(0,0,0,.18);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.contact-submit:hover{
  transform: translateY(-1px);
  filter: brightness(.95);
  box-shadow: 0 16px 32px rgba(0,0,0,.20);
}

.contact-submit:disabled{
  opacity:.75;
  cursor:not-allowed;
  transform:none;
}

.contact-submit .arrow{
  font-size: 18px;
  line-height: 1;
}

/* captcha */
.contact-captcha{
  margin-top: 8px;
}

.contact-captcha .g-recaptcha{
  transform-origin: left top;
}



/* Map card */
.contact-map-card{
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}

.contact-map-card iframe{
  width:100%;
  height: 300px;          /* ✅ أكبر شوي مثل الصورة */
  border:0;
  border-radius: 12px;
  display:block;
}

/* Info blocks under map */
.contact-info-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}

.contact-info-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  color:#fff;
}

.contact-info-icon{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.14);
  border-radius: 12px;
  font-size: 16px;
  flex-shrink:0;
}

.contact-info-title{
  font-weight:900;
  font-size: 14px;
  margin-bottom: 2px;
}

.contact-info-sub{
  font-size: 12px;
  opacity:.92;
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 991px){
  :root{ --header-h: 90px; }  /* ✅ غالباً الهيدر أصغر على الموبايل */

  .contact-hero{
    padding-top: calc(var(--header-h) + 24px);
    padding-bottom: 40px;
  }

  .contact-hero__title{
    font-size: 36px;
  }

  .contact-map-card iframe{
    height: 260px;
  }

  .contact-info-row{
    grid-template-columns: 1fr;
  }
}

/* Extra small */
@media (max-width: 480px){
  .contact-submit{
    width: 100%;
    justify-content: center;
  }

  /* reCAPTCHA on small screens */
  .contact-captcha .g-recaptcha{
    transform: scale(.92);
  }
}
/* Placeholder (hints) color = gray */
.contact-form-modern .contact-input::placeholder,
.contact-form-modern .contact-textarea::placeholder{
  color: #9aa3ad;       /* رمادي واضح */
  opacity: 1;           /* مهم لبعض المتصفحات */
  font-weight: 600;
}

/* Safari/old Edge */
.contact-form-modern .contact-input::-webkit-input-placeholder,
.contact-form-modern .contact-textarea::-webkit-input-placeholder{
  color: #9aa3ad;
  opacity: 1;
}

/* Firefox */
.contact-form-modern .contact-input::-moz-placeholder,
.contact-form-modern .contact-textarea::-moz-placeholder{
  color: #9aa3ad;
  opacity: 1;
}
body.pages-contact-us .footer-section.mt-5{
  margin-top: 0 !important;
}