/* TK9-PUB-004B — Categories / Stepper / Form Structure
   Mobile-first form polish layered on top of 004A/004A1. */

body[data-app="tk9-registration"] .progress-area {
	padding: 18px 16px 0;
	background: linear-gradient(180deg, rgba(255,253,248,.98), rgba(255,253,248,.86));
}

.progress-current-copy {
	display: grid;
	gap: 2px;
}

.progress-current-copy > span {
	color: #7c8a85;
	font-size: .7rem;
	font-weight: 700;
}

.progress-current-copy > strong {
	color: var(--public-ink, #12362e);
	font-size: .95rem;
	font-weight: 900;
}

.progress-save-hint {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 5px 9px;
	border: 1px solid rgba(217,182,111,.32);
	border-radius: 999px;
	background: rgba(217,182,111,.09);
	color: #8a6b30;
	font-size: .62rem;
	font-weight: 800;
	white-space: nowrap;
}

body[data-app="tk9-registration"] .progress-track {
	height: 5px;
	margin-top: 10px;
	background: #edf1ee;
}

body[data-app="tk9-registration"] .progress-track span {
	background: linear-gradient(90deg, var(--public-gold, #d9b66f), #f0d596);
	box-shadow: 0 0 18px rgba(217,182,111,.18);
}

.wizard-stepper {
	list-style: none;
	margin: 15px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 5px;
}

.wizard-stepper li {
	position: relative;
	min-width: 0;
	display: grid;
	justify-items: center;
	gap: 5px;
	padding: 4px 1px 7px;
	color: #8b9793;
	text-align: center;
}

.wizard-stepper li::before {
	content: "";
	position: absolute;
	top: 17px;
	inset-inline-start: calc(50% + 16px);
	width: calc(100% - 27px);
	height: 1px;
	background: #dfe6e2;
}

.wizard-stepper li:last-child::before { display: none; }

.stepper-number {
	position: relative;
	z-index: 1;
	width: 31px;
	height: 31px;
	display: grid;
	place-items: center;
	border: 1px solid #d9e1dd;
	border-radius: 50%;
	background: #fff;
	color: #7d8985;
	font-size: .68rem;
	font-weight: 900;
	box-shadow: 0 4px 10px rgba(16,63,53,.035);
	transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.stepper-copy {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.stepper-copy strong {
	font-size: .61rem;
	font-weight: 800;
	white-space: nowrap;
}

.stepper-copy small { display: none; }

.wizard-stepper li.is-current { color: var(--public-emerald, #103f35); }
.wizard-stepper li.is-current .stepper-number {
	border-color: var(--public-emerald-soft, #1a5a4b);
	background: var(--public-emerald, #103f35);
	color: #fffdf8;
	transform: scale(1.07);
	box-shadow: 0 7px 18px rgba(16,63,53,.16);
}
.wizard-stepper li.is-complete { color: #57736a; }
.wizard-stepper li.is-complete .stepper-number {
	border-color: rgba(217,182,111,.55);
	background: #fbf4e4;
	color: #8a6b30;
}
.wizard-stepper li.is-complete::before { background: rgba(217,182,111,.56); }

body[data-app="tk9-registration"] .wizard-step {
	padding: 25px 17px 24px;
}

body[data-app="tk9-registration"] .section-head {
	margin-bottom: 20px;
	padding-bottom: 17px;
	border-bottom: 1px solid rgba(16,63,53,.07);
}

body[data-app="tk9-registration"] .section-head .eyebrow {
	margin-bottom: 6px;
	font-size: .72rem;
	letter-spacing: .01em;
}

body[data-app="tk9-registration"] .section-head .section-title {
	color: var(--public-ink, #12362e);
	font-size: clamp(1.42rem, 6vw, 2rem);
	line-height: 1.4;
}

body[data-app="tk9-registration"] .section-head .section-lead {
	max-width: 62ch;
	font-size: .82rem;
	line-height: 1.8;
}

/* Category selection */
.category-grid {
	gap: 11px;
}

body[data-app="tk9-registration"] .category-card {
	position: relative;
	grid-template-columns: 52px minmax(0, 1fr) 29px;
	gap: 12px;
	min-height: 122px;
	padding: 15px;
	border: 1px solid rgba(16,63,53,.11);
	border-radius: 20px;
	background: linear-gradient(145deg, #fff, #fcfbf6);
	box-shadow: 0 8px 24px rgba(16,63,53,.035);
	overflow: hidden;
}

body[data-app="tk9-registration"] .category-card::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: rgba(16,63,53,.08);
	transition: background .18s ease, width .18s ease;
}

body[data-app="tk9-registration"] .category-card:hover {
	transform: translateY(-1px);
	border-color: rgba(16,63,53,.2);
	box-shadow: 0 13px 30px rgba(16,63,53,.075);
}

body[data-app="tk9-registration"] .category-card:focus-within {
	outline: 3px solid rgba(217,182,111,.22);
	outline-offset: 2px;
}

body[data-app="tk9-registration"] .category-card:has(input:checked) {
	border-color: rgba(16,63,53,.42);
	background: linear-gradient(145deg, #f7fbf8, #fffdf8);
	box-shadow: inset 0 0 0 1px rgba(16,63,53,.12), 0 12px 32px rgba(16,63,53,.08);
}

body[data-app="tk9-registration"] .category-card:has(input:checked)::after {
	width: 5px;
	background: var(--public-gold, #d9b66f);
}

body[data-app="tk9-registration"] .category-icon {
	width: 52px;
	height: 52px;
	border: 1px solid rgba(16,63,53,.08);
	border-radius: 17px;
	background: linear-gradient(145deg, #edf5f1, #f8f5e9);
	color: var(--public-emerald, #103f35);
	font-size: 1.16rem;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}

.category-card-quran .category-icon { background: linear-gradient(145deg, #eaf5ef, #f9f2de); }
.category-card-university .category-icon { background: linear-gradient(145deg, #eef2f7, #fbf5e6); }
.category-card-tawjihi .category-icon { background: linear-gradient(145deg, #f3efe6, #eef5f1); }

.category-copy {
	gap: 3px;
	align-self: center;
}

.category-kicker {
	color: #a37e38;
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .02em;
}

body[data-app="tk9-registration"] .category-copy strong {
	color: var(--public-ink, #12362e);
	font-size: .91rem;
	line-height: 1.5;
}

body[data-app="tk9-registration"] .category-copy small {
	font-size: .7rem;
	line-height: 1.65;
}

.category-rule-chip {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	min-height: 25px;
	margin-top: 4px;
	padding: 4px 8px;
	border: 1px solid rgba(217,182,111,.34);
	border-radius: 999px;
	background: rgba(217,182,111,.08);
	color: #896a30;
	font-size: .58rem;
	font-weight: 800;
}

body[data-app="tk9-registration"] .check-dot {
	width: 29px;
	height: 29px;
	border-color: rgba(16,63,53,.16);
	background: #fff;
}

body[data-app="tk9-registration"] .category-card:has(input:checked) .check-dot {
	background: var(--public-emerald, #103f35);
	border-color: var(--public-emerald, #103f35);
	box-shadow: 0 7px 18px rgba(16,63,53,.16);
}

.category-selection-summary {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 13px;
	padding: 12px 13px;
	border: 1px solid rgba(16,63,53,.09);
	border-radius: 16px;
	background: #f7f9f7;
	color: #687873;
}

.category-selection-summary.has-selection {
	border-color: rgba(26,90,75,.2);
	background: #f1f8f5;
	color: var(--public-emerald, #103f35);
}

.category-selection-icon {
	width: 25px;
	height: 25px;
	flex: 0 0 25px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #e7eeeb;
	font-size: .68rem;
	font-weight: 900;
}

.category-selection-summary.has-selection .category-selection-icon {
	background: #dfeee7;
	color: var(--public-emerald, #103f35);
}

.category-selection-summary > div { display: grid; gap: 2px; }
.category-selection-summary strong { font-size: .76rem; }
.category-selection-summary small { font-size: .68rem; line-height: 1.6; color: #7b8984; }

.selected-tracks-context {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin: -3px 0 18px;
	padding: 10px 11px;
	border: 1px solid rgba(217,182,111,.22);
	border-radius: 15px;
	background: rgba(255,250,236,.55);
}

.selected-tracks-context:empty { display: none; }
.selected-tracks-context::before {
	content: "الفئات المختارة";
	color: #8b7651;
	font-size: .62rem;
	font-weight: 800;
}
.selected-track-chip {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 4px 8px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(16,63,53,.1);
	color: var(--public-emerald, #103f35);
	font-size: .62rem;
	font-weight: 800;
}

/* Form fields */
body[data-app="tk9-registration"] .form-grid {
	gap: 14px;
}

body[data-app="tk9-registration"] .field {
	position: relative;
	padding: 12px;
	border: 1px solid rgba(16,63,53,.075);
	border-radius: 17px;
	background: rgba(255,255,255,.74);
	transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

body[data-app="tk9-registration"] .field:focus-within {
	border-color: rgba(26,90,75,.24);
	background: #fff;
	box-shadow: 0 8px 24px rgba(16,63,53,.055);
}

body[data-app="tk9-registration"] .field.invalid {
	border-color: rgba(198,92,92,.42);
	background: #fffafa;
}

body[data-app="tk9-registration"] .field label {
	margin-bottom: 7px;
	color: #27463e;
	font-size: .78rem;
	font-weight: 800;
}

body[data-app="tk9-registration"] .field input[type="text"],
body[data-app="tk9-registration"] .field input[type="tel"],
body[data-app="tk9-registration"] .field input[type="date"],
body[data-app="tk9-registration"] .field input[type="number"],
body[data-app="tk9-registration"] .field select,
body[data-app="tk9-registration"] .field textarea {
	min-height: 48px;
	border-color: #d7e0dc;
	border-radius: 12px;
	background: #fff;
	font-size: .84rem;
}

body[data-app="tk9-registration"] .field input::placeholder,
body[data-app="tk9-registration"] .field textarea::placeholder {
	color: #a4afab;
}

body[data-app="tk9-registration"] .helper {
	margin-top: 6px;
	font-size: .65rem;
	line-height: 1.55;
}

body[data-app="tk9-registration"] .field-error:not(:empty) {
	margin-top: 7px;
	padding: 6px 8px;
	border-radius: 9px;
	background: #fff0f0;
	font-size: .68rem;
	line-height: 1.45;
}

body[data-app="tk9-registration"] .subsection {
	margin-top: 22px;
	padding: 18px 14px 14px;
	border: 1px solid rgba(16,63,53,.08);
	border-radius: 20px;
	background: linear-gradient(180deg, #f8faf8, #fff);
}

body[data-app="tk9-registration"] .subsection-title {
	margin-bottom: 14px;
	padding-bottom: 11px;
	border-bottom: 1px dashed rgba(16,63,53,.11);
}

body[data-app="tk9-registration"] .subsection-title span {
	color: var(--public-ink, #12362e);
	font-size: .86rem;
}

body[data-app="tk9-registration"] .subsection-title small {
	font-size: .68rem;
	line-height: 1.6;
}

/* Track panels */
body[data-app="tk9-registration"] .section-head-achievement {
	position: relative;
	padding: 16px 17px;
	border: 1px solid rgba(16,63,53,.08);
	border-radius: 22px;
	background:
		radial-gradient(circle at 86% 12%, rgba(217,182,111,.11), transparent 24%),
		linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,247,.94));
	box-shadow: 0 12px 28px rgba(16,63,53,.045);
}

body[data-app="tk9-registration"] .section-head-achievement .section-lead {
	max-width: 58ch;
}

body[data-app="tk9-registration"] .track-panel {
	--track-accent: rgba(217,182,111,.72);
	--track-accent-strong: #d9b66f;
	--track-ink: var(--public-emerald, #103f35);
	position: relative;
	margin-top: 16px;
	padding: 17px;
	border: 1px solid rgba(16,63,53,.09);
	border-radius: 24px;
	background:
		radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--track-accent-strong) 10%, transparent), transparent 23%),
		linear-gradient(160deg, #fff, #fbfcfa 72%, #f6f8f6);
	box-shadow: 0 12px 30px rgba(16,63,53,.045);
	overflow: hidden;
}

body[data-app="tk9-registration"] .track-panel::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--track-accent);
}

body[data-app="tk9-registration"] .track-panel::after {
	content: "";
	position: absolute;
	inset-inline-end: -48px;
	top: -48px;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--track-accent-strong) 12%, transparent), transparent 68%);
	pointer-events: none;
}

body[data-app="tk9-registration"] .track-panel-quran {
	--track-accent: rgba(217,182,111,.82);
	--track-accent-strong: #d9b66f;
}

body[data-app="tk9-registration"] .track-panel-university {
	--track-accent: rgba(101,185,173,.78);
	--track-accent-strong: #6eb9ae;
}

body[data-app="tk9-registration"] .track-panel-tawjihi {
	--track-accent: rgba(135,159,223,.82);
	--track-accent-strong: #90a6df;
}

body[data-app="tk9-registration"] .track-heading {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(16,63,53,.075);
}

body[data-app="tk9-registration"] .track-letter {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 18px;
	background: linear-gradient(145deg, rgba(16,63,53,.97), rgba(26,90,75,.92));
	border: 1px solid rgba(255,255,255,.12);
	color: var(--track-accent-strong);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.08),
		0 10px 22px rgba(16,63,53,.15);
}

body[data-app="tk9-registration"] .track-heading-icon-svg {
	width: 24px;
	height: 24px;
	display: block;
}

.track-heading-kicker {
	display: block;
	margin-bottom: 3px;
	color: color-mix(in srgb, var(--track-accent-strong) 72%, #7a5d2a 28%);
	font-size: .6rem;
	font-weight: 900;
	letter-spacing: .01em;
}

body[data-app="tk9-registration"] .track-heading h3 {
	margin-bottom: 4px;
	color: var(--public-ink, #12362e);
	font-size: .98rem;
}

body[data-app="tk9-registration"] .track-heading p {
	margin: 0;
	font-size: .72rem;
	line-height: 1.65;
	color: #59706a;
}

body[data-app="tk9-registration"] .details-track-grid {
	display: grid;
	gap: 14px;
}

body[data-app="tk9-registration"] .detail-compact-row {
	display: grid;
	gap: 14px;
}

body[data-app="tk9-registration"] .detail-compact-row > .field {
	margin: 0;
}

body[data-app="tk9-registration"] #institutionJordanWrap select,
body[data-app="tk9-registration"] #institutionOtherWrap input {
	min-height: 50px;
}

.country-other-wrap {
	margin-top: 8px;
}
.country-other-wrap input {
	width: 100%;
}
.country-selector-field > input[type="hidden"] {
	display: none;
}
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Navigation */
body[data-app="tk9-registration"] .wizard-nav {
	gap: 9px;
	padding: 13px 17px calc(13px + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(16,63,53,.08);
	background: rgba(255,253,248,.96);
	backdrop-filter: blur(10px);
}

body[data-app="tk9-registration"] .wizard-nav .primary-button,
body[data-app="tk9-registration"] .wizard-nav .secondary-button {
	min-height: 48px;
	border-radius: 14px;
}

body[data-app="tk9-registration"] .draft-state {
	font-size: .62rem;
	line-height: 1.35;
	text-align: center;
}

body[data-app="tk9-registration"] .detail-compact-row-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 599px) {
	body[data-app="tk9-registration"] .detail-compact-row-2 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 410px) {
	.wizard-stepper { gap: 2px; }
	.stepper-number { width: 28px; height: 28px; }
	.wizard-stepper li::before { top: 15px; inset-inline-start: calc(50% + 14px); width: calc(100% - 23px); }
	.stepper-copy strong { font-size: .56rem; }
	body[data-app="tk9-registration"] .category-card { grid-template-columns: 46px minmax(0,1fr) 27px; padding: 13px; }
	body[data-app="tk9-registration"] .category-icon { width: 46px; height: 46px; }
}

@media (min-width: 720px) {
	body[data-app="tk9-registration"] .progress-area { padding: 25px 34px 0; }
	.progress-current-copy > span { font-size: .74rem; }
	.progress-current-copy > strong { font-size: 1rem; }
	.wizard-stepper { gap: 8px; margin-top: 18px; }
	.wizard-stepper li { grid-template-columns: 35px minmax(0,1fr); justify-items: initial; align-items: center; text-align: right; gap: 8px; padding: 4px 0 9px; }
	.wizard-stepper li::before { top: 21px; inset-inline-start: calc(35px + 8px); width: calc(100% - 32px); }
	.stepper-number { width: 35px; height: 35px; }
	.stepper-copy strong { font-size: .68rem; }
	.stepper-copy small { display: block; color: #97a19e; font-size: .53rem; white-space: nowrap; }
	body[data-app="tk9-registration"] .wizard-step { padding: 34px 34px 31px; }
	body[data-app="tk9-registration"] .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
	body[data-app="tk9-registration"] .category-card { grid-template-columns: 1fr; align-content: start; min-height: 250px; padding: 18px; text-align: right; }
	body[data-app="tk9-registration"] .category-card .category-icon { width: 56px; height: 56px; }
	body[data-app="tk9-registration"] .category-card .check-dot { top: 17px; left: 17px; }
	.category-copy { align-self: start; margin-top: 10px; }
	.category-copy strong { min-height: 3em; }
	.category-rule-chip { margin-top: 10px; }
	body[data-app="tk9-registration"] .field { padding: 13px; }
	body[data-app="tk9-registration"] .track-panel { padding: 21px; }
	body[data-app="tk9-registration"] .section-head-achievement { padding: 18px 20px; }
	body[data-app="tk9-registration"] .detail-compact-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body[data-app="tk9-registration"] .subsection { padding: 20px; }
	body[data-app="tk9-registration"] .wizard-nav { padding-inline: 34px; }
}

@media (min-width: 1040px) {
	body[data-app="tk9-registration"] .registration-card { width: min(980px, 100%); }
}

@media (prefers-reduced-motion: reduce) {
	.stepper-number,
	body[data-app="tk9-registration"] .category-card { transition: none !important; }
}

/* TK9-PUB-008A — Category Selection Visual Identity */
body[data-app="tk9-registration"] .category-grid {
	gap: 14px;
}

body[data-app="tk9-registration"] .category-card {
	--card-accent: #d7b56a;
	--card-ink: #f5f2e8;
	--card-soft: rgba(255,255,255,.82);
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	align-content: start;
	gap: 12px;
	min-height: 212px;
	padding: 20px 18px 18px;
	text-align: center;
	border: 1px solid rgba(255,255,255,.09);
	border-radius: 24px;
	background-color: #0f2c25;
	box-shadow: 0 14px 34px rgba(8, 25, 20, .12);
	color: var(--card-ink);
	overflow: hidden;
}

body[data-app="tk9-registration"] .category-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	opacity: 1;
	background:
		radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--card-accent) 18%, transparent), transparent 27%),
		linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.22)),
		var(--card-background, linear-gradient(160deg, #123c31 0%, #0b231d 62%, #07130f 100%));
}

body[data-app="tk9-registration"] .category-card::after {
	content: "";
	position: absolute;
	inset: 0;
	width: auto;
	z-index: -1;
	border-radius: inherit;
	border: 1px solid rgba(255,255,255,.12);
	background:
		linear-gradient(180deg, rgba(255,255,255,.04), transparent 26%),
		var(--card-art, none);
	opacity: .95;
	pointer-events: none;
}

body[data-app="tk9-registration"] .category-card:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--card-accent) 34%, rgba(255,255,255,.18));
	box-shadow: 0 18px 40px rgba(8, 25, 20, .18);
}

body[data-app="tk9-registration"] .category-card:focus-within {
	outline: 3px solid color-mix(in srgb, var(--card-accent) 20%, rgba(255,255,255,.16));
	outline-offset: 3px;
}

body[data-app="tk9-registration"] .category-card:has(input:checked) {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--card-accent) 42%, rgba(255,255,255,.24));
	box-shadow:
		0 20px 44px rgba(8, 25, 20, .22),
		0 0 0 1px color-mix(in srgb, var(--card-accent) 32%, rgba(255,255,255,.1));
}

body[data-app="tk9-registration"] .category-card:has(input:checked)::after {
	background:
		linear-gradient(180deg, rgba(255,255,255,.06), transparent 28%),
		linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 14%, transparent), transparent 34%),
		var(--card-art, none);
	border-color: color-mix(in srgb, var(--card-accent) 48%, rgba(255,255,255,.24));
}

body[data-app="tk9-registration"] .category-card-quran {
	--card-accent: #d8ba73;
	--card-background:
		radial-gradient(circle at 86% 16%, rgba(216,186,115,.18), transparent 23%),
		linear-gradient(160deg, #0f3b31 0%, #0a241d 62%, #061511 100%);
	--card-art:
		radial-gradient(circle at 85% 22%, rgba(216,186,115,.1), transparent 18%),
		repeating-linear-gradient(90deg, transparent 0 58px, rgba(255,255,255,.028) 58px 59px),
		repeating-linear-gradient(0deg, transparent 0 58px, rgba(255,255,255,.024) 58px 59px),
		radial-gradient(circle at 50% 50%, transparent 0 38px, rgba(216,186,115,.055) 38px 40px, transparent 40px 100%);
}

body[data-app="tk9-registration"] .category-card-university {
	--card-accent: #98d1c9;
	--card-background:
		radial-gradient(circle at 84% 18%, rgba(152,209,201,.14), transparent 24%),
		linear-gradient(160deg, #124556 0%, #0b2e39 61%, #081820 100%);
	--card-art:
		radial-gradient(circle at 104% 56%, transparent 0 88px, rgba(152,209,201,.08) 88px 90px, transparent 90px 128px, rgba(152,209,201,.06) 128px 130px, transparent 130px),
		repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 2px, transparent 2px 18px);
}

body[data-app="tk9-registration"] .category-card-tawjihi {
	--card-accent: #b9c7ef;
	--card-background:
		radial-gradient(circle at 82% 18%, rgba(185,199,239,.14), transparent 24%),
		linear-gradient(160deg, #1f3f73 0%, #152c54 58%, #0d1b33 100%);
	--card-art:
		repeating-linear-gradient(0deg, rgba(255,255,255,.024) 0 1px, transparent 1px 22px),
		repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 26px),
		linear-gradient(140deg, transparent 68%, rgba(255,255,255,.07) 69%, transparent 70%);
}

body[data-app="tk9-registration"] .category-icon {
	width: 58px;
	height: 58px;
	border: 1px solid color-mix(in srgb, var(--card-accent) 34%, rgba(255,255,255,.26));
	border-radius: 19px;
	background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
	color: var(--card-accent);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.14),
		0 12px 28px rgba(0,0,0,.16);
	backdrop-filter: blur(2px);
}

body[data-app="tk9-registration"] .category-icon-svg {
	width: 28px;
	height: 28px;
	display: block;
}

body[data-app="tk9-registration"] .category-copy {
	display: grid;
	gap: 7px;
	justify-items: center;
	align-self: center;
	margin-top: 2px;
	width: 100%;
}

body[data-app="tk9-registration"] .category-kicker {
	display: none;
}

body[data-app="tk9-registration"] .category-copy strong {
	min-height: auto;
	color: var(--card-ink);
	font-size: 1.1rem;
	line-height: 1.45;
}

body[data-app="tk9-registration"] .category-copy small {
	max-width: 25ch;
	margin-inline: auto;
	font-size: .79rem;
	line-height: 1.75;
	color: var(--card-soft);
}

body[data-app="tk9-registration"] .category-rule-chip {
	justify-self: center;
	min-height: 30px;
	margin-top: 4px;
	padding: 6px 12px;
	border-color: color-mix(in srgb, var(--card-accent) 44%, transparent);
	background: rgba(255,255,255,.11);
	color: color-mix(in srgb, var(--card-accent) 84%, #fff 16%);
	font-size: .62rem;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

body[data-app="tk9-registration"] .check-dot {
	position: absolute;
	top: 16px;
	left: 16px;
	width: 36px;
	height: 36px;
	border: 1.5px solid rgba(255,255,255,.45);
	border-radius: 50%;
	background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
	color: rgba(255,255,255,.82);
	box-shadow:
		0 10px 18px rgba(0,0,0,.16),
		inset 0 1px 0 rgba(255,255,255,.15),
		inset 0 -4px 8px rgba(0,0,0,.12);
	text-shadow: 0 1px 1px rgba(0,0,0,.18);
}

body[data-app="tk9-registration"] .category-card:has(input:checked) .check-dot {
	background:
		radial-gradient(circle at 35% 30%, rgba(255,255,255,.42), transparent 40%),
		linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 92%, #fff 8%), color-mix(in srgb, var(--card-accent) 86%, #000 14%));
	border-color: rgba(255,255,255,.82);
	color: #fff;
	box-shadow:
		0 12px 24px rgba(0,0,0,.2),
		inset 0 1px 0 rgba(255,255,255,.16),
		inset 0 -5px 10px rgba(0,0,0,.18);
	transform: scale(1.04);
}

body[data-app="tk9-registration"] .category-selection-summary {
	align-items: center;
	justify-content: center;
	text-align: center;
}

body[data-app="tk9-registration"] .category-selection-summary > div {
	justify-items: center;
}

@media (max-width: 410px) {
	body[data-app="tk9-registration"] .category-card {
		min-height: 188px;
		padding: 18px 16px 16px;
	}

	body[data-app="tk9-registration"] .category-icon {
		width: 54px;
		height: 54px;
	}
}

@media (min-width: 720px) {
	body[data-app="tk9-registration"] .category-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 15px;
	}

	body[data-app="tk9-registration"] .category-card {
		min-height: 258px;
		padding: 22px 20px 19px;
		text-align: center;
	}

	body[data-app="tk9-registration"] .category-card .category-icon {
		width: 60px;
		height: 60px;
	}

	body[data-app="tk9-registration"] .category-card .check-dot {
		top: 18px;
		left: 18px;
	}

	body[data-app="tk9-registration"] .category-copy {
		align-self: center;
		margin-top: 4px;
	}

	body[data-app="tk9-registration"] .category-copy strong {
		font-size: 1.2rem;
	}
}

/* TK9-PUB-008E — Achievement Details Screen Polish */
/* Refines Step 3 with visual continuity, Jordan-only selectors, and structured university fields. */

/* TK9-PUB-008D — Personal Information Screen Polish */
body[data-app="tk9-registration"] .personal-intro-grid,
body[data-app="tk9-registration"] .personal-details-grid {
	margin-top: 12px;
}

body[data-app="tk9-registration"] .field-hero-note {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 15px;
	border: 1px solid rgba(217,182,111,.26);
	background: linear-gradient(135deg, rgba(255,250,238,.98), rgba(245,252,249,.96));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

body[data-app="tk9-registration"] .field-hero-note strong {
	display: block;
	color: #234a40;
	font-size: .88rem;
	font-weight: 900;
}

body[data-app="tk9-registration"] .field-hero-note small {
	display: block;
	margin-top: 4px;
	font-size: .71rem;
	line-height: 1.7;
	color: #6d7c76;
}

body[data-app="tk9-registration"] .field-hero-note-icon {
	flex: 0 0 44px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 16px;
	background: radial-gradient(circle at 30% 30%, rgba(233,207,142,.98), rgba(196,152,78,.92));
	color: #fffaf2;
	font-size: 1rem;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 24px rgba(171,133,63,.18);
}

body[data-app="tk9-registration"] .field-choice-group label,
body[data-app="tk9-registration"] .field-birthdate label {
	margin-bottom: 10px;
}

body[data-app="tk9-registration"] .choice-chip-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

body[data-app="tk9-registration"] .choice-chip-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-app="tk9-registration"] .choice-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 52px;
	padding: 0 14px;
	border: 1px solid rgba(26,90,75,.16);
	border-radius: 15px;
	background: linear-gradient(180deg, #ffffff, #f6fbf9);
	color: #21443c;
	font: inherit;
	font-size: .87rem;
	font-weight: 800;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
	box-shadow: 0 6px 18px rgba(16,63,53,.05), inset 0 1px 0 rgba(255,255,255,.9);
}

body[data-app="tk9-registration"] .choice-chip:hover {
	transform: translateY(-1px);
	box-shadow: 0 9px 22px rgba(16,63,53,.08), inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-app="tk9-registration"] .choice-chip.is-selected,
body[data-app="tk9-registration"] .choice-chip[data-selected="true"] {
	border-color: rgba(188,149,75,.65);
	background: linear-gradient(180deg, rgba(244,236,211,.95), rgba(255,250,237,.98));
	box-shadow: 0 12px 28px rgba(170,133,63,.15), inset 0 1px 0 rgba(255,255,255,.95);
	color: #23463d;
}

body[data-app="tk9-registration"] .choice-chip-check {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: linear-gradient(180deg, #eef4f1, #dde9e4);
	border: 1px solid rgba(26,90,75,.15);
	color: transparent;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 10px rgba(16,63,53,.08);
	transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

body[data-app="tk9-registration"] .choice-chip.is-selected .choice-chip-check,
body[data-app="tk9-registration"] .choice-chip[data-selected="true"] .choice-chip-check {
	background: radial-gradient(circle at 30% 30%, rgba(244,223,168,.98), rgba(200,159,82,.95));
	border-color: rgba(188,149,75,.78);
	color: #ffffff;
	transform: scale(1.02);
}

body[data-app="tk9-registration"] .choice-chip-title {
	line-height: 1.45;
}

body[data-app="tk9-registration"] .birthdate-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

body[data-app="tk9-registration"] .birthdate-part {
	display: grid;
	gap: 6px;
}

body[data-app="tk9-registration"] .birthdate-part > span {
	color: #5d6f69;
	font-size: .68rem;
	font-weight: 800;
}

body[data-app="tk9-registration"] .birthdate-part select {
	text-align: center;
	text-align-last: center;
	font-weight: 800;
}

body[data-app="tk9-registration"] .birthdate-preview {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 13px;
	font-size: .73rem;
	font-weight: 800;
	line-height: 1.6;
}

body[data-app="tk9-registration"] .birthdate-preview[data-state="ready"] {
	background: rgba(238,247,243,.95);
	border: 1px solid rgba(26,90,75,.12);
	color: #1f5a4d;
}

body[data-app="tk9-registration"] .birthdate-preview[data-state="draft"] {
	background: rgba(255,250,236,.92);
	border: 1px solid rgba(217,182,111,.24);
	color: #8b7651;
}

body[data-app="tk9-registration"] .birthdate-preview[data-state="invalid"] {
	background: #fff0f0;
	border: 1px solid rgba(198,92,92,.22);
	color: #a04949;
}

body[data-app="tk9-registration"] .field-hidden-runtime[hidden] {
	display: none !important;
}

/* TK9-PUB-008D2 — Mobile Compact Personal Choices */
body[data-app="tk9-registration"] .international-phone-hint {
	margin-top: 7px;
	padding: 7px 9px;
	border-radius: 10px;
	background: rgba(238,247,243,.95);
	border: 1px solid rgba(26,90,75,.12);
	color: #2d6558;
	font-weight: 800;
}

@media (max-width: 700px) {
	body[data-app="tk9-registration"] .choice-chip-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	body[data-app="tk9-registration"] .choice-chip-grid-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 7px;
	}

	body[data-app="tk9-registration"] .choice-chip {
		min-width: 0;
		min-height: 50px;
		padding: 7px 8px;
		gap: 6px;
		border-radius: 13px;
		font-size: .79rem;
	}

	body[data-app="tk9-registration"] .choice-chip-grid-3 .choice-chip {
		min-height: 62px;
		padding-inline: 5px;
	}

	body[data-app="tk9-registration"] .choice-chip-check {
		flex: 0 0 22px;
		width: 22px;
		height: 22px;
	}

	body[data-app="tk9-registration"] .choice-chip-grid-3 .choice-chip-check {
		flex-basis: 20px;
		width: 20px;
		height: 20px;
	}

	body[data-app="tk9-registration"] .choice-chip-title {
		min-width: 0;
		text-align: center;
		overflow-wrap: anywhere;
	}

	body[data-app="tk9-registration"] .birthdate-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 7px;
	}

	body[data-app="tk9-registration"] .birthdate-part {
		min-width: 0;
		gap: 4px;
	}

	body[data-app="tk9-registration"] .birthdate-part > span {
		text-align: center;
		font-size: .64rem;
	}

	body[data-app="tk9-registration"] .birthdate-part select {
		min-width: 0;
		min-height: 46px;
		padding-inline: 4px;
		font-size: .78rem;
	}
}