/* ===============================
   RESET
================================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body {
   overflow-x:hidden;
    height:100%;
}

body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    
     background: linear-gradient(180deg, #0f0b1f, #1a1333);
    color:#222;
    line-height:1.6;
    display:flex;
    flex-direction:column;
   
}

 








a{
    text-decoration:none;
    color:inherit;
}

img{
    max-width:100%;
    display:block;
}

/* ===============================
   LAYOUT
================================= */
.main-content{
    flex:1;
}

.container{
    max-width:1200px;
    margin:auto;
    padding:20px;
}

/* ===============================
   HEADER
================================= */
.main-header{
    background:#fff;
    border-bottom:1px solid #eee;
    padding:15px 0;
    position:sticky;
    top:0;
    z-index:1000;
}

.header-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo a{
    font-size:20px;
    font-weight:700;
}

.nav-links a{
    margin:0 15px;
    font-weight:500;
}

.nav-links a:hover{
    color:#000;
}

.auth-links a{
    margin-left:15px;
}

.btn-primary{
    background:#111;
    color:#fff;
    padding:8px 16px;
    border-radius:6px;
}

.btn-logout{
    color:red;
}

/* ===============================
   FOOTER
================================= */
.main-footer{
    background:#111;
    color:#fff;
    padding:50px 20px;
}

.footer-container{
    max-width:1200px;
    margin:auto;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:40px;
}

.footer-grid h3,
.footer-grid h4{
    margin-bottom:15px;
}

.footer-grid a{
    color:#bbb;
}

.footer-grid a:hover{
    color:#fff;
}

.footer-bottom{
    margin-top:30px;
    border-top:1px solid #333;
    padding-top:20px;
    text-align:center;
    color:#777;
}

/* ===============================
   RESPONSIVE
================================= */
@media(max-width:768px){

    .header-container{
        flex-direction:column;
        gap:10px;
    }

    .nav-links{
        margin-top:10px;
    }
    
}
    
    
  /* ===============================
   SEARCH BAR
================================= */

.search-section{
    margin:40px auto;
    max-width:1000px;
}

.search-box{
    background:#fff;
    padding:25px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.search-form{
    display:flex;
    gap:15px;
    align-items:center;
    flex-wrap:wrap;
}

.search-form input{
    flex:1;
    min-width:180px;
    padding:12px 15px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:14px;
    transition:0.2s;
}

.search-form input:focus{
    outline:none;
    border-color:#000;
}

.search-btn{
    background:#111;
    color:#fff;
    border:none;
    padding:12px 25px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    transition:0.2s;
}

.search-btn:hover{
    background:#333;
}

/* ===============================
   RESPONSIVE SEARCH
================================= */

@media(max-width:768px){

    .search-form{
        flex-direction:column;
    }

    .search-form input,
    .search-btn{
        width:100%;
    }


}














/* =====================================
   PARTY VIEW PAGE
===================================== */

.party-container{
    max-width:1200px;
    margin:40px auto;
    padding:20px;
}

/* =========================
   SWIPER
========================= */
.swiper{
    width:100%;
    height:420px;
    border-radius:16px;
    overflow:hidden;
    margin-bottom:40px;
}

.swiper-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    cursor:pointer;
}

/* =========================
   LAYOUT
========================= */
.party-content{
    display:flex;
    gap:40px;
    align-items:flex-start;
}

.party-left{
    flex:2;
}

.party-right{
    flex:1;
}

 =========================
   TITLES
========================= 
.party-left h1{
    font-size:32px;
    margin-bottom:15px;
}

.party-left h3{
    margin-bottom:10px;
}


/* =========================
   BADGE
========================= */
.badge{
    background:#111;
    color:#fff;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    margin-left:8px;
}

/* =========================
   PARTICIPANTS
========================= */
.participants{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.participant{
    background:#f1f1f1;
    padding:8px 12px;
    border-radius:20px;
    font-size:14px;
}

/* =========================
   REVIEWS
========================= */
.review{
    background:#f9f9f9;
    padding:15px;
    border-radius:10px;
    margin-bottom:15px;
}

/* =========================
   BOOKING BOX
========================= */
.booking-box{
    position:sticky;
    top:120px;
    background:#fff;
    padding:25px;
    border-radius:16px;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

.booking-box h2{
    font-size:26px;
    margin-bottom:10px;
}

.booking-box p{
    margin-bottom:15px;
}

/* =========================
   BUTTONS
========================= */
.btn{
    display:inline-block;
    background:#111;
    color:#fff;
    padding:12px 18px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    transition:0.2s;
}

.btn:hover{
    background:#333;
}

.btn-outline{
    background:transparent;
    border:2px solid #111;
    color:#111;
}

.btn-outline:hover{
    background:#111;
    color:#fff;
}

/* =========================
   SIMILAR PARTIES GRID
========================= */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:20px;
}



.card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    text-decoration:none;
    color:#000;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
    transition:0.2s;
}

.card:hover{
    transform:translateY(-5px);
}

.card img{
    width:100%;
    height:180px;
    object-fit:cover;
}

.card-body{
    padding:15px;
}

.card-body h3{
    margin-bottom:8px;
    font-size:18px;
}


/* =========================
   LIGHTBOX
========================= */
.lightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.8);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.lightbox img{
    max-width:90%;
    max-height:90%;
    border-radius:12px;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:900px){

    .party-content{
        flex-direction:column;
    }

    .booking-box{
        position:relative;
        top:0;
    }

    .swiper{
        height:280px;
    }
}












.party-container{
    max-width:1200px;
    margin:40px auto;
    padding:20px;
}

.party-content{
    display:flex;
    gap:40px;
    margin-top:30px;
}

.party-left{
    flex:2;
}

.party-right{
    flex:1;
}

.party-left h1{
    font-size:32px;
    margin-bottom:10px;
}

.party-left p{
    margin:8px 0;
    color:#555;
}

.party-left hr{
    border:none;
    height:1px;
    background:#eee;
}

.booking-box{
    background:#fff;
    padding:25px;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
    position:sticky;
    top:100px;
}

.booking-box h2{
    font-size:28px;
    margin-bottom:10px;
}

.badge{
    background:#000;
    color:#fff;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
}

.participants{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.participant{
    background:#f2f2f2;
    padding:8px 12px;
    border-radius:20px;
    font-size:14px;
}

.review{
    background:#fafafa;
    padding:15px;
    border-radius:8px;
    margin-bottom:10px;
}

.party-cover-placeholder{
    height:400px;
    background:#f2f2f2;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
}

/* SIMILAR PARTIES */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}



.card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    text-decoration:none;
    color:#000;
    box-shadow:0 5px 20px rgba(0,0,0,0.05);
    transition:0.3s;
}

.card:hover{
    transform:translateY(-5px);
}

.card img{
    width:100%;
    height:160px;
    object-fit:cover;
}

.card-body{
    padding:15px;
}








/* =========================
   Admin
========================= */



.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.admin-table th,
.admin-table td {
    padding: 14px;
    border-bottom: 1px solid #eee;
}

.admin-table th {
    background: #111827;
    color: white;
    text-align: left;
}

.admin-table tr:hover {
    background: #f9fafb;
}

.badge-green {
    background: #16a34a;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.badge-red {
    background: #dc2626;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.badge-orange {
    background: #f59e0b;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}



.btn-small {
    background:#111827;
    color:white;
    padding:6px 12px;
    border-radius:6px;
    font-size:13px;
    text-decoration:none;
}

.btn-danger {
    background:#dc2626;
    color:white;
    padding:6px 12px;
    border-radius:6px;
    font-size:13px;
    text-decoration:none;
}


.admin-search-wrapper{
    position: relative;
    width: 300px;
    margin-bottom: 20px;
}

.admin-search-wrapper input{
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
}



.search-item small{
    color: #666;
    font-size: 12px;
}

.search-item .role{
    font-size: 11px;
    background: #0d1b2a;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    width: fit-content;
    margin-top: 3px;
}



.search-results{
    position:absolute;
    background:white;
    width:100%;
    border-radius:10px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    max-height:350px;
    overflow-y:auto;
    z-index:999;
}

.search-item{
    padding:12px;
    border-bottom:1px solid #f1f1f1;
    cursor:pointer;
    transition:0.2s;
}

.search-item:hover{
    background:#f3f4f6;
}

.search-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}

.search-main{
    display:flex;
    flex-direction:column;
}

.search-meta{
    display:flex;
    gap:8px;
    align-items:center;
}

.badge-id{
    background:#e5e7eb;
    padding:3px 8px;
    border-radius:20px;
    font-size:12px;
}

.badge-role{
    background:#2563eb;
    color:white;
    padding:3px 8px;
    border-radius:20px;
    font-size:12px;
}

.badge-green{
    background:#16a34a;
    color:white;
    padding:3px 8px;
    border-radius:20px;
    font-size:12px;
}

.badge-red{
    background:#dc2626;
    color:white;
    padding:3px 8px;
    border-radius:20px;
    font-size:12px;
}





/* =========================
   Admin search partie
========================= */




.admin-search-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.admin-search-wrapper input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.search-results {
    position: absolute;
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 999;
}

.search-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.search-item:hover {
    background: #f3f4f6;
}

.search-item strong {
    display: block;
}

.search-item small {
    display: block;
    color: #6b7280;
}








.large-card {
    max-width: 600px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.form-group textarea {
    min-height: 80px;
}







.radius-info {
    background: #f4f6f9;
    padding: 12px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #333;
}





.radius-btn {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    margin-left: 10px;
    font-size: 13px;
}

.radius-btn:hover {
    text-decoration: underline;
}

#radiusSlider {
    width: 200px;
}






.host-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.host-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}







.card-image img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}

/* Ligne sous image */
.card-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px;
}

/* Bloc gauche */
.party-info{
    text-align:left;
}

.party-info h3{
    margin:0 0 6px 0;
    font-size:18px;
}

.party-info p{
    margin:4px 0;
    font-size:14px;
}

 Bloc droite 
.host-info{
    display:flex;
    align-items:center;
    justify-content:flex-end;
}



.host-link{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#333;
}

.host-avatar{
    width:45px;
    height:45px;
    border-radius:50%;
    object-fit:cover;
}

.host-name{
    font-size:14px;
    font-weight:600;
}








/* ===============================
   CARD LAYOUT FIX FINAL
================================= */

.card{
    display:block;
}

.card-image img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}

/* Ligne sous image */
.card-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
}

/* Bloc gauche */
.party-info{
    flex:1;
}

.party-info h3{
    margin-bottom:6px;
    font-size:18px;
}

.party-info p{
    margin:4px 0;
    font-size:14px;
}

/* Bloc droite */
.host-info{
    display:flex;
    align-items:center;
}

.host-link{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#000;
}

.host-avatar{
    width:45px;
    height:45px;
    border-radius:50%;
    object-fit:cover;
}

.host-name{
    font-size:14px;
    font-weight:600;
}






/* =====================================
   RECOMMENDED CARD CUSTOM LAYOUT
===================================== */

.rec-cover img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}

/* Ligne sous image */
.rec-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px;
}

/* Bloc gauche */
.rec-left{
    flex:1;
}

.rec-left h3{
    margin-bottom:6px;
    font-size:18px;
}

.rec-left p{
    margin:4px 0;
    font-size:14px;
}

/* Bloc droite */
.rec-right{
    display:flex;
    align-items:center;
}

.rec-host{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#000;
}

.rec-host img{
    width:45px;
    height:45px;
    border-radius:50%;
    object-fit:cover;
}

.rec-host span{
    font-size:14px;
    font-weight:600;
}





/* ===============================
   TRENDING CARD LAYOUT
================================= */

.trend-cover{
    position:relative;
  
}

.trend-cover img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}

.trend-cover .badge{
    position:absolute;
    top:15px;
    left:15px;
}

/* Ligne sous image */
.trend-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px;
  background:white;
  border-radius:4px;
}

/* Bloc gauche */
.trend-left{
    flex:1;
}

.trend-left h3{
    margin-bottom:6px;
    font-size:18px;
}

.trend-left p{
    margin:1px 0;
    font-size:14px;
}

/* Bloc droite */
.trend-right{
    display:flex;
    align-items:center;
}

.trend-host{
    display:flex;
    align-items:center;
    gap:10px;
}

.trend-host img{
    width:50px;
    height:50px;
    border-radius:50%;
    object-fit:cover;
}

.trend-host span{
    font-size:14px;
    font-weight:600;
}







/* ===============================
   PROFILE PAGE
================================= */

.profile-wrapper{
    max-width:900px;
    margin:50px auto;
    padding:20px;
}

.profile-top{
    text-align:center;
    margin-bottom:40px;
}

.profile-avatar{
    width:130px;
    height:130px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:15px;
}

.profile-top h1{
    font-size:28px;
    margin-bottom:10px;
}

.profile-links a{
    margin:0 10px;
    font-size:14px;
    color:#555;
}

.profile-links a:hover{
    color:#000;
}

.profile-block{
    margin-bottom:40px;
}

.profile-block h2{
    margin-bottom:15px;
}






/* ===============================
   USER PUBLIC PROFILE
================================= */

.user-profile-wrapper{
    max-width:900px;
    margin:50px auto;
    padding:20px;
}

.user-profile-header{
    text-align:center;
    margin-bottom:40px;
}

.user-profile-avatar{
    width:130px;
    height:130px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:15px;
}

.user-profile-name{
    font-size:28px;
    margin-bottom:8px;
}

.user-profile-trust{
    font-size:14px;
    color:#666;
    margin-bottom:10px;
}

.user-profile-socials a{
    margin:0 10px;
    font-size:14px;
    color:#555;
}

.user-profile-socials a:hover{
    color:#000;
}

.user-profile-section{
    margin-bottom:40px;
}

.user-profile-section h2{
    margin-bottom:15px;
}





/* =================================
   USER PROFILE HEADER CLEAN
================================= */

.user-profile-wrapper{
    max-width:1100px;
    margin:40px auto;
}

.user-profile-card{
    display:flex;
    align-items:center;
    gap:40px;
    background:white;
    padding:40px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,0.06);
}

.user-profile-avatar img{
    width:160px;
    height:160px;
    border-radius:50%;
    object-fit:cover;
    border:5px solid #f4f4f4;
}

.user-profile-content{
    flex:1;
}

.user-profile-name{
    font-size:32px;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    gap:12px;
}

.user-profile-verified{
    background:#111;
    color:white;
    font-size:14px;
    padding:4px 10px;
    border-radius:20px;
}

.user-profile-bio{
    margin-bottom:15px;
    color:#555;
    max-width:600px;
}

.user-profile-trust{
    margin-bottom:15px;
    font-size:15px;
}

.user-profile-links{
    display:flex;
    gap:15px;
}

.user-profile-links a{
    background:#f2f2f2;
    padding:8px 16px;
    border-radius:20px;
    font-size:14px;
    transition:0.2s;
}

.user-profile-links a:hover{
    background:#111;
    color:white;
}






/* =================================
   USER EVENTS GRID
================================= */

.user-events-section{
    max-width:1100px;
    margin:50px auto;
}

.user-events-title{
    font-size:24px;
    margin-bottom:25px;
}

.user-events-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:25px;
}

.user-event-card{
    background:white;
    border-radius:18px;
    overflow:hidden;
    text-decoration:none;
    color:#000;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
    transition:0.25s;
}

.user-event-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

.user-event-image img{
    width:100%;
    height:180px;
    object-fit:cover;
}

.user-event-body{
    padding:18px;
}

.user-event-body h3{
    font-size:18px;
    margin-bottom:8px;
}

.user-event-body p{
    font-size:14px;
    margin:4px 0;
    color:#555;
}

.user-event-price{
    font-weight:600;
    margin-top:8px;
    color:#000;
}





/* ============================
   X2X HORIZONTAL GALLERY
============================ */

.x2x-gallery-container {
    width: 100%;
    display: flex;
   overflow-x: auto;
    justify-content: center;   /* centre horizontalement */
    padding: 20px 0;
}








.x2x-gallery-track {
    display: flex;
    gap: 2px;
    padding: 0 2px;
}

.x2x-gallery-card {
    flex: 0 0 auto;          /* empêche retour ligne */
    width: 220px;
    height: 220px;
    border-radius: 16px;
  border-color:black,2px;
    overflow: hidden;
    background: #f5f5f5;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.x2x-gallery-card:hover {
    transform: scale(1.05);
}

.x2x-gallery-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

 Scroll plus joli 
.x2x-gallery-container::-webkit-scrollbar {
    height: 8px;
}
.x2x-gallery-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* ============================
   LIGHTBOX
============================ */

.x2x-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.x2x-lightbox-img {
    max-width: 90%;
    max-height: 85%;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.x2x-lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 40px;
    color: white;
    cursor: pointer;
}

/* ============================
   RESPONSIVE
============================ */

@media (max-width: 768px) {
    .x2x-gallery-card {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 480px) {
    .x2x-gallery-card {
        width: 90px;
        height: 90px;
    }
}



























/* ================= PROFILE LAYOUT ================= */

.x2x-profile-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
}

.x2x-profile-hero {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.x2x-profile-hero-inner {
    display: flex;
    gap: 40px;
    align-items: center;
}

.x2x-profile-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
}

.x2x-profile-name {
    font-size: 32px;
    margin-bottom: 10px;
}

.x2x-verified-badge {
    background: #111;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    margin-left: 10px;
}

.x2x-profile-bio {
    margin: 15px 0;
    color: #555;
}

.x2x-profile-socials a {
    margin-right: 15px;
    font-weight: 500;
}

/* ================= SECTIONS ================= */

.x2x-profile-section {
    margin-top: 60px;
}

.x2x-section-title {
    font-size: 22px;
    margin-bottom: 20px;
}

/* ================= GALLERY ================= */

.x2x-gallery-container {
    overflow-x: auto;
}

.x2x-gallery-track {
    display: flex;
    gap: 20px;
}

.x2x-gallery-card {
    flex: 0 0 auto;
    width: 220px;
    height: 220px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    cursor: pointer;
}

.x2x-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================= PARTIES ================= */

.x2x-parties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
    gap: 25px;
}

.x2x-party-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.x2x-party-card:hover {
    transform: translateY(-6px);
}

.x2x-party-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.x2x-party-body {
    padding: 15px;
}

/* ================= LIGHTBOX ================= */

.x2x-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.x2x-lightbox-img {
    max-width: 90%;
    max-height: 85%;
    border-radius: 16px;
}

.x2x-lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 40px;
    color: white;
    cursor: pointer;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 768px) {

    .x2x-profile-hero-inner {
        flex-direction: column;
        text-align: center;
    }

    .x2x-profile-avatar {
        width: 120px;
        height: 120px;
    }

    .x2x-profile-name {
        font-size: 24px;
    }

}







/* ================= PREMIUM COVER ================= */
<!--
.x2x-profile-cover {
    position: relative;
    height: ;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 30px;
}

.x2x-profile-cover-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,#111,#333);
}

.x2x-profile-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,rgba(0,0,0,0.3),rgba(0,0,0,0.7));
}

.x2x-profile-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}


-->


/* ================= PREMIUM COVER ================= */

.x2x-profile-cover {
position: relative;
height: ;
border-radius: 16px;
overflow: hidden;
margin-bottom: 40px;
}

/* background */
.x2x-profile-cover-bg{
position:absolute;
inset:0;
background:linear-gradient(135deg,#111,#444);
}

/* overlay sombre */
.x2x-profile-cover::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to bottom,
rgba(0,0,0,0.35),
rgba(0,0,0,0.75));
}

/* contenu */
.x2x-profile-hero-content{
position:relative;
z-index:2;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
color:white;
padding:40px 20px;
}

/* avatar */
.x2x-profile-avatar{
width:110px;
height:110px;
border-radius:50%;
border:4px solid white;
object-fit:cover;
margin-bottom:15px;
box-shadow:0 8px 30px rgba(0,0,0,0.35);
}

/* nom utilisateur */
.x2x-profile-name{
font-size:28px;
font-weight:700;
margin-bottom:6px;
}

/* trust score texte */
.x2x-profile-meta{
font-size:16px;
opacity:.9;
margin-bottom:15px;
}

/* barre trust */
.x2x-trust-bar{
width:220px;
height:10px;
background:#ddd;
border-radius:20px;
overflow:hidden;
margin:10px auto;
}

.x2x-trust-bar-fill{
height:100%;
border-radius:20px;
transition:width .4s ease;
}

/* score texte */
.x2x-trust-score{
margin-top:6px;
font-weight:600;
}

/* bouton */
.x2x-profile-contact{
margin-top:25px;
background:white;
color:#333;
padding:10px 22px;
border-radius:30px;
font-weight:600;
text-decoration:none;
display:inline-block;
transition:all .25s ease;
}

.x2x-profile-contact:hover{
background:#f3f3f3;
transform:translateY(-1px);
}






x22x-profile-actions{margin-top:20px;}





/* Avatar flottant */
<!--
.x2x-profile-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white;
    margin-bottom: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.x2x-profile-name {
    font-size: 32px;
    margin-bottom: 10px;
}-->

.x2x-profile-meta {
    margin-bottom: 20px;
    font-size: 18px;
}

.x2x-verified-badge {
    background: white;
    color: black;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    margin-left: 10px;
}

/* Bouton premium */

.x2x-btn-primary {
    background: white;
    color: black;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    margin-top:25px;
}

.x2x-btn-primary:hover {
    background: #ddd;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 768px) {

    .x2x-profile-cover {
        height: 260px;
        margin-bottom: 60px;
    }

    .x2x-profile-avatar {
        width: 100px;
        height: 100px;
    }

    .x2x-profile-name {
        font-size: 22px;
    }

}







/* ===============================
   HOST BOOKING USER CARD STYLE
   Ultra spécifique - aucun conflit
================================ */

.x9k-host-booking-user-wrapper {
    margin-bottom: 12px;
}

.x9k-host-booking-user-link {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    padding: 10px;
    border-radius: 12px;
    transition: all 0.25s ease;
    background: #fafafa;
}

.x9k-host-booking-user-link:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

.x9k-host-booking-user-avatar {
    width: 150px !important;
    height: 150px;!important;
    border-radius: 50% !important;
  min-width:60px;
  min-height:60px;
	display: block;
    
    border: 3px solid #ffffff;
  box-shadow:0 4px 12px rgba(0,0,0,0.8);
    flex-shrink: 0;
  max-width: none !important;
}

.x9k-host-booking-user-info {
    display: flex;
    flex-direction: column;
}

.x9k-host-booking-user-name {
    font-weight: 600;
    font-size: 15px;
    color: #222;
}




.x9k-host-user-meta {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

.x9k-host-user-meta span {
    font-weight: 600;
}







.x9k-verified-badge {
    background: #e6f4ff;
    color: #0a66c2;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 20px;
    margin-left: 8px;
    font-weight: 600;
}







/* ===== X2X GALLERY SYSTEM delete===== */


.gallery-item2x {
    position: relative;
    display: inline-block;
    margin: 10px;
}

.delete-btn2x {
    position: absolute;
    top: 5px;
    right: 8px;
    background: red;
    color: white;
    width: 22px;
    height: 22px;
    text-align: center;
    border-radius: 50%;
    text-decoration: none;
    font-weight: bold;
    line-height: 22px;
}

.delete-btn2x:hover {
    background: darkred;
}
.x2x2x-hidden-input {
    display: none;
}











.x2x-media-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    max-width:600px;
    margin:30px auto;
}

.x2x-media-slot{
    position:relative;
    aspect-ratio:1/1;
    background:#111;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.x2x-media-content{
    width:100%;
    height:100%;
    object-fit:cover;
}

.x2x-media-empty{
    color:#aaa;
    font-size:14px;
    text-align:center;
}

.x2x-media-delete{
    position:absolute;
    top:8px;
    right:8px;
    background:red;
    color:white;
    width:22px;
    height:22px;
    border-radius:50%;
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
}


//Avatar Ajax




.x2x-avatar-wrapper{
    display:flex;
    justify-content:center;
    margin-bottom:30px;
}



.x2x-avatar-media{
    width:100%;
    height:100%;
    object-fit:cover;
}

.x2x-avatar-placeholder{
    color:#aaa;
    font-size:14px;
    text-align:center;
}




.x3x-avatar-wrapper{
    display:flex;
    justify-content:center;
    margin-bottom:30px;
}



.x3x-avatar-media{
    width:100%;
    height:100%;
    object-fit:cover;
}

.x3x-avatar-placeholder{
    color:#aaa;
    font-size:14px;
    text-align:center;
}

.x3x-avatar-slot{
    position:relative;
    width:160px;
    height:160px;
    border-radius:50%;
    overflow:hidden;
    background:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}








// Register Galery



.x2x-avatar-slot{
    position:relative;
    width:160px;
    height:160px;
    border-radius:50%;
    overflow:hidden;
    background:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.x2x-avatar-delete{
    position:absolute;
    top:10px;
    right:10px;
    width:36px;
    height:36px;
    border-radius:50%;
    border:3px solid white;
    background:#ff2e2e;
    color:white;
    font-size:18px;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:10;

    box-shadow:0 4px 12px rgba(0,0,0,0.4);
    transition:all 0.2s ease;
}

.x2x-avatar-delete:hover{
    background:#cc0000;
    transform:scale(1.1);
}




.x3x-avatar-delete{
    position:absolute;
    top:10px;
    right:10px;
    width:36px;
    height:36px;
    border-radius:50%;
    border:3px solid white;
    background:#ff2e2e;
    color:white;
    font-size:18px;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:10;

    box-shadow:0 4px 12px rgba(0,0,0,0.4);
    transition:all 0.2s ease;
}

.x3x-avatar-delete:hover{
    background:#cc0000;
    transform:scale(1.1);
}
















.register-avatar-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.register-avatar-slot {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid #eee;
}

.register-avatar-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.register-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}








.register-page .reg-gallery-wrapper { ... }
.register-page .reg-gallery-slot { ... }








       
       .reg-gallery-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 20px;
}

.reg-gallery-slot {
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    background: linear-gradient(145deg, #f8f8f8, #ececec);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
}

.reg-gallery-slot:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.reg-gallery-slot img,
.reg-gallery-slot video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reg-gallery-placeholder {
    font-size: 32px;
    font-weight: bold;
    color: #bbb;
}

.reg-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    color: white;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}






@media (max-width: 768px) {
    .reg-gallery-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}







//Vue soirée




.party1-media {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    max-height: 500px;
}






.x15-card{ width: 100%;
}




.x15-cover {
  width: 100%;
  height: 240px;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
  position :relative;
  
}


.x15-cover2 {
  width: 100%;
  height: 240px;
  overflow: hidden;
  border-radius: 16px;
  background: ;
  position :relative;
  
}



.x15-media{
  width: 100%;
  height:100%;
  object-fit: cover;
  display: block;
  
}
  
  
 .x20-party-cover{
  
  width: 100%;
  
  margin:0 auto;
 max-width:1100px;
  
  background:#000;
  border-radius:20px;
  overflow:hidden;
  
  display:flex;
  
  align-items: center;
  justify-content:center;
  
  
  
}


.x20-party-media{
  max-width: 100%,
	height: auto;
  display:block ;
  
  
 
  
}








/* HERO */
.x50-hero{
    margin-bottom:30px;
}

.x50-hero-media{
    width:100%;
    border-radius:20px;
    overflow:hidden;
    background:#000;
}

.x50-media{
    width:100%;
    height:auto;
    display:block;
}

.x50-header{
    margin-bottom:25px;
}

.x50-header h1{
    font-size:28px;
    font-weight:700;
    margin-bottom:8px;
}

.x50-meta{
    color:#666;
    font-size:15px;
}


.x50-host-card{
    display:flex;
    align-items:center;
    gap:15px;
    padding:20px;
    background:#f9f9f9;
    border-radius:15px;
    margin-bottom:30px;
}

.x50-host-avatar{
    width:65px;
    height:65px;
    border-radius:50%;
    object-fit:cover;
}

.x50-verified{
    background:#e6f7ec;
    color:#1c7c45;
    font-size:12px;
    padding:3px 8px;
    border-radius:8px;
    margin-left:6px;
}

.x50-rating{
    font-size:14px;
    color:#666;
}



.x50-description{
    line-height:1.6;
    margin-bottom:30px;
}





  .x50-booking-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0;
    background:transparent;
    border-radius:0;
    box-shadow:none;
    margin-bottom:40px;
}




.booking-box{
    background:rgba(255,255,255,0.1);
    backdrop-filter:blur(7px);
    border-radius:15px;
    padding:15px;
}


.x50-price{
    font-size:22px;
    font-weight:700;
}

.x50-book-btn{
    background:#000;
    color:#fff;
    padding:12px 22px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    transition:0.2s ease;
}

.x50-book-btn:hover{
    opacity:0.85;
}


@media(max-width:768px){

    .x50-booking-box{
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        border-radius:20px 20px 0 0;
        z-index:1000;
    }

}



/* TITRE EVENT */
.x65-title {
    font-size: 30px;
    font-weight: 600;
    color: #1f2933;
    margin-top: 10px;
    margin-bottom: 6px;
    line-height: 1.2;
    letter-spacing: -0.3px;
    transition: color 0.2s ease;
}

/* hover si tu veux effet interaction */
.x65-title:hover{
    color: #e63946;
}

/* conteneur infos */
.x65-meta{
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

/* icones location/date */
.x65-meta span{
    display:block;
    margin-top:2px;
}

/* prix */
.x65-price{
    font-size: 14px;
    font-weight: 600;
    color:#111827;
    margin-top:4px;
}




/* section */

.x100-profile-parties{
margin-top:40px;
}

/* titre */

.x100-section-title{
font-size:22px;
font-weight:600;
margin-bottom:20px;
}

/* grille */

.x100-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:20px;
}

/* carte */

.x100-card{
background:#fff;
border-radius:16px;
overflow:hidden;
transition:transform .25s ease, box-shadow .25s ease;
}

.x100-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 25px rgba(0,0,0,0.08);
}

/* lien */

.x100-card-link{
text-decoration:none;
color:inherit;
display:block;
}

/* media */

.x100-media-wrapper{
height:200px;
overflow:hidden;
background:#000;
}

.x100-media{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* contenu */

.x100-card-body{
padding:14px;
}

.x100-title{
font-size:16px;
font-weight:600;
margin-bottom:6px;
}

.x100-date{
font-size:13px;
color:#777;
margin-bottom:4px;
}

.x100-price{
font-size:14px;
font-weight:600;
}

/* message vide */

.x100-empty{
color:#777;
}








//Reglage pas d'ascenseur horizontal



header,
footer{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

img,
video{
  max-width:100%;
  height:auto;
  display:block«
}

header nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}


.container,
.header-container,
.footer-container{
max-width:1200px;
width:100%;
margin:auto;
padding-left:16px;
padding-right:16px;
}


body{
position:relative;
overflow-x:hidden;
}





<!--#step1,
#step2,
#step3,
#step4,
#step5{
display:flex;
flex-direction:column;
gap:16px;
}
-->

#step1,
#step2,
#step3,
#step4,
#step5{
width:100%;
}


#alertBox{
margin:0;
padding:0;
}

.x-form{
display:flex;
flex-direction:column;
gap:16px;
}

.x-form > #alertBox:empty{
display:none;
}










.auth-card{
padding-top:20px;
padding-bottom:20px;
}


.auth-card h1{
margin-top:0;
margin-bottom:20px;
}

.xE-form{
display:flex;
flex-direction:column;
gap:6px;
}





.x-form-container h1{
margin-top:0;
margin-bottom:16px;
}

<!--.x-form-group + .x-form-group{
margin-top:16px;
}-->


/* FIX RESPONSIVE GLOBAL */
*,
*::before,
*::after {
box-sizing: border-box;
}

html, body {
max-width: 100%;
overflow-x: hidden;
}


.x-form-container{
width:100%;
max-width:600px;
margin:auto;
padding:20px;
}

.x-form{
display:flex;
  max-width:600px;
  flex-direction:column;
   gap:16px;
   width:100%;
}

.x-form input,
.x-form textarea,
.x-form select{

width:100%;
max-width:100%;

padding:12px 14px;

border-radius:8px;
border:1px solid #ddd;

font-size:16px;

background:#fff;
color:#222;

outline:none;

transition:border .2s;
}


.x-form input:focus,
.x-form textarea:focus,
.x-form select:focus{

border-color:#4f7cff;
}


.x-form textarea{
resize:vertical;
min-height:120px;
}


.x-form button{

width:100%;
padding:14px;

border:none;
border-radius:8px;

background:#111;
color:white;

font-size:16px;
font-weight:600;

cursor:pointer;

transition:background .2s;
}

.x-form button:hover{
background:#333;
}

.x-form-group{
display:flex;
flex-direction:column;
gap:6px;
width:100%;
}

.x-form label{
font-size:14px;
font-weight:500;
}


input, textarea{
max-width:100%;
}

@media (max-width:600px){

.x-form-container{
padding:16px;
}

.x-form input,
.x-form textarea,
.x-form select{
font-size:16px;
}

}
  


/* CONTENEUR FORMULAIRE */
.x-form{
max-width:620px;
margin:40px auto;
padding:20px;
display:;
flex-direction:column;
gap:16px;
}






/* GROUPE INPUT */
.x-form-group{
display:flex;
flex-direction:column;
gap:6px;
width:100%;
}

/* INPUT */
.x-form input{
width:100%;
padding:14px;
border-radius:8px;
border:1px solid #ddd;
font-size:16px;
box-sizing:border-box;
}

/* FOCUS */
.x-form input:focus{
border-color:#000;
outline:none;
}

/* BOUTON */
.x-form button{
width:100%;
padding:14px;
border-radius:8px;
border:none;
background:#000;
color:#fff;
font-size:16px;
font-weight:600;
cursor:pointer;
}

/* TITRE */
.x-form-title{
text-align:center;
font-size:32px;
margin-bottom:10px;
}

/* TEXTE SOUS FORMULAIRE */
.x-form-footer{
text-align:center;
font-size:14px;
}





.x-menu-wrapper{
position:relative;
display:inline-block;
}

.x-menu-btn{
background:none;
border:none;
font-size:26px;
cursor:pointer;
padding:8px;
}

.x-menu-dropdown{
position:absolute;
right:0;
top:40px;

background:white;
border-radius:10px;

box-shadow:0 8px 20px rgba(0,0,0,0.1);

display:none;
flex-direction:column;

min-width:180px;
overflow:hidden;

z-index:1000;
}

.x-menu-dropdown a{
padding:12px 16px;
text-decoration:none;
color:#222;
font-size:15px;
display:block;
}

.x-menu-dropdown a:hover{
background:#f5f5f5;
}

.x-menu-dropdown .logout{
color:red;
font-weight:600;
}










.x-header{
background:white;
border-bottom:1px solid #eee;
padding:14px 20px;
}

.x-header-inner{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
}
.x-logo{
font-weight:700;
font-size:20px;
}

.x-menu-btn{
background:none;
border:none;
font-size:26px;
cursor:pointer;
display:block;
}

@media (max-width:768px){

.x-nav{
display:none;
}

.x-menu-btn{
display:block;
}

}



.x-menu-dropdown{
right:10px;
top:55px;
}



.x-user-info{
display:flex;
align-items:center;
gap:10px;
}

<!--.welcome-text{
font-weight:500;
font-size:14px;
color:#333;
}-->

.welcome-text{
font-size:14px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:120px;
}



<!--@media (max-width:768px){

.welcome-text{
display:inline;
}

}-->

@media (max-width:768px){

.welcome-text{
max-width:90px;
font-size:14px;
}

}



@media (max-width:768px){

.login-link{
font-size:14px;
font-weight:600;
}

}



/* =========================
   MOBILE APP FOOTER
========================= */

.x-mobile-nav{
position:fixed;
bottom:0;
left:0;
width:100%;
height:65px;
background:#ffffff;
border-top:1px solid #eee;
display:flex;
justify-content:space-around;
align-items:center;
z-index:9999;
}

.x-mobile-item{
display:flex;
flex-direction:column;
align-items:center;
text-decoration:none;
font-size:20px;
color:#444;
}

.x-mobile-item small{
font-size:11px;
margin-top:2px;
}

.x-mobile-create{
font-size:28px;
color:#ff385c;
}

/* cacher sur desktop */

@media (min-width:768px){
.x-mobile-nav{
display:none;
}
}


body{
padding-bottom:80px;
}









.footer-mobile{
display:none;
}

@media (max-width:768px){

.footer-desktop{
display:none;
}

.footer-mobile{
display:block;
}

}


/* cacher le footer desktop sur mobile */
@media (max-width:768px){

footer{
display:none;
}

}







/* conteneur avatar */
.x85-profile-avatar{
display:flex;
justify-content:center;
align-items:center;
}

/* image avatar */
.x85-profile-avatar img.x2x-avatar{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
border:4px solid #fff;
box-shadow:0 4px 20px rgba(0,0,0,0.25);
}



/* avatar lettre */
.x85-profile-avatar .avatar-letter{
width:120px;
height:120px;
border-radius:50%;
background:#111;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:46px;
font-weight:700;
border:4px solid #fff;
box-shadow:0 4px 20px rgba(0,0,0,0.25);
font-family:system-ui;
}




/* conteneur avatar */
.x855-profile-avatar{
display:flex;
justify-content:center;
align-items:center;
}

/* image avatar */
.x855-profile-avatar img.x2x-avatar{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
border:4px solid #fff;
box-shadow:0 4px 20px rgba(0,0,0,0.25);
}

/* avatar lettre */
.x855-profile-avatar .avatar-letter{
width:120px;
height:120px;
border-radius:50%;
background:#111;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:46px;
font-weight:700;
border:4px solid #fff;
box-shadow:0 4px 20px rgba(0,0,0,0.25);
font-family:system-ui;
}






























/* avatar lettre */
.x85-header-avatar .avatar-letter{
width:40px;
height:40px;
border-radius:50%;
background:#111;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:700;
border:4px solid #fff;
box-shadow:0 4px 20px rgba(0,0,0,0.25);
font-family:system-ui;
}

/* image avatar */
.x85-header-avatar img.x2x-avatar{
width:40px;
height:40px;
border-radius:50%;
object-fit:cover;
border:4px solid #fff;
box-shadow:0 4px 20px rgba(0,0,0,0.25);
}




/* conteneur = tableau 2 colonnes */
.x85-header-user{
display:flex;
align-items:center;
gap:8px;
}

/* cellule emoji */
.x85-cell-emoji{
font-size:18px;
}

/* cellule avatar + nom */
.x85-cell-user{
display:flex;
flex-direction:column;
align-items:center;
}

/* avatar */
.x85-cell-user img.x2x-avatar{
width:30px;
height:30px;
border-radius:50%;
object-fit:cover;
border:2px solid #fff;
}

/* avatar lettre */
.x85-cell-user .x85-avatar-letter{
width:30px;
height:30px;
border-radius:50%;
background:#111;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:600;
}

/* nom */
.x85-header-name{
font-size:12px;
margin-top:2px;
color:#333;
}


.trend-host{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:5px;
}


.trend-host img.x2x-avatar,
.trend-host.x85-avatar-letter{
width:80px;
height:80px;
border-radius:50%;
object-fit:cover;
display:flex;
align-items:center;
justify-content:center;
border:3px solid #fff;
box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.trend-host .x85-avatar-letter{
background:#111;
color:#fff;
font-size:20px;
font-weight:700;
}



/* avatar lettre */
.trend-host .avatar-letter{
width:80px;
height:80px;
border-radius:50%;
background:#111;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:700;
border:4px solid #fff;
box-shadow:0 4px 20px rgba(0,0,0,0.25);
font-family:system-ui;
}




































.x9k-host-booking-user-wrapper img.x2x-avatar,
.x9k-host-booking-user-wrapper .x85-avatar-letter{
width:80px;
height:80px;
border-radius:50%;
object-fit:cover;
display:flex;
align-items:center;
justify-content:center;
border:3px solid #fff;
box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.x9k-host-booking-user-wrapper .x85-avatar-letter{
background:#111;
color:#fff;
font-size:20px;
font-weight:700;
}



/* avatar lettre */
.x9k-host-booking-user-wrapper .avatar-letter{
width:80px;
height:80px;
border-radius:50%;
background:#111;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:700;
border:4px solid #fff;
box-shadow:0 4px 20px rgba(0,0,0,0.25);
font-family:system-ui;
}




/* barre recherche mobile */

.mobile-search-bar{
    display:none;
}

/* visible seulement quand activée */

.mobile-search-bar.active{
    display:block;
}

/* seulement sur mobile */

@media (max-width:768px){

    .mobile-search-bar{
        width:100%;
        padding:10px;
    }

    .mobile-search-bar input{
        width:100%;
        padding:12px;
        border-radius:10px;
        border:1px solid #ddd;
        font-size:16px;
    }

}

/* cacher complètement sur desktop */

@media (min-width:769px){

    .mobile-search-bar{
        display:none !important;
    }

}










#mobileSearchBar{
    width:100%;
    padding:10px 0;
}

#mobileSearchBar input{
    width:100%;
    padding:12px 14px;
    border:1px solid #ddd;
    border-radius:12px;
    font-size:16px;
    box-sizing:border-box;
}

@media (min-width: 769px){
    #mobileSearchBar{
        display:none !important;
    }
}






/* cacher header quand recherche active */

.search-mode .x-logo,
.search-mode .auth-links,
.search-mode .x-menu-btn{
    display:none;
}

/* barre prend toute la largeur */

#mobileSearchBar{
    width:100%;
}

/* input avec loupe */






.x-header{
    position:sticky;
    top:0px;
    height:200px;
    display:flex;
    z-index:1000;
    align-items:center;
    background:white;
}

#mobileSearchBar{
    width:100%;
}



.search-mode .x-header-inner{
    justify-content:center;
}

.search-mode #mobileSearchBar{
    width:100%;
    flex:1;
}

#mobileSearchBar{
    max-width:600px;
}



.x-header-inner{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}


.search-mode .x-logo,
.search-mode .auth-links,
.search-mode .x-menu-wrapper{
    display:none;
}


#mobileSearchBar{
    position:absolute;
    left:0px;
    right:0px;
    top:0px;
    transform:translateY(-0%);
   padding:10px 12px;
  
  
    z-index:0;
}





#mobileSearchBar[hidden]{
    display:none !important;
}


#mobileSearchInput{
    width:100%;
    height:44px;
    box-sizing:border-box;
    padding:0 14px 0 50px;
    border:1px solid #ddd;
    border-radius:12px;
    font-size:16px;
    line-height:64px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23999' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
}

#mobileSearchInput::placeholder{
padding-left:18px;
}




.search-mode .x-header{
    height:64px;
}



#mobileSearchInput.x-form{
    height:44px;
    padding:0 14px 0 50px;
    line-height:44px;
}




@media (max-width:768px){

.search-box{
display:none;
}

.radius-filter{
display:none;
}
 

}

  
 .mobile-radius{
margin-top:3px;
padding:0 16px;
font-size:14px;
color:#555;
}

#mobileRadius{
width:100%;
margin-top:6px;
} 


@media (min-width:769px){

#mobileSearchBar{
display:none !important;
}

}




.mobile-radius-filter{

margin-top:20px;
padding:8px 10px;

background:#f5f5f7;
  position:relative;
  
  
<!-- transform:translateY(-50%);-->
border-radius:2px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
  z-index:5;

}

.mobile-radius-filter .radius-info{

font-size:12px;
font-weight:500;
margin-bottom:3px;

}

.mobile-radius-filter input[type="range"]{

width:100%;
height:4px;
  margin-top:0px;

}

.mobile-radius-filter #radiusValue{

font-size:13px;
color:#555;

}




@media (max-width:768px){

  .x-header{
    padding-bottom:8px;
  }


#mobileSearchBar{
    padding:8px 12px 6px 12px;
    margin:0;
    display:flex;
    flex-direction:column;
	padding:6px 10px 4px 10px;
    gap:4px;
  }
  
  
  
  
  
  
   .mobile-radius-filter,
  .radius-filter{
    margin:0 !important;
    margin-top:2px !important;
    padding:6px 8px !important;
    border-radius:12px;
  }

  .radius-info{
	display:flex;
	align-items:center;
	gap:6px;
	flex-wrap:nowrap;
	white-space:nowrap;
    
    font-size:14px;
	line-height:1.3;
	margin:0 !important;
    padding:0 !important;

    
  }

  .radius-slider{
    margin-top:4px !important;
    padding:0 !important;
  }

  .radius-slider input[type="range"],
  .radius-filter input[type="range"]{
    margin:0;
  }

  #radiusValue,
  #currentRadius{
    display:block;
    margin-top:4px;
    font-size:13px;
  }

  .main-content{
    padding-top:4px !important;
  }

}

 





@media (max-width:768px){

.mobile-search-input{

margin:0 !important;
padding:5px 14px !important;

border-radius:14px;

width:100%;

font-size:15px;

}

/* espace entre input et radius */

.mobile-radius-filter,
.radius-filter{

margin-top:6px !important;

}

/* réduire hauteur radius */

.radius-filter{

padding:10px !important;

}

/* corriger texte radius */

.radius-info{

margin:0;
line-height:1.2;

}

}




.search-suggestions{
position:absolute;
top:52px;
left:0;
width:100%;
background:white;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
z-index:9999;
overflow:hidden;
display:none;
}

.search-suggestion{
padding:12px 16px;
cursor:pointer;
display:flex;
align-items:center;
gap:10px;
font-size:15px;
}

.search-suggestion:hover{
background:#f5f5f5;
}



.party-count{
font-size:11px;
color:#ff4d4f;
margin-top:4px;

}



/* bloc ville + résultats */
.city-info{
padding:12px 18px;
margin-top:6px;
margin-bottom:16px;
line-height:1;
}

/* ville recherchée */
<!--.city-info .searched-city{
font-size:20px;
font-weight:700;
margin-bottom:6px;
display:flex;
align-items:center;
gap:8px;
  border-bottom:1px solid #eee;
}

/* message aucune soirée */
.city-info .no-results{
font-size:16px;
font-weight:600;
color:#333;
margin-bottom:6px;
display:flex;
align-items:center;
gap:8px;
}

/* fallback partout */
.city-info .fallback-city{
font-size:18px;
font-weight:700;
margin-top:4px;
display:flex;
align-items:center;
gap:8px;
}

/* nombre de soirées */
.city-info .party-count{
font-size:16px;
font-weight:700;
color:#ff4b4b;
margin-top:6px;
display:flex;
align-items:center;
gap:8px;
}

/* espace avant les soirées */
.party-list{
margin-top:12px;
}

-->

<!--
.city-info{
margin:10px 16px 12px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}-->















/* ville */

.city-info .searched-city{
font-size:20px;
font-weight:700;
line-height:1.3;
margin-bottom:6px;
color:#222;
}

/* rayon */

.city-info .searched-city span{
font-size:14px;
font-weight:500;
color:#666;
margin-left:4px;
}

/* aucune soirée */

.city-info .no-results{
font-size:15px;
font-weight:500;
color:#555;
margin:3px 0;
}

/* fallback partout */

.city-info .fallback-city{
font-size:15px;
font-weight:600;
color:#333;
margin-top:2px;
}

/* compteur soirées */

.city-info .party-count{
font-size:16px;
font-weight:600;
color:#ff3b30;
margin-top:4px;
}













/* ===============================
   MODE RECHERCHE FULLSCREEN
================================ */

.search-mode{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#fff;
z-index:9999;
padding:20px;
overflow:auto;
}

/* espace entre input et radius */

.search-mode #mobileSearchBar{
margin-top:20px;
}

/* cacher le contenu derrière */

.search-mode + .main-content{
display:none;
}






.close-search{
border:none;
background:none;
font-size:26px;
position:absolute;
top:20px;
right:20px;
cursor:pointer;
}




/* ===============================
   MODE RECHERCHE FULLSCREEN
================================ */




/* ===============================
   OVERLAY RECHERCHE MOBILE
================================ */

#xx35SearchOverlay[hidden]{
display:none !important;
}

#xx35SearchOverlay{

position:fixed;
top:0;
left:0;

width:100%;
height:100dvh;

z-index:99999;

/* fond sombre */
background:rgba(0,0,0,0.35);
backdrop-filter:blur(6px);

/* centrer le bloc */
display:flex;
justify-content:center;
align-items:flex-start;

padding-top:90px;

overflow:hidden;

}

/* bloquer totalement le scroll */

body.xx35-search-open{

position:fixed;
width:100%;
height:100%;

overflow:hidden;

touch-action:none;

}

/* bloc moteur recherche */

#mobileSearchBar{

position:relative;

width:92%;
max-width:620px;

background:rgba(255,255,255,0.95);

border-radius:26px;

padding:28px;

box-shadow:0 20px 60px rgba(0,0,0,0.25);

animation:searchAppear .25s ease;

}

/* input */

#xx35SearchOverlay #mobileSearchInput{

width:100%;

box-sizing:border-box;

font-size:16px;

min-height:52px;

}

/* bouton fermer */

.xx35-close-search{

position:absolute;

top:14px;
right:16px;

background:none;
border:none;

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

cursor:pointer;

color:#222;

}

/* radius */

.mobile-radius-filter{

display:block !important;

margin-top:16px;

}

.radius-info{

margin-bottom:10px;

}

/* suggestions */

#xx35SearchOverlay .search-suggestions{

margin-top:10px;

}

/* google autocomplete */

.pac-container{
z-index:999999 !important;
}







#mobileSearchBar{
animation:searchAppear .25s cubic-bezier(.2,.8,.2,1);
}

@keyframes searchAppear{
from{
transform:translateY(-40px) scale(.97);
opacity:0;
}
to{
transform:translateY(0) scale(1);
opacity:1;
}
}



.x35-city-info{
padding:2px 6px;

line-height:1.25;
border-bottom:1px solid #eee;
  background:#f7f7f7;
  border-radius:10px;
  font-size:10px;
  margin:10px 12px;
}

.x35-searched-city{
font-size:17px;
font-weight:700;
color:#222;
margin-bottom:4px;
display:flex;
align-items:center;
gap:6px;
}

.x35-city-radius{
font-size:13px;
font-weight:600;
color:#888;
}

.x35-no-results{
font-size:14px;
font-weight:600;
color:#444;
margin-top:2px;
  display:flex;
  align-items:center;
	gap:6px;
}

.x35-no-results::before{
content:"•";
font-size:18px;
color:#bbb;
}

.x35-fallback-city{
font-size:14px;
font-weight:600;
color:#3b83f6;
  text-decoration:none;
  display:inline-block;
}

.x35-party-count{
font-size:15px;
font-weight:700;
color:#f59e0b;
margin-top:2px;
  letter-spacing:0.2px;
}


.x35-radius-hint{
font-size:13px;
color:#999;
margin-top:2px;
font-weight:500;
 opacity:0.9;
 margin-bottom:8px;
}








/* ===== PROFILE COVER ===== */

.x169-profile-cover{
position:relative;
width:100%;
border-radius:20px;
overflow:hidden;
margin-bottom:30px;
background:linear-gradient(135deg,#444,#222);
padding:60px 20px 40px;
box-sizing:border-box;
}

.x169-cover-bg{
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(0,0,0,0.2),rgba(0,0,0,0.6));
z-index:1;
}

.x169-cover-content{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
color:white;
width:100%;
max-width:720px;
margin:auto;
}

/* ===== AVATAR ===== */

.x169-avatar{
width:100px;
height:100px;
border-radius:50%;
border:4px solid white;
object-fit:cover;
margin-bottom:12px;
}

/* ===== NAME ===== */

.x169-name{
font-size:28px;
font-weight:700;
margin-bottom:6px;
}

/* ===== TRUST SCORE ===== */

.x169-trust-score{
font-size:16px;
opacity:0.9;
margin-bottom:20px;
}

/* ===== CRITERIA GRID ===== */

/* ===== TRUST CRITERIA CLEAN ===== */

.x169-trust-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
width:100%;
max-width:420px;
margin:25px auto;
}



.x169-trust-item{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
opacity:1 !important;
  font-size:15px;
    text-align:center;
  opacity:0.9;
}

.x169-trust-item span{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
opacity:1 !important;
}




x169-trust-icon{
width:26px;
height:26px;
min-width:26px;
border-radius:50%;
background:#fff;
color:#ffffff !important;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
font-weight:700;
line-height:1;
opacity:1 !important;
filter:none !important;
-webkit-text-fill-color:#ffffff !important;
}




x169-trust-text{
color:#fff !important;
opacity:1 !important;
-webkit-text-fill-color:#fff !important;
}








/* mobile */

@media (max-width:520px){

.x169-trust-grid{
grid-template-columns:1fr;
gap:8px;
}

.x169-trust-item{
font-size:14px;
}

}

/* ===== SCORE BAR ===== */

.x169-score-bar{
width:220px;
height:10px;
background:#ddd;
border-radius:20px;
overflow:hidden;
margin-top:10px;
}

.x169-score-progress{
height:100%;
background:#f39c12;
border-radius:20px;
}

/* ===== SCORE VALUE ===== */

.x169-score-value{
margin-top:8px;
font-weight:bold;
font-size:16px;
}

/* ===== STATUS ===== */

.x169-score-status{
margin-top:6px;
font-size:14px;
}

/* ===== CONTACT BUTTON ===== */

.x169-contact-btn{
display:inline-block;
margin-top:14px;
padding:10px 26px;
background:white;
color:#444;
border-radius:30px;
font-weight:600;
text-decoration:none;
transition:0.2s;
}

.x169-contact-btn:hover{
background:#f1f1f1;
}

/* ===== TABLET ===== */

@media (max-width:900px){

.x169-trust-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* ===== MOBILE ===== */

@media (max-width:520px){

.x169-profile-cover{
padding:50px 15px 30px;
}

.x169-avatar{
width:80px;
height:80px;
}

.x169-name{
font-size:22px;
}

.x169-trust-grid{
grid-template-columns:1fr;
max-width:300px;
}

.x169-trust-item{
font-size:13px;
}

}






/* ================= PROFILE CARD ================= */

.x169-profile-card{
background:#ffffff;
border-radius:16px;
padding:24px;
margin:22px auto;
max-width:680px;
box-shadow:0 6px 20px rgba(0,0,0,0.08);

display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

/* ================= TITLES ================= */

.x169-section-title{
font-size:22px;
font-weight:700;
margin-bottom:14px;
color:#222;
text-align:center;
}

/* ================= TEXT ================= */

.x169-section-text{
font-size:15px;
line-height:1.7;
color:#555;
max-width:520px;
}

/* ================= SOCIALS ================= */

.x169-socials-grid{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin-top:14px;
}

/* ================= SOCIAL BUTTON ================= */

.x169-social-btn{
display:inline-block;
padding:10px 18px;
border-radius:30px;
font-size:14px;
font-weight:600;
text-decoration:none;
transition:0.2s;
}

/* Instagram */

.x169-social-instagram{
background:#E1306C;
color:white;
}

/* Facebook */

.x169-social-facebook{
background:#1877F2;
color:white;
}

/* Linkedin */

.x169-social-linkedin{
background:#0A66C2;
color:white;
}

/* hover */

.x169-social-btn:hover{
opacity:0.9;
transform:translateY(-2px);
}



@media (max-width:600px){

.x169-profile-card{
margin:16px;
padding:20px;
}

.x169-section-title{
font-size:20px;
}

.x169-section-text{
font-size:14px;
}

}





/* ================= SECTION ================= */

.x169-parties-section{
margin:40px auto;
max-width:1100px;
padding:0 20px;
}

/* ================= GRID ================= */

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

/* ================= CARD ================= */

.x169-party-card{
background:#fff;
border-radius:16px;
overflow:hidden;
text-decoration:none;
color:#222;
box-shadow:0 8px 22px rgba(0,0,0,0.08);
transition:all 0.25s ease;
}

.x169-party-card:hover{
transform:translateY(-6px);
box-shadow:0 14px 30px rgba(0,0,0,0.15);
}

/* ================= COVER ================= */


.x169-party-media{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* ================= INFO ================= */

.x169-party-info{
padding:16px;
}

.x169-party-title{
font-size:17px;
font-weight:600;
margin-bottom:6px;
}

/* ================= META ================= */


.x169-party-meta{
display:flex;
justify-content:space-between;
font-size:14px;
color:#666;
  object-fit:cover;
  width:100%;
height:100%;
 
  
}

.x169-party-cover{
width:100%;
height:200px;
overflow:hidden;
position:relative;
}










.x169-party-price{
font-weight:600;
color:#000;
}

/* ================= EMPTY ================= */

.x169-empty{
text-align:center;
color:#777;
margin-top:20px;
}

@media (max-width:600px){

.x169-party-cover{
height:150px;
}

.x169-party-title{
font-size:16px;
}

}




/* ===============================
DASHBOARD CONTAINER
=============================== */

.x169-dashboard{

max-width:1100px;
margin:auto;

padding-left:20px;
padding-right:20px;
padding-top:20px;

}


/* ===============================
SECTION TITLES
=============================== */

.x169-section-title{

text-align:center;

font-size:26px;
font-weight:700;

margin-top:40px;
margin-bottom:25px;

}


/* ===============================
STATISTICS GRID
=============================== */

.x169-dashboard-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-top:25px;
margin-bottom:40px;

}


/* ===============================
STAT CARD
=============================== */

.x169-stat-card{

background:#ffffff;

border-radius:20px;

padding:28px;

text-align:center;

box-shadow:0 10px 28px rgba(0,0,0,0.06);

transition:all .2s ease;

}

.x169-stat-card:hover{

transform:translateY(-4px);

box-shadow:0 16px 36px rgba(0,0,0,0.10);

}

.x169-stat-title{

font-size:16px;
color:#777;

margin-bottom:8px;

}

.x169-stat-value{

font-size:26px;
font-weight:700;

color:#111;

}


/* ===============================
BOOKING / REQUEST CARD
=============================== */

.x169-card{

max-width:700px;

margin-left:auto;
margin-right:auto;

margin-bottom:25px;

padding:26px;

border-radius:20px;

background:#ffffff;

box-shadow:0 10px 30px rgba(0,0,0,0.06);

}


/* ===============================
USER ROW
=============================== */

.x169-user-row{

display:flex;
align-items:center;
gap:14px;

margin-top:12px;
margin-bottom:15px;

}

.x169-avatar{

width:50px;
height:50px;

border-radius:50%;

object-fit:cover;

}


/* ===============================
USER INFO
=============================== */

.x169-user-info{

display:flex;
flex-direction:column;

}

.x169-user-name{

font-weight:600;
font-size:16px;

}

.x169-user-meta{

font-size:13px;

color:#777;

margin-top:3px;

}


/* ===============================
VERIFIED BADGE
=============================== */

.x169-badge{

display:inline-block;

font-size:12px;

background:#eaf7ef;

color:#19a45c;

padding:4px 8px;

border-radius:8px;

margin-top:4px;

}


/* ===============================
BUTTONS
=============================== */

.x169-btn{

display:inline-block;

margin-top:14px;

padding:10px 18px;

border-radius:12px;

background:#111;

color:white;

font-size:14px;

text-decoration:none;

transition:all .2s;

}

.x169-btn:hover{

background:#333;

}

.x169-btn-outline{

background:white;

border:1px solid #ddd;

color:#333;

}

.x169-btn-outline:hover{

background:#f6f6f6;

}


/* ===============================
PARTIES GRID
=============================== */

.x169-parties-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-top:20px;

}


/* ===============================
PARTY CARD
=============================== */

.x169-party-card{

background:#ffffff;

border-radius:18px;

overflow:hidden;

text-decoration:none;

color:inherit;

box-shadow:0 8px 24px rgba(0,0,0,0.06);

transition:.2s;

}

.x169-party-card:hover{

transform:translateY(-5px);

box-shadow:0 16px 36px rgba(0,0,0,0.10);

}


/* ===============================
PARTY IMAGE
=============================== */

.x169-party-image{

width:100%;
height:180px;

object-fit:cover;

display:block;

}


/* ===============================
PARTY BODY
=============================== */

.x169-party-body{

padding:16px;

}

.x169-party-title{

font-size:16px;
font-weight:600;

margin-bottom:6px;

}

.x169-party-meta{

font-size:13px;
color:#777;

}


/* ===============================
MOBILE
=============================== */

@media(max-width:768px){

.x169-dashboard{

padding-left:16px;
padding-right:16px;

}

.x169-dashboard-grid{

grid-template-columns:repeat(2,1fr);

}

.x169-card{

padding:20px;

}

.x169-party-image{

height:160px;

}

}



/* ============================= */
/* CHAT CONTAINER */
/* ============================= */

.x169-chat-container{
max-width:650px;
margin:auto;
padding:20px;
background:#fff;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
  
}

/* ============================= */
/* TITRE */
/* ============================= */

.x169-chat-title{
font-size:26px;
font-weight:700;
margin-bottom:20px;
}

/* ============================= */
/* LISTE DES CONVERSATIONS */
/* ============================= */

.x169-conversations{
display:flex;
flex-direction:column;
}

/* ============================= */
/* UNE CONVERSATION */
/* ============================= */

.x169-conversation{
display:flex;
align-items:center;
gap:15px;
padding:14px 10px;
text-decoration:none;
color:#000;
border-bottom:1px solid #f0f0f0;
transition:background 0.2s ease;
}

.x169-conversation:hover{
background:#f7f7f7;
}

/* ============================= */
/* AVATAR */
/* ============================= */

.x169-chat-avatar{
width:50px;
height:50px;
flex-shrink:0;
}

.x169-chat-avatar img,
.x169-chat-avatar div{
width:50px;
height:50px;
border-radius:50%;
}

/* ============================= */
/* CONTENU CENTRAL */
/* ============================= */

.x169-conv-middle{
flex:1;
display:flex;
flex-direction:column;
}

/* NOM */

.x169-conv-name{
font-size:16px;
font-weight:600;
}

/* DERNIER MESSAGE */

.x169-conv-last{
font-size:14px;
color:#777;
margin-top:3px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* ============================= */
/* PARTIE DROITE */
/* ============================= */

.x169-conv-right{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:5px;
}

/* DATE */

.x169-conv-date{
font-size:12px;
color:#999;
}

/* ============================= */
/* BADGE MESSAGE NON LU */
/* ============================= */

.x169-unread{
background:#25D366;
color:white;
font-size:12px;
font-weight:600;
padding:3px 8px;
border-radius:20px;
min-width:20px;
text-align:center;
}

/* ============================= */
/* PAS DE CONVERSATION */
/* ============================= */

.x169-no-chat{
color:#888;
padding:20px;
text-align:center;
}

/* ============================= */
/* RESPONSIVE MOBILE */
/* ============================= */

@media(max-width:600px){

.x169-chat-container{
padding:15px;
border-radius:0;
box-shadow:none;
}

.x169-chat-title{
font-size:22px;
}

.x169-conversation{
padding:12px 5px;
}

.x169-chat-avatar{
width:45px;
height:45px;
}

.x169-chat-avatar img,
.x169-chat-avatar div{
width:45px;
height:45px;
}

}











/* wrapper */

.x169-chat-wrapper{
max-width:700px;
margin:auto;
display:flex;
flex-direction:column;
height:70vh;
}


.x169-chat-header{
display:flex;
align-items:center;
padding:10px 15px;
border-bottom:1px solid #eee;
background:white;
}

.x169-chat-user{
display:flex;
align-items:center;
gap:10px;
}

.x169-chat-user-avatar{
width:40px;
height:40px;
}

.x169-chat-user-name{
font-weight:600;
font-size:16px;
}







/* messages zone */

.x169-chat-messages{
flex:1;
overflow-y:auto;
padding:20px;
background:#f5f5f5;
display:flex;
flex-direction:column;
gap:10px;
-webkit-overflow-scrolling:touch;  
}






/* message */

.x169-msg{
display:flex;
flex-direction:column;
max-width:70%;
}

/* moi */

.x169-me{
align-self:flex-end;
text-align:right;
}

/* autre */

.x169-other{
align-self:flex-start;
}

/* bulle */

.x169-bubble{
padding:10px 14px;
border-radius:16px;
background:#e5e5ea;
  max-width:260px;
}

.x169-me .x169-bubble{
background:#25d366;
color:white;
}

/* heure */

.x169-time{
font-size:11px;
color:#888;
margin-top:3px;
}

/* form */

.x169-chat-form{
display:flex;
gap:8px;
padding:10px;
border-top:1px solid #ddd;
background:white;
  display:flex;
  align-items:center;
  width:100%;
  box-sizing:border-box;
}

.x169-chat-form textarea{
flex:1;
resize:none;
padding:10px;
border-radius:8px;
border:1px solid #ddd;
height:45px;
}

.x169-chat-form button{
background:#ff385c;
border:none;
color:white;
padding:10px 18px;
border-radius:8px;
cursor:pointer;
  flex-shrink:0;
}

.x169-chat-input{
flex:1;
width:100%;
min-height:40px;
max-height:120px;
resize:none;
box-sizing:border-box;
  
  bottom:0;
  background:white;
}

.x169-read{
font-size:11px;
margin-left:6px;
color:#999;
  margin-left:5px;
}



.x169-read.read{
color:#1da1f2 !important;
}




.x169-chat-status{
font-size:12px;
color:#777;
}


.x169-typing-dots{
display:flex;
gap:4px;
padding:6px 0;
}

.x169-typing-dots span{
width:6px;
height:6px;
background:#999;
border-radius:50%;
display:block;
animation:x169typing 1.4s infinite;
}

.x169-typing-dots span:nth-child(2){
animation-delay:0.2s;
}

.x169-typing-dots span:nth-child(3){
animation-delay:0.4s;
}

@keyframes x169typing{

0%{opacity:0.2; transform:translateY(0);}
50%{opacity:1; transform:translateY(-4px);}
100%{opacity:0.2; transform:translateY(0);}

}






.x169-footer-msg{
position:relative;
}

.x169-footer-msg .x169-footer-icon{
font-size:22px;
}

.x169-msg-badge{
position:absolute;
top:-5px;
right:-6px;

background:#ff3b30;
color:white;

font-size:10px;
padding:2px 6px;

border-radius:20px;

display:none;

min-width:16px;
height:16px;

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



.x169-emoji-picker{
position:absolute;
bottom:70px;
left:10px;
background:white;
border-radius:10px;
padding:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
display:flex;
flex-wrap:wrap;
gap:10px;
max-width:200px;
}

.x169-emoji-picker span{
font-size:22px;
cursor:pointer;
}







.x2x-participants{
margin-top:8px;
font-weight:600;
}

.x2x-participants a{
color:#e63946;
text-decoration:none;
}

.x2x-participant-avatars{
display:flex;
margin-top:8px;
}

.x2x-avatar-small{
margin-left:-8px;
}

.x2x-avatar-small img{
width:36px;
height:36px;
border-radius:50%;
border:2px solid #fff;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
object-fit:cover;
}




.participants-list{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:20px;
margin-top:30px;
}

.participant-card{
display:flex;
align-items:center;
gap:12px;
padding:12px;
border-radius:12px;
background:#fff;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
text-decoration:none;
color:#111;
transition:0.2s;
}

.participant-card:hover{
transform:translateY(-3px);
box-shadow:0 6px 16px rgba(0,0,0,0.12);
}

.participant-avatar img{
width:50px;
height:50px;
border-radius:50%;
object-fit:cover;
}

.participant-name{
font-weight:600;
}

.participant-rating{
font-size:13px;
color:#777;
}












.x2x-booking-card{
    padding: 22px;
    border-radius: 22px;
}

.x2x-booking-grid{
    display:grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 28px;
    align-items: center;
}

.x2x-booking-left{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.x2x-booking-cover{
    width:140px;
    height:100px;
    border-radius:16px;
    object-fit:cover;
    display:block;
    box-shadow:0 6px 18px rgba(0,0,0,0.10);
}

.x2x-booking-cover-placeholder{
    background:#f3f3f3;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
}

.x2x-booking-title{
    margin:0;
    font-size:32px;
    line-height:1.1;
}

.x2x-booking-date,
.x2x-booking-status{
    margin:0;
    font-size:15px;
}

.x2x-participants{
    margin-top:2px;
}

.x2x-participants a{
    text-decoration:none;
    font-weight:700;
    color:#c74b61;
}

.x2x-participant-avatars{
    display:flex;
    align-items:center;
    margin-top:2px;
    min-height:40px;
}

.x2x-avatar-small{
    margin-right:-10px;
    position:relative;
    z-index:1;
}

.x2x-avatar-small:hover{
    z-index:3;
    transform:translateY(-2px);
}

.x2x-avatar-small img,
.x2x-avatar-small .avatar-letter,
.x2x-avatar-small .x85-avatar-letter{
    width:38px !important;
    height:38px !important;
    min-width:38px;
    min-height:38px;
    border-radius:50% !important;
    border:2px solid #fff;
    box-shadow:0 3px 10px rgba(0,0,0,0.15);
}

.x2x-avatar-more{
    margin-left:14px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#f1f1f1;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-weight:700;
    color:#333;
    border:2px solid #fff;
    box-shadow:0 3px 10px rgba(0,0,0,0.10);
}

.x2x-booking-right{
    display:flex;
    justify-content:center;
    align-items:center;
}

.x2x-booking-organizer{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
}

.x2x-booking-organizer-avatar img,
.x2x-booking-organizer-avatar .avatar-letter,
.x2x-booking-organizer-avatar .x85-avatar-letter{
    width:86px !important;
    height:86px !important;
    min-width:86px;
    min-height:86px;
    border-radius:50% !important;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.x2x-booking-organizer-name{
    font-size:22px;
    font-weight:800;
    line-height:1.1;
}

.x2x-booking-organizer-meta{
    font-size:14px;
    line-height:1.5;
    color:#666;
}

@media (max-width: 768px){
    .x2x-booking-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .x2x-booking-right{
        justify-content:flex-start;
    }

    .x2x-booking-organizer{
        align-items:flex-start;
        text-align:left;
    }

    .x2x-booking-title{
        font-size:24px;
    }
}









.xMesReservations-coverWrap{
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:16px 16px 0 0;
}

.xMesReservations-coverMedia{
    width:100%;
    height:100%;
    object-fit:cover;
}

.xMesReservations-content{
    padding:16px;
    background-color:white;
}

/* ROW */
.xMesReservations-row{
    display:flex;
    justify-content:space-between;
    margin-top:10px;
    gap:20px;
}

/* PARTICIPANTS */
.xMesReservations-participants{
    flex:1;
}

.xMesReservations-avatars{
    display:flex;
    margin-top:8px;
}

.xMesReservations-avatars a{
    margin-right:-8px;
}

.xMesReservations-avatars img{
    width:34px;
    height:34px;
    border-radius:50%;
    border:2px solid #fff;
}

/* +X */
.xMesReservations-more{
    width:34px;
    height:34px;
    background:#eee;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:10px;
    text-decoration:none;
}

/* ORGANIZER */

.xMesReservations-organizer{
    display:flex;
    align-items:center;
    gap:10px;
}



.xMesReservations-organizer img{
    width:50px;
    height:50px;
    border-radius:50%;
}

.xMesReservations-organizer-info{
    font-size:14px;
}









/* STATUS */
.xMesReservations-status{
    margin-top:10px;
    color:#444;
}

/* FOOTER */
.xMesReservations-footer{
    margin-top:15px;
}

.xMesReservations-btn{
    display:block;
    width:100%;
    text-align:center;
    padding:12px;
    background:#111;
    color:#fff;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
}

/* MOBILE */
@media (max-width:768px){
    .xMesReservations-row{
        flex-direction:row; /* 🔥 garde horizontal */
        justify-content:space-between;
    }

    .xMesReservations-organizer{
        justify-content:flex-end;
    }
}





/* HEADER */
.xlisteparticipants-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:20px;
    max-width:600px;
    margin:0 auto;
}

.xlisteparticipants-header h1{
    margin:0;
    font-size:22px;
}

/* BACK BUTTON */
.xlisteparticipants-back{
    display:flex;
    align-items:center;
    justify-content:center;

    width:36px;
    height:36px;

    border-radius:50%;
    background:#f3f3f3;

    text-decoration:none;
    color:#111;
    font-size:18px;

    transition:all 0.2s;
}

.xlisteparticipants-back:hover{
    background:#e5e5e5;
    transform:translateX(-2px);
}


/* CONTAINER */
.xlisteparticipants-container{
    max-width:600px;
    margin:0 auto;
    padding:10px 20px 30px;
}


/* CARD */
.xlisteparticipants-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    padding:14px;
    margin-bottom:12px;

    background:#fff;
    border-radius:16px;

    text-decoration:none;
    color:inherit;

    box-shadow:0 6px 20px rgba(0,0,0,0.06);
    transition:all 0.2s ease;
}

.xlisteparticipants-card:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
}


/* AVATAR */
.xlisteparticipants-avatar img,
.xlisteparticipants-avatar .avatar-letter{
    width:52px !important;
    height:52px !important;
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
}


/* INFO */
.xlisteparticipants-info{
    flex:1;
}

.xlisteparticipants-name{
    font-weight:700;
    font-size:16px;
}

.xlisteparticipants-rating{
    font-size:13px;
    color:#666;
    margin-top:4px;
}


/* ARROW */
.xlisteparticipants-arrow{
    font-size:18px;
    color:#aaa;
}







.xBackNav{
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.8);
  position:sticky;
    top:0;
    z-index:1000;
    padding:12px 16px;

  
}







.xBackNav-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:36px;
    height:36px;

    border-radius:50%;
    background:#f3f3f3;

    text-decoration:none;
    color:#111;
    font-size:18px;

    transition:all 0.2s ease;
}

.xBackNav-btn:hover{
    background:#e5e5e5;
    transform:translateX(-2px);
}









.xmesdemandes-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:20px;
    box-shadow:0 10px 28px rgba(0,0,0,0.08);
    border:1px solid rgba(0,0,0,0.04);
}







.xmesdemandes-cover{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#f3f3f3;
}

/* ratio FIXE compatible tous iPhones */
.xmesdemandes-cover::before{
    content:"";
    display:block;
    padding-top:56.25%;
}

.xmesdemandes-cover img,
.xmesdemandes-cover video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;

    max-width:none; /* 🔥 très important */
}






















.xmesdemandes-content{
    padding:18px;
    display:flex;
    grid-template-columns: 1fr 160px; /* 🔥 important */
    gap:20px;
    align-items:start;
}

.xmesdemandes-cover img{
    display:block;
}





.xmesdemandes-left{
    
   flex:1;
}

.xmesdemandes-right{
    width:160px;
}

.xmesdemandes-title{
    margin:0 0 8px 0;
    font-size:24px;
    line-height:1.15;
    font-weight:800;
}

.xmesdemandes-meta{
    font-size:14px;
    color:#666;
    margin-top:4px;
}

.xmesdemandes-row{
    width:100%;
    margin-top:0;
}

.xmesdemandes-participant-main{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.xmesdemandes-participant-avatar-link{
    text-decoration:none;
    flex-shrink:0;
}

.xmesdemandes-avatar img,
.xmesdemandes-avatar .avatar-letter,
.xmesdemandes-avatar .x85-avatar-letter{
    width:72px !important;
    height:72px !important;
    min-width:72px;
    min-height:72px;
    border-radius:50% !important;
    object-fit:cover;
    box-shadow:0 6px 14px rgba(0,0,0,0.14);
}

.xmesdemandes-user-info{
    min-width:0;
}

.xmesdemandes-user-name{
    text-decoration:none;
    color:#111;
    font-weight:800;
    font-size:18px;
    display:inline-block;
}

.xmesdemandes-user-meta{
    font-size:13px;
    color:#666;
    margin-top:4px;
    line-height:1.35;
}

.xmesdemandes-participants{
    margin-top:16px;
}

.xmesdemandes-participants-link{
    text-decoration:none;
    color:#c14c66;
    font-weight:700;
}

.xmesdemandes-avatars{
    display:flex;
    align-items:center;
    gap:0;
    margin-top:10px;
    flex-wrap:wrap;
}

.xmesdemandes-avatar-small-link{
    text-decoration:none;
    display:inline-flex;
    margin-left:-8px;
}

.xmesdemandes-avatar-small-link:first-child{
    margin-left:0;
}

.xmesdemandes-avatar-small-link img,
.xmesdemandes-avatar-small-link .avatar-letter,
.xmesdemandes-avatar-small-link .x85-avatar-letter{
    width:34px !important;
    height:34px !important;
    min-width:34px;
    min-height:34px;
    border-radius:50% !important;
    object-fit:cover;
    border:2px solid #fff;
    box-shadow:0 4px 10px rgba(0,0,0,0.12);
}

.xmesdemandes-avatar-more{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    min-width:34px;
    border-radius:50%;
    background:#f3f3f3;
    color:#111;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    border:2px solid #fff;
    box-shadow:0 4px 10px rgba(0,0,0,0.10);
    margin-left:6px;
}

.xmesdemandes-status{
    margin-top:16px;
    font-size:15px;
    color:#333;
    width:100%;
    text-align:center;
}

.xmesdemandes-actions{
    padding:18px;
    border-top:1px solid #f1f1f1;
    background:white;
    border-radius:0 0 20px 20px;
}









.xmesdemandes-btn,
.xmesdemandes-btn-outline{
    flex:1;
    min-width:140px;
    padding:11px 14px;
    border-radius:12px;
    font-weight:700;
    text-decoration:none;
    text-align:center;
    cursor:pointer;
}

.xmesdemandes-btn{
    border:1px solid #111;
    background:#111;
    color:#fff;
}

.xmesdemandes-btn-outline{
    border:1px solid #ddd;
    background:#fff;
    color:#111;
}

.xmesdemandes-btn-full{
    width:100%;
   
   
    display:block;
}

@media (max-width:768px){
    .xmesdemandes-content{
        grid-template-columns:1fr 1fr;
        gap:16px;
    }

    .xmesdemandes-title{
        font-size:20px;
    }

    .xmesdemandes-avatar img,
    .xmesdemandes-avatar .avatar-letter,
    .xmesdemandes-avatar .x85-avatar-letter{
        width:60px !important;
        height:60px !important;
        min-width:60px;
        min-height:60px;
    }

    

    .xmesdemandes-actions{
    padding:16px;
    border-top:1px solid #eee;
    display:flex;
    gap:10px;

    width:100%;          /* 🔥 important */
    box-sizing:border-box; /* 🔥 évite le débordement */
}

    .xmesdemandes-btn,
    .xmesdemandes-btn-outline,
    .xmesdemandes-btn-full{
        width:100%;
    }
}

@media (max-width:560px){
    .xmesdemandes-content{
        grid-template-columns:1fr;
    }

    .xmesdemandes-right{
        align-items:flex-start;
        text-align:left;
    }

    .xmesdemandes-participant-main{
        flex-direction:row;
        align-items:center;
        text-align:left;
    }

    .xmesdemandes-status{
        text-align:left;
    }
}




.x169-party-pending{
    color:#ff9800;
    font-weight:600;
}



/* BADGE UX */
.x169-party-badge-ux{
    position:absolute;
    bottom:10px;
    left:10px;
    padding:6px 10px;
    font-size:12px;
    border-radius:20px;
    font-weight:600;
    color:#fff;
}

/* couleurs */
.x169-full{ background:#4caf50; }       /* vert */
.x169-pending{ background:#ff9800; }    /* orange */
.x169-available{ background:#2196f3; }  /* bleu */

/* pending text */
.x169-party-pending{
    color:#ff9800;
    font-weight:600;
}



.x169-badge-notif{
    position:absolute;
    top:10px;
    right:10px;
    background:#ff3b30;
    color:#fff;
    font-size:12px;
    font-weight:700;
    padding:5px 10px;
    border-radius:20px;
}

.x169-stat-card{
    position:relative;
}



.x170-badge-new{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-left:8px;

    background:#ff3b30;
    color:#fff;

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

    padding:4px 9px;
    border-radius:999px;

    line-height:1;
}

.x169-btn-manage {
    display: inline-block;
    padding: 10px 16px;
    background: #111;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    margin-top: 10px;
}




.x169-manage-cover{
    margin-bottom:20px;
    border-radius:16px;
    overflow:hidden;
    background:#f5f5f5;
}

.x169-manage-cover-media{
    width:100%;
    max-height:260px;
    display:block;
    object-fit:cover;
}



.x169-manage-container{
    padding:20px;
}

.x169-manage-cover{
    border-radius:20px;
    overflow:hidden;
    margin-bottom:20px;
}

.x169-manage-media{
    width:100%;
    height:220px;
    object-fit:cover;
}

.x169-manage-form input{
    width:100%;
    padding:12px;
    margin-bottom:10px;
    border-radius:10px;
    border:1px solid #ddd;
}

.x169-upload{
    display:block;
    padding:12px;
    background:#f5f5f5;
    border-radius:10px;
    margin-bottom:10px;
    text-align:center;
    cursor:pointer;
}

.x169-btn-save{
    width:100%;
    padding:14px;
    background:#111;
    color:#fff;
    border:none;
    border-radius:12px;
    font-weight:bold;
   transition:0.2s;
}
.169-btn-save:disabled{
  
  opacity:0.6;
}

.x169-back{
    display:block;
    margin-top:15px;
    text-align:center;
}


.x169-manage-form textarea{
    width:100%;
    min-height:120px;
    padding:12px;
    margin-bottom:10px;
    border-radius:10px;
    border:1px solid #ddd;
    resize:vertical;
}

.x169-manage-form label{
    display:block;
    font-weight:600;
    margin:10px 0 5px;
}



.x169-toast{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    background:#111;
    color:#fff;
    padding:12px 20px;
    border-radius:20px;
    z-index:9999;
    animation:fadeInOut 3s forwards;
}

@keyframes fadeInOut{
    0%{opacity:0; top:0;}
    10%{opacity:1; top:20px;}
    90%{opacity:1;}
    100%{opacity:0;}
}

.loader{
    width:18px;
    height:18px;
    border:2px solid #fff;
    border-top:2px solid transparent;
    border-radius:50%;
    display:inline-block;
    animation:spin 0.8s linear infinite;
}

@keyframes spin{
    to{transform:rotate(360deg);}
}









.x50review-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:20px;
}

.x50review-modal{
    position:relative;
    width:100%;
    max-width:430px;
    background:#fff;
    border-radius:24px;
    padding:22px;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
}

.x50review-close{
    position:absolute;
    top:14px;
    right:14px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#f4f4f4;
    color:#111;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:700;
}

.x50review-user{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.x50review-avatar{
    width:58px;
    height:58px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
}

.x50review-user-info{
    min-width:0;
}

.x50review-name{
    font-size:20px;
    font-weight:700;
    color:#111;
    line-height:1.2;
}

.x50review-sub{
    font-size:13px;
    color:#8a8a8a;
    margin-top:3px;
}

.x50review-form{
    margin-top:8px;
}

.x50review-stars{
    display:flex;
    flex-direction:row-reverse;
    justify-content:center;
    gap:6px;
    margin:12px 0 18px;
}

.x50review-stars input{
    display:none;
}

.x50review-stars label{
    font-size:38px;
    color:#d6d6d6;
    cursor:pointer;
    transition:.2s ease;
}

.x50review-stars input:checked ~ label,
.x50review-stars label:hover,
.x50review-stars label:hover ~ label{
    color:#FFD54A;
    transform:scale(1.08);
}

.x50review-textarea{
    width:100%;
    min-height:110px;
    border:1px solid #e2e2e2;
    border-radius:18px;
    padding:16px;
    resize:none;
    font-size:16px;
    outline:none;
    margin-bottom:16px;
}

.x50review-btn{
    width:100%;
    border:none;
    border-radius:18px;
    background:#111;
    color:#fff;
    font-weight:700;
    font-size:18px;
    padding:16px;
    cursor:pointer;
}






.x-avatar-img,
.x2x-avatar {
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
}




.169review-card {
    padding:16px;
    border-radius:16px;
    background:#fff;
    margin-top:15px;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
    transition:0.2s;
}

.169review-card:hover {
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.169review-header {
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.169review-avatar img,
.169review-avatar .x2x-avatar {
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

.169review-info {
    flex:1;
}

.169review-top {
    display:flex;
    align-items:center;
    gap:8px;
}

.169review-name {
    font-size:15px;
}

.169review-badge {
    font-size:11px;
    background:#f1c40f;
    padding:2px 6px;
    border-radius:8px;
    color:#fff;
}

.169review-stars {
    margin-top:4px;
    font-size:14px;
}

.169star-filled {
    color:#f1c40f;
}

.169star-empty {
    color:#ddd;
}

.169review-date {
    font-size:12px;
    color:#999;
    margin-top:3px;
}

.169review-comment {
    margin-top:10px;
    font-size:14px;
    color:#444;
    line-height:1.5;
}