.modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.78);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.modal.show {
	opacity: 1;
	pointer-events: all;
}

.modal.hidden {
	display: none !important;
}

#filesModal.show .modal-content {
	animation: filesModalIn 0.3s ease forwards;
}

#filesModal.closing .modal-content {
	animation: filesModalOut 0.2s ease forwards;
}

@keyframes filesModalIn {
	from {
		transform: scale(1.2) translateY(-100px);
		opacity: 0;
	}

	to {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
}

@keyframes filesModalOut {
	from {
		transform: scale(1) translateY(0);
		opacity: 1;
	}

	to {
		transform: scale(1.1) translateY(-50px);
		opacity: 0;
	}
}

#filesModal .modal-content {
	position: relative;
	max-width: 600px;
	width: 95%;
	max-height: 90vh;
	overflow-y: auto;

	background:
		linear-gradient(
			to bottom,
			rgba(6, 12, 24, 0.50) 0%,
			rgba(5, 8, 18, 0.68) 55%,
			rgba(5, 8, 18, 0.96) 100%
		),
		url("../images/modal/modal__bg.jpg") no-repeat center top,
		#050812;

	background-size:
		100% auto,
		100% auto,
		auto;

	border: 1px solid rgba(78, 120, 180, 0.22);
	border-radius: 0;

	box-shadow:
		0 0 30px rgba(0, 120, 255, 0.08),
		inset 0 0 40px rgba(0, 80, 160, 0.08);

	padding: 15px;
	color: #d1c9c3;
	font-family: "Roboto Slab", Roboto, Arial, sans-serif;
	font-size: 14px;
}

#filesModal .close {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 17px;
	height: 17px;
	cursor: pointer;
	transition: 0.2s;
	font-size: 0;
	background: url("../images/modal/close.png") no-repeat center;
	border: 0;
}

#filesModal .close:hover {
	filter: brightness(120%);
	transform: rotate(180deg);
}

#filesModal .tab-buttons {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 15px;
}

#filesModal .tab-btn {
	padding: 6px 14px;
	background: rgba(96, 80, 62, 0.17);
	border: 1px solid rgba(86, 78, 75, 0.4);
	color: #d1c9c3;
	cursor: pointer;
	font-size: 12px;
	text-transform: uppercase;
	transition: 0.15s;
}

#filesModal .tab-btn:hover,
#filesModal .tab-btn.active {
	background: rgba(104, 59, 16, 0.44);
	border-color: rgba(188, 139, 34, 0.45);
	color: #ffdc7f;
}

#filesModal .tab-content {
	display: none;
	opacity: 0;
	transform: translateY(8px);
}

#filesModal .tab-content.active {
	display: block;
	animation: filesTabFadeIn 0.22s ease forwards;
}

@keyframes filesTabFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#filesModal .ww__head {
	display: flex;
	flex-direction: column;
	padding-bottom: 15px;
}

#filesModal .ww__title {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 20px;
	text-transform: uppercase;
}

#filesModal .color-orange {
	color: #ffdc7f;
}

#filesModal .ww__desc {
	color: #70706d;
	font-size: 14px;
	line-height: 18px;
	text-align: left;
	padding: 5px 0 7px;
	border-bottom: 1px solid #383838;
}

#filesModal .fl {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: rgba(20, 42, 66, 0.38);
	border: 1px solid rgba(85, 145, 210, 0.18);
	padding: 5px 5px 5px 20px;
	color: #d1c9c3;
	font-size: 16px;
	font-weight: 500;
	line-height: 16px;
}

#filesModal .fl_mb {
	margin-bottom: 10px;
}

#filesModal .fl__desc {
	padding-right: 10px;
}

#filesModal .modal-btn {
	flex-shrink: 0;
	min-width: 110px;
	height: 31px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1d1a17;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	background: linear-gradient(to bottom, #ffe7a1, #c9902f);
	border: 1px solid #616161;
	transition: 0.2s;
	cursor: pointer;
}

#filesModal .modal-btn:hover {
	filter: brightness(125%);
	color: #1d1a17;
	box-shadow: 0 0 12px rgba(255, 220, 127, 0.45);
}

@media (max-width: 600px) {
	#filesModal .modal-content {
		width: 92%;
		padding: 12px;
	}

	#filesModal .fl {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 10px;
	}

	#filesModal .modal-btn {
		width: 100%;
	}
}

#filesModal .fl_has_sources {
	display: block;
	padding: 0;
	overflow: hidden;
}

#filesModal .fl__main {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 5px 5px 20px;
}

#filesModal .download-sources {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;

	max-height: 0;
	opacity: 0;
	overflow: hidden;

	padding: 0 10px;

	border-top: 0 solid rgba(86, 78, 75, 0.35);
	background: rgba(0, 0, 0, 0.18);

	transform: translateY(-6px);

	transition:
		max-height 0.28s ease,
		opacity 0.22s ease,
		transform 0.22s ease,
		padding 0.22s ease,
		border-top 0.22s ease;
}

#filesModal .fl_sources_open .download-sources {
	max-height: 200px;
	opacity: 1;

	padding: 8px 10px 10px;

	border-top: 1px solid rgba(86, 78, 75, 0.35);

	transform: translateY(0);
}

#filesModal .download-source {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 4px 8px;
	color: #d1c9c3;
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	background: rgba(62, 62, 62, 0.18);
	border: 1px solid rgba(58, 58, 58, 0.42);
	transition: 0.15s;
}

#filesModal .download-source:hover {
	color: #ffdc7f;
	background: rgba(30, 70, 110, 0.55);
	border-color: rgba(120, 170, 255, 0.35);
}

@media (max-width: 600px) {
	#filesModal .fl__main {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 10px;
	}

	#filesModal .download-sources {
		grid-template-columns: 1fr;
	}
}

/* Click effect */

#filesModal .modal-btn,
#filesModal .download-source,
#filesModal .tab-btn {
	position: relative;
	transform: translateY(0);
	transition:
		transform 0.08s ease,
		filter 0.15s ease,
		box-shadow 0.15s ease,
		background 0.15s ease,
		color 0.15s ease;
}

#filesModal .modal-btn:active,
#filesModal .download-source:active,
#filesModal .tab-btn:active {
	transform: translateY(1px) scale(0.98);
}

#filesModal .support-block {
	margin-top: 18px;
	padding-top: 15px;
	border-top: 1px solid #383838;
	text-align: center;
}

#filesModal .support-desc {
	color: #d1c9c3;
	font-size: 13px;
	line-height: 18px;
	margin-bottom: 12px;
}

#filesModal .support-logo {
	margin-bottom: 8px;
}

#filesModal .support-logo img {
	max-width: 100%;
	height: auto;
}

#filesModal .support-icons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

#filesModal .support-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	transition: 0.18s ease;
}

#filesModal .support-link img {
	width: 36px;
	height: 36px;
	display: block;
}

#filesModal .support-link:hover {
	transform: translateY(-2px) scale(1.06);
	filter: brightness(120%);
}

#filesModal .support-link:active {
	transform: translateY(1px) scale(0.96);
}

#filesModal .download-source {
	gap: 6px;
	cursor: pointer;
}

#filesModal .download-source i {
	font-size: 11px;
	color: #6c9ed6;
	transition:
		color 0.15s ease,
		transform 0.15s ease;
}

#filesModal .download-source:hover i {
	color: #ffdc7f;
}

#filesModal .download-source:hover {
	box-shadow: 0 0 10px rgba(120, 170, 255, 0.12);
}

#filesModal .fl__desc {
	display: flex;
	align-items: center;
	gap: 8px;
}

#filesModal .file-type-icon {
	width: 16px;
	min-width: 16px;
	text-align: center;
	font-size: 13px;
	color: #6c9ed6;
	opacity: 0.95;
}

#filesModal .fl_has_sources:hover .file-type-icon,
#filesModal .fl_sources_open .file-type-icon {
	color: #ffdc7f;
}

#filesModal .download-source i,
#filesModal .file-type-icon {
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}