/* ---------------- BODY ---------------- */
body {
  background: #f4f6f9;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

/* ---------------- PRELOADER ---------------- */
#preloader {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.bubble {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background: #0d6efd;
  border-radius: 50%;
  animation: bounce 0.6s infinite alternate;
}

.bubble:nth-child(2) { animation-delay: 0.2s; }
.bubble:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  to {
    transform: translateY(-15px);
    opacity: 0.7;
  }
}

/* ---------------- STEP WIZARD ---------------- */
.step {
  display: none;
}

.step.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  padding: 20px;
}

.is-invalid {
  border-color: #dc3545;
}

.invalid-feedback {
  display: block;
  font-size: 0.875rem;
}

/* ---------------- BANK LIST ---------------- */
#bankList {
  width: 100%;
}

#bankList .list-group-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  font-weight: 500;
  border: none;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background: #fff;
  border-radius: 10px;
}

#bankList .list-group-item:last-child {
  border-bottom: none;
}

#bankList .list-group-item:hover {
  background: #f0f8ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

#bankList img {
  height: 36px;
  width: auto;
}

/* ---------------- BANK CARD GRID ---------------- */
.bank-card {
  cursor: pointer;
  border: 1px solid #eee;
  border-radius: 12px;
  transition: all 0.25s ease-in-out;
  background-color: #fff;
  padding: 15px 0;
  width: 100%;
}

.bank-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.bank-card img {
  max-height: 50px;
  object-fit: contain;
}

.bank-card .card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
  margin: 0;
  text-align: center;
}

/* Center bank card columns */
#bankList .col-6 {
  display: flex;
  justify-content: center;
}

/* ---------------- SEARCH INPUT ---------------- */
#bankSearch {
  border-radius: 50px;
  padding-left: 20px;
  padding-right: 20px;
  border: 1px solid #ccc;
  height: 48px;
  transition: all 0.2s ease-in-out;
}

#bankSearch:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 5px rgba(13, 110, 253, 0.25);
}

/* ---------------- HEADINGS ---------------- */
h3 {
  font-size: 1.8rem;
  font-weight: 600;
}

/* ---------------- MODAL ---------------- */
.modal-dialog.modal-fullscreen {
  padding: 0;
}

.modal-dialog .w-100 {
  width: 100%;
  max-width: 420px;
  margin: auto;
}

.modal-body h3 {
  font-weight: 600;
  margin-bottom: 20px;
}

.modal-footer {
  justify-content: flex-end;
  gap: 10px;
}

/* ---------------- INPUT ICONS ---------------- */
.input-group-text i {
  font-size: 1rem;
}

/* ---------------- BANK LOGO ---------------- */
#bankLogo {
  width: 150px !important;
  object-fit: contain;
}

/* ---------------- VERTICAL CENTER ---------------- */
.vh-100 {
  min-height: 100vh !important;
}

/* ---------------- FORM FIELDS ---------------- */
.form-control:focus {
  box-shadow: none;
  border-color: #0d6efd;
}

/* ---------------- MEDIA QUERIES ---------------- */
@media (max-width: 576px) {
  .modal-dialog .w-100 {
    padding: 0 15px;
  }

  #bankSearch {
    height: 42px;
  }
}