@import url('../bootstrap/css/bootstrap.min.css');

.highlight-img {
	border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

@media (min-width: 768px) {
	.highlight-img {
		border-radius: var(--bs-card-inner-border-radius) 0 0 var(--bs-card-inner-border-radius);
	}
}

li .bi {
	vertical-align: middle;
}

.card-project {
	background-color: #262828;
	border: var(--bs-border-width) solid #6c757d;
	border-color: #6c757d;
	color: var(--bs-white);
	border-radius: var(--bs-card-border-radius);
	overflow: hidden;
	transition: background-color 0.2s ease;
}

.card-project:hover {
	background-color: #353838;
	border-color: #a1a8ae;
	cursor: pointer;
}

.card-highlight {
	background-color: #1a1e1d; 
	border-color: #6c757d;
	color: aquamarine;
	max-height: 1000px;
}

.card-highlight:hover {
	background-color: #232b29; 
	border-color: #7f878e;
}

.btn.btn-tag-selected,
.btn.btn-tag-selected.active,
.btn.btn-tag-selected:focus,
.btn.btn-tag-selected:active {
	--color-selected: #88179c;
	--color-selected-border: #a116bd;
	background-color: var(--color-selected);
	border-color: var(--color-selected-border);
	color: #ffffff;
}

.btn.btn-tag-selected:hover {
	background-color: var(--color-selected-border);
	color: #ffffff;
}

.btn.btn-tag-unselected,
.btn.btn-tag-unselected.active {
	--color-selected: #3c4144;
	--color-selected-border: #61696e;
	--color-selected-hover: #61696e;
	background-color: var(--color-selected);
	border: 1px solid var(--color-selected-border);
	color: #b9b9b9;
}

.btn.btn-tag-unselected:hover,
.btn.btn-tag-unselected:focus,
.btn.btn-tag-unselected:active {
	background-color: var(--color-selected-hover);
	color: #eeeeee;
}

.card-project .badge,
.card-highlight .badge {
	border: 1px solid transparent;
	transition: background-color 0.2s ease;
}

.card-project .badge-selected,
.card-project .badge-selected:hover {
	cursor: default;
}

.card-project .badge.badge-unselected,
.card-highlight .badge.badge-unselected {
	--color-selected: #3c4144;
	--color-selected-border: #61696e;
	background-color: var(--color-selected);
	border-color: var(--color-selected-border);
	color: #b9b9b9;
}

.card-project .badge:hover:not(.badge-selected),
.card-highlight .badge:hover:not(.badge-selected) {
	filter: brightness(1.15);
	cursor: pointer;
	color: #c0c0c0;
}

.btn-form,
.btn-form:disabled {
	--color-selected: #88179c;
	background-color:var(--color-selected) !important;
	border-color: var(--color-selected) !important;
	transition: background-color 0.2s ease;
	color: #ffffff !important;
}

.btn-form:hover,
.btn-form:focus,
.btn-form:active,
.btn-form:focus-visible {
	--color-selected: #a116bd;
	background-color: var(--color-selected) !important;
	border-color: var(--color-selected) !important;
	color: #ffffff !important;
}

.alert[data-fs-error] {
	background-color: var(--bs-danger-bg-subtle) !important;
	border-color: var(--bs-danger-border-subtle) !important;
	color: var(--bs-danger-text-emphasis) !important;
}

.alert[data-fs-success] {
	background-color: var(--bs-success-bg-subtle) !important;
	border-color: var(--bs-success-border-subtle) !important;
	color: var(--bs-success-text-emphasis) !important;
}

.alert[data-fs-error],
.alert[data-fs-success] {
	display: none;
}

.alert[data-fs-error][data-fs-active],
.alert[data-fs-success][data-fs-active] {
	display: flex;
	align-items: center;
	padding-top: 0rem;
	padding-bottom: 0rem;
}

.alert[data-fs-error][data-fs-active] .btn-close,
.alert[data-fs-success][data-fs-active] .btn-close {
	position: static;
	margin-left: auto;
	flex-shrink: 0;
}

.alert[data-fs-active][data-dismissed] {
	display: none !important;
}

.custom-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 5px;
	background: #495057; /* Default empty color */
	outline: none;
}

.custom-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ffffff;
	cursor: pointer;
}

.custom-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ffffff;
	cursor: pointer;
	border: none;
}

.video-container {
	overflow: hidden;
	border-radius: var(--bs-card-border-radius);
}

.video-controls-overlay {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 10;
}

/* Show controls on hover or focus */
.video-container:hover .video-controls-overlay,
.video-container:focus-within .video-controls-overlay {
	opacity: 1;
}

.cursor-pointer {
	cursor: pointer;
}

.custom-control-btn {
	transition: transform 0.1s ease;
}

.custom-control-btn:hover {
	transform: scale(1.1);
}

#videoTimeline {
	height: 4px;
	cursor: pointer;
	transition: height 0.1s ease;
}

#videoTimeline:hover {
	height: 6px;
}

#videoTimeline::-webkit-slider-thumb {
	width: 12px;
	height: 12px;
}
#videoTimeline::-moz-range-thumb {
	width: 12px;
	height: 12px;
}

.center-icon-anim {
	animation: fadeScale 0.75s ease-out forwards;
}

@keyframes fadeScale {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(1.3);
	}
}

@font-face {
	font-family: "AgencyR_FB";
	src: url("/assets/fonts/AGENCYR.woff2") format("woff2"),
		url("/assets/fonts/AGENCYR.TTF") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "AgencyB_FB";
	src: url("/assets/fonts/AGENCYB.woff2") format("woff2"),
		url("/assets/fonts/AGENCYB.TTF") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Roboto";
	src: url("/assets/fonts/Roboto.woff2") format("woff2"),
		url("/assets/fonts/Roboto.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

body {
	font-family: "Roboto", sans-serif;
}

.agency-font {
	font-family: "AgencyR_FB", sans-serif;
}

.agency-bold-font {
	font-family: "AgencyB_FB", sans-serif;
}