/*border:1px solid red;*/

/*softyellow f79c2d; softyellow-dark e68a1f; brickred d14b4b; leafgreen 6cae75; leafgreen-dark: 588c5f; cream fff6eb; richcream ffeedc; teal 2b9da6; deepteal 23848c;*/

.frame-assessment{display:flex; flex-direction:column; align-items:center; padding:2rem 2rem 8rem 2rem; width:60%; max-width:50rem; min-height:12rem;}

.cell-assessment{display:flex; flex-direction:column; width:100%;}

.cell-assessment-intro{display:flex; justify-content:center; width:100%; margin:1rem 0 2rem 0;}

.cell-assessment-intro p{font-size:1.2rem; line-height:1.8; text-align:center;}

/* Form wrapper */
.assessment-form{display:flex; flex-direction:column; gap:0.1rem;}

/* General labels */
.assessment-form label, .assessment-form .radio-label{display:flex; flex-direction:column; font-size:1rem; font-weight:600; color:#333333;}

/* Radio labels */
.assessment-form .radio-label{margin:0; padding:0;} /*See also General Labels above*/

/* Form fields */
.assessment-form input, .assessment-form select, .assessment-form textarea{margin:0.3rem 0 1.2rem 0; padding:0.5rem; border:1px solid #ffeedc; border-radius:0.3rem; width:100%; font-size:1rem;}

.assessment-form input :not(.assessment-form .phone), .assessment-form textarea{width:100%;}
.assessment-form .phone{max-width:50%;}
.assessment-form select{max-width:50%;}

/* Mobile-friendly select styling to override native appearance */
/* Custom arrow for select */
.assessment-form select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-color:#fff; color:#333333; border:1px solid #ffeedc; border-radius:0.3rem;
  padding:0.5rem 1.75rem 0.5rem 0.5rem; font-size:1rem;
  background-image:url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><polygon points='0,0 10,0 5,5' fill='%23333'/></svg>");
  background-repeat:no-repeat;
  background-position: right 0.5rem center;
  background-size:0.65rem;
}



/* Optional custom dropdown arrow (if needed) */
.assessment-form select::after{content:"▼"; position:absolute; right:0.75rem; top:50%; transform:translateY(-50%); pointer-events:none; font-size:0.8rem; color:#333333;}

/*Student block*/
.student-block{margin:1rem 0 1rem 0; padding:1.5rem 0 0 0; border-top:1px solid #6cae75;}

.student-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem;}

.student-header h3{margin:0; font-size:1.2rem;}

.remove-student-btn{background:none; border:none; color:#6cae75; text-decoration:underline; font-size:0.9rem; cursor:pointer;}

.remove-student-btn{background:none; border:none; color:#6cae75; text-decoration:underline; font-size:0.9rem; padding:0; margin-top:0.5rem; cursor:pointer;}

.remove-student-btn:hover{color:#5aa462;}

/* Radio group wrapper */
.radio-group{display:flex; flex-direction:row; gap:1.5rem; align-items:center; margin:0.5rem 0 0.5rem 0;}

/* Individual radio labels */
.radio-group label{display:flex; flex-direction:row; align-items:center; font-weight:normal; color:#333333; margin:0 0 0 2rem; cursor:pointer; line-height:1;}

/* Make the radio input and text line up nicely */
.radio-group input[type="radio"]{margin:1.2rem 0.5rem 1.2rem 0; vertical-align:middle;}

/* Add student button */
#add-student{background:#6cae75; color:#fff; border:none; padding:0.5rem 1rem; margin:0.5rem 0 2rem 0; border-radius:0.3rem; cursor:pointer;}

#add-student:hover{background:#5aa462;}
#add-student:active{background-color:#478a50;transform:scale(0.97);}

/* Submit button */
.submit-btn{background:#6cae75; color:#fff; border:none; padding:0.8rem 1.2rem; border-radius:0.4rem; font-size:1rem; cursor:pointer;}

.submit-btn:hover{background:#5aa462;}

/* Honeypot anti-spam field */
.honeypot{position:absolute; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden;}

/* Responsive tweaks */
@media(max-width:991px){
    .frame-assessment{width:70%;}
    
}

@media(max-width:767px){
    .frame-assessment{width:100%;}
}

@media(max-width:599px){
.radio-group{flex-direction:column; gap:1rem; align-items:flex-start; margin:1rem 0 1.5rem 0.125rem;}  

  .radio-group label{display:flex; flex-direction:row; align-items:center; margin:0; text-align:left;}  

  .radio-group input[type="radio"]{margin:0 0.5rem 0 0;}
}



/* Thank you message */
.subcell-thanks{display:flex; flex-direction:column; justify-content:center; align-items:center; align-self:center; width:80%; min-height:2rem;}

.subcell-thanks p{margin-bottom:2rem; color:#6cae75; font-weight:600; text-align:center; line-height:2;}