/*body { background: #f8f9fa; }*/
.modal-header { background-color: #333; color: #fff; }
.modal-title{     font-size: 25px; }
#stepFormModal .btn-primary { background-color: #333; border-color: #333;padding: 10px 50px; }
#stepFormModal .btn-primary:hover { background-color: #c32a68; border-color: #c32a68; }
#stepFormModal .btn-secondary{ float: left; }
#stepFormModal .btn-success{ padding: 10px 50px; }

#stepFormModal .progress-bar { background-color: #c32a68; }
#stepFormModal .step { display: none; }
#stepFormModal .step.active { display: block; }
#multiStepForm {
  font-family: "Jost", sans-serif ;
}
#stepFormModal .step h6{ font-size: 22px; }
/* Styled radio options */
#stepFormModal .option-card {
  display: block;
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.25s ease;  font-weight: 600;
}
#stepFormModal .option-card:hover {
  border-color: #c32a68;
  box-shadow: 0 0 6px rgba(195, 42, 104, 0.2);
}
#stepFormModal .option-card span{
      font-size: 14px;
    color: #333; font-weight: 400;
}
#stepFormModal input[type="radio"] { display: none; }
#stepFormModal input[type="radio"]:checked + label.option-card {
  border-color: #c32a68;
  background-color: #fff2f8;
  /*box-shadow: 0 0 8px rgba(195, 42, 104, 0.4);*/
}
#stepFormModal .step-footer { text-align: right; margin-top: 25px; }
#stepFormModal .loading-spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid #fff;
  border-top: 3px solid transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 8px;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}



/* ============================== NEW QUIZ FOOTER CSS ============================== */

 /* GENERAL UI */
  .hlq-container{    max-width: 100%; 
      padding: 20px;
      border: 1px solid #e6e6e6;
      background: #fff;
      border-radius: 8px;
      font-family: Jost;}
      .hlq-container h2{margin-top:0; font-size: 24px;}
      .hlq-container h3{font-size: 22px;}
      .hlq-container h4{font-size: 22px;}
  #hlq-lead { margin-top: 30px; padding-top:30px; border-top:1px solid #ddd; }
  .hlq-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
  .hlq-options button{
      padding:10px 14px;border:1px solid #ccc;background:#f9f9f9;border-radius:6px;
      cursor:pointer;font-size:15px;transition:0.2s;
  }
  .hlq-options button:hover{transform:translateY(-2px)}
  .hlq-options button.active{
      background:#b02660;color:#fff;border-color:#176dd9;
  }
  .hlq-question {
      font-size: 20px;
      font-weight: 500;
      margin-top: 20px;
      border-top: 1px solid #ddd;
      padding-top: 20px;
  }
  /* PROGRESS BAR */
  .hlq-progress{height:8px;background:#f0f0f0;border-radius:999px;overflow:hidden;margin-bottom:12px}
  .hlq-progress-bar{height:100%;width:0%;background:#b02660;transition:0.3s}

  /* FORM */
  .hlq-lead label{display:block;margin-bottom:8px;font-size:14px}
  .hlq-lead input,.hlq-lead textarea{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px}
  .hlq-result {
      padding: 12px;
      border-radius: 6px;
      border: 1px dashed #ccc;
      margin-top: 12px;
      /* background: #b026602b; */
      background-color: #fff2f8;
  }                

  .hlq-nav{
      margin-top:15px;
      display:flex;
      justify-content:space-between;
  }
  .hlq-prev{
      background:#eee;
      padding:8px 14px;
      border-radius:5px;
      cursor:pointer;
      border:1px solid #ccc; font-size: 15px;    opacity: 0.6;
  }
  .hlq-prev:hover{
      background:#ddd;    opacity: 1;
  }