/*****----- REGISTRACE ----*****/

#modals {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	min-height: 100dvh;
	margin: 0 auto;
	padding: 16px;
	justify-content: center;
	align-items: center;
}

.registration {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap16);
	background: var(--clr-bg-tertiary);
	padding: 0 24px 24px 24px;
	border-radius: 12px;
	max-width: 400px;
	color: #fff;
	border: 1px solid var(--brdr-skeumo-gradient);
	box-shadow: 0 361px 101px 0 rgba(0, 0, 0, 0.01), 0 231px 92px 0 rgba(0, 0, 0, 0.06), 0 130px 78px 0 rgba(0, 0, 0, 0.21), 0 58px 58px 0 rgba(0, 0, 0, 0.35), 0 14px 32px 0 rgba(0, 0, 0, 0.41);
}

.registration::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: url("/sys_img/2025imgs/bg/registration-bg.svg");
	/* background-size: contain; */
	background-size: auto;
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.registration__close {
	position: absolute;
	width: 24px;
	height: 24px;
	top: 12px;
	right: 24px;
	background: none;
	border: none;
	cursor: pointer;
	color: #fff;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.registration__close:hover {
	opacity: 1;
}

.registration__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap16);
	padding: 32px 16px 20px 16px;
}

.registration__logo {
	border-radius: 12px;
	width: 60px;
	height: auto;
}

.registration__logo img {
	max-width: 100%;
	height: auto;
	aspect-ratio: 59.72/58.88;
	object-fit: contain;
}

.registration__title {
	margin: 0;
	font-size: var(--fs24);
	font-weight: var(--fw600);
}

.registration__form {
	display: flex;
	flex-direction: column;
	gap: var(--gap16);
}

.registration__password {
	position: relative;
}

.registration__icon {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(-50%, -50%);
}

.registration__input {
	width: 100%;
	padding: 10px 14px;
	border: none;
	border-radius: 6px;
	background: #1c1c1c;
	color: #fff;
	font-size: var(--fs16);
	font-weight: var(--fw400);
	text-overflow: ellipsis;
}

.registration__input::placeholder {
	color: #888;
}

.registration__input:focus-visible {
	outline: 2px solid var(--bg-brand-solid);
}

.registration__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.registration__password-toggle {
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
}

.registration__button {
	background: var(--bg-brand-solid);
	border: none;
	padding: 10px 16px;
	border-radius: var(--br8);
	font-weight: bold;
	cursor: pointer;
}

.registration__button:hover {
	background: #00b3e6;
}

.registration__button:disabled {
	cursor: progress;
	opacity: 0.65;
}

.registration__login {
	display: flex;
	gap: var(--gap8);
	justify-content: center;
	flex-wrap: wrap;
	text-align: center;
	font-size: var(--fs14);
	font-weight: var(--fw500);
	color: var(--text-tertiary);
}

.registration__link {
	font-size: var(--fs14);
	color: var(--text-secondary);
	font-weight: var(--fw600);
	text-decoration: underline;
	text-underline-position: from-font;
}

.registration__link:hover {
	color: var(--bg-brand-solid);
}

.registration__divider {
	position: relative;
	text-align: center;
	margin: 20px 0;
	font-size: var(--fs14);
	color: var(--text-tertiary);
	font-size: var(--fw500);
}

.registration__divider span {
	position: relative;
	background: var(--clr-bg-tertiary);
	padding: 0 8px;
	z-index: 2;
	font-size: var(--fs14);
}

.registration__divider::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 8px);
	height: 1px;
	background-color: var(--clr-alpha-black-10);
	z-index: 0;
}

.registration__social {
	display: flex;
	flex-direction: column;
	gap: var(--gap12);
}

.registration__social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap12);
	border: 1px solid var(--brdr-border-primary);
	padding: 10px 16px;
	border-radius: 6px;
	cursor: pointer;
	font-size: var(--fs16);
	font-weight: var(--fw600);
	color: var(--text-secondary);
	background: var(--clr-alpha-black-10);
}

.registration__social-btn:hover {
	outline: 3px solid var(--bg-brand-solid);
}

.registration__social-btn-icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	display: block;
}

.registration__social-btn--google {
}

.registration__social-btn--facebook {
}

/***--- REGISTRACE - ERROR ---***/

.registration__field--error {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap6);
}

.registration__field--error .registration__input {
	border: 1px solid var(--text-error-primary);
}

.registration__error {
	font-size: var(--fs14);
	color: var(--text-error-primary);
	font-weight: var(--fw400);
	margin: 0;
}

.registration__icon--error {
	position: absolute;
	top: 10px;
	right: 0;
}

.registration__terms {
	font-size: var(--fs14);
	color: var(--text-tertiary);
}

.registration__terms-label {
	display: flex;
	align-items: flex-start;
	gap: var(--gap8);
	line-height: 1.35;
}

.registration__terms-label span,
.registration__terms-label .registration__link {
	font-size: var(--fs14);
	line-height: 1.35;
}

.registration__terms-checkbox {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	accent-color: var(--bg-brand-solid);
}

.registration__status {
	display: none;
	font-size: var(--fs14);
	font-weight: var(--fw500);
	color: var(--text-secondary);
	text-align: center;
}

.registration__status.is-visible {
	display: block;
}

.registration__status.is-error {
	color: var(--text-error-primary);
}

.registration__status.is-success {
	color: var(--bg-brand-solid);
}

/*****----- PRIHLASENI ----*****/

.registration__forgot {
	text-align: center;
}

@media (max-height: 520px), (max-width: 900px) and (orientation: landscape) {
	.modal-overlay.modal-overlay--auth {
		align-items: flex-start;
		overflow-y: auto;
		padding: 12px 16px;
	}

	.modal-overlay--auth .modal {
		margin: 0 auto;
	}

	.modal-overlay--auth .registration {
		gap: var(--gap10);
		padding: 0 20px 20px 20px;
	}

	.modal-overlay--auth .registration__header {
		gap: var(--gap8);
		padding: 18px 16px 12px 16px;
	}

	.modal-overlay--auth .registration__logo {
		width: 48px;
	}

	.modal-overlay--auth .registration__form {
		gap: var(--gap10);
	}
}

/*****----- DIKY ZA KOMENTAR ----*****/

/* varianta pro komentář */
.registration--comment {
	position: relative;
}

.registration--comment::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: url("/sys_img/2025imgs/bg/ty-cmnt-bg.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.registration__text {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--gap16);
}

.registration__text p {
	font-size: var(--fs16);
	font-weight: var(--fw500);
	color: var(--text-primary);
}

.registration__text p:last-of-type {
	font-size: var(--fs14);
	font-weight: var(--fw400);
	color: var(--text-secondary);
}

.registration__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--gap16);
	font-weight: var(--fw600);
}

.registration__logo--delete {
	display: flex;
	align-items: center;
	justify-content: center;
}

.registration__logo--delete img {
	width: 52px;
	height: 52px;
	padding: 13px;
	border-radius: 50%;
	background: var(--clr-alpha-black-10);
}

.registration__button--login {
	color: var(--text-secondary);
	background: var(--clr-alpha-black-10);
}

.registration__button--delete {
	background: rgba(211, 68, 68, 0.9);
	color: var(--text-primary);
}

.registration__button--delete:hover {
	background: rgba(230, 82, 82, 0.95);
}

/*****----- SDILET HRU -----*****/

.registration--share {
	max-width: 588px;
	/* max-height: 360px; */
}

.share-wrapper {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px; /* mezera mezi boxy */
}

@media (max-width: 640px) {
	.share-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}

.share {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap12);
	padding: var(--pd16);
	background: var(--clr-alpha-black-10);
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.2s ease;
}
.share:hover {
	transform: translateY(-2px);
}
.share__icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}
.share__title {
	font-size: 14px;
	color: var(--text-secondary);
	font-weight: var(--fw400);
}

.share-link {
	display: flex;
	flex-direction: column;
	gap: var(--gap6);
}

.share-link__input-wrapper {
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

.share-link__label {
	font-size: var(--fs14);
	font-weight: var(--fw500);
	color: var(--text-secondary);
}

.share-link__input {
	position: relative;
	flex: 1;
	color: var(--text-secondary);
	font-weight: var(--fw400);
	background-color: var(--clr-aplha-white-50);
	border: 1px solid var(--brdr-border-primary);
	border-radius: 8px 0 0 8px;

	padding: 8px 32px 8px 12px;
}

.share-link__icon {
	position: absolute;
	top: 50%;
	right: 130px;
	transform: translateY(-50%);
}

.share-link__copy {
	display: flex;
	align-items: center;
	gap: var(--gap8);
	background-color: var(--clr-aplha-white-10);
	border: 1px solid var(--brdr-border-primary);
	border-radius: 0 8px 8px 0;
	color: var(--text-secondary);
	font-weight: var(--fw600);
	font-size: var(--fs14);
	padding: 10px 14px;
}

@media (max-width: 400px) {
	.share-link__input-wrapper {
		justify-content: center;
	}

	.share-link__input {
		border-radius: 8px 8px 0 0;
	}

	.share-link__icon {
		top: 8px;
		right: 8px;
		transform: translateY(0);
	}

	.share-link__copy {
		flex: 1;
		justify-content: center;
		border-radius: 0 0 8px 8px;
	}
}

/* DIKY ZA HODNOCENI */

.registration__header--circle {
	position: relative;
	overflow: hidden;
}

.registration__header--circle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -51%);
	background: url(/sys_img/2025imgs/bg/ty-cmnt-bg.svg);
	/* background-size: contain; */
	background-size: auto;
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	max-width: 429px;
	height: 100%;
	pointer-events: none;
}

/* QR */

.registration--qr {
	max-width: 280px;
}

.registration--qr .registration__header {
	padding: 32px 16px 0 16px;
}

.registration--qr::before {
	display: none;
}

.qr-code {
	position: relative;
	width: 137px;
	height: 137px;
	aspect-ratio: 1 / 1;
	align-self: center;
	margin: 0 auto;
}

.qr-code svg {
	display: block;
	width: 100%;
	height: 100%;
}

.registration__image {
	position: relative;
	text-align: center;
	/* outline: 2px solid #373A41;
    outline-offset: 8px;
    border-radius: 2px; */
}

.registration__image::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
	background: url("/sys_img/2025imgs/bg/qr-line_glow.png") no-repeat;
	background-size: contain;
	background-position: center center;
	width: 100%;
	height: 100%;
}

.registration--qr .registration__text {
	text-align: left;
}

/* MOJE OBLIBENE HRY */

.favorites__content {
	padding: 24px;
	background: var(--clr-alpha-black-10);
	border: 1px solid var(--brdr-skeumo-gradient);
	border-radius: var(--br16);
	height: max-content;
}

.favorites__list {
	display: flex;
	flex-direction: column;
	gap: var(--gap20);
}

.favorites__list .alert__box {
	max-height: 52px;
}

.favorites__image {
	display: flex;
	justify-content: center;
}

.favorites__image img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}