/* ==========================================================================
   MEMBERSHIP REGISTRATION THEME
   Matches existing Bootstrap/PrimeNG styling from Registration Portal
   ========================================================================== */

:root {
	/* Primary Colors */
	--primary-color: #34a834;
	--primary-hover: #2d9a2d;
	--primary-light: #e8f5e9;

	/* Navbar */
	--navbar-bg: #343a40;
	--navbar-text: #ffffff;
	--navbar-brand: #ffffff;

	/* Surface & Background */
	--surface-ground: #f8f9fa;
	--surface-card: #ffffff;
	--surface-overlay: #ffffff;
	--surface-border: #dee2e6;

	/* Text Colors */
	--text-color: #212529;
	--text-color-secondary: #6c757d;
	--text-muted: #6c757d;

	/* Link Colors */
	--link-color: #533f03;
	--link-hover: #533f03;

	/* Status Colors */
	--success-color: #28a745;
	--warning-color: #ffc107;
	--danger-color: #dc3545;
	--info-color: #17a2b8;

	/* Card Styling */
	--card-padding: 2rem;
	--card-border-radius: 10px;
	--card-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);

	/* Info Block */
	--info-block-bg: #f8f9fa;
	--info-block-border: #007bff;

	/* Table */
	--table-header-bg: #f8f9fa;
	--table-border: #dee2e6;
	--table-row-hover: #f5f5f5;
	--table-stripe-bg: #f9f9f9;

	/* Buttons */
	--btn-primary-bg: var(--primary-color);
	--btn-primary-hover: var(--primary-hover);
	--btn-secondary-bg: #6c757d;
	--btn-secondary-hover: #5a6268;
	--btn-danger-bg: #dc3545;
	--btn-danger-hover: #c82333;

	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;

	/* Typography */
	--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-bold: 600;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.5rem;
	--font-size-h1: 2rem;

	/* Border Radius */
	--border-radius-sm: 0.25rem;
	--border-radius-md: 0.375rem;
	--border-radius-lg: 0.5rem;
	--border-radius-xl: 10px;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-normal: 200ms ease;
	--transition-slow: 300ms ease;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

* {
	box-sizing: border-box;
}

body {
	font-family: var(--font-family) !important;
	font-weight: var(--font-weight-light) !important;
	color: var(--text-color) !important;
	background-color: var(--surface-ground) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.5 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: var(--font-weight-light) !important;
	margin-bottom: var(--spacing-md) !important;
	color: var(--text-color) !important;
}

h1 {
	font-size: var(--font-size-h1) !important;
}

h2 {
	font-size: var(--font-size-xl) !important;
}

a {
	color: var(--link-color) !important;
	font-weight: var(--font-weight-bold) !important;
	text-decoration: none !important;
}

a:hover {
	color: var(--link-hover) !important;
	cursor: pointer !important;
}

/* ==========================================================================
   NAVBAR (Layer 1)
   ========================================================================== */

.navbar {
	background-color: var(--navbar-bg) !important;
	padding: var(--spacing-sm) var(--spacing-md) !important;
}

.navbar-brand {
	display: flex !important;
	align-items: center !important;
	gap: var(--spacing-sm) !important;
	color: var(--navbar-brand) !important;
	font-weight: var(--font-weight-normal) !important;
	text-decoration: none !important;
}

.navbar-brand:hover {
	color: var(--navbar-brand) !important;
}

.navbar-title {
	font-size: var(--font-size-lg) !important;
}

.navbar-version {
	font-size: var(--font-size-sm) !important;
	opacity: 0.7 !important;
}

.navbar-toggler {
	border: none !important;
	background: transparent !important;
	color: var(--navbar-text) !important;
	padding: var(--spacing-sm) !important;
}

/* ==========================================================================
   CARD STYLES
   ========================================================================== */

.card,
.jh-card,
.p-card {
	background: var(--surface-card) !important;
	padding: var(--card-padding) !important;
	border-radius: var(--card-border-radius) !important;
	margin-bottom: var(--spacing-md) !important;
	border: none !important;
	box-shadow: var(--card-shadow) !important;
}

.jh-card {
	padding: 1.5% !important;
	margin-top: 20px !important;
}

/* ==========================================================================
   MEMBERSHIP DETAILS PANEL (Layer 2)
   ========================================================================== */

.membership-details {
	background: var(--surface-card) !important;
	border-radius: var(--card-border-radius) !important;
	padding: var(--spacing-lg) !important;
	margin-bottom: var(--spacing-lg) !important;
	box-shadow: var(--card-shadow) !important;
}

.membership-details h2 {
	margin-bottom: var(--spacing-md) !important;
	font-size: var(--font-size-xl) !important;
}

.membership-details-row {
	display: flex !important;
	gap: var(--spacing-xl) !important;
	flex-wrap: wrap !important;
}

.membership-details-item {
	display: flex !important;
	gap: var(--spacing-sm) !important;
}

.membership-details-item strong {
	font-weight: var(--font-weight-bold) !important;
}

/* ==========================================================================
   INFO BLOCK (Layer 3)
   ========================================================================== */

.info-block {
	background-color: var(--info-block-bg) !important;
	border-left: 4px solid var(--info-block-border) !important;
	border-radius: var(--border-radius-md) !important;
	padding: var(--spacing-md) !important;
	margin-bottom: var(--spacing-lg) !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
}

.info-block-content {
	flex: 1 !important;
}

.info-block-content strong {
	font-weight: var(--font-weight-bold) !important;
}

.info-block-close {
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	padding: var(--spacing-xs) !important;
	color: var(--text-color-secondary) !important;
	border-radius: 50% !important;
	width: 32px !important;
	height: 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background-color var(--transition-fast) !important;
}

.info-block-close:hover {
	background-color: rgba(0, 0, 0, 0.05) !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn,
.p-button {
	display: inline-flex !important;
	align-items: center !important;
	gap: var(--spacing-sm) !important;
	padding: var(--spacing-sm) var(--spacing-md) !important;
	border-radius: var(--border-radius-md) !important;
	font-weight: var(--font-weight-normal) !important;
	cursor: pointer !important;
	transition: all var(--transition-fast) !important;
	border: 1px solid transparent !important;
	font-size: var(--font-size-base) !important;
}

.btn-primary,
.p-button-primary {
	background-color: var(--btn-primary-bg) !important;
	color: #ffffff !important;
	border-color: var(--btn-primary-bg) !important;
}

.btn-primary:hover,
.p-button-primary:hover {
	background-color: var(--btn-primary-hover) !important;
	border-color: var(--btn-primary-hover) !important;
}

.btn-success,
.p-button-success {
	background-color: var(--success-color) !important;
	color: #ffffff !important;
	border-color: var(--success-color) !important;
}

.btn-success:hover,
.p-button-success:hover {
	background-color: #218838 !important;
	border-color: #1e7e34 !important;
}

.btn-secondary,
.p-button-secondary {
	background-color: var(--btn-secondary-bg) !important;
	color: #ffffff !important;
	border-color: var(--btn-secondary-bg) !important;
}

.btn-secondary:hover,
.p-button-secondary:hover {
	background-color: var(--btn-secondary-hover) !important;
	border-color: var(--btn-secondary-hover) !important;
}

.btn-danger,
.p-button-danger {
	background-color: var(--btn-danger-bg) !important;
	color: #ffffff !important;
	border-color: var(--btn-danger-bg) !important;
}

.btn-text,
.p-button-text {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--text-color) !important;
}

.btn-text:hover,
.p-button-text:hover {
	background-color: rgba(0, 0, 0, 0.04) !important;
}

.btn:disabled,
.p-button:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

/* ==========================================================================
   TABLE
   ========================================================================== */

.data-table {
	width: 100% !important;
	border-collapse: collapse !important;
	background: var(--surface-card) !important;
	border-radius: var(--border-radius-lg) !important;
	overflow: hidden !important;
}

.data-table thead {
	background-color: var(--table-header-bg) !important;
}

.data-table th {
	padding: var(--spacing-md) !important;
	text-align: left !important;
	font-weight: var(--font-weight-bold) !important;
	color: var(--text-color) !important;
	border-bottom: 2px solid var(--table-border) !important;
}

.data-table td {
	padding: var(--spacing-md) !important;
	border-bottom: 1px solid var(--table-border) !important;
	vertical-align: middle !important;
}

.data-table tbody tr:hover {
	background-color: var(--table-row-hover) !important;
}

.data-table tbody tr:nth-child(even) {
	background-color: var(--table-stripe-bg) !important;
}

.data-table tbody tr:nth-child(even):hover {
	background-color: var(--table-row-hover) !important;
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
	display: inline-flex !important;
	align-items: center !important;
	padding: var(--spacing-xs) var(--spacing-sm) !important;
	border-radius: var(--border-radius-sm) !important;
	font-size: var(--font-size-sm) !important;
	font-weight: var(--font-weight-normal) !important;
}

.badge-success {
	background-color: var(--success-color) !important;
	color: #ffffff !important;
}

.badge-warning {
	background-color: var(--warning-color) !important;
	color: #212529 !important;
}

.badge-info {
	background-color: var(--info-color) !important;
	color: #ffffff !important;
}

.badge-danger {
	background-color: var(--danger-color) !important;
	color: #ffffff !important;
}

/* ==========================================================================
   CHECKBOX
   ========================================================================== */

.checkbox-wrapper {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.checkbox {
	width: 18px !important;
	height: 18px !important;
	cursor: pointer !important;
	accent-color: var(--primary-color) !important;
}

.checkbox:disabled {
	cursor: not-allowed !important;
	opacity: 0.5 !important;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.container-fluid {
	width: 100% !important;
	padding-right: 15px !important;
	padding-left: 15px !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

.shadow-3 {
	box-shadow:
		0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.d-flex {
	display: flex !important;
}

.gap-2 {
	gap: var(--spacing-sm) !important;
}

.gap-5 {
	gap: var(--spacing-xl) !important;
}

.mb-3 {
	margin-bottom: var(--spacing-md) !important;
}

.mb-4 {
	margin-bottom: var(--spacing-lg) !important;
}

.mt-4 {
	margin-top: var(--spacing-lg) !important;
}

.my-4 {
	margin-top: var(--spacing-lg) !important;
	margin-bottom: var(--spacing-lg) !important;
}

.p-3 {
	padding: var(--spacing-md) !important;
}

.text-center {
	text-align: center !important;
}

.text-muted {
	color: var(--text-muted) !important;
}

.justify-content-between {
	justify-content: space-between !important;
}

.align-items-start {
	align-items: flex-start !important;
}

.align-items-center {
	align-items: center !important;
}

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

@media screen and (max-width: 960px) {
	.data-table thead {
		display: none !important;
	}

	.data-table tbody tr {
		display: block !important;
		margin-bottom: var(--spacing-md) !important;
		border: 1px solid var(--table-border) !important;
		border-radius: var(--border-radius-md) !important;
	}

	.data-table td {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: var(--spacing-sm) var(--spacing-md) !important;
		border-bottom: 1px solid var(--table-border) !important;
	}

	.data-table td:last-child {
		border-bottom: none !important;
	}

	.data-table td::before {
		content: attr(data-label) !important;
		font-weight: var(--font-weight-bold) !important;
		margin-right: var(--spacing-sm) !important;
	}

	.membership-details-row {
		flex-direction: column !important;
		gap: var(--spacing-sm) !important;
	}
}

@media screen and (max-width: 768px) {
	.card,
	.jh-card {
		padding: var(--spacing-md) !important;
	}

	h1 {
		font-size: var(--font-size-xl) !important;
	}
}