/* ===========================
   Loan Form Relay – Styles
   =========================== */

/* Base form styling (applies to all designs unless overridden) */
.loan-request-form {
  /*background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px 25px;
  margin: 20px 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);*/
  font-family: 'S-Core3';
}
.loan-request-form.vertical { 
    padding: 15px;
}
.loanform-compact .loan-request-form .success-message { 
    height: 526px;
    padding-top: 132px;
}
.loanform-compact.requestnewdesign .cform_wrap {box-shadow:none !important}
.loanform-compact..requestnewdesign .cform_title {padding:0;}
/* Inputs and selects */
.loan-request-form input,
.loan-request-form select,
.loan-request-form textarea {
  width: 100%;     
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus style */
.loan-request-form input:focus,
.loan-request-form select:focus,
.loan-request-form textarea:focus {
  outline: none;
  border-color: #4b6cff; /* WIBIZ blue accent */
  box-shadow: 0 0 0 2px rgba(75, 108, 255, 0.15);
}

/* Error highlight */
.loan-request-form .field-error {
  border-color: #d93025 !important;
  background: #fff7f7;
}

/* Optional: subtle shake animation for errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.loan-request-form .field-error {
  animation: shake 0.3s ease;
}

/* Success & Error messages */
.loan-request-form .success-message,
.loan-request-form .error-message {
  display: none;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-weight: 500;
}
.loan-request-form .success-message {
  background: #e7f5ee;
/*   border: 1px solid #b4e1c2; */
  color: #2e7d32;     position: absolute;
    width: 100%;
    text-align: center;
    height: 115px;
    padding-top: 32px;
}
.loan-request-form .error-message {
  background: #ffe8e6;
  border: 1px solid #f5b4b0;
  color: #d93025;
}

/* Submit button */
.loan-request-form button[type="submit"],
.loan-request-form input[type="submit"] {
  background: #4b6cff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
    transition: background 0.2s 
ease, transform 0.2s 
ease;
    font-weight: bold;
    background: #0b2458 !important;
    color: #fff !important;
    width: 100%;
    display: block;
    max-width: 350px;
    -webkit-appearance: none;
    border-radius: 3px;
    letter-spacing: -1px;
    width: 100%;
    height: auto;
    padding: 15px 23px;
    max-width: 100%;
    margin: 15px auto;
    font-size: 17px;
    border: 1px solid #ccc;
    margin: auto; font-family: 'S-Core5';
}
.loan-request-form button[type="submit"]:hover {
  background: #3754d3;
  transform: translateY(-1px);
}
.loan-request-form button[type="submit"]:disabled {
  background: #b0b6d1;
  cursor: not-allowed;
  transform: none;
}

/* Label spacing */
.loan-request-form label {
  font-weight: 500;
  display: inline-block;
  margin-bottom: 5px;
  color: #333;
}

/* Checkbox group (for agree) */
.loan-request-form .agree-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}
.loan-request-form .agree-section input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* Optional template variations */
.loan-request-form.form1 {
  background: #f9fbff;
  border-left: 4px solid #4b6cff;
}

.loan-request-form.form2 {
  background: #fffdf5;
  border-left: 4px solid #ffb84b;
}

/* =============================
   Policy Popup Styles
   ============================= */
.overlay.policy {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 99999 !important;
  display: none;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.loan-request-form .overlay.policy .wrap980 {
  width: 90%;
  max-width: 700px;
  background: #fff;
  border-radius: 12px;
  padding: 20px 25px;
  margin: 60px auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  animation: fadeInScale 0.3s ease;
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.loan-request-form .overlay.policy .poptext {
  position: relative;
}

.loan-request-form .overlay.policy .close_new {
    position: absolute;
    top: -57px;
    right: -18px;
    background: #4b6cff;
    color: #fff;
    font-size: 17px !important;
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s 
ease;
    max-width: 110px;
    height: 50px;
    padding: 10px !important;
    line-height: 28px !important;
}

.loan-request-form .overlay.policy .close_new:hover {
  background: #2d4ad9;
}

.loan-request-form .overlay.policy .texthead {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 12px;
  color: #333;
}

.loan-request-form .overlay.policy .text {
  font-size: 14px;
  line-height: 1.6;
  color: #444;
  white-space: pre-line;
}

.loan-request-form .policy-btn {
      color: #0b2458;
    cursor: pointer;
    font-size: 14px;
    padding: 0px 7px;
}
.loan-request-form .policy-btn:hover {
  color: #2d4ad9;
}