/*
===============================================================
Plik: popups.css
===============================================================
*/
/*		
										#B10A23;  ciemnoczerwony kolor czcionki		
												#202020;  bardzo ciemnoszary				*/
												
/* ------------------------------------ ZWROTKA popup_zwrotka.js ----------------------------------------------------------------------------------- */
.PopupZwrotkaKontenerASP_JS {
    visibility: hidden;
    min-width: 550px;
    width: auto;
    background-color: #151515;
    color: white;
    text-align: center;
    border-radius: 6px;
    border: 2px solid red;
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 20px;
    padding-bottom: 20px;
    position: fixed;
    z-index: 1;
    bottom: 60px;
    font-size: 17px;
    font-weight: bold;
    left: 50%;
    transform: translateX(-50%);
    transition: visibility 0.7s ease;
}

/* Animacje fadein i fadeout - 0.7s czas trwania dla każdej */
.PopupZwrotkaKontenerASP_JS.PopupZwrotkaKontenerWidocznyASP_JS {
    z-index: 9999 !important;
    visibility: visible;
    -webkit-animation: fadein 0.7s, fadeout 0.7s 7s;
    animation: fadein 0.7s, fadeout 0.7s 7s;
}

@-webkit-keyframes fadein {
    from { bottom: 0; opacity: 0; }
    to { bottom: 60px; opacity: 1; }
}

@keyframes fadein {
    from { bottom: 0; opacity: 0; }
    to { bottom: 60px; opacity: 1; }
}

@-webkit-keyframes fadeout {
    from { bottom: 60px; opacity: 1; }
    to { bottom: 0; opacity: 0; }
}

@keyframes fadeout {
    from { bottom: 60px; opacity: 1; }
    to { bottom: 0; opacity: 0; }
}

/* === TREŚĆ (wyśrodkowana + odstęp od ikony) === */
.PopupZwrotkaTrescJS,
.PopupZwrotkaTrescASP {
    display: block;
    justify-content: center;
    align-items: center;
    padding-right: 40px; 		/* odstęp od prawej – dla ikony */
    word-break: break-word;
	border: 0px solid blue;
}

/* === KONTENER DLA IKONY === */
.PopupZwrotkaIkonaZamknij {
    position: absolute;
    top: 0;
    right: 0;
}

/* === IKONA ZAMYKANIA === */
.imgPopupZwrotkaIkonaZamknij {
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
    padding: 5px;
    margin-left: 0px;
    margin-bottom: 0px;
    border-left: 0px solid red;
    border-bottom: 0px solid red;
    border-bottom-left-radius: 4px;
    cursor: pointer;
    background: transparent;
    box-sizing: content-box;
}

.imgPopupZwrotkaIkonaZamknij:hover {
    background-color: #202020;
}

/* ------------------------------------- ZWROTKA (koniec)  ----------------------------------------------------------------------------------------- */

/* ----------------------------------- PYTANIA? Tak / Nie  ----------------------------------------------------------------------------------------- */
.PopupPytanieTak_Nie
{
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -30%);
	background: #151515;
	border: 1px solid grey;
	border-radius: 4px;
	padding: 30px;
	z-index: 9999;
	font-size: 16px;
	line-height: 1.4;
	color: red;
}
.PopupPrzyciemnienieTla
{
	display: none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	z-index:999;
}
	
/* ----------------------------------------------- GALERIA POPUP WYŚWIETL – SLIDE EFFECT --------------------------------------------------------------------------- */

.popupGaleriaKontener { 
	display: none;                            /* ⬅️ Ukryty na start, pokazywany przez JS */
	position: fixed;
	top: 50%;                                 /* ⬅️ Wycentrowanie pionowe */
	left: 50%;                                /* ⬅️ Wycentrowanie poziome */
	transform: translate(-50%, -50%);         /* ⬅️ Precyzyjne centrowanie popupu */
	width: 600px;                             /* Stała szerokość całego popupu */
	background: #151515;                      /* ciemne tło zamiast białego */
	border: 2px solid #404040;                /* ⬅️ border kontenera */
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	z-index: 10000;
}

.popupGaleriaNaglowek {
	cursor: move;                             /* umożliwia dragowanie */
	background: #151515;
	color: #454545;                           
	padding: 10px;
	position: relative;                       /* potrzebne dla absolutnie pozycjonowanego krzyżyka / czachy */
	width: 100%;
	box-sizing: border-box;                   /* ⬅️ uwzględnij padding w szerokości */
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.popupGaleriaNaglowekMiniMiniaturkaFolderu {
	width: 14px;
	height: 19px;
	object-fit: cover;
	border-radius: 2px;
	margin-left: 5px;
	margin-right: 15px;
	vertical-align: middle;	
}
.popupGaleriaNaglowekNazwaFolderu {
	color: #999;
}

.popupGaleriaContent {
	background-color: #252525;
	margin: 0 auto;                           /* ⬅️ wycentrowane */
	padding: 5px;
	height: 750px;                            /* ⬅️ stała wysokość */
	text-align: center;
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 0px solid green;                 
	border-radius: 0; 
	overflow: hidden;                         /* ⬅️ potrzebne do slide effect */
}

.popupGaleriaDivObrazek {
	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: relative;                       /* ⬅️ potrzebne do absolutnego pozycjonowania */
}

.popupGaleriaDivObrazek img.popupGaleriaImgObraz {
	margin: 0;
	padding: 0;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	border-radius: 4px;
	border: 1px solid red;
	object-fit: contain;
	position: absolute;                       /* ⬅️ Aby na siebie nachodziły */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease;          /* ⬅️ animacja slide */
}

/* KLASA: karta wjeżdżająca od prawej */
.popupSlideInRight {
	transform: translate(calc(100% + 50%), -50%);
	animation: slideInRight 0.3s linear forwards;
}

/* KLASA: karta wjeżdżająca od lewej */
.popupSlideInLeft {
	transform: translate(calc(-100% - 50%), -50%);
	animation: slideInLeft 0.3s linear forwards;
}

/* KLASA: karta zjeżdżająca w lewo */

.popupSlideOutLeft {
	transform: translate(-50%, -50%);
	animation: slideOutLeft 0.3s linear forwards;
}


/* KLASA: karta zjeżdżająca w prawo */
.popupSlideOutRight {
	transform: translate(-50%, -50%);
	animation: slideOutRight 0.3s linear forwards;
}

/* Definicje keyframes */
@keyframes slideInRight {
	from { transform: translate(calc(100% + 50%), -50%); }
	to   { transform: translate(-50%, -50%); }
}
@keyframes slideInLeft {
	from { transform: translate(calc(-100% - 50%), -50%); }
	to   { transform: translate(-50%, -50%); }
}
@keyframes slideOutLeft {
	from { transform: translate(-50%, -50%); }
	to   { transform: translate(calc(-100% - 50%), -50%); }
}
@keyframes slideOutRight {
	from { transform: translate(-50%, -50%); }
	to   { transform: translate(calc(100% + 50%), -50%); }
}

.popupGaleriaNawigacja {
	width: 100%;                              /* ⬅️ pełna szerokość kontenera */
	height: 55px;                             /* ⬅️ stała wysokość stopki */
	box-sizing: border-box;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	display: flex;                            /* ⬅️ włączenie flexboxa */
	justify-content: center;                  /* ⬅️ przyciski wyśrodkowane poziomo */
	align-items: center;                      /* ⬅️ przyciski wyśrodkowane w pionie */
	border-top: 1px solid #454545;            /* ⬅️ cienki górny border */
}

.popupGaleriaNawigacja button {
	height: 30px;                            /* ⬅️ stała wysokość przycisku */
	line-height: 30px;                       /* ⬅️ linia tekstu wyrównana do wysokości */
	padding: 0 15px;                        /* ⬅️ tylko padding poziomy */
	margin-left: 20px;                      /* ⬅️ odstęp między przyciskami */
	margin-right: 20px;
	cursor: pointer;
	box-sizing: border-box;
	vertical-align: middle;
}

.imgStrzalkaGaleriaLewo,
.imgStrzalkaGaleriaPrawo {
	width: 22px;
	height: auto;
	cursor: pointer;
	padding: 4px;
	transition: transform 0.2s ease;
}

/* Powiekszenie strzalek już po najechaniu na button. Nie tylko po najechaniu na strzałki */
.popupGaleriaNawigacja button:hover .imgStrzalkaGaleriaLewo,
.popupGaleriaNawigacja button:hover .imgStrzalkaGaleriaPrawo {
	transform: scale(1.4);
}

/* Krzyżyk albo Czacha */
.popupZamknij {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 24px;
	font-weight: bold;
	color: #B10A23;
	cursor: pointer;
}
/* ----------------------------------------koniec GALERIA POPUP WYŚWIETL – SLIDE EFFECT ----------------------------------------------------------------------------- */

/* 
-------------------------------------------------- GALERIA POPUP KREATOR ----------------------------------------------------------------------------
*/
/* ==================== GALERIA – OBRAZKI IMG (zgrupowane cechy wspólne) ==================== */

.popupGaleriaKreatorMiniaturaImg,
.popupGaleriaKreatorPodsumowanieMiniaturka {
	width: auto;
	max-width: 100%;
	border-radius: 4px;
	display: block;
}

/* Miniaturka obrazu w podglądzie galerii – proporcje oryginalne, max 210px szerokości */
.popupGaleriaKreatorMiniaturaImg {
	max-width: 210px;
	width: 100%;                        /* elastyczna, ale nie większa niż 210px */
	height: auto;                       /* proporcje oryginalne */
	margin-left: auto;
	margin-right: auto;
	border: 0px solid transparent;
	cursor: pointer;
	transition: border 0.2s ease, transform 0.2s ease;
	transform-origin: center center;
	position: relative;
	z-index: 0;
}

/* Hover – podświetlenie + powiększenie */
/* NIE zmieniamy borderu na hover, żeby nie znikał */
.popupGaleriaKreatorMiniaturaImg:hover {
	/* border: 2px solid #B10A23; */ /* można odkomentować, jeśli potrzeba border też na hover */
	transform: scale(1.15);
	z-index: 50;                         /* mniejszy niż wybrana miniaturka */
}

/* Wybrana miniaturka w podglądzie galerii */
.popupGaleriaKreatorMiniaturaWybrana {
	border: 2px solid #B10A23;
	opacity: 0.8;
	position: relative;   /* aby border był ponad obrazkiem */
	z-index: 100;        /* bardzo wysoki, aby border był nad skalowanym obrazem */
}

/* Miniaturka w podsumowaniu */
.popupGaleriaKreatorPodsumowanieMiniaturka {
	height: 280px;                   /* stała wysokość */
	border: 1px solid red;			 /* ma odziedziczyć border z kroku porzpedniego! */
	display: inline-block;           /* by zachować margines i nie łamać układu */
	margin-top: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}

/* KONIEC styli dla obazkow */

/* GŁÓWNY KONTENER popupu kreatora galerii */
.popupGaleriaKreatorKontener {
	position: relative;
	height: 505px;
	width: 660px;
	display: none;
	position: fixed;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	background: #202020;               /* ciemny grafit tło */
	border: 2px solid #404040;        /* ciemnoszary border */
	padding: 0;
	z-index: 1000;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); /* mocniejszy cień podkreślający */
	border-radius: 8px;               /* delikatne zaokrąglenie */
}

/* Belka (NAGŁÓWEK) nagłówkowa popupu kreatora (zawartość: drag + krzyżyk) */
.popupGaleriaKreatorBelka {
	height: 40px;
	cursor: move;
	background: #151515;            
	color: gray;
	font-size: 14px;
	padding: 10px 0 10px 20px;  /* padding-left 20px zamiast margin */
	display: flex;
	position: relative;
	border-bottom: 2px solid #404040;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

/* Krzyżyk */
.popupGaleriaKreatorKrzyzyk {
	position: absolute;
	top: 7px;
	right: 15px;
	font-size: 26px;
	font-weight: bold;
	color: #B10A23;                  /* intensywny czerwony */
	cursor: pointer;
}

/* Obrazek krzyżyka (zamykania) w popupie */
.popupGaleriaKreatorKrzyzykImg {
	width: 25px;
	height: 25px;
	object-fit: contain;
	display: block;
	cursor: pointer;
}

/* STOPKA z przyciskami nawigacji */
.popupGaleriaKreatorStopka {
	width: 100%;
	height: 60px;
	top: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0 0px;
	box-sizing: border-box;
	background: #151515;
	border-top: 2px solid #404040;
	border-radius: 0 0 6px 6px;
	display: flex;
	align-items: center;
	justify-content: space-between; /* lewePrzyciski po lewej, prawyPrzyciskDalej po prawej */
	left: 0px;
	right: 0px;
}

/* Kontener przycisków po lewej stronie: Anuluj i Wstecz */
.lewePrzyciski {
	display: flex;
	gap: 10px;
	margin-left: 35px; /* Odstęp od lewej krawędzi stopki */
}

/* Pojedynczy przycisk po prawej stronie: Dalej */
.prawyPrzyciskDalej {
	margin-right: 35px; /*domyślnie jest wyrównany na prawo przez flex */
}

/* GŁÓWNA ŚRODKOWA zawartość popupu kreatora */
.popupGaleriaKreatorSrodek {
	width: 100%;                          /* pełna szerokość w kontenerze */
	max-height: 400px;
	padding: 20px;
	margin-top: 0px;                      /* przyleganie do belki */
	background-color: #252525;
	color: grey;
	border: 0px solid BLUE;
	border-radius: 0;                     
	box-sizing: border-box;
}

/* Krok 1b – kontener z listą akapitów */
.popupGaleriaKreatorAkapityKontener {
	height: 360px;
	display: block;
	background-color: #252525;       /* spójne ciemne tło */
	border-radius: 6px;
	border: 1px solid #404040;
	border: 0px solid green;		/* diagnostycznie */
}

/* Krok 1b – statyczny tekst nad listą akapitów */
/* ===== ZGRUPOWANE klasy z końcówką Statyczne ===== */
.popupGaleriaKreatorAkapityStatyczne,
.popupGaleriaKreatorFolderyStatyczne,
.popupGaleriaKreatorMiniaturyStatyczne,
.popupGaleriaKreatorPodsumowanieStatyczne {
	height: 45px;
	width: 96%; /* zamiast 100%, by margin: 0 auto zadziałało */
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto; /* WYŚRODKOWANIE POZIOME */
	color: grey;
	font-weight: bold;
	border: 1px solid black;
	background-color: transparent;
	box-sizing: border-box;
	border-radius: 4px;
}

/* Krok 1b – statyczny tekst nad listą akapitów */
.popupGaleriaKreatorAkapityStatyczne {
	padding: 0 10px;
}

/* Krok 2a – statyczny tekst nad listą folderów */
.popupGaleriaKreatorFolderyStatyczne {
	padding: 0 10px;
}

/* Krok 2a – statyczny tekst nad miniaturami */
.popupGaleriaKreatorMiniaturyStatyczne {
	padding: 0 10px;
}

/* ==================== KROK 1b – informacja nad listą akapitów ==================== */
.popupGaleriaKreatorAkapityInfo {
	margin-bottom: 5px;
}

/* Krok 1b – lista przewijana <ul> */
.popupGaleriaKreatorAkapityLista {
	height: 305px;
	overflow-y: auto;
	border: 1px solid black;
	padding: 5px;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	list-style: none;
	background-color: #303030;
	border-radius: 4px;
	color: grey;
}

/* Element listy akapitów (li) */
.popupGaleriaKreatorAkapitElement {
	cursor: pointer;
	padding: 5px;
	border: 1px solid transparent;
	margin-bottom: 3px;
	color: #ddd;
	background-color: #303030;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}
.popupGaleriaKreatorAkapitElement:hover {
	background-color: gray;
}

/* Element wybrany */
.popupGaleriaKreatorAkapitWybrany {
	border: 1px solid #010101;       
	background-color: #B10A23;       
	color: #fff;
	border-radius: 4px;
}

/* Połączenie klas: element akapitu, który jest wybrany (kliknięty) */
.popupGaleriaKreatorAkapitElement.popupGaleriaKreatorAkapitWybrany {
	background-color: #B10A23;
	border: 1px solid #010101;
	color: #fff;
}

/* Kolumnowy układ akapitu */
.popupGaleriaKreatorAkapitWiersz {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}

.popupGaleriaKreatorAkapitKolumnaIkona {
	width: 30px;
	flex-shrink: 0;
	text-align: center;
}

.popupGaleriaKreatorImgIkona {
	width: 20px;
	height: 20px;
}

.popupGaleriaKreatorAkapitKolumnaTytul {
	width: 380px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #ddd;
	text-align: left;
}

.popupGaleriaKreatorAkapitKolumnaUsun {
	width: 120px;
	border: 0px solid white;
	text-align: right;
}

.popupGaleriaKreatorUsunLink {
	/* zgodnie z Twoim życzeniem klasa pusta */
}

/* ==================== KROK 2a – WYBÓR FOLDERU ==================== */

.popupGaleriaKreatorFolderyKontener {
	height: 360px;
	display: flex;
	flex-direction: row;
	gap: 20px;
	background-color: #252525;
	border: 0px solid #404040;
	border-radius: 6px;
}

.popupGaleriaKreatorKolumnaLewa {
	flex: 1;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.popupGaleriaKreatorKolumnaPrawa {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.popupGaleriaKreatorFolderyInfo {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	color: grey;
	overflow: hidden;
	box-sizing: border-box;
}

.popupGaleriaKreatorFolderyLista {
	flex: 1;
	overflow-y: auto;
	border: 1px solid black;
	border-radius: 4px;
	background-color: #303030;
	padding: 12px;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	list-style: none;
	color: grey;
	box-sizing: border-box;
}

.popupGaleriaKreatorFolderElement {
	cursor: pointer;
	padding: 5px;
	margin-bottom: 3px;
	color: #ddd;
	background-color: #303030;
	border: 1px solid transparent;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.popupGaleriaKreatorFolderElement:hover {
	background-color: gray;
}

.popupGaleriaKreatorFolderElement.popupGaleriaKreatorFolderWybrany {
	background-color: #B10A23;
	color: #fff;
	border: 1px solid #010101;
	border-radius: 4px;
}

/* Dzięki temu po kliknięciu i na hover kolor pozostaje czerwony */
.popupGaleriaKreatorFolderElement.popupGaleriaKreatorFolderWybrany:hover {
	background-color: #B10A23;
	border-color: #010101;
	color: #fff;
}

/* ==================== Miniaturki – Krok 2a ==================== */
.popupGaleriaKreatorMiniaturyFolderu {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	row-gap: 30px;
	align-content: flex-start;
	overflow-y: auto;
	overflow-x: hidden;
	border: 1px solid black;
	border-radius: 4px;
	background-color: #303030;
	padding: 20px;
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 10px;	
	margin-bottom: 0px;
	box-sizing: border-box;
}

/* ==================== KROK 2b – WYBÓR MINIATURKI ==================== */
.popupGaleriaKreatorMiniaturyLista {
	max-height: 305px; /* ograniczenie wysokości dla scrolla */
	position: relative; /* zabezpieczenie pozycji */
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	row-gap: 30px;
	align-content: flex-start;
	overflow-y: auto;
	overflow-x: hidden;
	border: 1px solid black;
	border-radius: 4px;
	background-color: #303030;
	padding: 20px;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;	
	margin-bottom: 0px;
	box-sizing: border-box;
}

/* ==================== [3] PODSUMOWANIE ==================== */

.popupGaleriaKreatorPodsumowanieKontener {
	height: 330px;
	display: flex;
	flex-direction: row;
	gap: 20px;
	background-color: #252525;
	border-radius: 6px;
	border: 0px solid blue ; /* diagnostycznie */
}

/*
.popupGaleriaKreatorPodsumowanieStatyczne została już zgrupowana wyżej – bez zmian */

/* ===== Wspólne cechy Wybory + Obrazek ===== */
.popupGaleriaKreatorPodsumowanieWybory,
.popupGaleriaKreatorPodsumowanieObrazek {
	flex: 1;
	display: flex;
	width: 150px;
	max-height: 305px;
	border: 1px solid black;
	border-radius: 4px;
	background-color: #303030;
	padding: 15px;
	margin-top: 10px;
	margin-bottom: 15px; 
	margin-left: 10px;
	margin-right: 10px;
	box-sizing: border-box;
	overflow: hidden;
}
/* ===== KONIEC wspólnych cech ===== */

.popupGaleriaKreatorPodsumowanieWybory {
	flex-direction: column;
	color: #ccc;
	font-size: 14px;
	line-height: 1.5;
	overflow-y: auto;
	margin-right: 10px; /* odstęp między kolumnami */
}

.popupGaleriaKreatorPodsumowanieObrazek {
	justify-content: center;
	align-items: center;
	text-align: right;
	overflow: hidden;
}

/* Układ poziomy dla .popupGaleriaKreatorPodsumowanieWybory i .popupGaleriaKreatorPodsumowanieObrazek */
.popupGaleriaKreatorPodsumowanieWybory + .popupGaleriaKreatorPodsumowanieObrazek {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

/* Wiersze z tekstem w sekcji Wybory. Czyli elementy <p> w div: popupGaleriaKreatorPodsumowanieWybory */
.popupGaleriaKreatorPodsumowanieWiersz {
	margin: 5px 0;
	font-weight: bold;
	font-size: 12px;
}

/* TOOLTIP dla rejestracji konta użytkownika */
.TooltipPopupHaslo {
	position: absolute;
	background-color: #010101;
	color: red;
	border: 1px solid red;
	padding: 9px;
	font-size: 13px;
	border-radius: 3px;
	display: none;
	z-index: 1000;
}