@import url("common.css");
@import url("animation.css");

html {
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}

.with-scrollbar {
	scrollbar-width: auto !important;
	-ms-overflow-style: auto !important;
}

.font-esthetic {
	font-family: "Sacramento", cursive !important;
}

.font-arabic {
	font-family: "Noto Naskh Arabic", serif !important;
}

.img-center-crop {
	width: 13rem;
	height: 13rem;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
}

html[data-bs-theme="dark"] .btn-transparent {
	background-color: rgba(var(--bs-dark-rgb), 0.5) !important;
	backdrop-filter: blur(0.5rem);
}

html[data-bs-theme="light"] .btn-transparent {
	background-color: rgba(var(--bs-light-rgb), 0.5) !important;
	backdrop-filter: blur(0.5rem);
}

.loading-page {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1056;
}

html[data-bs-theme="light"] .color-theme-svg {
	color: rgb(255, 255, 255);
	background-color: var(--bs-light);
}

html[data-bs-theme="dark"] .color-theme-svg {
	color: rgb(0, 0, 0);
	background-color: var(--bs-dark);
}

html[data-bs-theme="light"] .bg-light-dark {
	background-color: rgb(var(--bs-light-rgb));
}

html[data-bs-theme="dark"] .bg-light-dark {
	background-color: rgb(var(--bs-dark-rgb));
}

html[data-bs-theme="light"] .bg-white-black {
	background-color: rgb(var(--bs-white-rgb));
}

html[data-bs-theme="dark"] .bg-white-black {
	background-color: rgb(var(--bs-black-rgb));
}

.bg-cover-home {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mask-image: linear-gradient(
		0.5turn,
		transparent,
		black 40%,
		black 60%,
		transparent
	);
}

.width-loading {
	width: 25%;
}

.cursor-pointer {
	cursor: pointer;
}

@media screen and (max-width: 992px) {
	.width-loading {
		width: 50%;
	}
}

@media screen and (max-width: 576px) {
	.width-loading {
		width: 75%;
	}
}

svg {
	display: block;
	line-height: 0;
	shape-rendering: geometricPrecision;
	backface-visibility: hidden;
}

.svg-wrapper {
	overflow: hidden !important;
	transform: translateZ(0) !important;
}

.no-gap-bottom {
	margin-bottom: -0.75rem !important;
}

#rsvp .form-control:focus,
#rsvp .form-select:focus {
	border-color: #6366f1;
	box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
}
#rsvp .alert {
	font-size: 0.95rem;
}