/* ==========================================================
   CAJO newsletter pop-up — Constant Contact sign-up form
   (rendered by Constant Contact's own script, restyled here to the
   CAJO theme: smaller box, red + navy, Cairo, gentle slide-in).
   !important is needed because Constant Contact sets inline styles.
   ========================================================== */

/* No dark backdrop — the page stays visible behind the box (Yasser's layout).
   The overlay stays (transparent) so clicking outside still closes the pop-up. */
.ctct-popup-wrapper .ctct-popup-overlay { background: transparent !important; }

/* The box sits on the LEFT side of the hero slider, in the empty area beside the
   Arabic headline (which is on the right). Smaller than Constant Contact's default. */
.ctct-popup-wrapper .ctct-popup-inner {
  position: fixed !important;
  top: 15vh !important; bottom: auto !important;
  left: max(24px, 15vw) !important; right: auto !important;
  transform: none !important; margin: 0 !important;
  width: min(92vw, 380px) !important; max-width: 380px !important;
  max-height: 80vh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(14, 24, 48, .35) !important;
}
/* gentle slide-in from the left (animated on the inner content so the box's own
   position is never disturbed) */
.ctct-popup-wrapper.ctct-popup-is-visible .ctct-popup-content {
  animation: cajoSlideIn 1s cubic-bezier(.2, .7, .2, 1) .2s both;
}
.ctct-popup-wrapper .ctct-popup-content,
.ctct-popup-wrapper .ctct-form-defaults {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 24px 22px 16px !important;
  font-family: "Cairo", sans-serif !important;
  direction: ltr;               /* the form's own wording is English */
}
.ctct-popup-wrapper .ctct-popup-content { padding: 0 !important; }
.ctct-popup-wrapper .ctct-form-defaults { border-top: 5px solid #d7484e !important; }

@keyframes cajoSlideIn { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ctct-popup-wrapper.ctct-popup-is-visible .ctct-popup-content { animation: none; }
}

/* Phones: centred near the bottom, sliding up */
@media (max-width: 700px) {
  .ctct-popup-wrapper .ctct-popup-inner { top: auto !important; bottom: 12px !important; left: 4vw !important; width: 92vw !important; max-width: 92vw !important; max-height: 78vh; }
  .ctct-popup-wrapper.ctct-popup-is-visible .ctct-popup-content { animation-name: cajoSlideUpMobile; }
  @keyframes cajoSlideUpMobile { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
}

/* close button */
.ctct-popup-wrapper .ctct-popup-close {
  top: 12px !important; right: 12px !important; width: 30px !important; height: 30px !important;
  background: #f3f5f9 !important; border-radius: 50% !important; opacity: .9; transition: background .2s;
}
.ctct-popup-wrapper .ctct-popup-close:hover { background: #d7484e !important; }
.ctct-popup-wrapper .ctct-popup-close img { width: 12px !important; height: 12px !important; }

/* title + intro */
.ctct-popup-wrapper .ctct-form-header {
  font-family: "Cairo", sans-serif !important; color: #14213d !important;
  font-size: 1.35rem !important; font-weight: 800 !important; letter-spacing: .02em !important;
  margin: 0 0 4px !important; line-height: 1.3 !important;
}
.ctct-popup-wrapper .ctct-form-text { color: #6b7588 !important; font-size: .9rem !important; margin: 0 0 14px !important; }

/* fields: compact */
.ctct-popup-wrapper .ctct-form-field { margin: 0 0 10px !important; }
.ctct-popup-wrapper .ctct-form-label {
  font-family: "Cairo", sans-serif !important; color: #14213d !important;
  font-size: .82rem !important; font-weight: 700 !important; margin-bottom: 3px !important; padding: 0 !important;
}
.ctct-popup-wrapper .ctct-form-required::before { color: #d7484e !important; }
.ctct-popup-wrapper .ctct-form-element,
.ctct-popup-wrapper .ctct-select-element {
  font-family: "Cairo", sans-serif !important; font-size: .9rem !important;
  height: 38px !important; min-height: 38px !important; padding: 6px 10px !important;
  border: 1px solid #e2e6ee !important; border-radius: 8px !important; background: #fff !important; color: #2f3a4f !important;
  box-shadow: none !important; transition: border-color .2s, box-shadow .2s;
}
.ctct-popup-wrapper .ctct-form-element:focus,
.ctct-popup-wrapper .ctct-select-element:focus {
  outline: none !important; border-color: #d7484e !important; box-shadow: 0 0 0 3px rgba(215, 72, 78, .15) !important;
}
.ctct-popup-wrapper .ctct-form-date-field-2 { width: 76px !important; }
.ctct-popup-wrapper .ctct-form-errorMessage { font-size: .78rem !important; }

/* consent text + button */
.ctct-popup-wrapper .ctct-gdpr-text { font-size: .7rem !important; line-height: 1.5 !important; color: #8a93a6 !important; margin: 6px 0 12px !important; }
.ctct-popup-wrapper .ctct-form-button {
  font-family: "Cairo", sans-serif !important; background: #d7484e !important; border: 0 !important;
  border-radius: 8px !important; height: 44px !important; font-size: 1rem !important; font-weight: 700 !important;
  letter-spacing: .03em !important; color: #fff !important; transition: background .2s, transform .2s;
}
.ctct-popup-wrapper .ctct-form-button:hover { background: #b03239 !important; transform: translateY(-1px); }
.ctct-popup-wrapper .ctct-form-footer { font-size: .7rem !important; margin-top: 8px !important; }

/* ==========================================================
   Footer «النشرة البريدية» — Constant Contact INLINE form
   (compact, on the dark footer; our own heading is used instead of CTCT's)
   ========================================================== */
.footer-newsletter .ctct-form-defaults { background: transparent !important; padding: 0 !important; direction: ltr; font-family: "Cairo", sans-serif !important; }
.footer-newsletter .ctct-form-custom > .ctct-form-header,
.footer-newsletter .ctct-form-custom > .ctct-form-text { display: none !important; }   /* we show «النشرة البريدية» above */
.footer-newsletter .ctct-form-field { margin: 0 0 8px !important; }
.footer-newsletter .ctct-form-label { color: #b7c0d1 !important; font-size: .78rem !important; font-weight: 600 !important; margin-bottom: 2px !important; padding: 0 !important; }
.footer-newsletter .ctct-form-required::before { color: #d7484e !important; }
.footer-newsletter .ctct-form-element,
.footer-newsletter .ctct-select-element {
  height: 36px !important; min-height: 36px !important; padding: 5px 10px !important; font-size: .88rem !important;
  font-family: "Cairo", sans-serif !important; color: #fff !important;
  background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .15) !important; border-radius: 8px !important;
}
.footer-newsletter .ctct-select-element option { color: #14213d; }
.footer-newsletter .ctct-form-element:focus,
.footer-newsletter .ctct-select-element:focus { outline: none !important; border-color: #d7484e !important; }
.footer-newsletter .ctct-form-date-field-2 { width: 70px !important; }
.footer-newsletter .ctct-form-date-slash { color: #b7c0d1; }
.footer-newsletter .ctct-gdpr-text { font-size: .68rem !important; line-height: 1.5 !important; color: #8a93a6 !important; }
.footer-newsletter .ctct-gdpr-text a { color: #b7c0d1 !important; }
.footer-newsletter .ctct-form-button {
  background: #d7484e !important; border: 0 !important; border-radius: 8px !important; height: 40px !important;
  font-family: "Cairo", sans-serif !important; font-weight: 700 !important; font-size: .95rem !important; color: #fff !important;
}
.footer-newsletter .ctct-form-button:hover { background: #b03239 !important; }
.footer-newsletter .ctct-form-success .ctct-form-header { color: #fff !important; font-size: 1rem !important; }
.footer-newsletter .ctct-form-success .ctct-form-text,
.footer-newsletter .ctct-form-footer { color: #8a93a6 !important; font-size: .72rem !important; }

/* Footer form: show only the REQUIRED fields (Email, First Name …). Optional fields
   (Last Name, Interest) are hidden. Fields that are required in Constant Contact must
   stay visible, or Constant Contact rejects the sign-up — so to get down to just
   Email + First Name, make Country and Birthday optional (or remove them) there. */
.footer-newsletter .ctct-form-field:not(:has(.ctct-form-required)) { display: none !important; }