/* Learner PTE Tests: entry button, Tests page, test bar and run screens (js/pte-test-center.js). */

.pte-tests-entry-row {
  display: flex;
  justify-content: center;
  margin: -4px 0 18px;
}

.pte-tests-entry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--brand, #177a44);
  background: var(--bg-surface, #fff);
  color: var(--brand, #177a44);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.pte-tests-entry:hover { background: var(--brand, #177a44); color: #fff; }
.pte-tests-entry:focus-visible,
.pte-tc button:focus-visible,
.pte-tbar button:focus-visible,
.pte-tscreen button:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.45); outline-offset: 2px; }
.pte-tests-entry svg { width: 18px; height: 18px; }

/* Tests page */
body.pte-tc-open { overflow: hidden; }

.pte-tc {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px;
  overflow-y: auto;
}

.pte-tc[hidden],
.pte-tbar[hidden],
.pte-tscreen[hidden] { display: none; }

.pte-tc__panel {
  width: min(1040px, 100%);
  background: var(--bg-surface, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
  color: var(--text-primary, #1e293b);
}

.pte-tc__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-light, #e2e8f0);
}

.pte-tc__crumbs { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; font-size: 1.05rem; }
.pte-tc__crumb {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--brand, #177a44);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}

.pte-tc__crumb:hover { text-decoration: underline; }
.pte-tc__crumb-current { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pte-tc__close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-default, #cbd5e1);
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary, #475569);
}

.pte-tc__body { padding: 20px 24px 28px; }
.pte-tc__h2 { margin: 6px 0 12px; font-size: 1.3rem; }
.pte-tc__h2:focus { outline: none; }
.pte-tc__muted { color: var(--text-muted, #64748b); font-size: 0.92rem; }
.pte-tc__note { margin-top: 18px; }
.pte-tc__error { color: var(--red-700, #b91c1c); background: var(--red-50, #fef2f2); border-radius: 10px; padding: 12px 14px; }
.pte-tc__empty { text-align: center; padding: 30px 0 10px; }

.pte-tc__folders {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.pte-tc__folder {
  width: 100%;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 14px;
  background: var(--gray-50, #f8fafc);
  padding: 16px;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pte-tc__folder:hover { border-color: var(--brand, #177a44); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); transform: translateY(-1px); }
.pte-tc__folder-name { font-weight: 700; font-size: 1.02rem; color: var(--text-primary, #1e293b); }
.pte-tc__folder-icon {
  width: 40px;
  height: 30px;
  border-radius: 4px 8px 8px 8px;
  background: var(--gold-400, #f5b942);
  position: relative;
  margin-bottom: 6px;
}

.pte-tc__folder-icon::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  width: 18px;
  height: 8px;
  border-radius: 4px 4px 0 0;
  background: var(--gold-600, #d99a1c);
}

.pte-tc__tests { list-style: none; margin: 0 0 18px; padding: 0; }
.pte-tc__test {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-light, #e2e8f0);
}

.pte-tc__num { color: var(--text-muted, #64748b); font-weight: 700; }
.pte-tc__test-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pte-tc__desc { font-size: 0.9rem; color: var(--text-secondary, #475569); }

.pte-tc__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.pte-tc__facts div { background: var(--gray-50, #f8fafc); border-radius: 10px; padding: 10px 12px; }
.pte-tc__facts dt { font-size: 0.8rem; color: var(--text-muted, #64748b); }
.pte-tc__facts dd { margin: 2px 0 0; font-weight: 700; }

.pte-tc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid var(--border-default, #cbd5e1);
  background: var(--bg-surface, #fff);
  color: var(--text-primary, #1e293b);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.pte-tc__btn:hover:not(:disabled) { background: var(--gray-50, #f8fafc); }
.pte-tc__btn:disabled { opacity: 0.6; cursor: default; }
.pte-tc__btn--primary { background: var(--brand, #177a44); border-color: var(--brand, #177a44); color: #fff; }
.pte-tc__btn--primary:hover:not(:disabled) { background: var(--brand-hover, #156d3e); }
.pte-tc__btn--danger { background: var(--red-600, #dc2626); border-color: var(--red-600, #dc2626); color: #fff; }
.pte-tc__btn--danger:hover:not(:disabled) { background: var(--red-700, #b91c1c); }
.pte-tc__link { border: 0; background: transparent; color: var(--brand, #177a44); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0 4px; }

/* Test bar shown while a test runs: it covers the fixed site header; pages without one get padding. */
body.pte-test-running--pad { padding-top: 56px; }

.pte-tbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10040;
  height: 56px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  background: #0f2f22;
  color: #f8fafc;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.25);
}

.pte-tbar__name { font-weight: 800; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pte-tbar__info { font-size: 0.92rem; color: #cbd5e1; white-space: nowrap; }
.pte-tbar__clock {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 4px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.pte-tbar__clock.is-low { background: #b91c1c; }
.pte-tbar__gap { flex: 1 1 auto; }
.pte-tbar__btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.pte-tbar__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.pte-tbar__btn:disabled { opacity: 0.5; cursor: default; }
.pte-tbar__btn--primary { background: #22c55e; border-color: #22c55e; color: #052e16; }
.pte-tbar__btn--primary:hover:not(:disabled) { background: #4ade80; }

/* Intro, time-up and summary screens */
.pte-tscreen {
  position: fixed;
  inset: 0;
  z-index: 10060;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}

.pte-tscreen__card {
  width: min(560px, 100%);
  background: var(--bg-surface, #fff);
  color: var(--text-primary, #1e293b);
  border-radius: 16px;
  padding: 28px 30px 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.pte-tscreen__card--wide { width: min(760px, 100%); }
.pte-tc__eyebrow { margin: 0; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand, #177a44); }
.pte-tc__screen-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.pte-tc__review { padding-left: 20px; }
.pte-tc__review > li { margin-bottom: 10px; }
.pte-tc__review ol { padding-left: 20px; margin: 6px 0 0; }
.pte-tc__review ol li { padding: 3px 0; }

/* Exam frame for Reading questions (js/pte-exam-reading.js), after the Figma "PTEUNI Test"
 * screens: grey top bar, blue strip, light page, grey bottom bar with Next. It covers the
 * practice screens and the test bar while a Reading question is open. */
/* The site keeps a scrollbar gutter on <html>; drop it so the exam frame fills the window. */
html.pte-exam-open { overflow: hidden; scrollbar-gutter: auto; }
html.pte-exam-open body { overflow: hidden; }

.pte-exam {
  --exam-grey: #c0bbbc;
  --exam-blue: #29649a;
  --exam-page: #fafafa;
  --exam-text: #111;
  --exam-yellow: #fbfb2c;
  position: fixed;
  inset: 0;
  z-index: 10045;
  display: flex;
  flex-direction: column;
  background: var(--exam-page);
  color: var(--exam-text);
  font-family: Roboto, Inter, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
}

.pte-exam[hidden] { display: none; }
.pte-exam button { font-family: inherit; }
.pte-exam h2,
.pte-exam table { font-family: inherit; color: inherit; letter-spacing: normal; }
.pte-exam button:focus-visible,
.pte-exam input:focus-visible,
.pte-exam select:focus-visible,
.pte-exam [tabindex]:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.55); outline-offset: 2px; }

.pte-exam__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 6px 22px 6px 14px;
  background: var(--exam-grey);
}

.pte-exam__title { font-size: 1.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pte-exam__status { display: flex; flex-direction: column; align-items: flex-end; font-size: 1.2rem; line-height: 1.25; white-space: nowrap; }
.pte-exam__time { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.pte-exam__time svg { width: 22px; height: 22px; color: #fff; }
.pte-exam__time.is-low { color: #e0101e; }
.pte-exam__strip { flex: 0 0 48px; background: var(--exam-blue); }

.pte-exam__page { flex: 1 1 auto; overflow-y: auto; padding: 34px 40px 40px; }
.pte-exam__page:focus { outline: none; }
.pte-exam__instruction { margin: 0 0 30px; font-weight: 700; font-size: 1.06rem; }
.pte-exam__loading { color: #555; }
.pte-exam__error { color: #b91c1c; font-weight: 600; }

.pte-exam__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 42px;
  background: var(--exam-grey);
}

.pte-exam__exit {
  border: 0;
  background: transparent;
  color: #333;
  font-size: 0.85rem;
  padding: 0 16px;
  cursor: pointer;
}

.pte-exam__exit:hover { text-decoration: underline; }
.pte-exam__next {
  margin: 0 8px 0 0;
  min-width: 96px;
  padding: 5px 22px;
  border: 1px solid #16385a;
  border-radius: 999px;
  background: linear-gradient(#3f6f9c, #1f4a73);
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
}

.pte-exam__next:hover { background: linear-gradient(#4a7bab, #24547f); }
.pte-exam__next-wrap { display: flex; align-items: center; padding-left: 6px; border-left: 2px solid #fff; }

/* Part 2: Reading intro */
.pte-exam__intro-title { margin: 0 0 8px; font-size: 1.6rem; font-weight: 700; }
.pte-exam__intro-title:focus { outline: none; }
.pte-exam__intro p { margin: 0 0 26px; font-size: 0.95rem; }
.pte-exam__intro-table { width: min(760px, 100%); border-collapse: collapse; border: 1px solid #b7c6dc; font-size: 0.95rem; background: #fff; }
.pte-exam__intro-table caption {
  caption-side: top;
  text-align: left;
  padding: 8px 12px;
  font-size: 1.3rem;
  font-weight: 700;
  font-style: italic;
  background: #dbe7fb;
  border: 1px solid #b7c6dc;
  border-bottom: 0;
}

.pte-exam__intro-table th { text-align: left; padding: 9px 12px; background: #dbe7fb; border: 1px solid #b7c6dc; }
.pte-exam__intro-table td { padding: 8px 12px; border: 1px solid #c9d3e2; vertical-align: top; }

/* Multiple choice: passage left, question and options right; the chosen option is yellow */
.pte-exam__split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 7%; align-items: start; padding: 0 0 0 30px; }
.pte-exam__passage { white-space: pre-line; }
.pte-exam__mc { border: 0; margin: 0; padding: 0; min-width: 0; }
.pte-exam__mc-question { float: left; width: 100%; padding: 0 0 30px 34px; white-space: pre-line; }
.pte-exam__choice {
  clear: both;
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 10px;
  padding: 5px 24px 5px 0;
  cursor: pointer;
}

.pte-exam__choice input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: #2f6fe4; cursor: pointer; }
.pte-exam__choice.is-selected { background: var(--exam-yellow); }
.pte-exam__question--rmcma .pte-exam__choice { padding: 8px 24px 8px 4px; gap: 28px; }

/* Re-order paragraphs: Source and Target panels with arrow buttons */
.pte-exam__rop {
  display: grid;
  grid-template-columns: minmax(0, 570px) auto minmax(0, 565px) auto;
  justify-content: center;
  align-items: center;
  column-gap: 22px;
}

.pte-exam__rop-col { display: flex; flex-direction: column; align-self: stretch; }
.pte-exam__rop-label { text-align: center; margin-bottom: 12px; font-size: 0.95rem; }
.pte-exam__rop-panel {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 326px;
  flex: 1 1 auto;
  border: 1px solid #444;
  background: #fff;
}

.pte-exam__rop-panel.is-over { background: #eef5ff; }
.pte-exam__rop-item {
  margin: 1px;
  padding: 7px 9px;
  border: 2px solid #000;
  border-radius: 18px;
  background: #fff;
  font-size: 0.92rem;
  line-height: 1.3;
  cursor: grab;
  user-select: none;
}

.pte-exam__rop-item.is-selected { box-shadow: 0 0 0 3px #1c7fe0; }
.pte-exam__rop-arrows { display: flex; gap: 6px; padding-top: 24px; }
.pte-exam__rop-arrows--vertical { flex-direction: column; gap: 8px; }
.pte-exam__arrow {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #b6b6b6;
  border-radius: 50%;
  background: #fff;
  color: #6b6b6b;
  cursor: pointer;
}

.pte-exam__arrow svg { width: 18px; height: 18px; fill: currentColor; }
.pte-exam__arrow--blue { color: #1f4fbf; }
.pte-exam__arrow:hover { background: #eef3fb; }

/* Reading: Fill in the Blanks: boxes in the text, words in the black box below */
.pte-exam__text { padding: 0 0 0 36px; line-height: 1.9; }
.pte-exam__text p { margin: 0 0 12px; }
.pte-exam__text--blanks { white-space: pre-line; }
.pte-exam__drop {
  display: inline-block;
  min-width: 124px;
  height: 22px;
  margin: 0 8px;
  vertical-align: middle;
  border: 1px solid #8c8c8c;
  background: #fff;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}

.pte-exam__drop.is-over { background: #1a73e8; border-color: #1a73e8; }
.pte-exam__drop.is-filled { border-color: #555; }
.pte-exam__drop .pte-exam__word { display: block; border: 0; margin: 0; padding: 0 10px; height: 100%; line-height: 20px; }
.pte-exam__bank {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  justify-content: center;
  align-content: center;
  min-height: 84px;
  margin: 140px 0 0 0;
  padding: 18px 60px;
  background: #000;
}

.pte-exam__bank.is-over { outline: 3px solid #1a73e8; }
.pte-exam__word {
  display: inline-block;
  min-width: 70px;
  padding: 1px 10px;
  border: 1px solid #555;
  background: #fff;
  color: #111;
  font-size: 0.8rem;
  text-align: center;
  cursor: grab;
  user-select: none;
}

.pte-exam__word.is-picked { background: #cfe3ff; border-color: #1a73e8; }

/* Reading & Writing: Fill in the Blanks: drop-down lists in the text */
.pte-exam__question--rfib .pte-exam__text { padding: 0; line-height: 1.9; }
.pte-exam__select {
  height: 30px;
  margin: 0 3px;
  padding: 0 6px;
  border: 1px solid #a9a9a9;
  border-radius: 0;
  background: #e2e2e2;
  color: #111;
  font: inherit;
  vertical-align: middle;
  cursor: pointer;
}