.create-post {
    background: var(--bg-primary);
    border-radius: 10px;
    max-width:700px;
    height:164px;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--border-primary);

}

.create-post-top {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.create-post-profile {
    width: 59px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
}

.create-post-input {
    flex: 1;
    background-color: var(--bg-primary);
    height:56px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 8px 15px;
    font-size: 18px;
}

.create-post-options {
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
    margin-top:25px;
    border-top: 0.5px solid var(--border-secondary);
}


.user-action {
    display: flex;
    justify-content: space-around;
    /* padding:5px; */
    /* padding-top:10px; */
    padding:10px 5px 5px 5px;
}


.option {
    display: flex;
    align-items: center;
    justify-content:center;
    max-width:160px;
    width:100%;
    padding: 6px;
    gap: 8px;
    cursor: pointer;
    border-radius: 5px;
}

.option:hover {
    border-radius: 10px;
    /* background: #FFF5E1; */
    background:var(--brand-bg);
    transform: scale(1.05);
}

.option i {
    margin-right: 5px;
    color: var(--text-muted);
}

.post_header_svg{
    width:24px;

}

.photos_header_svg{
    height:24px;
}


.checkin_header_png{
    width:24px;
    height:24px;           
}

.repost_header_png{
    width:24px;
    height:24px;
}


.share_header_svg{
    width:20px;
    height:23px;
    padding:2px;
}

.action_save_svg {
    width: 24px;
    object-fit: contain;
}
.post_header_text {
    display: inline-block;
    width: 60px;
    text-align: left;
    white-space: nowrap;
}



.post_header_text{
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 18px;
    font-style: normal;
    margin-left:13px;
    font-weight: 400;
}


.repost_header_text{
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 18px;
    font-style: normal;
    margin-left:13px;
    font-weight: 400;
}

.comment_header_text{
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 18px;
    font-style: normal;
    margin-left:13px;
    font-weight: 400;

}

.video_header_svg{
    margin-top:2px;
    height:24px;
}



.post-container {
    overflow: hidden;
    width: 100%;
    padding:10px;
    min-height:auto;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    position: relative;
    background-color: var(--bg-primary);
    margin-bottom:15px;
}

.repost-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 8px;
    font-size: 13px;
    color: var(--text-muted);
    font-family: var(--font-primary);
}

.repost-header a {
    color: var(--text-muted);
    font-weight: 500;
    text-decoration: none;
}

.repost-header a:hover {
    text-decoration: underline;
}

.post_like_svg{
    width:24px;
    height:24px;
    margin-top:5px;
    margin-left:25px;
}




.line-container {
    width: 100%;
    height: 1px;
    background-color: var(--border-subtle);
    margin-top: 14px;
}

.responsive-card {
    display: block;
}


.post-all-like {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-overlay);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-modal);
}

.like-post-container {
    background-color: var(--bg-primary);
    width: 90%;
    max-width: 480px;
    max-height: 70vh;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
}

.like-post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.single-close-button,
.like-close-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
}

.single-close-button:hover,
.like-close-button:hover {
    background: var(--bg-tertiary);
}

.single-close-button svg,
.like-close-button svg {
    width: 28px;
    height: 28px;
}

.like-post-user-info {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.like-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.like-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s;
}

.like-item:last-child {
    border-bottom: none;
}

.like-item:hover {
    background-color: var(--bg-tertiary);
    cursor: pointer;
}

.like-item-left {
    display: flex;
    align-items: center;
    min-width: 0;
}


.connect-button request-sent{
    width:96px;
}



.connect-button {
    border-radius: 5px;
    background: var(--brand-secondary);
    color: var(--text-inverse);
    border: none;
    width:130px;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-right: 15px;
}


.like-item-dp {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.like-item-name {
    font-size: 16px;
    color: var(--text-secondary);
}

  
.post-header {
    display: flex;
    align-items: center;
    margin-top:15px;
}
.avatar {
    border-radius: 50%;
    height: 56px;
    margin-right: 10px;
    width: 56px;
}

.current-slide{
    font-size:16px;
}

.total-count{
    font-size:16px;
}


.post-avatar {
    border-radius: 50%;
    height: 50px;
    margin-right: 24px;
    width: 50px;
    margin-left:18px;
}


.user-info {
    flex-grow: 1;
}
.username {


    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.4px;
}
.post-meta {
    color: var(--text-muted);
    font-family: var(--font-primary);
    /* font-size: 18px; */
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.18px;




}
.more-options {
    cursor: pointer;
    /* font-size: 20px; */
    display:flex;
    margin-right:1.5%;
    color:var(--text-muted);
}

.follow-options{
    margin-right:10px;
    margin-top:2px;
    color: var(--text-link);
    width:93px;
    border: 1px solid var(--border-primary);
    border-radius:20px;
    text-align: center;
    font-family: var(--font-primary);
    /* font-size: 18px; */
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.4px;

}


.follow-options:hover {
    background-color:var(--brand-secondary);
    color: var(--text-inverse); 
    cursor: pointer;
}

.following-option{
    color: var(--text-dark-brown);
    text-align: center;
    font-family: var(--font-primary);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    
}



.post-content {
    margin-right: 2%;
    line-height: 1.4;
    margin-top:20px;
    font-family: var(--font-primary);
}

.engagement {
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-muted);
    display: flex;
    font-size: 14px;
    margin-right:15px;
    justify-content: space-between;
    padding: 10px 12px;
}
.actions {
    display: flex;
    gap: 6%;
    justify-content: flex-start;
    align-items: center;
    margin-left: 2%;
    flex-wrap: wrap;
}

.action-button {
    align-items: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    gap: 6px;
    transition: color 0.2s ease;
    font-size: 14px;
    padding: 8px 12px;
}

.comment_header_svg{
    height:23px;
    width:23px;
}



.post-text a {
    color: var(--brand-dark);
    text-decoration: underline;
    cursor: pointer;
}

.comments-section{
    margin-top:16px;
}

.comment {
    display: flex;
    margin-top:30px;
    margin-bottom: 15px;
    position: relative;
}
.comment-content {
    margin-left: 8px;
}


.reply-comment-content {
    margin-left: 8px;
    margin-top:10px;
}


.comment-time{
    color: var(--text-light);
    margin-left:10px;
    font-size:20px;

}


.reply-time{
    color: var(--text-light);
    margin-left:10px;
    font-size:18px;

}


.comment-user {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
}



.reply-comment-user {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 20px;
    margin-left:10px;
    font-style: normal;
    font-weight: 400;
}


.comment-actions {
    font-size: 20px;
    color: var(--text-tertiary);
    font-family: var(--font-primary);
    margin-left:10px;
}
.comment-action {
    color: var(--text-tertiary);
    font-family: var(--font-primary);
    cursor: pointer;
    margin-right: 10px;
}
.comment-box {
    align-items: center;
    display: flex;
    position: relative;
}

.comment-box .picker-container {
    position: fixed;
    bottom: auto;
    left: auto;
    z-index: 9999;
}

.comment-input {
    border: none;
    flex: 1;
    min-width: 0;
    margin-left:10px;
    margin-top:0;
    padding: 8px 72px 8px 12px;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
}

.comment-input:focus-visible,
.reply-comment-input:focus-visible {
    outline: none;
}

.comment-box-input .emoji-button {
    position: absolute;
    right: 42px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.comment-send-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.comment-send-btn:hover {
    opacity: 1;
}

.users-comments{
    font-size:20px;
    color: var(--text-secondary);
}


.send-button {
    background-color: var(--brand-primary);
    border: none;
    border-radius: 4px;
    color: var(--text-inverse);
    cursor: pointer;
    font-size: 14px;
    padding: 6px 12px;
}


.reply-button {
    background-color: var(--brand-primary);
    border: none;
    border-radius: 4px;
    color: var(--text-inverse);
    cursor: pointer;
    font-size: 14px;
    padding: 6px 12px;
    margin-left:20px;
    height:30px;
}


.reaction {
    align-items: center;
    cursor: pointer;
    color: var(--text-primary);
    font-family: var(--font-primary);
    margin-left:7px;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;



}
.reaction-icon {
    margin-right: 4px;
}
.mention {
    color: var(--color-mention);
    cursor: pointer;
    text-decoration: none;
}


.chat-container {
    border-right: 2px solid var(--brand-accent);
    border-bottom: 2px solid var(--brand-accent); 
    border-left: 2px solid var(--border-subtle);
    border-top:2px solid var(--border-subtle);    
    border-radius: 2px;
    margin-bottom:20px;
    display: flex;
    background: var(--bg-primary);
    align-items: center;
    width:100%;
    height:86px;
}

.profile-pic {
    height: 50px;
    border-radius: 50%;
    margin-left:20px;
    margin-right: 20px;
    overflow: hidden;
}
.profile-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.profile-pic-comment img {
    object-fit: cover;
}


.input-area {
    width:100%;
    height:40px;
    border: 1px solid var(--border-subtle);
    border-radius:10px;
}


.input-text {
    margin-left:30px;
    margin-top:10px;
    font-size:14px;
    border:None;
    width:260.8px
}

.action-buttons {
    display: flex;
    flex-direction: column;
    margin-right:10px
}
.user-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-success);
    color: var(--text-inverse);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
}
.image-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--brand-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left:21px;
}


.post-modal {
    background: var(--bg-primary);
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.post-textarea {
    width: 100%;
    height: 100px;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid var(--border-secondary);
    border-radius: 5px;
}
.file-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-top: 10px;
}
.post-submit-btn {
    width: 100%;
    background: var(--color-info);
    color: var(--text-inverse);
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}
.image-preview img {
    max-width: 100%;
    margin-top: 10px;
}
.post-video {
    width: 100%;
    height: auto;
    max-width: 960px;
    max-height: 720px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}


.card {
    text-align: center;
    border:unset;
}

.image-container {
position: relative;
max-width: 295px;
width:100%;
height:89px;
}

.profile-image {
width: 100%;
height: 89px;
display: block;
}

.profile-circle-image {
width: 67px;
height: 67px;
border-radius: 100%;
position: absolute;
bottom: -40px;
transform: translateX(-50%);
border: 1px solid var(--border-secondary);
}

.card h3 {
    font-size: 1em;
    height:24px;
    margin-top: 50px;
}

.card p {
    font-size: 1em;
    color: var(--text-light);
}



table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

table, th, td {
    border: none; 
}

th, td {
    font-size: 1em;
}



.rows-data{
    font-style: normal;
    font-weight: 600;
    text-align: center;
    font-family: var(--font-primary);
    font-size: var(--font-size-18, 18px);
}


.rows-headers{
    color: var(--text-muted);
    text-align: center;
    font-family: var(--font-primary);
    font-size: 16px;
    cursor:pointer;
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-19_69, 19.69px);
}


.custom-gradient-button {
    background: var(--brand-gradient);
    box-shadow: var(--shadow-sm);
}
.upload-icon {
    color: var(--brand-primary);
}





.next-button {
    background: var(--brand-gradient);
    color: var(--text-inverse);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    height:35px;
}
.what-to-talk-about {
    text-align: center;
    color: var(--text-muted);
    margin-top: 10px;
    margin-bottom: 10px;
}


.post-input {
    width: 100%;
    padding: 10px;
    text-color:var(--text-placeholder);
}


.edit-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    fill: var(--text-link);
    transition: transform 0.2s ease-in-out, fill 0.2s;
}

.edit-icon path {
    fill: var(--text-link) !important;
}



.paragraph {
    margin-top: 0;
}

.table-foolowers{
    width: 100%;
    margin-top: 0px;
    border-collapse: collapse;
}

.post-text{
    max-width: 620px;
    width:100%;
    height:auto;
    font-family: var(--font-primary);
    color: var(--text-secondary);
    margin-left:18px;
    margin-top:15px;
    margin-bottom:12px;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
}

.like-text{
    margin-left:13px;
    margin-top:10px;
    width:20px;
    color: var(--text-link);
    font-family: var(--font-primary);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;


}

.comment-box-input{
    max-width:588px;
    height:56px;
    width:100%;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    margin-right:2%;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    position: relative;
}

.profile-pic-comment{
    display:flex;
}



.post-comment-count {
    cursor: pointer;
    color: var(--text-secondary);
    text-align: center;
    font-family: var(--font-primary);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
}

.post-comment-count:hover {
    border-bottom: 1px solid var(--text-link);
}

.repost-engagement {
    cursor: pointer;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
}

.repost-engagement:hover {
    border-bottom: 1px solid var(--text-link);
}



.Comment-avatar{
    width:36px;
    height:36px;
    border-radius: 36px;
    margin-left:10px;
}


.reply-comment-avatar{
    width:36px;
    height:36px;
    border-radius: 36px;
    margin-left:10px;
}



.reaction:hover {
    border-bottom: 1px solid var(--text-link);
}

.post-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 2px;
}

.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slider-image {
    width: 100%;
    margin-left:2%;
    height: 450px;
    flex-shrink: 0;
    object-fit: contain;
    background-color: var(--bg-skeleton);
}

.prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-overlay);
    color: var(--text-inverse);
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 20px;
}
.prev-btn { left: 2%; }
.next-btn { right:0; }

.many-image-btn{
    right: 32px;
    top: 10%;
    background: transparent;
    position: absolute;
    transform: translateY(-50%);
    color: var(--text-inverse);
    border-radius: 11.355px;
    background: rgba(18, 18, 18, 0.70);
    border: none;
    padding: 10px;
    cursor: pointer;
    /* font-size: 20px; */

}

.slider-dots {
    text-align: center;
    margin-top: 10px;
}

.reply-box{
    margin-left:20px;
}

.reply-box-input{
    display:flex;
    height:40px;
    width:350px;
    border: 1px solid var(--border-secondary);
    border-radius: 10px;
    font-size: 18px;
}


.reply-profile-pic-comment {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
}

.reply-profile-pic-comment img.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.reply-comment-input{
    border:none;
    margin-left:10px;
    width:280px;
}
    
.reply-profile-pic-comment .emoji-button {
    cursor: pointer;
    margin-top:6px;
}


.dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: var(--text-placeholder);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s;
    cursor: pointer;
}

.reply-profile-pic-comment{
    /* width: 36px; */
    height: 36px;
    border-radius: 36px;
    margin-left: 20px;
}


.dot.active {
    background-color: var(--text-secondary);
}

.like_header_text {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 18px;
    font-style: normal;
    margin-left: 13px;
    font-weight: 400;
}    





.following-style {
    color:  var(--text-dark-brown);
    transition: none;
    cursor:pointer;
    margin-right:10px;
    pointer-events: auto;
    margin-top:3px;
    border-radius: 20px;
    width:120px;
    text-align:center;
    border: 1px solid var(--border-primary);


}
.following-style:hover {
    /* background-color: var(--text-inverse);
    color: var(--text-dark-brown);
    border:none */
    background-color:var(--brand-secondary);
    color: var(--text-inverse); 
    cursor: pointer;

}





.menu-container-post {
    position: absolute;
    z-index: var(--z-modal-backdrop);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    transform: translateX(-20px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 160px;
    padding: 10px 0;
}

.menu-item-post {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.menu-item-post:hover {
    background-color: var(--bg-light);
}

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

.separator-post {
    height: 1px;
    background: var(--border-primary);
    margin: 5px 0;
}


.media-section-content {
    margin-bottom: 16px;
}



.text-post{
    color: var(--text-dark-brown);
    font-size:18px;
}



.single-flex-container {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    width: 95%;
    height: 80vh;
    max-height: 700px;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--bg-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.single-post-image {
    flex: 1;
    min-width: 0;
    max-width: 55%;
    background: var(--bg-skeleton);
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-comment-list {
    overflow-y: auto;
    padding: 0 10px;
    flex: 1;
    min-height: 0;
    border-bottom: 1px solid var(--border-light);
}


.single-comment-reply{
    width: 32.89px;
    height: 16px;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;            
    color: var(--text-light);
    margin-bottom:18px;
    text-align: center;
    font-family: var(--font-primary);
    margin-left:10px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    cursor:pointer;


}

.single-comment-like{
    width: 32.89px;
    height: 16px;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    cursor:pointer;           
    color: var(--text-light);
    text-align: center;
    margin-left:10px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    
}




.single-comments-container {
    width: 45%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-left: 1px solid var(--border-light);
}


.single-post-header {
    display: flex;
    height: 60px;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
    position: relative;
}

.single-post-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-user-info {
    display: flex;
    margin-left: 20px;
}

.single-post-follow {
    margin-left: 30px;
    color: var(--brand-primary);
}

.single-post-user {
    font-size: 1rem;
    margin-top: 5px;
}


.reply-comment-text{
    margin-left:15%;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 18px;


}


.reply-comment-button{
    display:flex;
    align-items: center;
    margin-left:15%;
    
}


.single-overlay-text {
    position: relative;
    background: var(--bg-overlay);
    color: var(--text-inverse);
    padding: 8px;
    border-radius: 5px;
    margin-top: 8px;
}

.single-profile-pic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.single-user-details h4 {
    margin: 0;
}

.single-follow-btn {
    color: var(--color-info);
    font-size: 0.9em;
    cursor: pointer;
}

.single-post-tag {
    font-weight: bold;
    color: var(--text-muted);
}

.single-post-actions {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    flex-shrink: 0;
}

.single-single-post-container {
    margin: 0 auto;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 3px;
}

.single-post-user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.single-post-user-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.single-username {
    font-weight: 600;
    font-size: 14px;
}

.single-post-subtitle {
    font-size: 12px;
    color: var(--text-light);
}

.single-more-options {
    font-size: 20px;
    cursor: pointer;
}

.like_header_png{
    width:24px;
    height:24px;          
}

.single-comment-user img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 10px;
    object-fit: cover;
}

.single-comment-content {
    border-radius: 10px;
    max-width: 278px;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 7px;
}

.single-comment-username {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 20px;
    margin-left:12px;
    margin-top:7px;
    font-style: normal;
    font-weight: 400;
}

.single-comment-time {
    font-size: 16px;
    color: var(--text-light);
    font-weight:400;
    margin-left:5px;
}


.single-action-icon {
    margin-right: 16px;
    font-size: 24px;
    cursor: pointer;
}

.single-save-icon {
    margin-left: auto;
    font-size: 24px;
    cursor: pointer;
}

.single-likes {
    display: block;
    padding: 0 12px 4px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    font-family: var(--font-primary);
    flex-shrink: 0;
}

.single-post-time {
    padding: 0 8px 16px;
    font-size: 12px;
    color: var(--text-light);
}

.single-add-comment {
    display: flex;
    align-items: center;
    padding: 16px;
    height:36px;
}

.single-emoji-icon {
    font-size: 24px;
    margin-right: 16px;
    cursor: pointer;
}

.single-comment-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--text-primary);
}

.single-post-button {
    color: var(--color-info);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.5;
}

.single-heart-filled {
    color: var(--color-heart);
}


.single-comment-section::-webkit-scrollbar {
    width: 6px;
}

.single-comment-section::-webkit-scrollbar-thumb {
    background-color: var(--text-placeholder);
    border-radius: 4px;
}

.single-comment {
    display: flex;
    position: relative;
    height:50px;
}

.single-comment-text {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 20px;
    max-width:285px;
    margin-bottom:8px;
    width:100%;
    font-style: normal;
    font-weight: 400;
    margin-left:13px;
    line-height: 18px;
    display:block;
}



.single-comment-like img.single-like-icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-right: 4px;
}

.single-liked-count {
    width: 10px;
}


.single-comment-box {
    align-items: center;
    display: flex;
    padding: 8px 12px;
    flex-shrink: 0;
    border-top: 1px solid var(--border-light);
    gap: 8px;
}

.single-profile-pic-comment {
    display: flex;
    height: 24px;
}
.single-profile-pic-comment img {
    object-fit: cover;
    margin-left: 13px;
    height:24px;
    border-radius:50%;
}

.single-comment-box-input {
    flex: 1;
    min-width: 0;
}

.single-comment-input {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--border-secondary);
    border-radius: 0;
    flex-grow: 1;
    width: 80%;
    margin: 0 8px;
    padding: 8px 12px;
    outline: none;
    transition: border-color 0.3s ease-in-out;
}
.single-emoji-button {
    cursor: pointer;
    margin-left: 10px;
}

.single-picker-container {
    position: absolute;
    display: none;
}

.single-send-button {
    background-color: var(--brand-secondary);
    color: var(--text-inverse);
    border: none;
    cursor: pointer;
    height: 36px;
    padding: 0 16px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 6px;
    font-family: var(--font-primary);
    flex-shrink: 0;
}
.single-post-header .single-close-button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}


.single-post-view-replies{
    cursor:pointer;
    color:var(--text-light);
    display: flex;

}



body {
    -webkit-user-select: auto;
    user-select: auto;
}
 




@media (max-width: 768px) { /* --bp-tablet */

    .create-post{
        height:98px;
        border-radius:5px;
    }

    .create-post-input{
        height:36px;
    }

    .create-post-profile{
        height:36px;
        width:36px;
    }

    .create-post-options{
        padding-top: 0px;
        margin-top: 0px;            
    }

    .option{
        padding:0px;
        width:84px;
    }

    .option:hover{
        transform:scale(1.0);
    }

    .card{
        display: none !important;
    }

    .video_header_svg{
        width:17px;
        height:17px;
        margin-top:5px;
      }

    .photos_header_svg{
        width:17px;
        height:17px;
        margin-top:5px;            
    }

    .checkin_header_png{
        width:15px;
        height:16px;
        margin-top:7px;            
    }

    .user-action{
        height:40px;
        margin-right:3%;
    }

    .following-style{
        width:100px;
    }

    .reply-comment-user{
        font-size:14px;
    }

    .reply-comment-avatar{
        width:27px;
        height:27px;
    }

    .reply-profile-pic-comment img.avatar{
        width:27px;
        height:27px;

    }

    .reply-box{
        width:auto;
        margin-left:0px;
    }

    .like_header_png{
        width:15px;
        height:16px; 
        margin-left:10px; 
    }

    .repost_header_png{
        width:15px;
        height:15px;       
    }

    .share_header_svg{
        width:14px;
        height:14px;
    }

    .reply-box-input{
        width:70%;
        height:36px;
        font-size:14px;
    }

    .emoji-button{
        margin-top:3px;
    }
    
    .reply-comment-input{
        width:80%;
    }

    .reply-profile-pic-comment .emoji-button{
        margin-top:4px;

    }


    .comment_header_svg{
        width:15px;
        height:16px;
    }


    .post_header_text{
        font-size:14px;
        margin-left:3px;
        margin-top:4px;
    } 


    .repost_header_text{
        font-size: 14px;
        margin-left:3px;
    }


    
    .comment_header_text{
        font-size:14px;
        margin-left:3px;
    }


    .chat-container{
        border-right:None;
        border-left:None;
        height:70px;
        width:90vw;
        max-width:100%;
    }
    .Profile-Content-Section-Box-Content-Profile{
        width:100%;
    } 

    .Profile-Content-Section-Box-Content-Profile-Body2 {
        display: none;
    }

    .Profile-Content-Section-Box-Content-Profile-Body1 {
        width: 100%;
    }
    .post-container{
        border-radius:5px;
        padding:5px;
    }
    .post-header{
        width:100%;
        padding:0;
        margin-top:0px;
    }

    .post-text{
        width: 100%;
        height:auto;
        margin-left:4px;
        font-size:14px;
    }

    .slider-image{
        width:100%;
        height:200px;

    }

    .post-avatar {
        border-radius: 50%;
        height: 36px;
        margin-right: 13px;
        width: 36px;
        margin-top:6px;
        margin-left: 4px;
    }

    .post-meta{
        font-size:12px;
    }


    .like-text{
        margin-left:2px;
    }
    .profile-pic{
        width:35%;
        margin-left:0px;
        margin-right:4px;

    }

    .input-area{
        border-radius:20px;
        border:None;
        margin-left:0px;
    }

    .input-area input {
        width: 95%;
        font-size: 14px;
        padding: 8px;
        margin-left: 0px;
        border: 1px solid var(--border-subtle);
        border-radius: 10px;
    }

    .image-button{
        margin-left:auto;
    }

    .post-comment-count{
        margin-right:0px;
        font-size:12px;
    }

    .reaction{
        margin-left:2px;
        font-size:12px;
    }

    .repost-engagement{
        font-size:12px;
    }

    .avatar{
        width:35px;
        height:35px;
    }

    .comment-box-input{
        height:36px;
        display:flex;
        align-items: center;
        border-radius: 5px;
        border: 0.643px solid var(--border-subtle);
        background: var(--bg-primary);
    }

    .comment{
        margin-top:15px;
    }
    
    .comment-input{
        padding:0px;
        font-size:12px;
        margin-top:0px;
    }
    
    .Comment-avatar{
        width:27px;
        height:27px;

    }

    .comment-user{
        font-size:16px;
    }

    .users-comments{
        font-size:14px;
    }

    .comment-actions{
        font-size:16px;
    }

    .comment-time{
        font-size:15px;
        margin-left:5px;

    }


    .engagement{
        padding:0px;
        margin-left:4px;
    }

    .like_header_text {
        font-size: 14px;
        margin-left:2px;
    }  



    .more-options {
        font-size: 13px;
    }

    .follow-options{
        margin-right:3px;
        white-space: nowrap;
        width:84px;
        height:24px;
        font-size:14px;
        border-radius:10px;
        border:0.5px solid var(--border-primary);
        text-align: center;
    }

    .post-content{
        margin-top:5%;
    }

    .username{
        width:150px;
        font-size:14px;
        margin-top:10px;
    }
    .design-post{
        margin-left:245px;
    }

    .Slider-Body-Boxes-Box:not(.Slider .Slider-Body-Boxes-Box) {
        flex: 1 1 33.33%;
        min-width: 349.5px;
    }

    .post-slider{
        margin-left:0px;
    }

    /* Comments modal — stack vertically on mobile */
    .single-flex-container {
        flex-direction: column;
        height: 90vh;
        max-height: none;
        width: 95%;
        border-radius: 12px;
    }

    .single-post-image {
        max-width: 100%;
        height: 200px;
        flex-shrink: 0;
    }

    .single-comments-container {
        width: 100%;
        min-width: 0;
        flex: 1;
        min-height: 0;
        border-left: none;
        border-top: 1px solid var(--border-light);
    }

    /* Likes modal */
    .like-post-container {
        width: 95%;
        max-height: 80vh;
    }

}


/* ===== Share Bottom Sheet Modal ===== */
.share-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: shareOverlayIn 0.2s ease;
}
@keyframes shareOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.share-sheet {
    background: var(--bg-primary);
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 500px;
    padding: 16px 0 8px;
    animation: shareSheetUp 0.25s ease;
}
@keyframes shareSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.share-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--border-secondary);
    border-radius: 2px;
    margin: 0 auto 12px;
}
.share-sheet-title {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-link);
    text-align: center;
    margin-bottom: 12px;
}
.share-sheet-options {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 12px 16px 16px;
}
.share-option-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    transition: background 0.15s;
    min-width: 72px;
}
.share-option-btn:hover {
    background: var(--brand-bg);
}
.share-option-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-lighter);
    border: 1px solid var(--brand-accent);
}
.share-option-icon.active {
    background: var(--brand-accent);
}
.share-option-icon img,
.share-option-icon svg {
    width: 22px;
    height: 22px;
}
.share-option-label {
    font-family: var(--font-primary);
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.share-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-secondary);
    color: var(--text-inverse);
    padding: 8px 20px;
    border-radius: 20px;
    font-family: var(--font-primary);
    font-size: 14px;
    z-index: var(--z-modal);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.share-toast.visible {
    opacity: 1;
}

/* Repost indicator on feed posts */
.repost-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--brand-accent);
    font-size: 13px;
    font-family: var(--font-primary);
}
.repost-indicator img {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

/* ===== Collection Modal ===== */
.collection-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.collection-modal-sheet {
    background: var(--bg-primary);
    border-radius: 14px;
    width: 90%;
    max-width: 400px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.25s ease;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.collection-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-primary);
}

.collection-modal-title {
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}

.collection-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: background 0.15s;
}

.collection-modal-close:hover {
    background: var(--bg-tertiary);
}

.collection-modal-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.collection-modal-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.15s;
}

.collection-modal-item:hover {
    background: var(--bg-tertiary);
}

.collection-modal-name {
    font-family: var(--font-primary);
    font-size: 15px;
    color: var(--text-secondary);
    flex: 1;
}

.collection-modal-count {
    font-family: var(--font-primary);
    font-size: 13px;
    color: var(--text-light);
}

.collection-modal-empty {
    text-align: center;
    color: var(--text-light);
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 20px 0;
}

.collection-modal-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-primary);
}

.collection-modal-new-btn {
    width: 100%;
    padding: 10px;
    background: var(--brand-lighter);
    border: 1px solid var(--brand-accent);
    border-radius: 10px;
    color: var(--brand-accent);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.collection-modal-new-btn:hover {
    background: var(--brand-bg);
}

.collection-modal-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.collection-modal-input {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-primary);
    outline: none;
    transition: border-color 0.2s;
}

.collection-modal-input:focus {
    border-color: var(--brand-accent);
}

.collection-modal-create-btn {
    padding: 9px 18px;
    background: var(--brand-accent);
    border: none;
    border-radius: 10px;
    color: var(--text-inverse);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.collection-modal-create-btn:hover {
    opacity: 0.9;
}

.collection-modal-error {
    margin: 6px 0 0;
    font-family: var(--font-primary);
    font-size: 13px;
    color: var(--color-error, #ef4444);
}


/* Location display on post card */
.post-location {
    color: var(--text-muted);
}

.post-location svg {
    vertical-align: -1px;
    margin-right: 2px;
}