/* ========================================
   APPLICATION MODAL - MATCH /APPLY FORM DESIGN
   Override premium styling to match volunteer_form.html
   ======================================== */

/* Remove glassmorphism effects */
#applicationModal .modal-content {
	background: white !important;
	border: none !important;
	border-radius: 15px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

#applicationModal .modal-body {
	background: white !important;
	padding: 30px !important;
}

/* Modal header - keep gradient like form */
#applicationModal .modal-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	color: white !important;
	padding: 20px 30px !important;
	border-bottom: none !important;
}

/* Section wrapper - transparent, no shadow (shadow applied to inner card) */
#applicationModal .dynamic-application-section {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin-bottom: 20px !important;
	box-shadow: none !important;
}

/* Section cards - simple white background like form (actual card styling) */
#applicationModal .premium-section-card {
	background: white !important;
	border: 1px solid #e9ecef !important;
	border-radius: 15px !important;
	padding: 25px !important;
	margin-bottom: 0 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Section headers - match form style */
#applicationModal .section-header h4,
#applicationModal .section-title {
	color: #2c3e50 !important;
	font-weight: 700 !important;
	font-size: 1.5rem !important;
	margin-bottom: 20px !important;
	padding-bottom: 10px !important;
	border-bottom: 3px solid #667eea !important;
}

/* Remove icon badges from section titles */
#applicationModal .icon-badge {
	display: none !important;
}

/* Field groups - remove premium styling, match form inputs */
#applicationModal .premium-field-group,
#applicationModal .application-field {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 0 15px 0 !important;
	margin-bottom: 15px !important;
	display: block !important;
	transition: none !important;
	border-bottom: 1px solid #dee2e6 !important;
}

#applicationModal .premium-field-group:hover,
#applicationModal .application-field:hover {
	transform: none !important;
	background: transparent !important;
}

#applicationModal .application-field:last-child,
#applicationModal .premium-field-group:last-child {
	border-bottom: none !important;
}

/* Labels - match form style (not uppercase, no icons) */
#applicationModal .field-label {
	display: block !important;
	font-weight: 600 !important;
	margin-bottom: 8px !important;
	color: #2c3e50 !important;
	font-size: 1rem !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* Remove icons from labels */
#applicationModal .field-label i {
	display: none !important;
}

#applicationModal .field-label::before {
	display: none !important;
}

/* Field values - match form input display */
#applicationModal .field-value {
	color: #495057 !important;
	font-weight: normal !important;
	font-size: 1rem !important;
	line-height: 1.6 !important;
	padding: 12px !important;
	border: 2px solid #ddd !important;
	border-radius: 8px !important;
	background: white !important;
	display: block !important;
	min-width: auto !important;
}

/* Remove all animations */
#applicationModal .dynamic-application-section,
#applicationModal .premium-field-group,
#applicationModal .application-field {
	animation: none !important;
}

/* Simplify header card */
#applicationModal .premium-header-card {
	background: white !important;
	border-radius: 15px !important;
	padding: 25px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Logo container - simpler */
#applicationModal .logo-container {
	background: rgba(102, 126, 234, 0.05) !important;
	border-radius: 10px !important;
	padding: 15px !important;
}

/* Remove backdrop blur */
#applicationModal.modal-backdrop,
#applicationModal ~ .modal-backdrop {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	background: rgba(0, 0, 0, 0.5) !important;
}

/* Checkbox and radio groups - match form style */
#applicationModal .checkbox-label,
#applicationModal .radio-label {
	background: #f8f9fa !important;
	border: 2px solid transparent !important;
	border-radius: 8px !important;
	padding: 12px !important;
}

#applicationModal .checkbox-label:hover,
#applicationModal .radio-label:hover {
	background-color: #f8f9fa !important;
	border-color: #667eea !important;
	transform: none !important;
}

#applicationModal .checkbox-label::before,
#applicationModal .radio-label::before {
	display: none !important;
}

/* Selected items/tags - match form */
#applicationModal .selected-item {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	color: white !important;
	padding: 8px 16px !important;
	border-radius: 25px !important;
	font-size: 14px !important;
	box-shadow: none !important;
}

/* Form header in modal */
#applicationModal .form-header {
	color: #2c3e50 !important;
	font-size: 2rem !important;
	margin-bottom: 20px !important;
	border-bottom: 3px solid #667eea !important;
	padding-bottom: 15px !important;
}

/* Premium data grid - remove gradient backgrounds */
#applicationModal .premium-data-grid .col-md-6,
#applicationModal .premium-data-grid .col-12 {
	margin-bottom: 0 !important;
}

#applicationModal .premium-data-grid .premium-field-group {
	background: transparent !important;
	border: none !important;
	margin-bottom: 15px !important;
}

/* Remove gradient from section headers */
#applicationModal .section-header {
	border-bottom: 2px solid #e5e7eb !important;
}

/* Simplify submission meta */
#applicationModal .submission-meta i {
	color: #667eea !important;
}

/* Volunteer name styling */
#applicationModal .volunteer-name {
	color: #2c3e50 !important;
	font-weight: 700 !important;
	font-size: 2rem !important;
	margin-bottom: 10px !important;
}

/* Hide Applied Date from volunteer detail page Personal Information section */
.info-row:has(.info-label:contains("Applied Date")) {
	display: none !important;
}

/* Form group styling to match /apply */
#applicationModal .form-group {
	margin-bottom: 20px !important;
}

#applicationModal .form-group label {
	display: block !important;
	font-weight: 600 !important;
	margin-bottom: 8px !important;
	color: #2c3e50 !important;
	font-size: 1rem !important;
}

/* Match input styling from form */
#applicationModal input[type="text"],
#applicationModal input[type="email"],
#applicationModal input[type="tel"],
#applicationModal select,
#applicationModal textarea,
#applicationModal .form-control {
	width: 100% !important;
	padding: 12px !important;
	border: 2px solid #ddd !important;
	border-radius: 8px !important;
	font-size: 16px !important;
	transition: border-color 0.3s ease !important;
}

#applicationModal input:focus,
#applicationModal select:focus,
#applicationModal textarea:focus,
#applicationModal .form-control:focus {
	outline: none !important;
	border-color: #667eea !important;
	box-shadow: 0 0 8px rgba(102, 126, 234, 0.3) !important;
}