.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	/* Flex для центрування */
	align-items: center;
	justify-content: center;
}

/* Коли модальне вікно показується */
.modal[style*="display: block"],
.modal.show {
	display: flex !important;
}

.modal-content {
	position: relative;
	background-color: var(--background-color, #fff);
	padding: 20px;
	width: 90%;
	max-width: 500px;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	margin: 0;
	max-height: 90vh;
	overflow-y: auto;
	/* Забезпечуємо що контент не виходить за межі */
	transform: translateZ(0);
}

/* Додаткові стилі для кращого центрування на мобільних */
@media (max-width: 768px) {
	.modal-content {
		width: 95%;
		max-width: 400px;
		margin: 20px;
		max-height: calc(100vh - 40px);
	}
}

/* Забезпечуємо правильне відображення для всіх тем */
body.day-theme .modal-content,
body.evening-theme .modal-content,
body.night-theme .modal-content,
body.gray-theme .modal-content {
	background-color: var(--modal-bg, #fff);
	color: var(--modal-text, #333);
}

/* Темна тема */
body.night-theme .modal-content {
	background-color: var(--card-bg, #1a1a1a);
	color: var(--text-color, #e0e0e0);
	border: 1px solid var(--border-color, #333);
}

/* Сіра тема */
body.gray-theme .modal-content {
	background-color: var(--card-bg, #2a2a2a);
	color: var(--text-color, #ddd);
}

.close {
	position: absolute;
	right: 15px;
	top: 10px;
	font-size: 24px;
	cursor: pointer;
}

.tabs {
	display: flex;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--border-color, #ddd);
}

.tab-button {
	padding: 10px 20px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 16px;
	color: var(--text-color, #333);
}

.tab-button.active {
	color: var(--primary-color, #007bff);
	border-bottom: 2px solid var(--primary-color, #007bff);
	margin-bottom: -2px;
}

/* Tab Content Styles */
.tab-content {
	display: block;
	visibility: visible;
	opacity: 1;
	padding: 10px 0;
}

.tab-content.active {
	display: block;
	visibility: visible;
	opacity: 1;
}



.form-group {
	margin-bottom: 16px;
}

.form-group input {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid var(--border-color, #ddd);
	border-radius: 8px;
	font-size: 15px;
	background: var(--background-color, #fff);
	color: var(--text-color, #333);
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.form-group input:focus {
	outline: none;
	border-color: var(--primary-color, #007bff);
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

/* Submit Button */
.submit-button {
	width: 100%;
	padding: 14px;
	background: var(--primary-color, #007bff);
	color: white;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	margin-top: 10px;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.submit-button:hover {
	background: var(--primary-hover, #0056b3);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.submit-button:active {
	transform: translateY(1px);
}

/* Dark Theme Support */
body.night-theme .form-group input {
	background: var(--dark-input-bg, #2a2a2a);
	border-color: var(--dark-border, #444);
	color: var(--dark-text, #fff);
}

body.night-theme .form-group input:focus {
	border-color: var(--primary-color, #007bff);
	background: #333;
}

body.night-theme .social-login {
	border-top-color: var(--dark-border, #444);
}

body.night-theme .social-login h3 {
	color: var(--dark-text-secondary, #aaa);
}

/* Error States */
.form-group.error input {
	border-color: var(--error-color, #dc3545);
	background: rgba(220, 53, 69, 0.05);
}

.form-group .error-message {
	color: var(--error-color, #dc3545);
	font-size: 13px;
	margin-top: 6px;
	display: none;
}

.form-group.error .error-message {
	display: block;
}

.notification {
	position: fixed;
	top: 20px;
	right: 20px;
	padding: 15px;
	border-radius: 4px;
	display: none;
	z-index: 1001;
}

.notification.success {
	background: #28a745;
	color: white;
}

.notification.error {
	background: #dc3545;
	color: white;
}

.social-login {
	margin-top: 20px;
	text-align: center;
}

.guest-avatar {
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.guest-avatar:hover {
	opacity: 0.8;
}

/* Notification System */
.auth-notification {
	position: fixed;
	top: 20px;
	right: -400px;
	/* Start off-screen */
	width: 280px;
	padding: 16px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: right 0.3s ease-in-out;
	z-index: 10000;
	display: flex;
	align-items: center;
	gap: 12px;
}

.auth-notification.show {
	right: 20px;
}

.auth-notification.success {
	border-left: 4px solid #4CAF50;
}

.auth-notification.error {
	border-left: 4px solid #f44336;
}

.auth-notification.info {
	border-left: 4px solid #2196F3;
}

.auth-notification .spinner {
	width: 20px;
	height: 20px;
	border: 2px solid #ddd;
	border-top: 2px solid #2196F3;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.auth-notification .icon {
	font-size: 20px;
}

.auth-notification.success .icon {
	color: #4CAF50;
}

.auth-notification.error .icon {
	color: #f44336;
}

.auth-notification .message {
	flex-grow: 1;
	font-size: 14px;
	color: #333;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Dark theme support */
.dark-theme .auth-notification {
	background: #333;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-theme .auth-notification .message {
	color: #fff;
}

/* Приховуємо всі небажані модальні вікна */
#actionModal,
#controlsModal,
#infoModal,
.song-controls-modal,
.controls-modal,
.modal[style*="display: block"]:not(#loginModal),
[data-modal="controls"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Приховуємо overlay які можуть блокувати контент */
.modal-overlay,
.controls-overlay,
.action-overlay {
	display: none !important;
}

/* Якщо є модальне вікно з текстом "Виберіть дію" */
.modal:has(.modal-content:contains("Виберіть дію")),
.modal:has(.modal-content:contains("Керування")) {
	display: none !important;
}

/* Альтернативний спосіб - приховати будь-які модалки окрім авторизації */
.modal:not(#loginModal):not(.auth-modal) {
	display: none !important;
}