/* =========================================== */
/* --- Base Styles (Keep Existing) --- */
/* =========================================== */
html {
    box-sizing: border-box;
}

body {
  background-color: rgb(226, 230, 231);
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  height: auto;
  width: 100%; /* Use 100% instead of inherit for body */
  position: relative;
  box-sizing: border-box;
}

*, ::after, ::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container-fluid {
  width: 1100px; /* Keep original fixed width if desired */
  max-width: 100%; /* Allow shrinking on smaller screens */
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
  height: auto;
  overflow: visible;
}

/* =========================================== */
/* --- QBlock Styles (Revised) --- */
/* =========================================== */

.qblock {
    background: #ffffff;
    margin-top: 10px;
    padding: 15px 20px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%; /* Ensure it doesn't exceed container */
    margin-left: auto;
    margin-right: auto;
    height: auto;
    overflow: visible; /* Allow content to flow */
    font-family: 'Times New Roman', Times, serif; /* Match FIPI style */
    font-size: 18px; /* Base font size for question */
    line-height: 1.5;
    color: #333;
}

/* General paragraphs within qblock - AVOID JUSTIFY HERE */
.qblock p {
  margin: 0 0 10px 0; /* Default bottom margin */
  text-indent: 0;
  text-align: left; /* Default to left align */
}

/* Hint styling */
.qblock .hint {
  margin-bottom: 15px;
  line-height: 1.4;
  font-family: 'Times New Roman', Times, serif; /* Consistent font */
  font-weight: 700; /* Bold */
  font-style: normal;
  font-size: 18px; /* Match qblock base */
  color: #333333;
  text-align: left; /* Ensure hint is left-aligned */
}

/* Ensure images don't overflow */
.qblock img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}
/* Hide specific unwanted images if necessary */
.hidden-image {
     display: none;
}


/* Override inline bgcolor attributes if needed */
.qblock table[bgcolor], .qblock td[bgcolor] {
    background-color: transparent !important;
}

/* --- Styling for the Radio Button Options Table --- */

/* Target the specific table holding the radio options */
.qblock .distractors-table {
    width: 100%;
    border-collapse: collapse; /* Important for clean layout */
    margin-top: 10px;
    margin-bottom: 15px;
    table-layout: auto; /* Let browser determine column widths based on content/CSS */
}

/* General cell styling within the options table */
.qblock .distractors-table td {
    padding: 4px; /* Adjust padding as needed */
    padding-bottom: 8px; /* Space between rows */
    vertical-align: top; /* Align radio, number, and text to the top */
    text-align: left; /* Default alignment */
    border: none; /* Remove borders if any were inherited */
}

/* Style the FIRST cell (containing the radio button) */
.qblock .distractors-table td:nth-child(1) {
    width: 20px; /* Fixed width for the radio button */
    padding-right: 0;
}

/* Style the SECOND cell (containing the number like "1)") */
.qblock .distractors-table td:nth-child(2) {
    width: 25px; /* Fixed width for the number */
    font-weight: bold;
    text-align: right;
    padding-left: 0;
    padding-right: 8px; /* Space between number and text */
}

/* Style the THIRD cell (containing the option text) */
.qblock .distractors-table td:nth-child(3) {
    width: auto; /* Allow this cell to take remaining space */
    text-align: left; /* Ensure text is left-aligned */
}

/* Ensure paragraphs within the option text cell have no extra margin */
.qblock .distractors-table td:nth-child(3) p {
    margin: 0;
    padding: 0;
    line-height: 1.4; /* Adjust line height for readability if needed */
     font-size: 18px; /* Ensure text matches base */
     font-family: 'Times New Roman', Times, serif; /* Ensure font matches */
}

/* Style the clickable row */
.qblock .active-distractor {
    cursor: pointer;
    transition: background-color 0.2s ease; /* Smooth hover */
}
.qblock .active-distractor:hover {
    background-color: #f2f2f2; /* Hover effect */
}
.qblock .active-distractor.checked-distractor {
    background-color: #e8e8e8; /* Checked effect */
}


/* --- Form Elements --- */

/* General form element consistency (Inputs, Selects) */
.qblock select,
.qblock input[type="text"],
.qblock input[type="number"],
.qblock textarea /* Added textarea */ {
    background: #f0f2f2;
    border: 1px solid #ccc;
    padding: 6px 8px;
    margin: 1px 0 5px 0; /* Add some bottom margin */
    border-radius: 3px;
    font-size: 16px; /* Slightly smaller for input fields */
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif; /* Use body font */
    box-sizing: border-box;
    max-width: 100%;
    display: inline-block; /* Align better */
    vertical-align: middle;
}

.qblock input[type="text"]:focus,
.qblock input[type="number"]:focus,
.qblock select:focus,
.qblock textarea:focus {
    background: #e9eded;
    border-color: #005d65;
    outline: none;
    box-shadow: 0 0 0 2px rgba(67, 163, 159, 0.3); /* Subtle focus ring */
}

/* Radio/Checkbox alignment */
.qblock input[type="radio"],
.qblock input[type="checkbox"] {
  margin: 0 5px 0 2px;
  vertical-align: middle;
  position: relative;
  top: -1px; /* Fine-tune vertical alignment */
}


/* --- Answer Input & Submit Button --- */
#answer {
    width: 100%;
    max-width: 250px;
    min-height: 34px;
    margin: 0 10px 10px 0; /* Bottom margin */
    /* Inherits other styles from the general input rule above */
}
#submit {
  /* display: none; /* Keep hidden initially if needed */
  display: inline-block; /* Use inline-block for alignment */
  padding: 6px 15px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid #055154;
  border-radius: 4px;
  color: #055154;
  background-color: #ffffff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#submit:hover {
  color: #ffffff;
  background-color: #43a39f;
  border-color: #43a39f;
}

#submit:focus {
  color: #ffffff;
  background-color: #005d65;
  border-color: #00474d;
  outline: 2px solid #43a39f;
  outline-offset: 1px;
}


/* --- MathJax Styling (Keep As Is or Refine) --- */
/* Option 1: Original Overflowing Style */
.MathJax_Display,
.MJXp-math {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto; /* Allows horizontal scroll */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on touch */
    padding: 8px 5px; /* Add some padding around scrolled math */
    text-align: center; /* Center the math block */
    box-sizing: border-box;
    margin: 1em 0; /* Vertical margin */
    border: 1px solid #eee; /* Optional: subtle border to show scroll area */
    background: #fdfdfd; /* Optional: subtle background */
}
/* Inline MathJax scroll */
span.MathJax, span.MJXp-math[id^="MJXp-Span"] {
    display: inline-block; /* Allows sizing and overflow */
    max-width: 100%;      /* Prevent breaking layout */
    overflow-x: auto;     /* Scroll if needed */
    overflow-y: hidden;
    vertical-align: middle;/* Align with surrounding text */
    padding: 0 2px;       /* Minimal horizontal padding */
    text-align: left;       /* Align math internally left */
    margin: 0;
    white-space: nowrap; /* Prevent wrapping within the math itself */
    border: 1px solid #eee; /* Optional */
    background: #fdfdfd; /* Optional */
}

/* Ensure MathJax containers don't collapse if empty */
.MathJax_Display:empty,
span.MathJax:empty {
    min-height: 1em;
}

/* =========================================== */
/* --- Helper classes --- */
/* =========================================== */
.separator {
    border-top: 1px solid #ccc;
    margin: 15px 0;
}

/* --- Add this rule to hide the task header and bottom marker --- */
.task-header-panel,
#bottom_marker {
    display: none;
}