/* Navbar */

.navbar {
  border-bottom: 1px solid #e2e2e2;
}

/* Form Container */

.form-container {
  background: white;
  padding: 40px;
  margin-top: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Back link */

.back-link {
  font-weight: 500;
  margin-bottom: 25px;
}

/* Section titles */

.section-title {
  color: #d4178f;
  font-weight: 600;
  margin-bottom: 20px;
}

/* Border Input Style */

.border-input {
  position: relative;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  padding: 12px;
}

/* Label on Border */

.input-label {
  position: absolute;
  top: -9px;
  left: 12px;
  background: white;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #666;
}

/* Remove Default Input Border */

.custom-input {
  border: none;
  height: 40px;
  padding: 0;
  width: 100%;
  background: transparent;
}

.custom-input:focus {
  outline: none;
  box-shadow: none;
}

select.custom-input {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}

/* Focus Style */

.custom-input:focus {
  outline: none;
  box-shadow: none;
}

/* Textarea Fix */

textarea.custom-input {
  height: auto;
}

/* upload file  */

.upload-title {
  color: #d4178f;
  font-weight: 600;
}

.upload-box {
  border: 2px dashed #d4178f;
  border-radius: 10px;
  padding: 60px 20px;
  background: #f8f9fb;
}

.upload-icon {
  font-size: 40px;
  color: #d4178f;
  margin-bottom: 10px;
}

.upload-text {
  color: #555;
  margin-bottom: 10px;
}

.or-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ddd;
  margin: 0 10px;
}

.browse-btn {
  border: 1px solid #4c6ef5;
  color: #4c6ef5;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  background: white;
  transition: 0.2s;
}

.browse-btn:hover {
  background: #4c6ef5;
  color: white;
}

/* SOCIAL MEDIA SECTION */

.social-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.social-input {
  flex: 1;
  display: flex;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  background: white;
}

.social-select {
  border: none;
  padding: 12px 16px;
  min-width: 160px;
  border-right: 1px solid #e0e0e0;
  background: white;
}

.social-text {
  border: none;
  flex: 1;
  padding: 12px 16px;
  outline: none;
}

.social-delete {
  margin-left: 10px;
  border: none;
  background: #f8d7da;
  color: #555;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  font-size: 18px;
}

.add-social {
  background: #f8d7da;
  text-align: center;
  padding: 12px;
  border-radius: 6px;
  color: #6c757d;
  cursor: pointer;
  margin-top: 20px;
}

/* Cancel Button */

.cancel-btn {
  background: white;
  color: #333;
  border: 1px solid #ddd;
  padding: 10px 30px;
  border-radius: 8px;
  font-weight: 500;
}

.cancel-btn:hover {
  background: #f5f5f5;
}

/* Save Button */

.save-btn {
  background: #d4178f;
  color: white;
  padding: 10px 30px;
  border: none;
  border-radius: 8px;
  font-weight: 500;
}

.save-btn:hover {
  background: #d4178f;
}

/* STUDENT UPLOAD */
.stud-upload-box {
  border: 2px dashed #d4178f;
  border-radius: 6px;
  padding: 50px 20px;
  text-align: center;
  background: #f8f9fb;
  cursor: pointer;
}

.stud-upload-box:hover {
  background: #f1f3f6;
}

.stud-upload-icon {
  font-size: 28px;
  color: #d4178f;
}

.stud-upload-text {
  color: #d4178f;
  font-weight: 500;
}

.stud-upload-subtext {
  font-size: 14px;
  color: #6c757d;
}

.card-radio {
  display: block;
  cursor: pointer;
}

.card-option {
  border: 2px solid #ddd;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: 0.3s;
  background: #fff;
}

.card-option h6 {
  font-weight: 600;
  margin-bottom: 5px;
}

.card-option p {
  font-size: 13px;
  color: #777;
  margin: 0;
}

/* Hover effect */
.card-option:hover {
  border-color: #d4178f;
  transform: translateY(-3px);
}

/* Selected state */
.card-radio input:checked + .card-option {
  border-color: #d4178f;
  background: #fff5f5;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
}

.back-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.back-arrow {
  font-size: 22px;
  cursor: pointer;
  transition: 0.3s;
}

.back-arrow:hover {
  color: #0d6efd;
  transform: translateX(-3px);
}

.back-text {
  margin: 0;
  font-weight: 600;
}



/*=========================================
Responsive Design
=========================================*/

/* Large Devices */
@media (max-width:1200px){

    .form-container{
        padding:35px;
    }

    .upload-box,
    .stud-upload-box{
        padding:45px 20px;
    }

}


/* Tablets */
@media (max-width:992px){

    .form-container{
        padding:30px 25px;
        margin-top:20px;
    }

    .section-title{
        font-size:20px;
    }

    .border-input{
        padding:10px;
    }

    .upload-box,
    .stud-upload-box{
        padding:40px 20px;
    }

    .social-select{
        min-width:130px;
    }

    .cancel-btn,
    .save-btn{
        padding:10px 24px;
    }

}


/* Mobile */
@media (max-width:768px){

    .form-container{
        padding:20px 15px;
        margin-top:15px;
    }

    .back-wrapper{
        margin-bottom:15px;
    }

    .section-title{
        font-size:18px;
    }

    .border-input{
        margin-bottom:15px;
    }

    .custom-input{
        height:38px;
        font-size:14px;
    }

    textarea.custom-input{
        min-height:100px;
    }

    .upload-box,
    .stud-upload-box{
        padding:30px 15px;
    }

    .upload-icon,
    .stud-upload-icon{
        font-size:30px;
    }

    .upload-title{
        font-size:16px;
    }

    .upload-text,
    .stud-upload-subtext{
        font-size:14px;
    }

    .browse-btn{
        width:100%;
        text-align:center;
        padding:10px;
    }

    /* Social Section */
    .social-row{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .social-input{
        flex-direction:column;
    }

    .social-select{
        width:100%;
        border-right:none;
        border-bottom:1px solid #e0e0e0;
        min-width:100%;
    }

    .social-text{
        width:100%;
    }

    .social-delete{
        width:100%;
        height:45px;
        margin-left:0;
    }

    .cancel-btn,
    .save-btn{
        width:100%;
        margin-bottom:10px;
    }

}


/* Small Mobile */
@media (max-width:576px){

    .form-container{
        padding:15px;
        border-radius:6px;
    }

    .section-title{
        font-size:17px;
    }

    .input-label{
        left:10px;
        font-size:10px;
    }

    .custom-input{
        font-size:13px;
        height:36px;
    }

    .upload-box,
    .stud-upload-box{
        padding:25px 12px;
    }

    .upload-icon,
    .stud-upload-icon{
        font-size:26px;
    }

    .browse-btn{
        font-size:13px;
    }

    .social-select,
    .social-text{
        padding:10px 12px;
        font-size:13px;
    }

    .add-social{
        padding:10px;
        font-size:14px;
    }

    .card-option{
        padding:15px;
    }

    .card-option h6{
        font-size:15px;
    }

    .card-option p{
        font-size:12px;
    }

    .back-arrow{
        font-size:18px;
    }

    .back-text{
        font-size:16px;
    }

}


/* Extra Small Devices */
@media (max-width:400px){

    .form-container{
        padding:12px;
    }

    .section-title{
        font-size:16px;
    }

    .upload-box,
    .stud-upload-box{
        padding:20px 10px;
    }

    .upload-icon,
    .stud-upload-icon{
        font-size:22px;
    }

    .upload-text,
    .stud-upload-subtext{
        font-size:12px;
    }

    .browse-btn,
    .cancel-btn,
    .save-btn{
        font-size:13px;
        padding:9px;
    }

    .social-select,
    .social-text{
        font-size:12px;
    }

    .card-option{
        padding:12px;
    }

}