/**
 * Classifications of Licenses page.
 *
 * Mirrors online-renewal yellow-pill / navy-title language while
 * supporting age/eyesight blocks, class table, and fees table.
 *
 * @package jpd-theme
 */

.jpd-page--classifications-of-licences {
	padding: 0 0 72px;
	color: #333333;
	background: var(--jpd-white);
}

.jpd-classifications {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.jpd-classifications__header {
	margin: 0;
}

.jpd-classifications__title {
	margin: 0;
	color: #0b3a74;
	font-family: var(--jpd-font-heading);
	font-size: clamp(1.5rem, 2.2vw, 1.85rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* ── Section labels ───────────────────────────────────────────── */

.jpd-classifications__section {
	margin: 0 0 var(--jpd-spacing-md);
}

.jpd-classifications__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	margin: 0 0 1.25rem;
	padding: 0.45rem 1.5rem;
	border-radius: 999px;
	background: linear-gradient(90deg, #fde08d 0%, #f5c842 100%);
	color: #1a1a1a;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.jpd-classifications__pill--center {
	display: flex;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

/* ── Age / Eyesight blocks ────────────────────────────────────── */

.jpd-classifications__block {
	margin: 0 0 1.75rem;
}

.jpd-classifications__block:last-child {
	margin-bottom: 0;
}

.jpd-classifications__heading {
	margin: 0 0 0.85rem;
	color: #1a1a1a;
	font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.2rem);
	font-weight: 700;
	line-height: 1.3;
}

.jpd-classifications__list {
	margin: 0;
	padding-left: 1.35rem;
	color: #333333;
	font-size: clamp(0.95rem, 0.35vw + 0.85rem, 1.05rem);
	line-height: 1.7;
}

.jpd-classifications__list li {
	margin: 0 0 0.65rem;
}

.jpd-classifications__list li:last-child {
	margin-bottom: 0;
}

.jpd-classifications__eyesight {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.jpd-classifications__eyesight-card {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.jpd-classifications__eyesight-media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 10rem;
	border-radius: 8px;
	background: #d8dce1;
}

.jpd-classifications__eyesight-icon {
	width: min(100%, 10rem);
	height: auto;
}

.jpd-classifications__eyesight-caption {
	margin: 0;
	color: #333333;
	font-size: clamp(0.95rem, 0.35vw + 0.85rem, 1.05rem);
	line-height: 1.7;
}

/* ── Classification table ─────────────────────────────────────── */

.jpd-classifications__table-wrap {
	overflow-x: auto;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(3, 47, 60, 0.06);
}

.jpd-classifications__table {
	width: 100%;
	min-width: 40rem;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid #e8d48a;
	border-radius: 12px;
	font-size: clamp(0.9rem, 0.3vw + 0.8rem, 1rem);
	line-height: 1.5;
	text-align: left;
}

.jpd-classifications__table th,
.jpd-classifications__table td {
	padding: 0.9rem 1.1rem;
	border-right: 1px solid #e8d48a;
	vertical-align: top;
}

.jpd-classifications__table th:last-child,
.jpd-classifications__table td:last-child {
	border-right: 0;
}

.jpd-classifications__table thead th {
	background: linear-gradient(90deg, #fde08d 0%, #f5c842 100%);
	color: #1a1a1a;
	font-weight: 700;
	text-align: left;
	vertical-align: middle;
}

.jpd-classifications__table tbody th[scope="row"] {
	width: 7.5rem;
	color: #0b3a74;
	font-weight: 700;
	white-space: nowrap;
}

.jpd-classifications__table tbody tr:not(.jpd-classifications__group):nth-child(odd) th,
.jpd-classifications__table tbody tr:not(.jpd-classifications__group):nth-child(odd) td {
	background: var(--jpd-white);
}

.jpd-classifications__table tbody tr:not(.jpd-classifications__group):nth-child(even) th,
.jpd-classifications__table tbody tr:not(.jpd-classifications__group):nth-child(even) td {
	background: #fef6d8;
}

.jpd-classifications__table tbody tr:not(:last-child) th,
.jpd-classifications__table tbody tr:not(:last-child) td {
	border-bottom: 1px solid #e8d48a;
}

.jpd-classifications__group th {
	background: #fef6d8 !important;
	color: #1a1a1a;
	font-weight: 700;
	text-align: center;
	border-right: 0 !important;
}

.jpd-classifications__req {
	margin: 0;
	padding-left: 1.15rem;
}

.jpd-classifications__req li {
	margin: 0 0 0.35rem;
}

.jpd-classifications__req li:last-child {
	margin-bottom: 0;
}

/* ── Fees table ───────────────────────────────────────────────── */

.jpd-classifications__fees-wrap {
	max-width: 44rem;
	overflow-x: auto;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(3, 47, 60, 0.06);
}

.jpd-classifications__fees {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid #cfd4da;
	border-radius: 12px;
	font-size: clamp(0.9rem, 0.3vw + 0.8rem, 1rem);
	line-height: 1.5;
	text-align: left;
}

.jpd-classifications__fees th,
.jpd-classifications__fees td {
	padding: 0.85rem 1.1rem;
	border-right: 1px solid #cfd4da;
	vertical-align: middle;
}

.jpd-classifications__fees th:last-child,
.jpd-classifications__fees td:last-child {
	border-right: 0;
}

.jpd-classifications__fees thead th {
	background: #d8dce1;
	color: #1a1a1a;
	font-weight: 700;
	text-align: center;
}

.jpd-classifications__fees tbody tr:not(:last-child) th,
.jpd-classifications__fees tbody tr:not(:last-child) td {
	border-bottom: 1px solid #cfd4da;
}

.jpd-classifications__fees tbody tr:nth-child(odd) td {
	background: #f3f4f6;
}

.jpd-classifications__fees tbody tr:nth-child(even) td {
	background: var(--jpd-white);
}

.jpd-classifications__fees-label td,
.jpd-classifications__fees-group td {
	background: #e8eaed !important;
	border-right: 0 !important;
}

.jpd-classifications__fee {
	width: 7.5rem;
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.jpd-classifications__eyesight {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.jpd-page--classifications-of-licences {
		padding: 32px 0 48px;
	}

	.jpd-classifications {
		gap: 2rem;
	}

	.jpd-classifications__pill {
		padding: 0.4rem 1.15rem;
		font-size: 0.85rem;
	}

	.jpd-classifications__list {
		padding-left: 1.1rem;
	}

	.jpd-classifications__eyesight-media {
		min-height: 8rem;
	}

	.jpd-classifications__table th,
	.jpd-classifications__table td,
	.jpd-classifications__fees th,
	.jpd-classifications__fees td {
		padding: 0.75rem 0.7rem;
	}

	.jpd-classifications__table tbody th[scope="row"] {
		width: auto;
	}

	.jpd-classifications__fee {
		width: 5.5rem;
	}
}