/**
 * SendMsg reg popup – theme overrides for api4 StyleSheet.css
 * Matches sendmsg-ai-landing (purple / pink gradient, Rubik, soft surfaces).
 * Loaded after https://api4.sendmsg.co.il/regPopUp/style/StyleSheet.css
 *
 * Uses !important on most declarations so we beat SendMsg’s rules (many use !important).
 * Selectors repeat #sendmsgPopHolderDiv #formRegister for higher specificity on ties.
 */

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&display=swap");

/* ── Design tokens (aligned with :root on landing) ───────────────── */
#formRegister,
#sendmsgPopHolderDiv #formRegister {
  --primary: #521e8c !important;
  --secondary: #8a0d66 !important;
  --contrast: #334155 !important;
  --form-margin: 12px !important;
  --form-padding-sendmsg: 18px !important;
  --pop-radius: 20px !important;
  --pop-radius-sm: 14px !important;
  --pop-shadow: 0 28px 90px rgba(82, 30, 140, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
  --pop-input-border: rgba(15, 23, 42, 0.12) !important;
  --pop-focus: rgba(138, 13, 102, 0.28) !important;
}

#formRegister,
#sendmsgPopHolderDiv #formRegister,
#formRegister *,
#sendmsgPopHolderDiv #formRegister * {
  font-family: Rubik, "Heebo", Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}

/* ── Overlay ─────────────────────────────────────────────────────── */
#formRegister .joinRegPopOverlay, #sendmsgPopHolderDiv #formRegister .joinRegPopOverlay {
  transition: background 280ms ease, backdrop-filter 280ms ease !important;
}

#formRegister .joinRegPopOverlay.joinRegPopOverlayVisible, #sendmsgPopHolderDiv #formRegister .joinRegPopOverlay.joinRegPopOverlayVisible {
  background: rgba(15, 23, 42, 0.48) !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
}

/* ── Modal shell ─────────────────────────────────────────────────── */
#formRegister .joinRegPop, #sendmsgPopHolderDiv #formRegister .joinRegPop {
  top: 0 !important;
  transition: opacity 280ms ease, visibility 280ms ease !important;
}

#formRegister .joinRegPopInner, #sendmsgPopHolderDiv #formRegister .joinRegPopInner {
  max-width: min(1080px, calc(100vw - 32px)) !important;
  width: 100% !important;
  border-radius: var(--pop-radius) !important;
  box-shadow: var(--pop-shadow) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
  overflow: hidden !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
}

#formRegister .joinRegPoploadingOverlay, #sendmsgPopHolderDiv #formRegister .joinRegPoploadingOverlay {
  border-radius: var(--pop-radius) !important;
  background-color: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ── Close control ───────────────────────────────────────────────── */
#formRegister .joinRegPopClose, #sendmsgPopHolderDiv #formRegister .joinRegPopClose {
  left: 14px !important;
  top: 14px !important;
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 22px !important;
  color: #64748b !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, 0.05) !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

#formRegister .joinRegPopClose:hover, #sendmsgPopHolderDiv #formRegister .joinRegPopClose:hover {
  background: rgba(138, 13, 102, 0.1) !important;
  color: var(--secondary) !important;
  transform: scale(1.05) !important;
}

/* ── Typography ─────────────────────────────────────────────────── */
#formRegister .joinRegPopHeader, #sendmsgPopHolderDiv #formRegister .joinRegPopHeader {
  font-size: clamp(1.35rem, 3.5vw, 1.65rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  margin-bottom: 1.1rem !important;
  margin-top: 0.25rem !important;
  color: transparent !important;
  background: linear-gradient(135deg,#A8107E 0%,#6328A7 100%)
  !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

#formRegister .joinRegPopValidator, #sendmsgPopHolderDiv #formRegister .joinRegPopValidator {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* ── Content area ───────────────────────────────────────────────── */
#formRegister .joinRegPopContent, #sendmsgPopHolderDiv #formRegister .joinRegPopContent {
  padding: clamp(1.75rem, 4vw, 2.35rem) !important;
  max-width: min(640px, 100%) !important;
}

/* ── Text inputs ─────────────────────────────────────────────────── */
#formRegister .joinRegPopInput, #sendmsgPopHolderDiv #formRegister .joinRegPopInput,
#formRegister input.joinRegPopInput, #sendmsgPopHolderDiv #formRegister input.joinRegPopInput {
  height: 48px !important;
  min-height: 48px !important;
  border-radius: var(--pop-radius-sm) !important;
  border: 1.5px solid var(--pop-input-border) !important;
  background: #fff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  /* RTL: icons sit on inline-start (visual right) — reserve space so text/placeholder clears them */
  padding-block: 10px !important;
  padding-inline-start: 30px !important;
  padding-inline-end: 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

#formRegister .joinRegPopInput:focus, #sendmsgPopHolderDiv #formRegister .joinRegPopInput:focus,
#formRegister input.joinRegPopInput:focus, #sendmsgPopHolderDiv #formRegister input.joinRegPopInput:focus {
  border-color: #8a0d66 !important;
  box-shadow: 0 0 0 4px var(--pop-focus) !important;
  outline: none !important;
}

#formRegister .joinRegPopInput::placeholder, #sendmsgPopHolderDiv #formRegister .joinRegPopInput::placeholder,
#formRegister input.joinRegPopInput::placeholder, #sendmsgPopHolderDiv #formRegister input.joinRegPopInput::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

#formRegister input.joinRegPopInput, #sendmsgPopHolderDiv #formRegister input.joinRegPopInput {
  border-radius: var(--pop-radius-sm) !important;
}

/* ── Primary CTA ─────────────────────────────────────────────────── */
#formRegister .joinRegPopBtn, #sendmsgPopHolderDiv #formRegister .joinRegPopBtn {
  height: 50px !important;
  border-radius: var(--pop-radius-sm) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  background: linear-gradient(135deg,#A8107E 0%,#6328A7 100%)
  !important;
  border: none !important;
  box-shadow: 0 12px 32px rgba(82, 30, 140, 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

#formRegister .joinRegPopBtn:hover, #sendmsgPopHolderDiv #formRegister .joinRegPopBtn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 40px rgba(82, 30, 140, 0.42) !important;
  filter: brightness(1.03) !important;
}

#formRegister .joinRegPopshadow:hover, #sendmsgPopHolderDiv #formRegister .joinRegPopshadow:hover {
  box-shadow: 0 14px 36px rgba(82, 30, 140, 0.2) !important;
}

/* ── Links & coupon ──────────────────────────────────────────────── */
#formRegister .joinRegPopUrl, #sendmsgPopHolderDiv #formRegister .joinRegPopUrl {
  color: var(--secondary) !important;
  font-weight: 600 !important;
}

#formRegister .joinRegPopUrl:hover, #sendmsgPopHolderDiv #formRegister .joinRegPopUrl:hover {
  color: var(--primary) !important;
}

#formRegister .getCouponText, #sendmsgPopHolderDiv #formRegister .getCouponText {
  color: var(--secondary) !important;
  font-weight: 600 !important;
}

#formRegister .getCouponText:after, #sendmsgPopHolderDiv #formRegister .getCouponText:after {
  background: linear-gradient(90deg, #8a0d66, #521e8c) !important;
  height: 2px !important;
  bottom: -5px !important;
}

/* ── Agreement ───────────────────────────────────────────────────── */
#formRegister .joinAgreementHolder, #sendmsgPopHolderDiv #formRegister .joinAgreementHolder,
#formRegister .joinAgreementHolder2, #sendmsgPopHolderDiv #formRegister .joinAgreementHolder2 {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #475569 !important;
}

#formRegister #agreeToTerms, #sendmsgPopHolderDiv #formRegister #agreeToTerms {
  width: 18px !important;
  height: 18px !important;
  accent-color: #521e8c !important;
  border-radius: 4px !important;
}

/* ── Social / Gmail rows ─────────────────────────────────────────── */
#formRegister .gmail-btn, #sendmsgPopHolderDiv #formRegister .gmail-btn {
  border-radius: var(--pop-radius-sm) !important;
  border: 1.5px solid rgba(15, 23, 42, 0.08) !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#formRegister .gmail-btn:hover, #sendmsgPopHolderDiv #formRegister .gmail-btn:hover {
  border-color: rgba(82, 30, 140, 0.25) !important;
  box-shadow: 0 6px 20px rgba(82, 30, 140, 0.12) !important;
}

#formRegister .gmail-text, #sendmsgPopHolderDiv #formRegister .gmail-text {
  color: #1e40af !important;
  font-weight: 600 !important;
}

#formRegister .facebook-text, #sendmsgPopHolderDiv #formRegister .facebook-text {
  color: #1d4ed8 !important;
  font-weight: 600 !important;
}

#formRegister .connect-btn, #sendmsgPopHolderDiv #formRegister .connect-btn {
  border-radius: var(--pop-radius-sm) !important;
}

/* ── Legacy social buttons ───────────────────────────────────────── */
#formRegister .joinRegPopSocialBtn, #sendmsgPopHolderDiv #formRegister .joinRegPopSocialBtn {
  border-radius: var(--pop-radius-sm) !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#formRegister .joinRegPopSocialBtn:hover, #sendmsgPopHolderDiv #formRegister .joinRegPopSocialBtn:hover {
  transform: translateY(-1px) !important;
}

#formRegister .joinRegPopFB, #sendmsgPopHolderDiv #formRegister .joinRegPopFB {
  background: linear-gradient(180deg, #4267b2 0%, #3b5998 100%) !important;
}

#formRegister .joinRegPopGP, #sendmsgPopHolderDiv #formRegister .joinRegPopGP {
  background: linear-gradient(180deg, #ea4335 0%, #d93025 100%) !important;
}

/* ── Splitter “או” ───────────────────────────────────────────────── */
#formRegister .joinRegPopSplitterTop, #sendmsgPopHolderDiv #formRegister .joinRegPopSplitterTop,
#formRegister .joinRegPopSplitterBottom, #sendmsgPopHolderDiv #formRegister .joinRegPopSplitterBottom {
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.15), transparent) !important;
}

#formRegister .joinRegPopSplitterMid, #sendmsgPopHolderDiv #formRegister .joinRegPopSplitterMid {
  color: #64748b !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* ── Icons in fields (RTL: anchor to inline-start = visual right) ── */
#formRegister .joinRegPopInputHolder, #sendmsgPopHolderDiv #formRegister .joinRegPopInputHolder {
  position: relative !important;
}

#formRegister .joinRegPopIcon, #sendmsgPopHolderDiv #formRegister .joinRegPopIcon {
  color: #64748b !important;
  opacity: 0.9 !important;
  position: absolute !important;
  top: 50% !important;
  /* RTL: sit slightly inside the field, not flush on the border */
  inset-inline-start: 22px !important;
  inset-inline-end: auto !important;
  left: auto !important;
  right: 6px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Password show/hide sits on inline-end in RTL (visual left) — don’t overlap typed text */
#formRegister .joinRegPoppassShowHide, #sendmsgPopHolderDiv #formRegister .joinRegPoppassShowHide {
  inset-inline-end: 20px !important;
  inset-inline-start: auto !important;
  left: auto !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

#formRegister input.joinRegPopInput[type="password"],
#sendmsgPopHolderDiv #formRegister input.joinRegPopInput[type="password"] {
  padding-inline-end: 48px !important;
}

/* ── Image column (if shown) ─────────────────────────────────────── */
#formRegister .img-col-side, #sendmsgPopHolderDiv #formRegister .img-col-side {
  background: linear-gradient(160deg, rgba(138, 13, 102, 0.08) 0%, rgba(82, 30, 140, 0.06) 100%) !important;
}

/* ── Mobile (match remote breakpoints, tighten) ─────────────────── */
@media only screen and (max-width: 900px) {
  #formRegister .joinRegPopInner, #sendmsgPopHolderDiv #formRegister .joinRegPopInner {
    max-width: calc(100vw - 20px) !important;
    max-height: min(90vh, 780px) !important;
  }

  #formRegister .joinRegPopContent, #sendmsgPopHolderDiv #formRegister .joinRegPopContent {
    padding: 1.5rem !important;
  }

  #formRegister .joinRegPopHeader, #sendmsgPopHolderDiv #formRegister .joinRegPopHeader {
    font-size: 1.35rem !important;
    margin-right: 12px !important;
    margin-left: 12px !important;
  }

  #formRegister .joinRegPopInput, #sendmsgPopHolderDiv #formRegister .joinRegPopInput,
  #formRegister input.joinRegPopInput, #sendmsgPopHolderDiv #formRegister input.joinRegPopInput {
    padding-inline-start: 50px !important;
    padding-inline-end: 14px !important;
  }
}