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{
    align-self:flex-start;
    margin:.3em 2em .3em 3em;
    padding:.6em 1.2em;
    background:#3a3a3a;
    color:#c9c9c9;
    font-style:italic;
    font-size:1em;
    border-radius:20px 20px 20px 0;
    width:fit-content;
    animation:typing-pulse 1.2s ease-in-out infinite;
}
@keyframes typing-pulse{0%,100%{opacity:.55;}50%{opacity:1;}}
.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; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); justify-content: center; align-items: flex-start; overflow-y: auto; overflow-x: hidden; }
.lightbox img { width: 100%; height: auto; max-width: 100%; max-height: none; position: relative; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
.lightbox .close { position: fixed; top: 12px; right: 16px; bottom: auto; z-index: 10000; color: #fff; font-size: 44px; line-height: 1; font-weight: bold; cursor: pointer; text-shadow: 0 0 8px rgba(0,0,0,0.8); }
.lightbox .prev, .lightbox .next { cursor: pointer; position: fixed; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: #fff; font-weight: bold; font-size: 30px; z-index: 10000; 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;}

/* ============================================================
   Justified gallery – siatka dopasowana do wierszy
   ============================================================ */
.justified-gallery{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:stretch;width:100%;}
.justified-gallery .image{flex:1 1 160px;width:auto;height:160px;overflow:hidden;border-radius:8px;margin:0;}
.justified-gallery .image a{display:block;width:100%;height:100%;}
.justified-gallery .image img{width:100%;height:100%;object-fit:cover;display:block;margin:0;padding:0;}
.gallery-related .justified-gallery{margin-bottom:2em;}

/* ============================================================
   Desktop: aplikacja w ramce telefonu (na telefonie bez zmian)
   ============================================================ */
@media (min-width: 700px){
  html{background:#0c0c0c;display:flex;justify-content:center;min-height:100vh;}
  body{
    width:390px !important;
    height:800px !important;
    margin:24px auto !important;
    position:relative !important;
    overflow-y:auto;
    overflow-x:hidden;
    transform:translateZ(0); /* elementy fixed pozycjonują się względem ramki */
    border:10px solid #000;
    border-radius:44px;
    box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 0 2px #2c2c2c;
    scrollbar-width:none;
  }
  body::-webkit-scrollbar{display:none;}
  body#page-swipe{position:relative !important;overflow:hidden;}
  body#user-log-in{height:800px !important;}
  #profile-container{width:100%;height:80%;}
  .logout{bottom:4em;}
}

/* ============================================================
   Swipe dopasowany do szerokości telefonu (~390px)
   – proporcje jak w dawnym podglądzie panelu admina
   ============================================================ */
#page-swipe h1{font-size:2em;top:5em;}
#page-swipe .navi a{font-size:2em;padding:.6em .8em;}
#page-swipe .activity{bottom:10em;font-size:.8em;}
#page-swipe .tags{bottom:14em;font-size:.8em;}
#page-swipe .swipe{font-size:1.2em;}
#page-swipe .image-matched img{width:75px;height:75px;}
#page-swipe .fa-solid.fa-heart-circle-minus,
#page-swipe .fa-solid.fa-heart-circle-plus{font-size:1em;}
#page-swipe #profile-img{width:100%;height:100%;object-fit:cover;}

/* ============================================================
   Zdjęcia profilowe: poziome/pionowe obrazki przycinane (crop)
   ============================================================ */
.profile-image{aspect-ratio:1/1;overflow:hidden;border-radius:50%;}
.profile-image img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}

/* ============================================================
   Pola profilu edytowalne "jak chat" (ekran start-dodaj)
   ============================================================ */
.reveal-field{font-family:arial;font-size:1em;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:.3em .5em;outline:none;text-align:center;}
.reveal-field::placeholder{color:rgba(255,255,255,.4);}
.reveal-textarea{width:90%;min-height:6em;line-height:1.4;resize:vertical;text-align:center;box-sizing:border-box;}
.tags-profile .reveal-field{width:auto;min-width:8em;text-align:center;}
.hobby-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:.5em;width:100%;}