body { background: #212121; margin: 0; padding: 0;}
body#page-swipe{overflow: hidden;    position: fixed;    width: 100%;}
h1, .navi, .swipe, .tags, .activity, .info, #messageForm, .matched-in-profile, .matched, #messages-list{ font-family: arial; color: #fff; }
h1 { font-size: 5em; text-align: center; position:absolute;width:100%;top:3em;z-index:200;display:flex;justify-content:center;align-items:center;}
h3{text-align:left;padding-right:1em;}
.navi { clear: both; width: 100%; position: absolute; z-index: 1900; display: flex; justify-content: space-between; bottom: 1em; padding: 0; }
.navi a { font-size: 5em; text-decoration: none; color: #fff; padding: 1em; border-radius: 30px; margin: 0; }
.swipe { font-size: 3em; text-align: center; }
img {    width: 100vw;    height: 80vh;    object-fit: cover;    border-radius: 0;    opacity: 0;    animation: fadeIn 1.2s ease-in forwards; /* Dodajemy fade-in */  }  
#profile-container {   margin: 0 auto;   position: relative;   width: 100vw;   height: 80vh;   overflow: hidden; }
#profile-container::before {   content: '';   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 300px; /* Wysokość gradientu */   background: linear-gradient(180deg, rgba(33,33,33,1) 0%, rgba(33,33,33,0.9) 22%, rgba(33,33,33,0.7497373949579832) 40%, rgba(33,33,33,0) 100%);   z-index: 2; /* Ustawiamy pseudoelement nad zdjęciem */ }
#profile-container::after {   content: '';   position: absolute;   bottom: 0;   left: 0;   width: 100%;   height: 300px; /* Wysokość gradientu */   background: linear-gradient(0deg, rgba(33,33,33,1) 0%, rgba(33,33,33,0.9) 22%, rgba(33,33,33,0.7497373949579832) 40%, rgba(33,33,33,0) 100%);   z-index: 2; /* Ustawiamy pseudoelement nad zdjęciem */ }
#profile-img {   position: absolute;   transition: transform 0.8s ease-in-out;   left: 0;   top: 0;   z-index: 1; /* Zdjęcie poniżej gradientu */ }
.swipe-left, h1.swipe-left,.tags.swipe-left, .activity.swipe-left  {transform: translateX(-400%);-webkit-transform: translateX(-400%);-moz-transform: translateX(-400%);-o-transform: translateX(-400%);transition: transform 0.8s ease-in-out;-webkit-transition: transform 0.8s ease-in-out;-moz-transition: transform 0.8s ease-in-out;-o-transition: transform 0.8s ease-in-out; }
.swipe-right, h1.swipe-right, .tags.swipe-right, .activity.swipe-right {transform: translateX(500%);-webkit-transform: translateX(500%);-moz-transform: translateX(500%);-o-transform: translateX(500%);transition: transform 0.8s ease-in-out;-webkit-transition: transform 0.8s ease-in-out;-moz-transition: transform 0.8s ease-in-out;-o-transition: transform 0.8s ease-in-out; }
.fa-solid.fa-heart-circle-minus, .fa-solid.fa-xmark { color: red; }
.fa-solid.fa-heart-circle-minus, .fa-solid.fa-heart-circle-plus{font-size: 2em;}
.fa-solid.fa-heart-circle-plus, .fa-solid.fa-heart, .fa-solid.fa-circle { color: green; }
.fa-regular.fa-heart, .fa-solid.fa-xmark {font-size:2em;}
.swipe-result { margin-top: 2em; }
.tags { font-size: 2em; text-align: center; margin-top: 20px; position: absolute; bottom: 12em; left: 2em; z-index: 50; transition: transform 0.4s ease-in-out; }
.tag-item { display: inline-block; background-color: #222; color: #fff; margin: 5px; padding: 10px; border-radius: 10px; }
.tags-profile{display:flex;justify-content:Center;align-items:center;width:80%;margin:2em auto;gap:.5em;flex-wrap:wrap;}
.tags-profile .tag{border:1px solid pink;border-radius:5px;color:pink;padding:.3em;}
.activity { display: flex; font-size: 2em; text-align: center; margin-top: 20px; background-color: #222; color: #fff; width: auto; border-radius: 10px; padding: 10px; float: left; position: absolute; left: 2em; bottom: 10em; z-index: 50; transition: transform 0.4s ease-in-out; }
.activity i { margin: 0 0.5em 0 0; }
div.matched{color:green;}
.image-matched img{width:150px;height:150px;border-radius:50%;position:absolute;top:1em;left:1em;}

div.image{width:100%;}
div.image img{width:70%;display:flex;justify-content:ceter;align-items:center;}

@keyframes fadeIn {   0% {opacity: 0;   }   100% {opacity: 1;   } }
.info.head{position: fixed;top: 0;width: 100%;padding: 0 1em;margin: 0 auto;z-index:900;background:#222;}
/*profile*/
body.profile{display:flex;position:relative;flex-direction:column;width:100%;height:90vh;}
.profile h1{position:relative;font-size:16px;}
.profile-details{width:150px;}
textarea#message::placeholder{opacity:.2;}
textarea#message{line-height: 1.6em;}
input, button, textarea, select {    background: none;    border: none;    outline: none;  font: inherit; }
.swipe.right-swipe a{text-decoration:none;color:#fff;}
.profile-image{width:150px;margin:2em auto 0;}
.comunicator .profile-image.messages, .gallery .profile-image.messages{width:70px;margin:0em;padding:0 ;margin-right:1em;}
.comunicator .info p, .gallery .info p{padding:0;margin:0;text-align:left;display:flex;font-size:.8em; }
.comunicator .info, .comunicator h2, .gallery .info, .gallery h2{display:flex;justify-content:center;align-items:center;}
.comunicator .info h2, .gallery .info h2{text-align:left;font-size:100%;margin:0;}
.profile-head{display:flex;flex-direction: column;justify-content: center;align-items: start;width:80%;float:right}
.fa-solid.fa-user{font-size:3em;}
.profile-image img{width:100%;height: auto; object-fit: contain;border-radius:50%;}
.info{width: 90%;margin: 1em auto 0;font-size: 1em;text-align: center;}
.info p{padding:0;margin:.5em;width:100%;word-wrap: break-word;overflow-wrap: break-word;}
.fa-user-group, .fa-user, .fa-circle-left{position:fixed;top: .3em;    right: .5em;    color: #fff;    font-size: 40px;z-index:900;opacity:.2;}
.fa-user-group{font-size:40px;}
.fa-user{font-size: 40px;}
.fa-user-group sup{font-size: .1em;position: absolute;bottom: -2em;right: 1em;}
div.description{width:90%;font-size:16px;text-align:center;padding:0em 1em;margin:1em auto 2em;}
#messageForm {background:none;width:95%;margin:1em auto;display: flex;flex-direction: row;position:relative;bottom:1em;padding-top:1em;}
#messageForm button{padding:.2em .5em;font-size:30px;background:none;color:#fff;border:0px solid #888;border-radius:20px;width:10%;}
#messageForm textarea {padding:.2em .1em;font-size:16px;background:none;color:#fff;border:1px solid #888;border-radius:20px;width:85%;margin: 0;}
#messageForm label{padding:0 1em;font-size:1em;color:#999;margin:0;}
.matched-in-profile{font-size:1.5em;color:green;text-align:center;margin:1em auto;}
@keyframes blink {   0% { opacity: 1; }   50% { opacity: 0; }   100% { opacity: 1; } }

.matched-in-profile, div.matched, .matched-still{animation: blink 1s infinite; /* Dodajemy animację blink trwającą 1s, która powtarza się w nieskończoność */}

.matched{font-size: .7em;    width: 100%;    position: relative;    top: .5em;    z-index: 999;    text-align: center;}
.matched-still{ color: green;top:0;margin-right:.3em;}
.matched-still a{color: green;text-decoration:none;}
.swipe-right div.matched{    color: green;font-size: .1em;top:1em;text-align: center;position: absolute;z-index: 999;width: 100%;padding: .5em 0;}

.typing-indicator{margin-left:3em;}
.icon-bg{height:100%;width:100%;display:flex;justify-content:center;align-items:center;position:absolute;z-index:1;opacity:.1;top:0;}
.fa-heart-crack{color:white;font-size:5em;}

.link-buttons{display:flex;flex-direction:row;justify-content:center;align-items:center;}
.link-buttons a{padding:1em;margin:.3em;text-decoration:none;color:#fff;border:2px solid #fff;border-radius:10px;}
#messages-list {width: 100%;height: 70%;margin: 0 auto;margin-top: 4em;padding: 1em 0;display: flex;flex-direction: column;gap: 1em;overflow-y: scroll; }
#messages-list p {display: flex;justify-content: flex-start; }

#messages-list img{width:80%;height:auto;margin:0 auto;padding:0}
#messages-list p em img, #messages-list p strong img{width:25px;}
#messages-list p span{color:#888;text-align:center;text-decoration:none !important;width:100%;}
#messages-list p em {background: rgb(125, 206, 227);color: #000;font-family: arial;padding: 1em;font-size: 1.2em;border-radius: 20px 20px 0 20px;margin: .3em 1em;align-self: flex-end;padding:  .6em 1em;max-width: 100%;word-wrap: break-word;margin-left: auto;position: relative; /* Ustawienie pozycji względnej, aby móc dodać Dziubek */ }
#messages-list p em::after {content: "";position: absolute;bottom: 0; /* Dziubek na dole */right: -8px; /* Dziubek po prawej stronie */width: 0;height: 0;border-left: 10px solid rgb(125, 206, 227); /* Kolor dymka */border-top: 10px solid transparent;border-bottom: none; /* Brak górnej krawędzi */ }
#messages-list p strong {background: rgb(203, 232, 182);color: #000;font-family: arial;padding:  .6em 1em;font-size: 1.2em;border-radius: 20px 20px 20px 0;margin: .3em 1em;align-self: flex-start;max-width: 100%;word-wrap: break-word;margin-right: auto;font-weight: 300;position: relative; /* Ustawienie pozycji względnej, aby móc dodać Dziubek */ }
#messages-list p strong::after {content: "";position: absolute;bottom: 0; /* Dziubek na dole */left: -10px; /* Dziubek po lewej stronie */width: 0;height: 0;border-right: 10px solid rgb(203, 232, 182); /* Kolor dymka */border-top: 10px solid transparent;border-bottom: none; /* Brak górnej krawędzi */ }

#messages-list p{padding:.3em;margin:0 2em;}
textarea#message {padding:.5em 1.2em;font-size:1.3em;}
#messages-list .alert{width:100%;text-align:center;}
#gallery-user{width:90%;position:relative;display: flex;justify-content: center;align-items: center;margin: 4em auto;}
.justified-gallery{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}
.justified-gallery img{height:auto;margin:0;}
.gallery-related{display:flex;flex-direction:column;}
.gallery-related .profile-head{display:flex;flex-direction: column;justify-content: center;align-items: start;width:100%;}
.galleries-related .profile-head{display:flex;flex-direction: column;justify-content: center;align-items: start;margin:0 auto;}
.galleries-related .info{margin:0 auto;text-align:center;padding:1em;}
.galleries-related .info h3{text-align:center;}
.gallery-related .image{height:200px;}
.gallery-related .image img{height:100%;}
.prev{font-size:4em;position: absolute;left: 0;opacity:.4;}
.next{font-size:4em;position: absolute;right: 0;opacity:.4;}
.lightbox {display: none; /* Ukryty początkowo */position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.9); /* Ciemne tło */justify-content: center;align-items: center;}
.lightbox img {max-width: 100%; max-height: 100%;}
.lightbox:target { display: flex; }
.close {position: absolute;bottom: 10px;right: 20px;font-size: 50px;color: white;cursor: pointer;}
@keyframes zoomIn {0% {transform: scale(0);opacity: 0;transform-origin: right;}100% {transform: scale(1);opacity: 1;transform-origin: right;} }   
 .zoom-in {    animation: zoomIn 1.5s ease;}
.message-time{font-size:8px;width:100%;opacity:.2;text-align:end;line-height:1.5em;}
.justified-gallery img {width: auto;height: 200px;display: block; }

.my-profile{position: absolute;top: 0;right: 0;z-index: 900000;}
.user-messages-list{max-width:80%;margin:0 auto;}
.user-messages-list .user{display: flex;justify-content: start;align-items: center;gap: 2em;border-bottom:1px solid #565656;}
.user-messages-list .user .profile-image{width:70px;margin: 1em;}
.incoming-messages span{font-size: 1.5em;background: pink;color: rgb(45, 45, 45);border-radius: 50%;min-width: 50px;height: 50px;padding: .2em .5em;}
.incoming-messages span a{color:#212121;}

.owner-form { display: flex; flex-wrap: wrap; } 
.owner-form .left-column, .owner-form .right-column { flex: 1; padding: 10px; } 
.owner-form .image-preview { max-width: 150px; display: block; margin-top: 10px; } 
.owner-form .row { display: flex; flex-wrap: wrap; margin-bottom: 10px; } 
.owner-form .row label { width: 100px; margin-right: 10px; } 
.owner-form .row input { flex-grow: 1; } 
.owner-form .full-width { width: 100%; }



h1 .name-link a{color:#fff !important;text-decoration:none;}

/* Lightbox CSS */
.lightbox { display: none; position: fixed; z-index: 999; padding-top: 10px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center; overflow: hidden; }
.lightbox img { max-width: 100%; max-height: 100%; position: relative; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
.lightbox .close { position: absolute; bottom: 10px; right: 25px; color: #fff; font-size: 50px; font-weight: bold; cursor: pointer; }
.lightbox .prev, .lightbox .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: #fff; font-weight: bold; font-size: 30px; transition: 0.6s ease; user-select: none; }
.lightbox .prev { left: 0; }
.lightbox .next { right: 0; }

/* Animacja w lewo (poprzednie) */
.slide-left-enter { transform: translateX(0%); opacity: 0; }
.slide-left-exit { transform: translateX(-100%); opacity: 0; }

/* Animacja w prawo (następne) */
.slide-right-enter { transform: translateX(0%); opacity: 0; }
.slide-right-exit { transform: translateX(100%); opacity: 0; }


.interest-message {
    width:auto;
    margin:0 auto;
    text-align: center;
    margin-top: 20px;
    border-radius:20px;
    padding: 10px 2em;
    border: 2px solid green;
    color: green;
    animation: blink 2s linear infinite;
    
}

.interest-message p {
    font-size: 1em;
    font-weight: bold;
    margin: 0;
}

.interest-message a {
    display: block;
    color: #green;
    text-decoration: underline;
    font-size: 1.2em;
    font-weight: bold;
}

.interest-message {
    animation: blink 1s step-end 2, hold 3s step-end .5 infinite;
    animation-delay: 0s, 1s; /* Czas początkowy dla każdej animacji */
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes hold {
    0% { opacity: 1; }
    100% { opacity: 1; }
}



@keyframes scale-up {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

/* Animacja dla <strong> */
.animate-strong {
    animation: scale-up .1s ease-in-out;
    transform-origin: bottom left;
    position:relative;
}

/* Animacja dla <em> */
.animate-em {
    animation: scale-up .1s ease-in-out;
    transform-origin: bottom right;
}


.reactivate-question{font-size:2em;text-align:center;}
.reactivate-actions{display:flex;justify-content:center;align-items:center;gap:4em;margin:4em auto;}
.reactivate-actions a{padding:.5em 1em;background:pink;font-weight:600;font-size:1.4em;}
.animate-strong img{position:absolute;bottom:.8em;left:.7em;width:40px;height:40px;}
/*logowanie*/
/*edit*/
#user-log-in{background: #212121; margin: 0; padding: 0;display: flex;height: 100vh;width: 100%;justify-content: center;align-items: center;}
body { font-family: Arial, sans-serif;color:#fff;}
form { margin: 20px;margin-bottom: 100px;flex:1;}
.user-form {margin-bottom: 30px;display: flex;gap: 2em;flex-wrap: wrap;border: 1px solid #ccc;padding: 15px;border-radius: 10px; } 
label {display: block;margin-bottom: 5px; } 
input[type="text"], input[type="number"], textarea {width: 100%;padding: .5em 1em;margin-bottom: 10px;border: 1px solid #ccc;border-radius: 5px; } 
textarea {height: 60px; } button {padding: 10px 20px;background: #5cb85c;color: white;border: none;border-radius: 5px;cursor: pointer; } 
button:hover {background: pink; } 
.add-user-btn {background: pink;margin-top: 10px; } 

.head-container{display:flex;}
.head-container .column{display:flex;flex-direction:column;width:70%;}

.login-form { width: 300px; margin: 100px auto; padding: 20px;  }
input[type="text"], input[type="password"] { width: 78%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px;color:#fff; }
button { padding: 10px 20px; background: #212121;color: pink;border: 2px solid pink; border-radius: 5px; cursor: pointer; }
button:hover { background: pink; color: #343434;}
.error { color: red; }

.user-panel{display:flex;gap:1em;width:100%;justify-content: space-between;}

.user-form {display: flex;gap: 20px;margin-bottom: 20px;}

a:any-link{color:#fff;text-decoration:none;}
.user-form .id{font-size:2em;opacity:.4;padding:1em;}
.user-form input[type="number"]{width:100px;padding: .5em;font-size:1.5em;}
.user-form input{font-size: 1em;}
.user-form input[type="text"]{width:95%;}
.user-form em{margin:0 1em;opacity:.3;}
.user-form textarea{width:90%;font-size: 1em;}

.login-form .fa-heart-circle-check{color:pink;font-size:4em;}
.login-form .fa-heart-circle-check sup{font-size:20px;padding:1em;letter-spacing:.5em;}
.logout { height: 50px;z-index: 999;position: absolute;right: 1em;bottom:1em; }

.logout .fa-right-from-bracket{ color: #fff;    font-size: 2em;z-index:900;text-decoration:none;color:#fff;background:#222;padding:.4em;border-radius:5px;position:relative;top:1em;display:block;}
.logout .fa-right-from-bracket:hover{background:white;color:#212121;}