/* GRE exam runner. Themed entirely through the CSS variables set on .gre-exam,
   so Elementor can restyle it without the layout being taken apart.
   Written with logical properties throughout, because the interface is RTL. */

.gre-exam {
	--gre-accent: #5170FF;
	--gre-accent-text: #FFFFFF;
	--gre-surface: #FFFFFF;
	--gre-text: #0F172A;
	--gre-muted: #6B7280;
	--gre-border: #E6EAF5;
	--gre-selected: #EEF1FF;
	--gre-flag: #F59E0B;
	--gre-danger: #DC2626;
	--gre-radius: 15px;
	--gre-font-size: 17px;
	color: var(--gre-text);
	font-size: var(--gre-font-size);
	line-height: 1.75;
	direction: rtl;
	text-align: start;
}

/* English review mode. */
.gre-exam[dir="ltr"] { direction: ltr; }

.gre-exam *, .gre-exam *::before, .gre-exam *::after { box-sizing: border-box; }
.gre-exam__boot, .gre-exam__notice { padding: 32px; text-align: center; color: var(--gre-muted); }

/* ---------- shell ---------- */
.gre-exam__bar {
	position: sticky; top: 0; z-index: 20;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	flex-wrap: wrap;
	padding: 12px 18px;
	background: var(--gre-surface);
	border: 1px solid var(--gre-border);
	border-radius: var(--gre-radius);
	margin-bottom: 18px;
}
.gre-exam__meta { font-size: .82em; color: var(--gre-muted); }
.gre-exam__meta strong { color: var(--gre-text); font-weight: 600; }

.gre-timer {
	display: inline-flex; align-items: baseline; gap: 8px;
	font-variant-numeric: tabular-nums;
	font-size: 1.5em; font-weight: 700;
	padding: 4px 14px;
	border-radius: var(--gre-radius);
	background: var(--gre-selected);
	direction: ltr;
}
.gre-timer__label { font-size: .55em; font-weight: 500; color: var(--gre-muted); }
.gre-timer.is-warning { background: #FEF3C7; color: #92400E; animation: gre-pulse 1s ease-in-out 3; }
.gre-timer.is-critical { background: #FEE2E2; color: var(--gre-danger); }
@keyframes gre-pulse { 50% { transform: scale(1.06); } }

.gre-exam__body { display: flex; gap: 20px; align-items: flex-start; }
.gre-exam__main { flex: 1 1 auto; min-width: 0; }
.gre-exam__side { flex: 0 0 232px; position: sticky; top: 84px; }

/* ---------- passage + question ---------- */
.gre-passage {
	padding: 18px 20px; margin-bottom: 16px;
	background: #FAFAFA;
	border: 1px solid var(--gre-border);
	border-radius: var(--gre-radius);
	max-height: 320px; overflow-y: auto;
}
.gre-passage__title { margin: 0 0 8px; font-size: .95em; font-weight: 700; }

.gre-card {
	padding: 22px 24px;
	background: var(--gre-surface);
	border: 1px solid var(--gre-border);
	border-radius: var(--gre-radius);
}
.gre-card__index { font-size: .8em; color: var(--gre-muted); margin-bottom: 10px; }
.gre-card__stem { margin: 0 0 18px; font-weight: 600; }
.gre-card__image { max-width: 100%; height: auto; margin: 0 0 18px; border-radius: 6px; }

/* ---------- options ---------- */
.gre-options { display: grid; gap: 10px; margin: 0 0 20px; }
.gre-option {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 13px 16px;
	border: 1.5px solid var(--gre-border);
	border-radius: var(--gre-radius);
	background: var(--gre-surface);
	cursor: pointer;
	text-align: start;
	font: inherit; color: inherit;
	transition: border-color .12s, background .12s;
}
.gre-option:hover { border-color: var(--gre-accent); }
.gre-option.is-selected { border-color: var(--gre-accent); background: var(--gre-selected); }
.gre-option__key {
	flex: 0 0 28px; height: 28px;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1.5px solid var(--gre-border);
	font-size: .85em; font-weight: 700;
}
.gre-option.is-selected .gre-option__key {
	background: var(--gre-accent); color: var(--gre-accent-text); border-color: var(--gre-accent);
}

/* ---------- controls ---------- */
.gre-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gre-btn {
	padding: 11px 20px;
	border-radius: var(--gre-radius);
	border: 1.5px solid var(--gre-border);
	background: var(--gre-surface);
	color: var(--gre-text);
	font: inherit; font-weight: 600;
	cursor: pointer;
}
.gre-btn:hover:not(:disabled) { border-color: var(--gre-accent); }
.gre-btn:disabled { opacity: .45; cursor: not-allowed; }
.gre-btn--primary { background: var(--gre-accent); border-color: var(--gre-accent); color: var(--gre-accent-text); }
.gre-btn--flag.is-on { border-color: var(--gre-flag); background: #FFFBEB; color: #92400E; }
.gre-btn--danger { border-color: var(--gre-danger); color: var(--gre-danger); }
.gre-actions__spacer { margin-inline-start: auto; }

.gre-save { font-size: .78em; color: var(--gre-muted); min-height: 1.2em; }
.gre-save.is-error { color: var(--gre-danger); font-weight: 600; }

/* ---------- navigator ---------- */
.gre-nav {
	padding: 16px;
	background: var(--gre-surface);
	border: 1px solid var(--gre-border);
	border-radius: var(--gre-radius);
}
.gre-nav__title { font-size: .82em; font-weight: 700; margin: 0 0 12px; }
.gre-nav__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.gre-nav__cell {
	aspect-ratio: 1; display: grid; place-items: center;
	border: 1.5px solid var(--gre-border);
	border-radius: 6px;
	background: var(--gre-surface);
	font: inherit; font-size: .8em; font-weight: 600;
	cursor: pointer; position: relative;
}
.gre-nav--round .gre-nav__cell { border-radius: 50%; }
.gre-nav__cell.is-answered { background: var(--gre-selected); border-color: var(--gre-accent); }
.gre-nav__cell.is-current { outline: 2px solid var(--gre-accent); outline-offset: 1px; }
.gre-nav__cell.is-flagged::after {
	content: ''; position: absolute; inset-block-start: 2px; inset-inline-end: 2px;
	width: 7px; height: 7px; border-radius: 50%; background: var(--gre-flag);
}
.gre-nav__legend { margin-top: 12px; font-size: .74em; color: var(--gre-muted); display: grid; gap: 5px; }
.gre-nav__legend span::before {
	content: ''; display: inline-block; width: 10px; height: 10px;
	border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px;
	border: 1.5px solid var(--gre-border);
}
.gre-nav__legend .l-answered::before { background: var(--gre-selected); border-color: var(--gre-accent); }
.gre-nav__legend .l-flagged::before { background: var(--gre-flag); border-color: var(--gre-flag); }

/* ---------- break, launcher, result ---------- */
.gre-panel {
	max-width: 560px; margin: 0 auto; padding: 40px 32px; text-align: center;
	background: var(--gre-surface);
	border: 1px solid var(--gre-border);
	border-radius: var(--gre-radius);
}
.gre-panel h2 { margin: 0 0 10px; }
.gre-panel p { color: var(--gre-muted); margin: 0 0 22px; }
.gre-panel .gre-timer { font-size: 2.4em; margin-bottom: 22px; }
.gre-score { font-size: 2.6em; font-weight: 700; color: var(--gre-accent); }
.gre-breakdown { margin: 22px 0 0; display: grid; gap: 8px; text-align: start; }
.gre-breakdown__row {
	display: flex; justify-content: space-between;
	padding: 9px 14px; border: 1px solid var(--gre-border); border-radius: 6px;
}

/* ---------- modal ---------- */
.gre-modal {
	position: fixed; inset: 0; z-index: 999;
	display: grid; place-items: center;
	background: rgba(17, 24, 39, .55);
	padding: 20px;
}
.gre-modal__box {
	max-width: 440px; width: 100%;
	padding: 28px;
	background: var(--gre-surface, #FFFFFF);
	color: var(--gre-text, #111827);
	border-radius: var(--gre-radius, 10px);
	box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.gre-modal__box h3 { margin: 0 0 10px; }
.gre-modal__box p { color: var(--gre-muted); margin: 0 0 8px; }
.gre-modal__warn { color: var(--gre-danger); font-weight: 600; }
.gre-modal__actions { display: flex; gap: 10px; margin-top: 22px; }
.gre-modal__actions .gre-btn { flex: 1; }

/* ---------- mobile ---------- */
@media (max-width: 860px) {
	.gre-exam__body { flex-direction: column; }
	.gre-exam__side { flex: 1 1 auto; width: 100%; position: static; }
	.gre-nav__grid { grid-template-columns: repeat(10, 1fr); }
	.gre-timer { font-size: 1.25em; }
	.gre-card { padding: 18px 16px; }
}
/* Flagged-only filter above the navigator legend. */
.gre-nav__filter { width: 100%; margin-top: 12px; padding: 8px 10px; font-size: .78em; }
.gre-nav__filter.is-on { border-color: var(--gre-flag, #F59E0B); background: #FFFBEB; color: #92400E; }

/* Sign-in panel shown to logged-out visitors. */
.gre-panel .gre-btn { display: inline-block; text-decoration: none; }

/* ---------- review ---------- */
.gre-review__filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.gre-review__card { margin-bottom: 16px; border-inline-start: 4px solid var(--gre-border); }
.gre-review__card.is-right { border-inline-start-color: #16A34A; }
.gre-review__card.is-wrong { border-inline-start-color: var(--gre-danger, #DC2626); }
.gre-review__card.is-blank { border-inline-start-color: var(--gre-muted, #6B7280); }

/* Options are read-only here, so they must not look clickable. */
.gre-option--static { cursor: default; }
.gre-option--static:hover { border-color: var(--gre-border); }
.gre-option.is-correct { border-color: #16A34A; background: #F0FDF4; }
.gre-option.is-correct .gre-option__key { background: #16A34A; color: #fff; border-color: #16A34A; }
.gre-option.is-chosen-wrong { border-color: var(--gre-danger, #DC2626); background: #FEF2F2; }
.gre-option.is-chosen-wrong .gre-option__key { background: var(--gre-danger, #DC2626); color: #fff; border-color: var(--gre-danger, #DC2626); }

.gre-tag { margin-inline-start: auto; align-self: center; font-size: .72em; font-weight: 700; padding: 2px 9px; border-radius: 10px; white-space: nowrap; }
.gre-tag--right { background: #16A34A; color: #fff; }
.gre-tag--wrong { background: var(--gre-danger, #DC2626); color: #fff; }

.gre-note { margin: 0 0 14px; font-size: .85em; color: var(--gre-muted, #6B7280); font-style: italic; }
.gre-explain { padding: 14px 16px; background: #F8FAFC; border-radius: var(--gre-radius, 10px); border: 1px solid var(--gre-border, #E5E7EB); }
.gre-explain h4 { margin: 0 0 6px; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; color: var(--gre-muted, #6B7280); }

/* Strength meters. */
.gre-meter { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: .9em; }
.gre-meter__label { flex: 0 0 34%; }
.gre-meter__track { flex: 1; height: 10px; border-radius: 6px; background: #E5E7EB; overflow: hidden; }
.gre-meter__fill { display: block; height: 100%; border-radius: 6px; }
.gre-meter__fill.is-low { background: #DC2626; }
.gre-meter__fill.is-mid { background: #F59E0B; }
.gre-meter__fill.is-high { background: #16A34A; }
.gre-meter__value { flex: 0 0 56px; text-align: end; font-variant-numeric: tabular-nums; color: var(--gre-muted, #6B7280); }

@media (max-width: 860px) { .gre-meter__label { flex-basis: 42%; } }

/* AI explanation block. */
.gre-ai { margin-top: 12px; }
.gre-btn--ai { border-style: dashed; font-size: .88em; }
.gre-ai__out:not(:empty) { margin-top: 12px; padding: 14px 16px; border-radius: var(--gre-radius, 10px); background: #F5F3FF; border: 1px solid #DDD6FE; }
.gre-ai__out h4 { margin: 0 0 6px; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; color: #6D28D9; }
.gre-ai__meta { margin: 10px 0 0; font-size: .78em; color: var(--gre-muted, #6B7280); }
.gre-ai__meta.is-error { color: var(--gre-danger, #DC2626); font-weight: 600; }

/* Practice mode. */
.gre-select { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: var(--gre-radius, 10px); border: 1.5px solid var(--gre-border, #E5E7EB); font: inherit; background: var(--gre-surface, #fff); }
.gre-panel label { display: block; font-weight: 600; text-align: start; margin-top: 14px; }
.gre-verdict { margin: 0 0 14px; font-weight: 700; }
.gre-verdict.is-right { color: #16A34A; }
.gre-verdict.is-wrong { color: var(--gre-danger, #DC2626); }

/* Study library list. */
.gre-library { display: grid; gap: 10px; }
.gre-file { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--gre-surface, #fff); border: 1px solid var(--gre-border, #E5E7EB); border-radius: var(--gre-radius, 10px); }
.gre-file__main { flex: 1; min-width: 0; }
.gre-file__main strong { display: block; }
.gre-file__desc { display: block; font-size: .85em; color: var(--gre-muted, #6B7280); margin-top: 2px; }
.gre-file__meta { display: block; font-size: .75em; color: var(--gre-muted, #6B7280); margin-top: 6px; }
.gre-file .gre-btn { text-decoration: none; white-space: nowrap; }
@media (max-width: 600px) { .gre-file { flex-direction: column; align-items: stretch; } }

/* Student dashboard. */
.gre-dash { display: grid; gap: 18px; }
.gre-dash__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gre-stat { padding: 18px; text-align: center; background: var(--gre-surface, #fff); border: 1px solid var(--gre-border, #E5E7EB); border-radius: var(--gre-radius, 10px); }
.gre-stat__figure { display: block; font-size: 1.9em; font-weight: 700; line-height: 1.1; color: var(--gre-accent, #1F6FEB); }
.gre-stat__label { display: block; margin-top: 6px; font-size: .78em; color: var(--gre-muted, #6B7280); }
.gre-stat.is-warn .gre-stat__figure { color: var(--gre-danger, #DC2626); }
.gre-dash__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gre-dash__actions .gre-btn { text-decoration: none; }
.gre-dash__renew .gre-btn { text-decoration: none; }
.gre-dash h3 { margin: 0 0 14px; font-size: 1em; }
.gre-chart { width: 100%; height: auto; }
.gre-dash__rows { display: grid; gap: 8px; }
.gre-dash__row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--gre-border, #E5E7EB); border-radius: var(--gre-radius, 10px); }
.gre-dash__row > div:first-child { flex: 1; }
.gre-dash__date { display: block; font-size: .78em; color: var(--gre-muted, #6B7280); }
.gre-dash__pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.gre-dash__row .gre-btn { text-decoration: none; padding: 7px 14px; font-size: .85em; }
@media (max-width: 700px) { .gre-dash__stats { grid-template-columns: repeat(2, 1fr); } }

/* Student dashboard. */
.gre-dash { display: grid; gap: 16px; }
.gre-dash__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gre-tile { padding: 18px; text-align: center; background: var(--gre-surface, #fff); border: 1px solid var(--gre-border, #E5E7EB); border-radius: var(--gre-radius, 10px); }
.gre-tile__figure { display: block; font-size: 1.9em; font-weight: 700; line-height: 1.1; color: var(--gre-accent, #1F6FEB); }
.gre-tile__label { display: block; margin-top: 6px; font-size: .78em; color: var(--gre-muted, #6B7280); }
.gre-dash__plan { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gre-dash__plan.is-expired { border-color: var(--gre-danger, #DC2626); }
.gre-dash .gre-card h3 { margin: 0 0 14px; font-size: 1em; }
.gre-spark { width: 100%; height: 160px; display: block; }
.gre-history { display: grid; gap: 8px; }
.gre-history__row { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid var(--gre-border, #E5E7EB); border-radius: 8px; }
.gre-history__date { flex: 1; font-size: .9em; }
.gre-history__score { font-variant-numeric: tabular-nums; color: var(--gre-muted, #6B7280); }
.gre-history__pct { font-weight: 700; min-width: 46px; text-align: end; }
.gre-history .gre-btn { text-decoration: none; padding: 6px 14px; font-size: .85em; }
@media (max-width: 700px) { .gre-dash__tiles { grid-template-columns: repeat(2, 1fr); } .gre-dash__plan { flex-direction: column; align-items: stretch; } }

/* Signup and account status. */
.gre-signup, .gre-status { max-width: 460px; text-align: start; }
.gre-form { display: grid; gap: 4px; margin-top: 18px; }
.gre-form label { font-weight: 600; margin-top: 12px; }
.gre-form input { width: 100%; padding: 11px 13px; font: inherit; border: 1.5px solid var(--gre-border, #E5E7EB); border-radius: var(--gre-radius, 10px); background: var(--gre-surface, #fff); color: var(--gre-text, #111827); }
.gre-form input:focus { outline: none; border-color: var(--gre-accent, #1F6FEB); }
.gre-form__hint { display: block; font-size: .78em; color: var(--gre-muted, #6B7280); }
.gre-status { border-inline-start: 4px solid var(--gre-border, #E5E7EB); }
.gre-status.is-pending { border-inline-start-color: #F59E0B; }
.gre-status.is-rejected { border-inline-start-color: var(--gre-danger, #DC2626); }
.gre-status.is-approved { border-inline-start-color: #16A34A; }

/* WordPress login form, restyled to match. */
.gre-loginform p { margin: 0 0 12px; }
.gre-loginform label { display: block; font-weight: 600; margin-bottom: 4px; }
.gre-loginform input[type=text], .gre-loginform input[type=password] { width: 100%; padding: 11px 13px; font: inherit; border: 1.5px solid var(--gre-border, #E5E7EB); border-radius: var(--gre-radius, 10px); background: var(--gre-surface, #fff); color: var(--gre-text, #111827); }
.gre-loginform input:focus { outline: none; border-color: var(--gre-accent, #1F6FEB); }
.gre-loginform .login-remember label { font-weight: 400; font-size: .88em; }
.gre-loginform input[type=submit] { width: 100%; padding: 12px 20px; margin-top: 6px; font: inherit; font-weight: 600; cursor: pointer; color: var(--gre-accent-text, #fff); background: var(--gre-accent, #1F6FEB); border: 1.5px solid var(--gre-accent, #1F6FEB); border-radius: var(--gre-radius, 10px); }

/* Pricing. */
.gre-plans { display: block; }
.gre-plans__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 8px; }
.gre-plans__heading { margin: 32px 0 6px; }
.gre-plans__note { color: var(--gre-muted, #6B7280); font-size: .88em; margin: 0 0 16px; }
.gre-plan { display: flex; flex-direction: column; padding: 24px 22px; background: var(--gre-surface, #fff); border: 1.5px solid var(--gre-border, #E5E7EB); border-radius: var(--gre-radius, 10px); }
.gre-plan.is-topup { padding: 18px; }
.gre-plan__name { margin: 0 0 6px; font-size: 1.05em; }
.gre-plan__price { font-size: 1.6em; font-weight: 700; color: var(--gre-accent, #1F6FEB); margin-bottom: 14px; }
.gre-plan__price del { font-size: .6em; opacity: .5; font-weight: 400; }
.gre-plan__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; font-size: .9em; }
.gre-plan__list li { padding-inline-start: 20px; position: relative; }
.gre-plan__list li::before { content: '\2713'; position: absolute; inset-inline-start: 0; color: #16A34A; font-weight: 700; }
.gre-plan__small { font-size: .78em; color: var(--gre-muted, #6B7280); margin: 0 0 14px; }
.gre-plan .gre-btn { margin-top: auto; text-align: center; text-decoration: none; }

.gre-file__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Mathematics reads left-to-right even inside Arabic prose. */
.katex {
	direction: ltr;
	unicode-bidi: isolate;
	font-size: 1.05em;
}

.katex-display {
	direction: ltr;
	unicode-bidi: isolate;
	margin: 0.6em 0;
}

/* A passage and its questions are one stop in the navigator, so its cell
   spans the grid rather than pretending to be a single question. */
.gre-nav__cell.is-passage {
	font-weight: 600;
}

/* Several questions now share a screen, so each needs breathing room. */
.gre-exam__main .gre-card + .gre-card {
	margin-top: 16px;
}

.gre-card .gre-btn--flag {
	margin-top: 12px;
}

/* The item number for the whole page. A passage and its questions count
   as one item here, the same as a standalone question. */
.gre-page__index {
	font-size: 14px;
	font-weight: 600;
	color: var(--gre-muted, #6B7280);
	margin-bottom: 10px;
}

/* Local numbering inside a passage set, deliberately quiet. */
.gre-card__index {
	font-size: 13px;
	color: var(--gre-muted, #6B7280);
	margin-bottom: 6px;
}

/* The client writes questions across several lines:
     قارن بين القيمتين؟
     القيمة الأولى: ...
     القيمة الثانية: ...
   HTML collapses those newlines into spaces, which runs the lines together
   and lets right-to-left reordering scramble them around the equations.
   Honouring the line breaks keeps each line its own reading order. */
.gre-card__stem,
.gre-option__text,
.gre-passage > div,
.gre-explain > div {
	white-space: pre-wrap;
}

/* =====================================================================
 * Brand layer — sampled from qiyasprep.com so the exam screens sit
 * naturally inside the marketing site rather than looking bolted on.
 *
 * Colours live in the variables above and can still be overridden per
 * page through the shortcode. Everything below is shape and type.
 * ================================================================== */

/* Cairo carries Arabic properly. Self-hosted for the same reason KaTeX is:
   a timed exam must not wait on a third party. */
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../vendor/fonts/cairo-arabic-400.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../vendor/fonts/cairo-latin-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212;
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../vendor/fonts/cairo-arabic-600.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../vendor/fonts/cairo-latin-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212;
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../vendor/fonts/cairo-arabic-700.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../vendor/fonts/cairo-latin-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212;
}

.gre-exam {
	--gre-shadow: 0 4px 21px rgba(29, 78, 216, 0.06);
	--gre-shadow-lift: 0 8px 28px rgba(29, 78, 216, 0.12);
	--gre-radius-panel: 24px;

	font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

/* Cards and panels carry the site's soft blue shadow rather than a hard
   border. Corners are gentler than the marketing site's 32px, which is too
   round once a card holds a passage and seven questions. */
.gre-exam .gre-card,
.gre-exam .gre-panel,
.gre-exam .gre-nav,
.gre-exam .gre-passage,
.gre-exam .gre-modal__box {
	border-radius: var(--gre-radius-panel);
	box-shadow: var(--gre-shadow);
}

.gre-exam .gre-btn {
	border-radius: var(--gre-radius);
	font-family: inherit;
	font-weight: 600;
	transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.gre-exam .gre-btn--primary {
	box-shadow: var(--gre-shadow);
}

.gre-exam .gre-btn:not(:disabled):hover {
	transform: translateY(-1px);
	box-shadow: var(--gre-shadow-lift);
}

.gre-exam .gre-btn:disabled {
	transform: none;
	box-shadow: none;
}

/* Answer options read as tappable cards, matching the plan cards on the
   marketing site. */
.gre-exam .gre-option {
	border-radius: var(--gre-radius);
	font-family: inherit;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.gre-exam .gre-option:not(.gre-option--static):hover {
	border-color: var(--gre-accent);
}

.gre-exam .gre-option.is-selected {
	box-shadow: 0 0 0 1px var(--gre-accent) inset;
}

/* The navigator squares echo the button rounding. */
.gre-exam .gre-nav__cell {
	border-radius: 10px;
	font-family: inherit;
	font-weight: 600;
}

.gre-exam .gre-timer,
.gre-exam .gre-tag,
.gre-exam .gre-verdict {
	border-radius: 100px;
	font-family: inherit;
}

.gre-exam h1, .gre-exam h2, .gre-exam h3, .gre-exam h4 {
	font-family: inherit;
	font-weight: 700;
}

/* Numerals sit level with Arabic text in Cairo, so no override is needed;
   the maths keeps its own face. */
.gre-exam .katex {
	font-size: 1.05em;
}

/* ---------- dashboard hub ----------
   Appended after the older dashboard rules on purpose: the action row
   used to be a flex strip of buttons and is now a grid of cards, so the
   later rule has to win. */
.gre-dash__head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.gre-dash__hello {
	margin: 0;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.4;
}

.gre-dash__sub {
	color: var(--gre-muted);
}

.gre-dash__actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
}

/* The whole card is the target, which matters on a phone. */
.gre-action {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
	border: 1px solid var(--gre-border);
	border-radius: var(--gre-radius-panel, 24px);
	background: var(--gre-surface);
	box-shadow: var(--gre-shadow);
	text-decoration: none;
	color: var(--gre-text);
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.gre-action:hover {
	transform: translateY(-2px);
	box-shadow: var(--gre-shadow-lift);
}

.gre-action strong {
	font-size: 1.05em;
	line-height: 1.5;
}

.gre-action span {
	color: var(--gre-muted);
	font-size: .9em;
}

.gre-action.is-primary {
	background: var(--gre-accent);
	border-color: var(--gre-accent);
}

.gre-action.is-primary strong,
.gre-action.is-primary span {
	color: var(--gre-accent-text);
}

.gre-files {
	display: grid;
	gap: 10px;
	margin: 0 0 14px;
}

.gre-file__acts {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* Name, email and track each need their own line. Without this they run
   together and overlap, since they are plain spans. */
.gre-dash__meta {
	display: grid;
	gap: 8px;
	margin: 0 0 16px;
	line-height: 1.7;
	color: var(--gre-muted);
}

.gre-dash__meta span {
	display: block;
}

.gre-dash__meta strong {
	color: var(--gre-text);
	margin-inline-end: 8px;
}

.gre-dash__account .gre-btn {
	text-decoration: none;
}

/* ---------- character pass ----------
   Measured from qiyasprep.com rather than guessed. Three things carry the
   look: borders are pale blue rather than grey, headings are heavy (800),
   and every card leads with an icon. Without the icon the cards read as a
   plain list no matter how the colours are set. */

.gre-exam {
	/* #DBEAFE is the site's own border colour; grey reads as a different product. */
	--gre-border: #DBEAFE;
	--gre-radius-panel: 28px;
}

.gre-action {
	gap: 10px;
	padding: 24px 26px;
	border-radius: 28px;
}

/* 40px to match the marketing site's feature icons exactly. */
.gre-action__icon {
	width: 40px;
	height: 40px;
	color: var(--gre-accent);
	margin-block-end: 4px;
}

.gre-action.is-primary .gre-action__icon {
	color: var(--gre-accent-text);
	opacity: .9;
}

.gre-action strong {
	font-size: 1.15em;
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* Headings carry the weight here; the site uses 800 throughout. */
.gre-exam h2, .gre-exam h3 {
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--gre-text);
}

.gre-dash__hello {
	font-size: 1.75em;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.gre-dash {
	gap: 22px;
}

.gre-dash__actions {
	gap: 16px;
}

/* The plan cards on the site sit at 24px 34px; the exam is denser, so the
   inline padding is trimmed while the rhythm is kept. */
.gre-exam .gre-card,
.gre-exam .gre-panel {
	padding: 24px 26px;
}

.gre-tile {
	border-radius: 20px;
	padding: 20px 16px;
}

.gre-tile__figure {
	font-weight: 800;
	letter-spacing: -0.02em;
}

.gre-file {
	border-radius: 18px;
	padding: 14px 18px;
}

/* Options are what a student looks at for twenty minutes, so they get a
   little more room than the rest. */
.gre-exam .gre-option {
	padding: 16px 18px;
}

/* The tile row was fixed at four columns and there are now five, which
   left one orphan on its own line. Letting it fit means the row stays
   even whatever the count. */
.gre-dash__tiles {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

@media (max-width: 640px) {
	.gre-dash__tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.gre-dash__actions {
		grid-template-columns: 1fr;
	}

	.gre-action {
		padding: 18px 20px;
	}

	.gre-action__icon {
		width: 32px;
		height: 32px;
	}

	.gre-dash__hello {
		font-size: 1.45em;
	}

	.gre-exam .gre-card,
	.gre-exam .gre-panel {
		padding: 18px 18px;
	}
}

/* ---------- site match ----------
   Measured from the live theme rather than assumed.

   Gilroy is the site's own face and is used on its buttons, but it carries
   no Arabic glyphs at all: Arabic set in Gilroy measures identically to the
   serif fallback. Listing Cairo straight after means Latin and numerals get
   Gilroy while Arabic gets a face that can actually draw it. If Gilroy is
   absent on another site, everything simply falls to Cairo. */

.gre-exam {
	font-family: 'Gilroy Font', 'Readex Pro', 'Segoe UI', Tahoma, sans-serif;
}

/* The site's own buttons: 15px corners, 14/38 padding, weight 600. */
.gre-exam .gre-btn {
	padding: 13px 28px;
	border-radius: 15px;
	font-weight: 600;
	font-size: 16px;
}

.gre-exam .gre-btn--primary {
	padding: 14px 38px;
}

/* Body copy on this site sits at #333, not a blue-black. */
.gre-exam {
	--gre-muted: #6B7280;
}

.gre-exam .gre-card__stem,
.gre-exam .gre-option__text {
	color: #333333;
}

/* Numerals look better in Gilroy, which the Arabic text never reaches. */
.gre-tile__figure,
.gre-timer__value,
.gre-nav__cell {
	font-family: 'Gilroy Font', 'Readex Pro', sans-serif;
	font-feature-settings: 'tnum' 1;
}

/* This theme underlines links, which turns every action card into a wall of
   underlined text. The cards are plainly clickable already. */
.gre-exam a.gre-action,
.gre-exam a.gre-action strong,
.gre-exam a.gre-action span,
.gre-exam a.gre-btn,
.gre-exam .gre-file a,
.gre-exam .gre-nav__cell {
	text-decoration: none;
}

/* The theme sets .page-content a { text-decoration: underline }, which wins
   against a single class. Matching that specificity and naming the theme
   selector directly keeps the cards clean wherever they are placed. */
.gre-exam a,
.page-content .gre-exam a,
.gre-exam .gre-action,
.gre-exam .gre-action strong,
.gre-exam .gre-action span {
	text-decoration: none;
}

/* A locked screen is still a screen someone has to look at, so it gets
   the same care as the rest: centred, generous, with the way out obvious. */
.gre-exam .gre-panel--gate {
	text-align: center;
	padding: 56px 32px;
	max-width: 520px;
	margin: 0 auto;
}
.gre-exam .gre-panel--gate h2 {
	margin-bottom: 8px;
}
.gre-exam .gre-panel--gate p {
	margin-bottom: 24px;
	color: #64748B;
}
.gre-exam .gre-panel--gate .gre-btn {
	display: inline-block;
}

/* ---------------------------------------------------------------------------
   Form fields.

   The sign-in screen is WordPress's own wp_login_form(), so its markup carries
   .input and .button rather than any class of ours. Styling the plugin's fields
   and WordPress's together keeps sign-in, sign-up and the account screen looking
   like one product rather than two.
   --------------------------------------------------------------------------- */
.gre-exam input[type="text"],
.gre-exam input[type="email"],
.gre-exam input[type="password"],
.gre-exam input[type="tel"],
.gre-exam input[type="number"],
.gre-exam select,
.gre-exam textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 16px;
	font-family: inherit;
	font-size: 16px;
	color: #0F172A;
	background: #FFFFFF;
	border: 1px solid #DBEAFE;
	border-radius: 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.gre-exam input[type="text"]:focus,
.gre-exam input[type="email"]:focus,
.gre-exam input[type="password"]:focus,
.gre-exam select:focus,
.gre-exam textarea:focus {
	outline: none;
	border-color: #5170FF;
	box-shadow: 0 0 0 3px rgba(81, 112, 255, .15);
}

.gre-exam label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 14px;
	color: #0F172A;
}

.gre-exam .login-remember label,
.gre-exam label[for="rememberme"] {
	display: inline;
	font-weight: 400;
	color: #64748B;
}

.gre-exam .gre-panel p {
	margin: 0 0 16px;
}

/* WordPress renders the sign-in button as an <input type="submit">, which no
   .gre-btn rule can reach. Give it the same shape by hand. */
.gre-exam #wp-submit,
.gre-exam input[type="submit"] {
	width: 100%;
	padding: 14px 38px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: #FFFFFF;
	background: #5170FF;
	border: 0;
	border-radius: 15px;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}

.gre-exam #wp-submit:hover,
.gre-exam input[type="submit"]:hover {
	background: #3F5AE0;
}

.gre-exam #wp-submit:active,
.gre-exam input[type="submit"]:active {
	transform: translateY(1px);
}

/* The sign-in and sign-up panels read better narrow and centred on the page. */
.gre-exam .gre-panel--auth {
	max-width: 440px;
	margin: 0 auto;
	padding: 40px 32px;
}

/* Tells the student how much work sits under this passage, since the page
   itself is numbered as a single item. */
.gre-exam .gre-passage__badge {
	display: inline-block;
	margin-bottom: 12px;
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #3F5AE0;
	background: #EEF1FF;
	border-radius: 999px;
}

/* The breakdown sits under the score, separated so the eye reads the number
   first and the diagnosis second. */
.gre-exam .gre-results__weak {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid #DBEAFE;
	text-align: start;
}
.gre-exam .gre-results__weak h3 {
	margin: 0 0 14px;
	font-size: 16px;
}

/* ---------------------------------------------------------------------------
   Dashboard: what to do next.

   Everything above these rules reports what has happened. This block is the
   one that points forward, so it sits first and carries the only filled button
   on the page - a student two weeks from their exam should not have to choose
   between four equal cards.
   --------------------------------------------------------------------------- */
.gre-exam .gre-hero {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
	padding: 24px 28px;
	background: linear-gradient(135deg, #5170FF 0%, #3F5AE0 100%);
	border-radius: 20px;
	color: #FFFFFF;
}

.gre-exam .gre-hero__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: rgba(255, 255, 255, .18);
	border-radius: 14px;
}

.gre-exam .gre-hero__icon svg {
	width: 26px;
	height: 26px;
	color: #FFFFFF;
}

.gre-exam .gre-hero__text {
	flex: 1 1 auto;
	min-width: 0;
}

.gre-exam .gre-hero__text strong {
	display: block;
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 3px;
}

.gre-exam .gre-hero__text span {
	display: block;
	font-size: 15px;
	opacity: .85;
}

/* The hero is already the accent colour, so its button inverts to stay the
   most prominent thing inside it. */
.gre-exam .gre-hero .gre-btn--primary {
	flex: 0 0 auto;
	background: #FFFFFF;
	color: #3F5AE0;
}

.gre-exam .gre-hero .gre-btn--primary:hover {
	background: #EEF1FF;
}

.gre-exam .gre-trend {
	margin: 0 0 20px;
	font-size: 15px;
	color: #64748B;
}

.gre-exam .gre-trend strong {
	color: #0F172A;
	font-feature-settings: 'tnum' 1;
}

.gre-exam .gre-weak h3 {
	margin: 0 0 4px;
	font-size: 17px;
}

.gre-exam .gre-weak__hint {
	margin: 0 0 18px;
	font-size: 14px;
	color: #64748B;
}

.gre-exam .gre-weak__cta {
	margin-top: 8px;
}

@media (max-width: 640px) {
	.gre-exam .gre-hero {
		flex-wrap: wrap;
		padding: 20px;
	}

	.gre-exam .gre-hero .gre-btn--primary {
		width: 100%;
	}
}

/* gre-numeral-isolate
   Latin digits inside Arabic sentences. Left alone, the bidi algorithm puts
   the percent sign on the wrong side of its number, so every figure the
   student reads is isolated from the text around it. */
.gre-exam .gre-score,
.gre-exam .gre-trend strong,
.gre-exam .gre-meter__value,
.gre-exam .gre-tile__figure,
.gre-exam .gre-timer__value,
.gre-exam .gre-passage__badge {
	direction: ltr;
	unicode-bidi: isolate;
}

/* gre-weak-span
   The dashboard lays its sections out on a grid, and .gre-panel carries a
   560px cap meant for centred single panels. Left as it is the breakdown
   collapses into one narrow column. It should run the full width, like the
   history table it sits above. */
.gre-exam.gre-dash .gre-weak,
.gre-dash .gre-weak {
	grid-column: 1 / -1;
	max-width: none;
	width: 100%;
}

/* The history score is a ratio, and rtl reverses it into 96 / 71. */
.gre-exam .gre-history__score,
.gre-exam .gre-breakdown__row strong {
	direction: ltr;
	unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------------
   Sign in and sign up.

   A single centred card on an empty page, with a coloured rule across the top
   and the heading carrying the brand colour. Everything else is deliberately
   plain: a person arriving here wants to get past this screen, not admire it.
   --------------------------------------------------------------------------- */
.gre-exam .gre-panel--auth {
	position: relative;
	max-width: 620px;
	margin: 0 auto;
	padding: 44px 52px 48px;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(15, 23, 42, .07);
}

/* The rule across the top. Drawn rather than added as markup so the login form,
   which WordPress renders for us, gets it too. */
.gre-exam .gre-panel--auth::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 5px;
	background: #5170FF;
}

.gre-exam .gre-panel--auth .gre-auth__title {
	margin: 0 0 10px;
	font-size: 42px;
	line-height: 1.25;
	font-weight: 700;
	text-align: center;
	color: #5170FF;
}

.gre-exam .gre-panel--auth .gre-auth__switch {
	margin: 0 0 30px;
	font-size: 16px;
	text-align: center;
	color: #64748B;
}

.gre-exam .gre-panel--auth .gre-auth__switch a {
	color: #5170FF;
	font-weight: 600;
	text-decoration: underline;
}

.gre-exam .gre-panel--auth .gre-auth__sub {
	margin: 6px 0 28px;
	font-size: 15px;
	text-align: center;
	color: #64748B;
}

/* Labels sit tight above their field, and each field gets room beneath it. */
.gre-exam .gre-panel--auth label {
	margin-bottom: 7px;
	font-size: 15px;
	font-weight: 700;
	color: #1F2937;
}

.gre-exam .gre-panel--auth input[type="text"],
.gre-exam .gre-panel--auth input[type="email"],
.gre-exam .gre-panel--auth input[type="password"],
.gre-exam .gre-panel--auth select {
	margin-bottom: 20px;
	padding: 13px 16px;
	/* .gre-form sets line-height: inherit, which picks up 28px from the
	   container's 17px base and leaves the fields 57px tall. */
	line-height: 1.4;
	border-radius: 8px;
	border-color: #CBD5E1;
}

/* A hint belongs to the field above it, so it closes the gap that field left. */
.gre-exam .gre-panel--auth .gre-form__hint {
	display: block;
	margin: -16px 0 20px;
	font-size: 13px;
	color: #64748B;
}

.gre-exam .gre-panel--auth .gre-auth__submit,
.gre-exam .gre-panel--auth #wp-submit {
	width: 100%;
	margin-top: 6px;
}

/* On the reference the forgot-password link shares the submit row. Ours sits
   just under it, which reads the same way without fighting the full-width
   button that Arabic labels need. */
.gre-exam .gre-panel--auth .gre-auth__forgot {
	margin: 14px 0 0;
	font-size: 15px;
	text-align: center;
}

.gre-exam .gre-panel--auth .gre-auth__forgot a {
	color: #5170FF;
}

.gre-exam .gre-panel--auth .login-remember {
	margin-bottom: 4px;
}

.gre-exam .gre-panel--auth .login-remember label {
	font-weight: 400;
	color: #64748B;
}

@media (max-width: 640px) {
	.gre-exam .gre-panel--auth {
		padding: 32px 22px 36px;
	}

	.gre-exam .gre-panel--auth .gre-auth__title {
		font-size: 32px;
	}
}

/* ---------------------------------------------------------------------------
   Account settings.

   Two columns on a wide screen - details on one side, password on the other -
   so neither form looks like the continuation of the other. Fields a student
   cannot change are shown rather than hidden, greyed, with the reason beneath.
   --------------------------------------------------------------------------- */
.gre-dash .gre-profile {
	grid-column: 1 / -1;
	max-width: none;
	width: 100%;
}

.gre-exam .gre-profile h3 {
	margin: 0 0 4px;
	font-size: 17px;
}

.gre-exam .gre-profile__hint {
	margin: 0 0 22px;
	font-size: 14px;
	color: #64748B;
}

.gre-exam .gre-profile__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 32px;
}

.gre-exam .gre-profile__block h4 {
	margin: 0 0 16px;
	padding-bottom: 10px;
	font-size: 15px;
	font-weight: 700;
	border-bottom: 1px solid #DBEAFE;
}

.gre-exam .gre-profile__block label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
}

.gre-exam .gre-profile__block input {
	margin-bottom: 16px;
	line-height: 1.4;
}

/* A locked field should read as information, not as something broken. */
.gre-exam .gre-profile__block input:disabled {
	background: #F6F8FD;
	color: #64748B;
	cursor: default;
}

.gre-exam .gre-profile__block .gre-form__hint {
	display: block;
	margin: -12px 0 16px;
	font-size: 12px;
	color: #94A3B8;
}

.gre-exam .gre-profile__block .gre-btn {
	margin-top: 4px;
}

.gre-exam .gre-profile__foot {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid #DBEAFE;
}

.gre-exam .gre-profile__notice {
	margin: 0 0 20px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 10px;
}

.gre-exam .gre-profile__notice.is-ok {
	color: #166534;
	background: #DCFCE7;
}

.gre-exam .gre-profile__notice.is-warn {
	color: #991B1B;
	background: #FEE2E2;
}

/* ---------------------------------------------------------------------------
   Plans, matched to the home page's pricing cards.

   Every value below was read off the home page's own rendered output rather
   than estimated, so the two pages are the same component with different
   content. The one addition is the price, which the home cards omit.
   --------------------------------------------------------------------------- */
.gre-exam .gre-plans__grid {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
	align-items: stretch;
}

.gre-exam .gre-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px 34px;
	background: #FFFFFF;
	border: 1px solid #DBEAFE;
	border-radius: 35px;
	box-shadow: 0 4px 21px 0 rgba(29, 78, 216, .06);
}

.gre-exam .gre-plan.is-topup {
	gap: 14px;
	padding: 22px 26px;
	border-radius: 28px;
}

/* Duration, set like the home page's card heading. */
.gre-exam .gre-plan__name {
	margin: 0;
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	color: #0F172A;
}

.gre-exam .gre-plan.is-topup .gre-plan__name {
	font-size: 24px;
}

.gre-exam .gre-plan__price {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: #5170FF;
	direction: ltr;
	unicode-bidi: isolate;
	text-align: start;
}

/* The home page's feature list: check icon, 18px text, slate grey. */
.gre-exam .gre-plan__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
	font-size: 18px;
	line-height: 1.5;
	color: #374151;
}

.gre-exam .gre-plan__list li {
	position: relative;
	margin-top: 5px;
	padding-bottom: 5px;
	padding-inline-start: 27px;
}

.gre-exam .gre-plan__list li:first-child {
	margin-top: 0;
}

.gre-exam .gre-plan__list li::before {
	content: '\2713';
	position: absolute;
	inset-inline-start: 0;
	font-weight: 700;
	color: #5170FF;
}

.gre-exam .gre-plan__small {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #64748B;
}

/* Pinned to the card's top corner, as on the home page. */
.gre-exam .gre-plan__badge {
	position: absolute;
	inset-block-start: -14px;
	inset-inline-start: 34px;
	padding: 5px 15px;
	font-size: 14px;
	font-weight: 800;
	color: #FFFFFF;
	background: #1D4ED8;
	border-radius: 100px;
}

/* The button fills the card, exactly as the home page's does, and is pushed to
   the bottom so cards of differing length still line their buttons up. */
.gre-exam .gre-plan .gre-btn {
	margin-top: auto;
	width: 100%;
	padding: 14px 38px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 15px;
	text-align: center;
}

.gre-exam .gre-plans__heading {
	margin: 48px 0 6px;
	font-size: 22px;
	font-weight: 700;
	color: #0F172A;
}

@media (max-width: 640px) {
	.gre-exam .gre-plan {
		padding: 22px 24px;
		border-radius: 28px;
	}

	.gre-exam .gre-plan__name {
		font-size: 32px;
	}

	.gre-exam .gre-plan__list {
		font-size: 16px;
	}
}

/* The way back from a screen a student reached deliberately. */
.gre-exam .gre-back {
	display: inline-block;
	margin-bottom: 18px;
	font-size: 15px;
	font-weight: 600;
	color: #5170FF;
	text-decoration: none;
}
.gre-exam .gre-back:hover {
	text-decoration: underline;
}

/* The free exam offer, shown to a registered student who has not bought yet.
   Given its own panel so it reads as an offer rather than as a consolation
   prize under a disabled button. */
.gre-exam .gre-free {
	margin-top: 18px;
	padding: 26px 28px;
	text-align: start;
	background: linear-gradient(135deg, #EEF1FF 0%, #F6F8FD 100%);
	border: 1px solid #DBEAFE;
	border-radius: 20px;
}

.gre-exam .gre-free__badge {
	display: inline-block;
	margin-bottom: 10px;
	padding: 5px 15px;
	font-size: 13px;
	font-weight: 800;
	color: #FFFFFF;
	background: #16A34A;
	border-radius: 100px;
}

.gre-exam .gre-free h3 {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	color: #0F172A;
}

.gre-exam .gre-free p {
	margin: 0 0 18px;
	font-size: 15px;
	color: #475569;
}

.gre-exam .gre-free .gre-btn {
	width: 100%;
}

.gre-exam .gre-free__alt {
	display: block;
	margin-top: 12px;
	text-align: center;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Empty states, the radar, and the weekly plan.
   --------------------------------------------------------------------------- */

/* A block with nothing in it yet should still say what it is for. */
.gre-exam .gre-empty {
	text-align: center;
	padding: 34px 28px;
	border: 1px dashed #CBD5E1;
	background: #FBFCFF;
}

.gre-exam .gre-empty h3 {
	margin: 0 0 8px;
	font-size: 17px;
	color: #0F172A;
}

.gre-exam .gre-empty__body {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.6;
	color: #64748B;
}

/* --- radar --- */
.gre-exam .gre-radar__wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin: 4px 0 22px;
}

.gre-exam .gre-radar {
	flex: 0 0 260px;
	width: 260px;
	height: 260px;
	overflow: visible;
}

.gre-exam .gre-radar__legend {
	flex: 1 1 240px;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.gre-exam .gre-radar__legend li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: #334155;
}

.gre-exam .gre-radar__dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #94A3B8;
}

.gre-exam .gre-radar__dot.is-low  { background: #EF4444; }
.gre-exam .gre-radar__dot.is-mid  { background: #F59E0B; }
.gre-exam .gre-radar__dot.is-high { background: #22C55E; }

.gre-exam .gre-radar__name {
	flex: 1 1 auto;
	min-width: 0;
}

.gre-exam .gre-radar__pct {
	flex: 0 0 auto;
	font-weight: 700;
	color: #0F172A;
	direction: ltr;
	unicode-bidi: isolate;
}

/* --- weekly plan --- */
.gre-dash .gre-plan-week {
	grid-column: 1 / -1;
	max-width: none;
	width: 100%;
}

.gre-exam .gre-plan-week h3 {
	margin: 0 0 4px;
	font-size: 17px;
}

.gre-exam .gre-plan-week__hint {
	margin: 0 0 18px;
	font-size: 14px;
	color: #64748B;
}

.gre-exam .gre-plan-week__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	counter-reset: none;
}

.gre-exam .gre-plan-week__list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: #F6F8FD;
	border-radius: 14px;
}

.gre-exam .gre-plan-week__num {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 14px;
	font-weight: 700;
	color: #FFFFFF;
	background: #5170FF;
	border-radius: 50%;
}

.gre-exam .gre-plan-week__text {
	flex: 1 1 auto;
	font-size: 15px;
	color: #334155;
}

.gre-exam .gre-plan-week__go {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	color: #5170FF;
	text-decoration: none;
}

@media (max-width: 640px) {
	.gre-exam .gre-radar__wrap {
		gap: 18px;
		justify-content: center;
	}

	.gre-exam .gre-radar {
		flex-basis: 220px;
		width: 220px;
		height: 220px;
	}
}

/* Google sign-in. Google's brand rules ask for their mark on a plain white
   button, so this one deliberately does not follow the site's blue. */
.gre-exam .gre-social {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid #DBEAFE;
	text-align: center;
}

.gre-exam .gre-social__or {
	display: block;
	margin-bottom: 14px;
	font-size: 13px;
	color: #94A3B8;
}

.gre-exam .gre-social__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 13px 16px;
	font-size: 15px;
	font-weight: 600;
	color: #1F2937;
	background: #FFFFFF;
	border: 1px solid #CBD5E1;
	border-radius: 15px;
	text-decoration: none;
	transition: background .15s ease;
}

.gre-exam .gre-social__btn:hover {
	background: #F6F8FD;
}

.gre-exam .gre-social__btn svg {
	flex: 0 0 auto;
}

/* The cancel offer inside the grace window: present, but never competing with
   the timer or the section label for attention. */
.gre-exam__quit {
	background: none;
	border: 0;
	padding: 0;
	margin-inline-start: 14px;
	font: inherit;
	font-size: 0.85em;
	color: var( --gre-muted, #6B7280 );
	text-decoration: underline;
	cursor: pointer;
}

.gre-exam__quit:hover,
.gre-exam__quit:focus-visible {
	color: var( --gre-accent, #5170FF );
}

.gre-exam__quit[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* ============================================================
   Overrides, kept last so they win.

   The theme paints every link and button #CC3366 on hover, and that lands on
   the exam controls too. And its sticky header sits at z-index 9999 while its
   containers sit at 999 - the same as our modal - so the footer, coming later
   in the document, was painting straight over the dialog.
   ============================================================ */

.gre-modal {
	z-index: 100000;
}

/* Long labels - a translated page, or simply a wordier string - must wrap
   inside the box rather than push a button out of it. */
.gre-modal__actions {
	flex-wrap: wrap;
}

.gre-modal__actions .gre-btn {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
}

/* Hover: white behind, black text, brand blue edge. Never the theme's pink. */
.gre-exam .gre-btn:not(:disabled):hover,
.gre-exam .gre-btn:not(:disabled):focus-visible {
	background-color: #FFFFFF;
	border-color: var( --gre-accent, #5170FF );
	color: #0F172A;
}

/* An answer under the cursor reads as the one about to be chosen, so it
   borrows the selected styling rather than a warning colour. */
.gre-exam .gre-option:not(.gre-option--static):hover {
	border-color: var( --gre-accent, #5170FF );
	background-color: var( --gre-selected, #EEF1FF );
	color: var( --gre-text, #0F172A );
}

.gre-exam .gre-option:not(.gre-option--static):hover .gre-option__text,
.gre-exam .gre-option:not(.gre-option--static):hover .gre-option__key {
	color: var( --gre-text, #0F172A );
}

.gre-exam .gre-option:not(.gre-option--static):hover .gre-option__key {
	border-color: var( --gre-accent, #5170FF );
}

/* The theme's pink was also leaking into the question numbers at rest. */
.gre-exam .gre-nav__cell {
	color: var( --gre-text, #0F172A );
}

.gre-exam .gre-nav__cell:hover {
	border-color: var( --gre-accent, #5170FF );
	color: var( --gre-text, #0F172A );
}

/* Plain links inside our panels follow the brand, resting and on hover. */
.gre-exam .gre-panel a:not(.gre-btn),
.gre-exam .gre-panel a:not(.gre-btn):hover,
.gre-exam .gre-panel a:not(.gre-btn):visited {
	color: var( --gre-accent, #5170FF );
}