/* reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
	--padding: 0.5rem;
	--tbGap: 0.5rem;
}
@media screen and (min-width: 48rem) {
	:root {	
		--padding: 1.5rem;
		--tbGap: 2rem;
	}
}

/*--- Obecné styly na responzivní zobrazení --- */
.d-none {display: none;}
.d-inline {display: inline;}
.d-block {display: block;}
@media screen and (min-width: 48rem) {
	.d-lg-none {display: none;}
	.d-lg-inline {display: inline;}
	.d-lg-block {display: block;}
}

body {margin: 0; overflow-x: hidden;
	display: grid;
	grid-template-rows: 0fr 1fr 0fr;
	height: 100vh;
}
@supports (height: 100dvh) {
	body {height: 100dvh;}
}



header {padding:var(--padding);}
header .logo {display:block; margin: 0 auto;}

.container {
	display: flex;
	flex-direction: column;
	height: 100%; /* musí být 100%, ne 100vh */
	padding-bottom: 6rem; /* cca výška footeru */
}
.editorContainer {
	display: grid;
	grid-template-rows: 0fr 1fr;
	align-items: center;
	height: 100vh; /* musí být 100vh, ne 100% */
	position: fixed; top:0; left:0; width:100%; bottom:0; z-index: 10; background-color:white;
	padding-bottom: 6rem; /* cca výška footeru */
}
.editorContainer footer {z-index:11;}
@media screen and (min-width: 48rem) {
	.editorContainer {padding-bottom: 10rem; /* cca výška footeru */ }
}
@supports (height: 100dvh) {
	.editorContainer {height: 100dvh;}
}

main {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

main, .editor {
	width: 100vw;
	/*padding:1rem 0 10rem 0;*/ /* dolní padding kvůli fixnímu footeru */
	padding:0;
}
/*.editor {min-height: 100vh;}*/
main.noFooter {padding-bottom:var(--padding);}

/* Toolbary v patičce */
footer {
	padding:var(--padding);
	text-align:center;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
footer {position: fixed; bottom:0; left:0; right:0;}
footer .toolbar {
	width: 100%;
	display: flex; 
	justify-content:space-evenly;
	align-items: center;
	gap: var(--tbGap);
}
footer .toolbar .tbGroup {display: flex; align-items: center;}
footer .toolbar .tbGroup input.zoom {flex-grow: 1; margin: 0; max-width: 25vw;}
footer.list {z-index:8; gap: calc(var(--tbGap)*2);}
footer.edit {justify-content: center; gap: var(--tbGap);}
footer.edit .toolbar {flex-grow: 0;}
footer.multiline {flex-direction: column; gap: calc(2*var(--tbGap));}
@media screen and (min-width: 48rem) {
	footer .toolbar {flex-grow: 1; justify-content: center;}	
	footer .toolbar .tbGroup {gap: calc(var(--tbGap)/4);}
	footer .button.addToCart {position: absolute; right: var(--padding);}
	footer.list {flex-direction: row; justify-content: center;}
	footer.multiline {gap: var(--tbGap);}
	footer.multiline .toolbar {flex-grow: 0; width: auto;}
}

.selection {margin:2rem; text-align:center;}
.selection button {max-width:75%; margin:0.5rem;}
.selection button img {width:40%;}
@media screen and (min-width: 48rem) {
	.selection {display: flex; gap: 1rem; justify-content:center;}
	.selection button {max-width:20rem;}
	.selection button img {width:100%;}
}

/* --- Slider/Grid ---*/
.has-slider {overflow: hidden;}
.slider {
	display: flex;
	align-items: center;
	/* width se nastaví v JS na pocet slidu x sirka slidu (což je 60%) */
	padding: 0.5rem 0; /* malý padding nahoře a dole je potřeba, aby bylo místo pro zobrazení stínu */
	height: 100%;
}
.slider-panel {width:100%; padding: 0 1rem;}
@media screen and (min-width: 48rem) {
	.slider {
		display: grid;
		grid-template-columns: repeat(auto-fill, 300px);
		gap: 2rem 4rem;
		justify-content: center;
	}
	.slider div.slider-panel {height:auto; padding:0;}
	.slider .icon {width: 1.125rem; height: 1.125rem;}
}


.photoTitleBar {display: block; text-align: center; position: relative; margin:0 auto 0.5rem auto; }
.productTitle {padding: 0.25rem; padding-top:0.5rem; text-align: center; flex-grow: 1;}
button.ico.btnDelete {
	position: absolute; right: -1rem; top: 0.75rem; z-index: 5;
	border-radius: 50%;
	background-color: #ddd;
	box-shadow: 1px 1px 3px rgb(0 0 0 / 40%);
}
.photoToolBar {display: none;}
@media screen and (min-width: 48rem) {
	.photoToolBar {display: flex; justify-content: space-between; align-items: center; margin:0.25rem auto 0 auto; }
}
.photoToolBar .countCtl {flex:none;}

/* Poměry stran tvaru, používá se na různé elementy podle potřeby, v náhledech i detailech */
.shapeAR1h {aspect-ratio:1/1;}
.shapeAR2h {aspect-ratio:3/2;}
.shapeAR2v {aspect-ratio:2/3;}


/* --- Náhled fotky --- */
/* ve slideru na mobilu: */
.slider .frameCont {margin:0 auto; cursor: pointer; text-align: center;}
/* šířka fotky a toolbarů nad a pod ní: */
.slider .shapeW1h {width: 80%;}
.slider .shapeW2h {width: 100%;}
.slider .shapeW2v {width: 66%;}

/* v gridu na desktopu nebo tabletu: */
@media screen and (min-width: 48rem) {
	/* v gridu mají fotky místo šířky nastavenou výšku: */
	.slider .frameCont.shapeW1h {width:auto; height:240px;}
	.slider .frameCont.shapeW2h {width:auto; height:200px;}
	.slider .frameCont.shapeW2v {width:auto; height:300px;}
}


/* --- Vizualizace fotky v rámečku --- */
.frame {
	width:auto; height:100%;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, .6);
	background-color:white;
	padding: 3.5%; margin:0 auto;
}
.frame.frame0 {padding: 0;}
.frame.frame1 {background-color:black;}
.frame.frame2 {background-color:white;}
.pspt {width:auto; height:100%; background-color:white; transition: 0.15s;}
/* šířka pasparty (padding) je vypočítán v JS a nastavena do atributu style*/
.foto {
	width:100%; height:100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover; /* změna, kvůli paspartám u obdélníků, funguje pro obr. šířku i na výšku */
	/*background-size: auto 100%;*/ /* tohle bude muset být pro obrázky na výšku opačně: 100% auto; */
}
.foto.filter1 {filter: contrast(140%) saturate(120%);}
.foto.filter2 {filter: grayscale(1) contrast(115%);}
.foto.filter3 {filter: grayscale(1) contrast(140%);}
.foto.filter4 {filter: invert(1) brightness(80%) sepia(1) invert(1) hue-rotate(165deg) saturate(110%) brightness(90%) contrast(140%);}


/* --- Elementy zobrazované přes fotku --- */
.uplOverlay {
	width: 100%; height: 100%; padding: 0.5rem;
	display: grid; place-items: center; align-content: space-evenly;
	background-color: rgb(255,255,255,0.7);
}
.uplOverlay img.loading {width: 40%;}

.dpiOverlay {
	position: absolute; top:auto; margin: 1rem 0 0 1rem; z-index: 5; 
	padding: 0.5rem; font-size: var(--fsButtonSmall);
	background-color: white; border-radius: 0.5rem;
}
.dpiOverlay.lowQual {background-color:#f4a300; color:white;}
.dpiOverlay.insuffQual {background-color:red; color:white;}
.editor .dpiOverlay .icon {width: 1.125rem; height: 1.125rem;}

/* --- Detail fotky v editoru --- */
.editorContainer h1 {margin:1rem 0 0 0;}
.editor .frameCont {margin:0 auto;}
/* velikost zobrazení - potřeba nastavit i ve fci getMaxWH v Cropperu */
.editor .shapeAR1h {max-width: 70vw; max-height: 40vh;}
.editor .shapeAR2h {max-width: 80vw; max-height: 40vh;}
.editor .shapeAR2v {max-width: 55vw; max-height: 40vh;}
@media screen and (min-width: 768px) {
	.editor .shapeAR1h {max-width: 70vw; max-height: 55vh;}
	.editor .shapeAR2h {max-width: 80vw; max-height: 60vh;}
	.editor .shapeAR2v {max-width: 75vw; max-height: 60vh;}
}


/* --- Tlačítko na nahrání nových fotek --- */
.uploaderBar {display: grid; place-items: center;}
.uplDropTarget {
	width:6rem; height:6rem; padding: 0;
	display: grid; place-items: center;
	font-size:2.6rem; font-weight: normal;
}
.uplDropTarget p {display:none;}
.uplDropTarget .icon {display:block; width:3rem; height:3rem;}
@media screen and (min-width: 48rem) {
	.uplDropTarget {width:12rem; height:12rem; margin:2rem 0 3rem 0;}
	.uplDropTarget p {display:block; font-size: var(--fsButtonSmall);}
	.uplDropTarget .icon {display:none;}
}
@media screen and (max-height: 680px) {
	.uplDropTarget {width: 3.5rem; height: 3.5rem;}
	.uplDropTarget .icon {width:1.5rem; height:1.5rem;}
}



/* --- Modální popup dialog --- */
.modal {position:fixed; left:0; right:0; top:0; bottom:0; z-index:30; background-color:rgba(0,0,0,0.5);}
.modal-dialog {
	position: relative;
	width: auto;
	pointer-events: none;
	display: flex;
	align-items: center;
	max-width: 90%;
	margin: 2rem auto;
	min-height: calc(100% - 4rem);
}
.modal-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	background-clip: padding-box;
	border-radius: 0.5rem;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, .6);
}
.modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 1rem 1rem;
}
.modal-title {margin: 0; font-size: 1.5rem; font-weight: normal;}
.modal-body {
	position: relative;
	flex: 1 1 auto;
	padding: 1rem;
	text-align:center;
	line-height: 1.5;
}
.modal-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center; gap: 1rem;
	padding: 0.75rem;
}
@media screen and (min-width: 48rem) {
	.modal-dialog {max-width: 36rem;}
}

/* --- Úprava stylů pro Croppie --- */
.croppie-container .cr-viewport {border-style:none; box-shadow: none;}
.croppie-container .cr-slider-wrap {display:none;} /* skrytí zoomu v croppie */
#cropperModal .pspt {transition: none;} /* v cropperu passpartu neanimujeme */



/* --- Instrukce na otočení mobilu na výšku --- */
.rotateWarning {
	display: none;
	align-content: center;
	justify-items: center;
	position: fixed; top:0; left:0; width:100%; bottom:0; z-index: 100; background-color:white;
}
.rotateWarning p {text-align: center; margin:1rem;}
.rotateWarning .icon { font-size: 2rem; }
@media screen and (max-height: 500px) and (orientation: landscape) {
	.rotateWarning {display: grid;}
}