/* ==============================
   RealBook: custom layout fixes
   File: css/realbook-custom.css
   ============================== */

/* Requirement form: flexible + consistent heights */
#requirementForm {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;            /* allow wrapping on small screens */
}

/* Input wrapper can actually grow */
#requirementForm .rld-single-input {
  flex: 1 1 auto;
  min-width: 0;               /* prevent overflow from fixed min-widths */
}

/* The text input itself */
#requirementForm .rb-search-input {
  width: 100%;
  min-width: 0;
  height: 52px;               /* match button height */
  padding: 10px 14px;
  font-size: 16px;
  line-height: 1.2;
  border-radius: 8px;
}

/* Submit button */
#requirementForm .rb-search-btn {
  height: 52px;
  padding: 0 18px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;        /* keep label on one line */
}

/* The button’s container (usually the div with .ml-2).
   We can’t rely on a specific class, so target any direct child div
   that contains the submit button. */
#requirementForm > div:has(.rb-search-btn) {
  margin-left: 8px;           /* small gap on desktop/tablet */
}



/* ---------- Mobile tweaks ---------- */
@media (max-width: 767.98px) {
  /* Full-width stacking */
  #requirementForm .rld-single-input {
    flex: 1 1 100%;
  }

  /* Button container: full width + spacing above */
  #requirementForm > div:has(.rb-search-btn) {
    margin-left: 0 !important;
    margin-top: 12px !important;
    width: 100%;
  }

  /* Button stretches full width for easy tapping */
  #requirementForm .rb-search-btn {
    width: 100%;
  }
  
  
  
}

/* LEOR center & big */
.leor-section {
  padding: 48px 0;
}

.leor-photo {
  display: block;
  margin: 0 auto 12px auto;
  width: 200px;          /* base size */
  height: 360px;
  object-fit: contain;
}

.leor-title {
  font-weight: 800;
  font-size: 2.2rem;     /* bigger on mobile */
  line-height: 1.1;
  margin-bottom: .35rem;
}

.leor-title span { 
  display: inline-block;
  margin: 0 .25rem;
}

.leor-subtitle {
  font-size: 1.1rem;
  color: #555;
  max-width: 900px;
  margin: 0 auto;
}



/* Keep the block visible above sticky/menus on tablets */
#rb-lang-phone { z-index: 1100; }

/* Nice compact phone button */
.rb-phone { white-space: nowrap; padding: .45rem .75rem; line-height: 1; }

/* Touch-friendly language menu */
.lang-wrap { position: relative; }
.lang-tooltip { 
  display: none; position: absolute; right: 0; top: 100%;
  background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.12);
  border-radius:8px; padding:.4rem 0; min-width: 160px; z-index: 1200;
}
.lang-wrap.open .lang-tooltip { display: block; }
.lang-tooltip a { display:block; padding:.4rem .75rem; }
.lang-tooltip a:hover { background:#f7f7f7; }




.nri-section .nri-photo { display:block; margin:0 auto; max-width:220px; height:auto; }
.nri-badge{
  position:absolute; top:12px; left:12px;
  background:#0d6efd; color:#fff; font-weight:600;
  padding:6px 10px; border-radius:6px; letter-spacing:.2px;
}
.nri-title span{ display:inline-block; margin:0 .25rem; }
.nri-subtitle{ margin:0.5rem 0; }


/* scale up on larger screens */
@media (min-width: 768px) {
  .leor-photo {
    width: 240px;        /* upscale for md+ */
    height: 432px;
  }
  .leor-title {
    font-size: 3rem;
  }
  .leor-subtitle {
    font-size: 1.25rem;
  }
}


/* ---------- Optional: tighten the white card on tiny phones ---------- */
@media (max-width: 360px) {
  #requirementForm .rb-search-input {
    font-size: 15px;
    padding: 10px 12px;
  }
}