.loading-container {
  display:flex; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:9999;
  background:rgba(255,255,255,0.85);
}
.progress { height: 10px; }


/* Validation icons — works for inputs and the gender-control "form-control" group */
.form-control.is-valid,
.gender-control.is-valid {
  /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23198754' viewBox='0 0 16 16'%3e%3cpath d='M16 8A8 8 0 11.001 8 8 8 0 0116 8zM6.97 11.03l6-6-.708-.708-5.293 5.292-2.646-2.646-.708.708 3.354 3.354z'/%3e%3c/svg%3e");*/
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 1rem 1rem;
  padding-right: 2rem;
}


/* Keep gender radios aligned nicely within the control */
.gender-control .form-check {
  margin-right: 1rem;
}


/* Header with background image (set via CSS var or inline style) */
.hero-header{
  position: relative;
  /* Use a CSS custom property so JS can update from config */
  --header-bg: url('https://saudi-sg.com/wp-content/uploads/2024/11/header_main.png');
  background: center / cover no-repeat var(--header-bg);
  min-height: 180px;           /* adjust to taste */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optional dark overlay for better readability on busy images */
.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.25));
  pointer-events: none;
}

/* Foreground image (logo) sits above overlay */
#headerLogo{
  position: relative;          /* ensures it's above the overlay */
  max-height: 120px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}

/* Responsive tune-ups */
@media (max-width: 576px){
  .hero-header{ min-height: 140px; }
  #headerLogo{ max-height: 90px; }
}