/* 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;
	}
}