/* GERAK JEK Member Public UI V2.9.1
 * Presentation-only stylesheet.
 * Does not alter form names, values, submission URLs, payment logic or member status logic.
 */

:root {
	--gj-blue-950: #081b4d;
	--gj-blue-900: #0d2b73;
	--gj-blue-800: #123d9a;
	--gj-blue-700: #1759d1;
	--gj-blue-600: #1e6bea;
	--gj-blue-100: #eaf2ff;
	--gj-text: #17243f;
	--gj-muted: #64748b;
	--gj-border: #dbe5f2;
	--gj-card: #ffffff;
	--gj-bg: #f5f8fd;
	--gj-green: #18a46a;
	--gj-orange: #f59e0b;
	--gj-shadow: 0 18px 50px rgba(17, 38, 78, .10);
	--gj-radius: 18px;
}

body.gj-v291-register,
body.gj-v291-login {
	background:
		radial-gradient(circle at 85% 8%, rgba(55, 125, 255, .12), transparent 28rem),
		linear-gradient(180deg, #f7faff 0%, #f5f8fd 100%) !important;
	color: var(--gj-text);
}

body.gj-v291-register *,
body.gj-v291-login * {
	box-sizing: border-box;
}

body.gj-v291-register .site-main,
body.gj-v291-register main,
body.gj-v291-login .site-main,
body.gj-v291-login main {
	max-width: 1280px;
	margin: 0 auto;
}

body.gj-v291-register .entry-content,
body.gj-v291-login .entry-content {
	max-width: 1240px;
	margin: 0 auto;
	padding: 28px 20px 64px;
}

.gj-v291-public-header {
	position: relative;
	overflow: hidden;
	margin: 0 auto 22px;
	max-width: 1240px;
	border-radius: 20px;
	background: linear-gradient(135deg, var(--gj-blue-950), var(--gj-blue-700));
	color: #fff;
	box-shadow: var(--gj-shadow);
	padding: 28px 32px 24px;
}

.gj-v291-public-header:after {
	content: "";
	position: absolute;
	width: 330px;
	height: 330px;
	right: -130px;
	top: -190px;
	border-radius: 50%;
	background: rgba(255,255,255,.10);
}

.gj-v291-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	z-index: 1;
}

.gj-v291-brand-mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: #fff;
	color: var(--gj-blue-800);
	font-weight: 900;
	font-size: 20px;
	box-shadow: 0 8px 22px rgba(0,0,0,.15);
}

.gj-v291-brand-name {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .2px;
}

.gj-v291-brand-sub {
	font-size: 10px;
	opacity: .75;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.gj-v291-title-row {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	margin-top: 26px;
}

.gj-v291-title-row h1 {
	margin: 0 !important;
	color: #fff !important;
	font-size: clamp(30px, 4vw, 42px) !important;
	line-height: 1.08;
	font-weight: 800 !important;
}

.gj-v291-title-row p {
	margin: 9px 0 0 !important;
	color: rgba(255,255,255,.82) !important;
	font-size: 14px;
	max-width: 620px;
}

.gj-v291-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(90px, 1fr));
	gap: 8px;
	margin-top: 26px;
	position: relative;
	z-index: 1;
}

.gj-v291-step {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.gj-v291-step:after {
	content: "";
	position: absolute;
	left: 31px;
	right: -4px;
	top: 16px;
	height: 1px;
	background: rgba(255,255,255,.30);
}

.gj-v291-step:last-child:after { display: none; }

.gj-v291-step-dot {
	position: relative;
	z-index: 2;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255,255,255,.45);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 800;
	background: rgba(255,255,255,.12);
}

.gj-v291-step.is-active .gj-v291-step-dot {
	background: #fff;
	color: var(--gj-blue-800);
	border-color: #fff;
}

.gj-v291-step-label {
	font-size: 11px;
	line-height: 1.15;
	font-weight: 700;
	opacity: .92;
}

.gj-v291-shell {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.gj-v291-side {
	position: sticky;
	top: 20px;
	padding: 18px;
	background: rgba(255,255,255,.86);
	border: 1px solid var(--gj-border);
	border-radius: var(--gj-radius);
	box-shadow: 0 12px 32px rgba(17,38,78,.06);
}

.gj-v291-side-item {
	display: flex;
	gap: 10px;
	padding: 12px 10px;
	border-radius: 12px;
	margin-bottom: 5px;
	font-size: 12px;
	color: var(--gj-muted);
}

.gj-v291-side-item.is-active {
	background: var(--gj-blue-100);
	color: var(--gj-blue-800);
	font-weight: 800;
}

.gj-v291-side-num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #edf1f7;
	color: #334155;
	font-size: 11px;
	font-weight: 800;
	flex: 0 0 24px;
}

.gj-v291-side-item.is-active .gj-v291-side-num {
	background: var(--gj-blue-700);
	color: #fff;
}

.gj-v291-card {
	background: var(--gj-card);
	border: 1px solid var(--gj-border);
	border-radius: var(--gj-radius);
	box-shadow: 0 12px 36px rgba(17,38,78,.06);
	padding: clamp(20px, 3vw, 32px);
	margin-bottom: 18px;
}

body.gj-v291-register .entry-content > h1,
body.gj-v291-register .entry-content > h2,
body.gj-v291-register .entry-content > p:first-of-type {
	display: none;
}

body.gj-v291-register form {
	background: transparent;
	border: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
}

body.gj-v291-register form > h2,
body.gj-v291-register form > h3 {
	color: var(--gj-text);
	font-size: 19px;
	margin: 0 0 18px;
	padding-bottom: 11px;
	border-bottom: 1px solid var(--gj-border);
}

body.gj-v291-register label {
	display: block;
	color: #263653;
	font-size: 12px;
	font-weight: 700;
	margin: 0 0 6px;
}

body.gj-v291-register input:not([type=radio]):not([type=checkbox]):not([type=submit]),
body.gj-v291-register select,
body.gj-v291-register textarea,
body.gj-v291-login input:not([type=radio]):not([type=checkbox]):not([type=submit]),
body.gj-v291-login select,
body.gj-v291-login textarea {
	width: 100%;
	border: 1px solid var(--gj-border);
	border-radius: 10px;
	background: #fff;
	min-height: 44px;
	padding: 10px 12px;
	color: var(--gj-text);
	font-size: 13px;
	box-shadow: 0 2px 7px rgba(17,38,78,.025);
	transition: .18s ease;
}

body.gj-v291-register input:focus,
body.gj-v291-register select:focus,
body.gj-v291-register textarea:focus,
body.gj-v291-login input:focus {
	border-color: #4d8cf0;
	box-shadow: 0 0 0 4px rgba(30,107,234,.10);
	outline: none;
}

body.gj-v291-register .gj-v291-field-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 15px;
}

.gj-v291-span-12 { grid-column: span 12; }
.gj-v291-span-8 { grid-column: span 8; }
.gj-v291-span-6 { grid-column: span 6; }
.gj-v291-span-4 { grid-column: span 4; }

.gj-v291-package-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.gj-v291-package-option {
	position: relative;
	display: block !important;
	padding: 15px !important;
	border: 1px solid var(--gj-border) !important;
	border-radius: 14px !important;
	background: #fff !important;
	cursor: pointer;
	transition: .18s ease;
	min-height: 104px;
}

.gj-v291-package-option:hover {
	border-color: #78a7f2 !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(30,107,234,.10);
}

.gj-v291-package-option.gj-selected {
	border-color: var(--gj-blue-600) !important;
	background: #f1f6ff !important;
	box-shadow: 0 0 0 2px rgba(30,107,234,.10);
}

.gj-v291-package-option input[type=radio] {
	position: absolute;
	right: 14px;
	top: 14px;
	margin: 0;
	accent-color: var(--gj-blue-600);
}

.gj-v291-package-name {
	display: block;
	font-weight: 800;
	font-size: 13px;
	color: var(--gj-text);
	margin-right: 24px;
}

.gj-v291-package-price {
	display: block;
	margin-top: 8px;
	color: var(--gj-blue-700);
	font-size: 15px;
	font-weight: 900;
}

.gj-v291-package-meta {
	display: block;
	margin-top: 3px;
	color: var(--gj-muted);
	font-size: 11px;
}

.gj-v291-note {
	margin: 14px 0 0;
	padding: 13px 15px;
	border-radius: 11px;
	background: #eef5ff;
	border: 1px solid #d7e6ff;
	color: #49617f;
	font-size: 12px;
	line-height: 1.55;
}

.gj-v291-primary-button,
body.gj-v291-register button[type=submit],
body.gj-v291-register input[type=submit] {
	width: 100%;
	min-height: 48px;
	border: 0 !important;
	border-radius: 11px !important;
	background: linear-gradient(135deg, #1761dc, #287df0) !important;
	color: #fff !important;
	font-weight: 800 !important;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(23,97,220,.22);
	transition: .18s ease;
}

.gj-v291-primary-button:hover,
body.gj-v291-register button[type=submit]:hover,
body.gj-v291-register input[type=submit]:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 28px rgba(23,97,220,.28);
}

.gj-v291-login-grid {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(380px, .8fr);
	gap: 44px;
	align-items: center;
	max-width: 1120px;
	margin: 24px auto 0;
}

.gj-v291-login-intro {
	padding: 25px;
}

.gj-v291-login-intro .gj-v291-badge {
	display: inline-flex;
	padding: 7px 11px;
	border-radius: 999px;
	background: #eaf3ff;
	color: var(--gj-blue-700);
	font-size: 11px;
	font-weight: 800;
}

.gj-v291-login-intro h2 {
	margin: 14px 0 10px;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.05;
	color: var(--gj-text);
}

.gj-v291-login-intro p {
	color: var(--gj-muted);
	font-size: 14px;
	line-height: 1.65;
	max-width: 500px;
}

.gj-v291-feature-list {
	display: grid;
	gap: 12px;
	margin-top: 24px;
}

.gj-v291-feature {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.gj-v291-feature-icon {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: #edf5ff;
	color: var(--gj-blue-700);
	font-weight: 900;
}

.gj-v291-feature strong {
	display: block;
	font-size: 13px;
	color: var(--gj-text);
}

.gj-v291-feature span {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	color: var(--gj-muted);
}

.gj-v291-login-card {
	background: rgba(255,255,255,.94);
	border: 1px solid var(--gj-border);
	border-radius: 20px;
	box-shadow: var(--gj-shadow);
	padding: 30px;
}

.gj-v291-login-card h2 {
	margin: 0 0 7px !important;
	font-size: 23px !important;
	color: var(--gj-text) !important;
}

.gj-v291-login-card .gj-v291-login-sub {
	margin: 0 0 20px;
	color: var(--gj-muted);
	font-size: 12px;
}

body.gj-v291-login .entry-content > h1,
body.gj-v291-login .entry-content > h2,
body.gj-v291-login .entry-content > p {
	display: none;
}

body.gj-v291-login form {
	margin: 0;
}

body.gj-v291-login form label {
	display: block;
	font-size: 12px;
	font-weight: 800;
	margin: 0 0 7px;
	color: var(--gj-text);
}

body.gj-v291-login button[type=submit],
body.gj-v291-login input[type=submit] {
	width: 100%;
	min-height: 48px;
	margin-top: 12px;
	border: 0;
	border-radius: 11px;
	background: linear-gradient(135deg, #1761dc, #287df0);
	color: #fff;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(23,97,220,.22);
}

.gj-v291-login-help {
	margin-top: 18px;
	padding-top: 17px;
	border-top: 1px solid var(--gj-border);
	text-align: center;
	color: var(--gj-muted);
	font-size: 12px;
}

.gj-v291-login-help a {
	display: inline-block;
	margin-top: 8px;
	padding: 9px 15px;
	border: 1px solid #a9c7f6;
	border-radius: 9px;
	color: var(--gj-blue-700);
	text-decoration: none;
	font-weight: 800;
}

.gj-v291-footer {
	max-width: 1240px;
	margin: 0 auto;
	padding: 18px 20px 28px;
	color: #73829a;
	font-size: 11px;
	text-align: center;
}

.gj-v291-toast {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
}

@media (max-width: 980px) {
	.gj-v291-shell { grid-template-columns: 1fr; }
	.gj-v291-side { position: static; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
	.gj-v291-side-item { margin: 0; }
	.gj-v291-side-note { display: none; }
	.gj-v291-package-grid { grid-template-columns: repeat(2, 1fr); }
	.gj-v291-login-grid { grid-template-columns: 1fr; gap: 15px; }
}

@media (max-width: 680px) {
	body.gj-v291-register .entry-content,
	body.gj-v291-login .entry-content { padding: 15px 10px 45px; }
	.gj-v291-public-header { padding: 22px 18px; border-radius: 15px; }
	.gj-v291-title-row { display: block; }
	.gj-v291-steps { grid-template-columns: repeat(5, 1fr); }
	.gj-v291-step-label { display: none; }
	.gj-v291-step { justify-content: center; }
	.gj-v291-step:after { left: 50%; right: -50%; }
	.gj-v291-step-dot { flex-basis: 30px; width: 30px; height: 30px; }
	.gj-v291-side { grid-template-columns: 1fr; }
	.gj-v291-side-item:not(.is-active) { display: none; }
	.gj-v291-card { padding: 17px; border-radius: 14px; }
	.gj-v291-field-grid { grid-template-columns: 1fr !important; }
	.gj-v291-span-12, .gj-v291-span-8, .gj-v291-span-6, .gj-v291-span-4 { grid-column: auto; }
	.gj-v291-package-grid { grid-template-columns: 1fr; }
	.gj-v291-login-card { padding: 21px; }
}


/* V2.9.1.2 — Confirmation & Member Area visual layer.
 * Presentation-only: no changes to order/payment/member logic.
 */
body.gj-v291-confirmation,
body.gj-v291-member-area {
	background:
		radial-gradient(circle at 85% 8%, rgba(55,125,255,.12), transparent 28rem),
		linear-gradient(180deg, #f7faff 0%, #f5f8fd 100%) !important;
	color: var(--gj-text);
}

body.gj-v291-confirmation *,
body.gj-v291-member-area * {
	box-sizing: border-box;
}

body.gj-v291-confirmation .entry-content,
body.gj-v291-member-area .entry-content {
	max-width: 1240px;
	margin: 0 auto;
	padding: 28px 20px 64px;
}

body.gj-v291-confirmation .entry-content > h1,
body.gj-v291-member-area .entry-content > h1 {
	display: none;
}

.gj-v291-confirm-card {
	max-width: 980px;
	margin: 0 auto;
}

.gj-v291-confirm-card form {
	background: #fff;
	border: 0;
	margin: 0;
	padding: 0;
}

body.gj-v291-confirmation form label {
	display: block;
	color: #263653;
	font-size: 12px;
	font-weight: 700;
	margin: 0 0 7px;
}

body.gj-v291-confirmation input:not([type=radio]):not([type=checkbox]):not([type=submit]),
body.gj-v291-confirmation select,
body.gj-v291-confirmation textarea {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--gj-border);
	border-radius: 10px;
	background: #fff;
	padding: 10px 12px;
	color: var(--gj-text);
	font-size: 13px;
}

body.gj-v291-confirmation input:focus,
body.gj-v291-confirmation select:focus,
body.gj-v291-confirmation textarea:focus {
	border-color: #4d8cf0;
	box-shadow: 0 0 0 4px rgba(30,107,234,.10);
	outline: none;
}

body.gj-v291-confirmation button[type=submit],
body.gj-v291-confirmation input[type=submit] {
	width: 100%;
	min-height: 48px;
	border: 0 !important;
	border-radius: 11px !important;
	background: linear-gradient(135deg, #1761dc, #287df0) !important;
	color: #fff !important;
	font-weight: 800 !important;
	box-shadow: 0 10px 24px rgba(23,97,220,.22);
	cursor: pointer;
}

body.gj-v291-member-area .gj-v291-portal-header {
	margin-bottom: 24px;
}

body.gj-v291-member-area .gj-v291-portal-block,
body.gj-v291-member-area .card,
body.gj-v291-member-area .dashboard-card,
body.gj-v291-member-area .member-card {
	background: #fff;
	border: 1px solid var(--gj-border);
	border-radius: 16px;
	box-shadow: 0 12px 36px rgba(17,38,78,.06);
}

body.gj-v291-member-area table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--gj-border);
	border-radius: 14px;
	box-shadow: 0 8px 25px rgba(17,38,78,.05);
}

body.gj-v291-member-area th {
	background: #f2f6fc;
	color: #263653;
	font-size: 12px;
	font-weight: 800;
	padding: 12px 14px;
	border-bottom: 1px solid var(--gj-border);
}

body.gj-v291-member-area td {
	color: #44536d;
	font-size: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid #edf2f7;
}

body.gj-v291-member-area a {
	color: var(--gj-blue-700);
}

body.gj-v291-member-area button,
body.gj-v291-member-area input[type=submit],
body.gj-v291-member-area .button {
	border-radius: 10px;
	font-weight: 800;
}

.gj-v291-portal-header .gj-v291-title-row h1 {
	font-size: clamp(28px, 4vw, 38px) !important;
}

@media (max-width: 680px) {
	body.gj-v291-confirmation .entry-content,
	body.gj-v291-member-area .entry-content {
		padding: 15px 10px 45px;
	}
	body.gj-v291-confirm-card {
		padding: 17px;
	}
}