/* Wappie – sekcie e-shop, napojenia a interaktívna ukážka dopytu */

/* e-shop a napojenia */
.wp_eshop .chooseourapp_head h2 { max-width: 70rem; }
.wp_eshop .chooseourapp_head p,
.wp_napojenia .chooseourapp_head p,
.wp_demo_wrapper .chooseourapp_head p { max-width: 72rem; }
.wp_demo_wrapper .chooseourapp_head h2 { max-width: 72rem; }
.wp_napojenia { background: #f7f9fd; }
.wp_api {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin-top: 2rem;
}
.wp_api > div {
	background: #fff;
	border-radius: 1.4rem;
	padding: 2.4rem 2.2rem;
	box-shadow: .4rem 1.2rem 3rem rgba(215, 216, 216, .25);
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.wp_api i { font-size: 2.6rem; color: #2563ff; margin-bottom: .8rem; }
.wp_api strong { color: #242f51; font-size: 1.8rem; font-weight: 600; }
.wp_api span { font-size: 1.4rem; line-height: 1.5; }
.wp_api .wp_api_vlastne { background: #09142e; }
.wp_api .wp_api_vlastne strong { color: #fff; }
.wp_api .wp_api_vlastne span { color: #c0c3c8; }
.wp_api .wp_api_vlastne i { color: #feaa25; }

/* interaktivna ukazka dopytu */
.wd_stage {
	position: relative;
	height: 100%;
	min-height: 46rem;
	border-radius: 2.4rem;
	background: linear-gradient(145deg, #0b1733 0%, #16306e 100%);
	overflow: hidden;
	font-size: 1.4rem;
}
.wd_scene {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 3em 3em 6.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s, visibility .5s;
}
.wd_scene.is-active { opacity: 1; visibility: visible; }
.wd_win {
	width: 100%;
	max-width: 40em;
	background: #fff;
	border-radius: 1.2em;
	box-shadow: 0 2em 4em rgba(0, 0, 0, .3);
	overflow: hidden;
	transform: translateY(1em);
	transition: transform .6s;
}
.wd_scene.is-active .wd_win { transform: none; }
.wd_bar {
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .8em 1.2em;
	background: #eef1f7;
}
.wd_bar i { width: .75em; height: .75em; border-radius: 50%; background: #ff6b6b; }
.wd_bar i:nth-child(2) { background: #ffc24b; }
.wd_bar i:nth-child(3) { background: #35c56c; }
.wd_bar span { margin-left: .8em; font-size: .85em; color: #8a90a2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd_telo { position: relative; padding: 1.6em; color: #242f51; }
.wd_in { opacity: 0; }
.wd_scene.is-active .wd_in { animation: wd_in .5s ease-out var(--d, 0s) forwards; }
@keyframes wd_in { from { opacity: 0; transform: translateY(.8em); } to { opacity: 1; transform: none; } }
.wd_chip {
	display: inline-block;
	padding: .35em 1em;
	border-radius: 2em;
	font-size: .85em;
	font-weight: 600;
	font-style: normal;
	white-space: nowrap;
}
.wd_modry { background: #e9efff; color: #2563ff; }
.wd_cerveny { background: #ffe9ec; color: #e42034; }
.wd_oranz { background: #fff3dc; color: #a86a00; }
.wd_zeleny { background: #e4ffee; color: #258447; }
.wd_tlacidlo {
	margin-top: 1.2em;
	padding: .8em 1.6em;
	border-radius: 2em;
	background: #2563ff;
	color: #fff;
	font-weight: 600;
	text-align: center;
}
.wd_scene.is-active .wd_klik { animation: wd_stlac .4s ease-in-out 3.5s; }
.wd_scene.is-active .wd_klik2 { animation-delay: 2s; }
@keyframes wd_stlac { 50% { transform: scale(.93); background: #1747c9; } }
.wd_ok { margin-top: .8em; color: #258447; font-weight: 600; text-align: center; }

/* scena 1 – katalog */
.wd_katalog { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.6em; align-items: center; }
.wd_produkt { background: #eef1f7; border-radius: 1em; height: 14em; display: flex; align-items: center; justify-content: center; }
.wd_regal {
	width: 5em;
	height: 9em;
	border: .3em solid #2563ff;
	border-radius: .4em;
	background: #c9d7ff;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	padding: .3em;
}
.wd_regal b { height: 1.6em; background: #fff; border-radius: .2em; }
.wd_scene.is-active .wd_regal { animation: wd_sirka 1.4s ease-in-out .5s forwards; }
@keyframes wd_sirka { to { width: 9em; } }
.wd_nastavenia > strong { display: block; font-size: 1.15em; margin-bottom: .8em; }
.wd_posuv { display: grid; grid-template-columns: 3.6em 1fr 5em; align-items: center; gap: .6em; font-size: .85em; margin-bottom: .7em; color: #8a90a2; }
.wd_posuv b { color: #242f51; text-align: right; font-weight: 600; }
.wd_posuv em { position: relative; height: .35em; border-radius: 1em; background: #e6eaf2; }
.wd_posuv em i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 1em; background: #2563ff; }
.wd_posuv em i::after { content: ""; position: absolute; right: -.5em; top: -.4em; width: 1.1em; height: 1.1em; border-radius: 50%; background: #fff; border: .2em solid #2563ff; box-sizing: border-box; }
.wd_p1 { width: 25%; }
.wd_p2 { width: 45%; }
.wd_p3 { width: 55%; }
.wd_scene.is-active .wd_p1 { animation: wd_p1 1.4s ease-in-out .5s forwards; }
@keyframes wd_p1 { to { width: 75%; } }
.wd_kurzor {
	position: absolute;
	width: 1.6em;
	height: 1.6em;
	opacity: 0;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 2l15 9-7 1.5L8.5 20z%22 fill=%22%23242f51%22 stroke=%22%23fff%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
	pointer-events: none;
}
.wd_kurzor1 { left: 30%; top: 30%; }
.wd_scene.is-active .wd_kurzor1 { animation: wd_k1 4.2s ease-in-out forwards; }
@keyframes wd_k1 { 0% { opacity: 0; left: 30%; top: 30%; } 10% { opacity: 1; } 35% { left: 62%; top: 30%; } 55% { left: 62%; top: 30%; } 80%, 95% { left: 72%; top: 80%; opacity: 1; } 100% { left: 72%; top: 80%; opacity: 0; } }
.wd_kurzor2 { left: 20%; top: 20%; }
.wd_scene.is-active .wd_kurzor2 { animation: wd_k2 2.8s ease-in-out forwards; }
@keyframes wd_k2 { 0% { opacity: 0; left: 20%; top: 20%; } 15% { opacity: 1; } 70%, 90% { left: 55%; top: 60%; opacity: 1; } 100% { left: 55%; top: 60%; opacity: 0; } }

/* scena 2 – zoznam dopytov */
.wd_riadok { display: flex; align-items: center; gap: 1em; padding: .9em .4em; border-bottom: .1em solid #e6eaf2; }
.wd_riadok strong { flex: 1; min-width: 0; font-weight: 500; font-size: .92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd_riadok.wd_novy { background: #f1f5ff; border-radius: .8em; border-bottom-color: transparent; padding: .9em 1em; }
.wd_riadok.wd_novy strong { font-weight: 700; }
.wd_bodka { width: .8em; min-width: .8em; height: .8em; border-radius: 50%; background: #e42034; }
.wd_bodka.wd_seda { background: #cfd5e3; }
.wd_toast {
	position: absolute;
	right: 2em;
	top: 2em;
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 1em 1.4em;
	border-radius: 1em;
	background: #fff;
	box-shadow: 0 1em 3em rgba(0, 0, 0, .35);
	color: #242f51;
	z-index: 2;
}
.wd_toast > span { width: 2.6em; height: 2.6em; border-radius: 50%; background: #feaa25; color: #fff; display: flex; align-items: center; justify-content: center; }
.wd_toast strong, .wd_toast small { display: block; }
.wd_toast small { color: #8a90a2; font-size: .85em; }

/* sceny 3 a 6 – kontroly */
.wd_kontrola { display: flex; align-items: center; gap: 1.1em; padding: .65em 0; }
.wd_kontrola > i { width: 2.4em; height: 2.4em; min-width: 2.4em; border-radius: 50%; background: #e9efff; color: #2563ff; display: flex; align-items: center; justify-content: center; font-size: .95em; }
.wd_kontrola.wd_k_zelena > i, .wd_kontrola > i.fa-check { background: #e4ffee; color: #258447; }
.wd_kontrola strong, .wd_kontrola small { display: block; }
.wd_kontrola strong { font-size: .98em; }
.wd_kontrola small { color: #8a90a2; font-size: .85em; }

/* scena 4 – ponuka */
.wd_polozka { display: grid; grid-template-columns: 1fr 5em 6.5em; gap: .8em; padding: .7em 0; border-bottom: .1em solid #e6eaf2; font-size: .92em; }
.wd_polozka span:last-child { text-align: right; font-weight: 600; }
.wd_polozka.wd_hlava { color: #8a90a2; font-size: .8em; }
.wd_polozka.wd_hlava span:last-child { font-weight: 400; }
.wd_polozka.wd_zlava { color: #258447; }
.wd_spolu { display: flex; justify-content: space-between; align-items: baseline; padding: 1em 0 .8em; }
.wd_spolu strong { font-size: 1.6em; font-weight: 700; }

/* scena 5 – odoslanie */
.wd_odoslanie { display: flex; flex-direction: column; align-items: center; padding: 2.4em 1.6em; }
.wd_pdf { text-align: center; }
.wd_pdf span { font-size: 3.4em; color: #e42034; display: block; margin-bottom: .2em; }
.wd_pdf strong, .wd_pdf small { display: block; }
.wd_pdf small { color: #8a90a2; }
.wd_odoslanie .wd_tlacidlo { min-width: 16em; }
.wd_odoslanie .wd_chip { margin-top: .8em; }
.wd_obalka {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3.6em;
	height: 3.6em;
	margin: -1.8em 0 0 -1.8em;
	border-radius: 50%;
	background: #feaa25;
	color: #fff;
	font-size: 1.3em;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	z-index: 3;
}
.wd_scene.is-active .wd_obalka { animation: wd_let 1.3s ease-in 2.3s forwards; }
@keyframes wd_let { 0% { opacity: 0; transform: scale(.5); } 20% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translate(22em, -16em) scale(.6); } }

/* ovladanie a kroky */
.wd_ovladanie { position: absolute; left: 2em; right: 2em; bottom: 1.6em; display: flex; align-items: center; gap: 1.2em; z-index: 4; }
.wd_hrat { width: 3.4em; height: 3.4em; border-radius: 50%; border: none; background: #fff; color: #2563ff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wd_hrat:focus { outline: none; box-shadow: 0 0 0 .3em rgba(255, 255, 255, .3); }
.wd_popis { color: #aab4d0; font-size: .9em; }
.wd_kroky { display: flex; flex-direction: column; gap: 1rem; height: 100%; justify-content: center; }
.wd_krok {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.6rem;
	width: 100%;
	padding: 1.4rem 1.8rem;
	border: .1rem solid #e6eaf2;
	border-radius: 1.4rem;
	background: #fff;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	transition: .25s;
	font-family: inherit;
}
.wd_krok:focus { outline: none; }
.wd_krok:hover { border-color: #2563ff; }
.wd_cislo { width: 3.6rem; min-width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #f4f4ff; color: #2563ff; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: .25s; }
.wd_txt strong { display: block; color: #242f51; font-size: 1.6rem; font-weight: 600; line-height: 1.3; }
.wd_txt small { display: none; color: #616368; font-size: 1.4rem; line-height: 1.45; margin-top: .4rem; }
.wd_krok.is-active { border-color: #2563ff; box-shadow: 0 1rem 3rem rgba(37, 99, 255, .14); }
.wd_krok.is-active .wd_cislo { background: #2563ff; color: #fff; }
.wd_krok.is-active .wd_txt small { display: block; }
.wd_krok.is-done .wd_cislo { background: #e4ffee; color: #258447; }
.wd_priebeh { position: absolute; left: 0; right: 0; bottom: 0; height: .3rem; }
.wd_priebeh i { display: block; height: 100%; width: 0; background: #2563ff; }
.wp_demo.is-playing .wd_krok.is-active .wd_priebeh i { animation: wd_priebeh var(--trvanie, 5.2s) linear forwards; }
@keyframes wd_priebeh { to { width: 100%; } }

@media (max-width: 991.98px) {
	.wp_api { grid-template-columns: repeat(2, 1fr); }
	.wd_stage { height: 46rem; }
}
@media (max-width: 575.98px) {
	.wp_api { gap: 1.2rem; }
	.wp_api > div { padding: 1.8rem 1.5rem; }
	.wd_stage { font-size: 1.15rem; height: 42rem; min-height: 0; border-radius: 1.8rem; }
	.wd_scene { padding: 1.6em 1.4em 6em; }
	.wd_txt small { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
	.wd_scene.is-active .wd_in { animation-duration: .01s; }
}