/* Non-critical CSS - Deferred loading for performance */

/* Calendar Container */
.calendar-section {
	padding: 80px 24px;
	background-color: var(--background-light);
}

.calendar-container {
	max-width: 1400px;
	margin: 0 auto;
}

.section-title {
	text-align: center;
	margin-bottom: 48px;
}

.section-title h2 {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--primary-purple);
	margin-bottom: 12px;
}

.section-title p {
	font-size: 1.125rem;
	color: var(--text-light);
	font-weight: 400;
}

/* Filters Styling */
.filters-container {
	display: flex;
	gap: 20px;
	margin-bottom: 32px;
	align-items: end;
}

.filter-group {
	flex: 1;
	min-width: 200px;
}

.filter-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-purple);
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.filter-select {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid var(--border-light);
	border-radius: 12px;
	background: var(--white);
	color: var(--text-dark);
	font-size: 15px;
	font-weight: 500;
	font-family: 'Inter', sans-serif;
	transition: all 0.2s ease;
	cursor: pointer;
}

.filter-select:focus {
	outline: none;
	border-color: var(--primary-orange);
	box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.1);
}

.filter-select:hover {
	border-color: var(--light-purple);
}

.filter-input {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid var(--border-light);
	border-radius: 12px;
	background: var(--white);
	color: var(--text-dark);
	font-size: 15px;
	font-weight: 500;
	font-family: 'Inter', sans-serif;
	transition: all 0.2s ease;
}

.filter-input:focus {
	outline: none;
	border-color: var(--primary-orange);
	box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.1);
}

.filter-input:hover {
	border-color: var(--light-purple);
}

.filter-input::placeholder {
	color: var(--text-light);
	font-weight: 400;
}

.filter-button {
	padding: 14px 28px;
	background: linear-gradient(135deg, var(--primary-orange), #E6850A);
	color: var(--white);
	border: none;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 140px;
	justify-content: center;
}

.filter-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255, 149, 0, 0.3);
}

.filter-button:active {
	transform: translateY(0);
}

/* Multi-select styling */
.multi-select {
	position: relative;
}

.multi-select-search {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid var(--border-light);
	border-radius: 12px;
	background: var(--white);
	color: var(--text-dark);
	font-size: 15px;
	font-weight: 500;
	font-family: 'Inter', sans-serif;
	transition: all 0.2s ease;
}

.multi-select-search:focus {
	outline: none;
	border-color: var(--primary-orange);
	box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.1);
}

.multi-select-search:hover {
	border-color: var(--light-purple);
}

.multi-select-search::placeholder {
	color: var(--text-light);
	font-weight: 400;
}

.multi-select-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--white);
	border: 2px solid var(--border-light);
	border-top: none;
	border-radius: 0 0 12px 12px;
	max-height: 200px;
	overflow-y: auto;
	z-index: 10;
	display: none;
}

.multi-select-option {
	padding: 12px 16px;
	cursor: pointer;
	transition: background-color 0.2s ease;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.multi-select-option:hover {
	background-color: var(--background-light);
}

.multi-select-option.selected {
	background-color: rgba(255, 149, 0, 0.1);
	color: var(--primary-orange);
	font-weight: 600;
}

.multi-select-option input[type="checkbox"] {
	margin: 0;
	width: 16px;
	height: 16px;
}

.clear-filters-button {
	padding: 14px 28px;
	background: var(--background-light);
	color: var(--text-dark);
	border: 2px solid var(--border-light);
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 140px;
	justify-content: center;
}

.clear-filters-button:hover {
	background: var(--white);
	border-color: var(--primary-orange);
	color: var(--primary-orange);
	transform: translateY(-1px);
}

/* Tablet responsiveness */
@media (max-width: 1024px) and (min-width: 769px) {
	.filters-container {
		gap: 16px;
	}

	.filter-group {
		min-width: 180px;
	}

	.fc-daygrid-event {
		font-size: 10px !important;
		min-width: 110px !important;
	}
}

/* Mobile responsiveness for filters */
@media (max-width: 768px) {
	/* Mobile event containment fix */
	.fc-daygrid-event-harness {
		position: static !important;
		left: auto !important;
		right: auto !important;
		width: 100% !important;
	}

	.fc-daygrid-event-harness .fc-daygrid-event {
		position: static !important;
		width: calc(100% - 4px) !important;
		margin: 1px 2px !important;
		max-width: 100% !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	/* Force events to stay within day boundaries */
	.fc-daygrid-day .fc-daygrid-day-events {
		overflow: hidden !important;
		width: 100% !important;
	}

	.filters-container {
		flex-direction: column;
		gap: 16px;
		margin-bottom: 24px;
	}

	.filter-group {
		min-width: unset;
		width: 100%;
	}

	.filter-group[style*="flex: 0"] {
		width: 100%;
		flex: 1;
	}

	.multi-select-search,
	.filter-input,
	.filter-button,
	.clear-filters-button {
		width: 100%;
		font-size: 16px; /* Prevents iOS zoom */
		padding: 16px;
	}

	.filter-button,
	.clear-filters-button {
		margin-top: 8px;
		min-height: 48px; /* Better touch target */
	}

	.calendar-section {
		padding: 40px 16px;
	}
}

/* Google Calendar Style Calendar */
#calendar {
	background: var(--white);
	border-radius: 16px;
	padding: 24px;
	box-shadow: var(--shadow-medium);
	border: 1px solid var(--border-light);
}

/* FullCalendar Customizations */
.fc {
	font-family: 'Inter', sans-serif;
}

/* Ensure calendar respects cell boundaries */
.fc-daygrid-body {
	overflow: hidden;
}

.fc-daygrid-body .fc-daygrid-day {
	overflow: hidden !important;
}

.fc-header-toolbar {
	margin-bottom: 24px;
	padding: 0 8px;
}

.fc-toolbar-title {
	color: var(--primary-purple) !important;
	font-weight: 600 !important;
	font-size: 1.5rem !important;
}

.fc-button-primary {
	background-color: var(--primary-orange) !important;
	border-color: var(--primary-orange) !important;
	border-radius: 8px !important;
	font-weight: 500 !important;
	padding: 8px 16px !important;
	font-size: 14px !important;
}

.fc-button-primary:hover {
	background-color: #E6850A !important;
	border-color: #E6850A !important;
}

.fc-daygrid-day {
	border-color: var(--border-light) !important;
	position: relative !important;
	overflow: hidden !important;
}

.fc-daygrid-day-events {
	position: relative !important;
	width: 100% !important;
	overflow: hidden !important;
}

.fc-daygrid-day-number {
	color: var(--text-dark);
	font-weight: 500;
	padding: 8px;
}

.fc-day-today {
	background-color: rgba(255, 149, 0, 0.1) !important;
}

.fc-day-today .fc-daygrid-day-number {
	background-color: var(--primary-orange);
	color: var(--white);
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4px;
}

/* Event Styling */
.fc-daygrid-event {
	border: none !important;
	border-radius: 6px !important;
	margin: 2px !important;
	padding: 4px 8px !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	width: calc(100% - 4px) !important;
	max-width: calc(100% - 4px) !important;
	box-sizing: border-box !important;
	position: static !important;
	left: auto !important;
	right: auto !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Event harness positioning fix */
.fc-daygrid-event-harness {
	position: static !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	max-width: 100% !important;
}

.fc-daygrid-event-harness .fc-daygrid-event {
	position: static !important;
	width: calc(100% - 4px) !important;
	max-width: calc(100% - 4px) !important;
	margin: 2px !important;
	overflow: hidden !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
}

/* Force all events to respect day boundaries */
.fc-daygrid-day .fc-daygrid-event-harness {
	overflow: hidden !important;
	position: static !important;
}

.fc-daygrid-day .fc-daygrid-event {
	position: static !important;
	max-width: 100% !important;
	overflow: hidden !important;
}

.fc-daygrid-event:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.fc-daygrid-event.fc-event-ativo {
	background: linear-gradient(135deg, #9b59b6, #8e44ad) !important;
	color: var(--white) !important;
}

.fc-daygrid-event.fc-event-o2 {
	background: linear-gradient(135deg, #8e44ad, #732d91) !important;
	color: var(--white) !important;
}

.fc-daygrid-event.fc-event-minhas_inscricoes {
	background: linear-gradient(135deg, #a569bd, #9b59b6) !important;
	color: var(--white) !important;
}

.fc-daygrid-event.fc-event-ticket_sports {
	background: linear-gradient(135deg, #bb8fce, #a569bd) !important;
	color: var(--white) !important;
}

.fc-daygrid-event .fc-event-title {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	max-width: 100% !important;
	display: block !important;
}

/* Orange "+ detalhes" button styling */
.fc-daygrid-more-link {
	background: linear-gradient(135deg, var(--primary-orange), #E6850A) !important;
	color: white !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 4px 8px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	margin: 2px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
}

.fc-daygrid-more-link:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3) !important;
}

/* Responsive Design for Calendar */
@media (max-width: 768px) {
	/* Better mobile calendar sizing */
	#calendar {
		padding: 12px;
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		overflow-x: auto;
	}

	.fc-toolbar {
		flex-direction: column;
		gap: 8px;
		margin-bottom: 16px !important;
	}

	.fc-toolbar-title {
		font-size: 1.1rem !important;
	}

	.fc-button-primary {
		padding: 6px 12px !important;
		font-size: 12px !important;
	}

	/* Improved mobile calendar grid */
	.fc-daygrid-day {
		min-height: 60px !important;
		padding: 3px !important;
		overflow: hidden !important;
		position: relative !important;
	}

	.fc-daygrid-day-events {
		position: relative !important;
		z-index: 1 !important;
	}

	.fc-daygrid-day-number {
		font-size: 12px !important;
		padding: 3px !important;
	}

	/* Better mobile event styling */
	.fc-daygrid-event {
		font-size: 10px !important;
		padding: 2px 4px !important;
		margin: 1px 0 !important;
		border-radius: 4px !important;
		min-height: 16px !important;
		line-height: 1.2 !important;
		width: calc(100% - 4px) !important;
		box-sizing: border-box !important;
		position: static !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	.fc-daygrid-event .fc-event-title {
		font-size: 10px !important;
		line-height: 1.2 !important;
		font-weight: 600 !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
		display: block !important;
	}

	/* More link styling */
	.fc-daygrid-more-link {
		font-size: 10px !important;
		padding: 2px 6px !important;
		background: linear-gradient(135deg, var(--primary-orange), #E6850A) !important;
		color: white !important;
		border-radius: 4px !important;
		font-weight: 600 !important;
		border: none !important;
		text-decoration: none !important;
	}

	/* Header cells more compact */
	.fc-col-header-cell {
		padding: 4px 2px !important;
	}

	.fc-col-header-cell-cushion {
		font-size: 11px !important;
		font-weight: 600 !important;
	}
}

/* Extra small mobile devices */
@media (max-width: 480px) {
	#calendar {
		width: 100%;
		max-width: 100%;
		padding: 8px;
		margin: 0 auto;
	}

	.fc-toolbar-title {
		font-size: 1rem !important;
	}

	.fc-button-primary {
		padding: 4px 8px !important;
		font-size: 11px !important;
	}

	.fc-daygrid-day {
		min-height: 50px !important;
		overflow: hidden !important;
		position: relative !important;
	}

	.fc-daygrid-event {
		font-size: 9px !important;
		min-height: 14px !important;
		padding: 1px 3px !important;
		margin: 1px 0 !important;
		width: calc(100% - 2px) !important;
		box-sizing: border-box !important;
		position: static !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	.fc-daygrid-event .fc-event-title {
		font-size: 9px !important;
	}
}
