@import url("_fonts.css");
@import url("vars.css");


body,
p {
	font-family: var(--font-primary);
}

.title,
h1,
h2,
h3,
h4,
form,
button,
.btn,
label,
input,
li {
	font-family: var(--font-secondary);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
	/* Кіоск: забороняємо перетягування об'єктів (drag-and-drop), щоб клієнт
	   не міг "відірвати" картинку/посилання і витягнути Chromium у split-screen */
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

/* Картинки і посилання — найчастіші джерела native drag. Глушимо явно. */
img,
a,
picture,
svg,
.qr,
[draggable] {
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	pointer-events: auto;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	/* Без "гумового" відскоку та навігації жестом — теж шлях виходу з кіоску */
	overscroll-behavior: none;
	touch-action: manipulation;
	/* Кастомний курсор кіоску (бурштинова стрілка). Файл кладе власник у
	   static/img/cursor.png; цифри 4 2 — гаряча точка біля вістря. */
	cursor: url('/static/img/cursor.png') 3 1, default;
}

body {
	margin: 2.5vh 2.5vw;
	width: 95vw;
	height: 95vh;
	position: relative;
	background: var(--background-color);
	color: var(--text-color);
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
}

.icon {
	width: 1.3em;
	height: 1.3em;
	object-fit: cover;
	vertical-align: bottom;
}

img {
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

button,
input {
	all: unset;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	min-height: 100vh;
	z-index: 1;
}

.btn {
	display: inline-block;
	padding: var(--spacing-md) var(--spacing-lg);
	font-size: var(--font-size-xl);
	color: white;
	background-color: var(--primary-color);
	border: none;
	border-radius: var(--border-radius-md);
	cursor: pointer;
	transition: all 0.3s;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.btn:hover {
	background-color: var(--accent-color);
}

.btn:disabled {
	background-color: var(--text-color);
	/* Сірий фон */
	cursor: not-allowed;
	/* Зміна курсору */
	opacity: 0.6;
	/* Зменшена прозорість */
}

.btn:disabled:hover {
	background-color: var(--text-color);
	/* Сірий фон */
}

.btn-secondary {
	background-color: var(--background-color);
	color: var(--accent-color);
}

.btn-secondary:hover {
	background-color: var(--accent-color);
	color: var(--background-color);
}

.wrapper {
	background: #fff;
	padding: var(--spacing-lg);
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow-md);
	text-align: center;
	max-height: 100%;
	max-width: 100%;
	margin: auto;
}

h1 {
	margin-bottom: var(--spacing-md);
	font-size: var(--heading-h1);
}

h2 {
	font-size: var(--heading-h2);
}

h3 {
	font-size: var(--heading-h3);
}

h4 {
	font-size: var(--heading-h4);
}

p,
label,
li {
	font-size: var(--font-size-sm);
}

.decor-branch {
	position: fixed;
	overflow: hidden;
	width: 100vw;
	height: auto;
	z-index: -1;
	pointer-events: none;
}

.strip-wrapper {
	display: flex;
	width: 200%;
	/* вдвічі ширше для 2х треків */
	animation: scroll-left 20s linear infinite;
}

.strip-track {
	display: flex;
	width: 100%;
}

.strip-track:nth-child(2) {
	margin-left: -65px;
	/* зсув для другого треку */
}

.strip-track img {
	margin-left: -8px;
	width: 25vw;
	/* адаптивно, щоб вся смуга була шириною 100vw */
	height: auto;
}

@keyframes scroll-left {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

.decor-branch_1 {
	opacity: 0.6;
	top: 40%;
	left: -35%;
	transform: skew(-25deg) rotate(45deg);
}

.decor-branch_2 {
	opacity: 0.5;
	top: 15%;
	right: -15%;
	transform: skew(5deg) rotate(85deg);
}

.decor-branch_3 {
	opacity: 0.9;
	top: 8%;
	left: -3%;
	transform: skew(-5deg) rotate(-10deg);
}

.decor-branch_4 {
	opacity: 0.8;
	bottom: 80%;
	right: 0%;
	transform: skew(-5deg) rotate(-85deg);
}

.decor-branch_5 {
	opacity: 0.7;
	top: 70%;
	left: 37%;
	transform: skew(3deg) rotate(-79deg);
}

.decor-branch_6 {
	opacity: 0.9;
	bottom: 10%;
	left: 0%;
	transform: rotate(170deg);
}


.glass {
	background: var(--glass-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: var(--border-radius-md);
	border: 1px solid var(--border-color);
	padding: var(--spacing-lg);
	box-shadow: var(--shadow-md);
}

.glass2 {
	background: var(--glass-bg2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: var(--border-radius-md);
	border: 1px solid var(--border-color);
	padding: var(--spacing-lg);
	box-shadow: var(--shadow-md);
}

.absolute {
	position: absolute;
}

.moved-up {
	transform: translateY(-100px);
}

.hidden {
	transform: translateY(-150px);
	opacity: 0 !important;
}

.modal {
	display: flex;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-sm);
	border-radius: var(--border-radius-md);
	background-color: var(--background-color);
	transition: all 0.5s ease-in-out;
}

.modal.hidden {
	z-index: -1;
}

.modal-content {
	text-align: center;
	max-width: 90vw;
}

.modal-buttons {
	display: inline-flex;
	gap: 1rem;
	margin-bottom: var(--spacing-sm);

	.btn {
		padding: 3rem 4rem;
		text-transform: uppercase;
	}
}

.modal-title {
	margin-bottom: var(--spacing-sm);
}

.modal-subtitle {
	font-size: var(--font-size-md);
}

.btn-no,
.btn-yes {
	margin-top: var(--spacing-sm);
}

.btn-no {
	background-color: rgb(199, 52, 52);
}

.btn-yes {
	background-color: rgb(0, 165, 0);
}

.btn-no:hover {
	background-color: rgb(132, 35, 35);
}

.btn-yes:hover {
	background-color: rgb(0, 93, 0);
}

.loader {
	width: 50px;
	aspect-ratio: 1;
	display: grid;
	color: var(--primary-color);
	background: radial-gradient(farthest-side, currentColor calc(100% - 6px), #0000 calc(100% - 5px) 0);
	-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 13px), #000 calc(100% - 12px));
	border-radius: 50%;
	animation: l19 2s infinite linear;
}

.loader::before,
.loader::after {
	content: "";
	grid-area: 1/1;
	background:
		linear-gradient(currentColor 0 0) center,
		linear-gradient(currentColor 0 0) center;
	background-size: 100% 10px, 10px 100%;
	background-repeat: no-repeat;
}

.loader::after {
	transform: rotate(45deg);
}

@keyframes l19 {
	100% {
		transform: rotate(1turn)
	}
}

.goBack {
	position: fixed;
	left: 10%;
	top: 10%;
	max-width: 25vw;
	font-weight: 600;
	font-size: var(--font-size-md);
	padding: 2rem;
	color: var(--text-color);
	z-index: 2;
}

.goBack__one-step {
	top: auto;
	bottom: 10%;
	background-color: var(--background-color);
	color: var(--accent-color);
}

.waitBtn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.waitBtn>.loader {
	background: radial-gradient(farthest-side, var(--background-color) calc(100% - 6px), #0000 calc(100% - 5px) 0);
}

.waitBtn>.loader::before,
.waitBtn>.loader::after {
	content: "";
	grid-area: 1/1;
	background:
		linear-gradient(var(--background-color) 0 0) center,
		linear-gradient(var(--background-color) 0 0) center;
	background-size: 100% 10px, 10px 100%;
	background-repeat: no-repeat;
}

.swiper {
	width: 100%;
	/* overflow: visible; */
	/* box-shadow: inset 0px 0px 30px 0px rgba(0,0,0,0.5); */
}

.swiper-wrapper {
	display: flex;
	align-items: center;
}

/* Стилі для кнопок навігації */
.swiper-button-prev,
.swiper-button-next {
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	color: var(--primary-color);

	&::after {

		font-size: var(--heading-h1);
		text-shadow: 0px 0px 10px var(--accent-color);
		filter: drop-shadow(2px 4px 6px black);
	}
}

.swiper-button-prev {
	height: 100%;
	top: 0;
	padding-right: 52%;
	left: var(--swiper-navigation-sides-offset, 40px);
	margin-left: -5%;

	&::after {
		transform: translateX(60px);
	}
}

.swiper-button-next {
	height: 100%;
	top: 0;
	padding-left: 52%;
	margin-right: -5%;
	right: var(--swiper-navigation-sides-offset, 40px);

	&::after {
		transform: translateX(-60px);
	}
}

/* Додай це в кінець photosession.css */

.swal2-container {
    z-index: 9999 !important; /* Поверх всього */
}

.swal2-popup {
    background: var(--background-color) !important;
    border-radius: var(--border-radius-md) !important;
    font-family: var(--font-secondary) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

.swal2-title {
    color: var(--text-color) !important;
    text-transform: uppercase;
}

.swal2-styled.swal2-confirm {
    padding: 1.5rem 3rem !important;
    font-size: var(--font-size-md) !important;
}

.swal2-styled.swal2-cancel {
    padding: 1.5rem 3rem !important;
    font-size: var(--font-size-md) !important;
}