.destination-card{
    position:relative;
    overflow:hidden;
    border-radius:18px;
}

.card-image-editor{

    position:absolute;
    inset:0;

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

    background:rgba(0,0,0,.45);

    opacity:0;
    visibility:hidden;

    transition:.35s;

    backdrop-filter:blur(2px);

    z-index:5;

}

.destination-card:hover .card-image-editor{

    opacity:1;
    visibility:visible;

}

.change-card-image{

    border:none;

    padding:10px 18px;

    border-radius:50px;

    background:#fff;

    color:#111;

    font-weight:600;

    cursor:pointer;

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

    transition:.25s;

}

.change-card-image:hover{

    transform:scale(1.08);

    background:#ff6b00;
    color:#fff;

}

.change-card-image i{

    font-size:18px;

}

.card-edit-icon{

    position:absolute;

    top:12px;
    right:12px;

    width:42px;
    height:42px;

    border-radius:50%;

    background:#fff;

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

    cursor:pointer;

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

    opacity:0;

    transition:.3s;

    z-index:8;

}

.destination-card:hover .card-edit-icon{

    opacity:1;

    transform:scale(1);

}

.join-card-wrapper, .video-card-wrapper{
    position:relative;
    display:inline-block;
    /* width:260px; */
    flex-shrink:0;
}
.video-card-wrapper {
    width: 280px;
}
.width-260px {
    width:260px;
}
.join-card-wrapper:hover .card-upload-btn{

    opacity:1;
    visibility:visible;
    transform:translate(-50%,-50%) scale(1);

}
.video-card-wrapper:hover .card-upload-btn{

    opacity:1;
    visibility:visible;
    transform:translate(-50%,-50%) scale(1);

}
/* Upload Button */
.card-upload-btn{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(.8);

    width:58px;
    height:58px;
    border:none;
    border-radius:50%;
    background:#ff6b00;
    color:#fff;
    font-size:22px;

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

    cursor:pointer;

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:5;

    box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.card-upload-btn:hover{
    background:#ff7d1e;
    transform:translate(-50%,-50%) scale(1.08);
}

/* Hover Effect */
.join-card:hover::before{
    opacity:1;
}

/* Prevent Anchor Click */
.card-upload-btn i{
    pointer-events:none;
}












/* ================= Loading ================= */

.card-loader{

    width:100%;

    height:280px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:14px;

}

.loader-spinner{

    width:45px;

    height:45px;

    border:4px solid #ececec;

    border-top:4px solid #ff6b00;

    border-radius:50%;

    animation:spin .8s linear infinite;

}

.card-loader p{

    margin:0;

    color:#666;

    font-size:15px;

    font-weight:500;

}

.card-loader.error{

    color:#e53935;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* ================= Card Animation ================= */

.card-hidden{

    opacity:0;

    transform:translateY(25px);

}

.card-visible{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .45s ease,

        transform .45s ease;

}


.container-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 22px;

    border-bottom:1px solid #eee;

    flex-shrink:0;

}
.image-container {
    overflow: auto;
}



.media-upload-top{

padding:20px;

}

#uploadNewImageBtn{

padding:12px 24px;

border:none;

background:#0066ff;

color:#fff;

border-radius:10px;

cursor:pointer;

}



.media-footer{

padding:18px;

border-top:1px solid #eee;

display:flex;

justify-content:flex-end;

}

#useSelectedImage{

padding:12px 25px;

background:#28a745;

color:white;

border:none;

border-radius:10px;

cursor:pointer;

}


.media-info{

position:absolute;

left:0;

right:0;

bottom:0;

padding:10px;

background:linear-gradient(transparent,rgba(0,0,0,.75));

color:white;

}

.mp-btn-ghost{background:#fff;color:#ff6b00;border:1px solid #ff6b00}
.mp-btn-ghost:hover{background:#ff6b00;color:#fff}

.mp-backdrop{position:fixed;inset:0;background:rgba(15,15,25,.55);display:none;align-items:center;justify-content:center;z-index:9995;backdrop-filter:blur(5px);padding:12px}
.mp-backdrop.is-open,
.mp-backdrop.show{display:flex}
.mp-modal{width:min(1200px,100%);height:min(90vh,860px);background:#fff;border-radius:18px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:mpPop .25s ease}
@keyframes mpPop{from{opacity:0;transform:scale(.97) translateY(10px)}to{opacity:1;transform:none}}

/* Header */
.mp-header{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid #eee;flex-wrap:wrap}
.mp-title{margin:0;font-size:20px;font-weight:700;color:#111;display:flex;gap:10px;align-items:center}
.mp-title i{color:#ff6b00}
.mp-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mp-search{position:relative}
.mp-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#999;font-size:13px}
.mp-search input{width:220px;max-width:100%;padding:10px 14px 10px 34px;border:1px solid #e3e5ec;border-radius:10px;font-size:14px;outline:none;transition:.2s}
.mp-search input:focus{border-color:#ff6b00;box-shadow:0 0 0 3px rgba(255,107,0,.15)}


/* Buttons */
.mp-btn{appearance:none;border:0;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;gap:8px;align-items:center;justify-content:center;transition:.2s}
.mp-btn-primary{background:#ff6b00;color:#fff}
.mp-btn-primary:hover{background:#e65f00}
.mp-btn-success{background:#22a55b;color:#fff}
.mp-btn-success:hover{background:#1c8f4e}
.mp-btn-success:disabled{background:#cfd4dc;cursor:not-allowed}
.mp-btn-icon{background:#f1f2f6;color:#333;width:40px;height:40px;padding:0}
.mp-btn-icon:hover{background:#e4e6ee}

/* Tabs */
.mp-tabs{display:flex;gap:8px;padding:12px 22px;overflow-x:auto;border-bottom:1px solid #eee;scrollbar-width:none;flex-shrink:0}
.mp-tabs::-webkit-scrollbar{display:none}
.mp-tab{flex:none;appearance:none;border:1px solid #e5e7eb;background:#fff;color:#444;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:500;cursor:pointer;display:inline-flex;gap:7px;align-items:center;transition:.2s;line-height:1}
.mp-tab i{font-size:13px;opacity:.75}
.mp-tab em{font-style:normal;font-size:11px;background:#fff1e6;color:#ff6b00;padding:3px 7px;border-radius:999px}
.mp-tab:hover{border-color:#ff6b00;color:#ff6b00}
.mp-tab.is-active{background:#ff6b00;border-color:#ff6b00;color:#fff;box-shadow:0 6px 16px rgba(255,107,0,.3)}
.mp-tab.is-active i{opacity:1}
.mp-tab.is-active em{background:rgba(255,255,255,.25);color:#fff}

/* Grid */
.mp-grid{flex:1;overflow:auto;padding:20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;background:#f7f8fc;align-content:start}

.mp-card{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#e9ecf3;cursor:pointer;border:3px solid transparent;box-shadow:0 4px 14px rgba(0,0,0,.07);opacity:0;transform:translateY(10px);animation:mpIn .35s ease forwards;animation-delay:var(--d,0ms);transition:transform .25s,box-shadow .25s,border-color .2s}
@keyframes mpIn{to{opacity:1;transform:none}}
.mp-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.16)}
.mp-card.is-selected{border-color:#ff6b00}

.mp-card:not(.is-loaded)::before,
.mp-skel{background:linear-gradient(100deg,#e9ecf3 30%,#f6f7fb 50%,#e9ecf3 70%);background-size:200% 100%;animation:mpShine 1.2s linear infinite}
.mp-card:not(.is-loaded)::before{content:"";position:absolute;inset:0}
.mp-skel{aspect-ratio:1/1;border-radius:14px}
@keyframes mpShine{to{background-position:-200% 0}}

.mp-card img,.mp-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.mp-card.is-loaded img,.mp-card.is-loaded video{opacity:1}
.mp-card.is-video{background:#15161c}
.mp-card.is-broken::after{content:"Image not available";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#999}

.mp-check{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.4);border:2px solid #fff;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;z-index:3;transition:.2s}
.mp-check i{opacity:0}
.mp-card.is-selected .mp-check{background:#ff6b00}
.mp-card.is-selected .mp-check i{opacity:1}

.mp-badge{position:absolute;left:8px;top:8px;z-index:3;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:4px 8px;border-radius:999px;display:flex;gap:5px;align-items:center}

.mp-info{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-size:12px;z-index:2;opacity:0;transition:.25s;pointer-events:none}
.mp-info small{display:block;opacity:.8;font-size:11px}
.mp-card:hover .mp-info{opacity:1}

/* States */
.mp-state{grid-column:1/-1;text-align:center;padding:60px 20px;color:#777}
.mp-state i{font-size:38px;color:#c3c7d2;margin-bottom:12px;display:block}
.mp-state button{margin-top:14px}
.mp-more{grid-column:1/-1;display:flex;justify-content:center;padding:14px}
.mp-spinner{width:28px;height:28px;border:3px solid #e6e6e6;border-top-color:#ff6b00;border-radius:50%;animation:mpSpin .7s linear infinite}
@keyframes mpSpin{to{transform:rotate(360deg)}}

/* Footer */
.mp-footer{padding:14px 22px;border-top:1px solid #eee;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff}
.mp-selected{font-size:14px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:600px){
  .mp-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}
  .mp-search,.mp-search input{width:100%}
  .mp-btn span{display:none}
}