/**
 * ZFDA Keycloak Login Page Styles
 * Zanzibar Food and Drug Agency — zfda.go.tz
 * Two-panel layout: deep navy + emerald green branding left, clean form right.
 */

/* ===== MAIN LAYOUT ===== */

.register-container {
	display: grid;
	grid-template-columns: 55% 45%;
	min-height: 100vh;
	width: 100%;
}

/* ===== LEFT PANEL – ZFDA BRANDING ===== */

.left-panel {
	position: relative;
	background: linear-gradient(
		170deg,
		hsl(214, 60%, 10%) 0%,
		hsl(214, 58%, 16%) 35%,
		hsl(200, 55%, 18%) 65%,
		hsl(152, 40%, 16%) 100%
	);
	padding: var(--space-3xl);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* ===== Pattern Overlay — subtle hexagonal / regulatory grid ===== */

.pattern-overlay {
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	opacity: 0.03;
	z-index: var(--z-pattern);
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='white' stroke-width='0.8'%3E%3Crect x='5' y='5' width='50' height='50' rx='4'/%3E%3Cline x1='30' y1='5' x2='30' y2='55'/%3E%3Cline x1='5' y1='30' x2='55' y2='30'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===== Floating Orbs – green/gold government palette ===== */

.orb {
	position: absolute;
	border-radius: var(--radius-full);
	pointer-events: none;
	z-index: var(--z-orbs);
}

.orb-1 {
	width: 320px;
	height: 320px;
	top: 5%;
	left: -12%;
	background: radial-gradient(circle at 30% 30%,
		hsla(152, 68%, 40%, 0.18) 0%,
		transparent 70%);
}

.orb-2 {
	width: 220px;
	height: 220px;
	bottom: 18%;
	right: -6%;
	background: radial-gradient(circle at 30% 30%,
		hsla(42, 88%, 52%, 0.14) 0%,
		transparent 70%);
}

.orb-3 {
	width: 160px;
	height: 160px;
	top: 55%;
	left: 38%;
	background: radial-gradient(circle at 30% 30%,
		hsla(4, 72%, 55%, 0.12) 0%,
		transparent 70%);
}

/* ===== Content Container ===== */

.left-content {
	position: relative;
	z-index: var(--z-content);
}

/* ===== Logo / Header Section ===== */

.logo-section {
	margin-bottom: var(--space-2xl);
}

.logo-wrapper {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

.brand-logo {
	height: 56px;
	width: auto;
	filter: brightness(0) invert(1) opacity(0.9);
}

/* Official badge replacing "launch badge" */
.launch-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-xs) var(--space-md);
	background: hsla(152, 68%, 40%, 0.15);
	border: 1px solid hsla(152, 68%, 40%, 0.3);
	border-radius: var(--radius-full);
	margin-bottom: var(--space-lg);
}

.launch-badge-icon {
	width: 14px;
	height: 14px;
	color: var(--green-light);
}

.launch-badge-text {
	font-size: 0.625rem;
	font-weight: var(--font-weight-semibold);
	color: var(--green-light);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
}

/* ===== Headline ===== */

.headline {
	font-size: var(--text-4xl);
	font-weight: var(--font-weight-bold);
	font-family: var(--font-display);
	color: var(--white);
	line-height: var(--leading-tight);
	margin-bottom: var(--space-lg);
}

.gradient-text {
	background: linear-gradient(135deg, var(--green-light), var(--gold));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}

.subtitle {
	font-size: var(--text-base);
	color: hsla(0, 0%, 100%, 0.55);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-2xl);
}

/* ===== Service Carousel (was journey-carousel) ===== */

.journey-carousel {
	margin: var(--space-2xl) 0;
}

.carousel-label {
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: hsla(0, 0%, 100%, 0.35);
	margin-bottom: var(--space-md);
}

.carousel-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-sm);
}

.journey-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-sm);
	background: hsla(0, 0%, 100%, 0.03);
	border: 1px solid transparent;
	border-radius: var(--radius-xl);
	transition: all var(--transition-base);
	opacity: 0.5;
	cursor: default;
}

.journey-item.active {
	opacity: 1;
	background: hsla(152, 68%, 40%, 0.15);
	border-color: hsla(152, 68%, 40%, 0.3);
	box-shadow: var(--shadow-glow);
}

.journey-icon {
	width: 20px;
	height: 20px;
	transition: color var(--transition-base);
}

.journey-item:not(.active) {
	color: hsla(0, 0%, 100%, 0.25);
}

.journey-label {
	font-size: 0.5rem;
	font-weight: var(--font-weight-medium);
	color: hsla(0, 0%, 100%, 0.25);
	text-align: center;
	line-height: var(--leading-tight);
	transition: color var(--transition-base);
}

.journey-item.active .journey-label {
	color: hsla(0, 0%, 100%, 0.85);
}

.active-indicator {
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 16px;
	height: 2px;
	border-radius: var(--radius-full);
	background: var(--green-light);
}

/* ===== Stats Grid ===== */

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
	margin: var(--space-2xl) 0;
}

.stat-card {
	background: hsla(0, 0%, 100%, 0.06);
	backdrop-filter: blur(10px);
	padding: var(--space-lg);
	border-radius: var(--radius-xl);
	border: 1px solid hsla(0, 0%, 100%, 0.07);
	text-align: center;
}

.stat-value {
	font-size: var(--text-2xl);
	font-weight: var(--font-weight-bold);
	font-family: var(--font-display);
	margin-bottom: var(--space-xs);
}

.stat-label {
	font-size: 0.5625rem;
	color: hsla(0, 0%, 100%, 0.45);
	line-height: var(--leading-snug);
}

/* ===== Trust / Partner Indicators ===== */

.trust-section {
	padding-top: var(--space-xl);
	border-top: 1px solid hsla(0, 0%, 100%, 0.12);
}

.trust-indicators {
	display: flex;
	gap: var(--space-lg);
	flex-wrap: wrap;
}

.trust-badge {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-xs);
	color: hsla(0, 0%, 100%, 0.35);
}

.trust-icon {
	width: 14px;
	height: 14px;
	color: hsla(152, 68%, 50%, 0.7);
}

/* ===== RIGHT PANEL – LOGIN FORM ===== */

.right-panel {
	position: relative;
	background: var(--white);
	padding: var(--space-3xl);
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow-y: auto;
}

/* ZFDA flag-stripe accent: green | white | red (Zanzibar flag) */
.gradient-accent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg,
		var(--green)  0%,
		var(--green)  33%,
		var(--white)  33%,
		var(--white)  66%,
		var(--red)    66%,
		var(--red)    100%
	);
}

/* ===== Form Wrapper ===== */

.form-wrapper {
	max-width: 440px;
	margin: 0 auto;
	width: 100%;
}

/* ===== Form Header ===== */

.form-header {
	text-align: center;
	margin-bottom: var(--space-2xl);
}

.form-header-flex {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
}

/* ZFDA shield icon wrapper */
.rocket-icon-wrapper {
	width: 68px;
	height: 68px;
	background: linear-gradient(135deg, var(--navy), var(--navy-mid));
	border: 3px solid var(--green);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 6px hsla(152, 68%, 32%, 0.12);
}

.rocket-icon {
	width: 30px;
	height: 30px;
	color: var(--green-light);
}

.form-header-text {
	text-align: left;
}
.rocket-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.form-title {
	font-size: var(--text-2xl);
	font-weight: var(--font-weight-bold);
	font-family: var(--font-display);
	color: var(--gray-900);
	margin-bottom: var(--space-xs);
}

.form-subtitle {
	font-size: var(--text-sm);
	color: var(--gray-600);
}

/* ===== Alert Messages ===== */

.alert {
	padding: var(--space-md);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-lg);
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
}

.alert-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
}

.alert-success {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #166534;
}

.alert-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.alert-text {
	flex: 1;
	font-size: var(--text-sm);
}

/* ===== Form Groups ===== */

.form-group {
	margin-bottom: var(--space-lg);
}

.form-label {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	color: var(--gray-700);
	margin-bottom: var(--space-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.required-asterisk {
	color: var(--error);
	margin-left: var(--space-xs);
}

/* ===== Form Inputs ===== */

.form-input {
	width: 100%;
	padding: var(--space-md) var(--space-lg);
	font-size: var(--text-base);
	font-family: var(--font-sans);
	color: var(--gray-900);
	background: var(--gray-50);
	border: 2px solid var(--gray-200);
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
	outline: none;
}

.form-input:hover {
	border-color: var(--gray-300);
}

.form-input:focus {
	background: var(--white);
	border-color: var(--green);
	box-shadow: 0 0 0 3px hsla(152, 68%, 32%, 0.12);
}

.form-input.error,
.form-input[aria-invalid="true"] {
	border-color: var(--error);
	background: #fef2f2;
}

.form-input::placeholder {
	color: var(--gray-400);
}

/* ===== Password Toggle ===== */

.input-group {
	position: relative;
	display: flex;
	align-items: center;
}

.input-group .form-input {
	padding-right: 3rem;
}

.password-toggle {
	position: absolute;
	right: var(--space-md);
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--gray-500);
	padding: var(--space-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--transition-fast);
}

.password-toggle:hover  { color: var(--gray-700); }

.password-toggle:focus {
	outline: 2px solid var(--green);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.password-toggle-icon {
	width: 20px;
	height: 20px;
}

/* ===== Error Messages ===== */

.error-message {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-sm);
	font-size: var(--text-sm);
	color: var(--error);
}

.error-icon {
	width: 16px;
	height: 16px;
}

/* ===== Submit Button ===== */

.btn-primary {
	width: 100%;
	padding: var(--space-lg);
	font-size: var(--text-base);
	font-weight: var(--font-weight-semibold);
	font-family: var(--font-sans);
	color: var(--white);
	background: linear-gradient(135deg, var(--navy-mid), var(--green));
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all var(--transition-base);
	box-shadow: var(--shadow-md);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
}

.btn-primary:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary:focus {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

.btn-icon {
	width: 18px;
	height: 18px;
}

/* ===== Social Divider ===== */

.social-divider {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin: var(--space-xl) 0;
	color: var(--gray-600);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.social-divider::before,
.social-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--gray-200);
}

/* ===== Social Auth Buttons ===== */

.social-buttons {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
	margin-bottom: var(--space-xl);
}

.btn-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: var(--space-md);
	background: var(--white);
	border: 2px solid var(--gray-200);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all var(--transition-fast);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	font-family: var(--font-sans);
	color: var(--gray-900);
	text-decoration: none;
}

.btn-social:hover {
	border-color: var(--navy);
	background: var(--gray-50);
}

.btn-social:focus {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

.social-icon {
	width: 20px;
	height: 20px;
}

/* ===== Form Trust Indicators ===== */

.form-trust-indicators {
	display: flex;
	justify-content: center;
	gap: var(--space-lg);
	margin: var(--space-lg) 0;
	flex-wrap: wrap;
}

.form-trust-item {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--text-xs);
	color: var(--gray-600);
}

.check-icon {
	width: 16px;
	height: 16px;
	color: var(--success);
}

/* ===== Login / Register Link ===== */

.login-link {
	text-align: center;
	margin-top: var(--space-xl);
	font-size: var(--text-sm);
	color: var(--gray-700);
}

.login-link a {
	color: var(--green);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	transition: all var(--transition-fast);
}

.login-link a:hover { text-decoration: underline; }

.login-link a:focus {
	outline: 2px solid var(--green);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* ===== Terms Acceptance ===== */

.terms-wrapper { margin: var(--space-lg) 0; }

.terms-text {
	max-height: 200px;
	overflow-y: auto;
	padding: var(--space-md);
	background: var(--gray-50);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-md);
	font-size: var(--text-sm);
	color: var(--gray-700);
}

.terms-checkbox-wrapper {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
}

.terms-checkbox { margin-top: 0.25rem; cursor: pointer; }
.terms-label    { font-size: var(--text-sm); color: var(--gray-700); cursor: pointer; }

/* ===== reCAPTCHA ===== */

.recaptcha-wrapper {
	display: flex;
	justify-content: center;
	margin: var(--space-lg) 0;
}

/* ===== KEYCLOAK PATTERNFLY OVERRIDES ===== */

.pf-c-form__group,
.form-group { margin-bottom: var(--space-lg); }

.pf-c-form__label,
.pf-c-form__label-text,
.control-label,
label.pf-c-form__label {
	display: block;
	font-size: var(--text-xs) !important;
	font-weight: var(--font-weight-medium) !important;
	color: var(--gray-700) !important;
	margin-bottom: var(--space-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.pf-c-form-control,
input.pf-c-form-control,
input[type="text"].pf-c-form-control,
input[type="email"].pf-c-form-control,
textarea.pf-c-form-control,
select.pf-c-form-control {
	width: 100% !important;
	padding: var(--space-md) var(--space-lg) !important;
	font-size: var(--text-base) !important;
	font-family: var(--font-sans) !important;
	color: var(--gray-900) !important;
	background: var(--gray-50) !important;
	border: 2px solid var(--gray-200) !important;
	border-radius: var(--radius-md) !important;
	transition: all var(--transition-fast) !important;
	outline: none !important;
	box-shadow: none !important;
}

.pf-c-form-control:hover { border-color: var(--gray-300) !important; }

.pf-c-form-control:focus {
	background: var(--white) !important;
	border-color: var(--green) !important;
	box-shadow: 0 0 0 3px hsla(152, 68%, 32%, 0.12) !important;
}

.pf-c-form-control::placeholder { color: var(--gray-400) !important; }

.pf-c-form-control[aria-invalid="true"] {
	border-color: var(--error) !important;
	background: #fef2f2 !important;
}

.pf-c-form__helper-text.pf-m-error,
.pf-m-error.pf-c-form__helper-text,
span[id^="input-error-"] {
	display: flex !important;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-sm);
	font-size: var(--text-sm) !important;
	color: var(--error) !important;
	font-weight: var(--font-weight-normal) !important;
}

.pf-c-form__helper-text.pf-m-error::before,
.pf-m-error.pf-c-form__helper-text::before {
	content: "⚠";
	font-size: 14px;
	margin-right: 4px;
}

select.pf-c-form-control {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-md) center;
	padding-right: 2.5rem !important;
}

textarea.pf-c-form-control { min-height: 100px; resize: vertical; }

.pf-c-form__label-required,
span.required { color: var(--error); margin-left: var(--space-xs); }

.pf-c-radio, .pf-c-check {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.pf-c-radio__input, .pf-c-check__input {
	cursor: pointer;
	width: 18px;
	height: 18px;
}

.pf-c-radio__label, .pf-c-check__label {
	font-size: var(--text-sm) !important;
	color: var(--gray-700) !important;
	cursor: pointer;
	text-transform: none !important;
}

.pf-c-form-control:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background: var(--gray-100) !important;
}

#kc-register-form .pf-c-form__group,
#kc-register-form .form-group,
#kc-register-form > div { margin-bottom: var(--space-lg); }

#kc-register-form .pf-c-button.pf-m-primary,
#kc-register-form button[type="submit"].pf-c-button {
	width: 100%;
	padding: var(--space-lg);
	font-size: var(--text-base);
	font-weight: var(--font-weight-semibold);
	color: var(--white);
	background: linear-gradient(135deg, var(--navy-mid), var(--green)) !important;
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all var(--transition-base);
	box-shadow: var(--shadow-md);
}

/* ===== LOGIN FORM OVERRIDES ===== */

#kc-form-login .form-group,
#kc-form-login > div { margin-bottom: var(--space-lg); }

#kc-form-login label {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	color: var(--gray-700);
	margin-bottom: var(--space-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

#kc-form-login input[type="text"],
#kc-form-login input[type="email"],
#kc-form-login input[type="password"] {
	width: 100%;
	padding: var(--space-md) var(--space-lg);
	font-size: var(--text-base);
	font-family: var(--font-sans);
	color: var(--gray-900);
	background: var(--gray-50);
	border: 2px solid var(--gray-200);
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
	outline: none;
}

#kc-form-login input:focus {
	background: var(--white);
	border-color: var(--green);
	box-shadow: 0 0 0 3px hsla(152, 68%, 32%, 0.12);
}

#kc-form-login button[type="submit"],
#kc-form-login input[type="submit"] {
	width: 100%;
	padding: var(--space-lg);
	font-size: var(--text-base);
	font-weight: var(--font-weight-semibold);
	color: var(--white);
	background: linear-gradient(135deg, var(--navy-mid), var(--green));
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all var(--transition-base);
	box-shadow: var(--shadow-md);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1024px) {
	.register-container {
		grid-template-columns: 1fr;
	}
	.left-panel {
		padding: var(--space-2xl) var(--space-xl);
		min-height: auto;
	}
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.carousel-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (max-width: 640px) {
	.left-panel   { padding: var(--space-xl) var(--space-lg); }
	.right-panel  { padding: var(--space-xl) var(--space-lg); }
	.headline     { font-size: var(--text-3xl); }
	.stats-grid   { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
	.carousel-grid { grid-template-columns: repeat(5, 1fr); }
	.trust-indicators { flex-direction: column; gap: var(--space-sm); }
}