body { font-family: 'Roboto', sans-serif; background: #c8ecf5; }

.container { max-width: 900px; margin-top: 30px; }
.card { border-radius: 12px; box-shadow:0 4px 15px rgba(0,0,0,0.1); }
.section-title1 { font-size:2rem; font-weight:700; margin-bottom:1rem; position:relative; }
.section-title1::after { content:''; position:absolute; width:60px; height:4px; background:#4e73df; left:0; bottom:-8px; border-radius:2px; }
.form-control, .form-select { border-radius: 8px; }
.radio-group input { accent-color: #4e73df; transform: scale(1.2); margin-right:5px; }
.photo-section { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; border: 2px dashed #4e73df; border-radius: 12px; background: #e6f7ff; }
.photo-preview { width: 170px; height: 170px; border-radius: 12px; object-fit: cover; border: 2px solid #4e73df; }
.photo-buttons button { background:#4e73df; color:#fff; border:none; padding:0.6rem 1.2rem; border-radius:8px; font-weight:500; }
.photo-buttons button:hover { background:#1cc88a; }
.form-actions button { background:#4e73df; color:#fff; border:none; padding:10px 30px; border-radius:8px; font-weight:600; }
.form-actions button:hover { background:#1cc88a; }



/* === Beautify the form only === */
#studentForm {
  font-family: 'Nunito', sans-serif; /* new font for form */
  background: #ffffff;
  padding: 2.5rem;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}

/* section titles with subtle icon */
#studentForm h5::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 8px;
  color: #1cc88a;
}

/* labels */
#studentForm .form-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #4e73df;
}

/* inputs / selects */
#studentForm .form-control,
#studentForm .form-select {
  border-radius: 12px;
  border: 1px solid #d9e2ef;
  padding-left: 2.2rem; /* room for icon */
  transition: all 0.3s ease;
}
#studentForm .form-control:focus,
#studentForm .form-select:focus {
  border-color: #1cc88a;
  box-shadow: 0 0 0 0.15rem rgba(28,200,138,0.15);
}

/* icons inside inputs */
.input-icon {
  position: relative;
}
.input-icon i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #4e73df;
}

/* radio group */
#studentForm input[type="radio"] {
  accent-color: #1cc88a;
  transform: scale(1.1);
}

/* submit button */
#studentForm .form-actions button {
  background: linear-gradient(90deg,#4e73df,#1cc88a);
  color: #fff;
  border: none;
  padding: 0.9rem 2rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  letter-spacing: .4px;
  transition: transform .2s ease;
}
#studentForm .form-actions button:hover {
  transform: translateY(-2px);
}


  /* Toast notification styles */
  .toast-container { 
    position: fixed; 
    top: 1rem; 
    right: 1rem; 
    z-index: 1080; 
  }

  /* Loading spinner styles for ALL buttons */
  .btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
  }
  
  .btn-loading .spinner-border {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -12px;
    margin-top: -12px;
  }
  
  .btn-loading .btn-text {
    opacity: 0;
  }
  
  /* Specific styles for different button types */
  .photo-buttons .btn-loading .spinner-border {
    margin-left: -8px;
    margin-top: -8px;
  }
  
  .photo-buttons .btn-loading .btn-text {
    opacity: 0;
  }
   /* Autocomplete Styles */
    .autocomplete {
      position: relative;
    }
    
    .autocomplete-items {
      position: absolute;
      border: 2px solid #d4d4d4;
      border-bottom: none;
      border-top: none;
      
      z-index: 99;
      top: 100%;
      left: 0;
      right: 0;
      max-height: 200px;
      overflow-y: auto;
      background: rgb(23, 19, 19);
    }
    
    .autocomplete-item {
      padding: 10px;
      cursor: pointer;
      border-bottom: 1px solid #d4d4d4;
      background-color: #fff;
    }
    
    .autocomplete-item:hover {
      background-color: #e9e9e9;
    }
    
    .autocomplete-item small {
      color: #666;
      font-size: 0.85em;
    }