/* Newsletter subscription popup — standalone, scoped with .nlf- prefix.
   Palette mirrors the Ulpan hero: gold #ffc800, navy #0d0056. */

.nlf-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 6, 13, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.nlf-overlay.nlf-open {
  opacity: 1;
  visibility: visible;
}

.nlf-dialog {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 460px;
  overflow: visible;
  background: #ffffff;
  color: #0d0056;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  font-family: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.2s ease;
}

.nlf-overlay.nlf-open .nlf-dialog {
  transform: translateY(0) scale(1);
}

.nlf-close {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #0d0056;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: background 0.15s ease, transform 0.15s ease;
}

.nlf-close:hover {
  background: #ffc800;
  transform: scale(1.05);
}

.nlf-dialog-inner {
  position: relative;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

.nlf-title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: #0d0056;
}

.nlf-subtitle {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.5;
  color: #5a5570;
}

.nlf-field {
  margin-bottom: 16px;
}

.nlf-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #0d0056;
}

.nlf-label .nlf-req {
  color: #c0392b;
}

.nlf-input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: #0d0056;
  background: #f7f7fb;
  border: 1px solid #d8d6e3;
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nlf-input::placeholder {
  color: #a09bb3;
}

.nlf-input:focus {
  outline: none;
  border-color: #ffc800;
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.35);
}

.nlf-input.nlf-invalid {
  border-color: #c0392b;
  background: #fdf3f2;
}

.nlf-error {
  display: none;
  margin-top: 5px;
  font-size: 12px;
  color: #c0392b;
}

.nlf-field.nlf-has-error .nlf-error {
  display: block;
}

/* honeypot — visually hidden, off-screen, not display:none (bots skip those) */
.nlf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.nlf-form-error {
  display: none;
  margin: 4px 0 14px;
  padding: 10px 12px;
  font-size: 13px;
  color: #c0392b;
  background: #fdf3f2;
  border: 1px solid #f0c8c4;
  border-radius: 8px;
}

.nlf-form-error.nlf-show {
  display: block;
}

.nlf-submit {
  width: 100%;
  margin-top: 6px;
  padding: 15px 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #0d0056;
  background: #ffc800;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.nlf-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.nlf-submit:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

.nlf-submit:focus-visible,
.nlf-close:focus-visible {
  outline: 2px solid #ffc800;
  outline-offset: 3px;
}

/* success state */
.nlf-success {
  display: none;
  text-align: center;
  padding: 12px 0 4px;
}

.nlf-success.nlf-show {
  display: block;
}

.nlf-form.nlf-hidden {
  display: none;
}

.nlf-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #0d0056;
  background: #ffc800;
  border-radius: 50%;
}

.nlf-success-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: #0d0056;
}

.nlf-success-text {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.5;
  color: #5a5570;
}

@media (max-width: 480px) {
  /* On mobile the popup is taller than the viewport (5 fields + 2 checkboxes
     + footnote + button). Body scroll is locked by JS, so we make the
     OVERLAY itself the scroll container and let the dialog grow with content.
     Without this, the Submit button was unreachable on phones. */
  .nlf-overlay {
    padding: 0;
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nlf-dialog {
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    border-radius: 0;
    padding: 28px 20px;
  }

  .nlf-close {
    position: fixed;
    top: 12px;
    right: 12px;
    box-shadow: none;
    background: rgba(13, 0, 86, 0.06);
  }

  .nlf-dialog-inner {
    max-height: none;
    overflow-y: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nlf-overlay,
  .nlf-dialog,
  .nlf-submit,
  .nlf-close {
    transition: none;
  }
}

/* Header: make the Department logo slightly larger than the default --ja size. */
.ulpan-header__logo-img--ja {
  max-width: 150px;
  height: 40px;
}

@media (max-width: 520px) {
  .ulpan-header__logo-img--ja {
    max-width: 120px;
    height: 34px;
  }
}

/* Hero: shrink the Jewish Agency logo. Default bundle ships it at
   min(280px, 52vw) which made it visually dominate the row of partners. */
.ulpan-hero__logo--ja {
  max-width: min(150px, 38vw);
}

/* State dropdown — same look as .nlf-input plus a chevron. */
select.nlf-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230d0056' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
  cursor: pointer;
}

select.nlf-input:invalid,
select.nlf-input option[disabled] {
  color: #a09bb3;
}

/* Interest checkboxes — sit between fields and submit button. */
.nlf-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
  cursor: pointer;
  user-select: none;
}

.nlf-check input[type="checkbox"] {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  accent-color: #0d0056;
  flex-shrink: 0;
  cursor: pointer;
}

.nlf-check span {
  font-size: 14px;
  line-height: 1.4;
  color: #1f1b3a;
}

/* No-spam footnote below the submit button. */
.nlf-footnote {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: #6b6680;
}