/* =======================================================
 * IELTS Reading Test Styles
 * Extracted from hardcoded HTML tags and inline styles.
 * ======================================================= */

 /* Container for the title and button */
.test-header {
  padding: 15px 10px;
  border-bottom: 1px solid #f0f0f0; /* Optional: adds a clean separator */
}

/* Make the "Reading Test 16" look bold and the "#2" look lighter */
.test-title {
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  font-size: 1.5rem;
}

.test-subtitle {
  color: #94a3b8;
  font-weight: 300;
  margin-left: 5px;
}

/* Custom Return Button Styling */
.btn-menu-return {
  border: 1.5px solid #2d6fc5;
  color: #2d6fc5;
  background: transparent;
  padding: 8px 20px;
  border-radius: 30px; /* Matching the rounded vibe of your panes */
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-menu-return:hover {
  background-color: #2d6fc5;
  color: white;
  box-shadow: 0 4px 12px rgba(45, 111, 197, 0.2);
  transform: translateY(-1px); /* Subtle "lift" effect */
}

/* --- Split-Pane Layout --- */
.split-pane-container {
  display: flex;
  gap: 20px;
  height: calc(100vh - 120px);
  overflow: hidden;
  margin-top: 10px;
  padding: 10px;
}

/* The Container Frame */
.pane-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16px; /* Slightly rounder for a modern look */
  border: 1px solid #e0e4e8; 
  border-top: 6px solid #2d6fc5; 
  box-shadow: 0 10px 25px rgba(0,0,0,0.03); /* Softer, larger shadow */
  overflow: hidden;
  margin: 10px;
}

/* The Scrolling Area */
.pane-content {
  flex: 1;
  overflow-y: auto;
  padding: 35px; /* More breathing room */
  font-size: 1.05rem;
  line-height: 1.7;
  color: #334155; /* Soft dark grey, easier on eyes than pure black */
}

/* Modern Scrollbar */
.pane-content::-webkit-scrollbar {
  width: 6px; /* Thinner is more elegant */
}

.pane-content::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* Subtle thumb */
  border-radius: 10px;
}

.pane-content::-webkit-scrollbar-thumb:hover {
  background: #2d6fc5; /* Turns blue only when interacting */
}

.pane-content::-webkit-scrollbar-track {
  background: transparent; /* Makes it feel more "seamless" */
}

/* The Styled Word Bank Container */
.word-bank-container {
  background: #f1f5f9;           /* Soft background to make it stand out */
  border-radius: 8px;
  border-left: 5px solid #2d6fc5; /* The signature blue accent */
  padding: 15px 20px;
  margin: 20px 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); /* Subtle inner border */
}

.word-bank-title {
  display: block;
  font-weight: 700;
  color: #2d6fc5;
  margin-bottom: 12px;
  font-size: 0.9rem;
  text-transform: uppercase;
}

/* The Compact Two-Column List */
.word-bank-list {
  column-count: 2;        /* This is what makes it compact */
  column-gap: 20px;
  margin: 0;
  padding: 0;
  line-height: 2.2;       /* Adds space between lines for clarity */
  color: #334155;
  font-family: inherit;
}

/* Styling the Letters (A, B, C...) */
.word-bank-list b {
  color: #0b519c;
  font-weight: 800;
  margin-right: 8px;
  display: inline-block;
  width: 15px; /* Keeps the words perfectly aligned */
}

@media (max-width: 480px) {
  .word-bank-list {
    column-count: 1;
  }
}

/*.pane-half {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #a0a2a4;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  border-top-width: thick;
  border-top-style: solid;
  
  border-top-color: rgb(45, 111, 197);
}

.pane-half::-webkit-scrollbar {
  width: 8px;
}

.pane-half::-webkit-scrollbar-thumb {
  background: #0b519c;
  border-radius: 10px;
}

.pane-half::-webkit-scrollbar-track {
  background: #8b8b8c;
}*/

/* --- Inline CSS Replacements --- */

/* For passage text containers that used inline margins */
.ielts-passage-text {
  margin-right: 4px;
  padding-right: 2px;
  font-size: small;
  color: #000;
}

/* For main passage titles (e.g., Passage 1) */
.ielts-passage-heading {
  color: maroon;
  font-size: large;
  margin-bottom: 0;
}

/* For italicized passage sub-titles */
.ielts-passage-heading-italic {
  color: maroon;
  font-style: italic;
  font-size: large;
}

/* For question block titles (e.g., Questions 1-6) */
.ielts-question-heading {
  color: blue;
  font-size: medium;
  margin: 4px 4px 2px 4px; /* Fixed invalid comma-separated margin */
  padding: 2px;
}

/* For question block titles that are also italicized */
.ielts-question-heading-italic {
  color: blue;
  font-style: italic;
  font-size: medium;
  margin: 4px 4px 2px 4px;
  padding: 2px;
}

/* For justified paragraphs */
.ielts-paragraph {
  text-align: justify;
}

/* For form labels targeting questions */
.ielts-label {
  color: rgb(20, 20, 20);
}

/* For select drop downs width setting */
.ielts-col-half {
  width: 100%;
  margin: 4px 4px 2px 4px;
  padding: 6px;
  font-size: small;
}

/* Timer display font size */
.ielts-timer-text {
  font-size: 1rem;
}

/* Ensure the fixed header is opaque so scrolling text does not show through */
#header {
  background: rgba(55, 142, 181, 1) !important;
}