html, body {
padding: 0;
margin: 0;
min-height: 100%;
overflow-x: hidden;
}
body {
box-sizing: border-box;
background: white;
background-size: cover;
background-repeat: repeat-x;
background-position: 0%;
background-blend-mode: darken;
display:flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100%;
/*overflow-y: auto;
overflow-x: auto;*/
}
                
@media screen and (max-width: 200px) {
body {
display: none;
                    
}
}


/* DEBUT HEAD BAR */
    
.headbar{
/*box-sizing: border-box;  */
background-color: white;
/*background: none;*/
/*background-color:transparent;*/
width: 100%;
height: 50px;
position: fixed;
top: 0;
left: 0;
right: 0;
/*padding: 0px 5px  5px;*/
z-index: 20000;
display:flex;
/*flex-direction: initial;*/
align-items: center;
justify-content: center;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;                       

}


.menu_icon{   
position: absolute;
display: flex;
align-items: center;
justify-content: center;        
background-image: url('image-icons/menu-icon.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
/*background-color: black;*/
/*border: 1px solid #adacac;*/
width: 25px;
height: 25px;
font-family: sans-serif;
cursor: pointer;
left: 4px;
margin-right: -35px;
margin-left: 10px;
max-width: 35px;
min-height: 35px;  
z-index: 3;
/*background-color: #f5c6cb;*/
box-sizing: border-box;           
} 
    
.logo{   
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;        
/*text-align: left;*/
/*font-size: 40px;*/
/*font-size: 2vw;*/
background-image: url('image-icons/logo.png?v=20260725logo');
background-repeat: no-repeat;
background-position: left center;
background-size: 40px 40px;
/*background-color: black;*/
width: 142px;
height: 40px;
font-family: sans-serif;
/*color: #0687f1;*/
/*padding: 10px;*/
left: 40px;
margin-right: -35px;
margin-left: 10px;
font-weight: bold;
z-index: 1;
cursor: pointer;
/*max-width: 125px;
min-height: 55px; */ 
/*background-color: #f5c6cb;*/
box-sizing: border-box;           
}
.logo_wordmark {
position: absolute;
left: 44px;
top: 6px;
width: 98px;
height: 28px;
background-image: url('image-icons/kopargo-wordmark.png?v=20260725brand');
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
pointer-events: none;
}

@media screen and (max-width: 700px) {
.logo {
left: 14px;
right: auto;
margin: 0;
width: 128px;
height: 36px;
background-size: 36px 36px;
}

.menu_icon ~ .logo {
left: 52px;
}
.logo_wordmark {
left: 40px;
top: 5px;
width: 88px;
height: 26px;
}
}
    

    

.img_login{
position: absolute;    
display: flex;
/*float: right;*/
right: 0;
height: 40px;
width: 40px;
border:2px solid #eaecec;
border-radius: 50%;
background-image: url('image-icons/signin-icon.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: #fff;
/*margin-right: 3%;*/
cursor: pointer;
z-index: 4;
                           
}
@media screen and (max-width: 600px) {
.img_login {
height: 30px;
width: 30px;
right: 10px;
border-color: #6adffc;
box-shadow: 0 0 0 2px #fff;
}
}


.img_notif{
position: absolute;    
display: flex;
align-items: center;
justify-content: center;
/*float: right;*/
right: 60px;
height: 40px;
width: 40px;
border:0;
border-radius: 50%;
background-image: url('image-icons/bell-icon.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: #fff;
/*margin-right: 3%;*/
cursor: pointer;
z-index: 4;
                           
}

.notification-count {
position: absolute;
top: -4px;
right: -5px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #e55353;
color: #fff;
font-size: 11px;
font-weight: 800;
line-height: 18px;
align-items: center;
justify-content: center;
box-sizing: border-box;
box-shadow: 0 0 0 2px #fff;
}

@media screen and (max-width: 600px) {
.img_notif {
height: 30px;
width: 30px;
right: 54px;
}
}

.notification_popup_background {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
display: none;
align-items: flex-start;
justify-content: center;
padding: 70px 12px 18px;
z-index: 10001;
box-sizing: border-box;
}

.notification_popup_background.is-open {
display: flex;
}

.notification_popup_content {
width: min(520px, 100%);
max-height: calc(100vh - 90px);
background: #fff;
border: 1px solid #d9f7ff;
border-radius: 8px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
display: flex;
flex-direction: column;
overflow: hidden;
}

.notification_popup_header {
height: 48px;
padding: 0 12px 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e8f8fb;
box-sizing: border-box;
}

.notification_popup_header h2 {
font-size: 18px;
line-height: 1;
margin: 0;
color: #1d7180;
}

.notification_popup_close {
border: 0;
background: transparent;
font-size: 28px;
line-height: 1;
cursor: pointer;
color: #5c7880;
}

.notification_status {
min-height: 20px;
padding: 8px 12px 0;
font-size: 12px;
color: #6b7f84;
box-sizing: border-box;
}

.notification_status.is-error {
color: #e55353;
}

.notification_list {
padding: 10px 12px 14px;
overflow-y: auto;
flex: 1;
min-height: 220px;
box-sizing: border-box;
}

.notification_empty {
height: 160px;
display: flex;
align-items: center;
justify-content: center;
color: #7d9398;
font-size: 14px;
text-align: center;
}

.notification_item {
width: 100%;
min-height: 66px;
border: 0;
border-bottom: 1px solid #eef8fb;
background: #fff;
display: grid;
grid-template-columns: 46px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 10px 4px;
cursor: pointer;
text-align: left;
box-sizing: border-box;
}

.notification_item:hover,
.notification_item:focus-visible {
background: #f5fdff;
outline: none;
}

.notification_item:disabled {
opacity: 0.6;
cursor: wait;
}

.notification_item_avatar {
position: relative;
width: 42px;
height: 42px;
display: block;
}

.notification_item_avatar img {
width: 42px;
height: 42px;
display: block;
object-fit: cover;
border-radius: 50%;
border: 2px solid #6adffc;
box-sizing: border-box;
}

.notification_online_indicator {
position: absolute;
right: 0;
top: 0;
width: 11px;
height: 11px;
border-radius: 50%;
background: #28a745;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
display: none;
z-index: 2;
box-sizing: border-box;
}

.notification_online_indicator.is-online {
display: block;
}

.notification_item_avatar i {
position: absolute;
right: -4px;
bottom: -4px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #6adffc;
color: #063844;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px #fff;
}

.notification_item_text {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}

.notification_item_text strong {
font-size: 13px;
color: #143e48;
line-height: 1.25;
}

.notification_item_text small {
font-size: 12px;
color: #72898f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.notification_item_meta {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex-wrap: wrap;
}

.notification_item_text time {
font-size: 11px;
line-height: 1.2;
color: #8aa0a6;
}

.notification_item_distance {
font-size: 11px;
line-height: 1.2;
color: #6adffc;
font-weight: 700;
white-space: nowrap;
}

.notification_item_distance.distance::before {
width: 12px;
height: 12px;
margin-right: 3px;
vertical-align: -2px;
}

.notification_item_count {
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: #e55353;
color: #fff;
font-size: 11px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
}

.headbar_search_button {
position: absolute;
right: 108px;
height: 38px;
width: 38px;
border: 0;
border-radius: 50%;
background: #f8feff;
color: #6adffc;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
box-shadow: inset 0 0 0 1px #d7f7ff;
z-index: 4;
}

.headbar_search_button:hover,
.headbar_search_button:focus-visible {
background: #eefdff;
outline: 2px solid #6adffc;
outline-offset: 2px;
}

@media screen and (max-width: 600px) {
.headbar_search_button {
height: 30px;
width: 30px;
right: 96px;
font-size: 15px;
}
}

@media screen and (max-width: 380px) {
.logo {
width: 114px;
height: 34px;
background-size: 34px 34px;
}

.menu_icon {
left: 8px;
margin-left: 0;
width: 30px;
height: 30px;
min-height: 30px;
max-width: 30px;
}

.menu_icon ~ .logo {
left: 44px;
}
.logo_wordmark {
left: 38px;
top: 5px;
width: 76px;
height: 24px;
}


.headbar_search_button {
right: 88px;
}
}

.search_popup_background {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
display: none;
align-items: flex-start;
justify-content: center;
padding: 70px 12px 18px;
z-index: 10000;
box-sizing: border-box;
}

.search_popup_background.is-open {
display: flex;
}

.search_popup_content {
width: min(560px, 100%);
max-height: calc(100vh - 90px);
background: #fff;
border: 1px solid #d9f7ff;
border-radius: 8px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
display: flex;
flex-direction: column;
overflow: hidden;
}

.search_popup_header {
height: 48px;
padding: 0 12px 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e8f8fb;
box-sizing: border-box;
}

.search_popup_header h2 {
font-size: 18px;
line-height: 1;
margin: 0;
color: #1d7180;
}

.search_popup_close {
border: 0;
background: transparent;
font-size: 28px;
line-height: 1;
cursor: pointer;
color: #5c7880;
}

.search_form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto 42px;
gap: 8px;
align-items: center;
padding: 12px;
border-bottom: 1px solid #eef8fb;
box-sizing: border-box;
}

.search_input {
height: 40px;
min-width: 0;
border: 1px solid #6adffc;
border-radius: 5px;
padding: 0 10px;
outline: 0;
font-size: 14px;
box-sizing: border-box;
}

.search_input::placeholder {
color: #72cfe4;
}

.search_gender_filters {
display: flex;
align-items: center;
gap: 6px;
}

.search_gender_option {
height: 34px;
min-width: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
}

.search_gender_option input {
position: absolute;
opacity: 0;
pointer-events: none;
}

.search_gender_option span {
height: 34px;
min-width: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #b9eff9;
border-radius: 5px;
font-size: 13px;
font-weight: 700;
color: #2f7d8c;
background: #fbfeff;
}

.search_gender_option input:checked + span {
background: #6adffc;
color: white;
border-color: #6adffc;
}

.search_submit_button {
height: 40px;
width: 42px;
border: 0;
border-radius: 5px;
background: #6adffc;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}

.search_status {
min-height: 20px;
padding: 8px 12px 0;
font-size: 12px;
color: #6b7f84;
box-sizing: border-box;
}

.search_results {
padding: 10px 12px 14px;
overflow-y: auto;
flex: 1;
min-height: 200px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: center;
gap: 10px;
box-sizing: border-box;
}

.search_results .user-card {
min-height: 128px;
max-width: 112px;
flex: 0 1 112px;
padding: 8px;
}

.search_results .profile-image-container {
width: 74px;
height: 74px;
margin-bottom: 4px;
}

.search_results .user-card img {
width: 100%;
height: 100%;
}

.search_results .online-indicator {
bottom: 5px;
right: 5px;
width: 10px;
height: 10px;
border-width: 1px;
}

.search_results .user-card .distance {
font-size: 11px;
margin-top: 3px;
line-height: 1.2;
}

@media screen and (max-width: 520px) {
.search_form {
grid-template-columns: minmax(0, 1fr) auto;
}

.search_gender_filters {
grid-row: 2;
grid-column: 1 / 3;
justify-content: center;
}

.search_results .user-card {
min-height: 116px;
max-width: 100px;
flex-basis: 100px;
}

.search_results .profile-image-container {
width: 64px;
height: 64px;
}

.search_results .profile-image-container .online-indicator {
bottom: 4px;
right: 4px;
}
}

.Signup_Signin{
position: absolute;    
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/*top: 55px;*/
top: 5px;
right: 0;
background-color: white;
/*width: 10%;*/
width: 150px;
min-height: 80px;
z-index: 7;
color: rgb(53, 52, 52);
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #6adffc;
/*border-radius: 5px;*/
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: rgba(173, 173, 173, 0.25) 0px 0.0625em 0.0625em, rgba(173, 173, 173, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;                       
                            
}

/*@media screen and (max-width: 700px) {
.Signup_Signin {
width: 10%;
}
}*/

.Signin_link{     
display: flex;
align-items: center;
justify-content: center;
background-color: white;
min-width: 5%;
min-height: 20px;
z-index: 7;
color: #6adffc;
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #6adffc;
border-radius: 10px;
cursor: pointer;

/*box-shadow: rgba(173, 173, 173, 0.25) 0px 0.0625em 0.0625em, rgba(173, 173, 173, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;                       
             */               
}

.Signin_link:hover{
filter: brightness(1.1);
 }   


 .Signup_link{     
display: flex;
align-items: center;
justify-content: center;
background-color: white;
min-width: 5%;
min-height: 20px;
z-index: 7;
color: #6adffc;
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #6adffc;
border-radius: 10px;
cursor: pointer;

/*box-shadow: rgba(173, 173, 173, 0.25) 0px 0.0625em 0.0625em, rgba(173, 173, 173, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;                       
             */               
}

.Signup_link:hover{
filter: brightness(1.1);
 }  

.Signup_link.signup_disabled {
color: #9aa7ad;
border-color: #c8d3d8;
cursor: not-allowed;
opacity: 0.55;
}

.Signup_link.signup_disabled:hover {
filter: none;
}



.Signup_Signin_ctn_background{
position: fixed;
display:none;
align-items: center;
justify-content: center;
top: 55px;
/*top: 0;*/
left: 0;
right: 0;
bottom: 0;
/*z-index: 25;*/
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
/*opacity: 0.5;*/
}



.Signin_background{
position: fixed;
display:none;
align-items: center;
justify-content: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 25;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
/*opacity: 0.5;*/
overflow: scroll;
}

/*@media screen and (max-height:673px) {
.Signin_background {
overflow: scroll;
   
} 
}*/


.Signup_background{
position: fixed;
display:none;
align-items: center;
justify-content: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 30000;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
/*opacity: 0.5;*/
overflow: scroll;
}

/*@media screen and (max-height:673px) {*/
/*@media screen and (max-height:800px) {  
.Signup_background {
overflow: scroll;
   
} 
} */

.logout_ctn_background{
position: fixed;
display:none;
align-items: center;
justify-content: center;
top: 55px;
/*top: 0;*/
left: 0;
right: 0;
bottom: 0;
/*z-index: 25;*/
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
/*opacity: 0.5;*/
}


.signin_content{
/*margin: 5% auto;*/
position: absolute;
top: 20px;
margin-top: 10px;
margin-bottom: auto;
/*min-width: 300px;
max-width: 410px;
width: 30%;*/
border:5px solid #6adffc;
width: 380px;
background-color: white;
border-radius: 5px;
padding: 1em;
min-height: 10cm;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
                                     
}

        
@media screen and (max-width:640px) {
.signin_content {
width: 80%;
} 
}


.signup_content{
/*margin: 5% auto;*/
position: absolute;
z-index: 30001;
top: 20px;
margin-top: 10px;
margin-bottom: auto;
/*min-width: 300px;
max-width: 410px;
width: 30%;*/
border:5px solid #6adffc;
width: 380px;
background-color: white;
border-radius: 5px;
padding: 1em;
min-height: 10cm;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
                                     
}

        
@media screen and (max-width:640px) {
.signup_content {
width: 80%;
} 
}

            
            
.signin_close{
position: relative;
display:flex;
align-items: center;
justify-content: center;
top: 2px;
right: -90%;
width: 20px;
height: 20px;
color: #6adffc;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
/*background-image: url('image-icons/close-icon.png');*/
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: transparent;
cursor: pointer;
}

.signup_close{
position: relative;
display:flex;
align-items: center;
justify-content: center;
top: 2px;
right: -90%;
width: 20px;
height: 20px;
/*color: #6adffc;*/
color: #6adffc;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
/*background-image: url('image-icons/close-icon.png');*/
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: transparent;
cursor: pointer;
}


.menu_content_background{
position: fixed;
display:none;
align-items: center;
justify-content: center;
top: 55px;
/*top: 0;*/
left: 0;
right: 0;
bottom: 0;
/*z-index: 25;*/
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
/*opacity: 0.5;*/
}

.menu_content {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
top: 5px;
left: 0;
background-color: white;
width: 150px;
min-height: 300px;
max-height: 400px; 
overflow-y: auto; 
z-index: 7;
color: rgb(53, 52, 52);
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #6adffc;
box-shadow: rgba(173, 173, 173, 0.25) 0px 0.0625em 0.0625em, rgba(173, 173, 173, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
scrollbar-color: #6adffc #f0f0f0;
scrollbar-width: thin;
}

.profile-picture {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 10px 0;
border: 1px solid #6adffc;
display: block;
object-fit: cover;
box-sizing: border-box;
}

.menu-item {
width: 100%;
padding: 10px;
border-bottom: 1px solid #6adffc;
cursor: pointer;
}

.menu-item:hover {
background-color: #f0f0f0;
}

.menu-item a {
display: flex;
align-items: center;
color: #6adffc;
text-decoration: none;
padding-left: 10px; /* Ajoutez un peu de marge à gauche */
}

.menu-item i {
margin-right: 10px;
}

.message-count {
background-color: red;
color: white;
padding: 2px 5px;
border-radius: 50%;
font-size: 12px;
margin-left: 5px;

}

.flash-count {
display: inline-flex;
align-items: center;
justify-content: center;
}

.menu_content::-webkit-scrollbar {
width: 5px;
background-color: #f0f0f0;
}

.menu_content::-webkit-scrollbar-thumb {
background-color: #6adffc;
border-radius: 5px;
}

.menu_content::-webkit-scrollbar-track {
background-color: #f0f0f0;
}


/*.text_signin{
position: relative;
display:flex;
align-items: center;
justify-content: center;
top: -70px;
left: -50%;
width: 100px;
height: 20px;
color: #6adffc;
background: 0;

}*/

.connect-form {        
font-size: 12px;
background: #fafafa;
border: 1px solid #6adffc;
margin-bottom: 35px;
padding-left: 10px;
border-radius: 5px;
width: 97%;
height: 40px; 
outline: 0;
display: flex;
align-items: center;                            
}

.connect-form::placeholder {
color: #6adffc;
opacity: 1; /* Firefox */
}

.connect-form::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #6adffc;
}
.connect-form:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #6adffc;
opacity: 1;
}
.connect-form::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #6adffc;
opacity: 1;
}
.connect-form:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #6adffc;
}

.int-signin{
width: 90%;
border-width: 0;
outline: 0; 
background-color: transparent;
}

.int-signin::placeholder {
color: #6adffc;
opacity: 1; /* Firefox */
}

.int-signin::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #6adffc;
}
.int-signin:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #6adffc;
opacity: 1;
}
.int-signin::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #6adffc;
opacity: 1;
}
.int-signin:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #6adffc;
}

.int-signup{
width: 90%;
border-width: 0;
outline: 0; 
background-color: transparent;
}

.int-signup::placeholder {
color: #6adffc;
opacity: 1; /* Firefox */
}

.int-signup::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #6adffc;
}
.int-signup:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #6adffc;
opacity: 1;
}
.int-signup::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #6adffc;
opacity: 1;
}
.int-signup:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #6adffc;
}

.password_toggle {
width: 30px;
height: 30px;
border: 0;
background: transparent;
padding: 0;
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
flex-shrink: 0;
}

.password_toggle img {
display: block;
pointer-events: none;
}

.password_toggle.is-hidden::after {
content: "";
position: absolute;
width: 28px;
height: 2px;
background: #6adffc;
border-radius: 2px;
transform: rotate(-38deg);
box-shadow: 0 0 0 1px #fafafa;
}

.password_toggle:focus-visible {
outline: 2px solid #6adffc;
outline-offset: 2px;
border-radius: 4px;
}

.radio_form  {
accent-color: #6adffc;
outline: 1px auto #6adffc;
}


.login-btn {
border-radius: 50px;
background-color:#6adffc;
color: #f4f6f7;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 1.8rem;
transform: translateX(-10%);
position: relative;
height: 30px;
border: none;
padding: 5px;
top: 5px;
cursor: pointer;
font-size: 15px;
text-align: center;
}
.login-btn:hover{
filter: brightness(1.1);
}

.login-btn:disabled {
background-color: #9aa7ad;
cursor: not-allowed;
opacity: 0.7;
}

.login-btn:disabled:hover {
filter: none;
}


.password_rec {
color:  #6adffc;
width: 100px;               
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 1.8rem;
transform: translateX(-10%);
position: relative;
text-decoration: none;
display: flex;
padding: 5px;
top: 5px;
font-size: 12px;
text-align: center;
cursor: pointer;
}


.signup_link {
color: #6adffc;
width: 100px;                  
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 1.8rem;
transform: translateX(-10%);
position: relative;
text-decoration: none;
display: flex;
padding: 5px;
top: 5px;
font-size: 12px;
text-align: center;
}
/*@media screen and (min-width: 900px) {
a.signup_link {
display: none;
                        
}
}*/


.texte_signup {
color: rgb(122, 122, 122);
position: relative;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
margin: -0.2%;
margin-top: -0.7cm;
text-align: center;
}

.signup_form2 {
font-size: 12px;
/*background: #fafafa;
border: 1px solid #ddd;*/
margin-bottom: 5px;
padding-left: 10px;
border-radius: 5px;
width: 97%;
height: 40px; 
outline: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
                                       
}


.signup_check_row {
width: 97%;
min-height: 32px;
margin: 6px auto;
padding: 0 8px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
text-align: left;
font-size: 12px;
color: #555;
border-radius: 6px;
}

.signup_check_row label {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
line-height: 1.3;
cursor: pointer;
}

.signup_required_checkbox {
width: 15px;
height: 15px;
flex: 0 0 auto;
}

.signup_check_row.error {
border: 1px solid red;
}
.signup_language_field {
width: 97%;
margin: 0 auto 8px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
}

.signup_language_field label {
display: block;
font-weight: bold;
margin-bottom: 4px;
}

.signup_language_field select {
width: 100%;
height: 34px;
border: 1px solid #d7d7d7;
border-radius: 5px;
background-color: #fff;
color: #333;
font-size: 13px;
padding: 0 8px;
outline: 0;
}

.form_label_signup {
font-size: 12px;
font-weight: bold;
color: #333;       /* gris foncé */
/*display: block; */   /* force le retour à la ligne */
/*margin-bottom: 2px;*/

}

.error {
border: 1px solid red;
}

.error input {
border: none;
}

.signup_email_notice_background {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.38);
align-items: center;
justify-content: center;
padding: 18px;
}

.signup_email_notice_background.is-visible {
display: flex;
}

.signup_email_notice_content {
position: relative;
width: min(90vw, 330px);
background: #fff;
border: 1px solid #6adffc;
border-radius: 8px;
padding: 22px 18px 18px 18px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
font-family: Arial, Helvetica, sans-serif;
text-align: center;
box-sizing: border-box;
}

.signup_email_notice_close {
position: absolute;
top: 8px;
right: 10px;
width: 28px;
height: 28px;
border: 0;
background: transparent;
color: #333;
font-weight: bold;
cursor: pointer;
}

.signup_email_notice_content h3 {
margin: 0 0 8px 0;
font-size: 17px;
color: #333;
}

.signup_email_notice_content p {
margin: 0 0 14px 0;
font-size: 13px;
line-height: 1.45;
color: #555;
}

.signup_email_notice_button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 96px;
min-height: 34px;
padding: 6px 14px;
border: 0;
border-radius: 6px;
background: #6adffc;
color: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}

.signup_verify_background {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.46);
align-items: center;
justify-content: center;
padding: 18px;
}

.signup_verify_background.is-visible {
display: flex;
}

.signup_verify_content {
position: relative;
width: min(92vw, 360px);
background: #fff;
border-radius: 8px;
padding: 22px 18px 18px 18px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}

.signup_verify_content,
.signup_verify_content * {
box-sizing: border-box;
}

.signup_verify_close {
position: absolute;
top: 8px;
right: 10px;
width: 28px;
height: 28px;
border: 0;
background: transparent;
color: #333;
font-weight: bold;
cursor: pointer;
}

.signup_verify_content h3 {
margin: 0 0 8px 0;
font-size: 18px;
color: #333;
}

.signup_verify_content p {
margin: 0 0 14px 0;
font-size: 13px;
line-height: 1.45;
color: #555;
}

.signup_verify_code_input {
width: 100%;
max-width: 100%;
margin: 0 0 10px 0;
padding: 0 12px;
text-align: center;
font-size: 18px;
font-weight: bold;
letter-spacing: 0;
}

.signup_verify_button {
width: 100%;
max-width: 100%;
min-height: 38px;
margin: 2px 0 0 0;
padding: 6px 12px;
top: 0;
transform: none;
position: relative;
border-radius: 6px;
}

.signup_resend_code_button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 28px;
margin: 8px 0 0 0;
padding: 4px 8px;
border: 0;
background: transparent;
color: #178aa3;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
text-align: center;
cursor: pointer;
}

.signup_resend_code_button:disabled {
color: #7b8b91;
cursor: default;
}

#signup_verify_feedback {
font-size: 12px;
margin-bottom: 8px;
}

.password_reset_background {
display: none;
position: fixed;
inset: 0;
z-index: 12000;
background: rgba(0, 0, 0, 0.48);
align-items: center;
justify-content: center;
padding: 18px;
}

.password_reset_background.is-visible {
display: flex;
}

.password_reset_content {
position: relative;
width: min(92vw, 370px);
background: #fff;
border-radius: 8px;
padding: 22px 18px 18px 18px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
font-family: Arial, Helvetica, sans-serif;
text-align: center;
box-sizing: border-box;
}

.password_reset_content,
.password_reset_content * {
box-sizing: border-box;
}

.password_reset_close {
position: absolute;
top: 8px;
right: 10px;
width: 28px;
height: 28px;
border: 0;
background: transparent;
color: #333;
font-weight: bold;
cursor: pointer;
}

.password_reset_content h3 {
margin: 0 0 8px 0;
font-size: 18px;
color: #333;
}

.password_reset_content p {
margin: 0 0 14px 0;
font-size: 13px;
line-height: 1.45;
color: #555;
}

.password_reset_step {
display: none;
}

.password_reset_step.is-active {
display: block;
}

.password_reset_input {
width: 100%;
max-width: 100%;
margin: 0 0 10px 0;
}

.password_reset_code_input {
text-align: center;
font-size: 18px;
font-weight: bold;
}

.password_reset_password_wrap {
padding-right: 8px;
}

.password_reset_button {
width: 100%;
max-width: 100%;
min-height: 38px;
margin: 2px 0 0 0;
padding: 6px 12px;
top: 0;
transform: none;
position: relative;
border-radius: 6px;
}

.password_reset_resend_button {
margin-top: 4px;
}

#password_reset_email_feedback,
#password_reset_code_feedback,
#password_reset_password_feedback {
font-size: 12px;
margin-bottom: 8px;
}


.logout{
position: relative;    
display: flex;
color: #6adffc;
width: 100px;                  
justify-content: center;
align-items: center;
margin: 0 auto;
text-decoration: none;
font-size: 12px;
text-align: center;
}


.logout_content{
position: absolute;    
display: flex;
align-items: center;
justify-content: center;
justify-items: center;
/*align-content: center;*/
/*top: 55px;*/
top: 5px;
right: 0;
background-color: white;
/*width: 10%;*/
width: 150px;
min-height: 50px;
z-index: 7;
color: rgb(53, 52, 52);
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #6adffc;
/*border-radius: 5px;*/
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: rgba(173, 173, 173, 0.25) 0px 0.0625em 0.0625em, rgba(173, 173, 173, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;                       
                            
}


/* FIN HEAD BAR */


.index_text{
position: fixed;
display: flex;
align-items: center;
justify-content: center;
left: 50%;
transform: translateX(-50%);
top: 55px;
/*top: 103px;*/
background-color: #6adffc;
min-width: 20%;
min-height: 30px;
z-index: 5;
color: white;
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #6adffc;
/*border-radius: 5px;*/
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: rgba(173, 173, 173, 0.25) 0px 0.0625em 0.0625em, rgba(173, 173, 173, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;                       
box-sizing: border-box;
padding: 0 12px;
    
}

.index_text2{
position: fixed;
display: flex;
align-items: center;
justify-content: center;
left: 50%;
transform: translateX(-50%);
top: 85px;
/*top: 103px;*/
background-color: #fcfdfd;
min-width: 20%;
min-height: 30px;
z-index: 5;
color: #6adffc;
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #6adffc;
/*border-radius: 5px;*/
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-sizing: border-box;
padding: 0 12px;
    
}

.img_index{
position: absolute;
display: block;
top: 130px;
left: 50%;
transform: translateX(-50%);
background-color: white;
width: min(92vw, 500px);
height: auto;
aspect-ratio: 1 / 1;
min-width: 0;
min-height: 0;
border:0px solid #eaecec;
/*background-image: url('image-icons/img-index-Africa.png'); */
background-repeat: no-repeat;
background-size: 100% 100%;
object-fit: contain;

                           
}

@media screen and (max-width: 640px) {
.index_text,
.index_text2 {
width: calc(100% - 24px);
max-width: 430px;
font-size: 13px;
line-height: 1.25;
min-height: 32px;
}

.index_text2 {
top: 88px;
}

.img_index {
top: 140px;
width: min(92vw, 420px);
}
}



/* DEBUT ALERT */

.alert {
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
color: #721c24;
background: #f8d7da;
border: 1px solid #f5c6cb;
text-align: center;                            
font-size: 11px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
height: 40px; 
width: 100%;
margin-bottom: 25px;
}


/* FIN DEBUT ALERT */



/* DEBUT SUCCESSFUL */


.success {  
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
color: white;
background: #95ca4f;
border: 1px solid #95ca4f;
text-align: center;                            
font-size: 11px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
height: 40px; 
width: 100%;
margin-bottom: 25px;
}
    
.SUCCESSFUL_PASSWORD {  
position: relative;
top: 10px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
color: white;
background: #95ca4f;
border: 1px solid #95ca4f;
text-align: center;                            
font-size: 11px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
height: 40px; 
width: 100%;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
      
}
      
      
/* FIN SUCCESSFUL */



/* DEBUT PROFILE AND UPROFILE*/



.profile_photo{
position: relative;
display: block;
align-items: center;
justify-content: center;
top: 55px;
width: 140px;
height: 140px;
border-radius: 50%;
border: 1px solid #6adffc;
color: black;
background-color: white;
object-fit: cover;
box-sizing: border-box;
overflow: hidden;
    
}

.profile_photo_wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
top: 55px;
width: 140px;
height: 140px;
border-radius: 50%;
overflow: visible;
box-sizing: border-box;
}

.profile_photo_wrapper .profile_photo {
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
box-sizing: border-box;
}

#preview-img,
#camera_stream {
display: block;
object-fit: cover;
box-sizing: border-box;
overflow: hidden;
}

.uprofile_online_indicator,
.chat_header_online_indicator {
display: none;
width: 14px;
height: 14px;
background-color: #28a745;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
flex-shrink: 0;
}

.uprofile_online_indicator {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 2;
}

.uprofile_online_indicator.is-online,
.chat_header_online_indicator.is-online {
display: inline-block;
}

.chat_header_online_indicator {
width: 11px;
height: 11px;
border-width: 1px;
}



.profile_content{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
top: 60px;
/*top: 103px;*/
background-color: white;
width: min(100% - 24px, 450px);
min-height: 150px;
/*z-index: 5;*/
color: whitesmoke;
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
/*border: 1px solid rgb(20, 19, 19);*/
border-bottom: 1px solid #6adffc;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;

}


.profile_name{
display: flex;
align-items: center;
justify-content: center;
background-color: white;
width: 100%;
max-width: 400px;
min-height: 30px;
color: black;
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 3px;
/*border: 1px solid rgb(20, 19, 19);*/
border: none;
box-sizing: border-box;
overflow-wrap: anywhere;
}

.about{
display: flex;
align-items: center;
justify-content: center;
background-color: white;
width: 100%;
max-width: 400px;
min-height: 30px;
color: rgb(185, 184, 184);
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 5px;
/*border: 1px solid rgb(20, 19, 19);*/
border: none;
box-sizing: border-box;
overflow-wrap: anywhere;
}

.edit_photo_icon{
position: relative;
cursor: pointer;
top: 40px;
z-index: 6;
outline: none;
box-sizing: border-box;
color: transparent;
padding: 10px 10px;
cursor: pointer;
transition: 0.5s;
/*background-color: rgba(105, 104, 104, 0.5);*/
background: none;
/*opacity: 0;*/
background-image: url('image-icons/photo-icon.png');
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: center;
width: 40px;
height: 40px;
border-radius: 50%;
            
}

.edit_photo_icon::-webkit-file-upload-button{
visibility: hidden;
}

.edit_about_icon{
cursor: pointer;
}


/*********************/

.name_popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 10020;
}

.name_container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
width: 80%;
max-width: 500px;
}

.name_header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}

.close_name {
background-color: #fff;
border: none;
font-size: 20px;
cursor: pointer;
}

.name_content {
  padding-top: 20px;
}

.save_name_btn {
border-radius: 50px;
background-color:#6adffc;
color: #f4f6f7;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 1.8rem;
transform: translateX(-10%);
position: relative;
height: 30px;
border: none;
padding: 5px;
top: 5px;
cursor: pointer;
font-size: 15px;
text-align: center;
}
.save_name_btn:hover{
filter: brightness(1.1);
}


.edit_name_icon{
cursor: pointer;
}

/***** SETTINGS *****/
.settings_page {
position: relative;
width: 100%;
min-height: 100vh;
padding: 95px 16px 90px;
box-sizing: border-box;
display: flex;
justify-content: center;
}

.settings_panel {
width: min(720px, 100%);
display: flex;
flex-direction: column;
gap: 14px;
font-family: Arial, Helvetica, sans-serif;
}

.settings_panel h1 {
margin: 0 0 8px;
font-size: 22px;
font-weight: bold;
color: #333;
text-align: center;
}

.settings_section {
width: 100%;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 8px;
padding: 16px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}

.settings_section_text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}

.settings_section_text h2 {
margin: 0;
font-size: 16px;
font-weight: bold;
color: #333;
}

.settings_section_text p,
.settings_empty_text {
margin: 0;
font-size: 12px;
font-weight: normal;
color: #777;
line-height: 1.45;
}

.settings_language_form {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}

.settings_select {
height: 34px;
border: 1px solid #d6d6d6;
border-radius: 6px;
background: #fff;
color: #333;
padding: 0 10px;
font-size: 14px;
}

.settings_save_btn,
.settings_unblock_btn {
border: none;
border-radius: 20px;
background-color: #6adffc;
color: #fff;
min-height: 34px;
padding: 7px 14px;
font-size: 13px;
cursor: pointer;
}

.settings_save_btn:hover,
.settings_unblock_btn:hover {
filter: brightness(1.05);
}

.settings_action_btn {
border: none;
background: transparent;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #555;
cursor: pointer;
padding: 6px;
}

.settings_action_btn:hover {
color: #222;
}

.settings_blocked_section {
align-items: stretch;
flex-direction: column;
}

.settings_blocked_list {
display: flex;
flex-direction: column;
gap: 8px;
}

.settings_blocked_user {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid #eee;
border-radius: 8px;
padding: 10px;
}

.settings_blocked_profile {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
text-decoration: none;
color: #333;
}

.settings_blocked_profile img {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 1px solid #6adffc;
flex: 0 0 44px;
display: block;
box-sizing: border-box;
overflow: hidden;
}

.settings_blocked_profile span {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}

.settings_blocked_profile strong {
font-size: 14px;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.settings_blocked_profile small {
font-size: 11px;
color: #888;
}

#settings_language_message,
#settings_blocked_message,
#ajax_update_password,
#success-message-password {
width: 100%;
font-size: 12px;
text-align: center;
}

#update_password_form {
display: flex;
flex-direction: column;
gap: 10px;
}

@media (max-width: 640px) {
.settings_section {
flex-direction: column;
align-items: stretch;
}

.settings_language_form {
justify-content: stretch;
}

.settings_select {
width: 100%;
}

.settings_save_btn {
width: auto;
min-width: 132px;
align-self: center;
}

.settings_blocked_user {
align-items: stretch;
flex-direction: column;
}

.settings_unblock_btn {
width: 100%;
}
}

/********************/

.about_popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 7;
}

.about_container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
width: 80%;
max-width: 500px;
}

.about_header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}

.close_about {
background-color: #fff;
border: none;
font-size: 20px;
cursor: pointer;
}

.about_content {
  padding-top: 20px;
}

.save_about_btn {
border-radius: 50px;
background-color:#6adffc;
color: #f4f6f7;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 1.8rem;
transform: translateX(-10%);
position: relative;
height: 30px;
border: none;
padding: 5px;
top: 5px;
cursor: pointer;
font-size: 15px;
text-align: center;
}
.save_about_btn:hover{
filter: brightness(1.1);
}


.save_about_textarea {
position: relative;       
display: flex;
/*justify-content: left;
justify-items: left;*/
margin: 0 auto; 
border-radius: 5px;
border: 1px solid #6adffc;
color: black;
width: 300px;
height: 50px;
max-height: 50px;
font-size: 14px;
text-align: left;
}

.save_about_textarea:focus {
outline: none;
border: 1px solid #6adffc;
box-shadow: 1px #6adffc; /* optionnel */
}


/*******************/

.video_chat_popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 7;
}

.video_chat_container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 16px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
width: 80%;
max-width: 500px;
}

.video_chat_header{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}

.close_video_chat{
background-color: #fff;
border: none;
font-size: 20px;
cursor: pointer;
}

.video_chat_content{
  padding-top: 20px;
}

.video_call_stage {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
background: #fff;
border-radius: 8px;
overflow: hidden;
}

.video_call_pattern {
position: absolute;
inset: 0;
background-color: #fff;
z-index: 0;
overflow: hidden;
}

.video_call_pattern_icon {
position: absolute;
display: block;
color: #6adffc;
}

.video_call_pattern_icon svg {
width: 100%;
height: 100%;
display: block;
fill: currentColor;
}

.video_call_profile_badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: 116px;
height: 116px;
border: 3px solid #6adffc;
border-radius: 50%;
background: #fff;
padding: 4px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
overflow: hidden;
}

.video_call_profile_photo {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 50%;
}

.video_call_remote {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
background: transparent;
opacity: 0;
transition: opacity 0.18s ease;
}

.video_call_stage.has-remote-video .video_call_remote {
opacity: 1;
}

.video_call_stage.has-remote-video .video_call_pattern,
.video_call_stage.has-remote-video .video_call_profile_badge {
opacity: 0;
pointer-events: none;
}

.video_call_local {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 3;
width: 32%;
max-width: 140px;
aspect-ratio: 3 / 4;
object-fit: cover;
background: #eef8fb;
border: 2px solid #6adffc;
border-radius: 8px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
}

.video_call_local.is-video-off {
opacity: 0.28;
filter: grayscale(1);
}

.video_call_status {
min-height: 20px;
margin-top: 10px;
color: #333;
font-size: 13px;
font-weight: 700;
text-align: center;
}

.video_call_controls {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 12px;
flex-wrap: wrap;
}

.video_call_button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 96px;
min-height: 36px;
border: 0;
border-radius: 6px;
padding: 7px 12px;
color: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}

.video_call_button.accept {
background: #20b45b;
}

.video_call_button.decline,
.video_call_button.hangup {
background: #e55353;
}

.video_call_button.mute,
.video_call_button.camera {
min-width: 40px;
width: 40px;
height: 40px;
min-height: 40px;
padding: 0;
border-radius: 50%;
background: #6adffc;
color: #063844;
}

.video_call_button.mute.is-muted,
.video_call_button.camera.is-camera-off {
background: #e55353;
color: #fff;
}

.video_call_button.mute svg,
.video_call_button.camera svg {
width: 21px;
height: 21px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

.video_call_mic_slash,
.video_call_camera_slash {
stroke-width: 2.4;
}

@media (max-width: 520px) {
  .video_chat_container {
    width: 94%;
    padding: 12px;
  }

  .video_call_stage {
    aspect-ratio: 3 / 4;
  }

  .video_call_local {
    width: 34%;
    right: 8px;
    bottom: 8px;
  }

  .video_call_profile_badge {
    width: 104px;
    height: 104px;
  }

  .video_call_button {
    min-width: 88px;
    font-size: 12px;
  }

  .video_call_button.mute,
  .video_call_button.camera {
    min-width: 40px;
  }
}

.video_icon{
cursor: pointer;
}
/*****************************/

.connection_status_popup {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.45);
z-index: 10080;
}

.connection_status_popup.is-visible {
display: flex;
}

.connection_status_content {
width: min(92vw, 360px);
background: #fff;
border: 1px solid rgba(106, 223, 252, 0.55);
border-radius: 8px;
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
padding: 20px 18px;
text-align: center;
}

.connection_status_content h2 {
margin: 0 0 8px;
color: #111;
font-size: 20px;
font-weight: 800;
}

.connection_status_content p {
margin: 0;
color: #444;
font-size: 14px;
line-height: 1.45;
}

.connection_status_refresh {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 130px;
min-height: 38px;
margin-top: 16px;
border: 0;
border-radius: 6px;
background: #6adffc;
color: #06313b;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}

.connection_status_refresh:active {
transform: translateY(1px);
}

/*****************************/

.access_lock_popup {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.48);
z-index: 10090;
}

.access_lock_popup.is-visible {
display: flex;
}

.access_lock_content {
position: relative;
width: min(92vw, 380px);
background: #fff;
border: 1px solid rgba(106, 223, 252, 0.62);
border-radius: 8px;
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
padding: 24px 20px 20px;
text-align: center;
}

.access_lock_close {
position: absolute;
top: 8px;
right: 10px;
border: 0;
background: transparent;
color: #333;
font-size: 22px;
line-height: 1;
cursor: pointer;
}

.access_lock_icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
margin-bottom: 12px;
border-radius: 50%;
background: rgba(106, 223, 252, 0.18);
color: #139ec0;
font-size: 24px;
}

.access_lock_content h2 {
margin: 0 0 8px;
color: #111;
font-size: 20px;
font-weight: 800;
}

.access_lock_content p {
margin: 0;
color: #444;
font-size: 14px;
line-height: 1.45;
}

.access_lock_button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 170px;
min-height: 40px;
margin-top: 17px;
border: 0;
border-radius: 6px;
background: #6adffc;
color: #06313b;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}

.access_lock_button:active {
transform: translateY(1px);
}

.subscription_page {
width: 100%;
min-height: calc(100vh - 90px);
padding: 92px 16px 40px;
background: #f7f9fb;
box-sizing: border-box;
overflow-x: hidden;
display: flex;
justify-content: center;
}

.subscription_shell {
width: min(100%, 820px);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
box-sizing: border-box;
}

.subscription_header {
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}

.subscription_header h1 {
margin: 0;
font-size: 28px;
line-height: 1.2;
font-weight: 700;
color: #111;
letter-spacing: 0;
max-width: 100%;
overflow-wrap: anywhere;
}

.subscription_header p {
margin: 6px 0 0;
font-size: 14px;
line-height: 1.5;
color: #5f6b73;
max-width: 540px;
overflow-wrap: anywhere;
}

.subscription_status_panel,
.subscription_details,
.subscription_plan_panel {
background: #fff;
border: 1px solid #e3edf1;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(23, 40, 52, 0.06);
box-sizing: border-box;
}

.subscription_status_panel {
display: flex;
align-items: center;
gap: 14px;
padding: 18px;
width: 100%;
}

.subscription_status_icon {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
background: #e9fbff;
color: #139fbf;
font-size: 20px;
}

.subscription_status_panel.is-locked .subscription_status_icon {
background: #fff4f3;
color: #d64e4e;
}

.subscription_status_body span,
.subscription_details span,
.subscription_plan_info span {
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: #71818a;
letter-spacing: 0;
}

.subscription_status_body h2 {
margin: 3px 0;
font-size: 19px;
line-height: 1.25;
color: #111;
letter-spacing: 0;
overflow-wrap: anywhere;
}

.subscription_status_body p,
.subscription_plan_text p,
.subscription_plan_box p,
.subscription_note {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #5f6b73;
}

.subscription_details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 1px;
overflow: hidden;
background: #e3edf1;
width: 100%;
}

.subscription_details div {
background: #fff;
padding: 14px 16px;
min-width: 0;
text-align: center;
}

.subscription_details strong {
display: block;
margin-top: 4px;
font-size: 14px;
color: #111;
overflow-wrap: anywhere;
}

.subscription_plan_panel {
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
}

.subscription_plan_text h2 {
margin: 0 0 6px;
font-size: 20px;
line-height: 1.25;
color: #111;
letter-spacing: 0;
text-align: center;
overflow-wrap: anywhere;
}

.subscription_plan_text p {
text-align: center;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}

.subscription_plan_box {
border: 1px solid #d9e8ed;
border-radius: 8px;
padding: 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
box-sizing: border-box;
width: 100%;
min-width: 0;
text-align: center;
}

.subscription_plan_info {
min-width: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}

.subscription_price {
display: block;
font-size: 28px;
line-height: 1.15;
font-weight: 800;
color: #111;
letter-spacing: 0;
overflow-wrap: anywhere;
}

.subscription_currency_list {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}

.subscription_currency_list small {
display: inline-flex;
align-items: center;
min-height: 26px;
border-radius: 999px;
padding: 0 10px;
background: #e9fbff;
color: #087f9b;
font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}

.subscription_manual_note {
padding-top: 2px;
font-size: 13px !important;
font-weight: 700;
color: #24434b !important;
}

.subscription_provider_note {
width: 100%;
margin: 0;
font-size: 12px;
font-weight: 700;
line-height: 1.3;
color: #71818a;
text-align: center;
}

.subscription_payment_buttons {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
gap: 10px;
justify-content: center;
min-width: 0;
}

.subscription_payment_btn {
min-height: 40px;
border: none;
border-radius: 6px;
padding: 0 13px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #6adffc;
color: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
opacity: 1;
width: min(100%, 420px);
max-width: 420px;
white-space: normal;
text-align: center;
box-sizing: border-box;
}

.subscription_payment_btn:disabled {
cursor: not-allowed;
opacity: 0.62;
}

.subscription_payment_btn:not(:disabled) {
cursor: pointer;
opacity: 1;
color: #06313b;
}

.subscription_payment_btn.is-loading {
cursor: progress;
opacity: 0.78;
}

.subscription_payment_btn i {
font-size: 15px;
flex: 0 0 auto;
}

.subscription_payment_btn span {
color: inherit;
font-size: inherit;
font-weight: inherit;
text-transform: none;
line-height: 1.2;
}

.subscription_payment_separator {
width: min(100%, 420px);
display: flex;
align-items: center;
gap: 10px;
color: #7a8a8f;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}

.subscription_payment_separator::before,
.subscription_payment_separator::after {
content: "";
height: 1px;
flex: 1 1 auto;
background: #d9e8ed;
}

.subscription_paypal_container {
width: min(100%, 420px);
min-height: 44px;
display: flex;
flex-direction: column;
gap: 10px;
}

.subscription_paypal_group {
width: 100%;
display: flex;
flex-direction: column;
gap: 5px;
}

.subscription_paypal_group > span {
font-size: 12px;
font-weight: 700;
line-height: 1.25;
color: #24434b;
text-align: center;
}

.subscription_paypal_button_slot {
width: 100%;
min-height: 0;
}

.subscription_paypal_amount {
width: min(100%, 420px);
margin: -2px 0 0;
font-size: 12px !important;
line-height: 1.35 !important;
text-align: center;
color: #5f6b73 !important;
}

.subscription_note {
font-size: 12px;
color: #7a8a8f;
text-align: center;
}

.subscription_payment_notice,
.subscription_payment_message {
width: 100%;
box-sizing: border-box;
border-radius: 7px;
padding: 10px 12px;
font-size: 13px;
line-height: 1.4;
font-weight: 700;
text-align: center;
overflow-wrap: anywhere;
}

.subscription_payment_notice {
background: #e9fbff;
color: #087f9b;
border: 1px solid #bdeef8;
}

.subscription_payment_notice.is-success,
.subscription_payment_message.is-success {
background: #e9fbff;
color: #087f9b;
border-color: #bdeef8;
}

.subscription_payment_notice.is-warning,
.subscription_payment_message.is-warning {
background: #fff8e7;
color: #9b6b07;
border-color: #f5dda4;
}

.subscription_payment_notice.is-error,
.subscription_payment_message.is-error {
background: #fff4f3;
color: #b53a3a;
border-color: #ffd2cf;
}

.subscription_payment_message {
max-width: 420px;
padding: 0;
background: transparent;
border: 0;
color: #71818a;
}

.subscription_payment_message:not(:empty) {
padding: 9px 10px;
border: 1px solid #d9e8ed;
background: #fff;
}

.subscription_payment_message.is-success:not(:empty) {
border-color: #bdeef8;
background: #e9fbff;
color: #087f9b;
}

.subscription_payment_message.is-warning:not(:empty) {
border-color: #f5dda4;
background: #fff8e7;
color: #9b6b07;
}

.subscription_payment_message.is-error:not(:empty) {
border-color: #ffd2cf;
background: #fff4f3;
color: #b53a3a;
}

@media (max-width: 720px) {
  .subscription_plan_box {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .subscription_payment_buttons {
    justify-content: stretch;
  }

  .subscription_provider_note {
    text-align: left;
  }

  .subscription_payment_btn {
    flex: 1 1 190px;
  }
}

@media (max-width: 640px) {
  .subscription_page {
    padding: 78px 12px 30px;
  }

  .subscription_header h1 {
    font-size: 23px;
  }

  .subscription_status_panel {
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }

  .subscription_details {
    grid-template-columns: 1fr;
  }

  .subscription_plan_box {
    align-items: stretch;
    flex-direction: column;
  }

  .subscription_payment_buttons {
    justify-content: stretch;
  }

  .subscription_payment_btn {
    width: 100%;
    flex-basis: auto;
  }

  .subscription_price {
    font-size: 24px;
    text-align: center;
  }

  .subscription_currency_list {
    justify-content: center;
  }

  .subscription_manual_note,
  .subscription_provider_note {
    text-align: center;
  }
}

/*****************************/

.profile_distance_text {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 6px;
line-height: 1.2;
}

.social_icons {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 12px;
}

.message_icon{
cursor: pointer;
}

.message_popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 7;
}

.message_container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
width: 80%;
max-width: 500px;
min-height: 250px;
}

.message_header{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
padding-right: 82px;
position: relative;
min-height: 36px;
}

.message_header_status {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
max-width: 100%;
overflow: hidden;
}

.message_header_status h2 {
margin: 0;
font-size: 22px;
line-height: 1;
flex: 0 0 auto;
}

.chat_header_distance {
font-size: 11px;
font-weight: 600;
line-height: 1;
color: #6adffc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.distance::before,
.popup-distance::before,
.chat_distance::before,
.chat_header_distance::before,
.profile_distance_text::before {
content: "";
display: inline-block;
width: 13px;
height: 13px;
margin-right: 4px;
background: #6adffc;
vertical-align: -2px;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.distance:empty::before,
.popup-distance:empty::before,
.chat_distance:empty::before,
.chat_header_distance:empty::before,
.profile_distance_text:empty::before {
display: none;
}

.chat_header_video_call {
position: absolute;
right: 38px;
top: 0;
transform: none;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: #f4f6f7;
cursor: pointer;
padding: 0;
}

.chat_header_video_call img {
width: 20px;
height: 20px;
display: block;
}

.chat_header_video_call:hover {
filter: brightness(0.96);
}

.close_message{
position: absolute;
right: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 36px;
background-color: #fff;
border: none;
font-size: 20px;
cursor: pointer;
z-index: 1;
}

@media (max-width: 520px) {
  .message_header {
    padding-right: 70px;
  }

  .message_header_status {
    gap: 6px;
  }

  .message_header_status h2 {
    font-size: 19px;
  }

  .chat_header_distance {
    font-size: 10.5px;
  }

  .chat_header_video_call {
    right: 30px;
    width: 32px;
    height: 32px;
  }

  .chat_header_video_call img {
    width: 18px;
    height: 18px;
  }

  .close_message {
    width: 28px;
    height: 32px;
  }
}

.message_content{
padding-top: 20px;
}


.send_message_btn {
border-radius: 50px;
background-color:#6adffc;
color: #f4f6f7;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 1.8rem;
transform: translateX(-10%);
position: relative;
height: 30px;
border: none;
padding: 5px;
top: 5px;
cursor: pointer;
font-size: 15px;
text-align: center;
}
.send_message_btn:hover{
filter: brightness(1.1);
}


.send_message_textarea {
position: relative;       
display: flex;
/*justify-content: center;
align-items: center;*/
margin: 0 auto; 
border-radius: 5px;
border: 1px solid #6adffc;
color: black;
width: 300px;
height: 100px;
max-height: 100px;
font-size: 14px;
text-align: left;
}

.send_message_textarea:focus {
outline: none;
border: 1px solid #6adffc;
box-shadow: 1px #6adffc; /* optionnel */
}

/*.emoji_icon {
background-color:rgb(247, 5, 5);
color: #f4f6f7;
width: 30px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 1.8rem;
transform: translateX(-10%);
position: relative;
height: 30px;
border: none;
padding: 5px;
top: 5px;
cursor: pointer;
}*/

.emoji_file_icons_container {
/*display: flex;
justify-content: center;
align-items: center; 
margin-top: 1.8rem;*/

background-color:white;
color: #f4f6f7;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 1.8rem;
transform: translateX(-10%);
position: relative;
height: 30px;
border: none;
padding: 5px;
top: 5px;


}

/*.emoji_icon {
background-color: white;  
color: #f4f6f7;
width: 30px;
height: 30px;
border: none;
cursor: pointer;
margin: 0 5px;
display: flex;
justify-content: center;
align-items: center; 
}*/

/*
.add_file_icon {
background-color: white;  
color: #f4f6f7;
width: 30px;
height: 30px;
border: none;
cursor: pointer;
margin: 0 5px;
display: flex;
justify-content: center;
align-items: center; 
background-image: url('image-icons/photo-icon.png');
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: center;
}


.add_file_icon::-webkit-file-upload-button{
visibility: hidden;
}*/


.emoji_popup {
position: absolute;
bottom: 260px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
padding: 10px;
border: 1px solid #ddd;
border-radius: 10px;
display: none;
width: 300px;
max-height: 100px;
overflow-y: auto;
}

.emoji_container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.emoji_popup .close {
position: absolute;
top: 5px;
right: 5px;
font-size: 20px;
cursor: pointer;
}

.emoji {
margin: 5px;
background-color: #fff;
border: none;
font-size: 20px;
cursor: pointer;
}


/*****/
.chat_messages {
height: 300px;
overflow-y: auto;
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
background: #f4f6f7;
border-radius: 10px;
}

/* messages */
.message {
max-width: 70%;
padding: 10px;
border-radius: 10px;
font-size: 14px;
word-wrap: break-word;
}

.message.sent {
align-self: flex-end;
background: #b7ebfa;
/*background: #6adffc;*/
/*color: white;*/
color: rgb(36, 35, 35);
}

.message.received {
align-self: flex-start;
background: #e5e5ea;
}

.delete_msg,
.reply_msg {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
min-height: 28px;
padding: 0 4px;
border: 0;
background: transparent;
color: #333;
font-size: 15px;
line-height: 1;
vertical-align: middle;
cursor: pointer;
touch-action: manipulation;
user-select: none;
}

.delete_msg {
margin-left: 6px !important;
}

.reply_msg {
margin-left: 6px !important;
}

.delete_msg:hover,
.delete_msg:focus-visible,
.reply_msg:hover,
.reply_msg:focus-visible {
color: #111;
outline: none;
filter: brightness(0.88);
}



/* input */
.chat_input_container {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
background: #f1f1f1;
border-radius: 30px;
padding: 5px 10px;
}

#chat_input {
flex: 1;
border: none;
outline: none;
resize: none;
background: transparent;
max-height: 80px;
overflow-y: auto;
font-size: 14px;
}

#chat_input:disabled {
color: #8a8a8a;
cursor: not-allowed;
}

/* emoji */
.emoji_icon {
cursor: pointer;
font-size: 20px;
}

/* send button */
.send_icon {
background: #6adffc;
color: white;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}

.send_icon:hover {
filter: brightness(1.1);
}

.kopargo-access-locked .send_icon,
.kopargo-access-locked .chat_header_video_call,
.send_icon.is-access-disabled,
.chat_header_video_call.is-access-disabled {
opacity: 0.48;
filter: grayscale(0.1);
}

.chat_security_label {
margin-top: 6px;
text-align: center;
font-size: 10px;
font-weight: 400;
line-height: 1.2;
color: #7a8a8f;
letter-spacing: 0;
}

.tick {
  font-size: 11px;
  margin-left: 5px;
  opacity: 0.6;
}

.tick.seen {
  /*color: #0084ff;*/ /* bleu WhatsApp */
  color: #fbfbfb; /* bleu WhatsApp */
  opacity: 1;
}

.reactions {
  margin-top: 3px;
  font-size: 13px;
  display: flex;
  gap: 5px;
}

.reaction-btn {
  cursor: pointer;
  opacity: 0.6;
}

.reaction-btn:hover {
  opacity: 1;
}

/*******/










/* gauche */


.chat_list_content {
  position: absolute;
  top: 55px;
  left: 0;

  width: 280px; /* 🔥 plus confortable */
  height: calc(100vh - 55px); /* 🔥 prend toute la hauteur écran */

  background-color: white;
  overflow-y: auto;

  display: flex;
  flex-direction: column;

  border: 1px solid #6adffc;

  scrollbar-color: #6adffc #f0f0f0;
  scrollbar-width: thin;
}



.chat_item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  width: 100%;
  min-height: 62px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  cursor: pointer; /* 🔥 FIX */
  position: relative; /* 🔥 IMPORTANT POUR BADGE */
}


.chat_item:hover {
  background: #f5f5f5;
}

.chat_item_info {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  padding-right: 28px;
}

.delete_chat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 32px;
  min-width: 26px;
  cursor: pointer;
  line-height: 1;
  font-size: 17px;
  flex: 0 0 26px;
  color: #444;
  background: transparent;
  border: 0;
  box-sizing: border-box;
  z-index: 1;
  transition: background 0.15s ease, transform 0.15s ease;
}

.delete_chat:hover,
.delete_chat:focus-visible {
  background: transparent;
  transform: scale(1.04);
}

@media (max-width: 768px) {

  .chat_list_content {
    width: 100%;        /* prend tout l’écran */
    z-index: 5;
  }

  .chat_item {
    padding: 8px 14px 8px 10px;
    gap: 9px;
  }

  .delete_chat {
    width: 30px;
    height: 36px;
    min-width: 30px;
    flex-basis: 30px;
    font-size: 18px;
  }

}



.chat_badge {
  position: absolute;
  right: 54px;
  top: 50%;
  transform: translateY(-50%);

  width: 18px;
  height: 18px;

  background: red;
  color: white;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
  font-weight: bold;

  line-height: 1; /* 🔥 clé pour éviter ovale */
}

@media (max-width: 768px) {
  .chat_badge {
    right: 60px;
  }
}

.chat_avatar {
  width: 45px;
  height: 45px;
  min-width: 45px; /* 🔥 empêche l’écrasement */
  border-radius: 50%;
  object-fit: cover; /* 🔥 image bien cadrée */
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  background: #eee; /* fallback si image lente */
}


.chat_avatar_wrapper {
  position: relative;
  width: 45px;
  height: 45px;
  min-width: 45px;
  border-radius: 50%;
  box-sizing: border-box;
}
/* 🔥 ONLINE INDICATOR POUR CHAT UNIQUEMENT */
.chat_avatar_wrapper.chat_profile_link {
  cursor: pointer;
}

.chat_avatar_wrapper.chat_profile_link:hover .chat_avatar,
.chat_avatar_wrapper.chat_profile_link:focus-visible .chat_avatar {
  outline: 2px solid #6adffc;
  outline-offset: 2px;
}

.chat_online_indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  z-index: 2;
  background-color: #28a745;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}

.no_messages_text {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;     /* Centre verticalement */
    min-height: 100vh;       /* Prend toute la hauteur de l'écran */
    text-align: center;
    padding: 40px 20px;
    color:#6adffc;
    font-size: 18px;
    font-weight: bold;
    box-sizing: border-box;  /* Évite les barres de défilement dues au padding */
    z-index: 10;
}

.flash_empty_text {
    flex: 0 0 100%;
    display: none;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 140px);
    text-align: center;
    padding: 40px 20px;
    color: #6adffc;
    font-size: 18px;
    font-weight: bold;
    box-sizing: border-box;
}

.flash_empty_text.error {
    color: #d33;
}

.kopargo_location_locked {
    overflow: auto;
}

.kopargo_location_gate {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 16px;
    transform: translateX(-50%);
    display: none;
    width: min(420px, calc(100vw - 24px));
    padding: 0;
    background: transparent;
    z-index: 999999;
    box-sizing: border-box;
    pointer-events: none;
}

.kopargo_location_gate.is-visible {
    display: block;
}

.kopargo_location_gate_panel {
    width: 100%;
    background: #fff;
    border: 1px solid #6adffc;
    border-radius: 8px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 14px 38px rgba(0,0,0,0.16);
    box-sizing: border-box;
    pointer-events: auto;
}

.kopargo_location_gate_icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    background: #6adffc;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kopargo_location_gate_panel h2 {
    margin: 0 0 8px;
    color: #111;
    font-size: 17px;
    line-height: 1.2;
}

.kopargo_location_gate_panel p {
    margin: 0 0 8px;
    color: #333;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 500;
}

.kopargo_location_gate_note {
    color: #666 !important;
    font-size: 12px !important;
}

.kopargo_location_gate_status {
    min-height: 18px;
    margin: 6px 0 10px;
    color: #d33;
    font-size: 12px;
    font-weight: 700;
}

.kopargo_location_gate_button {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 6px;
    background: #6adffc;
    color: #111;
    font-weight: 800;
    cursor: pointer;
}

.kopargo_location_gate_button:disabled {
    opacity: 0.7;
    cursor: wait;
}

@media (max-width: 520px) {
    .kopargo_location_gate {
        bottom: 10px;
        width: calc(100vw - 16px);
    }

    .kopargo_location_gate_panel {
        padding: 12px;
    }
}



/***************/




.emoji_popup_about {
position: absolute;
bottom: 260px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
padding: 10px;
border: 1px solid #ddd;
border-radius: 10px;
display: none;
width: 300px;
max-height: 100px;
overflow-y: auto;
}

.emoji_about_container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.emoji_popup_about .close_about {
position: absolute;
top: 5px;
right: 5px;
font-size: 20px;
cursor: pointer;
}

.emoji_about {
margin: 5px;
background-color: #fff;
border: none;
font-size: 20px;
cursor: pointer;
}



.emoji_file_icons_about_container {
background-color:white;
color: #f4f6f7;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 1.8rem;
transform: translateX(-10%);
position: relative;
height: 30px;
border: none;
padding: 5px;
top: 5px;


}

.emoji_icon_about {
background-color: white;  
color: #f4f6f7;
width: 30px;
height: 30px;
border: none;
cursor: pointer;
margin: 0 5px;
display: flex;
justify-content: center;
align-items: center; 
}

/************/

.emoji_popup_signup {
position: absolute;
bottom: 260px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
padding: 10px;
border: 1px solid #ddd;
border-radius: 10px;
display: none;
width: 300px;
max-height: 100px;
overflow-y: auto;
}

.emoji__signup_container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.emoji_popup_signup .close_about_signup {
position: absolute;
top: 5px;
right: 5px;
font-size: 20px;
cursor: pointer;
}

.emoji_about_signup {
margin: 5px;
background-color: #fff;
border: none;
font-size: 20px;
cursor: pointer;
}


.emoji_popup_about_signup {
position: absolute;
bottom: 260px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
padding: 10px;
border: 1px solid #ddd;
border-radius: 10px;
display: none;
width: 300px;
max-height: 100px;
overflow-y: auto;
}

.emoji_about_signup_container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.emoji_popup_about_signup .close_about_signup {
position: absolute;
top: 5px;
right: 5px;
font-size: 20px;
cursor: pointer;
}

.emoji_about_signup {
margin: 5px;
background-color: #fff;
border: none;
font-size: 20px;
cursor: pointer;
}



.emoji_file_icons_about_signup_container {
background-color:white;
color: #f4f6f7;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 1.8rem;
transform: translateX(-10%);
position: relative;
height: 30px;
border: none;
padding: 5px;
top: 5px;


}

.emoji_icon_about_signup {
background-color: white;  
color: #f4f6f7;
width: 30px;
height: 30px;
border: none;
cursor: pointer;
margin: 0 5px;
display: flex;
justify-content: center;
align-items: center; 
}


/***********************/
.photo_title {
margin: 10px 0;
font-size: 18px;
font-weight: bold;
/*color: #333;*/
color: #6adffc;
text-align: center;
}

.photo_content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
top: 80px;
background-color: white;
width: 450px;
min-height: 200px;
max-height: 400px;
overflow-y: auto;
color: whitesmoke;
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
/*border: 1px solid rgb(20, 19, 19);*/
border: 1px solid #6adffc;
margin-bottom: 20px;
}

.photo_gallery_container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-grow: 1;
}

.photo_gallery {
display: flex;
flex-wrap: wrap;
}

.add_photo_button {
width: 100px;
height: 100px;
margin: 5px;
background-color: #f0f0f0;
border: none;
cursor: pointer;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}

.add_photo_button img {
width: 50px;
height: 50px;
}

.photo_gallery img {
width: 100px;
height: 100px;
margin: 5px;
cursor: pointer;
object-fit: cover;
object-position: center; /* Ajouté pour centrer les images */
}

/******************/

.gallery-image-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}

.gallery-image-popup img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
}

.gallery-image-popup .close {
position: absolute;
top: 20px;
right: 20px;
font-size: 40px;
color: #fff;
cursor: pointer;
}

/******************/
.image-container {
position: relative;
display: inline-block;
}

.delete-button {
position: absolute;
top: 5px;
right: 5px;
background-color: transparent;
border: 1px solid #ccc;
cursor: pointer;
border-radius: 2px;
padding: 5px;
}

.delete-menu {
position: absolute;
top: 30px;
right: 0;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
display: none;
z-index: 1;
}

.delete-menu span {
color: #333;
cursor: pointer;
}

.delete-menu span:hover {
  color: #666;
}

/***************/

.loader {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 20px;
border-radius: 10px;
font-size: 24px;
font-weight: bold;
}



/***** VIDEO *****/
.video_title {
margin: 10px 0;
font-size: 18px;
font-weight: bold;
color: #6adffc;
text-align: center;
}

.video_content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
top: 80px;
background-color: white;
width: 450px;
min-height: 200px;
max-height: 400px;
overflow-y: auto;
color: whitesmoke;
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
/*border: 1px solid rgb(20, 19, 19);*/
border: 1px solid #6adffc;
margin-bottom: 20px;
}

.video_gallery_container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-grow: 1;
}

.video_gallery {
display: flex;
flex-wrap: wrap;
}

.add_video_button {
width: 100px;
height: 100px;
margin: 5px;
background-color: #f0f0f0;
border: none;
cursor: pointer;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}

.add_video_button img {
width: 50px;
height: 50px;
}

.video_gallery video {
width: 100px;
height: 100px;
margin: 5px;
cursor: pointer;
object-fit: cover;
object-position: center; /* Ajouté pour centrer les vidéos */
}  

/******************/

.video-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}

.video-popup video {
max-width: 90%;
max-height: 90%;
object-fit: contain;
}

.video-popup .close {
position: absolute;
top: 20px;
right: 20px;
font-size: 40px;
color: #fff;
cursor: pointer;
}

/******************/
.video-container {
position: relative;
display: inline-block;
}

/* Responsive profile media grid */
.photo_content,
.video_content {
width: min(100% - 24px, 450px);
max-height: none;
overflow: visible;
box-sizing: border-box;
padding: 0 10px 14px;
border-radius: 8px;
}

.photo_gallery_container,
.video_gallery_container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
box-sizing: border-box;
}

.photo_gallery,
.video_gallery {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
box-sizing: border-box;
}

.image-container,
.video-container,
.add_photo_button,
.add_video_button {
width: clamp(88px, 25vw, 108px);
height: clamp(88px, 25vw, 108px);
margin: 0;
box-sizing: border-box;
border-radius: 8px;
flex: 0 0 auto;
}

.image-container,
.video-container {
border: 2px solid #6adffc;
background: #f8feff;
overflow: visible;
}

.add_photo_button,
.add_video_button {
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed #6adffc;
background: #f8feff;
}

.add_photo_button img,
.add_video_button img {
width: 46%;
height: 46%;
object-fit: contain;
}

.image-container img,
.video-container video,
.photo_gallery img,
.video_gallery video {
width: 100%;
height: 100%;
margin: 0;
display: block;
object-fit: cover;
border-radius: 6px;
}

.delete-button,
.delete-video-button {
background-color: rgba(255, 255, 255, 0.92);
border: 1px solid #6adffc;
min-width: 26px;
min-height: 26px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
z-index: 2;
}

@media (max-width: 640px) {
.profile_photo,
.profile_photo_wrapper {
width: 118px;
height: 118px;
}

.edit_photo_icon {
width: 36px;
height: 36px;
top: 38px;
}

.profile_content,
.photo_content,
.video_content {
width: min(100% - 20px, 450px);
}

.profile_name,
.about {
font-size: 13px;
line-height: 1.35;
}

.photo_title,
.video_title {
font-size: 16px;
}

.image-container,
.video-container,
.add_photo_button,
.add_video_button {
width: clamp(82px, 27vw, 104px);
height: clamp(82px, 27vw, 104px);
}
}

.delete-video-button {
position: absolute;
top: 5px;
right: 5px;
background-color: transparent;
border: 1px solid #ccc;
cursor: pointer;
border-radius: 2px;
padding: 5px;
}

.delete-video-menu {
position: absolute;
top: 30px;
right: 0;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
display: none;
z-index: 1;
}

.delete-video-menu span {
color: #333;
cursor: pointer;
}

.delete-video-menu span:hover {
color: #666;
}

.delete-video-button {
background-color: rgba(255, 255, 255, 0.92);
border: 1px solid #6adffc;
min-width: 26px;
min-height: 26px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
z-index: 2;
}

.gallery-image-popup,
.video-popup {
z-index: 30000;
}


/***** FLASH *****/
.flash_title {
margin: 10px 0;
font-size: 15px;
font-weight: bold;
color: #6adffc;
text-align: center;
}

.flash_content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
top: 80px;
background-color: white;
width: min(100% - 24px, 450px);
min-height: 100px;
max-height: 50px;
overflow-y: auto;
color: whitesmoke;
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
/*border: 1px solid rgb(20, 19, 19);*/
/*border: 1px solid #6adffc;*/
border: none;
margin-bottom: 20px;
box-sizing: border-box;
}

.flash_icon_container {
border: none;
}


.flash-button {
font-size: 30px;
background: none;
border: none;
cursor: pointer;
transition: 0.2s;
}

.flash-button:hover {
    transform: scale(1.2);
}

.flash-button:disabled {
opacity: 0.4;
cursor: not-allowed;
}

.cancel-flash-button {
margin-top: 10px;
background: transparent;
border: 1px solid red;
color: red;
padding: 5px 10px;
cursor: pointer;
}





/***** REPORT USER *****/
.report_user_title,
.block_user_title {
margin: 10px 0;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
color: #7a7a7a;
text-align: center;
}

.report_user_content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
top: 80px;
background-color: white;
width: min(100% - 24px, 450px);
min-height: 100px;
max-height: 50px;
overflow-y: auto;
color: whitesmoke;
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
/*border: 1px solid rgb(20, 19, 19);*/
/*border: 1px solid #6adffc;*/
border: none;
margin-bottom: 20px;
box-sizing: border-box;
}

.report_user_icon_container {
border: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}


.report_user_button,
.block_user_button {
font-size: 30px;
background: none;
border: none;
cursor: pointer;
transition: 0.2s;
}

.report_user_button:hover,
.block_user_button:hover {
transform: scale(1.2);
}

.report_user_button:disabled,
.block_user_button:disabled {
opacity: 0.4;
cursor: not-allowed;
}









/**** UPROFILE****/
.empty_icon {
width: 100px;
height: 100px;
margin: 5px;
/*background-color: #f0f0f0;*/
background: 0;
background-image: url('image-icons/empty-icon.png');
border: none;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}

.empty_icon img {
width: 50px;
height: 50px;
}


/* Adaptation des styles existants pour le bouton "Report" (les 3 petits points) */
/* Utilise tes styles pour .delete-button */
.report-button-ellipsis {
position: absolute;
top: 5px;
right: 5px;
background-color: transparent;
border: 1px solid #ccc;
cursor: pointer;
border-radius: 2px;
padding: 5px;
color: #333; /* Pour que les points soient visibles */
font-size: 16px; /* Ajuster la taille des points si besoin */
line-height: 1; /* Pour mieux centrer les points */
display: flex;
align-items: center;
justify-content: center;
}

.report-button-ellipsis:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Effet au survol */
}

/* Utilise tes styles pour .delete-menu */
.report-menu {
position: absolute;
top: 30px; /* Aligné avec la position de ton .delete-menu */
right: 0;
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
display: none; /* Masqué par défaut */
z-index: 101; /* Pour s'assurer qu'il est au-dessus du reste */
white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Ajoute une ombre pour un meilleur rendu */
border-radius: 2px;
}

.report-menu .report-option {
    color: #333;
    cursor: pointer;
    display: block; /* Pour que le span prenne toute la largeur cliquable */
    padding: 5px 0;
}

.report-menu .report-option:hover {
    color: #666;
    background-color: #f0f0f0; /* Souligne l'option au survol */
}

/* Assure-toi que les conteneurs (image-container, video-container) sont position: relative */
.image-container, .video-container {
    position: relative; /* Indispensable pour positionner les boutons absolus */
    /* ... le reste de tes styles pour image-container / video-container ... */
}

/* Z-index pour les popups d'image et vidéo pour s'assurer qu'ils sont au-dessus de tout */
.gallery-image-popup, .video-popup {
    z-index: 30000; /* Au-dessus du headbar fixe sur mobile. */
}

/* FIN PROFILE AND UPROFILE*/



/* DEBUT USER PROFILES SCROLL HOME*/

/*.user_profile_scroll_content{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
top: 60px;
background-color: white;
width: 450px;
min-height: 150px;
color: whitesmoke;
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid rgb(20, 19, 19);

}*/



/* Styles pour le conteneur principal du flux d'utilisateurs */
.user_profile_scroll_content {
    position: relative;
    top: 60px; /* Conserver le décalage si tu as un en-tête fixe */
    background-color: white;
    min-height: 150px;
    color: black;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    border: 0; /* Suppression de la bordure comme demandé */
    margin: 0 auto; /* Pour centrer le conteneur sur la page */
    padding: clamp(12px, 2.5vw, 28px); /* Padding global pour l'intérieur du conteneur */

    /* NOUVEAUX STYLES POUR LA GRILLE DES CARTES UTILISATEUR */
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 3vw, 28px); /* Espacement entre les cartes */
    /* Ajuste la taille des colonnes de manière réactive :
       minmax(140px, 1fr) pour des cartes un peu plus petites */
    /*grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));*/
    align-items: start;
    justify-content: center; /* Centre les éléments dans la grille si l'espace est suffisant */

    /* Limite la largeur maximale du conteneur sur les grands écrans */
    max-width: 1100px;
    /* Prend presque toute la largeur disponible sur les écrans plus petits,
       avec 20px de marge de chaque côté (total 40px) */
    width: min(100% - 24px, 1100px);
    box-sizing: border-box; /* Inclut padding et border dans la largeur */

    /* Ces lignes doivent être supprimées/commentées si le scroll est sur la fenêtre (approche actuelle) */
    /* overflow-y: scroll; */
    /* max-height: 80vh; */
}

/* Styles pour les éléments utilisateur individuels (les cartes) */
.user-card {
    display: flex;
    flex-direction: column; /* L'image et la distance sont empilées */
    align-items: center; /* Centre horizontalement l'image et la distance */
    justify-content: space-between; /* Pour bien répartir image et texte si les hauteurs varient */
    padding: 12px; /* Padding interne pour chaque carte */
    border: 1px solid #eee; /* Bordure légère */
    border-radius: 8px;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: background-color 0.2s ease;
    
    min-height: 186px;
    height: auto;
    box-sizing: border-box; /* Inclut padding et border dans la hauteur */
    width: 100%;
    max-width: 165px;
    min-width: 0;
    flex: 0 1 165px;
    margin: 0;
    
}

.user-card:hover {
    background-color: #e9e9e9;
}

.end-of-content-separator {
    flex: 0 0 100%;
}

/* --- STYLES POUR L'AFFICHAGE DU STATUT EN LIGNE DANS LES CARTES --- */
/* Conteneur d'image pour positionner l'indicateur dessus */
.profile-image-container {
    position: relative; /* Indispensable pour positionner le point vert */
    width: 120px; /* Doit correspondre à la largeur de l'image */
    height: 120px; /* Doit correspondre à la hauteur de l'image */
    border-radius: 50%;
    margin-bottom: 5px; /* Petit espace sous l'image */
    flex-shrink: 0;
    overflow: visible;
    box-sizing: border-box;
}

/* L'image elle-même prend toute la place dans son conteneur */
.user-card img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
    /*border: 2px solid #ddd;*/
      border: 1px solid #6adffc; /* Couleur de bordure ajustée */
}

/* L'indicateur 'en ligne' (le petit point vert) sur les cartes */
.online-indicator {
    position: absolute;
    bottom: 8px; /* Positionne le point sur la courbe du rond */
    right: 5px; /* Positionne le point à droite de l'image */
    width: 15px; /* Taille du point */
    height: 15px;
    z-index: 2;
    pointer-events: none;
    background-color: #28a745; /* Vert pour en ligne */
    border-radius: 50%;
    border: 2px solid white; /* Petite bordure blanche pour le faire ressortir */
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2); /* Légère ombre pour plus de profondeur */
}






.profile-image-container .online-indicator {
    right: 8px;
}

.new-flash-indicator {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #e55353;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
    z-index: 3;
    pointer-events: none;
}

.search_results .profile-image-container .online-indicator {
    bottom: 5px;
    right: 5px;
}

/* Styles pour l'affichage de la distance dans la carte */
.user-card .distance {
    margin-top: 5px;
    font-size: 14px;
    color: #555;
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
}

/* Styles pour le popup (initialement caché) */
.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 11000;
}

.popup-content {
    background: white;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
    color: black;
    position: relative; /* Indispensable pour positionner le bouton de fermeture */
    
}

.popup-content .close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #aaa;
}

/* Conteneur pour l'image de profil du popup, nécessaire pour l'indicateur */
.popup-profile-image-container {
    position: relative;
    display: inline-block; /* Pour que le conteneur prenne la taille de l'image */
    width: 150px; /* Taille de l'image */
    height: 150px; /* Taille de l'image */
    border-radius: 50%;
    margin-bottom: 15px; /* Espace sous le conteneur de l'image */
    overflow: visible;
    box-sizing: border-box;
   
}

/* L'image elle-même dans le popup */
.popup-content .popup-profile-image {
    width: 100%; /* Prend toute la taille de son conteneur */
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
    border: 1px solid #6adffc; /* Couleur de bordure ajustée */
    margin: 0; /* Retire la marge inférieure qui est maintenant sur le conteneur */
    
}

/* L'indicateur 'en ligne' (le petit point vert) dans le popup */
/* On utilise la classe .popup-online-status et son pseudo-élément ::before */
.popup-online-status {
    position: absolute; /* Positionne le span relatif au .popup-profile-image-container */
    bottom: 5px; /* Positionne le point en bas de l'image du popup */
    right: 5px; /* Positionne le point à droite de l'image du popup */
    width: 15px; /* Taille du point */
    height: 15px;
    background-color: transparent; /* Transparent par défaut, couleur définie par la classe .online */
    border-radius: 50%;
    border: 2px solid white; /* Bordure blanche */
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
    z-index: 2; /* S'assure qu'il est au-dessus de l'image */

    /* Masque le span lui-même, seule la couleur de fond sera visible */
    display: block; /* Important pour que width/height/background soient appliqués */
    text-indent: -9999px; /* Cache tout texte potentiellement à l'intérieur */
    overflow: hidden; /* Assure que rien ne dépasse */
}

.popup-online-status.online {
    background-color: #28a745; /* Vert pour en ligne */
}
/* La classe .offline va complètement masquer l'indicateur si l'utilisateur est hors ligne */
.popup-online-status.offline {
    display: none;
}

.popup-profile-image-container .popup-online-status {
    bottom: 14px;
    right: 14px;
}

.popup-content .popup-username {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 5px;
}

.popup-content .popup-distance {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
}

.popup-content .popup-profile-message {
    /* Suppression de 'font-style: italic;' comme demandé */
    color: #333;
    margin-bottom: 20px;
    max-height: 80px; /* Limite la hauteur du message pour éviter un trop grand popup */
    overflow-y: auto; /* Ajoute une barre de défilement si le message est trop long */
    text-align: left;
    padding: 5px 0;
    border-top: 1px solid #eee; /* Ligne de séparation */
    border-bottom: 1px solid #eee; /* Ligne de séparation */
}

.popup-content .view-profile-button {
    background-color: #6adffc; /* Couleur de bouton ajustée */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none; /* Si c'est un lien */
    margin-top: 20px; /* Plus d'espace au-dessus du bouton */
}
.popup-content .view-profile-button:hover {
    background-color: #5ac4df; /* Assombrir légèrement au survol */
}

/* Style pour l'indicateur de chargement (spinner) */
#loading-indicator {
    display: none; /* Masqué par défaut */
    flex: 0 0 30px;
    align-self: center;
    margin: 20px auto;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #6adffc; /* Couleur du spinner ajustée */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite; /* Animation de rotation */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Style pour le séparateur de fin de contenu --- */
/*.end-of-content-separator {
    width: 50%; 
    height: 1px; 
    background-color: #ccc; 
    margin: 40px auto 20px auto; 
    position: relative; 
    border: none; 
}*/

/* --- RESPONSIVITÉ (Media Queries) --- */

/* Pour les écrans mobiles (moins de 768px de large) */
@media (max-width: 768px) {
    .user_profile_scroll_content {
        gap: 14px; 
        padding: 12px; 
        width: min(100% - 16px, 1100px); 
    }

    .user-card {
        min-height: 164px;
        max-width: 150px;
        flex-basis: 150px;
    }

    .profile-image-container {
        width: 90px;
        height: 90px;
    }

    /* Ajustement pour l'indicateur sur les cartes mobiles */
    .online-indicator {
        bottom: 6px;
        right: 6px;
        width: 12px;
        height: 12px;
        border: 1px solid white;
    }

    .profile-image-container .online-indicator {
        right: 6px;
    }

    .popup-content {
        width: 95%; 
        max-width: 300px; 
        padding: 15px; 
    }

    /* Conteneur d'image du popup sur mobile */
    .popup-profile-image-container {
        width: 100px;
        height: 100px;
    }

    /* Indicateur du popup sur mobile */
    .popup-online-status { /* C'est l'élément qui est l'indicateur du popup maintenant */
        bottom: 3px;
        right: 3px;
        width: 12px;
        height: 12px;
        border: 1px solid white;
    }

    .popup-profile-image-container .popup-online-status {
        bottom: 9px;
        right: 9px;
    }

    .popup-content .popup-username {
        font-size: 18px;
    }

    .popup-content .popup-distance,
    .popup-content .popup-profile-message {
        font-size: 13px;
    }

    .popup-content .view-profile-button {
        padding: 8px 15px;
        font-size: 14px;
        margin-top: 15px;
    }

    .end-of-content-separator {
        margin: 30px auto 15px auto;
    }
}

/* Pour les tablettes et écrans intermédiaires (entre 769px et 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .user_profile_scroll_content {
        gap: 20px; 
        width: min(100% - 24px, 1100px);
    }
    .user-card img {
        width: 100%;
        height: 100%;
    }
    .profile-image-container {
        width: 110px;
        height: 110px;
    }
    .online-indicator {
        bottom: 7px;
        right: 7px;
        width: 14px;
        height: 14px;
    }
    .profile-image-container .online-indicator {
        right: 7px;
    }
}














/* FIN USER PROFILES SCROLL HOME */











/*DEBUT FOOTER*/ 

.footer {
    position: relative;
    margin-top: 520px;
    bottom: -800px;
    width: 100%;
    background-color: white;
    color: rgb(146, 146, 146);
    text-align: center;
    font-size: 12px;
    z-index: 5;
}

.footer_inner {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 12px 10px 16px;
    box-sizing: border-box;
}

.footer_brand_line {
    margin: 0 0 8px;
    line-height: 1.45;
}

.footer_links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 7px;
    margin: 0 auto;
}

.footer_link_separator {
    color: rgb(146, 146, 146);
    font-size: 12px;
    line-height: 1.35;
    user-select: none;
}
.footer_links a {
    color: rgb(146, 146, 146);
    font-size: 12px;
    text-decoration: none;
    line-height: 1.35;
}

.footer_links a:hover {
    color: #6adffc;
}

.footer_logo {
    margin: 10px 0 0;
}

.footer_logo img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 9px;
}

.public_page_body .footer {
    margin-top: 34px;
    bottom: auto;
    padding-bottom: 10px;
}
                          
/*FIN FOOTER*/ /* SHOP DIGITAL PRODUCTS */
.shop_page,
.shop_checkout_page,
.shop_admin_page {
    width: 100%;
    min-height: calc(100vh - 80px);
    padding: 78px 12px 36px;
    box-sizing: border-box;
    background: #fff;
}

.shop_shell,
.shop_checkout_shell,
.shop_admin_shell {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.shop_header {
    text-align: center;
    margin: 0 auto 18px;
}

.shop_header h1 {
    margin: 0 0 6px;
    font-size: 28px;
    line-height: 1.15;
    color: #123f49;
}

.shop_header p,
.shop_section_title p {
    margin: 0;
    color: #667b82;
    font-size: 14px;
    line-height: 1.45;
}

.shop_notice {
    width: min(760px, 100%);
    margin: 0 auto 16px;
    padding: 10px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
}

.shop_notice.is-success {
    background: #e8fff4;
    color: #147447;
    border: 1px solid #a9edcb;
}

.shop_notice.is-warning {
    background: #fff8df;
    color: #8a6200;
    border: 1px solid #f1d57a;
}

.shop_notice.is-error {
    background: #fff0f0;
    color: #b42318;
    border: 1px solid #f1b8b8;
}

.shop_downloads,
.shop_books,
.shop_checkout_product,
.shop_checkout_payment,
.shop_admin_form,
.shop_admin_list {
    width: 100%;
    margin: 0 0 22px;
    box-sizing: border-box;
}

.shop_section_title {
    margin-bottom: 12px;
}

.shop_section_title h2 {
    margin: 0 0 4px;
    font-size: 20px;
    color: #123f49;
}

.shop_empty {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #bfeef8;
    border-radius: 8px;
    color: #6f858c;
    font-size: 14px;
    text-align: center;
    padding: 16px;
    box-sizing: border-box;
}

.shop_download_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.shop_download_item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid #e1f8fd;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
    background: #fbfeff;
}

.shop_download_item img,
.shop_admin_product img {
    width: 56px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #d8f7ff;
    background: #fff;
}

.shop_download_item strong,
.shop_admin_product strong {
    display: block;
    color: #143e48;
    font-size: 14px;
    line-height: 1.25;
}

.shop_download_item span,
.shop_admin_product span,
.shop_download_item small,
.shop_admin_product small {
    display: block;
    color: #72898f;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 2px;
}

.shop_download_button {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    border-radius: 6px;
    background: #6adffc;
    color: #063844;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
}

.shop_books_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 180px));
    justify-content: center;
    gap: 14px;
}

.shop_book_card {
    min-width: 0;
    border: 1px solid #e1f8fd;
    border-radius: 8px;
    background: #fff;
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.shop_book_card:hover,
.shop_book_card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
    outline: 2px solid #6adffc;
    outline-offset: 2px;
}

.shop_book_card strong {
    min-height: 34px;
    color: #123f49;
    font-size: 14px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.shop_book_card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #d8f7ff;
    background: #f6fdff;
}

.shop_book_card span,
.shop_book_popup_button,
.shop_admin_form button,
.shop_admin_product button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    border: 0;
    border-radius: 6px;
    background: #6adffc;
    color: #063844;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    padding: 0 12px;
    box-sizing: border-box;
    cursor: pointer;
}

.shop_book_popup {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: rgba(0, 0, 0, 0.42);
    box-sizing: border-box;
}

.shop_book_popup.is-open {
    display: flex;
}

.shop_book_popup_content {
    position: relative;
    width: min(760px, 100%);
    max-height: calc(100vh - 28px);
    overflow: auto;
    display: grid;
    grid-template-columns: minmax(170px, 240px) minmax(0, 1fr);
    gap: 18px;
    background: #fff;
    border-radius: 8px;
    padding: 18px;
    box-sizing: border-box;
}

.shop_book_popup_close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #55747b;
    cursor: pointer;
}

.shop_book_popup_cover img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 7px;
    border: 1px solid #d8f7ff;
}

.shop_book_popup_body h2 {
    margin: 4px 32px 8px 0;
    color: #123f49;
    font-size: 24px;
    line-height: 1.15;
}

.shop_book_popup_body p {
    color: #526b73;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 12px;
}

.shop_book_details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
}

.shop_book_details div,
.shop_checkout_product dl div {
    border: 1px solid #e1f8fd;
    border-radius: 7px;
    padding: 8px;
    box-sizing: border-box;
}

.shop_book_details dt,
.shop_checkout_product dt {
    color: #789097;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 3px;
}

.shop_book_details dd,
.shop_checkout_product dd {
    margin: 0;
    color: #143e48;
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.shop_checkout_shell {
    max-width: 920px;
}

.shop_back_link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    color: #14798a;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.shop_checkout_product {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    border: 1px solid #e1f8fd;
    border-radius: 8px;
    padding: 14px;
    background: #fbfeff;
}

.shop_checkout_product > img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 7px;
    border: 1px solid #d8f7ff;
}

.shop_checkout_product h1 {
    margin: 0 0 8px;
    color: #123f49;
    font-size: 26px;
    line-height: 1.15;
}

.shop_checkout_product p {
    margin: 0 0 12px;
    color: #526b73;
    font-size: 14px;
    line-height: 1.55;
}

.shop_checkout_product dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.shop_checkout_payment {
    width: min(560px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.shop_admin_shell {
    max-width: 980px;
}

.shop_admin_form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    border: 1px solid #e1f8fd;
    border-radius: 8px;
    padding: 14px;
    background: #fbfeff;
}

.shop_admin_form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #123f49;
    font-size: 13px;
    font-weight: 800;
}

.shop_admin_form input,
.shop_admin_form textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid #cfeef5;
    border-radius: 6px;
    padding: 8px;
    box-sizing: border-box;
    font: inherit;
    background: #fff;
}

.shop_admin_form textarea,
.shop_admin_form button,
.shop_admin_checkbox {
    grid-column: 1 / -1;
}

.shop_admin_checkbox {
    flex-direction: row !important;
    align-items: center;
}

.shop_admin_checkbox input {
    width: auto;
    min-height: auto;
}

.shop_admin_list h2 {
    color: #123f49;
    font-size: 20px;
    margin: 0 0 10px;
}

.shop_admin_product {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid #e9f8fb;
    padding: 10px 0;
}

.shop_admin_product form {
    margin: 0;
}

@media (max-width: 720px) {
    .shop_page,
    .shop_checkout_page,
    .shop_admin_page {
        padding: 68px 10px 28px;
    }

    .shop_book_popup_content,
    .shop_checkout_product,
    .shop_admin_form {
        grid-template-columns: 1fr;
    }

    .shop_book_popup_cover,
    .shop_checkout_product > img {
        width: min(220px, 100%);
        margin: 0 auto;
    }

    .shop_book_details,
    .shop_checkout_product dl {
        grid-template-columns: 1fr;
    }

    .shop_admin_product {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .shop_admin_product form {
        grid-column: 1 / -1;
    }

    .shop_admin_product button {
        width: 100%;
    }
}

/* SHOP ADMIN LOGIN */
.shop_admin_login_body,
.shop_admin_body {
    margin: 0;
    min-height: 100vh;
    background: #f4fbfd;
    font-family: Arial, Helvetica, sans-serif;
}

.shop_admin_login_page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    box-sizing: border-box;
}

.shop_admin_login_card {
    width: min(420px, 100%);
    background: #fff;
    border: 1px solid #dff7fc;
    border-radius: 8px;
    padding: 22px;
    box-shadow: 0 16px 40px rgba(16, 65, 74, 0.08);
    box-sizing: border-box;
}

.shop_admin_login_logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
    margin: 0 auto 12px;
}

.shop_admin_login_card h1 {
    margin: 0;
    text-align: center;
    color: #123f49;
    font-size: 24px;
    line-height: 1.2;
}

.shop_admin_login_card p {
    margin: 8px 0 18px;
    text-align: center;
    color: #5d7278;
    font-size: 14px;
    line-height: 1.45;
}

.shop_admin_login_form {
    display: grid;
    gap: 12px;
}

.shop_admin_login_form label {
    display: grid;
    gap: 6px;
    color: #123f49;
    font-size: 13px;
    font-weight: 800;
}

.shop_admin_login_form input,
.shop_admin_login_form select {
    width: 100%;
    height: 42px;
    border: 1px solid #cfeef5;
    border-radius: 6px;
    padding: 0 10px;
    box-sizing: border-box;
    font: inherit;
    background: #fff;
}

.shop_admin_login_form button,
.shop_admin_login_inline_form button,
.shop_admin_topbar button,
.shop_admin_topbar a {
    min-height: 40px;
    border: 0;
    border-radius: 6px;
    padding: 0 14px;
    background: #6adffc;
    color: #09323a;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.shop_admin_login_inline_form {
    margin: 10px 0 0;
    text-align: center;
}

.shop_admin_login_inline_form button {
    background: transparent;
    color: #14798a;
    min-height: auto;
    padding: 8px;
}

.shop_admin_topbar {
    width: min(980px, calc(100% - 20px));
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #dff7fc;
    border-radius: 8px;
    box-sizing: border-box;
}

.shop_admin_topbar strong {
    color: #123f49;
    font-size: 15px;
    white-space: nowrap;
}

.shop_admin_topbar span {
    color: #5d7278;
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: auto;
}

.shop_admin_topbar form {
    margin: 0;
}

@media (max-width: 720px) {
    .shop_admin_login_card {
        padding: 18px;
    }

    .shop_admin_topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .shop_admin_topbar span {
        margin-right: 0;
        white-space: normal;
    }

    .shop_admin_topbar a,
    .shop_admin_topbar button {
        width: 100%;
    }
}
/* SHOP ADMIN BOOK ACTIONS */
.shop_admin_editor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 18px 0 10px;
}

.shop_admin_editor h2 {
    margin: 0;
    color: #123f49;
    font-size: 20px;
    line-height: 1.2;
}

.shop_admin_cancel,
.shop_admin_actions a,
.shop_admin_actions button {
    min-height: 36px;
    border: 0;
    border-radius: 6px;
    padding: 0 12px;
    background: #eefbff;
    color: #0d6574;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.shop_admin_actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.shop_admin_actions form {
    margin: 0;
}

.shop_admin_actions button.is-danger {
    background: #ffecec;
    color: #a32121;
}

@media (max-width: 720px) {
    .shop_admin_editor {
        align-items: stretch;
        flex-direction: column;
    }

    .shop_admin_cancel,
    .shop_admin_actions,
    .shop_admin_actions a,
    .shop_admin_actions form,
    .shop_admin_actions button {
        width: 100%;
    }
}
/* SHOP DOWNLOADS TOP LINK */
.shop_top_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    margin-top: 12px;
    padding: 0 14px;
    border-radius: 6px;
    background: #eefbff;
    color: #0d6574;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    box-sizing: border-box;
}

.shop_top_link i {
    color: #0d6574;
}

@media (max-width: 720px) {
    .shop_top_link {
        width: 100%;
    }
}
/* CENTRAL ADMIN DASHBOARD */
.admin_dashboard_page {
    min-height: 100vh;
    padding: 24px 12px 40px;
    box-sizing: border-box;
    background: #f4fbfd;
}

.admin_dashboard_shell {
    width: min(980px, 100%);
    margin: 0 auto;
}

.admin_dashboard_header {
    padding-top: 12px;
}

.admin_dashboard_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.admin_dashboard_tile {
    display: grid;
    gap: 8px;
    min-height: 170px;
    padding: 18px;
    box-sizing: border-box;
    border: 1px solid #dff7fc;
    border-radius: 8px;
    background: #fff;
    color: #123f49;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(16, 65, 74, 0.07);
}

.admin_dashboard_tile:hover {
    border-color: #6adffc;
}

.admin_dashboard_tile.is-muted {
    opacity: 0.72;
}

.admin_dashboard_icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eafeff;
    color: #129bb2;
    font-size: 20px;
}

.admin_dashboard_tile strong {
    font-size: 18px;
    line-height: 1.25;
}

.admin_dashboard_tile small {
    color: #667b82;
    font-size: 13px;
    line-height: 1.45;
}

.admin_dashboard_tile em {
    margin-top: auto;
    color: #14798a;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
}

@media (max-width: 720px) {
    .admin_dashboard_page {
        padding: 14px 10px 28px;
    }

    .admin_dashboard_grid {
        grid-template-columns: 1fr;
    }

    .admin_dashboard_tile {
        min-height: 148px;
        padding: 16px;
    }
}
.shop_book_category {
    align-self: flex-start;
    max-width: 100%;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #eafeff;
    color: #14798a;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
/* Payment button group alignment */
.subscription_payment_buttons {
    width: min(100%, 420px);
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
}

.subscription_payment_buttons .subscription_provider_note,
.subscription_payment_buttons .subscription_payment_btn,
.subscription_payment_buttons .subscription_payment_separator,
.subscription_payment_buttons .subscription_paypal_container,
.subscription_payment_buttons .subscription_paypal_amount,
.subscription_payment_buttons .subscription_payment_message {
    width: 100%;
    max-width: 100%;
}

.subscription_payment_buttons .subscription_payment_btn {
    flex: 0 0 auto;
}

.shop_checkout_payment {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shop_checkout_payment > .subscription_payment_btn,
.shop_checkout_payment > .subscription_payment_separator,
.shop_checkout_payment > .subscription_paypal_container,
.shop_checkout_payment > .subscription_paypal_amount,
.shop_checkout_payment > .subscription_payment_message {
    width: min(100%, 420px);
    max-width: 420px;
}
/* Shop book popup centering */
.shop_book_popup_body h2 {
    margin: 4px 32px 8px;
    text-align: center;
}

.shop_book_popup_button {
    width: min(100%, 260px);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 720px) {
    .shop_book_popup_body h2 {
        margin: 4px 34px 8px;
    }
}
/* Shop book popup compact download button */
.shop_book_popup_button {
    display: flex;
    width: 190px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14px;
    padding-right: 14px;
    align-self: center;
}

@media (max-width: 720px) {
    .shop_book_popup_button {
        width: 170px;
        max-width: calc(100% - 20px);
    }
}
/* Desktop popup right column alignment */
.shop_book_popup_body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shop_book_popup_body > p,
.shop_book_popup_body .shop_book_details {
    width: 100%;
}

.shop_book_popup_body .shop_book_popup_button {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}
/* Full popup title and action alignment */
.shop_book_popup_title {
    grid-column: 1 / -1;
    margin: 4px 34px 0;
    color: #123f49;
    font-size: 24px;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}

.shop_book_popup_content > .shop_book_popup_button {
    grid-column: 1 / -1;
    justify-self: center;
    align-self: center;
    width: 190px;
    max-width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
}

.shop_book_popup_body {
    align-items: stretch;
}

@media (max-width: 720px) {
    .shop_book_popup_title {
        margin: 4px 34px 0;
        font-size: 22px;
    }

    .shop_book_popup_content > .shop_book_popup_button {
        width: 170px;
    }
}
/* Compact downloads list */
.shop_download_grid {
    justify-content: center;
}

.shop_download_item {
    width: 100%;
    max-width: 420px;
    justify-self: center;
}

.shop_download_button {
    width: 180px;
    max-width: calc(100% - 20px);
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
}

@media (max-width: 520px) {
    .shop_download_item {
        max-width: 100%;
    }

    .shop_download_button {
        width: 170px;
    }
}
/* Group downloads cards on desktop */
@media (min-width: 721px) {
    .shop_download_grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
        justify-content: center;
        gap: 14px;
    }

    .shop_download_item {
        max-width: 420px;
    }
}
/* Shop cart */
.shop_header_actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.shop_top_link span {
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #123f49;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 0 5px;
    box-sizing: border-box;
}

.shop_book_popup_actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.shop_book_popup_actions .shop_book_popup_button {
    margin: 0;
}

.shop_book_cart_button {
    background: #123f49;
    color: #fff;
}

.shop_book_popup_message {
    grid-column: 1 / -1;
    min-height: 18px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    color: #147447;
}

.shop_book_popup_message.is-error {
    color: #b42318;
}

.shop_book_popup_message.is-success {
    color: #147447;
}

.shop_cart_list {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.shop_cart_item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    border: 1px solid #e1f8fd;
    border-radius: 8px;
    padding: 10px;
    background: #fbfeff;
    box-sizing: border-box;
}

.shop_cart_item img {
    width: 64px;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #d8f7ff;
    background: #fff;
}

.shop_cart_item strong {
    display: block;
    color: #123f49;
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.shop_cart_item span,
.shop_cart_item small {
    display: block;
    color: #6e858c;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 2px;
}

.shop_cart_price {
    white-space: nowrap;
    text-align: right;
}

.shop_cart_remove {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 6px;
    background: #fff0f0;
    color: #b42318;
    font-size: 12px;
    font-weight: 800;
    padding: 0 10px;
    cursor: pointer;
}

.shop_cart_summary {
    width: min(560px, 100%);
    margin: 0 auto 18px;
}

.shop_cart_total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #d8f7ff;
    border-radius: 8px;
    background: #f7fdff;
    padding: 12px;
    color: #123f49;
    box-sizing: border-box;
}

.shop_cart_total span {
    font-size: 13px;
    font-weight: 800;
    color: #6e858c;
}

.shop_cart_total strong {
    font-size: 18px;
}

.shop_cart_payment h2 {
    margin: 0 0 12px;
    color: #123f49;
    text-align: center;
    font-size: 20px;
}

@media (max-width: 720px) {
    .shop_header_actions {
        width: 100%;
    }

    .shop_cart_item {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .shop_cart_item img {
        width: 56px;
        height: 74px;
    }

    .shop_cart_price,
    .shop_cart_remove {
        grid-column: 1 / -1;
        width: min(190px, 100%);
        justify-self: center;
        text-align: center;
    }

    .shop_book_popup_actions {
        flex-direction: column;
    }

    .shop_book_popup_actions .shop_book_popup_button {
        width: 190px;
        max-width: calc(100% - 20px);
    }
}
/* Shop cart responsive polish */
.shop_header_actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
}

.shop_header_actions .shop_top_link {
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin-top: 0;
    flex: 0 1 auto;
    white-space: normal;
}

.shop_header_actions .shop_top_link span {
    flex: 0 0 auto;
}

.shop_empty .shop_top_link {
    width: auto;
    max-width: 100%;
}

.shop_cart_page .shop_shell {
    width: min(760px, 100%);
}

.shop_cart_list {
    width: min(620px, 100%);
    margin: 0 auto 16px;
}

.shop_cart_item {
    width: 100%;
    max-width: 620px;
    justify-self: center;
}

.shop_cart_summary {
    width: min(360px, 100%);
    margin: 0 auto 18px;
}

.shop_cart_total {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

@media (max-width: 720px) {
    .shop_header_actions {
        gap: 8px;
        margin-top: 10px;
    }

    .shop_header_actions .shop_top_link {
        width: auto;
        max-width: calc(100% - 12px);
        min-height: 36px;
        padding: 0 11px;
        flex: 0 1 auto;
    }

    .shop_cart_page .shop_shell {
        width: min(430px, 100%);
    }

    .shop_cart_list {
        width: 100%;
        max-width: 420px;
    }

    .shop_cart_item {
        grid-template-columns: 52px minmax(0, 1fr);
        max-width: 420px;
        padding: 10px;
    }

    .shop_cart_item img {
        width: 52px;
        height: 70px;
    }

    .shop_cart_price,
    .shop_cart_remove {
        width: auto;
        min-width: 132px;
        max-width: 100%;
    }

    .shop_cart_summary {
        width: min(320px, 100%);
    }

    .shop_cart_total {
        max-width: 320px;
        padding: 10px 12px;
    }
}
/* Shop downloads top button compact */
.shop_downloads_page .shop_header > .shop_top_link {
    width: auto;
    min-width: 0;
    max-width: max-content;
    margin: 12px auto 0;
    padding: 0 14px;
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .shop_downloads_page .shop_header > .shop_top_link {
        width: auto;
        max-width: calc(100% - 20px);
        white-space: normal;
    }
}
/* Shop cart clear button */
.shop_cart_summary_actions {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.shop_cart_clear {
    width: auto;
    min-width: 150px;
    max-width: 100%;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 6px;
    background: #fff0f0;
    color: #b42318;
    font-size: 12px;
    font-weight: 900;
    padding: 0 12px;
    cursor: pointer;
    box-sizing: border-box;
}

.shop_cart_clear:disabled {
    opacity: 0.65;
    cursor: wait;
}

@media (max-width: 720px) {
    .shop_cart_clear {
        min-width: 142px;
        max-width: calc(100% - 20px);
    }
}
/* Kopargo title and card distance colors */
.user-card .distance,
.search_results .user-card .distance {
    color: #6adffc !important;
}

.subscription_header h1,
.shop_header h1 {
    color: #6adffc !important;
}
/* Kopargo subscription and settings accent titles */
.subscription_status_body > span,
.subscription_details span,
.subscription_plan_text h2,
.subscription_plan_info > span,
.settings_panel > h1 {
    color: #6adffc !important;
}
/* Profile photo gallery button placement */
.photo_gallery_container {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.photo_gallery_container .photo_gallery {
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
}

.photo_gallery_container .add_photo_button {
    margin: 0;
}
/* Profile gallery remove photo backgrounds */
.photo_gallery .image-container {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    overflow: visible;
}

.photo_gallery .image-container img,
.photo_gallery img {
    background: transparent !important;
    border: 0 !important;
}
/* Profile video gallery polish */
.video_gallery_container {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.video_gallery_container .video_gallery {
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
}

.video_gallery_container .add_video_button {
    margin: 0;
}

.video_gallery .video-container {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    overflow: visible;
}

.video_gallery .video-container video,
.video_gallery video {
    background: transparent !important;
    border: 0 !important;
}

/* Protection visuelle des médias publics sur uprofile.php */
.uprofile_protected_media,
.image-container img,
.video-container video,
.gallery-image-popup img,
.video-popup video {
-webkit-user-drag: none;
-webkit-touch-callout: none;
user-select: none;
}
/* Menu click reliability */
.menu_icon {
border: 0;
padding: 0;
appearance: none;
-webkit-appearance: none;
background-color: transparent;
background-position: center;
background-size: 25px 25px;
width: 40px;
height: 40px;
min-height: 40px;
max-width: 40px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}

.menu_icon:focus-visible,
.img_login:focus-visible {
outline: 2px solid #6adffc;
outline-offset: 2px;
}

.menu_content_background,
.logout_ctn_background {
z-index: 20001;
overscroll-behavior: contain;
}

.menu_content_background.is-open,
.logout_ctn_background.is-open {
display: flex;
}

.menu_content,
.logout_content {
z-index: 20002;
pointer-events: auto;
}

.menu-item {
padding: 0;
}

.menu-item a {
width: 100%;
min-height: 44px;
padding: 12px 14px;
box-sizing: border-box;
}

@media screen and (max-width: 380px) {
.menu_icon {
left: 4px;
width: 38px;
height: 38px;
min-height: 38px;
max-width: 38px;
background-size: 24px 24px;
}

.menu_icon ~ .logo {
left: 48px;
}
}
/* Settings account tools */
.settings_tools_section,
.settings_delete_section {
align-items: center;
}

.settings_tool_action {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
min-width: 210px;
}

.settings_tool_btn {
min-height: 38px;
border: 1px solid #d9f6fc;
border-radius: 22px;
padding: 8px 14px;
background: #f8feff;
color: #123f49;
font-weight: bold;
}

.settings_tool_btn i,
.settings_delete_btn i {
color: #6adffc;
font-size: 16px;
}

.settings_delete_section {
border-color: #ffd3d8;
background: #fffafa;
}

.settings_delete_section h2 {
color: #c9263f;
}

.settings_delete_btn,
.settings_delete_confirm_btn,
.settings_delete_cancel_btn {
border: 0;
border-radius: 22px;
min-height: 38px;
padding: 8px 14px;
font-weight: bold;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-sizing: border-box;
}

.settings_delete_btn,
.settings_delete_confirm_btn {
background: #c9263f;
color: #fff;
}

.settings_delete_cancel_btn {
background: #eef8fb;
color: #123f49;
}

.settings_delete_btn i {
color: #fff;
}

.settings_delete_confirm_btn:disabled,
.settings_tool_btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}

#settings_location_message,
#settings_update_message,
#delete_account_message {
width: 100%;
font-size: 12px;
text-align: center;
}

.delete_account_popup {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
z-index: 31000;
padding: 18px;
box-sizing: border-box;
}

.delete_account_popup.is-visible {
display: flex;
}

.delete_account_container {
width: min(420px, 100%);
background: #fff;
border: 1px solid #ffd3d8;
border-radius: 8px;
padding: 18px;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}

.delete_account_header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}

.delete_account_header h2 {
margin: 0;
font-size: 18px;
color: #c9263f;
}

.delete_account_close {
border: 0;
background: transparent;
font-size: 28px;
line-height: 1;
color: #c9263f;
cursor: pointer;
}

.delete_account_container p,
.delete_account_container label {
display: block;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.45;
color: #4d4d4d;
}

.delete_account_container input {
margin-bottom: 10px;
}

.delete_account_actions {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
}

@media (max-width: 640px) {
.settings_tool_action,
.settings_tool_btn {
width: 100%;
align-items: stretch;
}

.settings_delete_btn {
width: auto;
min-width: 190px;
align-self: center;
}

.settings_tool_btn,
.settings_delete_btn {
justify-content: center;
}

.settings_delete_btn {
padding-left: 18px;
padding-right: 18px;
}

.delete_account_actions button {
width: 100%;
}
}
/* PUBLIC FOOTER PAGES */
.public_page_body {
    margin: 0;
    background: #fff;
    color: #123f49;
    min-height: 100vh;
}

.public_page_topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    min-height: 58px;
    padding: 8px 14px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(106, 223, 252, 0.38);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.public_page_brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #123f49;
    text-decoration: none;
    font-weight: 800;
    font-size: 17px;
    white-space: nowrap;
}

.public_page_brand img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
}

.public_page_nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.public_page_nav a,
.public_secondary_link {
    color: #4f6670;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.public_page_nav a:hover,
.public_secondary_link:hover {
    color: #6adffc;
}

.public_page {
    width: 100%;
    min-height: calc(100vh - 120px);
    padding: 54px 12px 20px;
    box-sizing: border-box;
    background: #fff;
}

.public_page_shell {
    width: min(980px, 100%);
    margin: 0 auto;
}

.public_form_shell {
    width: min(760px, 100%);
}

.public_page_header {
    text-align: center;
    margin: 0 auto 28px;
}

.public_page_header h1 {
    margin: 0 0 10px;
    color: #6adffc;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 900;
}

.public_page_header p {
    width: min(760px, 100%);
    margin: 0 auto;
    color: #506872;
    font-size: 15px;
    line-height: 1.55;
}

.public_page_header small {
    display: inline-block;
    margin-top: 10px;
    color: #7a8f96;
    font-size: 12px;
    font-weight: 700;
}

.public_info_sections {
    width: 100%;
}

.public_info_section {
    padding: 18px 0;
    border-bottom: 1px solid rgba(106, 223, 252, 0.28);
}

.public_info_section:first-child {
    border-top: 1px solid rgba(106, 223, 252, 0.28);
}

.public_info_section h2,
.help_item h2,
.help_contact_band h2 {
    margin: 0 0 10px;
    color: #123f49;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
}

.public_info_section p,
.help_item p,
.help_contact_band p {
    margin: 0 0 8px;
    color: #506872;
    font-size: 14px;
    line-height: 1.55;
}

.help_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.help_item {
    border: 1px solid rgba(106, 223, 252, 0.34);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
    box-sizing: border-box;
}

.help_contact_band {
    margin: 22px auto 0;
    padding: 18px 12px;
    text-align: center;
    border-top: 1px solid rgba(106, 223, 252, 0.34);
}

.public_action_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    width: auto;
    min-width: 170px;
    max-width: 100%;
    padding: 0 18px;
    border: 0;
    border-radius: 7px;
    background: #6adffc;
    color: #06323c;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.public_action_button:disabled {
    opacity: 0.7;
    cursor: wait;
}

.problem_report_form {
    width: min(620px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.problem_report_form label {
    display: grid;
    gap: 6px;
    color: #123f49;
    font-size: 13px;
    font-weight: 900;
}

.problem_report_form input,
.problem_report_form select,
.problem_report_form textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(106, 223, 252, 0.64);
    border-radius: 7px;
    padding: 9px 11px;
    box-sizing: border-box;
    color: #123f49;
    background: #fff;
    font-size: 14px;
    outline: none;
}

.problem_report_form textarea {
    min-height: 150px;
    resize: vertical;
}

.problem_report_form input:focus,
.problem_report_form select:focus,
.problem_report_form textarea:focus {
    border-color: #11c9f6;
    box-shadow: 0 0 0 3px rgba(106, 223, 252, 0.22);
}

.problem_report_form small {
    color: #6d8188;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}

.problem_submit_btn {
    justify-self: center;
    margin-top: 4px;
}

.problem_report_message {
    display: none;
    width: 100%;
    padding: 10px 12px;
    border-radius: 7px;
    box-sizing: border-box;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
}

.problem_report_message.is-success,
.problem_report_message.is-error {
    display: block;
}

.problem_report_message.is-success {
    color: #137846;
    background: #e8fff4;
    border: 1px solid #a9edcb;
}

.problem_report_message.is-error {
    color: #b42318;
    background: #fff0f0;
    border: 1px solid #f1b8b8;
}

.problem_report_honey {
    position: absolute;
    left: -9999px;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
}

.public_secondary_link {
    justify-self: center;
    margin-top: 2px;
}

@media (max-width: 760px) {
    .public_page_topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .public_page_nav {
        width: 100%;
        justify-content: center;
        gap: 7px 10px;
    }

    .public_page_nav a {
        font-size: 12px;
    }

    .public_page {
        padding: 34px 12px 14px;
    }

    .public_page_header h1 {
        font-size: 25px;
    }

    .public_page_header p,
    .public_info_section p,
    .help_item p,
    .help_contact_band p {
        font-size: 13px;
    }

    .help_grid {
        grid-template-columns: 1fr;
    }

    .public_action_button {
        min-width: 0;
        width: auto;
        max-width: min(100%, 260px);
    }

    .footer_links {
        gap: 7px 5px;
    }
}
.admin_tool_page {
    min-height: 100vh;
    padding: 92px 18px 36px;
}

.admin_tool_shell {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.admin_search_form,
.admin_filter_tabs {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    flex-wrap: wrap;
}

.admin_search_form input {
    width: min(460px, 100%);
    border: 1px solid #d7eef5;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 15px;
}

.admin_search_reset {
    display: flex;
    justify-content: center;
    margin: -6px auto 18px;
}

.admin_search_reset a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    border: 1px solid #d7eef5;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font-weight: 800;
    padding: 10px 16px;
    text-decoration: none;
    box-sizing: border-box;
}
.admin_search_form button,
.admin_filter_tabs a,
.admin_user_action button,
.admin_reply_form button,
.admin_status_form button {
    border: 0;
    border-radius: 8px;
    background: #6adffc;
    color: #0f172a;
    font-weight: 800;
    padding: 11px 16px;
    text-decoration: none;
    cursor: pointer;
}

.admin_filter_tabs a.is-active {
    background: #0f172a;
    color: #ffffff;
}

.admin_user_list,
.admin_report_list {
    display: grid;
    gap: 14px;
}

.admin_user_card,
.admin_report_card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) minmax(240px, 320px);
    gap: 14px;
    align-items: start;
    background: #ffffff;
    border: 1px solid #d7eef5;
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.admin_user_card.is-restricted {
    border-color: #f4a6b8;
}

.admin_user_card img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #6adffc;
}

.admin_user_info,
.admin_user_action,
.admin_reply_form,
.admin_status_form {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.admin_user_info strong,
.admin_report_card strong {
    color: #0f172a;
    font-size: 17px;
}

.admin_user_info span,
.admin_user_info small,
.admin_report_meta span,
.admin_report_card span,
.admin_report_replies small {
    color: #52616b;
    overflow-wrap: anywhere;
}

.admin_user_info em,
.admin_report_card header em {
    width: max-content;
    border-radius: 999px;
    padding: 4px 10px;
    background: #eefbff;
    color: #0f172a;
    font-style: normal;
    font-weight: 800;
}

.admin_user_card.is-restricted .admin_user_info em {
    background: #fff0f4;
    color: #b00035;
}

.admin_user_action textarea,
.admin_reply_form textarea {
    width: 100%;
        max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: block;
    border: 1px solid #d7eef5;
    border-radius: 8px;
    padding: 10px;
    resize: vertical;
}

.admin_user_action button.is-danger {
    background: #ffedf2;
    color: #b00035;
}

.admin_user_action button.is-success {
    background: #e8fff7;
    color: #006b4f;
}

.admin_user_action button.is-delete {
    background: #ffe7e7;
    color: #b42318;
}

.admin_report_card {
    grid-template-columns: 1fr;
}

.admin_report_card header,
.admin_report_meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.admin_report_message {
    margin: 0;
    padding: 12px;
    background: #f8fcfd;
    border: 1px solid #e1f4f8;
    border-radius: 8px;
    line-height: 1.55;
}

.admin_report_replies {
    border: 1px solid #d7eef5;
    border-radius: 8px;
    padding: 10px;
}

.admin_report_replies div {
    border-top: 1px solid #edf7fa;
    margin-top: 8px;
    padding-top: 8px;
}

.admin_status_form button {
    background: #f3f6f8;
}

button.shop_download_button {
    border: 0;
    font: inherit;
}

@media screen and (max-width: 760px) {
    .admin_tool_page {
        padding: 84px 10px 28px;
    }

    .admin_user_card {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .admin_user_card img {
        width: 52px;
        height: 52px;
    }

    .admin_user_action {
        grid-column: 1 / -1;
    }

    .admin_search_form input,
    .admin_search_form button,
    .admin_filter_tabs a,
    .admin_user_action button,
    .admin_reply_form button,
    .admin_status_form button {
        width: 100%;
    }
}
.is-profile-edit-locked {
    opacity: 0.55;
    cursor: not-allowed !important;
}

.profile-edit-restricted #name,
.profile-edit-restricted #about_update_textarea {
    cursor: not-allowed;
}
.admin_ticket_thread {
    display: grid;
    gap: 10px;
    margin: 4px 0 10px;
}

.admin_ticket_entry {
    border: 1px solid #d7eef5;
    border-radius: 8px;
    padding: 12px;
    background: #f8fcfd;
}

.admin_ticket_entry.is-admin {
    background: #eefbff;
    border-color: #bdefff;
}

.admin_ticket_entry.is-user {
    background: #ffffff;
}

.admin_ticket_entry small {
    display: block;
    color: #52616b;
    font-weight: 800;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

.admin_ticket_entry p {
    margin: 0;
    color: #1f2d33;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
/* Admin problem report attachments */
.admin_ticket_attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.admin_ticket_attachment {
    width: auto;
    max-width: 180px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d7eef5;
    border-radius: 8px;
    padding: 7px 9px;
    background: #ffffff;
    color: #123f49;
    text-decoration: none;
    box-sizing: border-box;
}

.admin_ticket_attachment:hover,
.admin_ticket_attachment:focus-visible {
    border-color: #6adffc;
    background: #f5fdff;
    outline: none;
}

.admin_ticket_attachment img {
    width: 54px;
    height: 54px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #6adffc;
    flex: 0 0 auto;
}

.admin_ticket_attachment i {
    color: #d92d20;
    font-size: 26px;
    flex: 0 0 auto;
}

.admin_ticket_attachment span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
}

.admin_ticket_attachment small {
    color: #6adffc;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin_ticket_attachment.is-pdf {
    max-width: 220px;
}

.admin_report_card.is-live-updated {
    animation: adminTicketLivePulse 1.4s ease-out;
}

@keyframes adminTicketLivePulse {
    0% { box-shadow: 0 0 0 0 rgba(106, 223, 252, 0.55); }
    100% { box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06); }
}

@media screen and (max-width: 760px) {
    .admin_ticket_attachment {
        max-width: 100%;
    }
}
.admin_master_form label {
    grid-column: 1 / -1;
}

.admin_master_panel {
    border: 1px solid #e1f8fd;
    border-radius: 8px;
    background: #fff;
    padding: 14px;
}

.admin_master_panel h2 {
    margin: 0 0 12px;
    color: #123f49;
    font-size: 20px;
}

.admin_master_row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
}

.admin_master_note {
    margin: 12px 0 0;
    color: #667b82;
    font-size: 13px;
}

@media (max-width: 720px) {
    .admin_master_row {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .admin_master_row form {
        grid-column: 1 / -1;
    }
}
.shop_admin_full_field {
    grid-column: 1 / -1;
}

.shop_admin_full_field small {
    color: #72898f;
    font-size: 12px;
    line-height: 1.35;
}
.shop_admin_form select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #cfeef5;
    border-radius: 6px;
    padding: 8px 10px;
    background: #fff;
    color: #123f49;
    box-sizing: border-box;
}