.event-form-container {
	display : none;
	background-color: var(--color-white);
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	width: 90%;
	max-width: 500px;
	margin : auto;
}

.event-form-container h2 {
	margin-top: 0;
}

#eventForm {
	position : relative;
	display: flex;
	flex-direction: column;
}
#eventModForm {
	position : relative;
	display: flex;
	flex-direction: column;
}
.event-form-container form label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
}

.event-form-container form input,
.event-form-container form textarea,
.event-form-container form select {
	width: 100%;
	padding: 8px;
	margin-bottom: 10px;
	border: 1px solid var(--color-border);
	border-radius: 3px;
	box-sizing: border-box;
}

.event-form-container form select {
	background-color: var(--color-white);
	color: var(--color-text-strong);
}

.event-form-container form input[type="file"] {
	background-color: var(--color-white);
	color: var(--color-text-strong);
	padding: 6px;
}

.event-form-container form input[type="file"]::file-selector-button {
	margin-right: 0.6rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background-color: var(--color-surface-subtle);
	color: var(--color-text-strong);
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}

.event-form-container form input[type="file"]::file-selector-button:hover {
	background-color: var(--color-surface-neutral);
	border-color: var(--color-border-medium);
}

.event-form-container form input[type="file"]::-webkit-file-upload-button {
	margin-right: 0.6rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background-color: var(--color-surface-subtle);
	color: var(--color-text-strong);
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}

.event-form-container form input[type="file"]::-webkit-file-upload-button:hover {
	background-color: var(--color-surface-neutral);
	border-color: var(--color-border-medium);
}

.event-form-container form textarea {
	resize: vertical;
	height: 8rem;
}

#events-header-title {
	width: 60%;
	margin:auto;
}
#events-header-title h4 {
	margin-left : 10%;
}

#events-create-event {
	display: flex;
	flex-direction: row;
	justify-content: end;
	align-items: center;
	width : 70%;
	margin : auto;
	gap : 2rem;
	margin-bottom: 2rem;;
}
#events-create-event label{
	font-size: 1.1rem;
}

.event-card-button {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	width: 100%;
}

.event-card-button button {
	width: 100%;
}


#new_event_map {
	height : 400px;
}

#mod_event_map {
	height : 400px;
}

.private-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.5rem 0;
}





.button-container {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	width: 20%;
	justify-content : center;
	margin-top: 2rem;
}

.event_user_action {
	width: auto !important;
}

.event_user_action:hover {
}

#close-form-btn, #mod_close-form-btn {
	background-color: var(--color-cta-secondary-bg-hover);
	color: var(--color-cta-secondary);
	border: 1px solid var(--color-cta-secondary);
}
#close-form-btn:hover, #mod_close-form-btn:hover {
	background-color: var(--color-cta-secondary-bg-hover);
	color: var(--color-cta-secondary-hover);
	border-color: var(--color-cta-secondary-hover);
}

.event_admin_action {
	width: auto;
	height: auto;
	max-height: 2rem;

	padding: 0.5rem 1rem;

	border: 1px solid var(--color-cta-secondary);
	border-radius: 5px;

	text-align: center;
	align-content: center;
	color: var(--color-cta-secondary);
	background-color: var(--color-cta-secondary-bg-hover);

	cursor: pointer;
	text-decoration : none;

	transition : background-color 0.3s;

}
.event_admin_action:hover {
	background-color : var(--color-cta-secondary-bg-hover);
	border-color: var(--color-cta-secondary-hover);
	color: var(--color-cta-secondary-hover);
}

.modify_button {
	background-color : var(--color-cta-primary);
	color: var(--color-white);
	border-color: var(--color-cta-primary);
}
.modify_button:hover {
	background-color : var(--color-cta-primary-hover);
	border-color: var(--color-cta-primary-hover);
}


#search_results, #mod_search_results {
	display : none;
	flex-direction : column;
	position : relative;

	width : calc(100% + 5rem);

	border : 1px solid var(--color-text-subtle);
	background-color : var(--color-search);

	z-index : 10000;
}
.search_element {
	display : flex;
	flex-direction : row;
	gap : 1rem;
	border : 1px solid var(--color-border);
	padding : 1rem;
	padding-top : 0.5rem;
	padding-bottom : 0.5rem;
	transition : 0.5s background-color;
}
.search_element:hover {
	cursor : pointer;
	background-color : var(--color-search-hover);
}

.events-container {
	max-width: 100%; /* Limitation de la largeur pour centrer le contenu */
	margin: 0 auto; /* Centrer horizontalement */
	margin-top : 1rem;
	display : flex;
	flex-direction : column;
	gap : 3rem;
}

.event-card-page {
	width: 100%;
}

.event-card-container {
	display: flex;
	flex-direction: row;
	gap : 1rem;

	width: 80%;

	padding: 1rem;
	margin: auto;

	background-color: var(--color-surface-alt);

	border: 0px solid var(--color-border); /* Bordure plus sobre */
	border-radius: 0px;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	position: relative;
}

.event-card-container.no-map .event-card-image {
	width: 10%;
}

.event-card-container.no-map .event-card-data {
	width: 86%;
}

.events-container .event-card-address {
	cursor: pointer;
}

.events-container .event-card-address:hover {
	color: var(--color-action);
}

.event-card-actions {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	z-index: 6;
}

.event-options {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.event-options-toggle {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--color-cta-secondary);
	background: var(--color-cta-secondary-bg-hover);
	color: var(--color-cta-secondary);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.event-options-menu {
	display: none;
	flex-direction: column;
	margin-top: 0.4rem;
	min-width: 190px;
	border-radius: 10px;
	border: 1px solid var(--color-border);
	background: var(--color-white);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
}

.event-options.open .event-options-menu {
	display: flex;
}

.event-options-item {
	background: none;
	border: none;
	text-align: left;
	padding: 0.65rem 0.9rem;
	cursor: pointer;
	font-size: 0.95rem;
	color: var(--color-cta-primary);
}

.event-options-item:hover {
	background: var(--color-cta-secondary-bg-hover);
	color: var(--color-cta-secondary-hover);
}

.event-options-item.danger {
	color: var(--color-cta-primary-active);
}

.event-share-button,
.event-map-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--color-cta-secondary);
	background: var(--color-cta-secondary-bg-hover);
	color: var(--color-cta-secondary);
	font-size: 1.1rem;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.event-map-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3000;
}

.event-map-modal.hidden {
	display: none;
}

.event-cancel-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3000;
}

.event-cancel-modal.hidden {
	display: none;
}

.event-map-modal-content {
	background: var(--color-white);
	border-radius: 12px;
	width: min(900px, 94%);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem 1.2rem 1.2rem;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.event-cancel-modal-content {
	background: var(--color-white);
	border-radius: 12px;
	width: min(620px, 92%);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.2rem 1.4rem 1.3rem;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.event-map-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.event-cancel-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.event-map-modal-header h3 {
	margin: 0;
}

.event-cancel-modal-header h3 {
	margin: 0;
}

.event-map-close {
	border: none;
	background: var(--color-cta-secondary-bg-hover);
	color: var(--color-cta-secondary);
	border: 1px solid var(--color-cta-secondary);
	border-radius: 8px;
	padding: 0.4rem 0.6rem;
	cursor: pointer;
	font-size: 1rem;
}

.event-cancel-close {
	border: none;
	background: var(--color-cta-secondary-bg-hover);
	color: var(--color-cta-secondary);
	border: 1px solid var(--color-cta-secondary);
	border-radius: 8px;
	padding: 0.4rem 0.6rem;
	cursor: pointer;
	font-size: 1rem;
}

.event-map-address {
	color: var(--color-text-subtle);
	font-size: 0.95rem;
}

.event-cancel-help {
	color: var(--color-text-subtle);
	margin: 0;
	font-size: 0.95rem;
}

#event-cancel-reason {
	width: 100%;
	min-height: 140px;
	padding: 0.75rem 0.9rem;
	border-radius: 10px;
	border: 1px solid var(--color-border);
	resize: vertical;
	font-family: inherit;
	font-size: 0.95rem;
}

.event-cancel-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.event-cancel-count {
	color: var(--color-text-subtle);
	font-size: 0.9rem;
}

.event-cancel-actions {
	display: inline-flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.event-cancel-dismiss {
	border: 1px solid var(--color-cta-secondary);
	background: var(--color-cta-secondary-bg-hover);
	color: var(--color-cta-secondary);
	border-radius: 10px;
	padding: 0.45rem 0.9rem;
	cursor: pointer;
}

.event-cancel-confirm {
	border: 1px solid var(--color-cta-primary);
	background: var(--color-cta-primary);
	color: #fff;
	border-radius: 10px;
	padding: 0.45rem 0.9rem;
	cursor: pointer;
}

.event-cancel-confirm:hover {
	background: var(--color-cta-primary-hover);
	border-color: var(--color-cta-primary-hover);
}

.event-map-container {
	width: 100%;
	min-height: 420px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--color-border);
}

.events-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 1rem auto 3rem;
}

.pagination-btn {
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--color-cta-secondary);
	color : var(--color-cta-secondary);
	border-radius: 4px;
	background-color: var(--color-cta-secondary-bg-hover);
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pagination-btn:hover:not(:disabled) {
	background-color: var(--color-cta-secondary-bg-hover);
	border-color: var(--color-cta-secondary-hover);
	color: var(--color-cta-secondary-hover);
}

.pagination-btn:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.pagination-btn.disabled {
	cursor: not-allowed;
	opacity: 0.6;
	pointer-events: none;
}

.pagination-btn.active {
	background-color: var(--color-cta-primary);
	border-color: var(--color-cta-primary);
	color: var(--color-white);
	pointer-events: none;
}

.pagination-ellipsis {
	padding: 0.4rem 0.5rem;
	color: var(--color-text-subtle);
}




/* Responsiveness for smaller screens */
@media (max-width: 992px) {
	.event-grid {
		grid-template-columns: repeat(2, 1fr); /* 2 colonnes pour les écrans moyens */
	}
}

@media (max-width: 600px) {
	#events-header-title {
		width: 100%;
		margin: 0 auto 1rem;
	}

	#events-header-title h1 {
		margin: 0;
		font-size: 1.6rem;
		line-height: 1.2;
	}

	#events-create-event {
		width: 100%;
		margin: 0 auto 1.5rem;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0.75rem;
	}

	#events-create-event label {
		width: 100%;
		text-align: left;
	}

	#events-create-event button {
		width: 100%;
	}

	.event-grid {
		grid-template-columns: 1fr; /* 1 colonne pour les petits écrans */
	}
	.event-card-container {
		display: block;
		width:90%;
	}
	.event-card-image {
		display: block;
		width: 75% !important;
		margin:auto !important;
	}
	.event-card-data {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
	}

	.event-card-description {
		display: inline-block !important;
		width: 98% !important;
		margin: 0 !important;
		padding: 0 !important;
		padding-left: 2% !important;
	}
	.event-card-map {
		width: 100% !important;
	}
	.map-container {
		width: 100% !important;
		min-height: 40vh !important;
	}
	.button-container {
		width: 100%;
	}
}