.discover-bar{

transition:
transform .35s ease,
opacity .35s ease;

}

.hide-bar{

transform:
translateY(-100%);

opacity:0;

pointer-events:none;

}

/* ===========================
   COMMENT MODAL
=========================== */

.comment-modal{

position:fixed;

left:0;

right:0;

bottom:0;

top:0;

display:none;

justify-content:flex-end;

align-items:flex-end;

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

z-index:9999;

}

.comment-modal.show{

display:flex;

}

.comment-sheet{

background:white;

width:100%;

max-height:75vh;

border-radius:28px 28px 0 0;

padding:18px;

overflow:hidden;

display:flex;

flex-direction:column;

animation:slideUp .25s ease;

}

@keyframes slideUp{

from{

transform:translateY(100%);

}

to{

transform:translateY(0);

}

}

.comment-header{

display:flex;

justify-content:space-between;

align-items:center;

padding-bottom:15px;

border-bottom:1px solid #ececec;

}

.comment-header button{

background:none;

border:none;

font-size:22px;

cursor:pointer;

}

.modal-comments{

flex:1;

overflow-y:auto;

padding:15px 0;

}

.modal-comment-input{

display:flex;

gap:10px;

}

.modal-comment-input input{

flex:1;

height:48px;

border:none;

background:#f5f5f5;

border-radius:14px;

padding:0 15px;

}

.modal-comment-input button{

border:none;

background:linear-gradient(135deg,#6d3cff,#ff2d75);

color:white;

padding:0 20px;

border-radius:14px;

cursor:pointer;

}
/* COMMENT MODAL */

.comment-modal{

position:fixed;

left:0;

right:0;

top:0;

bottom:0;

display:none;

justify-content:center;

align-items:flex-end;

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

z-index:3000;

}

.comment-modal.show{

display:flex;

}

.comment-sheet{

width:100%;

max-width:700px;

height:75vh;

background:#fff;

border-radius:25px 25px 0 0;

display:flex;

flex-direction:column;

overflow:hidden;

}

.comment-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px;

font-weight:bold;

border-bottom:1px solid #eee;

}

.comment-header button{

background:none;

border:none;

font-size:22px;

cursor:pointer;

}

.modal-comments{

flex:1;

overflow-y:auto;

padding:15px;

}

.modal-comment-input{

display:flex;

gap:10px;

padding:15px;

border-top:1px solid #eee;

background:#fff;

}

.modal-comment-input input{

flex:1;

padding:12px;

border:1px solid #ddd;

border-radius:20px;

}

.modal-comment-input button{

padding:12px 20px;

border:none;

border-radius:20px;

background:#5a2638;

color:white;

cursor:pointer;

}

/* POST COMMENTS */

.card input[type="text"] {
    width: 100%;
    margin-top: 20px;
    padding: 13px 15px;
    border: none;
    outline: none;
    border-radius: 14px;
    background: rgba(255,255,255,.95);
    color: #252536;
}

.card input[type="text"] + button {
    margin-top: 9px;
    padding: 11px 15px;
    border-radius: 12px;
    background: white;
    color: var(--purple);
    font-weight: 800;
}

.comment{

background:#f4f4f4;

border:1px solid #ddd;

margin-top:10px;

padding:12px;

border-radius:12px;

color:#222;

font-size:14px;

}

.comment button{

float:right;

background:#ff4b6e;

color:white;

border:none;

padding:6px 10px;

border-radius:8px;

cursor:pointer;

}