/*
 * ===============================================
 * CSS for MCQ Question Options
 * ===============================================
 */

/* Main container for a single option row */
.mcq-option-group {
    display: flex;
    align-items: center;
    gap: 15px; /* Adds space between elements inside */
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    background-color: #f8f9fa; /* A very light grey background */
    border: 1px solid #dee2e6;
    transition: box-shadow 0.2s ease-in-out;
}

.mcq-option-group:focus-within {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* The "Option X:" label */
.mcq-option-group > label:first-of-type {
    font-weight: 500;
    color: #495057;
    white-space: nowrap; /* Prevents the label from wrapping */
}

/* The text input field for the answer */
.mcq-option-group input[type="text"] {
    flex-grow: 1; /* This is key: it makes the text field fill available space */
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 1rem;
    color: #212529;
    transition: border-color 0.2s ease;
}

.mcq-option-group input[type="text"]:focus {
    border-color: #4d94ff;
    outline: none;
}


/* --- Styling for the "Correct" Radio Button --- */

/* Hide the default radio button */
.mcq-option-group input[type="radio"] {
    display: none;
}

/* The label for the custom radio button ("Correct") */
.mcq-option-group .radio-label {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #6c757d;
    padding-left: 28px; /* Make space for our custom circle */
    user-select: none; /* Prevents text selection on click */
    font-size: 0.9em;
    transition: color 0.2s ease;
}

/* The custom radio button's outer circle */
.mcq-option-group .radio-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #adb5bd;
    border-radius: 50%;
    background-color: #fff;
    transition: border-color 0.2s ease;
}

/* The inner dot that appears when checked */
.mcq-option-group .radio-label::after {
    content: '';
    position: absolute;
    left: 5px; /* (20px width - 10px dot) / 2 */
    top: 50%;
    transform: translateY(-50%) scale(0); /* Hidden by default */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #007bff;
    transition: transform 0.2s ease;
}

/* --- Styling for the checked state --- */

/* When the radio is checked, change the label's color */
.mcq-option-group input[type="radio"]:checked + .radio-label {
    /* color: #007bff; */
    color: #00e00b;
    font-weight: bold;
}

/* Change the border color of the circle */
.mcq-option-group input[type="radio"]:checked + .radio-label::before {
    border-color: #007bff;
}

/* Scale the inner dot into view */
.mcq-option-group input[type="radio"]:checked + .radio-label::after {
    transform: translateY(-50%) scale(1);
}





/*
 * ===============================================
 * CSS for True/False Question Options
 * ===============================================
 */

/* The parent .form-group that holds the two T/F options */
.form-group .radio_div {
    display: inline-block; /* Fallback for older browsers */
}

/* Let's use Flexbox for modern alignment and remove the <br> tag's effect */
.form-group:has(> .radio_div) {
    display: flex;
    gap: 15px; /* Creates space between the True and False buttons */
}
.form-group:has(> .radio_div) br {
    display: none; /* We don't need the <br> tag when using flexbox */
}

/* The container for each button (True or False) */
.radio_div {
    flex: 1; /* Makes both buttons grow to fill the space equally */
    position: relative;
    border: 2px solid #adb5bd;
    border-radius: 8px;
    background-color: #fff;
    transition: transform 0.1s ease-out, border-color 0.2s ease;
}

.radio_div:hover {
    border-color: #6c757d;
}

.radio_div:active {
    transform: scale(0.98); /* Gives a nice "press" effect on click */
}

/* --- The clickable Label --- */
.radio_div .radio-label {
    display: block; /* Make the label fill the entire container */
    width: 100%;
    padding: 20px 15px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    user-select: none;
    border-radius: 6px; /* Slightly smaller than parent for a nice inset look */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Important: Override styles inherited from the MCQ .radio-label */
.radio_div .radio-label::before,
.radio_div .radio-label::after {
    display: none; /* Hide the custom radio circles from the MCQ style */
}

/* Hide the actual radio button */
.radio_div input[type="radio"] {
    display: none;
}


/* --- Styling for the CHECKED state --- */

/* Style for the "True" option when selected */
#correct_true:checked + .radio-label {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green */
}
/* Also change the parent border */
#correct_true:checked ~ .radio-label {
    /* Using a trick because we can't select the parent div */
    /* Let's change the container's border using :has() for modern browsers */
}
.radio_div:has(#correct_true:checked) {
    border-color: #28a745;
}

/* Style for the "False" option when selected */
#correct_false:checked + .radio-label {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red */
}
.radio_div:has(#correct_false:checked) {
    border-color: #dc3545;
}

/* Optional: Add icons for more visual flair */
#correct_true:checked + .radio-label::before {
    content: '✔ ';
    font-weight: bold;
}

#correct_false:checked + .radio-label::before {
    content: '✖ ';
    font-weight: bold;
}


/* --- Styles for Custom Image Upload on edit_question.php --- */

/* Wrapper for the image upload controls for better layout */
.image-upload-controls {
    display: flex;
    align-items: center;
    gap: 15px; /* Adds space between the "Choose Image" and "Cancel" buttons */
}

/* Style the label to look like a button */
/* The .button and .secondary classes are already in your form, but this ensures consistency */
label.button.secondary {
    cursor: pointer; /* Show a hand cursor on hover */
    display: inline-block; /* Ensures proper spacing and alignment */
}

/* Style the "Cancel Selection" button to look like a link */
/* This makes it less visually prominent than the primary action button */
.button-link {
    background: none;
    border: none;
    color: #d9534f;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: 0.9em;
    vertical-align: middle; /* Aligns it better with the button */
}

.button-link:hover {
    color: #c9302c; /* A slightly darker red on hover */
}

/* Optional: Add a subtle transition to the image preview for a smoother appearance */
#image-preview-container {
    transition: all 0.3s ease-in-out;
}

/* Ensure the image preview itself doesn't exceed its container */
#image-preview {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px; /* Optional: adds slightly rounded corners */
}

/* This is the container for the image. We give it a max-width. */
.question-image-container {
    max-width: 350px; /* Increase this value for an even larger preview */
    margin-bottom: 15px;
    background-color: #f9f9f9;
    border: 1px dashed #ccc;
    padding: 8px;
    border-radius: 5px;
}

/* This styles the image itself within the container. */
.question-image-container img {
    max-width: 100%; /* The image will never be wider than its container */
    height: auto;    /* This maintains the correct aspect ratio */
    display: block;  /* Removes extra space below the image */
    border-radius: 4px;
}


.form-group-inline {
  display: flex;
  gap: 16px; /* space between the two fields */
}

.form-group-inline .form-group {
  flex: 1; /* make both divs take equal width */
}

.form-group-inline label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.form-group-inline input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

/* Optional: stack vertically on small screens */
@media (max-width: 600px) {
  .form-group-inline {
    flex-direction: column;
  }
}



/* Styles for Drag-and-Drop Reordering */
.drag-handle {
    cursor: grab;
    margin-right: 10px;
    color: #777;
    font-size: 1.2em;
    display: inline-block;
    vertical-align: middle;
    touch-action: none; /* for better mobile experience */
}

.drag-handle:active {
    cursor: grabbing;
}

/* Class added by SortableJS for the element being dragged */
.sortable-ghost {
    opacity: 0.4;
    background: #f0f8ff;
}


/*
 * Styling for All Draggable Question Options (MCQ & Ordering)
 */

/* Common container style for a clean, card-like appearance */
.mcq-option-group,
.ordering-option-group {
    display: flex;            /* Aligns items on the same line */
    align-items: center;      /* Vertically centers all items */
    background-color: #f8f9fa;/* A light background color */
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin-bottom: 8px;       /* Adds space between each draggable option */
}

/* Style for the drag handle icon */
.drag-handle {
    cursor: grab;
    margin-right: 15px; /* Increased margin for better spacing */
    color: #777;
    font-size: 1.2em;
    touch-action: none; /* for better mobile experience */
}

.drag-handle:active {
    cursor: grabbing;
}

/* Visual feedback for the item being dragged (SortableJS class) */
.sortable-ghost {
    opacity: 0.4;
    background: #cce5ff; /* A slightly more visible ghost color */
}


/* --- Specific styles for MCQ Options --- */

/* Make the text input fill available space */
.mcq-option-group input[type="text"] {
    flex-grow: 1; /* This is key for a responsive layout */
    margin-right: 15px; /* Space between text field and "Correct" radio button */
}

/* Prevent labels from wrapping */
.mcq-option-group label,
.ordering-option-group label {
    white-space: nowrap;
    margin-right: 10px;
}

/* Small adjustment for the "Correct" label next to the radio button */
.mcq-option-group .radio-label {
    margin-left: 5px;
}


/* --- Specific styles for Ordering Options --- */

/* Make the text input fill available space */
.ordering-option-group input[type="text"] {
    flex-grow: 1; /* Ensures it fills the line */
}