/** Default style for listing answers for Multiple Choice one answer and multiple answers**/
.q-answer-options-container {
	display: flex;
	flex-direction: row;
	gap: 10px; /* Space between each option */
	padding: 10px;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 10px;
}

.q-answer-options-container input {
	margin-right: 10px; /* Space between radio button and label */
	transform: scale(1.2); /* Increase size of radio button */
}

.q-answer-options-container label {
	font-size: 16px;
	color: #333;
	cursor: pointer; /* Makes the label clickable */
	width: 100%;
	text-align: left;
}

.q-answer-options-container:hover {
	background-color: #f5f5f5;
}
/** Listing of naswers for Multiple choice answers One Answer and Multiple Answers as column, row, or smart self organizing in row, column, or stack answers in multiple rows **/
.listing {
	gap: 1rem; /* spacing between items */
}
.listing.column {
  display: flex;
  flex-direction: column;
  
}
.listing.row {
  display: flex;
  flex-direction: row; /* this is default, can be omitted */
  flex-wrap: nowrap; /* prevent wrapping to new line */
  overflow-x: auto; /* enables horizontal scrolling */
  width: 100%; /* take full width of parent */
  box-sizing: border-box;
  gap: 10px; /* optional spacing between items */
}

.listing.row > * {
  flex: 0 0 auto; /* don't grow, don't shrink, auto basis */
  width: auto; /* let content determine width */
  /* or set a fixed width if you prefer, like: width: 300px; */
}.listing.smart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  
}
.button-style-input {
	margin-bottom: 10px;
	transition: background-color 0.2s, color 0.2s;
	border-radius: 5px;
}
/** Button style input for radio and checkbox **/
.button-style-input input {
  display: none;
  
}

.button-style-input label {
  display: inline-block;
  padding: 0.5em 1em;
  margin: 0.3em;
  border: none; /* No border */
  border-radius: 0.3em;
  background-color: #f0f0f0; /* Light grey background */
  color: #555; /* Darker grey text for contrast */
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  width: 96%;
}


/* Selected state */
.button-style-input:has(input:checked) {
  background-color: #555 !important;
  color: #fff;
  

}
.button-style-input input:checked + label {
  background-color: #555 !important; /* Dark grey when selected */
  color: #fff; /* White text for contrast */
}
/* Correct Answer Style */
.right_answer {
    background-color: #e6f4ea !important;
    border: 1px solid #34a853 !important;
    color: #137333 !important;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

.right_answer label {
    color: #137333 !important;
    font-weight: 600;
}

/* Wrong Answer Style */
.wrong_answer {
    background-color: #fce8e6 !important;
    border: 1px solid #ea4335 !important;
    color: #c5221f !important;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

.wrong_answer label {
    color: #c5221f !important;
    font-weight: 600;
}


.missing-input-label {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #344054;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
    margin: 10px;
}
.missing-input-field {
    display: inline-block;
    min-width: 140px;
    max-width: 260px;
    padding: 6px 10px;
    font-size: 0.95rem;
    border: 1px dashed #98a2b3;
    border-radius: 6px;
    background-color: #f9fafb;
    color: #101828;
    text-align: center;
    transition: all 0.15s ease;
}
.missing-input-field:focus {
    outline: none;
    border-style: solid;
    border-color: #667085;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(102, 112, 133, 0.15);
}
.missing-input-field:hover {
    border-color: #667085;
    background-color: #ffffff;
}