/* 
 * Volunteer Site Theme
 * Primary: #fc2a61 (Pink/Red)
 * Secondary: #5545ce (Purple/Blue)
 */

/* Reset & Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
height: 100%;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
background: #fff;
display: flex;
flex-direction: column;
}

/* Container */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}

/* Header */
header {
background: #fc2a61;
color: white;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}

.site-title {
font-size: 1.5rem;
font-weight: bold;
color: white;
text-decoration: none;
transition: color 0.3s;
}

.site-title:hover {
	color: #5545ce;
}

/* Mobile menu toggle */
.mobile-menu-toggle {
	display: none;
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem 1rem;
	color: white;
	font-size: 1rem;
	border-radius: 4px;
	transition: all 0.3s;
}

.mobile-menu-toggle:hover {
	background: #5545ce;
}

/* Navigation */
nav ul {
	list-style: none;
	display: flex;
	gap: 0.5rem;
}

nav li {
	position: relative;
}

.has-dropdown {
	position: relative;
}

nav a {
	color: white;
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	transition: all 0.3s;
	display: block;
}

nav a:hover {
	background: #5545ce;
	color: #fff;
	transform: translateY(-1px);
}

/* Dropdown styling */
.dropdown-arrow {
	font-size: 0.8em;
	margin-left: 0.25rem;
}

.dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: white;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	border-radius: 4px;
	min-width: 200px;
	z-index: 1000;
	margin-top: 0;
	padding: 0.5rem 0;
}

.dropdown li {
	width: 100%;
}

.dropdown a {
	color: #333;
	padding: 0.75rem 1rem;
	border-radius: 0;
	white-space: nowrap;
}

.dropdown a:hover {
	background: #f0f0f0;
	color: #fc2a61;
	transform: none;
}

.dropdown a.active {
	background: #f8f9fa;
	color: #5545ce;
	font-weight: 500;
}

/* Show dropdown on hover (desktop) */
.has-dropdown:hover > .dropdown {
	display: block;
}

/* Mobile navigation */
@media (max-width: 768px) {
	.mobile-menu-toggle {
		display: flex;
	}
	
	header .container {
		flex-wrap: wrap;
	}
	
	nav {
		width: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
		order: 3;
	}
	
	nav.mobile-open {
		max-height: 1000px;
		padding-top: 1rem;
	}
	
	nav ul {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}
	
	nav li {
		width: 100%;
	}
	
	nav a {
		border-radius: 0;
		padding: 0.75rem 1rem;
		text-align: left;
		width: 100%;
	}
	
	.has-dropdown {
		display: block;
	}
	
	.dropdown {
		position: static;
		box-shadow: none;
		background: rgba(255,255,255,0.1);
		margin: 0;
		padding: 0;
		border-radius: 0;
		display: block !important;
	}
	
	.dropdown a {
		color: rgba(255,255,255,0.9);
		padding-left: 2rem;
		font-size: 0.9rem;
	}
	
	.dropdown a:hover {
		background: rgba(255,255,255,0.15);
		color: white;
	}
}

/* Main Content */
main {
flex: 1;
padding: 2rem 0;
}

/* Spacer utilities for CKEditor content */
.spacer-small {
margin-bottom: 2rem;
}

.spacer-medium {
margin-bottom: 4rem;
}

.spacer-large {
margin-bottom: 6rem;
}

.spacer-xlarge {
margin-bottom: 8rem;
}

h1 {
color: #fc2a61;
margin-bottom: 1rem;
font-size: 2rem;
}

h2 {
color: #fc2a61;
margin-top: 2rem;
margin-bottom: 1rem;
}

h3 {
color: #5545ce;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}

p {
margin-bottom: 1rem;
}

/* List Styles */
ul:not(nav ul):not(.dropdown):not(.child-pages):not(.uk-nav):not(.sitemap-level-0), 
ol:not(nav ol) {
margin-bottom: 1rem;
padding-left: 2rem;
}

ul:not(nav ul):not(.dropdown):not(.child-pages):not(.uk-nav):not(.sitemap-level-0) ul, 
ul:not(nav ul):not(.dropdown):not(.child-pages):not(.uk-nav):not(.sitemap-level-0) ol, 
ol:not(nav ol) ul, 
ol:not(nav ol) ol {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}

ul:not(nav ul):not(.dropdown):not(.child-pages):not(.uk-nav):not(.sitemap-level-0) li, 
ol:not(nav ol) li {
margin-bottom: 0.25rem;
}

ul:not(nav ul):not(.dropdown):not(.child-pages):not(.uk-nav):not(.sitemap-level-0) {
list-style-type: disc;
}

ul:not(nav ul):not(.dropdown):not(.child-pages):not(.uk-nav):not(.sitemap-level-0) ul {
list-style-type: circle;
}

ul:not(nav ul):not(.dropdown):not(.child-pages):not(.uk-nav):not(.sitemap-level-0) ul ul {
list-style-type: square;
}

ol:not(nav ol) {
list-style-type: decimal;
}

ol:not(nav ol) ol {
list-style-type: lower-alpha;
}

ol:not(nav ol) ol ol {
list-style-type: lower-roman;
}

/* Editor content areas (CKEditor, text fields, etc.) */
.FieldtypeTextarea ul,
.FieldtypeTextarea ol,
.cke_editable ul,
.cke_editable ol,
.InputfieldCKEditorInline ul,
.InputfieldCKEditorInline ol,
textarea + div ul,
textarea + div ol {
margin-bottom: 1rem;
padding-left: 2rem;
}

.FieldtypeTextarea ul li,
.FieldtypeTextarea ol li,
.cke_editable ul li,
.cke_editable ol li,
.InputfieldCKEditorInline ul li,
.InputfieldCKEditorInline ol li,
textarea + div ul li,
textarea + div ol li {
margin-bottom: 0.25rem;
}

a {
color: #5545ce;
transition: color 0.3s;
}

a:hover {
color: #fc2a61;
}

/* Footer */
footer {
background: #5545ce;
color: white;
padding: 2rem 0;
margin-top: auto;
}

footer .container {
text-align: center;
}

footer .footer-links {
display: flex;
justify-content: center;
gap: 3rem;
margin-bottom: 1.5rem;
font-size: 1rem;
}

footer .footer-links a {
color: white;
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
padding: 0.25rem 0.5rem;
}

footer .footer-links a:hover {
color: #fc2a61;
transform: translateY(-2px);
}

footer .copyright {
font-size: 0.75rem;
opacity: 0.7;
margin: 0.5rem 0 0 0;
}

footer a {
color: #fc2a61;
}

footer a:hover {
color: white;
}

/* Child Pages */
.child-pages {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
list-style: none;
}

.child-pages li {
border: 2px solid #f0f0f0;
border-radius: 8px;
transition: all 0.3s;
}

.child-pages li:hover {
border-color: #fc2a61;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(252, 42, 97, 0.1);
}

.child-pages a {
display: block;
padding: 1.5rem;
text-decoration: none;
color: #333;
}

.child-pages a strong {
display: block;
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: #5545ce;
}

.child-pages .child-summary {
display: block;
font-size: 0.85rem;
color: #666;
line-height: 1.4;
font-weight: normal;
}

/* Role Details (Registration/Profile Forms) */
.role-checkbox-label {
display: flex;
align-items: baseline;
margin-bottom: 0.5rem;
font-weight: normal;
gap: 0.5rem;
flex-wrap: wrap;
}

.role-details {
display: inline;
width: 100%;
}

.role-details summary {
cursor: pointer;
color: #5545ce;
font-size: 0.85em;
display: inline;
}

.role-details-content {
margin-top: 0.5rem;
padding: 0.75rem;
background: #f5f5f5;
border-radius: 4px;
color: #666;
font-size: 0.9em;
width: 100%;
display: block;
}

/* Responsive */
@media (max-width: 768px) {
header .container {
flex-direction: column;
text-align: center;
}

nav ul {
flex-direction: column;
width: 100%;
}

nav a {
display: block;
}

.child-pages {
grid-template-columns: 1fr;
}
}

/* ============================================
   VOLUNTEER FORMS & PROFILES
   ============================================ */

/* Intro Content on Directory */
.intro-content {
	margin: 1.5rem 0 2rem;
	padding: 1.5rem;
	background: #f8f9fa;
	border-left: 4px solid var(--primary-color);
	border-radius: 4px;
}

.intro-content h3,
.intro-content h4 {
	color: var(--primary-color);
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

.intro-content a {
	color: var(--primary-color);
	text-decoration: underline;
}

.intro-content a:hover {
	color: var(--secondary-color);
}

/* Form Styles */
.volunteer-form {
max-width: 700px;
margin: 2rem auto;
}

.form-group {
margin-bottom: 1.5rem;
}

.form-group label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: #333;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="file"],
.form-group input[type="datetime-local"],
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 1rem;
font-family: inherit;
transition: border-color 0.3s;
}

.form-group input[type="number"] {
width: 120px;
padding: 0.5rem;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 1.1rem;
font-family: inherit;
transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #fc2a61;
}

.form-group small {
display: block;
margin-top: 0.25rem;
color: #666;
font-size: 0.875rem;
}

.form-group.checkbox label {
display: flex;
align-items: start;
gap: 0.75rem;
cursor: pointer;
}

.form-group.checkbox input[type="checkbox"] {
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
margin-top: 0.25rem;
cursor: pointer;
flex-shrink: 0;
}

.radio-option {
margin: 0.5rem 0;
}

.radio-option label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-weight: normal;
}

.radio-option input[type="radio"] {
width: 18px;
height: 18px;
min-width: 18px;
cursor: pointer;
flex-shrink: 0;
}

.volunteer-form h3 {
margin-top: 2rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #fc2a61;
}

/* Alert Messages */
.alert {
padding: 1rem;
border-radius: 6px;
margin-bottom: 1.5rem;
}

.alert-success {
background: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
}

.alert-error {
background: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
}

/* Volunteer Directory Grid */
.volunteer-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin: 2rem 0;
}

.volunteer-card {
background: white;
border: 2px solid #f0f0f0;
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s;
text-align: center;
}

.volunteer-card:hover {
border-color: #fc2a61;
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(252, 42, 97, 0.1);
}

.volunteer-photo {
margin-bottom: 1rem;
}

.volunteer-photo img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fc2a61;
}

.placeholder-avatar {
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(135deg, #fc2a61, #5545ce);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
font-weight: bold;
margin: 0 auto;
}

.volunteer-info h3 {
color: #fc2a61;
margin: 0.5rem 0;
}

.pronouns {
color: #5545ce;
font-size: 0.875rem;
font-style: italic;
margin: 0.25rem 0;
}

.bio {
margin: 1rem 0;
color: #666;
line-height: 1.6;
min-height: 3rem;
}

/* Bio expandable with line-clamp */
.bio-expandable {
	position: relative;
}

.bio-toggle {
	display: none;
}

.bio-content {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	line-height: 1.5;
	transition: all 0.3s ease;
}

.bio-toggle:checked ~ .bio-content {
	-webkit-line-clamp: unset;
}

.bio-toggle-label {
	color: #5545ce;
	font-weight: 500;
	font-size: 0.875rem;
	cursor: pointer;
	display: inline-block;
	margin-top: 0.25rem;
}

.bio-toggle-label:hover {
	text-decoration: underline;
}

.bio-toggle-label .read-less {
	display: none;
}

.bio-toggle:checked ~ .bio-toggle-label .read-more {
	display: none;
}

.bio-toggle:checked ~ .bio-toggle-label .read-less {
	display: inline;
}

.bio-details {
cursor: pointer;
}

.bio-details summary {
list-style: none;
}

.bio-details summary::-webkit-details-marker {
display: none;
}

.bio-details .read-more {
color: #5545ce;
font-weight: 500;
font-size: 0.875rem;
}

.bio-details[open] .read-more,
.bio-details[open] .ellipsis {
display: none;
}

.bio-full {
margin-top: 0.5rem;
}

.volunteer-roles {
min-height: 4rem;
margin: 1rem 0;
}

.volunteer-events {
min-height: 3rem;
}

.social-links {
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1rem;
min-height: 3rem;
}

.social-links a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.5rem 1rem;
background: #f8f9fa;
border-radius: 6px;
font-size: 0.875rem;
text-decoration: none;
color: #5545ce;
transition: all 0.3s;
white-space: nowrap;
}

.social-links a:hover {
background: #5545ce;
color: white;
}

.register-cta {
text-align: center;
margin: 3rem 0;
}

.current-photo {
margin-bottom: 1rem;
}

.current-photo img {
border-radius: 8px;
border: 2px solid #f0f0f0;
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-outline {
display: inline-block;
padding: 0.875rem 2rem;
margin: 1rem 1rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
border: 2px solid transparent;
cursor: pointer;
font-size: 1rem;
text-align: center;
}

.btn-primary {
background: #fc2a61;
color: white !important;
border-color: #fc2a61;
}

.btn-primary:hover {
background: #d61d4a;
border-color: #d61d4a;
color: white !important;
text-decoration: none;
transform: scale(1.05);
}

.btn-secondary {
background: #5545ce;
color: white !important;
border-color: #5545ce;
}

.btn-secondary:hover {
background: #4434bd;
border-color: #4434bd;
color: white !important;
text-decoration: none;
transform: scale(1.05);
}

.btn-outline {
background: transparent;
color: #5545ce !important;
border-color: #5545ce;
}

.btn-outline:hover {
background: #5545ce;
border-color: #5545ce;
color: white !important;
text-decoration: none;
transform: scale(1.05);
}

/* Button Size Variants */
.btn-large,
.btn-primary.btn-large,
.btn-secondary.btn-large,
.btn-outline.btn-large {
padding: 1.25rem 3rem;
font-size: 1.25rem;
border-radius: 10px;
}

.btn-small,
.btn-primary.btn-small,
.btn-secondary.btn-small,
.btn-outline.btn-small {
padding: 0.5rem 1.25rem;
font-size: 0.875rem;
border-radius: 6px;
}

/* Responsive */
@media (max-width: 768px) {
.volunteer-grid {
grid-template-columns: 1fr;
}

.volunteer-form {
padding: 0 1rem;
}

/* Make checkbox even larger and more tappable on mobile */
.form-group.checkbox input[type="checkbox"] {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
}

.form-group.checkbox label {
gap: 1rem;
}
}

/* Volunteer Directory - Roles and Events */
.volunteer-roles,
.volunteer-events {
font-size: 0.875rem;
margin: 0.75rem 0 0.5rem 0;
line-height: 1.4;
}

.volunteer-roles strong,
.volunteer-events strong {
color: #666;
font-weight: 600;
display: block;
margin-bottom: 0.25rem;
}

.roles-list,
.events-list {
color: #333;
display: inline-block;
}

.volunteer-roles .roles-list {
background: #e3f2fd;
padding: 0.25rem 0.5rem;
border-radius: 4px;
color: #1565c0;
font-size: 0.8125rem;
}

.volunteer-events .events-list {
color: #666;
font-style: italic;
}

/* ============================================
 * TABLES - Modern Professional Styling
 * ============================================ */

table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	background: rgba(252, 42, 97, 0.03); /* Slight pink tint matching theme */
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	border-radius: 8px;
	overflow: hidden;
}

/* Table Headers */
thead {
background: linear-gradient(135deg, #fc2a61 0%, #5545ce 100%);
color: white;
}

thead th {
padding: 1rem;
text-align: left;
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}

/* Table Body */
tbody tr {
	border-bottom: 1px solid rgba(252, 42, 97, 0.1); /* Subtle pink divider */
	transition: background-color 0.2s ease;
}

tbody tr:last-child {
border-bottom: none;
}

tbody tr:hover {
	background-color: rgba(252, 42, 97, 0.05); /* Pink tint on hover */
}

tbody td {
padding: 0.875rem 1rem;
color: #333;
font-size: 0.9375rem;
}

/* Striped Rows (optional - add .striped class to table) */
table.striped tbody tr:nth-child(even) {
	background-color: rgba(252, 42, 97, 0.04);
}

table.striped tbody tr:nth-child(even):hover {
	background-color: rgba(252, 42, 97, 0.07);
}

/* Compact Tables (optional - add .compact class to table) */
table.compact thead th,
table.compact tbody td {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}

/* Bordered Tables (optional - add .bordered class to table) */
table.bordered {
border: 1px solid #e0e0e0;
}

table.bordered thead th,
table.bordered tbody td {
border-right: 1px solid #e0e0e0;
}

table.bordered thead th:last-child,
table.bordered tbody td:last-child {
border-right: none;
}

/* Responsive Tables */
@media (max-width: 768px) {
table {
font-size: 0.875rem;
}

thead th,
tbody td {
padding: 0.75rem;
}

/* Optional: Stack table on small screens (add .responsive class to table) */
table.responsive {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}

/* Table Alignment Helpers */
.text-center {
text-align: center !important;
}

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

/* Table Cell Status Colors */
td.success,
th.success {
background-color: #d4edda !important;
color: #155724;
}

td.warning,
th.warning {
background-color: #fff3cd !important;
color: #856404;
}

td.error,
th.error {
background-color: #f8d7da !important;
color: #721c24;
}

td.info,
th.info {
background-color: #d1ecf1 !important;
color: #0c5460;
}

/* Sitemap Styles */
.uk-nav {
list-style: none;
padding: 0;
margin: 0;
}

.uk-nav li {
margin: 0.5rem 0;
}

.uk-nav a {
color: #fc2a61;
text-decoration: none;
font-size: 1rem;
transition: color 0.2s;
}

.uk-nav a:hover {
color: #5545ce;
text-decoration: underline;
}

/* Nested sitemap levels with increasing indentation */
.sitemap-level-0 {
font-size: 1.1rem;
font-weight: 600;
}

.sitemap-level-0 > li {
margin: 1rem 0;
}

.sitemap-level-1 {
margin-left: 2rem;
margin-top: 0.5rem;
font-size: 1rem;
font-weight: normal;
}

.sitemap-level-2 {
margin-left: 2rem;
margin-top: 0.25rem;
font-size: 0.95rem;
}

.sitemap-level-3 {
margin-left: 2rem;
margin-top: 0.25rem;
font-size: 0.9rem;
color: #666;
}

/* UIkit Alerts */
.uk-alert {
padding: 1rem 1.5rem;
margin: 1rem 0;
border-radius: 4px;
border-left: 4px solid;
}

.uk-alert-default {
background: #f8f8f8;
border-left-color: #999;
color: #333;
}

.uk-alert-primary {
background: #e8f0fe;
border-left-color: #5545ce;
color: #333;
}

.uk-alert-success {
background: #d4f4dd;
border-left-color: #22c55e;
color: #333;
}

.uk-alert-warning {
background: #fef3cd;
border-left-color: #f59e0b;
color: #333;
}

.uk-alert-danger {
background: #fce8ec;
border-left-color: #fc2a61;
color: #333;
}

/* UIkit Description List */
.uk-description-list {
margin: 1.5rem 0;
}

.uk-description-list dt {
font-weight: 600;
margin-top: 1rem;
font-size: 1.05rem;
}

.uk-description-list dt a {
color: #fc2a61;
text-decoration: none;
}

.uk-description-list dt a:hover {
color: #5545ce;
text-decoration: underline;
}

.uk-description-list dd {
margin-left: 1.5rem;
margin-top: 0.25rem;
color: #666;
line-height: 1.5;
}

.uk-description-list-divider dt {
padding-top: 1rem;
border-top: 1px solid #e5e5e5;
}

.uk-description-list-divider dt:first-child {
padding-top: 0;
border-top: none;
}

/* Alert scrollable variant */
.uk-alert-scrollable {
max-height: 400px;
overflow-y: auto;
}

/* Error text styling */
.error-text {
color: #d32f2f;
}

/* Form field descriptions */
.field-description {
display: block;
margin-bottom: 0.75rem;
}

.field-description-small {
display: block;
margin-bottom: 0.5rem;
}

/* Form label variants */
.form-label-normal {
display: block;
margin-bottom: 0.5rem;
font-weight: normal;
}

.form-label-small {
font-weight: normal;
font-size: 0.875rem;
}

/* Social links container */
.social-link-container {
margin-bottom: 1rem;
padding: 1rem;
background: #f8f9fa;
border-radius: 6px;
}

.social-link-field {
margin-bottom: 0.5rem;
}

/* Full width form inputs */
.form-input-full {
width: 100%;
padding: 0.75rem;
font-size: 1rem;
}

/* Volunteer status colors for inline use */
.color-approved {
color: #27ae60;
}

.color-pending {
color: #f39c12;
}

.color-secondary {
color: #5545ce;
}

.color-muted {
color: #999;
}

.color-text-muted {
color: #666;
}

/* Display utilities */
.display-block {
display: block;
}

.display-flex {
display: flex;
}

.flex-wrap {
flex-wrap: wrap;
}

.flex-gap-small {
gap: 0.5rem;
}

.flex-gap-medium {
gap: 0.75rem;
}

.flex-gap-large {
gap: 15px;
}

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

/* Margin utilities */
.mb-small {
margin-bottom: 0.5rem;
}

.mb-medium {
margin-bottom: 0.75rem;
}

.mb-large {
margin-bottom: 1rem;
}

.mt-small {
margin-top: 0.75rem;
}

.ml-medium {
margin-left: 1rem;
}

/* Spacing utilities */
.line-height-relaxed {
line-height: 2.5;
}

.line-height-comfortable {
line-height: 1.8;
}

/* Avatar image */
.avatar-small {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}

/* Current roles display */
.current-roles-label {
color: #2e7d32;
font-weight: bold;
display: block;
margin-bottom: 0.75rem;
}

.current-roles-container {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.current-role-badge {
background: #e8f5e9;
color: #1b5e20;
padding: 0.75rem 1.25rem;
border-radius: 8px;
border: 2px solid #4caf50;
font-weight: 500;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Event badges in profile */
.event-badge {
display: inline-block;
padding: 0.4rem 0.8rem;
border-radius: 6px;
font-size: 0.85em;
font-weight: 500;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
white-space: nowrap;
}

/* Event badges in directory */
.event-badge-dir {
display: inline-block;
padding: 0.3rem 0.6rem;
border-radius: 4px;
font-size: 0.75em;
font-weight: 500;
margin-right: 0.35rem;
margin-bottom: 0.35rem;
white-space: nowrap;
}

/* Volunteer directory roles */
.directory-roles-label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}

.directory-roles-container {
display: flex;
flex-wrap: wrap;
justify-items: center;
justify-content: center;
gap: 0.5rem;
}

.directory-role-badge {
background: #e8f5e9;
color: #1b5e20;
padding: 0.2rem 0.4rem;
border-radius: 6px;
border: 1px solid #4caf50;
font-size: 0.85em;
font-weight: 500;
}

/* Directory events section */
.directory-events-section {
margin-top: 0.75rem;
}

.directory-events-label {
display: block;
margin-bottom: 0.25rem;
font-size: 0.85em;
color: #666;
font-weight: bold;
}

.directory-events-container {
line-height: 1.8;
}

/* Role description placeholder */
.role-description-placeholder {
font-style: italic;
color: #999;
}

/* Font weight utilities */
.font-weight-bold {
font-weight: bold;
}

.font-weight-normal {
font-weight: normal;
}

/* Event block styling */
.event-block {
margin-bottom: 8px;
}

/* ============================================
   CURRENT EVENT SPOTLIGHT
   ============================================ */

.current-event-spotlight {
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
padding: 2rem 0;
margin-bottom: 2rem;
border-bottom: 3px solid #fc2a61;
}

.current-event-card {
background: white;
border: 3px solid #fc2a61;
border-radius: 16px;
padding: 2rem;
max-width: 900px;
margin: 0 auto;
box-shadow: 0 8px 24px rgba(252, 42, 97, 0.15);
text-align: center;
}

.current-event-badge {
display: inline-block;
background: linear-gradient(135deg, #fc2a61, #5545ce);
color: white;
padding: 0.5rem 1.5rem;
border-radius: 20px;
font-weight: 700;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
}

.current-event-card h2 {
color: #fc2a61;
font-size: 2rem;
margin: 0.5rem 0;
}

.current-event-charity {
font-size: 1.1rem;
color: #5545ce;
margin: 1rem 0;
}

.current-event-charity strong {
color: #333;
}

.current-event-dates {
color: #666;
font-size: 1rem;
margin: 0.75rem 0;
}

.current-event-description {
margin: 1.5rem 0;
color: #555;
line-height: 1.7;
font-size: 1rem;
}

.current-event-stats {
display: flex;
justify-content: center;
gap: 2rem;
margin: 1.5rem 0;
padding: 1.5rem;
background: linear-gradient(135deg, #e8f5e9 0%, #f0f9ff 100%);
border-radius: 12px;
}

.current-event-raised {
display: flex;
flex-direction: column;
gap: 0.25rem;
}

.stat-label {
font-size: 0.875rem;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}

.stat-value {
font-size: 2rem;
font-weight: 900;
color: #27ae60;
}

.current-event-actions {
margin-top: 1.5rem;
}

/* Responsive adjustments for current event */
@media (max-width: 768px) {
.current-event-card {
	padding: 1.5rem;
}

.current-event-card h2 {
	font-size: 1.5rem;
}

.current-event-stats {
	flex-direction: column;
	gap: 1rem;
}
}

/* ============================================
   FUNDRAISING IMPACT SECTION
   ============================================ */

/* Hero Section with Gradient */
.fundraising-hero {
background: linear-gradient(135deg, #fc2a61 0%, #5545ce 100%);
color: white;
padding: 2.5rem 0;
margin-bottom: 3rem;
position: relative;
overflow: hidden;
}

.fundraising-hero::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 500px;
height: 500px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 20s infinite ease-in-out;
}

.fundraising-hero::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
animation: float 15s infinite ease-in-out reverse;
}

@keyframes float {
0%, 100% {
	transform: translate(0, 0) scale(1);
}
33% {
	transform: translate(30px, -30px) scale(1.1);
}
66% {
	transform: translate(-20px, 20px) scale(0.9);
}
}

.fundraising-content {
text-align: center;
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}

.fundraising-label {
font-size: 1.5rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0 0 1rem 0;
opacity: 0.95;
}

.fundraising-total {
font-size: clamp(2.5rem, 8vw, 4.5rem);
font-weight: 900;
line-height: 1;
margin: 0.5rem 0;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
letter-spacing: -2px;
}

.fundraising-since {
font-size: 1.1rem;
opacity: 0.9;
font-weight: 300;
margin: 0.5rem 0 1.5rem 0;
}

/* Charity Breakdown */
.charity-breakdown {
margin-top: 2rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}

.charity-breakdown h3 {
margin: 0 0 1.5rem 0;
font-size: 1.5rem;
font-weight: 600;
}

.charity-list {
display: grid;
gap: 0.75rem;
}

.charity-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.15);
border-radius: 8px;
transition: all 0.3s;
}

.charity-item:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateX(5px);
}

.charity-name {
font-weight: 500;
font-size: 1.1rem;
}

.charity-amount {
font-weight: 700;
font-size: 1.25rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================
   FUNDRAISING EVENTS GRID
   ============================================ */

.fundraising-events {
margin: 3rem 0;
}

.fundraising-events h2 {
text-align: center;
color: #fc2a61;
font-size: 2.5rem;
margin-bottom: 2rem;
}

.events-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
margin-top: 2rem;
}

.event-card {
background: white;
border: 2px solid #f0f0f0;
border-radius: 8px;
padding: 1rem;
transition: all 0.3s;
display: flex;
flex-direction: column;
gap: 0.4rem;
}

.event-card:hover {
border-color: #fc2a61;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(252, 42, 97, 0.15);
}

.event-card h3 {
margin: 0 0 0.25rem 0;
color: #fc2a61;
font-size: 1rem;
line-height: 1.2;
}

.event-date {
color: #666;
font-size: 0.8rem;
}

.event-charity {
color: #5545ce;
font-weight: 600;
font-size: 0.85rem;
}

.event-amount {
font-size: 1.35rem;
font-weight: 900;
color: #27ae60;
margin: 0.25rem 0;
text-align: center;
padding: 0.4rem;
background: linear-gradient(135deg, #e8f5e9 0%, #f0f9ff 100%);
border-radius: 6px;
}

.event-donate-link {
display: inline-block;
text-align: center;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #fc2a61, #5545ce);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s;
margin-top: auto;
}

.event-donate-link:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(252, 42, 97, 0.4);
color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.fundraising-hero {
	padding: 3rem 0;
}

.fundraising-total {
	font-size: clamp(2.5rem, 12vw, 4rem);
}

.events-grid {
	grid-template-columns: 1fr;
}

.charity-breakdown {
	padding: 1.5rem;
}
}

/* ============================================
   CONDITIONAL FIELD ANIMATIONS
   ============================================ */

/* 
 * Styles for fields that appear/disappear based on conditions
 * Used by field-dependencies-helper.php
 * Customize timing, colors, and effects here
 */

/* Hidden state - field is not shown */
.conditional-field-hidden {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	transition: all 0.4s ease-in-out, max-height 0.5s ease-in-out;
	pointer-events: none; /* Prevent interaction when hidden */
}

/* Visible state - field is shown */
.conditional-field-visible {
	max-height: 500px; /* Adjust if your fields are taller */
	opacity: 1;
	overflow: visible;
	transition: all 0.4s ease-in-out, max-height 0.5s ease-in-out;
	pointer-events: auto;
}

/* Highlight effect when field first appears */
.conditional-field-appearing {
	animation: conditionalFieldHighlight 1.5s ease-out;
}

@keyframes conditionalFieldHighlight {
	0% {
		background-color: transparent;
		transform: translateY(-10px);
	}
	20% {
		background-color: rgba(252, 42, 97, 0.08); /* Subtle pink tint */
	}
	100% {
		background-color: transparent;
		transform: translateY(0);
	}
}

/* Alternative color schemes for highlighting - uncomment to use */

/* Purple highlight
@keyframes conditionalFieldHighlight {
	0% { background-color: transparent; transform: translateY(-10px); }
	20% { background-color: rgba(85, 69, 206, 0.08); }
	100% { background-color: transparent; transform: translateY(0); }
}
*/

/* Blue highlight
@keyframes conditionalFieldHighlight {
	0% { background-color: transparent; transform: translateY(-10px); }
	20% { background-color: rgba(52, 152, 219, 0.08); }
	100% { background-color: transparent; transform: translateY(0); }
}
*/

/* Green highlight
@keyframes conditionalFieldHighlight {
	0% { background-color: transparent; transform: translateY(-10px); }
	20% { background-color: rgba(46, 204, 113, 0.08); }
	100% { background-color: transparent; transform: translateY(0); }
}
*/

/* Smooth spacing transition for form groups */
.form-group {
	transition: margin 0.3s ease-in-out;
}

/* Persistent border for visible conditional fields */
.conditional-field-visible,
.conditional-field-visible.conditional-field-appearing,
.conditional-field-visible.conditional-field-active {
	border-left: 3px solid rgba(252, 42, 97, 0.3);
	padding-left: 1rem;
}

/* Pulse animation when field first appears */
.conditional-field-visible.conditional-field-appearing {
	animation: conditionalFieldHighlight 1.5s ease-out, 
	           borderPulse 1.5s ease-out;
}

@keyframes borderPulse {
	0% {
		border-left-color: rgba(252, 42, 97, 0.1);
	}
	50% {
		border-left-color: rgba(252, 42, 97, 0.8);
	}
	100% {
		border-left-color: rgba(252, 42, 97, 0.3);
	}
}

/* Star Rating Styles */
.star-rating {
	display: inline-flex;
	gap: 0.5rem;
	font-size: 2rem;
	cursor: pointer;
	user-select: none;
}

.star-rating .star {
	color: #d0d0d0;
	transition: all 0.2s ease;
	cursor: pointer;
}

.star-rating .star.selected,
.star-rating .star.hover {
	color: #E33376; /* Matches the field's starColor */
	text-shadow: 0 0 5px rgba(227, 51, 118, 0.5);
}

.star-rating .star:hover {
	transform: scale(1.2);
}

/* Prize Detail Styles */
.prize-details {
    max-width: 900px;
    margin: 0 auto;
}

.prize-photo {
    margin: 2rem 0 4rem 0;
    text-align: center;
    width: 100%;
}

.prize-photo img {
    width: 100%;
    max-width: 700px;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: 0 auto;
    box-shadow: 0 8px 24px rgba(85, 69, 206, 0.15);
    border: 8px solid white;
}

.prize-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .prize-info-grid {
        grid-template-columns: 1fr;
    }
}

.prize-donor,
.prize-donation,
.prize-description {
    margin-bottom: 0;
    padding: 1.75rem;
    border: 3px solid;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.prize-donor {
    background: transparent;
    border-color: #fc2a61;
}

.prize-donation {
    background: transparent;
    border-color: #5545ce;
}

.prize-description {
    background: transparent;
    border-color: #5545ce;
    grid-column: 1 / -1;
}

.prize-donor strong,
.prize-donation strong,
.prize-description strong {
    display: block;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.prize-donor strong {
    color: #fc2a61;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prize-donation strong {
    color: #5545ce;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prize-description strong {
    color: #5545ce;
}

.prize-donor {
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
    line-height: 1.6;
}

.prize-donation {
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
    line-height: 1.6;
}

.prize-description {
    line-height: 1.7;
    color: #333;
    font-size: 1.05rem;
}

.prize-description p {
    margin: 0.75rem 0;
    color: #555;
}

/* ============================================
   PRIZE DETAIL PAGE
   ============================================ */

.prize-detail-form {
    max-width: 900px;
    margin: 2rem auto;
}

/* Prize Hero Section */
.prize-hero-section {
    margin-bottom: 3rem;
    text-align: center;
}

.prize-title-section {
    margin-bottom: 2rem;
}

.prize-name {
    font-size: 2.75rem;
    font-weight: 900;
    color: #5545ce;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(85, 69, 206, 0.1);
}

/* Prize Photo Container - Centered */
.prize-photo-container {
    text-align: center;
    margin: 2rem 0 3rem 0;
}

.prize-photo {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(85, 69, 206, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.prize-photo:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 32px rgba(85, 69, 206, 0.3);
}

.prize-photo-edit-container {
    margin-bottom: 1.5rem;
}

.prize-photo-upload {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #5545ce;
}

/* Prize Header Info */
.prize-header-info {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f5ff 100%);
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 12px rgba(85, 69, 206, 0.08);
}

.prize-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.prize-info-item {
    text-align: center;
}

.prize-info-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.prize-info-value {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

/* Prize Value Display - Large & Colorful */
.prize-value-display {
    font-size: 2.25rem !important;
    font-weight: 900 !important;
    color: #27ae60 !important;
    margin: 0 !important;
}

/* Prize Status Badges */
.prize-status-pending {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: #f39c12;
    color: white;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.95rem;
}

.prize-status-approved {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: #3498db;
    color: white;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.95rem;
}

.prize-status-listed {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: #27ae60;
    color: white;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Prize Donor Info */
.prize-donor-info {
    background: #f9f9f9;
    padding: 1.75rem;
    margin-bottom: 2.5rem;
    border-radius: 12px;
    border-left: 4px solid #5545ce;
}

/* Editable Form Fields */
.prize-detail-form .form-group {
    margin-bottom: 1.75rem;
}

.prize-detail-form label {
    font-size: 1.05rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
}

.prize-detail-form input[type="text"],
.prize-detail-form input[type="number"],
.prize-detail-form textarea,
.prize-detail-form select {
    font-size: 1rem;
    padding: 0.875rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    width: 100%;
    transition: all 0.3s ease;
}

.prize-detail-form input:focus,
.prize-detail-form textarea:focus,
.prize-detail-form select:focus {
    border-color: #5545ce;
    outline: none;
    box-shadow: 0 0 0 3px rgba(85, 69, 206, 0.1);
}

.prize-detail-form textarea {
    min-height: 150px;
    resize: vertical;
}

/* Radio Button Styling for Anonymous/Display Name */
.prize-detail-form .form-group label[style*="display: flex"] {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    font-weight: normal;
    margin-bottom: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
    .prize-name {
        font-size: 2rem;
    }

    .prize-value-display {
        font-size: 1.75rem !important;
    }

    .prize-header-info {
        padding: 1.5rem;
    }

    .prize-info-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .prize-photo {
        max-width: 100%;
    }

    .prize-detail-form {
        margin: 1.5rem auto;
    }
}